@charset "utf-8";
/* ============================================================================
   琉球アスティーダ 卓球アカデミー LP — スタイルシート
   出典: 卓球アカデミーLP v4.dc.html + 琉球アスティーダ Design System (4dbe067f)
   このファイルは Claude Design のデザインシステム(トークン/JSXコンポーネント)を
   素のCSSへ忠実にトランスパイルしたもの。原本は design-source/ を参照。
   ============================================================================ */

/* フォント(typography.css より): 見出し=M PLUS 1p / 本文=BIZ UDPGothic / 数字=Archivo */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@800;900&family=Archivo:wght@500;600;700&family=BIZ+UDPGothic:wght@400;700&display=swap");

/* ===========================================================================
   TOKENS — カラー (tokens/colors.css / ロゴ実測・変更禁止)
   =========================================================================== */
:root {
  /* プライマリ(ロゴ実測) */
  --asteeda-red: #B60007;
  --asteeda-navy: #0C1A71;
  --asteeda-gold: #F8B61D;
  --asteeda-white: #FFFFFF;

  /* セカンダリ */
  --wave-blue: #6BA0C3;
  --gold-deep: #BF7600;
  --navy-deep: #101040;
  --neutral-light: #EDEAF0;

  /* デジタル調整版(発光媒体用) */
  --red-screen: #DB1E2B;
  --gold-screen: #FCB901;

  /* 拡張ランプ */
  --red-50: #FDECEC;
  --red-100: #F8C9CB;
  --red-500: #B60007;
  --red-600: #9A0006;
  --red-700: #7A0818;

  --navy-50: #ECEEF8;
  --navy-100: #C9CFF2;
  --navy-500: #0C1A71;
  --navy-700: #101040;

  --gold-50: #FEF5DE;
  --gold-300: #FCD97A;
  --gold-500: #F8B61D;
  --gold-700: #BF7600;

  --neutral-0: #FFFFFF;
  --neutral-100: #EDEAF0;
  --neutral-300: #C5C0CC;
  --neutral-600: #4A4652;
  --neutral-900: #1A1826;

  /* セマンティックエイリアス */
  --text-heading: var(--asteeda-navy);
  --text-body: var(--neutral-900);
  --text-muted: var(--neutral-600);
  --text-on-navy: #FFFFFF;
  --text-on-red: #FFFFFF;
  --text-on-gold: #5A3A00;              /* gold上は濃色のみ。白文字禁止 */
  --text-inverse-muted: #C9CFF2;

  --surface-page: #FFFFFF;
  --surface-section: var(--neutral-light);
  --surface-card: #FFFFFF;
  --surface-dark: var(--navy-deep);
  --surface-navy: var(--asteeda-navy);

  --cta-bg: var(--gold-screen);          /* gold=CTA・キー数値 */
  --cta-bg-hover: #EFA500;
  --cta-bg-active: #DE9900;
  --cta-text: #5A3A00;

  --accent: var(--red-screen);           /* red=アクセント(小面積) */
  --accent-print: var(--asteeda-red);
  --keynumber: var(--gold-screen);       /* ダーク背景上のキー数値 */
  --keynumber-on-light: var(--gold-700);

  --border-default: var(--neutral-300);
  --border-subtle: var(--neutral-100);
  --separator-white: #FFFFFF;

  --link: var(--asteeda-navy);
  --link-hover: var(--red-screen);

  /* =========================================================================
     TOKENS — タイポグラフィ (tokens/typography.css)
     ========================================================================= */
  --font-heading: "M PLUS 1p", "BIZ UDPGothic", sans-serif;
  --font-body: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-en: "Archivo", sans-serif;
  --font-num: "Archivo", sans-serif;

  --weight-heading: 900;
  --weight-heading-sub: 800;
  --weight-body: 400;
  --weight-body-bold: 700;
  --weight-num: 600;
  --weight-en: 700;

  /* サイズスケール(流動レンジ) */
  --fs-h1: clamp(32px, 4.6vw + 15px, 46px);
  --fs-h2: clamp(26px, 2.4vw + 17px, 36px);
  --fs-h3: clamp(20px, 1.4vw + 15px, 26px);
  --fs-h4: clamp(17px, 0.7vw + 14px, 20px);
  --fs-lead: 17px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12.5px;
  --fs-price: clamp(36px, 3vw + 25px, 48px);
  --fs-time: clamp(20px, 1.4vw + 15px, 24px);
  --fs-en-eyebrow: 15px;

  /* 行間 */
  --lh-h1: 1.35;
  --lh-h2: 1.4;
  --lh-h3: 1.5;
  --lh-body: 1.9;
  --lh-small: 1.8;
  --lh-caption: 1.7;
  --lh-num: 1.1;

  /* 字間 */
  --ls-heading: 0.005em;
  --ls-body: 0.02em;
  --ls-en: 0.12em;
  --ls-num: 0;
  --numeric: tabular-nums;

  /* =========================================================================
     TOKENS — スペーシング・形状 (tokens/spacing.css)
     ========================================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --section-gap: 64px;
  --section-gap-desktop: 96px;
  --section-pad-x: 20px;
  --content-max: 1080px;

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 12px rgba(16, 16, 64, 0.10);
  --shadow-raised: 0 6px 24px rgba(16, 16, 64, 0.16);
  --shadow-cta: 0 2px 6px rgba(191, 118, 0, 0.28);
  --shadow-cta-hover: 0 3px 10px rgba(191, 118, 0, 0.34);
  --shadow-band-fixed: 0 -4px 20px rgba(16, 16, 64, 0.22);

  --keyline-white: 4px;
  --tap-min: 48px;

  /* 回遊性要素(固定ヘッダー高さ・追従CTA高さ) */
  --nav-h: 52px;
  --sticky-h: 76px;
}

