/* ==========================================================================
   株式会社OJT — Creator Growth Program
   assets/css/style.css

   v4.1（設計書§8/§9）：
   - :root のライト系11トークン（--accent-text --border --danger --dur
     --font-mono --ink --muted --ok --radius --radius-sm --shadow）は
     form.css が依存するため削除・改名禁止（契約）。
   - 共有コンポーネント（reset / .btn / .site-header / .site-footer /
     .container / .section__title|.section__lead / .doc）はフォーム4ページと
     privacy.html が参照するため維持。
   - LP（body.lp）は v4.1 構成へ全面刷新。LP専用トークンは lp- プレフィクス
     の明るい寒色10種（§8.1・D80）。#E5484D（--lp-flame）は本文文字色に
     使用禁止 — 🔥帯とcampaignの大見出し装飾・リボンのみ。
   - 帯画像上には直接テキストを置かず、不透明HTMLカード
     （#FFFFFF / 罫 #BBD9F0 / インク #0C2B4A）へ収容する（§8.4）。
     例外：#empathy のイラストは吹き出し内へ文言を焼き込み済み（指示準拠。
     文言は img alt に原文どおり保持）。
   - 虹色/グラデ文字（背景グラデを文字型で切り抜く手法）はLP全体で使用禁止。
     v4.1時点の該当箇所（campaign見出し・本文／WHITEのプラン名・詳細ボタン）は
     全廃済みで、CSS中に該当プロパティは1件も存在しない。
   - 背景は3セクションで色分けする：empathy #12404F ／ rules #FFF6E8 ／
     services（.lp-section--alt）#E4F2FD。
   ========================================================================== */

