/* styles.css */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平方向中央揃え */
}

.left, .right {
  width: 50%;
  display: flex;
  justify-content: center; /* 水平方向中央揃え */
  align-items: center;    /* 垂直方向中央揃え */
}

.right {
  background-color: #fee6eb;
  padding: 20px; /* 右側の余白を追加 */
  box-sizing: border-box; /* ボックスの幅計算にpaddingを含む */
}

.content {
	display: flex;
	flex-direction: column; /* 縦に並べる */
	align-items: center;    /* 各コンポーネントを横方向に中央揃え */
}

 form {
  width: 400px;
  background-color: #fff;
  padding: 1.875rem 2.1875rem;
  border-radius: 8px;
  border: 1px solid rgb(225, 230, 235);
  box-shadow: rgba(87, 93, 98, 0.1) 0px 0px 8px 0px;
}

.box {
  width: 100%; /* 横幅を常に親要素（右エリア）の100%に設定 */
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box; /* パディングを含めて幅を計算 */
  border-radius: 8px;
  border: 1px solid rgb(225, 230, 235);
  box-shadow: rgba(87, 93, 98, 0.1) 0px 0px 8px 0px;
}

.box-title {
  font-weight: bold;
  font-size: 1.2rem;
  padding: 0 10px;
  position: relative;
}

/* 「パスワードを表示する」を中央寄せ */
.form-check {
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;
  gap: 5px; /* チェックボックスとラベルの間隔を調整 */
}

.form-check-label {
  font-size: 0.85rem; /* 小さなフォントサイズ */
  color: #666;       /* 少し薄い色で表示 */
}

/* パスワード専用ボタン */
.passwordWrap {
	border-radius: var(--bs-border-radius) !important;
	z-index: 1 !important;
}

.btn.btn-password {
	position: absolute;
	top: 0;
	right: 10px;
	height: 100%;
	width: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	z-index: 2 !important;
}

.btn.btn-password:focus,
.btn.btn-password:active {
	outline: none;
	  box-shadow: none;
	background-color: var(--form-background-color);
	border: none !important;
}

.btn-primary.login::before {
	margin-right: 8px;
	content: url("/kakenhi/img/icon/login-16954dfa7bb82737c787aae37bfc5af1.svg");
	filter: var(--btn-primary-filter);
}

/* placeholder color */
.login-input::placeholder {
	color: rgb(227, 227, 227);
}

/* ログインボタン */
.login-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60px !important;
}

/* 大学ロゴ */
.academic-logo-img {
	display: block;
	margin: 0 auto;
	padding-bottom: 20px;
	max-width: 160px;
	height: auto;
}