/* ============================================================
 * aj-common.css — 入会LP 共通スタイル（全ブランド共有・1セット）
 * 根拠: 2026-06-29-lp-brand-theme-extraction.md（CSSコアは全ブランド共有・配色も共有）
 * テーマ差(ブランド)は --brand-accent 1変数で吸収（既定=現行実測の #0275d8）。
 * 別CSS/別テンプレセットは作らない（theme-* = {logo, h1_label} 差し替え + 任意でaccent上書き）。
 * ============================================================ */

:root {
  --brand-accent: #0275d8;        /* 現行実測の共通アクセント（Bootstrap既定） */
  --brand-accent-dark: #015aa3;
  --ink: #1f2733;
  --ink-soft: #5a6573;
  --line: #d8dee6;
  /* 現行実測（cocoheli_normal・2026-07-28）: ページ地＝白／`.simple_body`＝#ddd の**全幅帯**で
     「フォーム＋お申し込みの流れ」だけを囲む。上物（説明画像）は白の上に載る。 */
  --bg: #fff;            /* ページ地（現行 body=#fff） */
  --band: #ddd;          /* フォーム帯（現行 .simple_body=#ddd） */
  --panel: #ffffff;
  --err: #c0392b;
  --err-bg: #fdecea;
  --ok: #2e7d32;
  --radius: 8px;
  /* 本文幅＝現行 `.container.aj_contents`（可変・最大1000px。992-1199の帯だけ960）の実測に合わせる。
     旧720pxだと「お申し込みの流れ」画像や発信機カードが本番より小さく/折り返して見えた。 */
  --maxw: 1000px;
}
@media (min-width: 992px) and (max-width: 1199.98px) { :root { --maxw: 960px; } }

/* テーマ別アクセント上書きの将来フック（例）:
   [data-theme="drs"]    { --brand-accent: #1b5e20; }
   [data-theme="marine"] { --brand-accent: #0277bd; }
   現状は全ブランド共有のため未使用。 */