:root {
  /* ▼ ライト系11トークン — form.css 契約のため削除・改名禁止 */
  --accent-text: #067a96; /* accent as TEXT on white — 5.0:1 */
  --border: rgba(11, 21, 38, 0.12);
  --danger: #c62828; /* 5.7:1 on white */
  --dur: 0.2s;
  --font-mono: "SF Mono", "SFMono-Regular", "Consolas", "Liberation Mono",
    Menlo, Courier, monospace;
  --ink: #0b1526; /* headings + body copy — 17.7:1 on white */
  --muted: #5c6b84; /* secondary copy — 5.4:1 on white */
  --ok: #0b7a44; /* 5.4:1 on white */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px rgba(11, 21, 38, 0.08);

  /* ▼ 共有コンポーネント（btn/header/footer/doc/503ページ）が参照 */
  --bg: #ffffff;
  --bg-alt: #f4f7fb;
  --accent: #53e6ff; /* FILL only (buttons) — too light for text */
  --accent-ink: #04121f; /* copy that sits on an --accent fill */
  --shadow-sm: 0 2px 8px rgba(11, 21, 38, 0.06);
  --shadow-lg: 0 14px 36px rgba(11, 21, 38, 0.1);
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --container: 1140px;
  --gold: #c9a227; /* CTA塗り（gold継承・--lp-cta と同値） */
  --cta-ink: #0b1526; /* gold塗り上の文字色 */
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                  */
/* ---------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-display: swap;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* §8.6: LP は SP 縦スクロール前提。PC は中央 480px カラム＋両サイド lp-bg。
   --lp-bg は body.lp スコープのため、html 側はリテラルで同値を敷く。 */
html:has(body.lp) {
  background: #f2f9ff;
}

@media (min-width: 768px) {
  body.lp {
    max-width: 480px;
    margin: 0 auto;
  }
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font-family: inherit;
}

/* ---------------------------------------------------------------------- */
/* Layout helpers（共有：フォーム/privacy/503ページも使用）                  */
/* ---------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: 64px 0;
  position: relative;
}

.section__head {
  max-width: 720px;
  margin: 0 0 32px;
}

.section__eyebrow {
  display: block;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  margin-bottom: 12px;
}

.section__title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.section__lead {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.9;
}

.section--alt {
  background: var(--bg-alt);
}

/* ---------------------------------------------------------------------- */
/* Buttons（共有ベース。フォーム各ページも使用）                             */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease,
    background var(--dur) ease, border-color var(--dur) ease;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: rgba(6, 122, 150, 0.45);
  box-shadow: var(--shadow);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--secondary {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.btn--ghost {
  background: var(--bg-alt);
  color: var(--ink);
  border-color: var(--border);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--accent-text);
}

.btn:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* Header（共有。LP は body.lp オーバーライドで明るい寒色に合わせる）        */
/* ---------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  max-width: var(--container);
  margin: 0 auto;
  min-height: 44px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}

.brand__tagline {
  font-size: 0.68rem;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* LP内 #apply の iframe に埋め込まれている時だけ付く印（main.js が付与）。
   親LPのヘッダーと二重に並ぶため、フォーム側のヘッダーは隠す。
   /form/ を直接開いた場合は印が付かないのでヘッダーは従来どおり出る。 */
.is-embedded .site-header {
  display: none;
}

/* §4：ヘッダーCTA「申し込む」＝ gold 塗り（tel:なし） */
.site-header__cta {
  padding: 10px 18px;
  font-size: 0.85rem;
  background: var(--gold);
  color: var(--cta-ink);
  border-color: transparent;
}

/* ---------------------------------------------------------------------- */
/* Footer（共有。LP は body.lp オーバーライドあり）                         */
/* ---------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  background: var(--bg-alt);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-footer__brand {
  font-weight: 700;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.86rem;
  color: var(--muted);
}

.site-footer__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer__meta a:hover {
  color: var(--accent-text);
}

.site-footer__links {
  display: flex;
  gap: 16px;
  font-size: 0.82rem;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
}

.site-footer__links a:hover {
  color: var(--accent-text);
}

.site-footer__copy {
  font-size: 0.76rem;
  color: var(--muted);
  opacity: 0.8;
}

/* ---------------------------------------------------------------------- */
/* Simple content page (privacy.html)                                    */
/* ---------------------------------------------------------------------- */
.doc {
  padding: 64px 0 80px;
  max-width: 760px;
  margin: 0 auto;
}

.doc h1 {
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 800;
}

.doc h2 {
  margin-top: 36px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-text);
}

.doc p,
.doc li {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.95;
}

.doc ul {
  margin-top: 12px;
  padding-left: 1.4em;
  list-style: disc;
}

.doc p {
  margin-top: 14px;
}

.doc__updated {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.doc__back {
  margin-top: 40px;
  display: inline-block;
}

/* ====================================================================== */
/* ▼▼ LP v4.1（body.lp スコープ全面刷新）▼▼                               */
/* ====================================================================== */

/* §8.1 確定トークン（D80・明るい寒色）。
   AA事前計算：ink/bg=13.5:1 / muted/bg=6.1:1 / accent/bg=4.7:1 /
   cta-ink/cta=5.9:1 / flame/白=3.9:1 → flame は本文使用禁止。 */
body.lp {
  --lp-bg: #f2f9ff; /* 全体背景 */
  --lp-bg-alt: #e4f2fd; /* 交互バンド */
  --lp-card: #ffffff; /* カード面 */
  --lp-line: #bbd9f0; /* カード罫 */
  --lp-ink: #0c2b4a; /* 主文字 */
  --lp-muted: #46617c; /* 補足文字 */
  --lp-accent: #1273b8; /* アクセント・アイコン */
  --lp-cta: #c9a227; /* CTA塗り（gold継承） */
  --lp-cta-ink: #0c2b4a; /* gold塗り上の文字色 */
  --lp-flame: #e5484d; /* 🔥帯アクセント（大見出し装飾のみ） */

  background: var(--lp-bg);
  color: var(--lp-ink);
  font-size: 0.95rem;
  line-height: 1.8;
}

body.lp .site-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--lp-line);
}