/* LP表示方針(v4ワイヤー確定): モバイルレイアウトを max-width 560px で中央配置。
   見出しスケールはトークンのモバイル(375px)アンカー値に固定。
   fs-price / fs-time は流動レンジのまま使用。 */
:root {
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 20px;
  --fs-h4: 17px;
}

/* ===========================================================================
   ベース
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--navy-deep);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
h1, h2, h3 { text-wrap: balance; }
img { max-width: 100%; }

/* 舞台(navy余白の上に白いページ) */
.stage { min-height: 100vh; background: var(--navy-deep); padding: 0 0 40px; }
.page {
  width: min(560px, 100%);
  margin: 0 auto;
  background: var(--surface-page);
  box-shadow: var(--shadow-raised);
  font-family: var(--font-body);
  color: var(--text-body);
}

/* 汎用ヘルパー */
.nw { white-space: nowrap; }             /* 文節単位の改行制御(BudouX相当の手動セグメント) */
.num { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   セクション枠
   =========================================================================== */
.section { padding: 64px 20px; }
/* アンカー先が固定ヘッダーに隠れないように(固定ヘッダー高さ + 余白分下げる) */
.page > section, .page > footer { scroll-margin-top: calc(var(--nav-h) + 8px); }
.section--page { background: var(--surface-page); }
.section--section { background: var(--surface-section); }
.section--ruled { border-top: 2px solid var(--navy-100); }

/* 大きな透かし通し番号(装飾) */
.sec-numwrap { position: relative; }
.sec-numbg {
  position: absolute; right: 0; top: -18px; z-index: 0;
  font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 64px; line-height: 1; color: var(--navy-100); user-select: none;
}
.sec-numwrap > .section-heading { position: relative; z-index: 1; }

/* ===========================================================================
   SectionHeading コンポーネント
   =========================================================================== */
.section-heading .sh-eyebrow { display: flex; align-items: baseline; gap: var(--space-2); }
.section-heading .sh-num {
  font-family: var(--font-num); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 15px; letter-spacing: 0.08em; color: var(--accent);
}
.section-heading .sh-title {
  margin: 6px 0 0;
  font-family: var(--font-heading); font-weight: 900;
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

/* ===========================================================================
   Button コンポーネント
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-m);
  font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.03em;
  cursor: pointer; text-decoration: none; box-sizing: border-box; border: none;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 40px; padding: 8px 20px; font-size: 14px; }
.btn--md { min-height: 48px; padding: 12px 28px; font-size: 16px; }
.btn--lg { min-height: 56px; padding: 16px 40px; font-size: 17px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--cta-bg); color: var(--cta-text); box-shadow: var(--shadow-cta); }
.btn--primary:hover { background: var(--cta-bg-hover); box-shadow: var(--shadow-cta-hover); color: var(--cta-text); }
.btn--primary:active { background: var(--cta-bg-active); box-shadow: 0 1px 3px rgba(191,118,0,.3); }

.btn--secondary { background: #FFFFFF; color: var(--asteeda-navy); border: 2px solid var(--asteeda-navy); }
.btn--secondary:hover { background: var(--navy-50); color: var(--asteeda-navy); }
.btn--secondary:active { background: var(--navy-100); }

/* ===========================================================================
   Badge コンポーネント
   =========================================================================== */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-s);
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap;
}
.badge--navy { background: var(--navy-50); color: var(--asteeda-navy); border: 1px solid var(--navy-100); }
.badge--navy-solid { background: var(--asteeda-navy); color: #FFFFFF; border: 1px solid var(--asteeda-navy); }
.badge--gold { background: var(--gold-50); color: var(--text-on-gold); border: 1px solid var(--gold-300); }
.badge--red { background: var(--red-50); color: var(--red-600); border: 1px solid var(--red-100); }
.badge--pill { border-radius: var(--radius-pill); }
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-row--center { justify-content: center; }

/* ===========================================================================
   カード(共通) / ClassCard / クラス紹介カード
   =========================================================================== */
.card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card); box-sizing: border-box;
}
.card--pad { padding: clamp(16px, 4.3vw, 24px); }