* { box-sizing: border-box; }
body.aj-lp {
  margin: 0; background: var(--bg); color: var(--ink);
  /* 現行フォント＝Noto Sans JP（本番MTでGoogle Fonts等から読込。静的プレビューは未読込でフォールバック） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.6; -webkit-text-size-adjust: 100%;
}

/* ---- ヘッダ（現行 div-block-215-copy ＝ [ロゴ(左)]＋[タイトル群(右)] 横並び・中央寄せ・白背景）---- */
.aj-header { background: #fff; }
/* ★【2026-10-02｜AJ様の受入 1.0対象『TOP画像が異なる』＝ヘッダーの作りの違い（受け皿 M-0162）】
   現行の計算済みスタイルを測って写した（current-lp の写し・幅 1280/900/600/390）＝
   ⑴ロゴの上端は 70px（main の上の余白 50px＋箱の上の余白 20px）・箱の下は 20px＝中身は 190px から始まる
   ⑵ロゴとタイトルの間は 20px（現行はページごとに `.image-155 { margin-right: 20px; }` で上書きしている）
   ⑶サブタイトルは太字（700）・行の高さ 1.5em ⑷タイトルは黒の80%
   ⑸幅479以下はロゴ 50px・サブタイトル 12.8px（縮めないとタイトルが2行に折り返す） */
.aj-header__inner { max-width: var(--maxw); margin: 0 auto; padding: 70px 10px 20px;
  display: flex; align-items: center; justify-content: center; }
.aj-header__logo { width: 100px; height: auto; flex: 0 0 auto; margin-right: 20px; }   /* image-155: width100／現行の実効 mr20 */
.aj-header__titles { text-align: left; }
.aj-form-title { margin: 0; font-size: 1.7em; font-weight: 700; line-height: 1.5em; color: rgba(0, 0, 0, 0.8); }  /* heading-10 */
.aj-form-subtitle { margin: 0; font-size: 1.2em; font-weight: 700; line-height: 1.5em; color: #7a7a7a; }          /* heading-10._2 */
@media (max-width: 479px) {
  .aj-header__logo { width: 50px; }
  .aj-form-subtitle { font-size: 12.8px; }
}
/* ---- ヒーロー / リード ---- */
.aj-hero { max-width: var(--maxw); margin: 0 auto; }
.aj-hero img { display: block; width: 100%; height: auto; }

/* ---- 説明画像（フォーム固有・複数枚を上から順に）----
   ★2026-08-17 新設。ヒーロー画像を廃止して「説明画像」1本へ統合したときに
     **CSSを足し忘れて左寄せのままになっていた**（ユーザー指摘）。
     旧 `.aj-hero` と同じ流儀＝**枠を中央に置き、画像は枠幅いっぱい**。
   ⚠️ `margin: 0 auto` だけでは効かない＝**枠に幅の上限（max-width）が要る**
      （上限が無いと枠が全幅になり、中央寄せしても見た目が変わらない）。 */
/* ★上部の説明は入力画面だけに出す（2026-08-25・`aj-form.js: toggleTopExplain()` が hidden を付ける）。
   **明示的に消す**＝これらに `display` を足した瞬間に `[hidden]`（UA既定の display:none）が負けて
   「隠したつもりで出たまま」になるため（応答200・JSエラー0のまま静かに壊れる型）。 */
.aj-explain[hidden], .aj-explain__heading[hidden], .aj-mk-slot--top[hidden] { display: none !important; }
/* 🔴 【2026-10-19｜No.88 の続き＝ユーザー判断「1」】**角は四角・画像と画像のすき間は 0**（全フォーム共通）。
   現行を計算済みスタイルで実測＝角はどのフォームも 0px／すき間は thermos・lifeotc が 0・isuka が 29px＝多い方の 0 に寄せた。
   〔旧＝角 8px・すき間 12px〕＝黒い面が続くページ（lifeotc）がカードの並びに切れて見えた。 */
.aj-explain { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
.aj-explain__img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 0; }
.aj-explain__heading { max-width: var(--maxw); margin: 16px auto 8px; padding: 0 16px; text-align: center; font-size: 1.05rem; }
.aj-lead { max-width: var(--maxw); margin: 12px auto 8px; padding: 0 16px; color: var(--ink-soft); text-align: center; }

/* ---- お申し込みの流れ バナー（フォーム後・1画像）---- */
.aj-flow { max-width: var(--maxw); margin: 8px auto 0; padding: 0 16px; }
.aj-flow__img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* 上物 説明コンテンツ＝現行の縦連結セクションを順序保持で移行（大画像を全幅で縦積み）。
   MTはブロックエディタ本文で供給／convert_lp は現行ページから抽出したブロック列を注入。 */
.aj-mk-slot { max-width: var(--maxw); margin: 0 auto; }
.aj-mk { max-width: var(--maxw); margin: 0 auto; }
.aj-mk__block { margin: 0 auto 6px; }
.aj-mk__block img { display: block; width: 100%; height: auto; }
.aj-mk__heading { margin: 18px auto 8px; padding: 0 16px; font-size: 1.15em; font-weight: 800; text-align: center; line-height: 1.5; }

/* ============================================================
   上物ブロックキット（aj-block）＝MTブロックエディタの「型」／convert_lp の移行先。
   担当者は型を選んで積むだけ。convert_lp は現行画像を役割(role)で型付けして流し込む。
   型: hero(キービジュアル) / image(全幅説明画像) / gallery(横並び) / heading / text /
       twocol(画像+文) / notice(注意帯) / product(商品・セット詳細) / feature(特長・仕組み)
   ============================================================ */
.aj-block-set { max-width: var(--maxw); margin: 0 auto; }
.aj-block { margin: 0 auto 8px; }
.aj-block img { display: block; width: 100%; height: auto; }
.aj-block--hero { margin-bottom: 0; }                                   /* キービジュアル＝上端・余白詰め */
.aj-block--notice { max-width: var(--maxw); }                           /* 注意帯（Android等） */
.aj-block--gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.aj-block--heading { font-size: 1.25em; font-weight: 800; text-align: center; margin: 22px auto 10px; padding: 0 16px; line-height: 1.5; }
.aj-block--text { padding: 0 16px; line-height: 1.9; color: var(--ink-soft); }
.aj-block--twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px; align-items: center; }
@media (max-width: 767px) { .aj-block--twocol { grid-template-columns: 1fr; } }
.aj-block--images > img { margin-bottom: 8px; }                          /* 説明画像の繰り返し（枚数上限なし・順序保持） */
.aj-block--images > img:last-child { margin-bottom: 0; }

/* ---- video＝商品紹介動画（**現行どおり YouTube 埋め込み**／設計v2 §7・QA No.30 の確定回答 2026-07-30） ----
   現行は幅を px で直書き（1000px / 560px＝フォームで違う）＝スマホで横にはみ出す。
   新テンプレは **16:9 の比率で枠を固定**して幅に追従させる＝読み込み前に高さが決まるのでガタつかない。 */
.aj-block--video { max-width: var(--maxw); }
.aj-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.aj-video-embed > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* aspect-ratio 未対応ブラウザ向けの保険（padding-top で 56.25% の高さを作る） */
@supports not (aspect-ratio: 16 / 9) {
  .aj-video-embed { height: 0; padding-top: 56.25%; }
}
/* 🔴 【2026-10-19｜No.88】説明画像の「説明」欄の YouTube＝**画像の直後・現行の形**（`cocoheli_lifeotc` を計算済みスタイルで実測）:
   黒の帯の上・画像の幅の 60%・中央・画像とのすき間 0・下に 64px・角は四角（幅 375／768 とも同じ規則）。
   〔画像の角は上の規則で全部 0 になった＝動画が続く画像だけ角を外す規則は要らなくなった〕 */
.aj-explain__video { background: #000; padding: 0 0 64px; }
.aj-explain__video .aj-video-embed { width: 60%; max-width: 560px; margin: 0 auto; border-radius: 0; }   /* 現行は埋め込みの width="560" で頭打ち（幅 1280 で実測 558px） */

/* ---- フォーム全体幅（現行 .container.aj_contents = max-width:1000px） ---- */
.aj-form { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
/* フォーム帯＝現行 `.simple_body`（全幅の薄グレー）。「フォーム＋お申し込みの流れ」を囲む。
   上物（説明画像）はこの外＝ページ地（白）の上に載る＝現行の見え方。 */
.aj-band { background: var(--band); padding: 1px 0 24px; margin: 16px 0 0; }
/* WP系（ココキッズ/ココアッタ/ココシッポ/ライフビーコン/受信機レンタル）は現行も帯が無く全面白 */
.aj-band.is-plain { background: transparent; }

/* ---- 経路②＝Apple Pay / Google Pay のかんたん入力（2026-07-29 AJ様ご希望で追加・T15） ----
   フォーム冒頭に置く。**対応端末でしか出ない**ので、出ないときはブロックごと hidden（JSが制御）。
   「押しても課金されない」ことが伝わる見せ方にする（誤解＝いきなり支払いが起きる、を避ける）。 */
.aj-wallet { margin: 16px 0 24px; padding: 16px; background: #fff; border: 1px solid var(--line, #dde3ea);
             border-radius: 8px; text-align: center; }
.aj-wallet__head { font-size: 1.05em; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.aj-wallet__note { font-size: .9em; line-height: 1.7; margin: 0 0 12px; color: #5a6573; }
.aj-wallet__btn { max-width: 420px; margin: 0 auto; min-height: 44px; }
.aj-wallet__msg { font-size: .9em; margin: 10px 0 0; color: #0f7b4f; }
.aj-wallet__msg.is-error { color: #c0392b; }
/* 取り込み後の注意（請求先住所である旨）＝上のメッセージと2行続きで読ませる（2026-07-30） */
.aj-wallet__msg--sub { margin-top: 4px; font-size: .85em; line-height: 1.6; }
/* 姓と名の入れ替え（ウォレットは1文字列でしか返さず並び順が端末で違う＝2026-07-30 実機） */
.aj-wallet__swap { margin-left: 6px; padding: 3px 8px; font-size: .95em; border: 1px solid #0f7b4f;
  border-radius: 5px; background: #fff; color: #0f7b4f; cursor: pointer; }
/* 【上書き制御・案A／QA No.37(3)】入力済みと食い違ったときだけ出る確認枠。
   目立たせるが決済導線を塞がない＝注記の並びに置き、ボタンは既存の swap と同じ見た目にそろえる。 */
.aj-wallet__overwrite {
  margin-top: 8px; padding: 8px 10px; border: 1px solid #e0b400; border-radius: 6px; background: #fffbe9;
}
.aj-wallet__overwrite .aj-wallet__msg--sub { margin: 0 0 6px; }
.aj-wallet__overwrite .aj-wallet__swap:first-of-type { margin-left: 0; }
/* ウォレットで自動入力された欄は「入った」ことが分かるようにする（その場で直せる旨も伝える） */
.aj-row.is-wallet-filled input, .aj-row.is-wallet-filled select { background: #f2f9f5; }
.aj-wallet-filled-note { font-size: .85em; color: #0f7b4f; margin: 4px 0 0; }
/* 【2026-10-13＝テスト指摘 No.78・R-2-55】「ご利用いただける決済方法」＝AJ様の見本（問い合わせ管理台帳 シート78）。
   見出しはほかの区切りと同じ `.aj-device-select__head`（左寄せ・太字・下線）＝外の枠は外す。
   中身は発信機のカードと同じ枠（8px・角丸16px）＝見本どおり赤。文は左寄せで、決済方法の名前を一段大きく。 */
.aj-wallet.aj-paymethods { margin: 20px 0; padding: 20px 0; background: none; border: 0; border-radius: 0; text-align: left; }
.aj-paymethods__card { border: 8px solid #f50000; border-radius: 16px; background: #fff; padding: 20px 24px; }
.aj-paymethods__item { font-size: 1.15em; font-weight: 700; margin: 0 0 4px; color: rgba(0, 0, 0, .8); }
.aj-paymethods__note { font-size: .95em; line-height: 1.8; margin: 0 0 18px; color: #333; }
.aj-paymethods .aj-wallet__btn { margin: 4px auto 0; }
@media (max-width: 479px) { .aj-paymethods__card { padding: 16px; } .aj-paymethods__item { font-size: 1.05em; } }

/* ---- 【検証環境専用】日本のテストデータで取り込みを試すパネル（aj-wallet-demo.js が生成） ----
   本番ページには出力されない（archive テンプレの enable_api_mock ガード内でのみ読み込む）。
   検証用だと一目で分かるよう、本番の配色（白カード）とは意図的に変える。 */
.aj-demo { margin: 16px 0; padding: 12px 14px; background: #fff8e1; border: 1px dashed #d9a300; border-radius: 8px; }
.aj-demo__head { margin: 0 0 6px; font-weight: 700; font-size: .95em; color: #8a6100; }
.aj-demo__note { margin: 0 0 10px; font-size: .82em; line-height: 1.7; color: #6b5a2a; }
.aj-demo__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; font-size: .88em; }
.aj-demo__btn { padding: 7px 12px; font-size: .95em; border: 1px solid #d9a300; border-radius: 6px;
                background: #fff; color: #8a6100; cursor: pointer; }
.aj-demo__btn:disabled { opacity: .6; cursor: default; }
.aj-demo__msg { margin: 0; font-size: .85em; color: #0f7b4f; }
.aj-demo__msg.is-error { color: #c0392b; }
/* 生データ／マッピング後の値（Stripe社の簡易サイトの debug 表示に相当・検証用） */
.aj-demo__dbg { margin: 10px 0 0; font-size: .82em; }
.aj-demo__dbg > summary { cursor: pointer; color: #8a6100; }
.aj-demo__dbghead { margin: 8px 0 2px; font-weight: 700; color: #6b5a2a; }
.aj-demo__dbg pre { margin: 0; padding: 8px; background: #fffdf5; border: 1px solid #e6d9a8;
  border-radius: 6px; overflow-x: auto; font-size: .95em; line-height: 1.5; }

/* ---- 発信機・プランの選択カード（【2026-09-30｜R-2-46＝AJ様『テスト指摘事項』No.17】現行と同じ見た目を PC・スマホとも）----
   現行＝手元の写し `restored-forms/cocoheli_normal` を**ブラウザで開いて測った計算済みの値**
   （`scripts/mt/measure_current_card_styles.py`・2026-09-30）。現行の区切りは4段＝〜479px／480〜767px／768〜991px／992px〜
   （Webflow）。〔旧〕中央寄せの小さな見出し・3px の透明枠・小さな角の「✓選択」・スマホでも写真が上 */
/* 見出し（現行 `.h4_nlp.centerd.form`）＝左寄せ・太字・下に1本線 */
.aj-device-select, .aj-plan-select { margin: 20px 0; padding: 20px 0; }
.aj-device-select__head { text-align: left; font-size: 25.6px; font-weight: 700; line-height: 1.6; letter-spacing: .05em;
  margin: 0 0 20px; padding: 0 0 10px; border-bottom: 1px solid #000; color: rgba(0, 0, 0, .8); font-family: "Noto Sans JP", sans-serif; }
@media (max-width: 479px) { .aj-device-select__head { font-size: 19.2px; } }
/* プランで機種が変わるフォームで、プラン未選択の間に出す案内（T11・2026-07-28） */
.aj-device-select__note { text-align: center; font-size: .95em; margin: 0 0 16px; color: #5a6573; }
/* 並べ方＝768px〜 は3列（現行 `.grid_2_2.form`＝枚数によらず3列）／〜767px は1列 */
.aj-device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 0; }
/* 3枚未満は1枚分の幅（3列のときの1列）のまま中央に置く（2026-09-30 ユーザー判断＝プランの is-single と同じ扱い） */
.aj-device-grid.is-single { grid-template-columns: minmax(0, calc((100% - 32px) / 3)); justify-content: center; }
.aj-device-grid.is-double { grid-template-columns: repeat(2, minmax(0, calc((100% - 32px) / 3))); justify-content: center; }
@media (max-width: 767px) { .aj-device-grid, .aj-device-grid.is-single, .aj-device-grid.is-double { grid-template-columns: minmax(0, 1fr); } }
/* カード（現行 `.mypage_link_form.images.cocoheli-model`）＝8px の灰色の枠・角丸16px。選ぶと赤枠 */
.aj-device-card { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  border: 8px solid #ddd; border-radius: 16px; padding: 0 0 20px; cursor: pointer; text-align: center; background: #fff; width: 100%; }
.aj-device-card input { position: absolute; opacity: 0; pointer-events: none; }
.aj-device-card img { display: block; width: 100%; height: auto; }
.aj-device-card.is-selected, .aj-device-card:has(input:checked) { border-color: #f50000; border-radius: 15px; }   /* 現行: 選択=赤枠 */
.aj-device-card__txt { display: block; margin: 20px 0 0; font-family: "Noto Sans JP", sans-serif; font-weight: 700;
  color: rgba(0, 0, 0, .8); line-height: 1.2; }
.aj-device-card__en { display: block; font-size: 24px; }
.aj-device-card__jp { display: block; font-size: 16.8px; }
@media (max-width: 991px) { .aj-device-card__en { font-size: 19.2px; } .aj-device-card__jp { font-size: 13.44px; } }
/* 〜767px＝写真が左・名前が右（現行は写真 300×225／〜479px は 180×135） */
@media (max-width: 767px) {
  .aj-device-card { flex-direction: row; justify-content: center; padding: 0; }
  .aj-device-card img { width: 300px; flex: 0 0 300px; }
  .aj-device-card__txt { flex: 1 1 auto; margin: 0 auto; }
}
@media (max-width: 479px) {
  .aj-device-card img { width: 180px; flex-basis: 180px; }
  .aj-device-card__en { font-size: 16px; } .aj-device-card__jp { font-size: 11.2px; }
}
/* 「選択」の札（現行 `.div-block-392`＞`.div-block-391-copy`＞`.text-block-65-copy`）＝左上の角に斜めの赤い帯 */
.aj-device-card__badge, .aj-plan-card__badge { display: none; position: absolute; top: 0; left: 0; width: 150px; height: 150px;
  overflow: hidden; z-index: 10; pointer-events: none; }
.aj-device-card.is-selected .aj-device-card__badge, .aj-device-card:has(input:checked) .aj-device-card__badge,
.aj-plan-card.is-selected .aj-plan-card__badge, .aj-plan-card:has(input:checked) .aj-plan-card__badge { display: block; }
.aj-card-badge__band { position: absolute; top: -15px; left: -50px; padding: 40px 40px 10px; background: #f50000; transform: rotate(-45deg); }
.aj-card-badge__txt { display: block; color: #fff; font-size: 19.2px; font-weight: 700; line-height: 24px; white-space: nowrap;
  font-family: "Noto Sans JP", sans-serif; }
@media (max-width: 991px) { .aj-card-badge__txt { font-size: 16px; } }
@media (max-width: 479px) { .aj-card-badge__band { top: -20px; left: -55px; } .aj-card-badge__txt { font-size: 14.4px; } }

/* ---- SAFE FOR FUTURE チャリティの説明（R-2-45＝AJ様 No.21・現行で載っている4本だけ）----
   現行＝受領 `smarty/templates/reception/form/parts/popup_safe_for_future.tpl` の <style> をそのまま写した
   （`.select_cocoheli_model_info`／`.popupaa`／`.popupaa-img-container`／`.popupaa-img`／`.popupaa-close-button`）。
   ★アイコンは現行 FontAwesome の U+F059（丸に ?）＝当方は FontAwesome を読まないので CSS で同じ形を描く */
.aj-sff-link { text-align: center; margin: 20px auto 0; font-family: "Noto Sans JP", sans-serif; font-size: 16px;
  font-weight: 500; line-height: 1.5em; width: 310px; max-width: 100%; cursor: pointer; }
.aj-sff-link__icon { display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; background: #222; color: #fff;
  font-size: .95em; line-height: 1.05em; text-align: center; font-weight: 900; vertical-align: -0.1em; }
.aj-sff-link__icon::before { content: "?"; }
.aj-sff-popup { opacity: 0; visibility: hidden; transition: opacity .3s ease; pointer-events: none; position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100dvh; background: rgba(0, 0, 0, .6); z-index: 9999; padding: 0 10px; box-sizing: border-box; }
.aj-sff-popup.is-show { opacity: 1; visibility: visible; pointer-events: auto; }
.aj-sff-popup__img-container { width: 100%; max-width: 962px; height: calc(100vh - 128px); border-radius: 16px;
  margin: 20px auto 0; overflow: auto; background: #fff; }
.aj-sff-popup__img { display: block; border: none; width: 100%; height: auto; }
.aj-sff-popup__close { color: #fff; text-align: center; border: 2px solid #fff; border-radius: 50ch; padding: 20px 40px;
  font-size: 1.2em; width: 150px; margin: 20px auto; cursor: pointer; }   /* 現行は bootstrap の border-box 下の 150px */

/* ---- Android端末ユーザー向け注意画像（お客様情報の上・デフォルト表示） ---- */
.aj-android-note { max-width: 1000px; margin: 16px auto 0; padding: 0 16px; text-align: center; }
.aj-android-note img { max-width: 100%; height: auto; }

/* ---- 契約プラン選択（【2026-09-30｜R-2-46】現行 `#selectPlanArea` と同じ形。見出し・札・並べ方は上の発信機と共通）----
   768px〜＝2列・高さ372px・余白20px／〜767px＝1列・余白 0 20px 40px（〜479px は 0 10px 40px） */
.aj-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* プランが1つ＝2列のときの1枚分の幅で中央に置く（2026-09-30 ユーザー判断＝現行は左寄せ・ここだけ現行から外す） */
.aj-plan-grid.is-single { grid-template-columns: minmax(0, calc((100% - 16px) / 2)); justify-content: center; }
@media (max-width: 767px) { .aj-plan-grid, .aj-plan-grid.is-single { grid-template-columns: minmax(0, 1fr); } }
.aj-plan-card { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  border: 8px solid #ddd; border-radius: 16px; padding: 20px; min-height: 372px; cursor: pointer; background: #fff;
  font-family: "Noto Sans JP", sans-serif; color: rgba(0, 0, 0, .8); }
@media (max-width: 767px) { .aj-plan-card { min-height: 0; padding: 0 20px 40px; justify-content: center; align-items: stretch; } }
@media (max-width: 479px) { .aj-plan-card { padding: 0 10px 40px; } }
.aj-plan-card input { position: absolute; opacity: 0; pointer-events: none; }
.aj-plan-card.is-selected, .aj-plan-card:has(input:checked) { border-color: #f50000; border-radius: 15px; }
/* 名前の枠（現行 `.div-block-445`）＝下に2px の線 */
.aj-plan-card__namebox { display: flex; justify-content: center; align-items: center; align-self: stretch; min-height: 90px;
  padding: 0 0 20px; margin: 0 0 20px; border-bottom: 2px solid #7a7a7a; }
@media (max-width: 767px) { .aj-plan-card__namebox { min-height: 0; padding: 20px 0; } }
.aj-plan-card__name { display: block; font-size: 24px; font-weight: 700; line-height: 1.2; text-align: center; }
/* 金額（現行 `.price_nlp.big`＋`.price_nlp._3`）＝大きな数字＋「円」 */
.aj-plan-card__price { display: flex; justify-content: center; align-items: center; }
.aj-plan-card__num { display: block; padding: 0 5px 0 0; font-family: "M PLUS 1p", sans-serif; font-size: 40px; font-weight: 900; line-height: 1.2; }
.aj-plan-card__yen { display: block; margin: 6px 0 0; font-size: 20.8px; font-weight: 700; line-height: 1.2; color: #333; }
@media (max-width: 479px) { .aj-plan-card__num { font-size: 28.8px; } }

/* ---- 濃色フォームコンテナ（現行 .div_form1-copy = rgba(0,0,0,.8)/radius16/padding20/margin40） ---- */
.aj-form-box { background: rgba(0, 0, 0, .8); border-radius: 16px; margin: 40px 0; padding: 20px; }
.aj-form-box__head { color: #fff; font-size: 1.2em; font-weight: 700; text-align: center; margin: 0 0 12px; padding: 4px 0; }

/* ---- セクションカード（現行 .div_form2 = 白カード flex行・左25%グレーラベル＋右入力） ---- */
.aj-sec { background: #fff; border-radius: 10px; margin: 10px 0 20px; display: flex; overflow: hidden; }
.aj-sec__label { background: #f0f0f0; flex: 0 0 25%; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; padding: 10px; gap: 8px; }
.aj-sec__name { color: #7a7a7a; font-weight: 400; }
.aj-sec__badge { color: #fff; border-radius: 5px; padding: 4px 8px; font-size: .8em; line-height: 1; }
.aj-sec__badge--req { background: #f50000; }       /* 現行 .p_std.tozankeikaku.hissu */
.aj-sec__badge--opt { background: #0088ff; }        /* 任意＝現行 .tozankeikaku.nini の実測 #0088ff（青） */
.aj-sec__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 10px 40px 40px; }

/* ---- 入力行（現行 .div_form5 ＝ラベル上・入力下／.w-input=全幅38px・border#ccc・角丸なし） ---- */
.aj-row { margin: 15px 0 0; }
.aj-row > label { display: block; color: #7a7a7a; font-size: 1em; margin-bottom: 4px; }
/* ★`date` を足した（2026-08-18）＝**書かないとブラウザ標準の見た目（クラシック）**になる。
   「その他項目」で日付の欄を作れるようにしたため、実際に出るようになった。 */
.aj-row input[type="text"], .aj-row input[type="tel"], .aj-row input[type="email"],
.aj-row input[type="number"], .aj-row input[type="date"], .aj-select, .aj-row textarea {
  width: 100%; max-width: 100%; height: 40px; padding: 8px 12px; font-size: 16px; /* 16px=iOSズーム防止 */
  border: 2px solid #000; border-radius: 8px; font-weight: 500; background: #fff; color: #333; margin-bottom: 10px; /* 現行 .text_form1: 2px黒枠・角丸8px */
}
.aj-select { background: #f3f3f3; }   /* 現行 .w-select */
.aj-row textarea { height: auto; }
.aj-row input:focus, .aj-select:focus, .aj-row textarea:focus { outline: 0; border-color: #3898ec; }
/* 【2026-09-30｜R-2-38＝AJ様『テスト指摘事項』No.13・共通仕様として確定】**入力できない欄は現行と同じ見た目**
   ＝灰色（#eee）＋入力不可のカーソル（現行 Webflow `.w-input[readonly]`／`[disabled]`・写しで実測）。
   都道府県（郵便番号から自動で入る）とその他の欄の固定値に効く。〔旧〕readonly でも白い普通の欄に見えていた */
.aj-row input[readonly], .aj-row input[disabled], .aj-row textarea[readonly], .aj-select[disabled] { background-color: #eee; cursor: not-allowed; }
/* 姓名・フリガナ＝横2分割／生年月日＝年月日 inline */
.aj-row input[name$="_sei"], .aj-row input[name$="_mei"] { display: inline-block; width: calc(50% - 4px); }
.aj-row input[name^="birth_"] { display: inline-block; width: 5em; }
/* 生年月日をプルダウンにした場合（No.33／`aj-form.js` の applyBirthInputMode が select へ差し替える）。
   ⚠️ 上の幅指定は `input` にしか当たらないため、**select 用に別途書く**。
      書かないと `.aj-select` の `width:100%` が効いて**年・月・日が縦に3段**になる（2026-08-04 是正）。
   年は4桁＋矢印で幅が要るので広め、月日は狭めにして**1行に収める**。 */
.aj-row select[name^="birth_"] { display: inline-block; width: auto; min-width: 6.5em; margin-right: 2px; }
.aj-row select[name="birth_month"], .aj-row select[name="birth_day"] { min-width: 5em; }
/* ネイティブの矢印が2px黒枠と干渉しないよう、右側に余白を確保（見た目は他のセレクトと同じ） */
.aj-row select[name^="birth_"] { padding-right: 8px; }
.aj-note { color: #7a7a7a; font-size: .8em; margin: 0 0 4px; }
/* 追加項目の注記（`field_profile[].note`／その他項目の「注記」）＝欄の下に小さく出す。
   ★`.aj-note` と同じ体裁に揃える（書かないと本文と同じ大きさで出て目立ちすぎる）。 */
.aj-field-note { color: #7a7a7a; font-size: .8em; line-height: 1.6; margin: -4px 0 10px; }
.aj-note--carrier { margin-top: 8px; line-height: 1.5; }
.aj-note--carrier a { color: #f50000; }
.aj-row--radio .aj-radios label { margin-right: 16px; font-size: .95em; }
.req { color: var(--err); font-size: 11px; font-weight: 700; margin-left: 4px;
  border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; vertical-align: middle; }

/* ---- 【T20】table型レイアウト（QA No.20(1)＝「table型は現状維持」・2026-07-30 確定） ----
   対象＝非ココヘリ系5ブランド9件（ココアッタ/ココキッズ/ライフビーコン/ココシッポ/レンタル）。
   ブランドで完全に割れている（混在ゼロ）ため、テーマから `aj-form--table` を付けるだけで切り替わる。
   現行の姿＝Bootstrap の `table table-bordered`＝**1項目1行**（左にグレーのラベルセル・右に入力）。
   ★項目・検証・送信は標準と同一＝**描画だけ**が変わる。行の右側は `.aj-row__body` が包む
     （包まないと 姓/名 が縦に割れ、「年」「月」「日」のような素のテキストが左セルへ落ちる＝実機で確認）。 */
.aj-form--table .aj-sec { display: block; border: 1px solid #dee2e6; border-radius: 0; margin: 0 0 -1px; }
.aj-form--table .aj-sec__label { display: none; }         /* 現行の table型に節見出しは無い */
.aj-form--table .aj-sec__body { display: block; padding: 0; }
.aj-form--table .aj-row {
  display: grid; grid-template-columns: 25% 1fr; align-items: stretch;
  margin: 0; border-top: 1px solid #dee2e6;
}
.aj-form--table .aj-sec__body > .aj-row:first-child { border-top: 0; }
.aj-form--table .aj-row > label {
  background: #f0f0f0; margin: 0; padding: 12px; color: #333; font-size: .95em; display: block;
}
.aj-form--table .aj-row__body { padding: 12px; min-width: 0; }
.aj-form--table .aj-row__body > *:last-child { margin-bottom: 0; }
/* JSが描く追加項目（field_profile）は器を持たない＝label以外を右列へ回す（1入力なので これで足りる） */
.aj-form--table .aj-row > *:not(label):not(.aj-row__body) { grid-column: 2; padding: 12px; }
/* 備考は現行 table型でもラベル列がある＝視覚的に隠していた aj-sr-only を戻す */
.aj-form--table .aj-row > label.aj-sr-only {
  position: static; width: auto; height: auto; clip: auto; white-space: normal; overflow: visible;
}
/* 必須は現行と同じ「赤いバッジ」。標準は「（必須）」というテキストなので、
   括弧を出さずバッジの文字だけにする（文言はCSSで差し替え＝マークアップは共通のまま）。 */
.aj-form--table .aj-req-text { font-size: 0;
  /* ★標準で「見た目だけ隠す」指定をしている（下の .aj-req-text）＝表組みでは打ち消してバッジを出す */
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.aj-form--table .aj-req-text::after {
  content: "必須"; display: inline-block; background: #f50000; color: #fff; border-radius: 4px;
  padding: 3px 6px; font-size: 11px; line-height: 1; margin-left: 4px; vertical-align: middle;
}
/* 携帯メールの注意など、行に属さない注記は2列ぶち抜き（現行も全幅） */
.aj-form--table .aj-sec__body > .aj-note { padding: 12px; margin: 0; border-top: 1px solid #dee2e6; }

/* ---- 料金内訳（現行 .div_form6 = space-between/下線・最下行=合計は線なし） ---- */
.aj-pricebox { max-width: 1000px; margin: 20px 0; background: #fff; border-radius: 10px; padding: 20px 24px; }
.aj-pricerow { display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #000; padding: 10px 0; }
.aj-pricerow:last-child { border-bottom: 0; }
.aj-pricerow--total { font-weight: 700; font-size: 1.1em; }
/* 補足行（現行 .div_form6.sub = 点線・左インデント・ラベルのみ） */
.aj-pricerow--sub { color: #7a7a7a; font-size: .9em; padding: 6px 0; margin-left: 20px; border-bottom: 1px dotted #999; justify-content: flex-start; }
/* 確認画面(Step2)の金額内訳再掲（§1）＝入力画面と同じ .aj-pricerow 行を流用 */
.aj-summary-price { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.aj-summary-price__head { margin: 0 0 6px; font-size: 1em; font-weight: 700; color: var(--ink); }

/* ---- 同意（確認画面）---- 【2026-09-30｜R-2-44＝AJ様 No.19・共通仕様】現行と同じ見た目
   現行＝受領 `smarty/templates/confirm/base.tpl`（`.text-center`／`a{color:#0275d8}`／`.terms_alert{color:#900}`）
   ＋`css/confirm.css`（`.agreement-text{font-size:20px;margin-left:5px}`／チェックは `transform:scale(2)`）
   ＋`css/style.css`（`.bg_gray{background:#eee}`）＋bootstrap 4（`p-3`＝1rem／`my-4`＝1.5rem／`.badge-danger`）。
   〔旧〕チェック18px・文字15px・リンクに下線・枠なし */
.aj-consent { max-width: 1000px; margin: 16px auto; text-align: center; }
.aj-consent a { color: #0275d8; text-decoration: none; }
.aj-consent a:hover { text-decoration: underline; }
.aj-consent__terms p, .aj-consent__lead { margin: 0 0 1rem; text-align: center; }
.aj-consent__box { display: block; background: #eee; padding: 1rem; margin: 1.5rem 0; text-align: center; }
.aj-consent__check { cursor: pointer; margin: 0; }
.aj-consent__check input[type="checkbox"] { transform: scale(2); margin: 0 8px 0 0; vertical-align: middle; }
.aj-consent__text { font-size: 20px; margin-left: 5px; vertical-align: middle; }
.aj-consent__badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1;
  white-space: nowrap; vertical-align: baseline; border-radius: .25rem; background: #dc3545; color: #fff; }
.aj-consent__alert { color: #900; text-align: center; margin: .75rem 0 0; }

/* ---- バリデーション ---- */
.aj-row.has-error input, .aj-row.has-error select, .aj-row.has-error textarea { border-color: var(--err); background: var(--err-bg); }
.aj-field-error { color: var(--err); font-size: 13px; margin-top: 4px; }
.aj-error-summary { background: var(--err-bg); border: 1px solid var(--err); color: var(--err);
  border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; }
.aj-error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.aj-loading { color: var(--ink-soft); font-size: 14px; }

/* ---- ステップ表示（現行 .form_step 準拠＝番号丸+連結線+ラベル下）---- */
.aj-steps { display: flex; justify-content: center; align-items: flex-start;
  list-style: none; padding: 0; margin: 24px auto 36px; max-width: 480px; }
.aj-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.aj-step-num { width: 44px; height: 44px; border-radius: 50%; background: #9b9b9b; color: #fff;
  font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.aj-steps li.is-current .aj-step-num { background: #f50000; }       /* active=赤 */
.aj-step-label { margin-top: 8px; color: #7a7a7a; font-size: 13px; font-weight: 500; text-align: center; }
.aj-steps li.is-current .aj-step-label { color: #000; font-weight: 800; }
.aj-steps li:not(:first-child)::before { content: ""; position: absolute; top: 21px; left: -50%;
  width: 100%; height: 3px; background: #9b9b9b; z-index: 0; }       /* 連結線 */
/* 通らないステップ＝**畳まずにグレーアウト**（2026-08-04 ユーザー判断）。
   なぜ畳まないか＝ウォレットでも「クレジットカードでのお支払いに変更する」を押せば③がまた必要になる。
   ★注意＝**「まだ来ていない」ステップも既に灰色**（`.aj-step-num` の #9b9b9b）なので、
     灰色にするだけでは区別が付かない。**透明度＋取り消し線**で「通らない」を示す。 */
/* 🔴 【2026-10-15＝AJ様『テスト指摘事項』No.81】旧＝`li` ごと `opacity: .42`。半透明にすると丸の `z-index: 1` が
   その `li` の中でしか効かなくなり、**次の段（④）が持つ ③→④ の線が③の丸の上に描かれた**（「③ー④とでるべき」）。
   ⇒ 半透明をやめ、**同じ見た目の色を直接塗る**（#9b9b9b・#7a7a7a を白の上で 42% にした色）＝丸は不透明のまま線の上。 */
.aj-steps li.is-skipped .aj-step-num { background: #d5d5d5; }
.aj-steps li.is-skipped .aj-step-label { color: #c7c7c7; text-decoration: line-through; }
.aj-steps li.is-skipped::before, .aj-steps li.is-skipped + li::before { background: #d5d5d5; }   /* 通らない段に入る線・出る線 */
/* `hidden` 属性を確実に効かせる。畳むのはやめたが、**上の `display:flex` が UA の `display:none` を
   上書きして `hidden` が無効になる**状態を残すと、次に同じ罠を踏む（実際に踏んだ＝番号だけ振り直され
   「3 お支払い」と「3 受付完了」が並んだ）。 */
.aj-steps li[hidden] { display: none; }

/* ---- ボタン（現行 #submit_btn.btn.btn-primary の「CSSが効いた状態」の実適用値に一致＝Chrome計測）----
   旧実測: 青#0275d8 / 白 / 枠なし / radius 52px(ピル) / padding 8px 96px(横長) /
   font-weight 800 / line-height 48px / font-size 16px / font Noto Sans JP(継承) / 中央(.text-center)。 */
.text-center { text-align: center; }
.aj-actions { text-align: center; margin: 24px 0; }   /* 旧 .aj-* 後方互換 */
.btn { display: inline-block; border: 0; cursor: pointer; text-align: center; white-space: nowrap;
  padding: 8px 96px; font-size: 16px; font-weight: 800; line-height: 48px; border-radius: 52px;
  font-family: inherit; max-width: 100%; margin: 4px; transition: background-color .2s ease-in-out;
  /* ★【2026-08-07】`<a class="btn">`（共通404の「トップページへ」等）で**文字に下線が出ていた**ので消す。
     現行サイトは Bootstrap の `.btn`＝`text-decoration:none` が当たっており、**現行に合わせる**。
     フォーム内のボタンは `<button>` なので影響なし。 */
  text-decoration: none; }
.btn-primary { color: #fff; background-color: #0275d8; }      /* 現行 .btn-primary */
.btn-primary:hover { color: #fff; background-color: #025aa5; }
.btn-secondary { color: #fff; background-color: #868e96; }
.btn-secondary:hover { color: #fff; background-color: #727b84; }
@media (max-width: 600px) { .btn { padding: 8px 32px; line-height: 36px; } }   /* 狭幅は横paddingを抑え溢れ防止 */
/* セット商品（型2）の選択ボックス */
.aj-goods-select { background: #fff; border-radius: 10px; margin: 20px 0; padding: 16px 20px; }
.aj-zip-lookup { background: #eef3f8; border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 12px; font-size: 13px; cursor: pointer; margin-bottom: 10px; }
/* 番地がない方はこちら（現行: color #0275d8 のテキストリンク） */
.aj-no-banchi { color: var(--brand-accent); font-size: .9em; cursor: pointer; text-decoration: underline; display: inline-block; }
/* プラン画像（料金内訳/確認で使う場合の保険） */
.aj-plan-img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin-bottom: 8px; }

/* ---- 商品(セット) ---- */
.aj-good { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed var(--line); }
.aj-good .aj-qty { width: 4.5em; }
.aj-good-img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 8px; }
/* ② 規格選択（現行踏襲＝サイズ/色プルダウン） */
.aj-good-select { display: block; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.aj-good-lb { display: block; margin-bottom: 6px; font-weight: 600; }
.aj-good-sel { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
/* ① 固定バンドル（選択なし・内容表示） */
.aj-good-fixed { padding: 8px 0; }
.aj-good-note { margin: 0 0 6px; color: #555; font-size: .92em; }
.aj-good-list { margin: 0; padding-left: 1.2em; }
.aj-good-list li { padding: 2px 0; }
/* 固定バンドル明細（画像/構成つき） */
.aj-good-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; list-style: none; }
.aj-good-item .aj-good-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.aj-good-item .aj-good-txt { display: block; }
.aj-good-item .aj-good-bd { display: block; color: #777; font-size: .85em; margin-top: 2px; }

/* ③ 数量(count)型＝SKUごとの個数入力（ライフビーコン等） */
.aj-count-hero { margin: 0 auto 12px; }
.aj-count-hero img { display: block; width: 100%; height: auto; border-radius: 8px; }
.aj-count-grid { display: flex; flex-direction: column; gap: 8px; }
.aj-count-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.aj-count-row .aj-count-img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex: 0 0 auto; }
.aj-count-row .aj-count-name { flex: 1 1 auto; }
.aj-count-row .aj-count-input { width: 5.5em; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.aj-count-row .aj-count-unit { color: #555; }

/* ===== 共通のお知らせページ（404／ただ今受付できません）=====
   由来＝現行WordPressの `404.php`（`simple_body` > `container` に中央寄せの h1 ＋ 本文 ＋ ボタン）。
   フォームと同じ体裁に載せるため `.aj-notice` として持つ（現行の見た目に寄せる）。 */
.aj-notice { padding: 40px 16px 64px; background: #fff; }
.aj-notice__box { max-width: 720px; margin: 0 auto; text-align: center; }
.aj-notice__title { font-size: 1.35rem; line-height: 1.5; margin: 0 0 24px; }
.aj-notice__lead { line-height: 1.9; margin: 0 0 16px; }
.aj-notice__action { margin: 32px 0 0; }
.aj-notice__note { margin: 24px 0 0; font-size: .9em; color: #555; }
@media (max-width: 480px) {
  .aj-notice__title { font-size: 1.15rem; }
}

/* ---- 【D-0027 ②】商品の仕様画像（サイズ表・カラー表）----
   正本は中間DB（`goods[].spec_image_url`＝縫い目 N68）。現行は「商品を選びましょう。」の直後に
   素の <img> が1枚入っている（`margin-top:70px`）＝**同じ位置・全幅**で出す。
   ・値が来なければ `aj-form.js` が枠を作らない／読めなければ枠ごと消す（壊れ画像を残さない）。
   ・`width`/`height` が契約で来ていれば属性で入る＝**読み込み前に高さが決まる**（後からガタつかない）。 */
.aj-good-spec { margin: 0 0 16px; }
.aj-good-spec__img { display: block; width: 100%; height: auto; border: 0; }

/* ---- 在庫なし（QA No.29／設計v2 §7・T6）----
   見せ方＝商品名に「（在庫なし）」＋選択不可（非活性）。**非表示にはしない**（URL共有・誤解防止）。 */
.aj-good-soldout {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 6px;
  background: #fdecec; border: 1px solid #f5c2c2; color: #a12525; font-size: .92em; font-weight: 700;
}
.aj-good-item.is-soldout, .aj-count-row.is-soldout { opacity: .55; }
.aj-good-item.is-soldout .aj-good-txt, .aj-count-row.is-soldout .aj-count-name { color: #8a8a8a; }
.aj-count-row.is-soldout { background: #f7f7f7; }
.aj-good-sel option[disabled], .aj-count-input[disabled] { color: #9a9a9a; }
.aj-count-input[disabled] { background: #f0f0f0; cursor: not-allowed; }
[data-aj="to-confirm"][disabled] { opacity: .5; cursor: not-allowed; }
/* 発信機カードの在庫なし（QA No.29(2)「全商品＝セット入会の物販・発信機」） */
.aj-device-card.is-soldout { opacity: .55; cursor: not-allowed; }
.aj-device-card.is-soldout .aj-device-card__badge { display: none; }
.aj-device-card__stock {
  display: block; margin-top: 4px; font-size: .82em; font-weight: 700; color: #a12525;
}
/* 【T21】入荷予定日＝「別枠でテキストを追加」（QA No.29 のAJ様ご要望）。
   在庫なしのときだけ出る（値が来なければ何も出ない）。 */
.aj-stock-note {
  display: block; margin-top: 2px; font-size: .82em; color: #1b6ca8; font-weight: 700;
}

/* ---- 規約同意（ボタン直前・中央） ---- */
.aj-agree { display: block; margin: 16px 0 0; font-size: 14px; text-align: center; }
.aj-agree a { color: var(--brand-accent-dark); }

/* ---- 確認サマリ ---- */
.aj-summary { display: grid; grid-template-columns: 8em 1fr; gap: 4px 12px; margin: 8px 0; }
.aj-summary dt { color: var(--ink-soft); font-size: 14px; }
.aj-summary dd { margin: 0; font-weight: 600; word-break: break-all; }
.aj-summary .aj-summary__group { grid-column: 1 / -1; font-weight: 700; color: var(--brand-accent-dark);
  border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }

/* ---- 完了 ---- */
.aj-done { text-align: center; padding: 32px 16px; }
/* 【2026-09-29｜R-2-33】決済エラーの段＝現行 error/base.tpl の `.error-message { text-align: center }` に合わせる */
.aj-payerror { text-align: center; padding: 32px 16px; }
.aj-payerror__msg { margin-bottom: 24px; }
.aj-done__icon { font-size: 40px; color: var(--ok); }

/* ---- 連絡先（現行＝左寄せ・普通サイズ・電話/メールアイコンは独自assets img）---- */
/* 現行: <div style="text-align:left"> 内・1000px中央コンテナの左から。img幅30px。 */
.aj-footer-contact { max-width: 1000px; margin: 0 auto; padding: 24px 16px; text-align: center; }   /* 背景はページ(薄グレー)を継承・中央寄せ */
.aj-footer-contact__tel { margin: 0 0 1em; padding-top: 24px; }
.aj-footer-contact__tel a { color: var(--ink); font-size: 16px; text-decoration: none; vertical-align: middle; }
.aj-footer-contact__hours { font-size: 15px; color: var(--ink); }   /* 時間も普通サイズ */
.aj-footer-contact__mail { margin: 0 0 1.5em; }
.aj-footer-contact__mail a { color: var(--ink); font-size: 15px; text-decoration: none; vertical-align: middle; } /* 目立たせない＝他の文字と同じ */
/* 連絡先アイコン＝現行と同じ 30×30 の画像（icon_phone/icon_mail）。右余白は現行 phone=5px / mail=10px */
.aj-ico { vertical-align: middle; display: inline; width: 30px; height: 30px; }
.aj-footer-contact__tel .aj-ico { margin-right: 5px; }
.aj-footer-contact__mail .aj-ico { margin-right: 10px; }

/* ---- 次の山行から ＝ #313131・大タグライン(2.5em/900/白) ＋ スライダー ---- */
/* #313131 セクション: padding-bottom を抑え、カルーセル下部を下の領域に重ねる（現行 bottom0 相当） */
.aj-footer-hero { background: #313131; color: #fff; text-align: center; padding: 60px 0 0; }
/* 画像の下・リンクの上の黒エリア */
.aj-footer-band { background: #000; height: 48px; }
.aj-footer-hero__tagline { font-size: clamp(1.5em, 6vw, 2.5em); font-weight: 900; letter-spacing: .05em;
  line-height: 1.5em; margin: 0 0 28px; }
/* カルーセル＝マスク+トラック+矢印+ドット（現行 w-slider 相当・3枚表示・画像大きめ） */
.aj-carousel { position: relative; max-width: 100%; margin: 0 auto; }
.aj-carousel__mask { overflow: hidden; position: relative; }
/* 画像下部を黒(#000)へフェード＝「上部2/3だけ見える／下は黒エリアに隠れる」を再現 */
.aj-carousel__mask::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
  background: linear-gradient(rgba(0,0,0,0), #000); z-index: 1; pointer-events: none; }
.aj-carousel__track { display: flex; transition: transform .5s ease; }   /* 現行 data-duration=500ms slide（autoplay false） */
/* スライド間に少し隙間（境界色＝セクション #313131） */
/* スライド寸法＝現行 .carousel-mask_form の実寸: desktop 幅33.3vw×高20vw（.image_slide_form=width/height100%・object-fit:cover）。
   現行に max-height の上限は無いので設けない（vw に純追従＝広い画面ほど大きく） */
.aj-carousel__track .aj-slide { flex: 0 0 33.333%; height: 20vw; object-fit: cover; object-position: top;
  box-sizing: border-box; border-left: 3px solid #313131; border-right: 3px solid #313131; }
/* 矢印・ドットは下端＝現行 .arrow/.w-slider-nav が bottom:0（ドットと同じ高さ） */
.aj-carousel__arrow { position: absolute; bottom: 2px; top: auto; transform: none; z-index: 2;
  background: transparent; color: #fff; border: 0; width: 50px; height: 50px; font-size: 32px; line-height: 1; cursor: pointer; }
.aj-carousel__arrow--prev { left: 0; } .aj-carousel__arrow--next { right: 0; }
.aj-carousel__dots { position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 6px; margin: 0; }
.aj-carousel__dots .aj-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.4); border: 0; padding: 0; cursor: pointer; }
.aj-carousel__dots .aj-dot.is-active { background: #fff; }

/* ---- リンクバー ＝ 現行 footer{background:#666666;color:#A9A9A9}・リンクは｜区切り ---- */
.aj-footer { background: #666666; color: #A9A9A9; padding: 28px 16px 32px; text-align: center; }
.aj-footer__links { font-size: 12px; line-height: 2; }
.aj-footer__links a { color: #D3D3D3; text-decoration: none; }   /* リンク文字＝rgb(211,211,211) */
.aj-footer__links a:hover { color: #fff; }
.aj-footer__links a small { font-size: 10px; }
.aj-footer__copy { display: block; color: #A9A9A9; padding-top: 14px; font-size: 12px; }
/* ---- 【D-0027 ③】説明画像のポップアップ（現行 .show-popupaa / .popupaa の踏襲）----
   現行の実測値をそのまま移す＝トリガー（`.select_cocoheli_model_info`）＝中央寄せ・16px・幅310px、
   オーバーレイ＝`rgba(0,0,0,.6)`・全画面・`z-index:9999`・左右10pxの余白、
   画像の器＝白・角丸16px・最大幅962px・`height: calc(100vh - 128px)` で**中がスクロール**（縦長の図を読める）、
   閉じるボタン＝白抜き・角丸・幅150px。
   ⚠️ 現行の 0.3s フェードは持たせない（`hidden` で出し入れする＝閉じている間は読み上げ・タブ移動の対象外にする）。 */
.aj-popup-link { width: 310px; margin: 20px auto 0; text-align: center; font-size: 16px; font-weight: 500;
  line-height: 1.5em; cursor: pointer; }
.aj-popup-link__mark { display: inline-block; margin-left: 6px; font-size: .9em; }
.aj-popup { position: fixed; inset: 0; z-index: 9999; width: 100%; height: 100dvh;
  padding: 0 10px; box-sizing: border-box; background: rgba(0, 0, 0, .6); overflow: auto; }
.aj-popup[hidden] { display: none; }
.aj-popup__inner { width: 100%; max-width: 962px; height: calc(100dvh - 128px); margin: 20px auto 0;
  border-radius: 16px; overflow: auto; background: #fff; }
.aj-popup__img { display: block; width: 100%; height: auto; border: 0; }
.aj-popup__close { display: block; width: 150px; margin: 20px auto; padding: 20px 40px; box-sizing: content-box;
  color: #fff; background: transparent; border: 2px solid #fff; border-radius: 50ch;
  font-size: 1.2em; text-align: center; cursor: pointer; }
/* 右下固定の「上へ戻る」＝現行 .gotop a{background:#444;color:#fff;width:53px} ---- */
.aj-gotop { position: fixed; right: 0; bottom: 0; z-index: 100; width: 53px; background: #444; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 9px 0 12px;
  opacity: 0; visibility: hidden; transition: opacity .2s; }
.aj-gotop.is-visible { opacity: 1; visibility: visible; }
/* 表示枚数は幅で自動（移動はJSがpx基準で1枚ずつ）。現行ブレークポイント＝991px/767px に合わせる:
   desktop(>991)=33.3vw/20vw＝3枚 → ≤991=50%/20vw＝2枚 → ≤767=100vw/40vw＝1枚 */
@media (max-width: 991px) {
  .aj-carousel__track .aj-slide { flex: 0 0 50%; height: 20vw; }     /* 現行 .carousel-mask_form{width:50%;height:20vw}＝2枚 */
}
@media (max-width: 767px) {
  .aj-carousel__track .aj-slide { flex: 0 0 100%; height: 40vw; }    /* 現行 .carousel-mask_form{width:100vw;height:40vw}＝1枚 */
  /* セクションカード＝縦積み（現行 .div_form2{flex-direction:column}）。ラベルは上帯に */
  .aj-sec { flex-direction: column; }
  .aj-sec__label { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 10px 16px; }
  .aj-sec__body { padding: 10px 16px 20px; }
  /* 〔2026-09-30 削除｜R-2-46〕発信機の並べ方は上の「選択カード」の節が持つ（現行は幅いっぱいの1列＝320px で絞らない） */
}

@media (max-width: 480px) {
  .aj-row input[name^="birth_"] { width: 4.5em; }
  .aj-steps li { font-size: 12px; }
  .aj-form-box { padding: 12px; }
}

/* ===== アクセシビリティ（2026-07-09 確認/完了画面 a11y仕様 A1-A12） ===== */
/* A8/A5: スクリーンリーダー専用の見出し（視覚的に隠すが読み上げ・フォーカス可） */
.aj-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A2: 必須をテキストでも明示（色だけに依存しない）
   【2026-09-25 現行に合わせた】現行の普通の画面は**帯のマークだけ**で、項目ごとの表記は出していない。
   ⇒ **見た目だけ隠す**（読み上げには残す＝.aj-sr-only と同じ隠し方）。表組みの画面は上の
   `.aj-form--table .aj-req-text` がバッジとして出す（現行の表組みは必須の項目すべてにバッジ）。 */
.aj-req-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 確認画面（ステップ2）の見出し・リード */
.aj-step-head { font-size: 1.15rem; margin: 4px 0 6px; }
.aj-step-lead { color: #5b6b7b; font-size: .9rem; margin: 0 0 12px; }
/* A9: キーボードフォーカスを可視化（マウス操作時は出さない） */
.aj-lp :focus-visible, .aj-form :focus-visible { outline: 2px solid var(--brand-accent, #0275d8); outline-offset: 2px; border-radius: 2px; }
/* プログラム的フォーカス先（見出し/サマリ＝tabindex=-1）は枠を出さず焦点だけ移す */
.aj-step-panel h2[tabindex="-1"]:focus, .aj-error-summary:focus, .aj-done h2:focus { outline: none; }
/* A12: モーション低減（CSSアニメーション抑制。JSのscrollはmatchMediaで対応済） */
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* 入会金の脇に出す一言（2026-08-18）＝現行は <small class="text-muted" style="margin-right:5px"> 相当。
   金額の手前に小さく灰色で出す（現行の見え方に合わせる）。 */
.aj-price-note { margin-right: 5px; font-size: .85em; color: #6c757d; }

/* 発送のお知らせ（2026-08-18）＝現行の運用は「バナー画像の差し替え」。
   ★差し替えた画像は**中央寄せ**で、幅いっぱいには伸ばさない（差し替え画像は寸法がまちまち）。 */
.aj-flow--notice { text-align: center; }
.aj-flow__img--notice { width: auto; max-width: 100%; margin: 0 auto; }
/* 画像を使わないお知らせ（見出し＋本文の表）＝こちらも中央寄せ。
   ⚠️ 共通ページ（404／受付できません）の `.aj-notice` とは別物なのでクラスを分ける。 */
.aj-shipnotice { max-width: var(--maxw); margin: 8px auto 0; padding: 0 16px; text-align: center; }
.aj-shipnotice__title { font-size: 1.15rem; margin: 0 0 8px; }
.aj-shipnotice__body { line-height: 1.9; white-space: pre-line; }

/* ページ内で決済する枠（Payment Element／`D-0047`・2026-08-25）。
   ★Stripe の要素そのものの見た目は Stripe 側が持つ＝ここで整えるのは**外側の余白と確定ボタン**だけ。
   ⚠️ 入力欄の高さは選ばれた決済手段で変わる（accordion）＝**高さを固定しない**。 */
.aj-pay { max-width: var(--maxw); margin: 0 auto; padding: 24px 16px; }
.aj-pay__element { margin: 16px 0; }
.aj-pay__error { color: var(--err); background: var(--err-bg); padding: 8px 12px; border-radius: var(--radius); margin: 8px 0; }
/* 確定ボタン＝フォームの他のボタンと同じ `.btn.btn-primary` を使う（見た目は §ボタン で定義済み）。
   ★**押せない間の見え方**だけここで足す＝`[data-aj="to-confirm"][disabled]` と同じ扱いに揃える
   （Payment Element が「まだ確定できない」と言っている間は押せない）。 */
.aj-pay [data-aj-pay-submit][disabled] { opacity: .5; cursor: not-allowed; }
/* 振込先（銀行振込を選ばれたとき）＝値はサーバーが組んだものを `aj-payment-element.js` が描く。
   ★クラス名はあちらの `renderBankTransfer()` が付けるものに合わせてある（`.aj-bank__*`）。
   ★桁の読み違いを防ぐため値は等幅で出す（口座番号・店番）。 */
.aj-pay__bank { margin-top: 16px; padding: 16px; border: 1px solid #dee2e6; border-radius: 4px; }
.aj-bank__amount { font-weight: 700; margin: 0 0 12px; }
.aj-bank__row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid #eee; }
.aj-bank__row:first-of-type { border-top: 0; }
.aj-bank__label { flex: 0 0 6.5em; font-size: .85em; color: #6c757d; }
.aj-bank__value { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.aj-bank__copy { flex: 0 0 auto; font-size: .8em; padding: 2px 8px; cursor: pointer; }
.aj-bank__ref { margin: 12px 0 0; font-size: .85em; color: #6c757d; }

/* 受付完了のアンケート（2026-08-25）＝**現行の体裁に合わせる**（`D-0008`）。
   現行＝`thanks/form/base.tpl`: 見出しは `<h2 class="text-center">`／案内画像は中央＋下余白30px／
   送信は `<div class="text-center" style="margin-bottom:50px">` の中の `.btn.btn-primary`。
   ⚠️ 現行は設問を `<table class="table table-bordered">` で組んでいるが、**当方は縦積み**にしてある
      （設問がMTで増減するため）。★列の体裁までは真似ない＝**中央寄せと余白だけ現行に合わせる**。
   ★設問の行は `.aj-row`／`.aj-label`／`.aj-select`（フォーム本体と同じクラス）で組んであるので
     **そこは既に体裁が付いている**＝ここで足すのは**外枠・見出し・案内文・送信の並び**だけ。 */
.aj-survey { max-width: var(--maxw); margin: 24px auto 0; padding: 0 16px; text-align: left; }
.aj-survey > h3 { text-align: center; font-size: 1.15em; margin: 0 0 12px; }   /* 現行は h2.text-center */
.aj-survey__intro { text-align: center; margin: 0 0 24px; line-height: 1.8; }
.aj-survey__actions { text-align: center; margin: 24px 0 50px; }   /* 現行 style="margin-bottom: 50px" */
.aj-survey__send[disabled] { opacity: .5; cursor: not-allowed; }
.aj-survey__msg { display: block; margin-top: 8px; }