/* =====================================================================
   bySENSE — account.css  (会員系フォーム 系統A・B = ec-force 標準 /shop/customers, /shop/customer)
   ────────────────────────────────────────────────────────────────────────
   対象テンプレート（テーマ直編集・安定レイヤ＝build.sh 非生成）:
     系統A（.account-stage / 1カラム塗りフォーム）
       theme/shop/customers/registrations/new.html.liquid        会員登録（項目多）
       theme/shop/customers/passwords/new.html.liquid            パスワード再設定メール送信
       theme/shop/customers/passwords/edit.html.liquid           パスワード再設定
       theme/shop/customer/base/show_registration_member.html.liquid  本会員登録
     系統B（.login-stage / 2カラム ログイン＋会員登録CTA＋LINE/Amazon）
       theme/shop/customers/sessions/new.html.liquid             ログイン
   ・全画面 layout(shop.html.liquid) が <main class="l-container"> を描画。本文に
     #site-header/#site-footer は持たない（ヘッダー/フッターは layout がサーバ描画）。
   ・濃色ヘッダー（明背景での視認性）＝ components.css の
     body:has(.l-container) .site-header{color:var(--ink)…} が自動適用。
     固定ヘッダー回避の padding-top も components.css の .l-container{padding-top:var(--header-h)}。
   ────────────────────────────────────────────────────────────────────────
   ★技術的負債★ 本CSSは contact.css と同一基盤（フォームスキンの色・縦積み・select chevron・
     checkbox __frame 流用・塗りボタン・p-page_header・流体ステージ）を共有する。将来は
     contact.css と本CSSの重複部を form-skin.css へ統合し、各ページは固有差分のみ持つのが望ましい。
     現状は C3(contact) と C7(account) を独立ファイルで運用＝重複を許容（リスク最小化を優先）。
   ────────────────────────────────────────────────────────────────────────
   ★フォーム機能保持の大原則（壊すと送信/ログイン/登録不能）★
   ・<form> の action/method/id・hidden _method・{% csrf_meta_tags %}・
     全 input/select/textarea の name/id/value/placeholder・validate[...] クラス・
     prefectures/sexes/jobs/birth ループ・各種 checkbox・shop_form_settings 分岐は
     マークアップ側で 1行も触らない。本CSSは「見た目」だけをステージスコープで与える。
   ・ec-force 標準の u-color__* / u-text--{input,btn,head,body} は bundle.css に実体が無く
     色が来ない前提 → 入力/ボタン/文字の色は本CSSで要素単位に確実付与。
   ・標準フォーム要素は appearance:none;background:none;border:none でリセット済（bundle）。
     形状（height/padding/border-width/checkbox の __frame L字）は bundle が供給 → 本CSSは色と
     縦積みレイアウトを上書き（詳細度は :is(.account-stage,.login-stage) スコープ＝クラス2以上で勝つ）。
   ────────────────────────────────────────────────────────────────────────
   明ページ: 背景 var(--bg)=#d0d0d0 / 文字 var(--ink)=#393c41 / 入力欄 var(--white)=#fff。
   全クラスは .account-stage / .login-stage 配下にスコープ＝他ページ無影響。
   ===================================================================== */

/* ============ ステージ流体化（contact.css / items.css と同一機構） ============
   .l-container の子は .stage を継承しない → faq/sub/items/contact と同じ clamp 機構で再現。
   width は clamp(floor,100vw,frame)・margin-left で中央寄せ。 */
.account-stage,
.login-stage {
  position: relative;
  width: clamp(var(--floor), 100vw, var(--frame));
  min-width: var(--floor);
  margin-left: calc((100vw - clamp(var(--floor), 100vw, var(--frame))) / 2);
  margin-right: 0;
  background: var(--bg);
}

/* ============ コンテンツ幅（系統A=狭め1カラム680 / 系統B=2カラム960） ============
   padding-top は l-container が固定ヘッダー回避済 → デザイン上のギャップ(64px)のみ。
   footer 余白は components.css の .site-footer{margin-top} が担当。 */