.class-card { display: flex; flex-direction: column; gap: 12px; }
.class-card__title {
  margin: 0; font-family: var(--font-heading); font-weight: 900;
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}
.class-card__desc {
  font-size: var(--fs-small); line-height: var(--lh-small);
  letter-spacing: var(--ls-body); color: var(--text-body);
}
.class-card__tt { border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.class-card-list { display: flex; flex-direction: column; gap: 16px; }

/* 監督就任カード(02) — PC=横並び(写真40%) / モバイル=縦積み(写真全幅) */
.card02 { display: flex; gap: 20px; align-items: flex-start; flex-direction: row; }
.card02 .photo02 {
  flex: none; width: 40%; aspect-ratio: 1 / 1; box-sizing: border-box;
  border: 4px solid var(--separator-white); outline: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  object-fit: cover; object-position: center; display: block;
}
.card02 .card02__body { min-width: 0; }
@media (max-width: 640px) {
  .card02 { flex-direction: column; }
  .card02 .photo02 { width: 100%; aspect-ratio: 3 / 2; }
}

/* ===========================================================================
   写真プレースホルダー(白キーライン意匠) — 実写差し替え用
   =========================================================================== */
.ph {
  border: 4px solid var(--separator-white); outline: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  background: repeating-linear-gradient(45deg, var(--neutral-100), var(--neutral-100) 12px, #F4F2F7 12px, #F4F2F7 24px);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  text-align: center; color: var(--text-muted); line-height: 1.7;
  padding: 14px 18px; font-size: 12.5px;
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--16x10 { aspect-ratio: 16 / 10; font-size: 13px; }
.ph--incard { padding: 12px 16px; }
.ph--circle {
  width: 104px; height: 104px; border-radius: 50%; aspect-ratio: auto;
  padding: 0; font-size: 12px;
}

/* Google Map 埋め込み: PhotoFrame意匠(白キーライン4px+角丸+shadow)を踏襲。iframeは中で幅100%・16:10比 */
.map-embed {
  display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border: 4px solid var(--separator-white); outline: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  background: var(--neutral-100); box-sizing: border-box;
}
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

/* 実写(PhotoFrame意匠のimg版): 白キーライン4px+角丸12px。差し替えは同名ファイル上書きのみ */
.photo {
  display: block; width: 100%;
  border: 4px solid var(--separator-white); outline: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  object-fit: cover; box-sizing: border-box;
}
.photo--16x9 { aspect-ratio: 16 / 9; }
/* ヒーローKV: 白キーライン(枠線)を外す。角丸のみ維持(暗い背景に馴染ませる) */
.photo--hero { border: none; outline: none; box-shadow: none; }

/* ===========================================================================
   Timetable(ローカルDCコンポーネント)
   =========================================================================== */
.timetable { display: flex; flex-direction: column; gap: 10px; }
.tt-row { display: flex; align-items: center; gap: 12px; }
.tt-days { display: flex; gap: 3px; flex: none; }
.tt-day {
  width: 28px; height: 28px; border-radius: var(--radius-s);
  background: var(--asteeda-navy); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: 0;
}
.tt-time {
  margin-left: auto; font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: var(--fs-time); line-height: var(--lh-num); color: var(--text-heading); white-space: nowrap;
}

/* ===========================================================================
   PriceTable(640pxレスポンシブ: 広い=表 / 狭い=カード)
   =========================================================================== */
.price-table table { width: 100%; border-collapse: collapse; }
.price-table th {
  font-family: var(--font-body); font-weight: 700; font-size: 13px; color: #FFFFFF;
  background: var(--asteeda-navy); text-align: left; padding: 10px 14px;
}
.price-table th:last-child { text-align: right; }
.price-table td {
  padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card);
}
.price-table .pt-label { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--text-body); }
.price-table .pt-detail { font-family: var(--font-body); font-size: 15px; color: var(--text-body); }
.price-table .pt-value {
  font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 19px; color: var(--text-heading); text-align: right; white-space: nowrap;
}
.price-table .pt-value .pt-unit { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--text-muted); }

