/* ============================================================
   ログインMFA 専用スタイル [PC]
   ・ログイン画面（ロック警告版。.login-lock 配下に限定）
   ・認証コード入力画面（.mfa-auth 配下に限定）
   ・ログインボタン下の注記（.login-mfa-note。ログイン画面・応募二股画面で共用）

   既存CSSは流用せず自前で定義する。基底ルール（例: #login-form #login-button
   = id2つ (2,0,0)）に打ち勝つよう、セレクタに id を含めて詳細度を上げている。
   ============================================================ */

/* #login-registration-container（会員登録と共用の基底CSS）は使わず、認証コード入力専用の
   #login-containerを新設し、必要なスタイルのみ複製する（registration要素が無いため） */
.mfa-auth #login-container {
  width: 980px;
  margin: auto;
  display: flex;
  justify-content: center;
  height: 583px;
}

.mfa-auth #login-container .outer-radius {
  background: #e4e4e4;
  border-radius: 10px;
  padding: 4px;
  margin: 35px auto 35px auto;
  display: flex;
}

.mfa-auth #login-container h2 {
  font-size: 19px;
  margin-bottom: 20px;
}

/* 認証コード入力画面のカード枠の高さを固定（width・paddingは基底のまま高さのみ上書き）。
   基底 #login-form(1,0,0) に勝つよう .mfa-auth を含める (1,1,0) */
.mfa-auth #login-form {
  height: 270px;
}

/* 非活性時の「ログイン」ボタン（ソリッド #B5B5B6・50%透過）
   基底 #login-form #login-button(2,0,0) に勝つため #login-form を含める (2,2,0) */
.mfa-auth #login-form #login-button:disabled {
  background: #b5b5b6;
  cursor: default;
  opacity: 0.5;
}

/* エラー表示を#login-container（カード）と同じ display:flex; justify-content:center で中央寄せする
   （display:blockにすると子要素(.login-error-inner)のmargin-topが相殺して上に余白ができるため使わない） */
.mfa-auth #login-error-area {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

/* カード左右の余白（暗黙の12.5px）を25pxに広げ、ラベルと入力欄の隙間（基底20px）を10pxに狭める。
   影響をinput欄まわりだけに限定するため#login-input-areaにpaddingを持たせる
   （#login-form自体にpaddingを付けるとボタン等カード全体のレイアウトに影響するため避ける）。
   paddingは17.5pxとし、入力欄の左端(17.5+105+10=132.5px)が
   #login-buttonの中央寄せ位置((530-265)/2=132.5px)に一致するようにする */
.mfa-auth #login-form #login-input-area {
  padding: 0 17.5px;
}

.mfa-auth #login-form #login-input-area .login-input-inner dd {
  margin-left: 10px;
}

/* 基底の入力欄はbox-sizing指定が無くcontent-boxのため、width:100%にborder(2px*2)が
   上乗せされdd(親)の幅をはみ出す。今回は隙間を詰めてぴったりの幅にしたため顕在化したので、
   .mfa-auth限定でborder-boxにしてはみ出しを無くす */
.mfa-auth #login-form #login-input-area .login-input-inner dd input {
  box-sizing: border-box;
}

/* 注意文は入力欄の左端に合わせて左寄せする（親#login-input-areaのpadding25pxは自動で乗るため、
   ここではラベルdt105px + 隙間10px分の115pxのみ指定する）。
   ボタンは中央のまま。全体左寄せ（左隅ベタ付け）にはしない。 */
.mfa-auth #login-form #login-input-area .mfa-code-note {
  text-align: left;
  padding-left: 115px;
  /* 新規会員登録画面の同種の注意書き（type_user_register_pc.htmlの.mod-text-input.long）
     とフォントサイズ・word-breakを合わせる */
  font-size: 14px;
  word-break: break-all;
  /* all.cssの汎用pルール（line-height:130%）だと詰まって見えるため個別に広げる */
  line-height: 1.6;
}

/* 認証コード入力画面独自の画面デザインのため上書き。
   基底の margin-bottom:66px（通常ログインのソーシャル導線用）は不要なため0にする（再送リンクが下に続くため） */
.mfa-auth #login-form #login-button-area {
  margin-top: 20px;
  margin-bottom: 0;
}

/* 認証コード再送リンク（テキストリンク体裁）。
   <button>は<a>と異なり既定のcolor/text-decorationを持たないため明示指定する */
.mfa-auth .mfa-resend {
  margin-top: 15px;
}
.mfa-auth .mfa-resend-link {
  background: none;
  border: none;
  padding: 0;
  color: #06c;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* 再送カウントダウン文言（「◯秒後に再送可能」）。初期非表示（表示/非表示の切り替えはJSで行う） */
.mfa-auth #resend-countdown {
  display: none;
  font-size: 13px;
  color: #999;
}

/* ============================================================
   ログイン画面TOP ロック警告版 [PC]
   ・認証コード不一致／再発行が規定回数に達してアカウントがロックされた場合に、
     ログインカード内の入力フォームに代えて表示する（login_pc.html の .login-lock 配下に限定）
   ・フォントは画面共通の指定（base.css、Meiryoを含む）をそのまま使う
   ============================================================ */

/* カードの幅・高さ・余白・角丸は基底の #login-form（530×430 + padding 30/25/25）のまま。
   中身を縦並び・中央揃えにする */
#login-form.login-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 見出し「ログイン」。login_registration.css の #login-registration-container h2 で指定された
   margin-bottom:20px が警告文エリアの上余白(20px)と重なるため0にする */
#login-form.login-lock h2 {
  font-weight: bold;
  line-height: 28px;
  color: #333;
  margin-bottom: 0;
}

/* 警告文エリア（縁2px #FF6347・塗り #FFF7F8）。上下20pxの余白を空けてカード幅いっぱいに広げる */
#login-form.login-lock #login-lock-warning-area {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  margin: 20px 0;
  padding: 20px 51px 17px 51px;
  background: #fff7f8;
  border: 2px solid #ff6347;
}

#login-form.login-lock #login-lock-warning-area .login-lock-warning-title {
  width: 393px;
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
  color: #ff6347;
}

/* 本文は左寄せ。all.cssの汎用pルール（margin上下10px・line-height:130%）を上書きする。
   flex内ではmarginがgapに加算され見出し・ボタンとの間隔が広がるため、marginは0にする */
#login-form.login-lock #login-lock-warning-area .login-lock-warning-text {
  margin: 0;
  width: 393px;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  color: #ff6347;
}

/* パスワード再発行ボタン（縁1.5px #E4E4E4・塗り #FFF・角丸3px） */
#login-form.login-lock #login-lock-warning-area .login-lock-reminder-button {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 177px;
  height: 38px;
  background: #fff;
  border: 1.5px solid #e4e4e4;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  letter-spacing: 0.5px;
  color: #000;
  text-decoration: none;
}

/* 補足テキストは警告文エリアの外にカード幅いっぱいで中央寄せ表示する。
   警告文エリアとの間隔は警告文エリア側のmargin(20px)で取るため、all.cssの汎用pルールのmarginは0にする */
#login-form.login-lock .login-lock-warning-note {
  margin: 0;
  align-self: stretch;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: #333;
}

/* ログインボタン下の注記（ログイン画面・応募二股画面で共用）。
   文字色は周囲に合わせるため指定しない（各画面のbody既定色を継承） */
.login-mfa-note {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 20px;
  text-align: center;
}