.account-content {
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 64px;
}
.login-content {
  width: min(960px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 64px;
}

/* ============ ブランドヘッダー帯（contact .ct-head と共通様式・中央寄せ） ============ */
.ac-head {
  text-align: center;
  padding-bottom: 36px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.ac-head__en {
  font-family: var(--sans); font-weight: 500;
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-60);
}
.ac-head__ja {
  margin-top: 12px;
  font-family: var(--serif); font-weight: 500;
  font-size: 28px; line-height: 1.4; letter-spacing: .08em; color: var(--ink);
}
.ac-head__lead {
  margin-top: 18px;
  font-family: var(--sans); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60);
}
/* 見出し帯リード内の必須マーク（u-color__text--alert はテナント依存＝色が来ない前提で確実付与） */
.ac-head__lead .u-color__text--alert { color: #b23a2e; margin-right: 6px; font-weight: 500; }

/* ---- 補助リンク（「既に会員の方はログイン」＝枠線ボタン・contact FAQ 導線様式） ---- */
.ac-altlink { display: flex; justify-content: center; margin-bottom: 8px; }
.ac-altlink__btn {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: none; width: auto; height: auto; padding: 13px 36px;
  border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); background: transparent;
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .1em;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.ac-altlink__btn:hover { background: var(--ink); color: var(--white); opacity: 1; }

/* ============ フラッシュ／サーバエラー（標準クラスを装飾） ============ */
:is(.account-stage, .login-stage) .control-alert {
  margin-bottom: 24px; padding: 14px 18px; border-radius: 2px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1.6;
}
:is(.account-stage, .login-stage) .alert-danger {
  background: rgba(192, 57, 43, .07); border: 1px solid rgba(192, 57, 43, .38); color: #b23a2e;
}
:is(.account-stage, .login-stage) .alert-success {
  background: var(--white); border: 1px solid var(--line); color: var(--ink);
}
/* customer.error_messages ブロック（.alert.alert-danger 単体・フォーム内）も赤系に */
:is(.account-stage, .login-stage) .alert.alert-danger {
  margin-bottom: 24px; padding: 14px 18px; border-radius: 2px;
  background: rgba(192, 57, 43, .07); border: 1px solid rgba(192, 57, 43, .38);
  font-family: var(--sans); font-size: 14px; line-height: 1.7;
}
:is(.account-stage, .login-stage) .alert.alert-danger .text,
:is(.account-stage, .login-stage) .alert.alert-danger p { color: #b23a2e; margin: 0; }

/* ============ フォーム外枠（系統A・標準 padding/max-width を解除） ============ */
.account-stage .p-account_form { padding: 0; }
.account-stage .p-account_form__inner { max-width: none; width: 100%; margin: 0; }

/* 必須マーク（テナント依存＝確実付与） */
:is(.account-stage, .login-stage) .u-color__text--alert { color: #b23a2e; }
:is(.account-stage, .login-stage) .c-form_table > tbody > tr > th .u-color__text--alert {
  margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: .04em; vertical-align: 1px;
}

/* ============ 入力テーブル → 縦積み化（PC もラベル上・入力下） ============ */
:is(.account-stage, .login-stage) .c-form_table { table-layout: auto; width: 100%; margin: 0; }
:is(.account-stage, .login-stage) .c-form_table,
:is(.account-stage, .login-stage) .c-form_table > tbody,
:is(.account-stage, .login-stage) .c-form_table > tbody > tr,
:is(.account-stage, .login-stage) .c-form_table > tbody > tr > th,
:is(.account-stage, .login-stage) .c-form_table > tbody > tr > td { display: block; width: 100%; }
:is(.account-stage, .login-stage) .c-form_table > tbody > tr { margin-bottom: 24px; }
:is(.account-stage, .login-stage) .c-form_table > tbody > tr:last-child { margin-bottom: 0; }
:is(.account-stage, .login-stage) .c-form_table > tbody > tr > th {
  font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .08em;
  color: var(--ink); text-align: left; white-space: normal; padding: 0 0 9px; margin: 0;
}
:is(.account-stage, .login-stage) .c-form_table > tbody > tr > td { position: relative; padding: 0; }
/* 空ラベル th（オプトイン/同意行）は余白を詰める */
:is(.account-stage, .login-stage) .c-form_table > tbody > tr > th:empty { padding: 0; }

/* ---- input / textarea / select 共通（色は本CSSで確実付与） ---- */
:is(.account-stage, .login-stage) .c-form_table input[type="text"],
:is(.account-stage, .login-stage) .c-form_table input[type="email"],
:is(.account-stage, .login-stage) .c-form_table input[type="tel"],
:is(.account-stage, .login-stage) .c-form_table input[type="password"],
:is(.account-stage, .login-stage) .c-form_table textarea,
:is(.account-stage, .login-stage) .c-form_table select {
  width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); font-family: var(--sans); font-weight: 400;
  transition: border-color .3s var(--ease);
}
:is(.account-stage, .login-stage) .c-form_table input[type="text"],
:is(.account-stage, .login-stage) .c-form_table input[type="email"],
:is(.account-stage, .login-stage) .c-form_table input[type="tel"],
:is(.account-stage, .login-stage) .c-form_table input[type="password"],
:is(.account-stage, .login-stage) .c-form_table select { height: 50px; font-size: 16px; padding: 0 16px; }
:is(.account-stage, .login-stage) .c-form_table textarea {
  min-height: 120px; font-size: 16px; padding: 14px 16px; line-height: 1.8; resize: vertical;
}
:is(.account-stage, .login-stage) .c-form_table input:focus,
:is(.account-stage, .login-stage) .c-form_table textarea:focus,
:is(.account-stage, .login-stage) .c-form_table select:focus { border-color: var(--ink); outline: none; }
:is(.account-stage, .login-stage) .c-form_table input::placeholder,
:is(.account-stage, .login-stage) .c-form_table textarea::placeholder { color: var(--ink-60); opacity: .5; }
:is(.account-stage, .login-stage) .c-form_table input:disabled { background: var(--bg-alt); color: var(--ink-60); cursor: not-allowed; }

/* ---- 氏名/カナ 2分割（is-single = 1欄）・電話 3分割（flex 間隔だけ整える） ---- */
:is(.account-stage, .login-stage) .c-form_table__name { display: flex; gap: 16px; }
:is(.account-stage, .login-stage) .c-form_table__name input { max-width: none; }
:is(.account-stage, .login-stage) .c-form_table__tel { display: flex; flex-wrap: wrap; align-items: center; }
:is(.account-stage, .login-stage) .c-form_table__tel input { max-width: 132px; }
:is(.account-stage, .login-stage) .c-form_table__tel > * { margin-bottom: 0; }
:is(.account-stage, .login-stage) .c-form_table__tel > *:not(:last-child) { margin-right: 10px; }
:is(.account-stage, .login-stage) .c-form_table__tel span { color: var(--ink-60); }
/* 末尾の補足テキスト（電話注記）は改行して全幅 */
:is(.account-stage, .login-stage) .c-form_table__tel #phone_note { flex: 1 0 100%; margin: 6px 0 0; font-size: 13px; line-height: 1.7; }

/* ---- 郵便番号（〒 + zip 2分割 / is-single = 1欄。標準に住所検索ボタンは無し） ---- */
:is(.account-stage, .login-stage) .c-form_table__postcode { display: flex; flex-wrap: wrap; align-items: center; }
:is(.account-stage, .login-stage) .c-form_table__postcode input { max-width: 120px; }
:is(.account-stage, .login-stage) .c-form_table__postcode > *:not(:last-child) { margin-right: 10px; }
:is(.account-stage, .login-stage) .c-form_table__postcode span { color: var(--ink-60); }

/* ---- select（都道府県/性別/職業）標準 :after のアイコンフォント chevron を独自 CSS 三角へ ---- */
:is(.account-stage, .login-stage) .c-form_table__select { position: relative; display: block; }
:is(.account-stage, .login-stage) .c-form_table__select select { padding-right: 44px; cursor: pointer; }
:is(.account-stage, .login-stage) .c-form_table__select::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
  margin-top: -6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  transform: rotate(45deg); pointer-events: none; font-size: 0;
}

/* ---- 生年月日（年/月/日 = .c-form_table__tel 内に select 3つ + 単位 span） ---- */
/* base の width:100% を打ち消し compact 化（flex 行で 年[select]年[select]月[select]日 と並ぶ） */
:is(.account-stage, .login-stage) .c-form_table__tel .c-form_table__select { display: inline-block; }
:is(.account-stage, .login-stage) .c-form_table__tel .c-form_table__select select {
  width: auto; min-width: 96px; max-width: 116px; padding-right: 38px;
}
:is(.account-stage, .login-stage) .c-form_table__tel .c-form_table__select::after { right: 14px; }

/* ---- checkbox（同意/オプトイン/ログイン保持/連携番号）= 標準 __frame L字を bySENSE インクで ---- */
:is(.account-stage, .login-stage) .c-form_table__newsletter { padding: 6px 0 0; }
:is(.account-stage, .login-stage) .c-form_table__checkbox { display: flex; align-items: center; }
:is(.account-stage, .login-stage) .c-form_table__checkbox input[type="checkbox"] {
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--white); margin-right: 10px; flex-shrink: 0; cursor: pointer;
}
:is(.account-stage, .login-stage) .c-form_table__checkbox input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
/* __frame = 左+下ボーダーのL字 rotate(-45deg)（bundle）。checked 時のみ opacity:1（bundle）。
   チェックマーク色を白に（--ink 背景の上） */
