/*
 * 広告LP v5 — v3 との差分だけ。lp3.css の**あとに**読む。
 * ---------------------------------------------------------------------------
 * 正本は karun-os `projects/広告運用/LP/モック_v5.html`
 * （`scripts/build_v5.py` が `モック.html` から作る）。**こちらを直したら向こうにも戻すこと。**
 *
 * v5 は v3 の骨格をそのまま使い、次の4つだけを足している:
 *   ① FV を 9月チラシ裏面の型に差し替え（黄×赤・巨大な「0」・集中線・4費目のカード）
 *   ② 無料回数の逓減表とカウントダウン
 *   ③ 申し込み数の追従トースト
 *   ④ フォームの「あと◯問」進捗バー
 * それ以外（§2以降の本文・料金・FAQ・フォーム）は v3 と同じものを見ている。
 */

/* ── v5: FV は 9月チラシ裏面の型（B-2）。2026-09-04 に A/B/C → B → B-1/2/3 と比べて決定。
   チラシはすでに成果が出ている経路なので、チラシを見て検索した人が**同じ絵に着地する**ことを優先した。
   ⚠ 黄×赤は v3 のトークン（オレンジ主系）の外。FVだけ別世界にする判断で、下の白い面とは色がつながらない。
   ⚠ 金額はチラシ準拠。27,280円＝入会金11,000＋テキスト代2,530＋受講料(8回分)11,550＋月会費2,200。
     テキスト代は実費で教室・コースにより変わるため、2,530円は「例」として注記に置く。
   ⚠ カードは 2×2。1列4枚だと名称12.5px・通常10.5pxまで落ちて、v3 の最小15.5pxを割る。 ── */
:root{--f-yellow:#FFDE2E;--f-yellow2:#FFF06B;--f-red:#E60012;--f-navy:#123B78;--f-crimson:#D6252B}
/* 期限を過ぎたら .cp-only が全部消えるので、代わりに出す見出し（外し忘れ防止）。
   ⚠ この2行を消すとキャンペーン中にも通常版の見出しが出てしまう（2026-09-04 に踏んだ） */
.fv-fallback{display:none;text-align:center}
body.cp-over .fv-fallback{display:block}
.fv-fallback h1{font-family:var(--font-disp);font-weight:900;letter-spacing:-.015em;font-size:22px;line-height:1.6;margin-bottom:12px}
.fv-fallback h1 .big{display:block;width:fit-content;margin:6px auto 0;font-size:clamp(34px,9.6vw,40px);line-height:1.35;color:var(--c-accent-text);background:linear-gradient(transparent 70%,#FFE7A8 70%)}
/* ══ チラシ型の共通パーツ ══ */
.fl{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 6px 0 rgba(180,140,0,.3)}
.fl-sun{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from -8deg at 50% 34%,rgba(255,255,255,.42) 0 6deg,transparent 6deg 12deg)}
.fl-head{position:relative;display:flex;align-items:center;gap:8px;padding:10px 12px 4px}
.fl-tag{background:var(--f-crimson);color:#fff;font-family:var(--font-disp);font-weight:900;font-size:16px;line-height:1.2;
  padding:9px 9px 14px;text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 9px),0 100%);flex:none}
