/* ============================================================
   解約フォーム v2（新デザイン）
     ・cancel_agency の theme2 チャット画面のデザイン言語に寄せる
     ・form.css（v1）は一切読み込まない。完全な別CSS
     ・商品選択以降はチャット形式。フォームのカード枠は持たない
     ・1ステップ＝1ページ。ページを開くとそのステップの会話が流れる
   ============================================================ */

:root{
  /* 既存の管理画面・v1と同じブランド青（#185FA5）を基調にする */
  --ink:#1e2a38; --muted:#5b6d80; --faint:#8b9bad;
  --accent:#2477cc; --accent2:#4fb2e8; --accent-ink:#185fa5;
  --accent-soft:#e8f2fb;
  --bubble:#ffffff; --line:#e3eaf2; --danger:#c2454a; --danger-soft:#fdecec;
  --amber:#b45309; --amber-soft:#fdf3df;
  --info:#1e5db8; --info-soft:#e9f2fd;
  --sans:"Hiragino Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow-b:0 4px 18px rgba(24,60,100,.07);
  --shadow-c:0 8px 26px rgba(24,60,100,.09);
  --shadow-o:0 6px 20px rgba(24,60,100,.08);
}

*{box-sizing:border-box;}
/* hidden属性は display 指定に負けるので、明示的に効かせる。
   .btn や .cta は display を持つため、これが無いと hidden にしても消えない。 */
