/* ==========================================================================
   BAR01 リードLP ワイヤーフレーム（レイアウト寄せ）
   テイスト: 過去LP bariri0525.studio.site 踏襲 / DESIGN.md・docs/design_system.md 準拠
   ========================================================================== */

:root {
  /* Brand
     ★2026-08-07 むた指示で**動画のトンマナへ寄せた**（色相だけローズへ／明度・彩度は据え置き）。
       ウェビナー動画41分から実測したばり姉さんの色は **ピンク #ec83a1**（テロップ・章ラベル帯。
       41分ブレない）と **オレンジ #f67704**（強調行）。対して旧パレットは
       ボルドー赤＋朱赤＋無彩色グレーで、動画の「明るい・やわらかい・ローズ寄り」から浮いていた。
     ⚠️ 実測色 `#ec83a1` `#f67704` は**そのまま主色にできない**（白文字コントラストが 2.5前後・AAは4.5）。
       主色は「同じ色相で暗くした版」を使い、実測ピンクは**面のアクセント専用**にする。
     ⚠️ ネイビー(`--color-secondary`)と黄色(`--color-accent-yellow`)は**据え置き**。
       全部ローズにすると締まりと「限定・無料」の役割が消える */
  --color-primary: #8a2f4d;        /* ローズ寄りのボルドー（主色）。白文字 8.09 ✅ 旧 #842e2e */
  --color-primary-dark: #6a243c;   /* 旧 #6b2424 を同明度のまま H=340 へ */
  --color-primary-light: #c98a9f;  /* 暗色背景上の×印など。旧 #c98a8a */
  --color-accent-red: #c92a5f;     /* 告知バー・強調帯。白文字 5.28 ✅
                                      ★旧 #e83828 は白文字 4.18 で**そもそも AA 未達**だった */
  --color-secondary: #37515d;      /* 青・ほぼネイビー */
  --color-secondary-dark: #2a3e47;

  /* CTA（LINE登録） */
  --color-cta: #06c755;
  --color-cta-dark: #05a847;

  /* Background */
  --color-bg: #ffffff;
  --color-bg-cream: #fff7e0;
  --color-bg-cream-soft: #fffaf0;  /* 薄いクリーム（FAQトグル等） */
  --color-bg-cream-dark: #ecdfb0;  /* クリームの平面オフセット影 */
  --color-bg-muted: #f7f7f7;
  --color-avatar-bg: #e6e6e6;  /* 受講生アイコンの薄グレー円（透明PNGの下地） */
  /* FV3ステップのチップ。★2026-08-07 むた指示で寒色グレー `#dbe3e8` → 主色の淡い版。
     ★FVに寒色が1箇所だけ残っていた＝**面の色を全部ローズにしたら、小さな部品も同じ系統に寄せる**
     ⚠️ 同日2回目の指示「CTAと重なってしまうので、薄いピンク」で `#efd3dc`（濃）→ `#f9eaef`（淡）。
        ★FVは**CTAに視線を送る場所**なので、途中の部品が同じ濃さで主張すると行き先が2つに割れる。
          既存トークン `--color-bg-rose` と同値にして**色数を増やさない** */
  --color-bg-step: #f9eaef;
  --color-bg-dark: #141414;  /* 不安喚起セクション等の黒背景 */
  /* ウェビナーLPの動画＋カウントダウンの面。
     ★★2026-08-07 むた指示（2段階で確定した。**1段階目の直しは的を外していた**）
       ① 「濃い黒にした理由が気になる。悪目立ちしすぎていない？」
          「Funda簿記は青のトーンから明度を変えることでカラーを使用している。**黒という選択肢は除外したい**」
          → 暗いまま色相だけ主色へ寄せた（`#37282e` → `#4a2630`＝主色の暗い版）。
             併せて拾い色も黄 → 橙（動画の実測色）に替えた。
       ② 「テキストの黄色→オレンジの変更は**正直どうでもよくて**、
          **背景のダークトーンがこのLPの印象と合わない**。変更して」
     → ★★**問題は色相ではなく明度だった**。①では「暗い面である」こと自体を疑わなかったので、
       その上に乗る文字色をいくら調整しても解決しなかった。
       ★**面が間違っているとき、面の上の要素をいじっても直らない。**
     → **主色 `#8a2f4d` を大幅に明度アップした淡いローズ**にする。Funda と同じ
       「単一色相の明度違い」だが、**明度スケールの明るい側**を取る。
       参考LPも動画の周りは**明るい水色**で暗くしていない＝
       ★**動画を引き立てるために面を暗くする必要はない**（サムネイル自体が濃いので勝手に浮く）。
     経緯: `#3d3d3d`（無彩色グレー）→ `#37282e`（赤紫1滴）→ `#4a2630`（主色の暗い版）
           → **`#f9eaef`（主色の淡い版）**。⚠️ `#141414` の真っ黒も試して却下済み。**暗い側へは戻さない**。
     ⚠️ この面に変えると**上に乗る文字は全部反転する**（白 → 本文色）。
        `.wb-count__date` `.wb-video__note` `.wb-dates__item` `.wb-dates__lead` `.wb-count__closed` が
        白前提だったので同時に直した。**面の色を変える作業は、面の上の要素を数える作業**。
     ⚠️ 拾い色（黄/橙）はこの面では使えない（明るい面に橙は 2.53 ❌）。主色 `#8a2f4d` を使う。
        ★**暗い面をやめた時点で、拾い色という考え方自体が要らなくなった**。
     ⚠️ クリーム `#fff7e0` とは別の色。すぐ下の特典セクションがクリームなので、
        同じにすると面の切れ目が消える（こちらはピンク寄り・あちらは黄色寄り） */
  --color-bg-rose: #f9eaef;
  /* ★2026-08-07 むた指示で**面を2色に割った**（「動画＋タップ説明」と「カウントダウン〜CTA」）。
     ★同じ色相の明度違いで隣り合わせる（Funda 方式）。色相を変えると"別のページの部品"に見える。
     淡いほう＝動画を置く場 ／ 濃いほう＝申し込みブロック（下が角丸） */
  --color-bg-rose-deep: #efd3dc;
  --shadow-solid-rose: #e8d2da;        /* ローズ面（淡）の上に置く白カードのソリッド影（面の一段濃い色） */
  --shadow-solid-rose-deep: #ddbcc8;   /* ローズ面（濃 #efd3dc）用。★同じ影色を使い回すと濃い面では影が消える */

  /* ★アイコン（2026-08-07 追加）: lucide の `check`。mask で使うので stroke は black 固定・色は background-color で決める。
     ⚠️ `content:"✓"` のような**フォント依存のグリフは使わない**（線幅・形・ベースラインが環境任せになる） */
  --icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');
  /* 丸バッジの中に白で置く版（mask だと丸ごと抜けてしまうので、色付き背景の上に重ねる用に別に持つ） */
  --icon-check-white: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');

  /* ★点線（2026-08-07 追加・むた「点線は大きく間隔は広くした方が優しいトーンになる」）
     ⚠️ CSS の `border: dashed` は**ダッシュの長さも間隔も指定できない**（ブラウザ任せ）。
        「大きく・間隔広く」は border では作れないので、gradient で自前で描く。
     横罫・縦罫で**同じ値**を使う（別々に決めるとページに2種類の点線ができる） */
  --dot-color: rgba(0,0,0,.18);
  --dot-size: 3px;      /* ドットの直径 */
  --dot-gap: 11px;      /* ドットの中心間隔 */
  --color-accent-yellow: #ffe14d;  /* CTAピル「今なら無料」等の黄色 */

  /* Text */
  --color-text: #1a1a1a;
  --color-text-sub: #666666;
  --color-text-muted: #999999;

  /* Border */
  --color-border: #e5e5e5;

  /* ★ソリッドオフセット影（2026-08-07 むた指示・参考 lp.boki.funda.jp）
     CTAボタンで既に使っている `0 4px 0` の**透明感のない影**を、ボックス類にも広げてトーンを揃える。
     ★色は「そのボックスが**載っている背景**の一段濃い色」にする。ボックス自身の色ではない。
       白いカードの影を灰色にすると、クリーム地の上では汚れて見えるため。
     ⚠️ ぼかし影（rgba + blur）と混在させない。混ぜると"浮いているカード"と"紙を重ねたカード"が同居する */
     ★濃さの基準は **CTAボタンの緑（#06c755 → #05a847）と同じくらいはっきり見えること**。
       最初 `--color-bg-cream-dark`(#ecdfb0) をそのまま使ったら、クリーム自体が明るいので
       ほとんど見えなかった。**同じ明度差でも、明るい色ほど影は見えなくなる** */
  --shadow-solid-cream: #e9d69b;                      /* クリームのセクション上 */
  --shadow-solid-navy: var(--color-secondary-dark);   /* ネイビーのセクション上 */
  --shadow-solid-gray: #d4d4d4;                       /* 白・薄グレーのセクション上 */

  /* Font sizes */
  --fs-h-xl: 32px;   /* SP基準。PCで拡大 */
  --fs-h-lg: 26px;
  --fs-h-md: 21px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-caption: 12px;

  /* Spacing (4px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* ★2026-08-07 むた指示「セクション上下の余白が少し大きい。統一しつつ少し小さく」。
     ★セクションの上下余白を**1つの変数に集約**した。これまで各所で `--space-3xl`(64px) を直に
       書いていたので、「少し小さく」が**全部を追いかける作業**になっていた。
       ⚠️ `--space-3xl` 自体は他の用途（要素間の余白）でも使うので値は変えない。
       ★"意味の名前"の変数を1つ挟むと、以後は1行で調整できる */
  --section-pad: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Layout */
  --container: 640px;
}

/* Reset --------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--fs-body);
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-bg);
}

img { max-width: 100%; display: block; }

/* Layout -------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.section {
  padding: var(--section-pad) 0;
}
.section--cream { background: var(--color-bg-cream); }
.section--muted { background: var(--color-bg-muted); }
/* ★2026-08-07: 暗い面（ネイビーのベタ塗り）を廃止し、主色の淡い版へ（むた「トーンがばらけて見える」）。
   暗い面は5つあったが、暗さに意味があるのは `.section--anxiety`（なぜ99%＝不安・課題）の1つだけだった。
   ★暗い面が複数あると、唯一意味のある暗さが埋もれる → [[暗い面は内容が暗いときだけ使える]]
   ⚠️ ネイビー（--color-secondary）は捨てない。文字・アイコン・チップ・トップバーには残す。
      やめるのは「面」だけ。 */
.section--rose  { background: var(--color-bg-rose); }
/* 一段濃いローズの面（2026-08-07 むた指示でウェビナーLPの講師紹介に使用）。
   ⚠️ 濃い面の上では白カードのソリッド影も一段濃くしないと影が見えない
      （[[色は役割と背景の掛け算で決まる]]：影の色は「載っている背景の一段濃い色」） */
.section--rose-deep { background: var(--color-bg-rose-deep); }
.section--rose-deep .prof-point,
.section--rose-deep .method-card,
.section--rose-deep .faq { box-shadow: 0 4px 0 var(--shadow-solid-rose-deep); }
.section--tight { padding: var(--space-2xl) 0; }
/* メソッド：藍色の連続背景＋①②③を角丸カードで「続いている」表現 */
/* メソッド導入：セクションの始まりを大きな角丸に（参考 lp.yoom.fun） */
/* 見出しと①のカードのギャップは広めに取る（24px→64px・2026-08-05 ばり姉さん指示） */
/* ★2026-08-07 むた指示で**上の角丸を外した**。上の #benefits（濃いローズ・下角丸＋bleed-bottom）が
   ここに食い込んでくるので、こちら側も丸めると**角丸が2枚重なって隙間が見える**。
   ＝ 上下で1つの塊に見せるには、**食い込む側だけが丸く、受ける側は平ら** */
.method-intro { padding-bottom: var(--section-pad); border-radius: 0; }
.method-sec { background: var(--color-bg-rose); padding: 0 0 var(--space-lg); }
/* ⚠️ 明るい面では白カードが白に埋もれる（暗い面では明度差だけで浮いていた）。
   影は**このファイル末尾の「ソリッド影」ブロックに集約**されているので、ここには書かない（書いても上書きされる） */
.method-card { margin-inline: calc(-1 * (var(--space-lg) - var(--space-sm))); background: var(--color-bg); color: var(--color-text); border-radius: var(--radius-xl); padding: var(--space-xl) var(--space-lg); }
/* 講師紹介：実績を見出し＋本文ブロックに（▶アクセント・藍背景） */
.prof-point { margin-top: var(--space-xl); }
.prof-point__title { position: relative; padding-left: 1em; font-size: var(--fs-h-md); font-weight: 700; line-height: 1.4; margin-bottom: var(--space-sm); }
.prof-point__title::before { content: "▶"; position: absolute; left: 0; top: 0.2em; font-size: 0.65em; color: var(--color-accent-yellow); }
/* ②セミナー：要点を見出し化（チェック・コロンなし・大きめ太字） */
.seminar-point { margin-top: var(--space-lg); }
.seminar-point__title { font-size: var(--fs-h-md); font-weight: 700; color: var(--color-text); line-height: 1.4; margin-bottom: var(--space-xs); }
/* 動画内で学べるステップ：ヘッダーバー＋囲みボックス（緑チェック・画像参考） */
.step-box { border-radius: var(--radius-xl); overflow: hidden; margin-top: var(--space-lg); }
/* 見出しはどのデバイスでも1行（nowrap＋可変フォント） */
/* ★2026-08-07 ネイビー → 主色（むた「青色を変更」）。
   面が淡いローズになったので、この帯だけネイビーだと**ページの中でここだけ寒色**になり浮く */
.step-box__head { background: var(--color-primary); color: #fff; font-weight: 700; text-align: center; white-space: nowrap; font-size: clamp(10px, 3.6vw, 14px); line-height: 1.4; padding: var(--space-sm) var(--space-md); }
/* 枠線は削除し、背景色で囲みを表現 */
.step-box__list { list-style: none; background: var(--color-bg-muted); padding: var(--space-lg); margin: 0; }
.step-box__list li { position: relative; padding-left: 1.9em; margin-bottom: var(--space-md); line-height: 1.6; }
.step-box__list li:last-child { margin-bottom: 0; }
/* ★2026-08-07 チェックを SVG に置き換えた（むた「チェックがあまり綺麗に見えない」）。
   旧実装は `content: "✓"`（U+2713）＝**フォント依存のグリフ**で、線幅も形もベースラインも環境任せだった。
   lucide の `check`（polyline 20 6 / 9 17 / 4 12）を mask で置き、**線幅と色をこちらで決める**。
   ⚠️ mask + background-color にすると `currentColor` 相当を色で指定できる（塗り替えが1箇所で済む） */
.step-box__list li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 1.05em; height: 1.05em;
  background-color: var(--color-primary);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
          mask: var(--icon-check) center / contain no-repeat;
}

/* ===== レイアウトシェル：モバイル幅440pxを軸に、PCは右寄せ＋左ブランド面（脇は今ネイビー地） ===== */
html { scroll-behavior: smooth; }
/* ⚠️ スマホは**白**（2026-08-06 むた指示）。iPhoneのオーバースクロール（上下に一瞬見える帯）に
   色が付いていると違和感が出るため。PCでは脇のブランド面が要るので 541px 以上でだけ濃紺に戻す */
body { background: var(--color-bg); min-height: 100vh; }
.shell { max-width: 440px; margin: 0 auto; background: var(--color-bg); position: relative; overflow: hidden; scroll-behavior: smooth; box-shadow: 0 10px 40px rgba(0,0,0,.22); }
[id] { scroll-margin-top: var(--space-lg); }
/* モバイル：追従ボトムCTAバー */
.cta-fixed { position: fixed; left: var(--space-md); right: var(--space-md); bottom: var(--space-sm); z-index: 50; display: block; max-width: 560px; margin: 0 auto; text-align: center; text-decoration: none; background: var(--color-cta); color: #fff; font-weight: 700; font-size: var(--fs-body); padding: var(--space-md); border-radius: var(--radius-full); box-shadow: 0 4px 0 var(--color-cta-dark); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.cta-fixed.is-visible { opacity: 1; pointer-events: auto; }
/* ハンバーガーボタン（PCのみ・右上固定） */
.hamburger { position: fixed; top: var(--space-md); right: var(--space-md); z-index: 60; width: 48px; height: 48px; border: none; border-radius: var(--radius-full); background: var(--color-bg); cursor: pointer; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--color-secondary); transition: transform .25s ease, opacity .2s ease; }
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ナビオーバーレイ（ハンバーガーで開閉・押すまで非表示） */
.nav-overlay { position: fixed; inset: 0; z-index: 55; background: var(--color-secondary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay a { color: #fff; text-decoration: none; font-size: var(--fs-h-md); font-weight: 700; }
.nav-overlay .nav-overlay__cta { margin-top: var(--space-lg); background: var(--color-cta); padding: var(--space-md) var(--space-2xl); border-radius: var(--radius-full); box-shadow: 0 4px 0 var(--color-cta-dark); }
/* 左ブランド面（PCのみ：サービス名＋キャラ＋CTA） */
.brand-panel { display: none; }
/* ★2026-08-07 脇の面を暗いネイビー → 明るいグレー(#f2edef)にしたので、白文字は読めない。
   ★★**面を変えたら、その面の上の要素の色も必ず全部見直す**（[[面が間違っているとき面の上の要素をいじっても直らない]] の裏返し）。
   ここは主色。脇はブランドの署名なので、LP本体と同じ色で名乗る */
.brand-panel__name { font-size: var(--fs-h-lg); font-weight: 700; color: var(--color-primary); text-align: center; line-height: 1.4; }
.brand-panel__name span { display: block; font-size: var(--fs-body); font-weight: 500; margin-top: var(--space-sm); color: var(--color-text-muted); }  /* ⚠️ opacity をやめて色で階層を作る（Layer 1: テキストの階層を opacity で作らない） */
/* ブランド面のキャラクター：素材が入ったら枠・下地は消して線画だけを浮かせる */
.brand-panel__char { width: 220px; height: 220px; border-radius: var(--radius-lg); background: rgba(0,0,0,.03); border: 2px dashed var(--color-border); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); padding: var(--space-md); }  /* ★明るい面用に反転（白の半透明は明るい地では消える） */
.brand-panel__char--filled { width: 160px; height: 160px; background: none; border: none; padding: 0; }
.brand-panel__char--filled img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-panel__cta { display: block; text-align: center; text-decoration: none; background: var(--color-cta); color: #fff; font-weight: 700; padding: var(--space-md) var(--space-2xl); border-radius: var(--radius-full); box-shadow: 0 4px 0 var(--color-cta-dark); }
/* PC（≧900px）：列を右寄せ・左にブランド面・脇はネイビー地 */
/* タブレット・PC（≧541px）：列はページと一緒にスクロール（丸い頭が上へ流れて消える）。脇は固定 */
@media (min-width: 541px) {
  /* ★2026-08-07 むた指示: PCの脇を**ピンクよりのグレー**に（ネイビーをやめた）。
     面から青を抜いた流れの続き。★脇が暗いと、明るくしたLP本体だけが浮いて見える＝
     **面を変えたら、その面を載せている台も変える**。
     ⚠️ 主色の極淡グレー。白だと `.shell` の白と境目が消えて「紙に載っている」感じが出ない */
  body { background: #f2edef; }
  .shell { margin-top: var(--space-2xl); border-radius: 20px 20px 0 0; }  /* 角丸20px */
  .topbar { border-radius: 20px 20px 0 0; }  /* topbarにも同じ角丸＝上端の白フチ(白い線)を解消 */
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .cta-fixed { display: none; }
  .hamburger { display: flex; }
  .shell { margin-left: auto; margin-right: 8vw; }
  .brand-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xl); position: fixed; left: 0; top: 0; bottom: 0; width: calc(92vw - 440px); padding: var(--space-2xl); }
}
/* LINEアイコン（CTA内・currentColorで白く乗る） */
.line-ico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: .4em; }

/* Typography ---------------------------------------------------------------- */
.h-xl, .h-lg, .h-md { line-height: 1.3; font-weight: 700; }
.h-xl { font-size: var(--fs-h-xl); margin-bottom: var(--space-lg); }
.h-lg { font-size: var(--fs-h-lg); margin-bottom: var(--space-md); }
.h-md { font-size: var(--fs-h-md); margin-bottom: var(--space-md); }

.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-center    { text-align: center; }
.text-sub       { color: var(--color-text-sub); }
.text-muted     { color: var(--color-text-muted); }
.text-sm        { font-size: var(--fs-sm); }
.text-caption   { font-size: var(--fs-caption); }  /* 注記用（12px）。2026-08-07 追加 */
/* 注意書きマーカー（赤文字＋黄色蛍光マーカー背景・複数行対応）
   ★2026-08-07: `#d12f2f` のハードコードを主色に変更。
     ⚠️ ここは**黄色マーカーの上**なので、白背景の基準では測れない。
        旧 #d12f2f は黄色地 #ffe14d に対して 3.56 で AA 未達だった（主色 #8a2f4d なら 6.25 ✅）。
     注意喚起の役割は**黄色マーカー自体**が果たしているので、文字色まで明るい赤にする必要はない */
.note-marker {
  color: var(--color-primary); font-weight: 700;
  background: linear-gradient(transparent 55%, var(--color-accent-yellow) 55%);
  line-height: 1.9;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lead { font-size: 18px; font-weight: 700; line-height: 1.6; }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mt-lg { margin-top: var(--space-lg); }
.mt-md { margin-top: var(--space-md); }
.txt-underline { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* ⚠️ 黄色マーカー上の文字色は `--color-accent-red`(4.05) でなく主色(6.25)にする。`.note-marker` と同じ理由 */
.hl-red-mark { font-weight: 700; color: var(--color-primary); background: linear-gradient(transparent 58%, var(--color-accent-yellow) 58%); padding: 0 .1em; }

p + p { margin-top: var(--space-md); }

/* Eyebrow / ribbon ---------------------------------------------------------- */
/* ★2026-08-07 むた指示で線囲み → **塗り（Fill）＋白文字**に。
   ①②③の番号ラベルは「今どこを読んでいるか」の目印なので、線だと弱くて見落とされる */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  padding: 2px var(--space-md);
  margin-bottom: var(--space-md);
}
.ribbon {
  font-size: var(--fs-h-md);
  font-weight: 700;
  text-align: center;
  color: var(--color-primary);
}
/* リボン内の小さい上段（例：＼ばり姉が監修する／） */
.ribbon__sm { display: block; font-size: 0.6em; }
/* 口コミ：状況→結果をつなぐ下向き三角形（中央揃え・前後で改行） */
.arrow-down { display: block; text-align: center; margin: var(--space-sm) 0; }
.arrow-down svg { width: 22px; height: 18px; fill: #cccccc; }
/* 口コミ：名前の左に丸アイコン（写真／イラストは後で差し替え） */
.voice-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.voice-head strong { font-size: var(--fs-sm); line-height: 1.4; }
/* 口コミ：before（状況）は通常より2px大きく */
.voice-before { font-size: calc(var(--fs-sm) + 2px); }
/* 口コミ：太字部分（変化のキーワード）は色付き＋2px大きく */
.cards-2 .card p strong { color: var(--color-primary); font-size: calc(var(--fs-sm) + 2px); }
/* 口コミ：特に重要な数字はさらに大きく強調 */
.num-big { font-size: 1.5em; color: var(--color-primary); }
/* 受講生アイコンは角丸4pxの四角（2026-08-05 むた指示）。
   丸で抜くと「顔をアイコンで隠している」意図が伝わらず、頭の上も切れてしまう */
.voice-icon {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 4px;
  background: var(--color-avatar-bg); border: none;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 9px; line-height: 1.15; color: var(--color-text-muted);
  overflow: hidden;
}
.voice-icon--filled img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }

/* Placeholder（画像枠：素材は沙織さん提供 → むた側で組込） ------------------ */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-bg-muted);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  padding: var(--space-lg);
  min-height: 120px;
}
.ph--hero { min-height: 220px; }
.ph--wide { min-height: 160px; }
.ph--square { aspect-ratio: 1 / 1; min-height: 0; }

/* 実画像はめ込み（.ph の実素材版。届いた素材から順にこちらへ置き換える） */
.media { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
/* 画像側に角丸の枠デザインが入っているもの（【110】3大特典）は、二重角丸にならない最小値だけ当てる
   （0だと角が立ちすぎる。4px＝画像内の枠の角を削らずに角だけ丸まる。2026-08-05 むた指示） */
.media--bare { border-radius: 8px; }  /* 2026-08-05 むた指示：3大特典の角丸を +4px */
/* 白地の資料モック（【400】）は白カードに載ると輪郭が消えるので細い枠で締める */
.media--framed { border: 1px solid var(--color-border); }

/* 受講生の変化事例【500】：4枚のサムネを縦積み。
   原本は2×2の1枚もの。440px列でそのまま出すと1枚あたり203pxになり説明文が潰れるので、
   画像は加工せず4分割し、1枚ずつ列幅いっぱいで見せる（2026-08-06） */
.voice-thumbs {
  display: grid;
  gap: var(--space-sm);
}

/* CTA button ---------------------------------------------------------------- */
.cta {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: var(--space-lg) auto 0;
  background: var(--color-cta);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 0 var(--color-cta-dark);
}
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-cta-dark); }
.cta-note { text-align: center; font-weight: 700; color: var(--color-primary); margin-top: var(--space-lg); }