.fl-ttl{flex:1;font-family:var(--font-disp);font-weight:900;font-size:clamp(20px,5.6vw,25px);line-height:1.2;
  color:var(--f-navy);letter-spacing:-.02em;text-align:center;text-shadow:0 2px 0 #fff}
.fl-ttl em{font-style:normal;font-size:1.45em;color:var(--f-crimson)}
/* 「0」と「円」は**ベースラインで揃える**（flex-end だと 0 の行box が glyph より短く、円が中央に浮く）。あいだに余白 */
.fl-zero{position:relative;display:flex;align-items:baseline;justify-content:center;gap:10px;margin:-2px 0 10px}
.fl-zero .n{font-family:var(--font-disp);font-weight:900;line-height:.86;color:var(--f-red);letter-spacing:-.06em;
  text-shadow:0 5px 0 rgba(150,0,10,.26);font-size:clamp(112px,32vw,148px)}
.fl-zero .y{font-family:var(--font-disp);font-weight:900;font-size:clamp(36px,10vw,48px);color:var(--f-red);line-height:1}
.fl-start{position:relative;text-align:center;font-family:var(--font-disp);font-weight:900;
  font-size:clamp(20px,5.6vw,24px);color:var(--c-ink);line-height:1.35;margin-top:-8px}
.fl-start u{text-decoration-color:var(--f-red);text-decoration-thickness:4px;text-underline-offset:5px}
.fl-lim{position:relative;display:table;margin:10px auto 0;background:var(--f-navy);color:#fff;
  font-family:var(--font-disp);font-weight:900;font-size:15px;border-radius:999px;padding:5px 18px;letter-spacing:.04em}
.fl-save{position:relative;background:var(--f-navy);color:#fff;padding:11px 12px;text-align:center;
  font-family:var(--font-disp);font-weight:900;font-size:16.5px;line-height:1.4;margin-top:12px}
.fl-save b{font-size:1.5em;color:var(--c-cta);letter-spacing:-.03em;vertical-align:-2px;margin:0 2px}
/* ⚠ position:relative が要る。集中線(.fl-sun)は absolute なので、static な後続要素の上に描かれる。
   付け忘れると白帯の文字に黄色い縞がかかる（2026-09-04 に踏んだ） */
.fl-lessons{position:relative;z-index:1;background:var(--c-white);padding:12px 14px 13px;text-align:center;border-top:3px solid var(--f-red)}
.fl-lessons .k{font-family:var(--font-disp);font-weight:900;font-size:15.5px;color:var(--c-accent-text)}
.fl-lessons .v{font-family:var(--font-disp);font-weight:900;font-size:19px;line-height:1.35;margin-top:2px}
.fl-lessons .v b{font-size:1.95em;color:var(--f-red);letter-spacing:-.03em;vertical-align:-3px;margin:0 1px}
.fl-lessons .d{font-size:14.5px;color:var(--c-muted);margin-top:4px;font-family:var(--font-body);font-weight:400}
.fl-lessons .d .num{font-family:var(--font-disp);font-weight:900;font-size:20px;color:var(--c-accent-text);vertical-align:-2px;margin:0 2px}
.fl-note{font-size:13.5px;color:var(--c-muted);line-height:1.7;text-align:left;padding:12px 2px 0;text-wrap:pretty}

/* B-2: チラシ裏面のカード4枚を再現 */
.b2 .fl-body{position:relative;padding:0 12px 0}
.b2 .fl-zenbu{position:relative;text-align:center;font-family:var(--font-hand);font-size:19px;color:var(--f-navy);margin-top:4px}
/* 2×2。1列4枚だと名称12.5px・通常10.5pxまで落ちてシニアに厳しかったので、
   幅を倍にして 名称16px・通常14px・0円30px に上げた（2026-09-04） */
.b2 .cards{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0}
.b2 .card{background:#FFFDF6;border-radius:12px;padding:11px 8px 12px;text-align:center;box-shadow:0 3px 0 rgba(150,110,0,.22);
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic nm" "now now" "was was";align-items:center;gap:2px 8px}
.b2 .card .ic{grid-area:ic;width:32px;height:32px;border-radius:50%;display:grid;place-content:center;font-size:17px;color:#fff}
.b2 .card:nth-child(1) .ic{background:#F2A03D}.b2 .card:nth-child(2) .ic{background:#E2607A}
.b2 .card:nth-child(3) .ic{background:#4A87C7}.b2 .card:nth-child(4) .ic{background:#4FA86B}
.b2 .card .nm{grid-area:nm;font-family:var(--font-disp);font-weight:900;font-size:16px;line-height:1.25;color:var(--c-ink);text-align:left}
.b2 .card .nm small{font-size:.82em}
.b2 .card .was s{text-decoration-thickness:1.5px}
.b2 .card .was{grid-area:was;font-size:14px;color:var(--c-muted);line-height:1.45;margin-top:1px}
.b2 .card .ar{display:none}
.b2 .card .now{grid-area:now;font-family:var(--font-disp);font-weight:900;font-size:30px;color:var(--f-red);letter-spacing:-.04em;line-height:1.15;margin-top:7px}
.b2 .fl-course{position:relative;text-align:right;font-size:12.5px;color:#5a4a20;margin-top:6px}


/* ── v5: 逓減表のカウントダウン（B案・帯）。2026-09-05 に3案から決定。
   ⚠ ラベルは1行目、数字は2行目に固定する。1行に混ぜると 390px で
     「8回無料まで あと 7:13:」「26:01」のように単位の途中で折り返す ── */
.cd-unit{display:inline-flex;flex-direction:column;align-items:center;gap:1px}
.cd-unit b{font-family:var(--font-disp);font-weight:900;font-variant-numeric:tabular-nums;line-height:1;font-size:26px;color:#fff}
.cd-unit span{font-size:11px;color:rgba(255,255,255,.72);line-height:1;font-family:var(--font-body);font-weight:400}
.cd-sep{font-family:var(--font-disp);font-weight:900;line-height:1;font-size:19px;color:rgba(255,255,255,.55);margin-bottom:11px}
.cd-bar{display:flex;flex-direction:column;align-items:center;gap:7px;
  background:var(--c-accent-deep);color:#fff;border-radius:12px;padding:10px 12px 12px;margin:0 0 12px}
.cd-bar .lb{font-family:var(--font-disp);font-weight:900;font-size:14.5px;letter-spacing:.04em;white-space:nowrap;line-height:1.3}
.cd-row{display:flex;align-items:flex-end;justify-content:center;gap:8px;flex-wrap:nowrap}

/* v5: 無料回数の逓減表（チラシ表面の3つの締切）。過ぎた段は薄く、いまの段は座布団 */
.cp-tier{width:100%;border:none;box-shadow:none;background:none;margin:10px 0 0;border-radius:0;overflow:visible}
.cp-tier th,.cp-tier td{border:none;border-bottom:1px dashed var(--c-line);background:none;padding:10px 8px;font-size:16px;color:var(--c-ink);font-family:var(--font-body);font-weight:400;text-align:left}
.cp-tier tr:last-child th,.cp-tier tr:last-child td{border-bottom:none}
/* ⚠ 料金表の「入口プラン(月4回)の座布団」 table tr:nth-child(2) td{background:#FFF3EA} が
   ここにも効いて、2行目（4回）だけ薄赤くなる。詳細度で勝つ必要がある（2026-09-04 に踏んだ） */
.cp-tier tr:nth-child(2) td{background:none}
.cp-tier td{text-align:right;white-space:nowrap}
.cp-tier td b{font-family:var(--font-disp);font-weight:900;font-size:24px;color:var(--c-accent-text);letter-spacing:-.02em;margin-right:2px}
.cp-tier tr.past{opacity:.42}
.cp-tier tr.past td b{color:var(--c-muted)}
.cp-tier tr.now th,.cp-tier tr.now td{background:#FFE7A8;font-weight:700}
.cp-tier tr.now th{border-radius:10px 0 0 10px}
.cp-tier tr.now td{border-radius:0 10px 10px 0}
.cp-tier tr.now th::after{content:"いまここ";display:inline-block;background:var(--c-accent-deep);color:#fff;font-family:var(--font-disp);font-weight:900;font-size:12.5px;border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:2px}

/* v5: キャンペーンの内訳（FV直下でもう一度・カーブスの言い直しの型） */
.cp-detail{background:#FFFBF1;border:2px dashed var(--c-accent-deep);border-radius:var(--r-md);padding:18px 16px 16px;margin-top:20px}
.cp-detail h3{font-family:var(--font-disp);font-weight:900;font-size:19px;text-align:center;color:var(--c-accent-text);line-height:1.45;margin-bottom:12px}
.cp-detail .cp-list{margin:0 0 12px}
.cp-total{display:flex;align-items:baseline;justify-content:center;gap:8px;background:var(--c-accent-deep);color:#fff;border-radius:10px;padding:10px 12px;font-family:var(--font-disp);font-weight:900;font-size:17px;line-height:1.4;flex-wrap:wrap}
.cp-total s{opacity:.8;font-size:.92em}
.cp-total b{font-size:30px;letter-spacing:-.03em;color:var(--c-cta)}

/* ── v5: 申し込み数（社会的証明）は**右下の追従トースト**。食べログの「本日◯件」と同じ置き方。
   FVに大きく置くとキャンペーンと主役を食い合うので、小さく後から出す（2026-09-04 指示）。
   ⚠ 出す数字は本部シートの実数だけ。落合さんが選んだ案に差し替える ── */
/* ⚠ **左下に置く。** 右下にはページトップへ戻るボタンが居て重なる（2026-09-10 実機）。
   相手の大きさに合わせて right を詰めると、ボタンが変わるたびにずれる。
   ぶつからない側へ寄せるほうが壊れない。 */
#proofToast{
  position:fixed;left:12px;right:auto;bottom:16px;z-index:55;
  max-width:min(270px,calc(100vw - 88px));background:var(--c-white);
  border:2px solid var(--c-accent2);border-radius:14px;
  box-shadow:0 4px 0 rgba(0,74,173,.18),0 10px 24px rgba(43,39,37,.16);
  padding:12px 34px 13px 14px;text-align:left;
  font-family:var(--font-body);font-size:13.5px;line-height:1.55;color:var(--c-ink);
  opacity:0;transform:translateX(-24px);pointer-events:none;transition:opacity .4s,transform .4s,bottom .3s;
}
#proofToast.show{opacity:1;transform:none;pointer-events:auto}
/* ⚠ 追従CTAの高さは文言で変わるので決め打ちにしない（128pxになって重なった・2026-09-05）。
   実寸を JS で --sticky-h に入れ、そこに 14px 足す */
body.sticky-on #proofToast{bottom:calc(var(--sticky-h, 118px) + 14px)}
#proofToast .cap{display:block;font-size:12px;color:var(--c-muted);line-height:1.45;margin-bottom:2px}
#proofToast .main{display:block;font-weight:700}
#proofToast .main b{font-family:var(--font-disp);font-weight:900;font-size:22px;color:var(--c-accent-text);letter-spacing:-.02em;margin:0 1px;font-variant-numeric:tabular-nums;vertical-align:-1px}
#proofToast .x{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--c-line);background:#fff;color:var(--c-muted);font-size:15px;line-height:20px;text-align:center;cursor:pointer;padding:0}
#proofToast .x:focus-visible{outline:2px solid var(--c-accent2);outline-offset:2px}
/* 申し込み数の出どころ。トーストは短く保ち、根拠はここに置く */
/* キャンペーンの注記はここに1か所だけ集める（本文の各所に散らさない・2026-09-04 指示）。
   ⚠ キャンペーンの注記には cp-only を付ける。期限を過ぎたら丸ごと消える */
.footnote{text-align:left;max-width:34em;margin:0 auto 18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.16)}
.footnote-h{font-family:var(--font-disp);font-weight:900;font-size:15px;color:#e8ddd6;margin-bottom:8px;letter-spacing:.04em}
.footnote ul{list-style:none;padding:0;margin:0}
.footnote li{position:relative;font-size:14px;line-height:1.8;color:#c7b6ab;padding-left:1.15em;margin-bottom:7px;text-wrap:pretty}
.footnote li::before{content:"※";position:absolute;left:0}
.footnote li:last-child{margin-bottom:0}
@media (prefers-reduced-motion:reduce){#proofToast{transition:none}}

/* ── v5: フォームの進捗（チャットの「あと7問」を借りる） ── */
.form-progress{display:flex;align-items:center;justify-content:center;gap:10px;margin:-4px 0 16px;font-family:var(--font-disp);font-weight:900;font-size:16px;color:var(--c-accent2)}
.form-progress .bar{flex:1;max-width:180px;height:10px;border-radius:999px;background:var(--c-info);overflow:hidden}
.form-progress .bar i{display:block;height:100%;width:0;background:var(--c-accent2);transition:width .3s}
.form-progress .num{font-size:22px;color:var(--c-accent-text)}

/* ── v5: 教室検索はフォーム直前へ（カーブスの店舗選択の位置） ── */
.search-sec{background:var(--c-info);position:relative}
.search-sec::before{content:"";position:absolute;top:-17px;left:0;right:0;height:18px;pointer-events:none;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 18" preserveAspectRatio="none"><path d="M0 18 C 20 4, 60 4, 80 18 Z" fill="%23E5F5FF"/></svg>') repeat-x;background-size:80px 18px}
.search-sec .zip-block{margin:0}
.search-note{font-size:15.5px;color:var(--c-muted);text-align:center;margin-top:14px}

/* ── v5: CTAを2段組みに（上に小さく「かんたん30秒」）。2026-09-05 に6案から決定 ──
   ⚠ **block にすること。** inline のままだと2つのspanが1行に流れて
     「かんたん30秒無料体験を申し込む」と読める（2026-09-10 に実機で踏んだ）。 */
/* ⚠ 行間はここで詰める。`.cta-btn` の line-height:1.25 のままだと2行が離れて、
   1つのボタンではなく上下2つのラベルに見える（2026-09-10 実機） */
.cta-btn .k{display:block;font-size:14px;line-height:1.1;letter-spacing:.04em;opacity:.85}
.cta-btn .m{display:block;font-size:20px;line-height:1.2;white-space:nowrap}
#stickyCta .cta-btn .k{font-size:13px}
#stickyCta .cta-btn .m{font-size:18px}
/* 2.8秒に1回だけ小さく跳ねる。動きを減らす設定の人には出さない */
@media (prefers-reduced-motion: no-preference){
  .cta-btn{animation:ctaNudge 2.8s ease-in-out infinite}
  @keyframes ctaNudge{0%,84%,100%{transform:translateY(0)}90%{transform:translateY(-4px)}95%{transform:translateY(0)}}
  .cta-btn:active{animation:none}
}

/* ── v5: 見出しの弧（筆の一閃）をやめる。2026-09-05 に6案を比べて「何も付けない」を選んだ ──
   弧が上に反っていて、文字から離れて見えていた。
   節の切れ目は波・庇・地の色がすでに担っているので、見出しに飾りは要らない。
   ⚠ 弧を消したぶん見出しの下の余白を 24px → 28px に増やす。詰めると本文とくっつく。 */
h2::after{content:none}
h2{margin-bottom:28px}
.h2-sub{margin-top:-18px}