/* ===================================================================
 * member.css — ご利用者・ご家族向けログイン(block/page/member.php)
 *
 * ログイン: 中央の案内文 → 幅 860px のフォーム(PC はラベル 220px + 入力欄。入力欄は最大 560px)→ 中央のボタン。
 * 入力欄は Bootstrap .form-control の枠・角丸・余白・フォーカスを、ラフの入力欄の見た目に合わせて上書きする。
 * 会員について: contact-band の「文 + ボタン」の形をそのまま使う。
 * =================================================================== */

/* --- ログイン ----------------------------------------------------- */

.member-login__field {
  grid-template-columns: 220px minmax(0, 1fr);
}

.member-login__input.form-control {
  max-width: 560px;
  padding-block: 10px;
  border-color: color-mix(in srgb, var(--project-color-text) 67.2%, var(--project-color-bg));
  border-radius: var(--project-radius);
  line-height: 1.6;
}

/* Bootstrap のフォーカスの青い枠を消し(影は .shadow-none で消す)、サイト共通のフォーカス表示(ブランド色の輪郭線)にそろえる */
.member-login__input.form-control:focus {
  border-color: color-mix(in srgb, var(--project-color-text) 67.2%, var(--project-color-bg));
}

.member-login__input.form-control:focus-visible,
.member-login__checkbox:focus-visible {
  outline: 3px solid var(--project-color-brand);
  outline-offset: 2px;
}

.member-login__remember {
  min-height: 44px;
}

/* Bootstrap の reboot が消すブラウザ既定の余白を戻し、入力欄の左端から少し内側に置く */
.member-login__checkbox {
  width: 20px;
  height: 20px;
  margin: 3px 3px 3px 4px;
}

@media (min-width: 768px) {
  .member-login__label {
    padding-top: 10px;
  }
}

@media (max-width: 767.98px) {

  .member-login__field {
    grid-template-columns: minmax(0, 1fr);
  }
}