/* List ---------------------------------------------------------------------- */
.list { list-style: none; }
.list li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: var(--space-sm);
}
.list li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.list--dot li::before { content: "●"; font-size: 0.7em; top: 0.3em; }

/* Card ---------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);  /* 入れ子のボックスも丸く（LPトーン統一・2026-08-05） */
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.card .h-md { color: var(--color-text); }   /* ★2026-08-07 むた「見出しの青は黒に」 */
/* 口コミカードはボーダーなし */
.cards-2 .card { border: none; }

/* Stat / badge -------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.stat {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: left;
}
.stat__head { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; display: flex; align-items: baseline; gap: .4em; color: var(--color-text); }
.stat__head::before { content: "●"; font-size: .5em; color: var(--color-primary); flex: 0 0 auto; transform: translateY(-0.2em); }
.stat__fig { display: flex; align-items: baseline; gap: .12em; margin-top: var(--space-xs); }
.stat__num { font-size: 48px; font-weight: 700; line-height: 1; color: var(--color-text); }
.stat__unit { font-size: var(--fs-caption); font-weight: 700; color: var(--color-text-sub); }

/* Steps --------------------------------------------------------------------- */
/* 受講のステップ（カード・左テキスト＋右ビジュアル） ------------------------- */
.steps { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-2xl); }
#steps { padding-bottom: var(--space-lg); }
#cta { padding-top: var(--space-lg); }
.step-card { display: flex; align-items: stretch; gap: var(--space-md); margin-inline: calc(-1 * (var(--space-lg) - var(--space-sm))); background: #fff; border-radius: var(--radius-xl); padding: var(--space-lg); }
.step-card__body { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs); min-width: 0; }
.step-card__num { font-size: var(--fs-sm); font-weight: 700; color: var(--color-text-muted); letter-spacing: .08em; line-height: 1; }
.step-card__num b { font-size: 1.7em; color: var(--color-primary); margin-left: 4px; }   /* ★2026-08-07 むた「受講ステップの数字はピンクに」 */
.step-card__title { font-size: var(--fs-body); font-weight: 700; color: var(--color-primary); line-height: 1.45; white-space: nowrap; }
.step-card__mk { background: linear-gradient(transparent 58%, var(--color-accent-yellow) 58%); padding: 0 .1em; }
.step-card__sub { font-size: var(--fs-caption); color: var(--color-text-sub); line-height: 1.6; }
.step-card__visual { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; }
.step-card__visual--ph { border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted); color: var(--color-text-muted); font-size: var(--fs-caption); text-align: center; padding: var(--space-md); min-height: 92px; line-height: 1.5; }
/* ①用ミニLINEボタン（タッチ演出付き） */
.step-line-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; background: var(--color-cta); color: #fff; border-radius: var(--radius-md); padding: var(--space-sm); box-shadow: 0 3px 0 var(--color-cta-dark); font-weight: 700; text-align: center; line-height: 1.3; }
.step-line-btn__cap { font-size: var(--fs-caption); }
.step-line-btn__main { font-size: var(--fs-sm); }
.step-line-btn__finger { position: absolute; right: -8px; bottom: -12px; width: 32px; height: 32px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.step-line-btn__finger svg { width: 100%; height: 100%; display: block; }

/* FAQ（アコーディオン・トグル開閉） ----------------------------------------- */
/* FAQ：セクションを黄色（クリーム）にして、カードは白で抜く（2026-08-05 ばり姉さん指示） */
.faq { background: var(--color-bg); border-radius: var(--radius-xl); margin-bottom: var(--space-md); margin-inline: calc(-1 * (var(--space-lg) - var(--space-sm))); overflow: hidden; }
.faq:first-of-type { margin-top: var(--space-2xl); }
/* 質問＝トグルボタン（本文は黒・Q/Aは赤文字・丸なし） */
.faq .q { display: flex; gap: calc(var(--space-md) - 4px); align-items: center; font-size: var(--fs-body); font-weight: 700; color: var(--color-text); line-height: 1.4; padding: var(--space-lg) var(--space-md); }
.faq .q::before { content: "Q."; flex: 0 0 24px; color: var(--color-primary); font-size: var(--fs-body); font-weight: 700; }
/* ＋アイコン（ネイビー）→ hover時180度・open時 ×（135度）回転アニメ */
/* 開閉はやめて常時表示。質問と回答の間に細い区切りを入れて読み分けやすくする */
.faq .q { padding-bottom: var(--space-md); }
.faq .a { display: flex; gap: calc(var(--space-md) - 4px); align-items: flex-start; font-size: var(--fs-body); line-height: 1.9; color: var(--color-text); padding: var(--space-md) var(--space-md) var(--space-lg); border-top: 1px solid rgba(0,0,0,.06); margin-inline: var(--space-md); padding-inline: 0; }
.faq .a::before { content: "A."; flex: 0 0 24px; color: var(--color-primary); font-size: var(--fs-body); font-weight: 700; }
/* FAQ: PCはカードを通常幅に戻し、余白を広めに */
@media (min-width: 768px) {
  .faq { margin-inline: 0; }
  .step-card { margin-inline: 0; }
  .method-card { margin-inline: 0; }
  .faq .q { padding: var(--space-xl); }
  .faq .a { padding: var(--space-xl); padding-top: var(--space-md); }
}

/* 18. 不安喚起セクション（黒ベース＋ボルドー赤帯・見出しは画像オーバーレイ・PAS） --- */
/* 上端に画像が接しているので、角丸から中身がはみ出さないよう clip する */
.section--anxiety { background: var(--color-bg-dark); color: #fff; padding-top: 0; overflow: hidden; }
/* 見出しを暗い写真の上に乗せる（FV同様のオーバーレイ手法） */
.anx-hero { position: relative; }
/* 素材【800】は縦位置写真。4:3 だと人物がほぼ残らないので縦長で受ける（2026-08-05 素材受領時に変更）
   さらに 20/23 へ＝天井まわりを上から約40px落として枠を詰めた（2026-08-05 夕・むた指示）。
   詰めた分が上から削れるよう object-position を下げている（42% → 72%） */
.anx-hero__img { position: relative; width: 100%; aspect-ratio: 20 / 23; background: var(--color-bg-muted); display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--space-2xl) var(--space-lg); overflow: hidden; }
.anx-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
/* 下端をセクションの黒（--color-bg-dark）まで振り切らせて、写真から背景へ切れ目なく流す。
   ⚠️ 最下段を半透明で止めると、画像の終わりに横線が出る（＝境目が見える）。0% は必ず不透明にする */
.anx-hero__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-bg-dark) 0%, rgba(20,20,20,.86) 14%, rgba(20,20,20,.58) 30%, rgba(20,20,20,.22) 50%, rgba(20,20,20,0) 76%); }
.anx-hero .anx-title { position: relative; z-index: 1; color: #fff; font-size: var(--fs-h-xl); font-weight: 700; line-height: 1.4; text-align: left; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.section--anxiety .anx-lead { text-align: left; color: rgba(255,255,255,.82); margin: var(--space-2xl) 0; }
.section--anxiety .anx-list { list-style: none; max-width: 600px; margin: calc(-1 * var(--space-sm)) auto var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); }
/* 本文（16px）より一段落とす＝ここは「読ませる」より「並べて効かせる」ブロック（2026-08-05 むた指示） */
.section--anxiety .anx-list li { position: relative; margin-inline: calc(-1 * (var(--space-lg) - var(--space-sm))); background: rgba(55,81,93,.55); border: none; border-radius: var(--radius-lg); padding: var(--space-md) var(--space-lg); padding-left: calc(var(--space-md) + 1.5em + var(--space-sm)); font-size: 14px; line-height: 1.6; }
.section--anxiety .anx-list li::before { content: "×"; position: absolute; left: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--color-accent-red); font-weight: 900; font-size: 1.15em; line-height: 1; }
.section--anxiety .anx-punch { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); margin-bottom: var(--space-xl); }
/* 赤帯の左端を、上の×ボックス（.anx-list li）と揃える。
   ★テキストの開始位置は動かさない＝帯を外に出した分（16px）をそのまま padding-left に足す。
     8px + 16px = 24px（--space-lg）。右も同値にして帯の内側を左右対称にする（2026-08-05 むた指示） */