/* カード版(モバイル) */
.price-table .pt-cards { display: none; flex-direction: column; gap: 12px; }
.pt-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: 16px; }
.pt-card__top { display: flex; align-items: baseline; gap: 12px; }
.pt-card__label { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--text-heading); }
.pt-card__value { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 22px; color: var(--text-heading); margin-left: auto; }
.pt-card__unit { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); }
.pt-card__detail { font-family: var(--font-body); font-size: 15px; color: var(--text-body); margin-top: 4px; }

@media (max-width: 640px) {
  .price-table table { display: none; }
  .price-table .pt-cards { display: flex; }
}

/* ===========================================================================
   Note コンポーネント
   =========================================================================== */
.note {
  border-left: 3px solid var(--neutral-300); padding-left: 12px;
  font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-caption);
  letter-spacing: var(--ls-body); color: var(--text-muted);
}

/* ===========================================================================
   チェックリスト(保護者の共感)
   =========================================================================== */
.check-list { display: flex; flex-direction: column; gap: 14px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; }
.check-mark {
  flex: none; width: 22px; height: 22px; margin-top: 4px;
  background: var(--asteeda-navy); border-radius: var(--radius-s);
  display: flex; align-items: center; justify-content: center;
}
.check-mark::after {
  content: ""; width: 6px; height: 11px;
  border-right: 2.5px solid #FFFFFF; border-bottom: 2.5px solid #FFFFFF;
  transform: rotate(45deg) translate(-1px, -1px);
}
.check-text { font-size: var(--fs-body); line-height: 1.7; letter-spacing: var(--ls-body); color: var(--text-body); }

/* ===========================================================================
   コーチ紹介グリッド
   =========================================================================== */
.coach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.coach-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  padding: clamp(16px, 4.3vw, 24px) 12px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.coach-name {
  margin-top: 14px; font-family: var(--font-heading); font-weight: 900;
  font-size: var(--fs-h4); letter-spacing: var(--ls-heading); color: var(--text-heading); white-space: nowrap;
}
.coach-role { margin-top: 4px; font-size: var(--fs-caption); color: var(--text-muted); }

/* ===========================================================================
   STEP カード(入会までの流れ)
   =========================================================================== */
.step-list { display: flex; flex-direction: column; gap: 12px; }
.step-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-l); box-shadow: var(--shadow-card); padding: clamp(16px, 4.3vw, 24px); }
.step-card p { margin: 10px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-body); }

/* ===========================================================================
   Accordion コンポーネント(FAQ)
   =========================================================================== */