[hidden]{display:none !important;}
html,body{margin:0;min-height:100vh;}
body{
  font-family:var(--sans); color:var(--ink); line-height:1.75;
  background:linear-gradient(165deg,#e8f2fb 0%,#eef4fb 55%,#f4f1fa 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}

/* ---------- ヘッダー ---------- */
.topbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center;
  padding:14px 16px; background:#fff; border-bottom:1px solid var(--line);
}
.topbar .back{
  background:none; border:none; padding:4px 10px; font-family:inherit;
  font-size:22px; line-height:1; color:var(--ink); opacity:.7; cursor:pointer;
}
.topbar .back:hover{opacity:1;}
.topbar .back:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
.topbar .sp{width:42px;}
/* ヘッダーなしの画面で、左上にだけ置く戻るボタン */
.backfloat{position:fixed; top:10px; left:8px; z-index:10; margin:0;}
.backfloat .back{
  width:40px; height:40px; border:none; border-radius:50%; padding:0 3px 3px 0;
  background:rgba(255,255,255,.82); color:var(--ink); font-family:inherit;
  font-size:24px; line-height:1; cursor:pointer; box-shadow:var(--shadow-o);
}
.backfloat .back:hover{background:#fff;}
.backfloat .back:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.progress{flex:1; display:flex; justify-content:center;}
.progress .track{width:min(300px,50vw); height:6px; border-radius:3px; background:#e8eef5; overflow:hidden;}
.progress .fill{height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .5s ease;}

/* ---------- 本文 ---------- */
.stage{
  max-width:600px; margin:0 auto; padding:18px 20px 120px;
  display:flex; flex-direction:column; gap:12px;
}

/* ヘッダーなしのトップページ。タイトルとボタンだけを縦中央に置く */
.stage.bare{
  min-height:100vh; justify-content:center; padding:32px 24px;
}
.lead-title{
  font-size:24px; font-weight:700; line-height:1.7; color:var(--ink);
  text-align:center; text-wrap:balance; margin:0;
}
.lead-sub{
  font-size:14px; font-weight:700; line-height:1.9; color:var(--muted);
  text-align:center; margin:12px 0 0;
}
.lead-img{display:block; width:min(240px,64%); height:auto; margin:18px auto 4px;}
.stage.bare .cta{margin-left:0; margin-top:26px;}

/* 入力だけの画面（本人確認など）。会話は挟まず、見出しとフォームを縦に置く */
.stage.form{max-width:440px; padding:44px 24px 60px; gap:0;}
.stage.form .lead-title{font-size:21px; line-height:1.6;}
.stage.form .lead-sub{font-size:13px; font-weight:600; margin-top:10px;}
.stage.form .fields{margin:24px 0 0;}
.stage.form .picks{margin:24px 0 0;}
.stage.form .errbox{margin:20px 0 0;}
.stage.form .cta{margin:18px 0 0;}
/* サービスが複数あるときだけ出すグループ見出し */
.picks .grp{font-size:11.5px; font-weight:800; color:var(--faint); letter-spacing:.06em; margin:8px 0 -2px;}
.picks .grp:first-child{margin-top:0;}
.pick .sb{display:block; font-size:12px; font-weight:600; color:var(--faint); margin-top:3px; line-height:1.7;}
.pick .mt{display:block; font-size:11px; font-weight:600; color:var(--faint); margin-top:2px; line-height:1.7; opacity:.85;}
.stage.form .foot{font-size:11.5px; color:var(--faint); text-align:center; line-height:1.8; margin:16px 0 0;}

/* ---------- 吹き出し ---------- */
.msg{display:flex; gap:10px; align-items:flex-start;}
.msg.hidden{display:none;}
.av{
  width:42px; height:42px; border-radius:50%; flex-shrink:0; margin-top:1px; overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:15px;
}
/* 元画像に余白が多いので、少し拡大して丸に収める */
.av img{width:100%; height:100%; object-fit:cover; display:block; background:#fff;
  transform:scale(1.3); transform-origin:center 45%;}
.av.sp{background:none;}          /* 連続発話のときの空きスペース */
/* PCは画面に余裕があるのでアイコンを大きくする（カードの左余白は .dcard の直後で調整） */
@media (min-width:768px){ .av{width:46px; height:46px;} }
.b{
  background:var(--bubble); border-radius:6px 18px 18px 18px; padding:13px 17px;
  font-size:14.5px; box-shadow:var(--shadow-b); max-width:82%;
}
.b em{font-style:normal; color:var(--accent-ink); font-weight:800;}
.b .red{color:var(--danger); font-weight:800;}
.b .mark{background:linear-gradient(transparent 55%,#fde68a 55%); font-weight:800; padding:0 2px;}
.msg.user{justify-content:flex-end;}
/* ボタンと同じ塗り方に揃える（斜めグラデ＋色付きの大きな影は使わない） */
.msg.user .b{
  background:linear-gradient(180deg,#3286d8,var(--accent)); color:#fff; font-weight:800;
  border-radius:18px 6px 18px 18px; box-shadow:0 1px 2px rgba(24,60,100,.18);
}
/* 入力中のドット */
.typing{display:inline-flex; gap:4px; align-items:center; height:1.75em;}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--faint); display:block; animation:dot 1.2s infinite;}
.typing i:nth-child(2){animation-delay:.2s;} .typing i:nth-child(3){animation-delay:.4s;}
@keyframes dot{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}

/* ---------- 会話に差し込むカード ---------- */
.dcard{margin:2px 0 4px 52px;}
/* PCはアイコンが46pxになるぶん、ぶら下がり位置も合わせる（46＋gap10） */
@media (min-width:768px){ .dcard{margin-left:56px;} }
.dcard.wide{margin-left:0;}
.panel{background:#fff; border-radius:16px; box-shadow:var(--shadow-c); overflow:hidden;}
.panel.edge{border:2px solid var(--accent);}
.panel .head{background:var(--accent); color:#fff; font-weight:900; font-size:13px; text-align:center; padding:8px;}
.panel .head.warn{background:var(--amber);}
/* 内容を並べるだけの区切り見出し（申請内容の確認など）。
   青はCTAや強調のための色なので、ただの見出しには使わない */
.panel .head.plain{background:#eef2f7; color:var(--muted); text-align:left; letter-spacing:.02em;}
.panel .head.plain + .row{border-top:none;}
.hero{text-align:center; padding:18px 16px 14px;}
.hero .lb{font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.04em;}
.hero .big{font-size:42px; font-weight:900; letter-spacing:-.02em; line-height:1.15; font-variant-numeric:tabular-nums;}
.hero .big small{font-size:16px; font-weight:800; color:var(--muted); margin-left:2px;}
.hero .yoy{display:inline-block; margin-top:6px; font-size:13px; font-weight:800;
  color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:4px 14px;}
.hero .sub{font-size:12px; font-weight:700; color:var(--faint); margin-top:2px;}
/* .panel .note（区切り線つき）より後に効かせたいので、セレクタを1段強くする。
   数値の説明は同じカードの続きなので、線で区切らず数値の直下に置く */
.panel .hero .note{font-size:11px; color:var(--faint); line-height:1.6;
  border-top:none; padding:0; margin-top:5px;}
/* 月次推移の棒グラフ（数値カードの下に置く） */
.bars{padding:14px 16px 14px; border-top:1px solid var(--line);}
.bars .cap{font-size:11px; color:var(--faint); margin-bottom:12px;}
/* 棒の高さは .track（固定高）に対する％で決める。
   ラベルと同じ列に入れると、ラベルのぶん縮められて上位の棒が頭打ちになる */
.bars .plot{display:flex; align-items:flex-end; gap:6px; padding-top:16px;}
.bars .col{flex:1; min-width:0;}
.bars .track{height:88px; display:flex; align-items:flex-end;}
.bars .bar{position:relative; width:100%; min-height:4px; border-radius:4px 4px 0 0; background:var(--accent);}
.bars .bar .v{position:absolute; top:-15px; left:0; right:0; text-align:center; white-space:nowrap;
  font-size:9.5px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums;}
.bars .lb{margin-top:5px; text-align:center; font-size:10px; color:var(--faint); white-space:nowrap;}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 18px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line);}
.row b{font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.row.keep{background:var(--accent-soft);} .row.keep b{color:var(--accent-ink);}
.panel .note{font-size:11px; color:var(--faint); line-height:1.6; padding:10px 18px; border-top:1px solid var(--line);}
/* 見出しのすぐ下に置く用語説明。一覧の前置きなので、区切り線は下側に出す */
.panel .note.lead{border-top:none; border-bottom:1px solid var(--line); background:#f8fafc;}
.panel .note.lead + .row{border-top:none;}
/* TimeRexの埋め込みは幅550px固定。.panel の overflow:hidden のままだと
   スマホで右側（日付送りの矢印など）が切れて操作できないため、横スクロールさせる */
#v2reserve{overflow-x:auto; -webkit-overflow-scrolling:touch;}
/* 一覧をたたんでおくときの「もっと見る」 */
.morelink{border:1px solid var(--accent-ink); background:#fff; color:var(--accent-ink);
  border-radius:999px; padding:7px 22px; font-size:12.5px; font-weight:800; cursor:pointer;}
.morelink:hover{background:var(--accent-soft);}

/* 折りたたみ（内訳・根拠） */
details.more{border-top:1px solid var(--line);}
details.more > summary{list-style:none; cursor:pointer; padding:12px 18px; font-size:13px;
  font-weight:800; color:var(--accent-ink); display:flex; justify-content:space-between; align-items:center; gap:8px;}
details.more > summary::-webkit-details-marker{display:none;}
details.more > summary::after{content:"\25BE"; font-size:11px; transition:transform .2s ease;}
details.more[open] > summary::after{transform:rotate(180deg);}
details.more[open] > summary{border-bottom:1px solid var(--line);}
details.more > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
details.rowinfo > summary{list-style:none; cursor:pointer;}
details.rowinfo > summary::-webkit-details-marker{display:none;}
details.rowinfo > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.i{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:6px;
  border:1px solid var(--accent-ink); border-radius:50%; color:var(--accent-ink);
  font-size:10px; font-weight:700; font-style:normal; line-height:1; vertical-align:middle;}
details.rowinfo[open] .i{background:var(--accent-ink); color:#fff;}
.rowinfo-note{padding:0 18px 12px; font-size:12px; color:var(--muted); line-height:1.85; background:#f6f9fd;}

/* ---------- 共通パネル（templates/_gbp_panels.php のマークアップ）----------
   マークアップは v1 と共用し、見た目だけをここで v2 に合わせる。
   v1側のCSS出力は uiActiveVariant() を見て抑止している。 */
.gbp-panel{background:#fff; border-radius:16px; box-shadow:var(--shadow-c); overflow:hidden; margin:0; text-align:left;}
.gbp-panel-head{font-size:13px; font-weight:900; color:#fff; background:var(--accent); text-align:center; padding:9px 16px;}
.gbp-panel-hero{text-align:center; padding:18px 16px 14px; border-bottom:1px solid var(--line);}
.gbp-panel-hero .lb{font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.04em; line-height:1.6;}
.gbp-panel-hero .big{font-size:42px; font-weight:900; letter-spacing:-.02em; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums;}
.gbp-panel-hero .big small{font-size:16px; font-weight:800; color:var(--muted); margin-left:2px;}
.gbp-panel-hero .yoy{display:inline-block; margin-top:8px; background:var(--accent-soft); color:var(--accent-ink);
  font-weight:800; font-size:13px; border-radius:999px; padding:4px 14px;}
.gbp-panel-hero .hero-note{font-size:11px; color:var(--faint); line-height:1.6; margin-top:8px;}
.gbp-panel-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 18px; font-size:12.5px; color:var(--muted); line-height:1.7;}
.gbp-panel-row + .gbp-panel-row,
details.gbp-row + details.gbp-row > .gbp-panel-row,
.gbp-panel-row + details.gbp-row > .gbp-panel-row,
details.gbp-row + .gbp-panel-row{border-top:1px solid var(--line);}
.gbp-panel-row b{font-size:18px; font-weight:800; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums;}
.gbp-panel-row.is-key{background:var(--accent-soft);}
.gbp-panel-note{font-size:11px; color:var(--faint); line-height:1.6; padding:10px 18px; border-top:1px solid var(--line);}
.gbp-panel-more{border-top:1px solid var(--line);}
.gbp-panel-more > summary{list-style:none; cursor:pointer; padding:12px 18px; font-size:13px; font-weight:800;
  color:var(--accent-ink); display:flex; align-items:center; justify-content:space-between; gap:8px;}
.gbp-panel-more > summary::-webkit-details-marker{display:none;}
.gbp-panel-more > summary::after{content:"\25BE"; font-size:11px; transition:transform .2s ease;}
.gbp-panel-more[open] > summary::after{transform:rotate(180deg);}
.gbp-panel-more[open] > summary{border-bottom:1px solid var(--line);}
.gbp-panel-more > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
details.gbp-row > summary{list-style:none; cursor:pointer;}
details.gbp-row > summary::-webkit-details-marker{display:none;}
details.gbp-row > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.gbp-i{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:6px;
  border:1px solid var(--accent-ink); border-radius:50%; color:var(--accent-ink);
  font-size:10px; font-weight:700; font-style:normal; line-height:1; vertical-align:middle;}
details.gbp-row[open] > summary .gbp-i{background:var(--accent-ink); color:#fff;}
.gbp-row-note{padding:0 18px 13px; font-size:12px; color:var(--muted); line-height:1.85; background:#f6f9fd;}
@media (prefers-reduced-motion: reduce){
  .gbp-panel-more > summary::after{transition:none;}
}

/* 育成レベルのリング */
.lvl{background:#fff; border-radius:16px; box-shadow:var(--shadow-c); padding:20px 28px 18px; text-align:center;}
.lvl .t{font-size:12.5px; font-weight:800; color:var(--muted); margin-bottom:10px;}
.lvl .ring{position:relative; width:150px; height:150px; margin:0 auto;}
.lvl .ring svg{transform:rotate(-90deg);}
.lvl .ring .arc{transition:stroke-dashoffset 1.2s cubic-bezier(.22,.9,.3,1);}
@media (prefers-reduced-motion: reduce){ .lvl .ring .arc{transition:none;} }
.lvl .ring .val{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.lvl .ring .val b{font-size:34px; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums;}
.lvl .ring .val small{font-size:12px; color:var(--faint); font-weight:800;}
.lvl .tag{display:inline-block; background:var(--amber-soft); color:var(--amber); font-size:12px;
  font-weight:800; border-radius:999px; padding:3px 14px; margin-top:10px;}
.lvl .note{margin-top:10px; font-size:11px; color:var(--faint);}

/* ---------- 選択肢・ボタン ---------- */
.opts{display:flex; flex-direction:column; gap:10px; margin:6px 0 4px 52px;}
.opt{
  background:#fff; border:none; border-radius:16px; padding:15px 20px;
  font-size:14.5px; font-weight:800; font-family:inherit; color:var(--ink);
  cursor:pointer; text-align:left; display:flex; justify-content:space-between; align-items:center;
  box-shadow:var(--shadow-o); transition:transform .12s ease; width:100%;
}
.opt:hover{transform:translateY(-1px);}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.opt::after{content:"\203A"; color:var(--faint); font-size:18px; margin-left:12px;}
.opt.data{background:var(--info-soft); color:var(--info);} .opt.data::after{color:#3b82f6;}
.opt.guide{background:var(--amber-soft); color:var(--amber);} .opt.guide::after{color:var(--amber);}

/* 次へ（画面下・固定しない。会話の続きとして置く） */
.cta{margin:14px 0 0 52px; display:flex; flex-direction:column; gap:10px;}
.cta form{margin:0;}
/* グラデーションは同系色で明度差わずか（並べないと気づかない程度）。
   影は装飾ではなく「押せる面」を示す最小限に留める。斜めグラデ＋色付きの
   大きなグローは、それだけで作り物っぽく見えるので使わない。 */
.btn{
  display:block; position:relative; width:100%; border:none; border-radius:10px; padding:15px;
  font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; text-align:center;
  background:linear-gradient(180deg,#3286d8,var(--accent)); color:#fff;
  box-shadow:0 1px 2px rgba(24,60,100,.18);
}
.btn:hover{background:linear-gradient(180deg,#3d90de,#2b80d5);}
.btn:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px;}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}
.btn.ghost{background:#fff; color:var(--muted); border:1px solid var(--line); box-shadow:none;}
.btn.ghost:hover{background:#fbfcfe;}
/* こちらを選んでほしい導線（違約金ページの「申請可能日以降に手続きをする」など）。
   淡い緑地＋濃い緑文字。コントラストは5.2:1で、白文字を明るい緑に乗せるより読みやすい。
   グラデーションは青の主ボタンと同じ作り（180deg・同系色・上を明るく）にして光の向きを揃える。
   縁は border ではなく inset の1pxリング。border だとボタンの外形が大きくなり、
   隣の青ボタンと高さが揃わなくなるため。 */
.btn.ok{background:linear-gradient(180deg,#eafbf1,#d9f4e5); color:#047857; border:none;
        box-shadow:0 1px 2px rgba(4,120,87,.18), inset 0 0 0 1px rgba(4,120,87,.16);}
.btn.ok:hover{background:linear-gradient(180deg,#f2fdf7,#e4f8ed);}
.btn.ok:focus-visible{outline:2px solid #047857; outline-offset:2px;}
.btn.ok.loading::after{border-color:rgba(4,120,87,.3); border-top-color:#047857;}

/* 送信中。ラベルを透明にして幅を保ったまま、中央にスピナーを出す */
.btn.loading{color:transparent; pointer-events:none;}
.btn.loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%;
  animation:btnspin .7s linear infinite;
}
.btn.ghost.loading::after{border-color:rgba(91,109,128,.3); border-top-color:var(--muted);}
@keyframes btnspin{to{transform:rotate(360deg);}}

/* データ取得中の演出（店舗選択など、待ち時間のある画面） */
.loadbox{display:none; text-align:center; padding:22px 12px 2px;}
.loadbox.on{display:block;}
.loadbox .sp{
  display:inline-block; width:24px; height:24px; border-radius:50%;
  border:3px solid #dbe6f2; border-top-color:var(--accent);
  animation:btnspin .8s linear infinite;
}
.loadbox .tx{
  display:block; margin-top:12px; min-height:22px;
  font-size:13.5px; font-weight:700; color:var(--muted);
  transition:opacity .3s ease;
}
@media (prefers-reduced-motion: reduce){
  .loadbox .sp{animation:none;}
  .loadbox .tx{transition:none;}
}
@media (prefers-reduced-motion: reduce){
  /* 回転させない代わりに、ラベルを残したまま押せない状態を示す */
  .btn.loading{color:#fff; opacity:.55;}
  .btn.ghost.loading{color:var(--muted);}
  .btn.loading::after{display:none;}
}
.cta .hint{font-size:11px; color:var(--faint); text-align:right; line-height:1.7;}
/* ボタンの下に置く補足。押したあと何が起きるかの説明なので、読ませたい分 hint より少し大きい */
.cta .footnote{font-size:12px; color:var(--muted); text-align:left; line-height:1.85; margin-top:2px;}
/* 「次へ」で少しずつ出す画面の送りボタン。会話と一緒に消えないよう data-seq は付けない */
.morebar{margin-top:16px;}
/* gate のある画面では、まだ出していない発話は場所を取らない。
   そのままだとボタンが未表示分の下へ押し出され、会話とボタンが離れてしまう。 */
#stage.gated [data-seq]:not(.shown){display:none;}

/* ---------- 入力フォーム（認証・店舗入力など） ---------- */
.fields{margin:6px 0 0; background:#fff; border-radius:16px; box-shadow:var(--shadow-c); padding:18px 18px 20px;}
.field + .field{margin-top:15px;}
.field label{display:block; font-size:12px; font-weight:800; color:var(--muted); margin-bottom:6px;}
.field label .sub{font-weight:600; color:var(--faint); margin-left:4px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:11px;
  background:#f9fbfd; color:var(--ink); font-size:15px; font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-soft);
}
.field input.ng, .field textarea.ng{border-color:var(--danger); background:var(--danger-soft);}
.field textarea{min-height:88px; font-size:14px; line-height:1.8;}
.errbox{display:flex; gap:8px; align-items:flex-start; background:var(--danger-soft); color:var(--danger);
  font-size:13px; font-weight:700; padding:11px 13px; border-radius:11px; margin-top:14px; line-height:1.7;}

/* 選択（複数可）のボタン群 */
/* 左のインデントは外側（.dcard / .opts）が持つ。ここで足すと二重になる */
.picks{display:flex; flex-direction:column; gap:9px; margin:6px 0 0;}
.pick{display:flex; align-items:center; gap:11px; background:#fff; border:2px solid transparent; border-radius:14px;
  padding:14px 17px; font-size:14.5px; font-weight:700; font-family:inherit; color:var(--ink);
  box-shadow:var(--shadow-o); cursor:pointer; text-align:left; width:100%;}
.pick .dot{width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex-shrink:0;
  display:grid; place-items:center; transition:background .15s ease, border-color .15s ease;}
.pick.on{border-color:var(--accent);}
.pick.on .dot{background:var(--accent); border-color:var(--accent);}
.pick.on .dot::after{content:"\2713"; color:#fff; font-size:12px; font-weight:900; line-height:1;}
.pick:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* 確認チェック */
.checks{margin:6px 0 0 52px; display:flex; flex-direction:column; gap:8px;}
.check{display:flex; align-items:flex-start; gap:10px; background:#fff; border-radius:12px;
  padding:12px 15px; box-shadow:var(--shadow-b); font-size:13.5px; font-weight:700; cursor:pointer;}
.check input{margin-top:4px; accent-color:var(--accent); flex-shrink:0;}
.check:has(input:checked){box-shadow:0 0 0 2px var(--accent), var(--shadow-b);}

/* ---------- 登場アニメーション ---------- */
/* 順に出すのは layout.php が data-seq を付けた要素だけ。
   カードの中に置いた .cta や .opts まで対象にすると、.in が付かず消えたままになる */
[data-seq]{opacity:0; transform:translateY(8px);}
[data-seq].in{opacity:1; transform:none; transition:opacity .4s ease, transform .4s ease;}
@media (prefers-reduced-motion: reduce){
  [data-seq]{opacity:1; transform:none;}
  [data-seq].in{transition:none;}
  .typing i{animation:none;}
  .progress .fill{transition:none;}
}

@media (max-width:420px){
  .stage{padding:14px 14px 100px;}
  .dcard,.opts,.cta,.checks{margin-left:0;}
  .b{max-width:86%;}
  .hero .big{font-size:36px;}
}

/* ---------- 画像の拡大表示（クリックでポップアップ） ---------- */
/* 基本は画面に収める。ただし縦長の画面に横長の図を出すと文字が小さいままなので、
   そのときだけ（layout.php が .zwide を付ける）高さいっぱいに広げて横スクロールさせる。
   PCは画面が広いので、つねに全体を収める。 */
.zoomable{cursor:zoom-in;}
#v2zoom{position:fixed; inset:0; z-index:200; background:rgba(12,22,34,.86);
  display:flex; flex-direction:column; padding:14px;}
#v2zoom[hidden]{display:none;}
#v2zoom .zbody{flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; align-items:center;}
#v2zoom img{max-width:100%; max-height:100%; width:auto; height:auto;
  border-radius:6px; background:#fff; display:block; margin:auto;}
#v2zoom.zwide img{height:100%; width:auto; max-width:none; max-height:none;}
#v2zoom .zbar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 2px 10px; color:#fff;}
/* 横スクロールの案内は、実際に横へはみ出しているときだけ出す */
#v2zoom .zhint{font-size:12px; font-weight:700; color:rgba(255,255,255,.78); visibility:hidden;}
#v2zoom.zwide .zhint{visibility:visible;}
#v2zoom .zclose{appearance:none; border:0; background:rgba(255,255,255,.14); color:#fff;
  width:36px; height:36px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer;
  flex-shrink:0;}
#v2zoom .zclose:hover{background:rgba(255,255,255,.24);}
#v2zoom .zclose:focus-visible{outline:2px solid #fff; outline-offset:2px;}
body.v2zoom-open{overflow:hidden;}
@media (min-width:768px){
  #v2zoom{padding:24px;}
  #v2zoom .zbody{overflow:hidden;}
  #v2zoom.zwide img{height:auto; width:auto; max-width:100%; max-height:100%;}
  #v2zoom.zwide .zhint{visibility:hidden;}
}