:is(.account-stage, .login-stage) .c-form_table__checkbox__frame { border-left-color: var(--white); border-bottom-color: var(--white); }
:is(.account-stage, .login-stage) .c-form_table__checkbox__text {
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.7; color: var(--ink-60);
}
:is(.account-stage, .login-stage) .c-form_table__checkbox__text a {
  color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: opacity .3s var(--ease);
}
:is(.account-stage, .login-stage) .c-form_table__checkbox__text a:hover { opacity: .6; }

/* ---- 性別 radio（標準は <select>。万一 radio 描画の場合の防御＝checkbox __frame と同方式の円） ---- */
:is(.account-stage, .login-stage) .c-form_table input[type="radio"] {
  width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%;
  background: var(--white); margin-right: 8px; vertical-align: -3px; cursor: pointer; position: relative;
}
:is(.account-stage, .login-stage) .c-form_table input[type="radio"]:checked { border-color: var(--ink); }
:is(.account-stage, .login-stage) .c-form_table input[type="radio"]:checked::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--ink);
}

/* ---- 連携用顧客番号トグル（link_number） ---- */
:is(.account-stage, .login-stage) .c-form_table__fill-code { margin-top: 12px; }
:is(.account-stage, .login-stage) .c-form_table__fill-code__text {
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.7; color: var(--ink-60); margin: 0 0 8px;
}