.section--anxiety .anx-band { display: inline-block; background: var(--color-accent-red); color: #fff; font-size: var(--fs-h-md); font-weight: 700; line-height: 1.4; margin-left: calc(-1 * (var(--space-lg) - var(--space-sm))); padding: var(--space-xs) var(--space-lg); }
.section--anxiety .anx-band--kuro { color: #000; }
.section--anxiety .anx-band .anx-kuro { color: #000; }
.section--anxiety .anx-note { text-align: left; color: rgba(255,255,255,.78); font-size: var(--fs-sm); line-height: 1.9; max-width: 600px; margin: 0 auto; }

/* Divider note（WF用注記） -------------------------------------------------- */
.wf-note {
  background: #fffbe6;
  border-left: 4px solid #e0b400;
  font-size: var(--fs-sm);
  color: #7a6000;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-sm);
}

/* Footer -------------------------------------------------------------------- */
/* 上の最終CTAが角丸ブロックで終わるので、区切り線は不要（線があると角丸を横切って見える。2026-08-05 むた指示） */
/* ★2026-08-07 むた指示で下余白を半分に（48px → 24px）。両LP共通。
   ★フッターの下は「ページの終わり」であって、次に何かが来る余白ではない＝上と同じだけ取る必要がない */
.footer { background: var(--color-bg); color: var(--color-text); padding: var(--space-2xl) 0 var(--space-lg); text-align: center; }
.footer a { color: var(--color-text); text-decoration: underline; font-size: var(--fs-sm); }
.footer .links { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
/* ★2026-08-07 むた「コピーライトはもう少し薄く」。#999 → #bbb（両LP共通）。
   ★ここは"読ませる文字"ではなく**ページの終わりを示す記号**なので、本文のコントラスト基準は当てない */
.footer .copyright { font-size: var(--fs-caption); color: #bbbbbb; }

/* FV（中央テキスト＋3ステップ/人物2カラム＋CTA） --------------------------- */
.fv { position: relative; padding: 14px 0 var(--space-xl); text-align: left; color: var(--color-text); background: var(--color-bg); overflow: hidden; }  /* 上余白14px（初心者〜の上を+2px） */
.fv .container { position: relative; z-index: 2; }
.fv .cta-rich__bubble { color: var(--color-primary); }
/* 左揃えテキスト */
.fv__head { margin-bottom: var(--space-xs); text-align: center; }  /* バッジ↔頭上の余白 4px */
.fv .fv__catch { display: inline-flex; align-items: center; font-size: var(--fs-body); font-weight: 700; color: var(--color-primary); margin-bottom: 2px; }
/* 左右の斜め線（3ステップ見出しから移設） */
.fv .fv__catch::before, .fv .fv__catch::after { content: ""; width: 2px; height: 1.05em; background: currentColor; border-radius: 1px; }
.fv .fv__catch::before { transform: rotate(-20deg); margin-right: 10px; }
.fv .fv__catch::after  { transform: rotate(20deg); margin-left: 10px; }
.fv__title { margin-bottom: var(--space-xs); font-feature-settings: "palt" 1; }  /* 約物のアキを詰める */
.fv .fv__title-punct { font-size: 0.85em; }
/* 左：3ステップ／右：人物写真（正方形・上揃え） */
/* FV画像＋左カラムだけコンテナ余白を打ち消して全幅（見出し・CTAは通常余白のまま） */
.fv__main { position: relative; margin-top: 20px; margin-inline: calc(-1 * var(--space-lg)); }  /* 講座名バッジとの余白 */
/* 左カラム：素材枠＋3ステップを縦積み・画像左下に絶対配置で重ね・画像下端に揃える */
.fv__left { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-md); padding-left: var(--space-sm); padding-top: var(--space-sm); }  /* 素材と3ステップを下寄せでまとめる */  /* 画像の全高に合わせ縦フル／右端=画面50%／素材の上に8px余白／素材=上・3ステップ=下 */
/* 素材プレースホルダ（点線枠・比率固定なし＝画像上端〜3ステップ上まで縦に伸びる） */
.fv__material { flex: 1 1 auto; min-height: 0; border: 2px dashed var(--color-border); border-radius: var(--radius-md); background: rgba(255,255,255,.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }
/* 3ステップ（参考 lp.yoom.fun のFV）：白いピルカードを右へはみ出させ、縦線で流れを見せる ------ */
/* 見出しは両脇に斜めの線（＼ 3ステップで攻略！ ／） */
/* ★2026-08-07 むた指示: チップを**画面の左端にくっつける**。
   ⚠️ 左へ出す量は「container の 24px」ではなく **`.fv__left` の padding-left 8px** だけ。
      `.fv__main` が既に `margin-inline: -24px` で container 余白を打ち消しているので、
      残っているのは左カラムの 8px だけ。★はみ出し量は"祖先が既に出している分"を引いて決める */
.fv__step-wrap { text-align: center; margin-left: calc(-1 * var(--space-sm)); }  /* 見出しをカードの中央に合わせる */
/* 「3ステップで攻略！」は"添える"見出し。
   3(18px) > ステップ(14px) > で攻略！(11px)。むた指定の実寸なので px 直値で持つ
   （em 相対だと親を触るたび3つとも動いてしまい、この微差が壊れる）
   ⚠️ 3つとも line-height:1 に揃える。行高が違うと flex-end のボックス下端が揃っても
      文字の下端がずれる（＝「下揃えにして」が効かない）*/
.stepflow__title { display: inline-flex; align-items: flex-end; margin-left: -7px; font-size: 14px; font-weight: 700; line-height: 1; margin-bottom: var(--space-sm); white-space: nowrap; }
/* ★2026-08-07（同日3回目）むた「一番長い『テキストを読み込んで』に揃える形で3つ横幅を統一して」。
   ⚠️ 幅を `.stepflow__item` 側で決めると**各チップが自分の中身で決まる＝バラバラになる**。
      揃えるには**親（ul）が最長の子で幅を決め、子はその100%を取る**。
      ＝ max-content を「1つ上」に移すだけ。左へのはみ出しも親に移す（子は margin を持たない） */
/* ⚠️★2026-08-07 `max-width: 100%` は必須。無いと `width: max-content` が
   **ページ全体の最小幅を押し上げ**、375px端末で LP 全体（3大特典の見出し等）が右で切れる。
   ★max-content は「この要素をこの幅にして」ではなく「**この幅を全体に要求する**」指定。
     max-width で天井を付けると、要求はやめて、はみ出しだけが残る（見た目は同じ） */
.stepflow { list-style: none; margin: 0; padding: 0; width: max-content; max-width: 100%; }
.stepflow__item {
  /* ★2026-08-07 むた「数字と日本語の縦の位置がずれている、下揃えで揃え」。
     ⚠️ `center` は**ボックスの中心**で揃えるので、書体の違う2つ（Inter の "01." と Noto の和文）は
        文字の座り方がずれる。**文字を揃えるなら `baseline`**（どちらもテキストなので baseline を持つ）。
        ★同じ「下で揃える」でも、丸バッジのように baseline を持たない相手には `flex-end`、
          テキスト同士なら `baseline`。**相手が何かで道具が変わる** */
  position: relative; display: flex; align-items: baseline;
  /* ★2026-08-07 `width: 120%` をやめた（むた「レスポンシブで可変してしまう・縮まり過ぎる」）。
     旧実装では 120% が **①はみ出し量** と **②中身が入る幅** の2つを兼務していた。
     親が狭くなると 120% も縮むのに padding:48px は固定なので、**中身に使える幅だけが一方的に減る**。
     ラベルは nowrap なので逃げ場がなく、文字が切れる。
     → **幅は中身が決め（max-content）、はみ出しは margin だけの仕事にする**。
     → [[パーセント幅は_はみ出し量と中身の幅を兼務できない]] ／ [[overlap-belongs-to-margin-not-padding]] と同型 */
  /* 幅と左へのはみ出しは**親（.stepflow）が持つ**。ここで幅を決めると3つがバラバラになる。
     ⚠️ 経緯: `width:120%`（親依存で縮む）→ `max-content`（バラバラ）→ `min-width:100%+56px`（右だけ余る）
        → **親が max-content・子が 100%** に落ち着いた。★「揃える」は子ではなく親の仕事 */
  width: 100%;
  max-width: none;
  /* ★★2026-08-07 むた「中にパディングを設置して、**それよりも横幅が縮まらないように**（何度も注意しています）」。
     ★これまでは幅の"上限"（max-content）だけを決めていて、**下限を決めていなかった**。
       親が狭くなると `width:100%` がそのまま縮み、padding は固定なので**中身の取り分だけが減る**。
       → `min-width: max-content` ＝「中身＋左右padding は必ず確保する」という**床**を敷く。
       ⚠️ 床の要求は親（.stepflow）の `max-width: 100%` で止まるので、
          ページ全体の最小幅は押し上がらない（[[max-contentは幅の指定でなく幅の要求]] の対処と両立する） */
  min-width: max-content;
  /* ★2026-08-07 むた指摘: 「左端で切れていると思っていたが、**はみ出しているだけで要素がまだある**のでは？
     そのため右の余白が広くなる？」→ **そのとおりだった**。
     旧実装は `margin-left:-28px` で左へ突き出しており、**左padding 48px のうち28pxが画面外**＝
     見えている左余白20px／右余白48px で非対称に見えていた。
     → はみ出しをやめて左端に揃え、padding も 24px の対称に落とす。
     ★「余白がおかしい」の原因が padding ではなく margin にあった（[[overlap-belongs-to-margin-not-padding]] 3回目） */
  /* ★2026-08-07 むた「もう少し左の余白を減らしてもいいかも」→ 24px → 20px。
     左右は対称のまま動かす（片側だけ削ると、幅を揃えているぶん右の余りが目立つ） */
  padding: 8px 20px;
  /* ★2026-08-07 むた指示: **左の角丸をなくす**（画面の外から入ってきた帯に見せる）。
     ★端にくっつけた要素の角を丸めると「置き忘れ」に見える。切り落とすと"続いている"に見える */
  background: var(--color-bg-step); color: var(--color-text);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);        /* 参考 lp.yoom.fun のピル型カードの実測値 */
}
.stepflow__item + .stepflow__item { margin-top: 12px; }
/* カード同士をつなぐ縦線＝3つで1つの流れだと分かる */
.stepflow__item:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -12px;
  width: 2px; height: 12px; background: var(--color-text-muted);  /* チップ間のギャップぴったり＝はみ出しも切れ目も出ない */
}
.stepflow__no { flex: 0 0 auto; margin-right: 6px; font-family: "Inter", "Noto Sans JP", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.stepflow__label { font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; }

/* 素材枠に実画像を入れたとき：横幅は枠いっぱい・高さは画像の比率まかせ（縦は詰まってよい） */
.fv__material--filled { flex: 0 0 auto; width: 79%; margin-left: auto; border: none; background: none; padding: 0; overflow: hidden; }  /* 横幅は枠より少し小さく・右寄せ */
/* スマホ横向きのモックアップ風に、角丸＋ストロークで枠を作る */
.fv__material--filled img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 3px solid var(--color-text-sub); }
.fv__material-note { font-size: var(--fs-caption); font-weight: 400; }
/* グレー枠：max-contentで内容実寸に固定＝カラム幅に制限されず左右パディング常に均等（16px）／画像に下揃え */
/* step-wrap（flexアイテム）：箱は左端に置く（中身の中央寄せは.flow側で行う） */
.fv__step-wrap { align-self: stretch; margin-bottom: 28px; }  /* チップ群を上げる */  /* 3ステップのカードを列幅いっぱいに（flex-startだと内容幅に縮んで文字が溢れる） */
/* ★左右余白を確実に均等にする決定版：箱の中身を「中央寄せ」にする。
   これで箱がどんな幅（shrink-to-fit成功でも失敗でも）でも左右の余白は必ず等しくなる＝ブラウザ差に非依存 */
.fv__main .flow { display: inline-flex; flex-direction: column; align-items: center; width: auto !important; max-width: 100% !important; z-index: 3; padding: 14px 18px !important; }
.fv__main .flow__steps { width: max-content !important; text-align: left; }
.fv__main .flow__title { margin-bottom: var(--space-sm); text-align: center; white-space: nowrap; font-size: 16px; }
.fv__main .flow__label { white-space: nowrap; font-size: 13px; line-height: 1.3; }  /* 読みやすく＝枠を広げる（画像との重なりはOK方針） */
.fv__main .flow__no { flex: 0 0 14px; height: 14px; }
.fv__main .flow__no::before { width: 7px; height: 7px; background: #b0b0b0; }  /* ドットは薄いグレー＝サブ要素として控えめに */
.fv__main .flow__steps::before { display: none; }  /* 連結の点線は削除（ごちゃつき解消） */
/* 人物写真プレースホルダ（右カラム＝正方形。写真差し替え後に自分でレイアウト調整） */
.fv__person {
  flex: 0 0 42%; z-index: 1;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--color-bg-cream); border: 2px dashed var(--color-border);
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--color-text-muted); font-size: var(--fs-caption); line-height: 1.4;
  overflow: hidden;
}
/* FV人物写真：実画像はめ込み（大きく・右端まで／3ステップ囲みに重ねる／角丸なし／下はふんわり白フェード） */
.fv__person--filled {
  position: relative; z-index: 2;
  display: block; width: 54%; margin-left: auto; /* 右寄せ／人物は控えめに＝見出しを主役にする */
  margin-right: 0;                               /* FV全幅＝画面右端まで */
  aspect-ratio: 760 / 1119;                     /* むたがFigmaで調整した版（BRI_fv_img.png）の右10%をカットした比率 */
  border: none; background: none; border-radius: 0;
}
.fv__person--filled img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* 画像自体を左と下でフェード＝ノートPCの垂直な切れ目と足元の水平な切れ目を同時に溶かす。
   白の帯を重ねる方式と違い、背景が何色でも成立する */
.fv__person--filled img {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 20%), linear-gradient(to top, transparent 0%, #000 34%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 20%), linear-gradient(to top, transparent 0%, #000 34%);
  mask-composite: intersect;
}
.fv__person--filled::after {
  display: none;
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;  /* 机まで入れたぶんフェードを長くして、下端とCTAの干渉を防ぐ */
  background: linear-gradient(to top, var(--color-bg) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
/* 3ステップ見出しの「3」を強調（大きすぎず・黒） */
.flow__title-num { font-size: 18px; font-weight: 700; color: var(--color-text); line-height: 1; vertical-align: baseline; }
/* 告知バー（EC告知ヘッダー風・列上部） */
/* ★2026-08-07 むた指示で青 → 主色。ウェビナーLPの告知バーが既に主色なので、**2本のLPで上端が揃う**
   （動線が Instagram → リードLP → LINE → ウェビナーLP なので、上端の色が変わると別サイトに見える） */
/* 告知バー。★2026-08-07 むた指示でリードLPも**ウェビナーLPと同じ赤**に統一（主色 → accent-red）。
   ★2本のLPは連続した1つの導線（リード → LINE → ウェビナー）なので、**上端の帯は同じ色**であるべき。
     ⚠️ webinar.css 側の上書きは撤去済み。色は**ここ1箇所**で決まる */
.topbar { background: var(--color-accent-red); color: #fff; text-align: center; font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; letter-spacing: .02em; padding: var(--space-md) var(--space-md); }
/* FV内の講座名を丸囲みバッジに */
.fv .fv-badge { display: inline-block; background: var(--color-primary); color: #fff; border-radius: var(--radius-full); padding: var(--space-xs) var(--space-lg); font-size: 13px; font-weight: 700; margin-top: var(--space-xs); text-align: center; }
/* CTAホバー（PC）：少し濃い緑に */
.cta, .cta-fixed, .brand-panel__cta, .nav-overlay__cta, .cta-rich__btn { transition: background .2s ease; }
.cta:hover, .cta-fixed:hover, .brand-panel__cta:hover, .nav-overlay__cta:hover, .cta-rich:hover .cta-rich__btn { background: var(--color-cta-dark); }
/* FVピル「今なら無料」を黄色文字に */
.cta-rich__pill { color: var(--color-accent-yellow); }
.fv .jumbo { font-size: 22px; line-height: 1.45; }  /* 基準値。実際のサイズは JS が幅いっぱいまで自動調整する */
.fv__title-line { display: block; white-space: nowrap; text-align: left; }  /* 絶対に折り返さない／読点のアキで中央がずれるので左端で揃える */
.fv .fv__title-no { font-size: 0.72em; }  /* 「自分の人生」の「の」だけ小さく */
.fv .fv__title-em { font-size: 1.6em; }  /* 「自分の人生」を大きく強調（主役） */
.fv .fv__title-sub { font-size: 0.8em; }  /* 「を取り戻す方法」は控えめに小さく */
.fv .fv__title-strong { font-size: 1.15em; }  /* 「我慢」「限界社員」を強く */
.fv .fv__title-weak { font-size: 0.85em; }  /* 「ばかりの」「から、」を弱く＝メリハリ */

/* ジャンプ率（文字の大小でメリハリ） ---------------------------------------- */
.jumbo { font-weight: 700; line-height: 1.25; font-size: 28px; }
.lead-line { display: inline-block; font-size: var(--fs-h-md); }
.jumbo .big { display: inline-block; font-size: 1.6em; line-height: 1.1; }
.hl { color: var(--color-primary); }
.hl-cream { color: var(--color-bg-cream); }

/* 3ステップ攻略（flow） ----------------------------------------------------- */
/* グレーの箱・中央寄せ・余白詰め（FVは白／箱はグレー） */
.flow { background: var(--color-bg-muted); border-radius: var(--radius-xl); padding: var(--space-lg); }
.flow__title { text-align: center; font-weight: 700; font-size: var(--fs-h-md); line-height: 1.3; margin-bottom: var(--space-lg); }
.flow__title-sm { font-size: 11px; line-height: 1; }  /* むた指定の実寸。下揃えのため行高も1に揃える */
/* ステップ：左「・」＋右内容、ドットを点線で連結 */
.flow__steps { position: relative; width: fit-content; margin: 0; }
/* ★2026-08-07 縦の点線も横罫と同じドットに揃えた（むた「別のセクションで点線があれば合わせて変更」）。
   `2px dotted` は間隔を指定できず、横罫と見た目が揃わなかった */
.flow__steps::before {
  content: ""; position: absolute; left: 9px; transform: translateX(-50%); top: 9px; bottom: 9px;
  width: var(--dot-size); z-index: 0;
  background-image: radial-gradient(circle, var(--dot-color) calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2));
  background-size: var(--dot-size) var(--dot-gap);
  background-repeat: repeat-y;
}
.flow__item { display: flex; align-items: center; gap: var(--space-xs); position: relative; z-index: 1; }
.flow__item:not(:last-child) { margin-bottom: var(--space-sm); }
.flow__no { flex: 0 0 18px; height: 18px; position: relative; }
.flow__no::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: var(--color-secondary); }
/* 3ステップ section：ボタンとのgap約32px（FV下余白0＋ここで32） */
.step-sec { padding: 0 0 var(--space-2xl); }
/* 3大特典：白セクション＋クリーム箱＋無料配布ピル（FVと同じ赤×白） */
/* 3大特典：セクション上部の余白を24px縮小（64px→40px） */
#benefits { padding-top: calc(var(--section-pad) - 24px); }
/* 3大特典：大きな角丸ボックスで囲む（参考 lp.yoom.fun。CTAもボックスの内側に収める） */
/* ★2026-08-07 箱をやめてセクションそのものを面にした（むた「ボックスの左右の余白をなくす形で、セクションとして」）。
   ⚠️ 箱の中に箱を作らない。**面が1枚になったぶん、中の画像とCTAが面いっぱいに使える**。
   ⚠️ スクロールで白→クリームに変わる演出も削除（むた指示）。
      ★色が変わる演出は「まだ読んでいない状態」を作ってしまう＝最初から目立つ面にするほうが素直 */
.benefit-box {
  background: none;
  border-radius: 0;
  padding: 0;
  margin-inline: 0;
}
/* 特典の説明文：中央揃え・元サイズ（16px）
   ★2026-08-07 改行（<br>）と強調を廃止して通常の文に（むた指示）。
     ⚠️ 手改行をやめたら行間も詰める。2.0 は「1行が短い＝改行で作った塊」向けの値で、
        自然折り返しの文に当てると行がバラけて塊に見えない */
.benefit-note { text-align: center; font-size: var(--fs-body); line-height: 1.8; }
/* .benefit-note__em は未使用（強調を外したため）。他で使う可能性があるので定義だけ残す */
.benefit-note__em { font-size: 1.18em; font-weight: 700; color: var(--color-primary); }
/* 3大特典 見出し（大きく＋左右に月桂樹あしらい・黒文字） */
/* 3カラムGrid：左セル＝イラスト（ボックス左端〜中央テキスト左端までフル幅に可変フィット・gapなし）／中央セル＝「3大特典」を常に中央配置／右セルは対称の空き */
/* 見出し横のイラストは削除（2026-08-05 むた指示）。説明は見出し下の画像枠に入る */
/* ★2026-08-07 むた指示で「LINE登録すると／豪華3大限定特典をお渡しします」に。
   ★何がもらえるかだけでなく、**何をするともらえるか**を見出しが持つようにした */
/* ★2026-08-07（同日2回目）むた指示で**1行・下揃え**に。
   ⚠️ `align-items: baseline` ではなく `flex-end` を使う。
      丸バッジ（inline-flex の円）は**中身のベースラインを外に持たない**ので、
      baseline にすると円だけが上下にずれる。**形の違うものを並べるときは下端で揃える** */
.benefit-title {
  display: flex; align-items: flex-end; justify-content: center; gap: 6px;
  /* ⚠️ 保険として折り返しを許す。中身は nowrap なので、収まらない幅では**切れる**（.shell が overflow:hidden）。
     ★切れるより2行になるほうが安全＝**倒れる側が安全なほうを選ぶ**。440px では1行のまま */
  flex-wrap: wrap;
  margin-bottom: var(--space-lg); color: var(--color-text);
}
/* 「LINE登録すると」＝条件。大きい文字の足元に置いて、視線が右へ流れるようにする */
/* ⚠️ 1行に3要素（条件＋バッジ＋見出し）を並べるので、**条件のほうも幅で縮める**。
   固定14pxだと375px幅で見出しが押し出されて切れた。★1行に収める責任は、一番小さい要素も負う */
/* ★2026-08-07（同日3回目）むた指示で「LINE登録すると」→「登録すると」に短縮し、**見出し全体を一段大きく**。
   ★短くしたのは削るためでなく、**空いた幅を主役（3大限定特典）に渡すため**。
     目標は「見出しの1行の幅 ≒ すぐ下の画像の幅」＝2つが同じ塊に見える */
.benefit-title__lead { font-size: clamp(13px, 4.3vw, 19px); font-weight: 700; line-height: 1.6; white-space: nowrap; }
/* 「豪華」＝主色の丸バッジ。★2文字を縦に積むので、円の中で行間を詰める */
.benefit-title__badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  /* ⚠️ 円も幅で縮める。固定46pxだと375px幅で1行に収まらない */
  width: clamp(40px, 13.2vw, 58px); height: clamp(40px, 13.2vw, 58px); border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff;
  font-size: clamp(13px, 4.3vw, 19px); font-weight: 700; line-height: 1.15; letter-spacing: 0;
}
/* ⚠️ 1行に「LINE登録すると＋豪華＋3大限定特典」を収めるので、clamp の上限を下げた（32px → 26px）
   （幅で変えたい値は clamp + vw ── この案件で確立した型） */
.benefit-title__txt { font-size: clamp(22px, 7.7vw, 34px); font-weight: 700; line-height: 1.2; white-space: nowrap; }
/* 「3」を特大で。★色は黒のまま（2026-08-07 むた指示）。大きさだけで階層を作る */
.benefit-title__num { font-size: 1.6em; line-height: 1; vertical-align: -0.06em; }
/* ★「限定特典」の上に傍点（2026-08-07 むた指示）。`.method-em--mu` と同じ手法＝擬似要素で上に置く。
   ⚠️ 文字数ぶんの「・」を letter-spacing で散らすのではなく、`text-emphasis` を使う。
      和文の傍点は**1文字ごとに1点**が正しく、手打ちの「・・・・」は字幅が変わるとずれる */
.benefit-title__dot {
  -webkit-text-emphasis: dot;
          text-emphasis: dot;
  -webkit-text-emphasis-position: over;
          text-emphasis-position: over;
}
.benefit-title__icon { width: 100%; height: auto; object-fit: contain; }
.benefit-leaf { flex: 0 0 auto; display: block; width: auto; height: 54px; }
.benefit-leaf--r { transform: scaleX(-1); }
/* CTAは枠外・下に配置 */
.benefit-cta { margin-top: var(--space-lg); }
/* 3大特典リスト：チェック→番号（1. 2. 3.）のナンバリング */
.benefit-list { counter-reset: bnum; }
.benefit-list li { counter-increment: bnum; position: relative; padding-left: 2em; margin-bottom: var(--space-md); font-size: var(--fs-body); }
.benefit-list li::before {
  content: counter(bnum) ".";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--color-primary); font-size: 1.28em; line-height: 1.5;
  background: none; width: auto; height: auto; border-radius: 0; box-shadow: none;
}
.offer-pill { display: inline-block; background: var(--color-primary); color: #fff; border-radius: var(--radius-full); padding: var(--space-xs) var(--space-lg); font-weight: 700; font-size: var(--fs-sm); }

/* デザインメソッド導入部 ---------------------------------------------------- */
/* 「企画詳細」を反転カラーの丸長方形バッジに。
   ★2026-08-07 面が淡くなったので反転の向きを逆にした（白地→ネイビー地）。
     淡い面の上に白いバッジを置くと、面から浮かずに沈む */
.method-pill {
  display: inline-block; background: var(--color-secondary); color: #fff;
  font-weight: 700; font-size: var(--fs-sm);
  border-radius: var(--radius-full); padding: var(--space-xs) var(--space-lg);
}
/* 強調（大きく・色変え・太字）
   ★2026-08-07 黄色 → 主色。暗い面をやめた時点で「拾い色」という考え方自体が要らなくなった
     （黄色は暗い面の上でしか効かない。淡いローズ地の上では 1.4 程度で読めない） */
.method-em { font-weight: 700; font-size: 1.18em; color: var(--color-primary); }
/* 引用文をさらに大きく */
.method-em--lg { font-size: 1.5em; line-height: 1.4; }
/* 「無料」の上に傍点（・・）：文字に近づけて配置 */
.method-em--mu { position: relative; }
.method-em--mu::before {
  content: "・・";
  position: absolute; left: 50%; top: -0.62em;
  transform: translateX(-50%);
  font-size: 0.5em; letter-spacing: 0.02em; line-height: 1;
  color: var(--color-primary); pointer-events: none;   /* ★傍点も本文の強調色に合わせる（黄色は淡い面で消える） */
}
.flow__num { font-size: 44px; font-weight: 700; color: var(--color-primary); line-height: 1; margin: var(--space-xs) 0; }
.flow__label { font-size: var(--fs-body); font-weight: 700; text-align: left; white-space: nowrap; }

/* Responsive ---------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --fs-h-xl: 40px;
    --fs-h-lg: 32px;
    --fs-h-md: 24px;
    --container: 720px;
  }
  .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
  .cards-2 .card { margin-bottom: 0; }
  .flow { grid-template-columns: repeat(3, 1fr); }
}

/* ===========================================================================
   上品リッチ コンポーネント（門口さん参考・ばり姉カラーで上品化）
   =========================================================================== */

/* 濃色セクション（背景コントラスト用） */
.section--primary { background: var(--color-primary); color: #fff; }
.section--primary .h-lg, .section--primary .h-md, .section--primary .lead { color: #fff; }
.section--primary .text-primary { color: var(--color-bg-cream); }

/* 帯見出し（＼ 見出し ／ リボン風） */
.band {
  display: block; text-align: center; font-weight: 700;
  font-size: clamp(16px, 5vw, var(--fs-h-md)); color: var(--color-primary);
  line-height: 1.3; margin-bottom: var(--space-lg);
  white-space: nowrap;   /* 375pxでも1行に収める（斜線ぶんの余白込み） */
}
.band span { position: relative; padding: 0 1.2em; }
.band span::before, .band span::after {
  content: ""; position: absolute; top: 50%; width: 2px; height: 1.5em;
  background: currentColor;
}
.band span::before { left: 0; transform: translateY(-50%) rotate(-20deg); }
.band span::after  { right: 0; transform: translateY(-50%) rotate(20deg); }
.section--primary .band { color: #fff; }   /* ★.section--rose は本文色のままでよい（面が淡いので白は読めない） */

/* 赤丸バッジ（9大特典など） */
.badge-circle {
  width: 156px; height: 156px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin: 0 auto var(--space-lg); box-shadow: 0 8px 24px rgba(132,46,46,.3);
  border: 3px solid #fff; outline: 2px solid var(--color-primary);
}
.badge-circle .n { font-size: 56px; font-weight: 700; line-height: 1; }
.badge-circle .t { font-size: var(--fs-sm); margin-top: 2px; }

/* 実績 stat（赤背景・特大数字） */
.section--primary .stat { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.section--primary .stat__head { color: #fff; }
.section--primary .stat__head::before { color: var(--color-bg-cream); }
.section--primary .stat__num { color: #fff; }
.section--primary .stat__unit { color: rgba(255,255,255,.9); }

/* チェックリスト（色アイコン丸） */
.list--check li { padding-left: 2.2em; margin-bottom: var(--space-md); }
/* ★2026-08-07 `content:"✓"` をやめ、丸バッジの中に SVG を置く形に（.step-box__list と描画を揃える）。
   フォントのグリフは線幅も形も環境任せで、同じページの2種類のチェックが別物に見えていた */
.list--check li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1.5em; height: 1.5em;
  background-color: var(--color-primary);
  background-image: var(--icon-check-white);
  background-size: .82em .82em;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  font-size: .8em;
}
/* ★2026-08-07 面が淡くなったので丸の色を反転（クリーム地・ネイビー文字 → ネイビー地・白チェック）。
   淡い面の上ではクリームの丸が背景に溶けてチェックが消える。
   ⚠️ `background` ショートハンドで書くと background-image（白いチェック）まで消えるので **background-color** で書く */
.section--rose .list--check li::before { background-color: var(--color-secondary); }

/* 3ステップ flow にアイコン＋接続矢印 */
.flow__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-bg-cream); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin: 0 auto var(--space-xs);
}

/* CTA サブテキスト */
.cta-sub { text-align: center; font-size: var(--fs-sm); color: var(--color-text-sub); margin-top: var(--space-sm); }

@media (min-width: 768px) {
  .band { font-size: var(--fs-h-lg); }
}

/* SP/PC 改行制御（コードならではの、デバイス別の意図した改行位置） */
br.sp { display: inline; }
br.pc { display: none; }
@media (min-width: 768px) {
  br.sp { display: none; }
  br.pc { display: inline; }
}

/* リッチCTA（FV用：吹き出し＋黄ピル＋緑ボタンを一体でリンク化） */
.cta-rich { display: block; max-width: 480px; margin: var(--space-lg) auto 0; text-decoration: none; }
.cta-rich__bubble { display: block; text-align: center; font-weight: 700; color: #fff; font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
.cta-rich__pill {
  display: block; width: fit-content; margin: 0 auto -14px;
  background: var(--color-secondary); color: var(--color-accent-yellow);
  font-weight: 700; font-size: var(--fs-caption); line-height: 1.2;
  padding: 7px var(--space-lg); border-radius: var(--radius-full); white-space: nowrap;
  position: relative; z-index: 2;
}
.cta-rich__btn {
  display: block; background: var(--color-cta); color: #fff;
  font-size: 18px; font-weight: 700; text-align: center;
  padding: calc(var(--space-md) + 6px) var(--space-lg) var(--space-md);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 0 var(--color-cta-dark);
  position: relative; z-index: 1;
}

/* CTAアニメ（3秒に1度ぴょこっと上下＝タップ誘導） */
@keyframes cta-bounce {
  0%, 78%, 100% { transform: translateY(0); }
  84% { transform: translateY(-10px); }
  89% { transform: translateY(0); }
  94% { transform: translateY(-6px); }
}
.cta, .cta-rich { animation: cta-bounce 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cta, .cta-rich { animation: none; } }

/* LINEアイコン（全CTAの先頭。公式LINEロゴを白で埋め込み・data URIで確実表示） */
.cta::before, .cta-rich__btn::before {
  content: ""; display: inline-block;
  width: 1.1em; height: 1.1em; vertical-align: -0.18em;
  margin-right: 0.4em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* FV: 見出しとボタンの間隔を広げる */
.fv .cta-rich { margin-top: -4px; }  /* 3ステップとの間隔を詰める */

/* 時間がないセクション：白背景（前後の色付きセクションの角丸を見せる“抜け”にする・2026-08-05） */
.time-sec { background: var(--color-bg); color: var(--color-text); }
.time-sec .time-yellow { color: var(--color-primary); font-weight: 700; }
.time-sec .time-white { color: var(--color-text); font-weight: 700; }
/* 「時間がない…」を大きく目立たせる（白背景になったので赤で） */
.time-big { display: inline-block; font-size: var(--fs-h-xl); font-weight: 700; line-height: 1.3; }
/* 時間がないCTA：黄色の丸長方形ボックスをボタンに接続（画像参考） */
.time-cta__box {
  display: block; width: fit-content; max-width: 100%;
  margin: 0 auto -10px; text-align: center;
  background: var(--color-secondary); color: var(--color-accent-yellow); font-weight: 700;
  border-radius: var(--radius-full); padding: var(--space-sm) var(--space-xl);
  font-size: var(--fs-sm); line-height: 1.5;
  position: relative; z-index: 2;
}
.time-cta .cta-rich__btn { position: relative; z-index: 1; }

/* おすすめしたい人：特別CTA（青箱＋2行ボタン・LINEアイコンなし／基本ルールの後に配置） */
.rec-cta__box {
  display: block; width: fit-content; max-width: 100%;
  margin: 0 auto -10px; text-align: center;
  background: var(--color-secondary); color: var(--color-accent-yellow); font-weight: 700;
  border-radius: var(--radius-full); padding: var(--space-sm) var(--space-lg);
  font-size: 11px; line-height: 1.5;
  position: relative; z-index: 2;
}
.rec-cta .cta-rich__btn { position: relative; z-index: 1; font-size: var(--fs-body); line-height: 1.4; }
.rec-cta .cta-rich__btn::before { display: none; }

/* ===== 末尾CTA（フッター直前・9大特典）：赤背景＋白文字 ===== */
.final-cta { background: var(--color-primary); color: #fff; }
/* ★★2026-08-07 むた「＼期間限定！／の下余白が空きすぎて気になる。**これ何度も言っています**」。
   真因が分かった: **`display: inline-block` だったこと**。
   inline-block は**行ボックスの中の1文字**として扱われるので、要素の下に
   親の line-height（和文 1.75）由来の**ディセンダ分の隙間**が必ず残る。
   ★負のマージンは要素を動かすが、**行ボックスの高さは動かせない**。
     だから 2026-08-05 に -12px → -44px と2度詰めても、隙間の正体が別だったので消えなかった。
   → `display: block` にして行ボックスを無くす。以後、margin が素直に効く（負の値も不要）。
   ⚠️ 「詰めても詰まらない」ときは、値ではなく **display を疑う**。 */
.final-cta__eyebrow {
  display: block; font-size: var(--fs-h-md); font-weight: 700; line-height: 1.1;
  color: var(--color-accent-yellow); margin-bottom: var(--space-xs);
}
.final-cta__benefit {
  color: #fff; font-weight: 700; font-size: 32px; line-height: 1.2;
  margin-bottom: var(--space-xs);
}
.final-cta__num { font-size: 52px; }
.final-cta__free {
  display: flex; align-items: center; justify-content: center; gap: var(--space-sm);
  color: #fff; font-weight: 800; font-size: 44px; line-height: 1.1;
  margin-bottom: var(--space-md);
}
.final-cta__now {
  flex: 0 0 auto; writing-mode: vertical-rl;
  background: var(--color-bg); color: var(--color-primary);
  font-size: var(--fs-caption); font-weight: 700; line-height: 1.15; letter-spacing: 0;
  padding: 8px 6px; border-radius: var(--radius-md);
}
.final-cta__img { margin-top: var(--space-lg); }
.final-cta__cta { margin-top: var(--space-xl); }
.final-cta__cta .cta-rich__btn { font-size: var(--fs-body); }

/* ===== セクションの角丸：LP全体のトーンを丸くする（2026-08-05 ばり姉さん指示） =====
   ルール:
   - 白・薄グレーの「白寄り」セクションには角丸を入れない（地としてまっすぐ流す）
   - 色の付いたセクション（クリーム／ネイビー／黒／赤）だけを角丸のブロックにして、
     白い地の上に丸いブロックが乗っている見え方にする
   - 上書きではなく素の指定なので、基本ルールより後ろ＝ここに置く（CSSソース順） */
.round-top {
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
}
.round-bottom {
  border-bottom-left-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
}
/* 色付きブロック同士が隣り合う箇所は、白い地を細く見せて2つのブロックに分ける */
.section--gap-top { margin-top: var(--space-sm); }

/* 角丸の“外側”に、隣り合うセクションの色を敷く（2026-08-05 ばり姉さん指示）
   角丸ブロックを丸みぶんだけ隣のセクションに重ねることで、
   角の落ちた部分から隣の色（グレー等）が見える＝白い切れ目が出ない。
   隣が白いセクションの場合は付けなくてよい（白が見えるのが正しいため）。 */
.bleed-top {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--radius-2xl));
  padding-top: calc(var(--section-pad) + var(--radius-2xl));
}
.bleed-bottom {
  position: relative; z-index: 1;
  margin-bottom: calc(-1 * var(--radius-2xl));
  padding-bottom: calc(var(--section-pad) + var(--radius-2xl));
}
/* 角丸で終わるブロックは、丸みぶんの余白を足して中身が角に寄らないようにする */
.method-sec.round-bottom { padding-bottom: var(--space-2xl); }
.method-sec.round-bottom.bleed-bottom { padding-bottom: calc(var(--space-2xl) + var(--radius-2xl)); }

/* ===== セクション上下余白の統一（2026-08-05 むた指示） =====
   基本は .section の `--section-pad`（2026-08-07 に 64px → 48px）。バラついて見えていた原因は角丸ではなく bleed-* で、
   ★ bleed した側は margin で隣に食い込むので、隣のセクションの余白がその分（28px）痩せる。
   自分の padding だけ足しても隣は直らないので、隣接セレクタで相手側にも同じ分を戻す。 */
.bleed-bottom + .section { padding-top: calc(var(--section-pad) + var(--radius-2xl)); }
.section:has(+ .bleed-top) { padding-bottom: calc(var(--section-pad) + var(--radius-2xl)); }
/* 例外を維持する箇所（同色が連続して1つの面に見えるので、内部の間隔として詰めたまま）:
   #steps の下と #cta の上＝薄グレーが続く区間 */
.bleed-bottom + #steps { padding-bottom: var(--space-lg); }
#cta { padding-top: var(--space-lg); }
/* 3大特典は FV のCTA直下。他と同じ 64px に揃える（-24px の個別調整を解除） */
#benefits { padding-top: var(--section-pad); }

/* ===== 講師紹介の名前（2026-08-05 むた指示） =====
   「ばり姉」と本名を1行に。ばり姉＝主（21px）／本名＝従（本文16px）。
   ★ .lead(18px) より後ろに置いて上書きする（CSSソース順ルール）。 */
.prof-name { font-size: var(--fs-h-md); line-height: 1.4; }
.prof-name__real { font-size: var(--fs-body); margin-left: .35em; }

/* ===== 机上の空論：画像に縦帯コピーを重ねる（2026-08-05 むた指示・参考=門口さんLP） =====
   【700】は人物が右・左が青空で抜けている。その抜けに縦書きの黒帯を上端揃えで置く。
   ★ writing-mode は各行に付ける（親に付けると flex の主軸まで縦になり、列の並びが崩れる）。 */
.vcopy { position: relative; }
.vcopy__img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.vcopy__lines {
  position: absolute; top: var(--space-lg); left: var(--space-md);
  display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 6px;
  max-height: calc(100% - var(--space-lg) * 2);
}
.vcopy__line {
  writing-mode: vertical-rl;
  background: var(--color-primary); color: #fff;
  font-size: 19px; font-weight: 700; line-height: 1.5; letter-spacing: .04em;
  padding: 12px 5px;
}
/* ★上端は3列とも揃える。段々に見えるのは「行の長さの差＝下端」だけ。
   ただし縦書きの「、」「。」は文字枠の上寄りに描かれるため、
   句読点で終わる列だけ帯の下に空きができて余白が大きく見える。
   → 句読点で終わる1列目・3列目は padding-bottom を詰めて、
     読点のない2列目と下端の見え方を揃える。 */
.vcopy__line:nth-child(1),
.vcopy__line:nth-child(3) { padding-bottom: 2px; }

/* ===== FAQ をシンプルに（2026-08-05 むた指示・参考 lp.yoom.fun） =====
   A. のラベルと区切り線をやめ、Q. だけを一回り大きく置く。
   ★ 既存の .faq ルールより後ろに置いて上書きする（CSSソース順ルール）。 */
.faq .q { align-items: baseline; }
.faq .q::before { font-size: 20px; flex: 0 0 auto; }
.faq .a { display: block; border-top: none; margin-inline: 0; padding: 0 var(--space-md) var(--space-lg); }
.faq .a::before { content: none; }
@media (min-width: 768px) {
  .faq .a { padding: 0 var(--space-xl) var(--space-xl); }
}

/* 「時間がない…」をさらに大きく（2026-08-05 むた指示） */
.time-big { font-size: 40px; }

/* 見出しの中の「の」だけ小さくして、語のまとまりを立たせる（FVの fv__title-no と同じ考え方） */
.txt-no { font-size: 0.72em; }

/* ===== 講師紹介の実績3点をボックス化（2026-08-05 むた指示） =====
   面の上に白カードを重ねる（.method-card と同じ型で統一）。
   黄色い ▶ は削除。見出し色は .seminar-point__title と揃えてネイビー。
   ★2026-08-07 面がネイビー → 淡いローズに変わった。暗い面では明度差だけで白カードが浮いていたが、
     明るい面では白が白に埋もれるので **ソリッド影が要る**（.method-card と同値）。 */
.prof-point {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-top: var(--space-md);
  /* 影は末尾の「ソリッド影」ブロックで一括指定（ここに書いても上書きされる） */
}
.prof-point__title { padding-left: 0; color: var(--color-text); }   /* ★2026-08-07 むた「見出しの青は黒に」。地の文字を黒に落とすと、主色の数字だけが立つ */
.prof-point__title::before { content: none; }

/* ★実績の数字だけ一段大きく・主色の赤にして、見出しの中に階層を作る（2026-08-07 むた指示）。
   「1,000名以上の社会人を指導」は全部が同じ太さ・同じ色で、**何が実績なのかが一目で入らない**。
   数字＝実績の核なので、そこだけ持ち上げて「数字 → 見出し語 → 本文」の3段にする。
   ⚠️ line-height: 1 を必ず付ける。付けないと**数字を含む行だけ行間が広がって**、
      2行の見出しで行送りが不揃いになる。
   ⚠️ 色は `--color-primary`（赤・主色＝見出し/強調の用途）。CTAの緑・告知の朱赤とは役割が別。

   ★2026-08-07（2回目のむた指示「数字をさらに強調・数字は Inter に」）で 1.3em → 1.45em に。
     ⚠️ 前回「1.3倍を超えると数字が独立した見出しに見える」と書いたが、それは
        **和文フォントのまま大きくしたとき**の話だった。**Inter に変えると条件が変わる**。
        Noto Sans JP の数字は仮想ボディいっぱいに組まれるので、大きくすると行の中で暴れる。
        Inter は欧文プロポーショナルで**字幅が詰まり、ベースラインが揃う**ので、
        1.45em でも「見出しの中の数字」に留まる。**数値の上限より、どの書体かが先に効く**。
     ⚠️ Inter は `index.html` で **600;700 しか読み込んでいない**。他のウェイトを指定しない
        （ウェビナーLPは Inter 自体を読み込んでいないので、あちらでは効かない） */
/* ★2026-08-07（同日2回目）むた「数字をもう少し大きく」→ 1.45em → 1.7em。
   ⚠️ 上限を決めるのは書体（Inter）。ウェビナーLPも Inter を読み込み済みなので**両LPで同じ見え方**になる */
.prof-point__num {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  letter-spacing: 0;
  /* 前後に髪の毛ぶんのアキ。和文（名・万）や欧文（UP）と密着すると
     「UP1名」が1語に見えて数字が読み取れない（[[japanese-typography-optical-alignment]]） */
  margin: 0 .06em;
}

/* ★見出しの中の**助詞・接続だけを一段落とす**（2026-08-07 むた指示
   「『から』『としての』のようなひらがなは小さく」）。
   ★狙いは2つあって、どちらも同じ操作で片付く。
     ⓐ 「人材教育系企業から独立・フリーランスとしての成功実績」が**3行に溢れて
        『績』1文字だけが3行目に落ちていた** → 縮めて2行に収める
     ⓑ 意味を運んでいるのは**名詞**（人材教育系企業／独立／フリーランス／成功実績）で、
        ひらがなは接続でしかない。落とすと名詞が浮き上がる＝**下げることで上げる**
   ⚠️ 対象は**2文字以上つづく助詞・接続**だけ。「を」「の」1文字に当てると、
      文字がぽつぽつ不揃いに見えるだけで意味の階層にならない */
.prof-point__p { font-size: .8em; }

/* 「この講座をおすすめしたい人」の箇条書きを14pxに（2026-08-05 むた指示）。
   16pxだと「独立の」「自分の手元に」で意図しない折り返しが出ていた。 */
.list--check li { font-size: var(--fs-sm); }

/* 最終CTA手前のボタン：赤い注記をボタンと一体化（2026-08-05 むた指示）。
   .cta-rich にすることで注記もボタンと一緒にバウンスし、間隔も 8px に詰まる。 */
/* 文字を2px大きく（14→16px）、4px下げてボタンとの余白を詰める（2026-08-05 むた指示） */
.cta-main .cta-rich__bubble {
  color: var(--color-primary);
  font-size: var(--fs-body);
  margin-top: 4px;
  margin-bottom: var(--space-xs);
}

/* ===== 不安喚起セクションの調整（2026-08-05 むた指示） ===== */
/* 見出しを画像の下端寄りに16px下げる（48→32px）。あわせて本文の上マージンを詰めて
   見出しとのギャップを縮める（48→24px）。 */
.anx-hero__img { padding-bottom: calc(var(--space-xl) - 12px); }  /* さらに12px下げる（2026-08-05 むた指示） */
.section--anxiety .anx-lead { margin-top: var(--space-lg); }

/* 赤帯のテキスト左端を、下の説明文（.anx-note）の左端に揃える。
   ★帯は margin-left:-16px で画面端へ食い込ませてあるので、padding-left も16pxにすると
     文字の開始位置がちょうど本文の0に乗る（従来は24pxで8px右にずれていた）。
     左が詰まったぶん、右も同じ16pxに揃える。 */
.section--anxiety .anx-band { padding-left: var(--space-md); padding-right: var(--space-md); }

/* step-box（動画で学べる具体的なステップ）の圧迫を緩和（2026-08-05 むた指示）。
   method-card の内側でさらにボックスが入れ子になり、外余白＋内余白＋チェック記号で
   実際に文字が使える幅が狭くなっていた（「仕組み」だけ3行目に落ちる状態）。
   → ボックスを左右8pxずつ外へ広げ、本文を14pxに下げて1行あたりの余裕を作る。 */
.step-box { margin-inline: calc(-1 * var(--space-sm)); }
.step-box__list li { font-size: var(--fs-sm); }

/* 「この講座をおすすめしたい人」を1つのボックスにまとめる（2026-08-05 むた指示）。
   見出しの帯とチェックリストが地の文に散らばって見えていたので、薄グレーの面で束ねる。 */
.rec-box {
  background: var(--color-bg-muted);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  margin-inline: calc(-1 * (var(--space-lg) - var(--space-sm)));
}
.rec-box .band { margin-top: 0; }
.rec-box .list--check { margin-bottom: 0; }
.rec-box .list--check li:last-child { margin-bottom: 0; }

/* 赤帯の視覚的な左右揃え（2026-08-05 むた指示）。
   和文の「「」「」」「。」は文字枠の中に空きを持つため、padding が同じでも
   ・鉤括弧で始まる行は左端が右にずれて見える
   ・句点で終わる行は右端が広く見える
   → その行だけ padding を 0.4em 詰めて、見た目の端を他の行に合わせる。 */
.section--anxiety .anx-band--kuro {
  padding-left: calc(var(--space-md) - 0.4em);
  padding-right: calc(var(--space-md) - 0.4em);
}
.section--anxiety .anx-punch .anx-band:last-child {
  padding-right: calc(var(--space-md) - 0.4em);
}

/* FAQ：答えを14pxに下げ、質問との間を詰める（2026-08-05 むた指示・参考 lp.yoom.fun）。
   Q. の文字サイズは据え置き。q の下パディング16px＋a の上0で空きすぎていた。 */
.faq .q { padding-bottom: var(--space-sm); }
.faq .a { font-size: var(--fs-sm); line-height: 1.7; }

/* ★2026-08-07 `-44px` を撤去。display:block にした時点で不要（詰まらなかった真因は display だった）。
   ⚠️ 負のマージンを残したまま block にすると、今度は行が重なる */

/* ★2026-08-07 むた「上の余白も開きすぎている（CTAボタンとの下の余白と違う気がする）」。
   真因: `.section` の 64px に `bleed-top` の +28px が乗って **上だけ 92px**、下は 64px で非対称だった。
   → 上を 48px+28px = 76px にして、下（64px）との差を縮める。
   ★bleed の 28px は「角丸の外に隣の色を見せる」ための構造上の値なので**引けない**。
     引けるのは素の padding のほう。 */
.final-cta.bleed-top { padding-top: calc(var(--section-pad) + var(--radius-2xl)); }

/* クロージング見出し：「自分の人生」を少し控えめに（1.6em→1.4em）。
   小さいデバイスで折り返してしまうため（2026-08-05 むた指示） */
.jumbo .big { font-size: 1.4em; }

/* ボックス内の箇条書きは、項目の切れ目に薄い点線を入れて区切りを見せる（2026-08-05 むた指示）。
   最後の項目には引かない（ボックスの下辺と二重線になるため）。 */
.step-box__list li:not(:last-child),
.rec-box .list--check li:not(:last-child) {
  padding-bottom: var(--space-md);
  /* ★2026-08-07 `1px dashed` をやめた。角のあるダッシュが密に並ぶと「線」に見えて視線が止まる。
     丸ドットを間隔広めに置くと**点の連なり**に読めて当たりが柔らかくなる（むた「優しいトーン」）。
     ⚠️ 縦罫（.flow__steps::before）と同じ変数を使う＝ページ内で点線の見た目を1種類に保つ */
  background-image: radial-gradient(circle, var(--dot-color) calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2));
  background-size: var(--dot-gap) var(--dot-size);
  background-repeat: repeat-x;
  background-position: left bottom;
}

/* 受講ステップ下のCTA導入文：14px・2行・太字にし、セクション上の余白も詰める（2026-08-05 むた指示） */
.cta-intro { font-weight: 700; }
#cta { padding-top: var(--space-md); }

/* 赤帯のテキストを少し大きく（21→25px・2026-08-05 むた指示）。
   最長の行「「自己理解で人生が変わる」」13文字が折り返さない上限は約28pxなので、
   余裕を持って25pxに置く。 */
.section--anxiety .anx-band { font-size: 25px; }

/* ===========================================================================
   ★PC表示の是正（2026-08-05 むた指示）
   このLPは shell 440px 固定＝レイアウトはデバイスで変えない方針。
   768px以上でフォント変数だけ拡大していたため、幅は同じまま文字だけ大きくなり、
   帯見出しが枠から飛び出し、受講生の声が2カラムに割れていた。
   =========================================================================== */
@media (min-width: 768px) {
  /* 変数の拡大を打ち消す（SPと同じ値に固定） */
  :root { --fs-h-xl: 32px; --fs-h-lg: 26px; --fs-h-md: 21px; }
  /* 受講生の声は1カラムのまま */
  .cards-2 { display: block; }
  .cards-2 .card { margin-bottom: var(--space-lg); }
  /* 帯見出しは clamp の上限に戻す（h-lg への上書きで nowrap のまま飛び出していた） */
  .band { font-size: clamp(16px, 5vw, var(--fs-h-md)); }
}

/* 縦帯コピーをもう一段大きく（19→21px・2026-08-05 むた指示） */
.vcopy__line { font-size: 21px; }

/* 赤帯を「最長行の右端が画面の右端から約40px空く」大きさまで上げる（2026-08-05 むた指示）。
   ★固定pxにすると両立しない: 430px幅で40px空く値は28pxだが、それだと375px幅で改行する。
     ビューポート幅に連動させて、どの幅でも同じ"空き"に見えるようにした。
     430px→約28px（右端41px空き） / 375px→約24px（改行しない） / PCは上限28pxで停止 */
.section--anxiety .anx-band { font-size: clamp(21px, 6.5vw, 28px); }

/* ===========================================================================
   ★ソリッドオフセット影でトーンを揃える（2026-08-07 むた指示・参考 lp.boki.funda.jp）
   CTAボタンだけが `0 4px 0` の平面影を持っていて、ボックス類は影なし or ぼかし影だった。
   「透明感のない影」に統一して、ページ全体を同じ質感に揃える。

   ⚠️ ソース順の都合でここに置く（既存の各コンポーネント定義より後ろ＝上書きが効く）。
      過去に「上書きを基本ルールより前に書いて効かない」事故を出しているため（2026-06-24）。

   ⚠️ 付けないもの:
     ・`.stepflow__item`（FVの3ステップのピル）… 高さ40px程度の小さい要素で、4pxの平面影は重い。
       yoom 実測の `0 2px 8px rgba(0,0,0,.08)` を意図して使っている箇所（DESIGN.md §6）
     ・`.shell`（LP全体の外枠）… ページを紙に見せるための大きなぼかし影。役割が違う
   =========================================================================== */

/* クリームのセクション上：受講生の声カード
   （★2026-08-07 `.benefit-box` は箱をやめて面になったので影も不要＝ここから外した） */
.card { box-shadow: 0 4px 0 var(--shadow-solid-cream); }

/* ローズのセクション上：デザインメソッド・①②③のステップ囲み・講師紹介の実績・FAQ
   ★★2026-08-07 面をネイビー → 淡いローズにしたので影も変えた（むた「背景の青がなくなったのに、この影は違和感」）。
     ⚠️ **面の色を変えたときは、その面の上にある影も必ず一緒に変える**。影は面から独立していない。
     ⚠️ この案件の影は**このブロックに集約されている**（ソース順で最後に効く）。
        コンポーネント側で `box-shadow` を足しても、ここが後ろにあるので**黙って上書きされる**
        → [[lp-design-patterns-260624]] のCSSソース順バグと同型。影を変えるときは必ずここを見る */
.method-card,
.step-box,
.prof-point,
.faq { box-shadow: 0 4px 0 var(--shadow-solid-rose); }

/* 白・薄グレーのセクション上：受講ステップのカード・まとめボックス */
.step-card,
.rec-box { box-shadow: 0 4px 0 var(--shadow-solid-gray); }

/* ===== 3大特典の見出し：狭い画面で1行に収める（2026-08-07） =====
   ⚠️ clamp の vw が期待どおりに効かないケースがあったため、**メディアクエリで確実に落とす**。
      ★この案件は 440px 固定列なので、幅が変わるのは 440px 未満だけ＝ここだけ見ればよい。
      [[固定幅LPに残ったメディアクエリは幅でなく文字だけを壊す]] の逆で、
      **文字だけを縮めたいときは、まさにメディアクエリが正しい道具**。 */
@media (max-width: 419px) {
  .benefit-title__lead  { font-size: 15px; }
  .benefit-title__txt   { font-size: 27px; }
  .benefit-title__badge { width: 46px; height: 46px; font-size: 15px; }
}
@media (max-width: 359px) {
  .benefit-title__lead  { font-size: 13px; }
  .benefit-title__txt   { font-size: 23px; }
  .benefit-title__badge { width: 40px; height: 40px; font-size: 13px; }
}