body.lp .brand__name {
  color: var(--lp-ink);
}

body.lp .brand__tagline {
  color: var(--lp-muted);
}

body.lp .site-header__cta {
  background: var(--lp-cta);
  color: var(--lp-cta-ink);
}

/* §8.7：sticky は「申し込む」1本（gold・safe-area）。footer 干渉の回避。 */
body.lp .site-footer {
  padding-bottom: 72px;
  background: var(--lp-bg-alt);
  border-top: 1px solid var(--lp-line);
  color: var(--lp-ink);
}

body.lp .site-footer__meta,
body.lp .site-footer__links a,
body.lp .site-footer__copy {
  color: var(--lp-muted);
}

body.lp .site-footer__links a:hover {
  color: var(--lp-accent);
}

/* 中身が無い footer（index.html／form の3ファイルで運営者情報を削除した状態）
   は padding＋border＋背景だけの空白帯として残るため、見た目だけを消す。
   ※ display:none にしてはいけない。getBoundingClientRect() が常に 0 を返し、
     main.js の sticky CTA 制御（footer が見えたら非表示）の条件
     `footerTop > window.innerHeight` が恒常的に false になって、
     sticky CTA「申し込む」が一度も表示されなくなる（2026-09-24 実測で確認）。
     ボックスは 0 高さで残し、位置情報だけは生かしておく。
   中身のある footer（privacy.html）は :empty に一致しないので影響しない。
   body.lp 側の上書き（padding-bottom/background/border-top）より後に置き、
   同時に body.lp 用セレクタも併記して確実に打ち消す。 */
.site-footer:empty,
body.lp .site-footer:empty {
  padding: 0;
  border-top: 0;
  background: none;
}

/* ---------------------------------------------------------------------- */
/* LP共通：セクション骨格・見出し・ボタン                                   */
/* ---------------------------------------------------------------------- */
.lp-section {
  position: relative;
  padding: 56px 0;
}

.lp-section--alt {
  background: var(--lp-bg-alt);
}

.lp-head {
  margin-bottom: 28px;
  text-align: center;
}

/* §8.2：H2 24-28px / eyebrow 12-13px ls.12em（accent色） */
.lp-h2 {
  font-size: clamp(1.5rem, 6.4vw, 1.75rem);
  font-weight: 800;
  line-height: 1.4;
  color: var(--lp-ink);
  letter-spacing: 0.02em;
}

.lp-h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: var(--lp-accent);
}

.lp-lead {
  margin-top: 14px;
  color: var(--lp-ink);
  font-size: 0.95rem;
  line-height: 1.85;
}

.lp-note {
  margin-top: 10px;
  color: var(--lp-muted);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* 免責1行（hero直下＋footer の2箇所・D76） */
.lp-disclaimer {
  color: var(--lp-muted);
  font-size: 0.72rem;
  line-height: 1.7;
}

/* LPのgold CTA（hero/cta/sticky・申し込みボタン3箇所共通）。明るいゴールド
   塗り＋ネイビーの縁取り。文字色も縁取りと同じネイビーで統一。 */
.btn--cta {
  width: 100%;
  min-height: 52px;
  background: #ffcc33;
  color: var(--lp-ink);
  border: 3px solid var(--lp-ink);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow);
}