/* ============ 系統A 送信ボタン（塗り）／メール送信ボタン／戻るリンク（下線） ============ */
.account-stage .p-account_form__inner__bottom { text-align: center; margin-top: 48px; }
.account-stage .p-account_form__inner__bottom__btn,
.account-stage .p-account_form__inner__bottom__mailbtn {
  display: inline-flex; align-items: center; justify-content: center;
  max-width: none; width: auto; min-width: 280px; height: auto; padding: 18px 52px;
  margin: 0 auto; background: var(--ink); color: var(--white); border: 1px solid var(--ink);
  border-radius: 2px; font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: .12em; cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.account-stage .p-account_form__inner__bottom__btn:hover,
.account-stage .p-account_form__inner__bottom__mailbtn:hover { background: transparent; color: var(--ink); opacity: 1; }
.account-stage .p-account_form__inner__bottom__link {
  display: inline-block; margin-top: 22px; text-decoration: none;
  font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .04em;
  color: var(--ink-60); border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: opacity .3s var(--ease);
}
.account-stage .p-account_form__inner__bottom__link:hover { opacity: .6; }

/* =====================================================================
   系統B — ログイン（.p-login 2カラム：ログインフォーム ｜ 会員登録CTA＋LINE/Amazon）
   ===================================================================== */
.login-stage .p-login { width: 100%; }
.login-stage .p-login__inner {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
}
/* 各カラムは grid トラックを満たす。bundle は flex 前提の width:calc((100%-60px)/2) を
   付与する（grid セル内では (トラック幅-60)/2 に潰れ＝内容が縦書き化する）ため width:100% で打消す。 */
.login-stage .p-login__inner__login { width: 100%; padding-right: 56px; }
.login-stage .p-login__inner__registration { width: 100%; padding-left: 56px; border-left: 1px solid var(--line); }

/* ---- カラム見出し（p-page_header 流用・中央・eyebrow 付与） ---- */
.login-stage .p-page_header { padding: 0; margin-bottom: 28px; text-align: center; }
.login-stage .p-page_header__inner { text-align: center; }
.login-stage .ac-eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--ink-60); margin: 0 0 10px;
}
.login-stage .p-page_header__inner__title {
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.4;
  letter-spacing: .08em; color: var(--ink);
}