.accordion { border-top: 1px solid var(--border-default); }
.acc-item { border-bottom: 1px solid var(--border-default); }
.acc-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: var(--tap-min); padding: 16px 8px;
  background: none; border: none; cursor: pointer; text-align: left;
}
.acc-q { font-family: var(--font-en); font-weight: 700; font-size: 15px; color: var(--accent); flex: none; }
.acc-question {
  font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1.6;
  letter-spacing: var(--ls-body); color: var(--text-heading); flex: 1;
}
.acc-chevron {
  flex: none; width: 10px; height: 10px;
  border-right: 2.5px solid var(--asteeda-navy); border-bottom: 2.5px solid var(--asteeda-navy);
  transform: rotate(45deg); transition: transform .2s ease;
}
.acc-item.is-open .acc-chevron { transform: rotate(225deg) translate(-2px, -2px); margin-top: 6px; }
.acc-panel { padding: 0 8px 24px calc(12px + 15px); display: none; }
.acc-item.is-open .acc-panel { display: block; }
.acc-answer {
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: var(--ls-body); color: var(--text-body);
}

/* ===========================================================================
   CTABand コンポーネント(navy帯 + gold CTA)
   =========================================================================== */
.cta-band {
  background: var(--surface-navy); border-radius: var(--radius-xl);
  padding: 32px 24px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
}
.cta-band__title { font-family: var(--font-heading); font-weight: 900; font-size: var(--fs-h3); line-height: var(--lh-h3); color: #FFFFFF; }
.cta-band .btn { margin-top: 8px; }

/* 追従フッターCTA(モバイルのみ・ヒーロー通過後に下からスライドイン) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--surface-navy); box-shadow: var(--shadow-band-fixed);
  padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  transform: translateY(110%);          /* 既定は画面外(下)に退避 */
  transition: transform .28s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { flex: 1; min-width: 0; line-height: 1.3; }
.sticky-cta__close {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--navy-100); color: #FFFFFF;
  font-family: var(--font-body); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.sticky-cta__close:hover { background: var(--navy-100); color: var(--asteeda-navy); }
.sticky-spacer { height: var(--sticky-h); }
@media (min-width: 641px) { .sticky-cta, .sticky-spacer { display: none; } }

/* ===========================================================================
   ヒーロー(01)
   =========================================================================== */
.hero-header { background: var(--surface-page); padding: 18px 20px 16px; }
.hero-brand { display: flex; align-items: center; gap: 14px; }
.hero-logo { height: 68px; width: auto; display: block; flex: none; }
.hero-brand-ja {
  font-family: var(--font-heading); font-weight: 900; font-size: clamp(19px, 5.2vw, 22px);
  line-height: 1.35; letter-spacing: var(--ls-heading); color: var(--text-heading);
}
.hero-brand-en {
  font-family: var(--font-en); font-weight: 700; font-size: 11.5px; letter-spacing: var(--ls-en);
  text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}
.hero-body {
  position: relative;
  background: linear-gradient(205deg, var(--red-700) 0%, var(--asteeda-navy) 22%, var(--navy-deep) 58%, var(--navy-deep) 100%);
  padding: 28px 20px 60px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
}
.hero-eyebrow { margin-top: 10px; text-align: center; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-inverse-muted); }
.hero-title {
  margin: 24px 0 0; font-family: var(--font-heading); font-weight: 900;
  font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-heading); color: #FFFFFF;
}
.hero-lead { margin: 12px 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: #FFFFFF; }
.hero-highlight {
  margin-top: 24px; border: 1px solid var(--separator-white); border-radius: var(--radius-s);
  padding: 14px 16px; text-align: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px; letter-spacing: var(--ls-heading);
  color: #FFFFFF; text-wrap: balance;
}
.hero-cta { margin-top: 16px; }

/* キー数値(ダーク背景上の gold) */
.keynum { color: var(--keynumber); }
.keynum .num { font-size: var(--fs-price); line-height: 1; vertical-align: -0.08em; }
.unit-week { font-size: 22px; }

/* ===========================================================================
   指導体制テーブル(03)
   =========================================================================== */
.rank-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.rank-table th {
  font-family: var(--font-body); font-weight: 700; font-size: 13px; color: #FFFFFF;
  background: var(--asteeda-navy); text-align: left; padding: 10px 12px;
}
.rank-table th.is-narrow { white-space: nowrap; width: 1%; }
.rank-table td { padding: 12px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card); font-size: 15px; color: var(--text-body); }
.rank-table td.is-lead { font-weight: 700; }
.rank-table td.is-badge { white-space: nowrap; }

/* ===========================================================================
   家族割引ボックス(06)
   =========================================================================== */