.btn--cta:hover,
.btn--cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn--cta:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------- */
/* 帯画像セクション共通（§8.4：画像上直接テキスト0・不透明カードへ収容）      */
/* ---------------------------------------------------------------------- */
.lp-band {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-height: 340px;
  padding: 44px 0;
  background-color: var(--lp-bg-alt);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.lp-band__card {
  position: relative;
  z-index: 1;
  margin: 0 14px;
  padding: 26px 20px;
  background: var(--lp-card); /* #FFF 不透明 */
  border: 1px solid var(--lp-line); /* 罫 #BBD9F0 */
  border-radius: 16px;
  color: var(--lp-ink); /* インク #0C2B4A */
  box-shadow: var(--shadow-lg);
}

.lp-band__card + .container {
  margin-top: 20px;
}

/* premium 帯：🔥パネルは写真（4:3・上寄せ）の上、プランカード列はその下の
   平坦な bg-alt 上に並ぶ（写真が縦に間延びしないよう top/100% auto）。 */
.lp-band--premium {
  justify-content: flex-start;
  min-height: 0;
  padding-top: 40px;
  background-image: url("../img/premium-band.webp?v=20260922a");
  background-size: 100% auto;
  background-position: top center;
  background-color: var(--lp-bg-alt);
}

.lp-band__card--center {
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* 1. hero／FV（コピーをFVへ集約：左=HTMLコピー／右=実写人物）               */
/* 旧D81（写真フル見せ＋写真直乗せ青文字＋下辺の重複コピーカード）は廃止。   */
/* コピーは hero 内に1回だけ出す＝重複再掲なし。FVは1枚静止画で動きなし。    */
/* ---------------------------------------------------------------------- */
/* ファーストビューは「ヘッダーを除いた画面高さ」を最低でも占有させ、次の
   #empathy（ダークティール）が初回表示に覗かないようにする。余った高さは
   .fv が吸収し、人物画像が縦に伸びて画面が埋まる。 */
.hero {
  position: relative;
  background: var(--lp-bg); /* #F2F9FF：人物左エッジのフェード先 */
  padding: 10px 0 34px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: calc(100vh - 56px); /* svh 非対応ブラウザ向けフォールバック */
  min-height: calc(100svh - 56px); /* 56px = .site-header の実測高 */
}

/* FVは先方支給のカンプ1枚（見出し・サブ・リードを焼き込み済み）を左右
   フルブリードで掲出する。flex で伸長させない＝幅基準の自然高さのままなので
   object-fit のトリミングが起きず、左側のコピーが欠けない。hero の
   min-height に対して余る分は CTAカードの下（セクション下余白）へ流れる。 */
.fv {
  flex: 0 0 auto;
}

/* 中身は画像1枚のみ。見出し由来の行送り余白を殺してFVを画面上端に寄せる。 */
.fv__headline {
  margin: 0;
  line-height: 0;
}

.fv__image {
  display: block;
  width: 100%;
  height: auto;
}

/* CTAカード＋免責1行＝FV直下。免責はLP全体で hero + footer の2箇所のみ。 */
.hero__card {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0 14px;
  padding: 22px 20px 20px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.hero__actions {
  margin-top: 0;
}

.hero__disclaimer {
  margin-top: 14px;
}

/* ---------------------------------------------------------------------- */
/* 2. empathy（ネガ訴求／ダークティール #12404F・§背景3色分離の1色目）       */
/* 旧「明るい寒色の白カード3枚」は #rules の選択肢と見分けが付かないため撤去。*/
/* 不安3項は画像の吹き出し内へ焼き込み済み（参考スクショ準拠）。画像の地色を */
/* セクション色と同一にしてあるため、枠・角丸は付けず地に溶かす。            */
/* ---------------------------------------------------------------------- */
.empathy {
  background: #12404f;
}

.empathy__lead {
  color: #ffffff; /* on #12404F = 9.7:1 ✓ */
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.85;
  text-align: center;
}

.empathy__banner {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

/* ---------------------------------------------------------------------- */
/* 3. rules（ポジ転換／クリーム #FFF6E8・§背景3色分離の2色目）               */
/* 角丸白カード＋数字バッジ(01-03)＋ビネット画像で「選べる3つ」に見せる。    */
/* ---------------------------------------------------------------------- */
.rules {
  background: #fff6e8;
}

.rules__title {
  text-align: center;
}

.rules__list {
  margin-top: 4px;
  display: grid;
  gap: 16px;
}

/* 1項目＝ほぼ1画面。数字バッジ→イラスト→本文を縦積みで大きく見せる。
   背の高い端末で間延びしないよう 640px で頭打ちにする。 */
.rules__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: clamp(400px, calc(100vh - 168px), 640px);
  min-height: clamp(400px, calc(100svh - 168px), 640px);
  padding: 28px 14px;
  border-radius: 20px;
  background: var(--lp-card);
  border: 1px solid #efdcc0;
  box-shadow: var(--shadow-sm);
}

/* DOM順は img → badge。column-reverse でバッジを絵の上に出す。 */
.rules__media {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.rules__vignette {
  width: 100%;
  max-width: 282px;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  object-fit: cover;
  background: var(--lp-bg-alt);
}

/* HTML数字バッジ：gold塗り + ink文字（5.9:1 ✓） */
.rules__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border-radius: 999px;
  background: #c9a227;
  color: #0c2b4a;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* 改行位置は <br> で固定（先方指定）。最長行は項目1の2行目
   「最新AIを使った「ほったらかし」の仕組み」＝実測 18.98em。これが 320px 幅の
   端末でもカード内幅（250px）に収まるよう clamp を設定してある（320pxで
   12.64px × 18.98 = 240px）。max-width はワイド側で行長が伸びすぎない上限。
   ※ここを緩めると最終行の1文字だけが3行目に落ちるので、変更時は要再計測。 */
.rules__text {
  max-width: 20em;
  color: var(--lp-ink);
  font-size: clamp(0.78rem, 3.95vw, 1.1rem);
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* 4. services（①〜⑫・1列12行／1項目＝1行）                                */
/* 2列6行では全項目が2行に折り返していた。1列にして各項目を1行に収める分、  */
/* 行の縦padding と gap を詰め、セクション全体の高さを従来とほぼ同じに保つ。 */
/* 最長項目「⑫ プライオリティサポート（24時間対応）」＝約19.4em が基準で、   */
/* clamp の下限は 320px 幅でもこれが1行に収まる値。                         */
/* 折りたたみ表示化（2026-09-24）：details/summary＋カード外装。           */
/* JS不要のネイティブ開閉のため main.js の変更は無い。外枠は faq と共用     */
/* （下の「セクション折りたたみの外枠」ブロック）。                        */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* セクション折りたたみの外枠（services と faq で共用・2026-09-24）         */
/* セクション見出しそのものを開閉トリガーにする形。faq は内側にも details   */
/* を持つ二段階構成だが、入れ子の details はクリックが親へ伝播しないため、  */
/* 内側を開閉しても外側は影響を受けない。                                  */
/* ---------------------------------------------------------------------- */
.services-accordion,
.faq-accordion {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.services-accordion__summary,
.faq-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}

.services-accordion__summary::-webkit-details-marker,
.faq-accordion__summary::-webkit-details-marker {
  display: none;
}

/* lp-h2のタイポグラフィ（サイズ・太さ・色）は流用し、中央寄せの下線
   バーのみこの文脈では外す（アコーディオン行の左寄せ見出しにするため）。 */
.services-accordion__summary .lp-h2,
.faq-accordion__summary .lp-h2 {
  margin: 0;
  text-align: left;
}

.services-accordion__summary .lp-h2::after,
.faq-accordion__summary .lp-h2::after {
  content: none;
}

.services-accordion__summary::after,
.faq-accordion__summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lp-accent);
  transition: transform var(--dur) ease;
}

.services-accordion[open] .services-accordion__summary::after,
.faq-accordion[open] .faq-accordion__summary::after {
  transform: rotate(45deg);
}

.services-accordion__summary:focus-visible,
.faq-accordion__summary:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .services-accordion__summary::after,
  .faq-accordion__summary::after {
    transition: none;
  }
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 0 20px 20px;
}

.services__item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-size: clamp(0.72rem, 3.4vw, 0.82rem);
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* 5./6. plans ＋ plans-premium（「詳細」アコーディオン7枚）                 */
/* 指スワイプ横スクロール（旧仕様継承）：flex + scroll-snap。カードは横並び、  */
/* 端で次カードが少し覗く幅にして続きがあることを示す。                      */
/* ---------------------------------------------------------------------- */
.plan-list {
  display: flex;
  gap: 14px;
  margin: 0 -20px;
  padding: 10px 20px 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* PCはタッチスワイプが無いため、ドラッグ可能な細いスクロールバーを常設する
     （非表示にすると PC でスクロールする手段が無くなる）。main.js のホイール
     横変換と合わせて、マウス操作でも操作できるようにする。 */
  scrollbar-width: thin;
  scrollbar-color: var(--lp-line) transparent;
}

.plan-list::-webkit-scrollbar {
  height: 6px;
}

.plan-list::-webkit-scrollbar-thumb {
  background: var(--lp-line);
  border-radius: 999px;
}

.plan-card,
.plan-list__banner {
  flex: 0 0 86%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.plan-card {
  background: var(--lp-card);
  border: 3px solid var(--lp-line);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow-sm);
}

/* 🔥帯バナー（カルーセル内のスライドとしてPLATINUM直前に挿入・§9.2） */
.plan-list__banner {
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.plan-card--premium {
  border-color: var(--lp-cta);
  box-shadow: var(--shadow);
}

/* WHITE も PLATINUM/BLACK と同様に gold のフチ。 */
.plan-card--white {
  border: 3px solid var(--lp-cta);
}

.plan-card__chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lp-accent);
  color: #ffffff; /* on accent 4.7:1 ✓ */
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.plan-card__name {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--lp-accent);
  line-height: 1.3;
}

/* プラン名の配色をプラン名自体の色に合わせる。WHITEは最上位プランのため
   gold単色（旧・虹グラデ加飾は全廃）。 */
.plan-card[data-plan="RED"] .plan-card__name {
  color: #e11d2e;
}

.plan-card[data-plan="GOLD"] .plan-card__name {
  color: var(--lp-cta);
}

.plan-card[data-plan="DIAMOND"] .plan-card__name {
  color: #0ea5c9;
}

.plan-card[data-plan="BLACK"] .plan-card__name {
  color: #14181f;
}

.plan-card[data-plan="WHITE"] .plan-card__name {
  color: var(--lp-cta); /* #C9A227 gold単色（GOLDプランと同じ扱い） */
}

.plan-card__sub {
  margin-top: 2px;
  color: var(--lp-muted);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.plan-card__catch {
  margin-top: 12px;
  color: var(--lp-ink);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.7;
}

.plan-card__price {
  margin-top: 12px;
  color: var(--lp-ink);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.plan-card__tax {
  margin-left: 8px;
  color: var(--lp-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

/* 「詳細」は常時展開表示（旧・開閉トグルは廃止・2026-09-24）。
   トグルボタンの margin-top: 16px と同じ間隔を .plan-card__detail 側で
   引き継ぎ、価格ブロック直下の余白を維持する。 */
.plan-card__detail {
  margin-top: 16px;
}

.plan-card__meta {
  margin: 0;
  padding-top: 6px;
}

.plan-card__meta-row {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--lp-line);
  font-size: 0.94rem;
  line-height: 1.7;
}

.plan-card__meta-row dt {
  color: var(--lp-muted);
  font-weight: 600;
}

.plan-card__meta-row dd {
  margin: 0;
  color: var(--lp-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.plan-card__meta-row--target dd {
  font-weight: 500;
}

.plan-card__meta-row--gift {
  background: rgba(201, 162, 39, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px;
  border-top: 1px solid var(--lp-cta);
}

/* 🔥帯パネル見出し：flame は大見出し装飾のみ（3.9:1・本文使用禁止） */
.premium-band__flame {
  font-size: clamp(1.35rem, 5.8vw, 1.6rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--lp-flame);
  letter-spacing: 0.02em;
}

.premium-band__lead {
  margin-top: 10px;
  color: var(--lp-ink);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.8;
}

/* ---------------------------------------------------------------------- */
/* 7. campaign（スペシャル感バナー）                                        */
/* 虹グラデ文字は全廃。見出しは #E5484D 単色＋蛍光マーカー風ハイライトのみ。 */
/* 枠：gold二重枠（border 3px ＋ outline 2px / offset 5px）。外周の outline */
/* とタブ・リボンのはみ出し分を確保するため、バナー側に余白を持たせる。      */
/* ---------------------------------------------------------------------- */
/* 枠は campaign-band.webp（金の装飾フレーム）そのものが担うため、CSSの
   gold二重枠（border/outline）は撤去。背景は cover ではなく 100% 100% で
   伸ばす：cover だと縦横比の差でフレーム四隅の飾りが切れるため。
   内側の余白は % 指定（=幅基準）で、装飾ライン（上端から約8.3%）より
   内側に本文が入るようにする。高さは min-height を下限に内容追従。 */
/* バナーは左右フルブリード（画面端まで）。.container の左右padding を外し、
   バナー自身の左右marginも0にして、サイドに地色の隙間を残さない。 */
.campaign > .container {
  padding: 0;
}

.campaign-banner {
  position: relative;
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  /* 装飾ラインは上辺8.3%・左辺7.5%（実測）。%パディングは親(.container)の
     内寸基準で解決される点に注意（自身の幅基準ではない）。 */
  padding: 12% 10% 10%;
  background-color: #ffffff;
  background-image: url("../img/campaign-band.webp?v=20260923a");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 上部センタータブ */
/* タブ／リボンはいずれもバナー上辺をまたがせる。フレーム内側に置くと
   四隅の飾りや見出しに重なるため、装飾ライン（上辺8.3%）より外に逃がす。 */
.campaign-banner__tab {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 6px 20px;
  border-radius: 999px;
  background: #c9a227;
  color: #0c2b4a; /* on gold 5.9:1 ✓ */
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 左端リボン（旗形・clip-path）。上辺をまたぐ位置に置き、左上コーナーの
   飾りにも見出しにも重ねない。 */
.campaign-banner__ribbon {
  position: absolute;
  top: 0;
  left: 0; /* フルブリードのため画面端に合わせる（旧 -9px は見切れる） */
  transform: translateY(-50%);
  z-index: 2;
  padding: 5px 22px 5px 12px;
  background: #e5484d;
  color: #ffffff; /* on #E5484D 4.0:1（太字・装飾ラベル） */
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.04em;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}

/* テキスト域：フレーム内の白地にそのまま載せる（パネルの枠線は付けない＝
   装飾フレームと二重枠に見えないようにする）。 */
.campaign-banner__panel {
  width: 100%;
  max-width: 360px;
  text-align: center;
}

/* 12文字が1行に収まるよう letter-spacing は 0、上限はフレーム内寸から逆算。 */
.campaign__title {
  font-size: clamp(1.3rem, 6.2vw, 1.7rem);
  letter-spacing: 0;
  color: #e5484d; /* 単色（大見出し装飾・3:1基準 ✓） */
}

/* .lp-h2 のアクセント下線バーはバナー内では外す（マーカーと二重になるため） */
.campaign__title::after {
  content: none;
}

/* 蛍光マーカー風ハイライト（下線）。inline要素に掛けて文字幅に追従させる。 */
.campaign__marker {
  display: inline;
  background-image: linear-gradient(transparent 62%, #ffe58a 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.campaign__body {
  margin-top: 14px;
  color: var(--lp-ink);
  font-size: clamp(0.98rem, 4.3vw, 1.2rem);
  font-weight: 800;
  line-height: 1.75;
}

.campaign__sub {
  margin-top: 10px;
  color: var(--lp-ink);
  font-size: clamp(0.88rem, 3.8vw, 1rem);
  font-weight: 600;
  line-height: 1.6;
}

.campaign__note {
  margin-top: 10px;
  color: var(--lp-muted);
  font-size: 10.5px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------- */
/* apply（フォームiframe埋込・#faq直前・2026-09-24追加）                    */
/* 同一オリジンのため高さはmain.jsが実測して随時上書きする。ここでの         */
/* height:1200pxはJS未実行時・初回描画時のフォールバック値。                 */
/* ---------------------------------------------------------------------- */
.apply__frame {
  display: block;
  width: 100%;
  height: 1200px;
  border: 0;
  background: var(--lp-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------- */
/* 8. faq（標準アコーディオン＝details/summary・5項目）                     */
/* ---------------------------------------------------------------------- */
body.lp .faq__list {
  display: grid;
  gap: 12px;
}

/* 外側アコーディオンの中に入ったので、services__grid と同じ要領で
   左右・下の余白を内側リスト側に持たせる。 */
body.lp .faq-accordion .faq__list {
  padding: 0 20px 20px;
}

body.lp .faq-item {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

body.lp .faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lp-ink);
  min-height: 44px;
  list-style: none;
}

body.lp .faq-item__q::-webkit-details-marker {
  display: none;
}

body.lp .faq-item__q::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.3rem;
  color: var(--lp-accent);
  transition: transform var(--dur) ease;
}

body.lp .faq-item[open] .faq-item__q::after {
  transform: rotate(45deg);
}

body.lp .faq-item__q:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: -2px;
}

body.lp .faq-item__a {
  padding: 0 18px 18px;
  color: var(--lp-muted);
  font-size: 0.9rem;
  line-height: 1.9;
}

/* 段落が複数ある回答（2026-09-24追加分）。reset で p の margin が 0 の
   ため、段落間の間隔はここで明示する。 */
body.lp .faq-item__a p + p {
  margin-top: 0.9em;
}

/* 「申し込みから受講開始まで」の流れ図。矢印は連結記号なので CSS 側で
   描き、文言そのものは原文どおり各ステップに1件ずつ置く。 */
body.lp .faq-flow {
  margin: 12px 0;
  text-align: center;
}

body.lp .faq-flow__step {
  color: var(--lp-ink);
  font-weight: 700;
}

body.lp .faq-flow__step:not(:last-child)::after {
  content: "↓";
  display: block;
  margin: 2px 0;
  color: var(--lp-accent);
  font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
  body.lp .faq-item__q::after {
    transition: none;
  }
}

/* ---------------------------------------------------------------------- */
/* 9. cta                                                                  */
/* ---------------------------------------------------------------------- */
.cta__panel {
  padding: 36px 22px;
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-align: center;
}

.cta__lead {
  margin-top: 14px;
  color: var(--lp-ink);
  font-size: 0.95rem;
  line-height: 1.85;
}

.cta__actions {
  margin-top: 24px;
}

.cta__actions .btn--cta {
  max-width: 380px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------- */
/* stickycta（§8.7：56-64px・gold「申し込む」1本・safe-area）               */
/* ---------------------------------------------------------------------- */
.stickycta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  height: 60px;
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--lp-line);
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .stickycta {
    max-width: 480px;
    margin: 0 auto;
  }
}

/* JS有効時のみ出し入れ（無効時は常時表示＝CV確保） */
html.js .stickycta:not(.is-visible) {
  transform: translateY(110%);
}

@media (prefers-reduced-motion: reduce) {
  .stickycta {
    transition: none;
  }
}

.stickycta__btn {
  flex: 1 1 auto;
  max-width: 400px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------- */
/* スクロールフェード（main.js が .is-visible を付与）                      */
/* ---------------------------------------------------------------------- */
html.js body.lp [data-fade] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js body.lp [data-fade].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js body.lp [data-fade],
  html.js body.lp [data-fade].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}