/* ---- ログイン側ボタン（塗り全幅）／パスワード忘れリンク（下線） ---- */
.login-stage .p-login__inner__login__bottom { margin-top: 32px; text-align: center; }
.login-stage .p-login__inner__login__bottom__submit {
  display: block; width: 100%; height: auto; padding: 17px 24px;
  background: var(--ink); color: var(--white); border: 1px solid var(--ink); border-radius: 2px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .12em; cursor: pointer;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.login-stage .p-login__inner__login__bottom__submit:hover { background: transparent; color: var(--ink); opacity: 1; }
.login-stage .p-login__inner__login__bottom__forget {
  display: inline-block; margin-top: 20px; text-decoration: none;
  font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: .04em;
  color: var(--ink-60); border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: opacity .3s var(--ease);
}
.login-stage .p-login__inner__login__bottom__forget:hover { opacity: .6; }

/* ---- 会員登録側（リード＋枠線CTA全幅） ---- */
.login-stage .p-login__inner__registration__text {
  font-family: var(--sans); font-weight: 400; font-size: 14px; line-height: 1.9;
  color: var(--ink-60); text-align: center; margin: 0 0 24px;
}
.login-stage .p-login__inner__registration__bottom { margin-bottom: 16px; text-align: center; }
.login-stage .p-login__inner__registration__bottom__btn {
  display: block; width: 100%; height: auto; padding: 16px 24px;
  border: 1px solid var(--ink); border-radius: 2px; color: var(--ink); background: transparent;
  font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .12em;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.login-stage .p-login__inner__registration__bottom__btn:hover { background: var(--ink); color: var(--white); opacity: 1; }

/* ---- LINE 連携案内テキスト ----
   背景の薄緑はローカルの base theme.css/bundle.css には該当ruleが無く、テナント側
   カスタマイザ生成CSS等の外部起源とみられ詳細不明のため、確実に上書きするため !important。
   margin-bottom は次の .line_new_ec ボタンとの間隔を確保（従来12pxは体感ゼロに近かったため24pxへ）。
   [feedback6] 背景を白にした後も枠線が緑のまま残っていたため border-color も白へ上書き。 */
.login-stage .p-login__inner__registration .alert {
  font-family: var(--sans); font-weight: 400; font-size: 13px; line-height: 1.7;
  color: var(--ink-60); text-align: center; margin: 4px 0 24px;
  background: var(--white) !important; border-color: var(--white) !important;
}

/* ---- LINE ログイン/友だち追加ボタン ----
   標準 theme.css が `.line_new_ec .button-container .button|.btn-line|.before-btn-line`（詳細度0,3,0）に
   display:block / line-height:50px / height:50px / padding-left:30px / アイコン position:absolute 50×50 を当てる。
   ブランド指定は同経路＋末尾クラス（詳細度0,4,0）で上書きしないと効かず、ボタンが文字高さに潰れて崩れる[feedback1]。
   ★配色方式の確定（feedback9・ユーザー提供のLINE公式ガイドライン調査に基づく是正）★
   LINE公式ガイドライン（Social Plugins利用ガイドライン／ログインボタン デザインガイドライン）は
   「①専用アイコン+指定配色（改変不可）」「②アイコン無し+指定テキスト文言（配色自由）」の2択のみを許容し、
   「専用アイコンを残したままボタン地色だけ変更する」（feedback4時点の実装）はどちらにも該当しない非準拠状態
   だった。よって②へ切替＝アイコン(.before-btn-line＝ec-force標準アセット login-line.png)を非表示にし、
   テキストのみのボタンへ変更。文言は `account.line.line_login.value`（ja.jsonデフォルト値「LINEでログイン」＝
   ガイドライン推奨文言と一致・翻訳キー自体は無変更）。アイコン無しになったことで、他の塗りボタン
   （.p-login__inner__login__bottom__submit＝ログイン送信ボタン。.account-stage の系統A送信ボタンとも共通）と
   同じ配色規約 background/border:var(--ink) をそのまま適用でき、hoverも他の塗りボタンと同じ反転
   （background:transparent+color反転）に統一（アイコンが無いため以前のopacity fadeを維持する理由が無くなった）。 */
.login-stage .line_new_ec { width: 100%; margin: 0; }
.login-stage .line_new_ec .button-container { display: flex; justify-content: center; }
.login-stage .line_new_ec .button-container .btn-line,
.login-stage .line_new_ec .button-container .button {
  position: static;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: auto; min-height: 48px; padding: 14px 24px; line-height: 1.4;
  background: var(--ink); color: var(--white); border: 1px solid var(--ink); border-radius: 2px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .04em;
  text-align: center; overflow: visible;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.login-stage .line_new_ec .button-container .btn-line:hover,
.login-stage .line_new_ec .button-container .button:hover { background: transparent; color: var(--ink); }
/* 専用アイコン(LINE公式ガイドライン非準拠の配色改変を避けるため非表示・テキストのみのボタンへ) */
.login-stage .line_new_ec .button-container .before-btn-line { display: none; }
.login-stage .line_new_ec .button-container .after-btn-line { display: none; }

/* ---- Amazon Pay コンテナ（Amazon JS が描画。中央寄せ＋上余白のみ） ---- */
.login-stage .amazon_pay_v2_ec { margin-top: 12px; }
.login-stage .amazon_pay_v2_ec .button-container { display: flex; justify-content: center; }

/* ============ バリデーションエラー吹き出し（validationEngine）— 機能/位置維持・font のみ ============ */
:is(.account-stage, .login-stage) .c-form_table .formError { font-family: var(--sans); }

/* =====================================================================
   [Phase3] スマホ専用 (<768) — contact/faq/items のスマホ規則を踏襲
   ステージのフロア(1200)解除＋全幅化。l-container が SP は padding-top:60px。
   ===================================================================== */
@media (max-width: 767px) {
  .account-stage,
  .login-stage { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
  .account-content { width: auto; padding: 40px 24px 0; }
  .login-content { width: auto; padding: 40px 24px 0; }

  .ac-head { padding-bottom: 28px; margin-bottom: 32px; }
  .ac-head__ja { font-size: 24px; }
  .ac-head__lead { margin-top: 14px; }

  :is(.account-stage, .login-stage) .c-form_table input[type="text"],
  :is(.account-stage, .login-stage) .c-form_table input[type="email"],
  :is(.account-stage, .login-stage) .c-form_table input[type="tel"],
  :is(.account-stage, .login-stage) .c-form_table input[type="password"],
  :is(.account-stage, .login-stage) .c-form_table select { height: 48px; }
  :is(.account-stage, .login-stage) .c-form_table__name { gap: 12px; }
  /* 電話3分割は SP では固定幅をやめ flex 均等配分＝コンテンツ幅に自動フィット（375px でも折返さない） */
  :is(.account-stage, .login-stage) .c-form_table__tel input { max-width: none; flex: 1 1 0; min-width: 0; }
  /* 郵便番号は 2欄を均等・〒/– の記号は固定幅 */
  :is(.account-stage, .login-stage) .c-form_table__postcode input { max-width: none; flex: 1 1 0; min-width: 0; }
  /* 生年月日 select は SP でも compact 維持（flex で折返し可） */
  :is(.account-stage, .login-stage) .c-form_table__tel .c-form_table__select select { flex: none; min-width: 84px; max-width: 104px; }

  .account-stage .p-account_form__inner__bottom { margin-top: 40px; }
  .account-stage .p-account_form__inner__bottom__btn,
  .account-stage .p-account_form__inner__bottom__mailbtn { width: 100%; min-width: 0; padding: 17px 24px; }

  /* ログインは 2カラム→縦積み・区切りは罫線上線へ */
  .login-stage .p-login__inner { grid-template-columns: 1fr; }
  .login-stage .p-login__inner__login { padding-right: 0; padding-bottom: 40px; }
  .login-stage .p-login__inner__registration {
    padding-left: 0; padding-top: 40px; border-left: 0; border-top: 1px solid var(--line);
  }
}