.family-box {
  margin-top: 24px; background: var(--gold-50); border: 1px solid var(--gold-300);
  border-radius: var(--radius-s); padding: clamp(16px, 4.3vw, 20px); text-align: center;
}
.family-box__title {
  font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.7;
  letter-spacing: var(--ls-heading); color: var(--text-on-gold); text-wrap: balance;
}
.family-box__title .num { font-size: var(--fs-price); line-height: 1; color: var(--gold-700); vertical-align: -0.06em; }
.family-box__title .unit-yen { font-size: 20px; }
.family-box__sub { margin-top: 6px; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-body); color: var(--text-on-gold); }

/* ===========================================================================
   セクション内の小見出し / 段落 / 補足
   =========================================================================== */
.sub-h3 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: var(--fs-h4); line-height: var(--lh-h3); letter-spacing: var(--ls-heading); color: var(--text-heading);
}
.muted-p { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-body); color: var(--text-muted); }
.body-p { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-body); }
.inline-link { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; white-space: nowrap; }

/* ===========================================================================
   最終CTA(13)
   =========================================================================== */
.final-cta { padding: 64px 0; }
.final-cta__band {
  background: var(--surface-navy);
  clip-path: polygon(0 18px, 100% 0, 100% calc(100% - 18px), 0 100%);
  padding: 56px clamp(20px, 6vw, 40px) 60px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.final-cta__title { font-family: var(--font-heading); font-weight: 900; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-heading); color: #FFFFFF; text-wrap: balance; }
.final-cta__note { margin-top: 4px; font-size: var(--fs-small); line-height: var(--lh-small); color: #FFFFFF; }
.final-cta__full { width: 100%; }

/* ===========================================================================
   フッター(14)
   =========================================================================== */
.site-footer { background: var(--surface-navy); padding: 48px 20px 56px; }
.site-footer__brand { font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: var(--ls-heading); color: #FFFFFF; }
.site-footer__addr { margin: 12px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: var(--ls-body); color: var(--text-inverse-muted); }
.site-footer__links { margin-top: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-small); }
.site-footer__links a { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.site-footer__links a:hover { color: var(--wave-blue); }
.site-footer__sep { color: var(--text-inverse-muted); }

/* ===========================================================================
   汎用マージン
   =========================================================================== */
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }

/* ===========================================================================
   回遊性: スティッキー・アンカーナビ(ヘッダー)
   navy面 / メニュー=白・薄枠 / 「無料体験」のみ gold(文字は濃色)
   =========================================================================== */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--nav-h);
  padding: 8px 12px; box-sizing: border-box;
  background: var(--surface-navy);
  box-shadow: var(--shadow-card);
}
.site-nav__scroll-wrap { position: relative; flex: 1; min-width: 0; }
.site-nav__scroll {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox: スクロールバー非表示 */
}
.site-nav__scroll::-webkit-scrollbar { display: none; }
/* 横スクロールの発見性ヒント(右端フェード。スクロール量に関わらず固定表示のシンプル実装) */
.site-nav__fade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
  background: linear-gradient(to right, transparent, var(--surface-navy));
  pointer-events: none;
}
.nav-pill {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--navy-100); background: transparent; color: #FFFFFF;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: var(--ls-body); white-space: nowrap; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.nav-pill:hover { background: var(--navy-100); color: var(--asteeda-navy); }
/* 「無料体験」= gold・濃色文字(他4項目と質を分ける) */
.site-nav__cta {
  flex: none;
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: var(--cta-bg); color: var(--cta-text);
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 0.03em; white-space: nowrap; text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background .15s ease;
}
.site-nav__cta:hover { background: var(--cta-bg-hover); color: var(--cta-text); }

/* ===========================================================================
   回遊性: トップへ戻るボタン(1画面分スクロールで出現)
   =========================================================================== */
.to-top {
  position: fixed; right: 16px; bottom: 24px; z-index: 45;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--asteeda-navy); color: #FFFFFF; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-raised);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top svg { width: 18px; height: 18px; display: block; }
/* 追従CTA表示中は一段上へ退避(モバイルのみ・右下の重なり回避) */
@media (max-width: 640px) {
  body.has-sticky .to-top { bottom: calc(var(--sticky-h) + 16px); }
}

/* モーション低減設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-cta, .to-top, .nav-pill, .site-nav__cta, .btn { transition: none; }
}