/*
  pilates.css — /pilates/ ピラティス資格特設ページ専用スタイル
  読み込み元: page-pilates.php のみ。全クラスは plt- 接頭辞、本文ラッパは #fsPilates。
  サイト共通の bulma.css / design.css と共存するため素のクラス名は使わない。
*/

    /* ================================================================
       サイト共通 CSS (style.css → bulma.css / design.css) の干渉対策
       このファイルは page-pilates.php からのみ読み込まれる
       ================================================================ */
    html {
      scroll-padding-top: 86px; /* 固定ヘッダー(SP 70px)+余白 */
    }
    @media (min-width: 768px) {
      html { scroll-padding-top: 96px; } /* 固定ヘッダー(PC 80px)+余白 */
    }
    /* bulma minireset の打ち消し */
    :where(#fsPilates) p { margin: 0 0 1em; }
    :where(#fsPilates) :where(h1, h2, h3, h4, h5, h6) {
      font-family: inherit;
      color: inherit;
      font-weight: 700;
      font-size: 100%;
      letter-spacing: inherit;
    }
    :where(#fsPilates) strong { color: inherit; font-weight: 700; }
    #fsPilates .plt-course-table ul { list-style: disc; }
    /* design.css の a:hover{opacity:.5} / a{color:#4a4a4a} / th 装飾の打ち消し */
    :where(#fsPilates) a { color: inherit; }
    /* design.css の `a:hover{opacity:.5}` と特異性が同じ(0,1,1)なので、
       読み込み順が変わると負けてボタン全体が半透明になる。
       ID を効かせて確実に勝たせる (このページで hover opacity を使う部品はない) */
    #fsPilates a:hover { opacity: 1; }
    :where(#fsPilates) th { font-family: inherit; color: inherit; letter-spacing: inherit; }
    /* このページではグローバル追従CTA(footer.php)を使わずページ専用固定CTAに一本化 */
    #fotterCta { display: none !important; }
    /* ヘッダーCTA折返し対策: ヘッダー右側は CTA2つ(366px)+ナビ(582px)=948px 固定幅のため
       1215px 以下では1行に収まらない。renewal の design.css は 98行目の閾値を 1024px→1215px に
       修正済み (2026-07-23・design.css_260723b がバックアップ) だが、本番の design.css は未修正のため、
       本番へこのユニットを先行昇格しても崩れないよう同内容をここにも保持する (重複しても挙動は同一)。
       本番 design.css に同修正が入ったらこのブロックは削除してよい */
    @media (min-width: 1025px) and (max-width: 1215px) {
      #fsSiteheader #fsNavGlobal .fsNavGlobalMenu .ctaBtn { display: none; }
    }

    #fsPilates {
      --wine: #7a2b3f;
      --wine-dark: #5a1e2e;
      --wine-pale: #f1e2e5;
      --navy: #232a3f;
      --navy-dark: #1a2033;
      --gold: #b18f3e;
      /* 文字用の濃いゴールド。--gold は白地で 3.06 / ミスト地で 2.79 しかなく
         小さい文字(WCAG AA 4.5)を満たさない。罫線・枠・アイコンは --gold のまま、
         テキストにはこちらを使う (白地 5.13 / ミスト地 4.68 で両方クリア) */
      --gold-text: #856a2a;
      --gold-light: #e9d9ae;
      --gold-pale: #f8f0db;
      --mist: #f7f4f0;
      --paper: #ffffff;
      --text: #2c2c34;
      --muted: #6c6a72;
      --line: #ded8d2;
      --line-green: #06c755;
      --pending-bg: #fff1a8;
      --pending-border: #d8b739;
      --pending-text: #665100;
      --font-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "MS PMincho", serif;
      --font-sans: "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
      --shadow-sm: 0 10px 28px rgba(33, 27, 30, 0.08);
      --shadow-md: 0 20px 50px rgba(33, 27, 30, 0.13);
      /* 角丸は4段階＋円/ピルのみ。中間値を増やすと反復の精度が落ちて上質感が削がれる */
      --radius-xs: 6px;
      --radius-sm: 10px;
      --radius-md: 18px;
      --radius-lg: 28px;
      --radius-pill: 999px;
      --header-height: 68px;

      /* ---- タイプスケール (375px→1440px で流動。SP最小12pxを厳守) ----
         19種類あった場当たりのサイズをこの9段階に統合し、見出しと本文の
         比率を固定することで訴求の強弱を機械的に担保する */
      --fs-caption:  clamp(12px, 11.65px + 0.09vw, 13px);   /* 注釈・ラベル・キッカー */
      --fs-small:    clamp(13px, 12.65px + 0.09vw, 14px);   /* 補助テキスト・チップ */
      --fs-body:     clamp(15px, 14.65px + 0.09vw, 16px);   /* 本文 */
      --fs-lead:     clamp(16px, 14.94px + 0.28vw, 19px);   /* リード文 */
      --fs-h4:       clamp(18px, 16.59px + 0.38vw, 22px);   /* カード見出し(小) */
      --fs-h3:       clamp(21px, 18.54px + 0.66vw, 28px);   /* カード見出し */
      --fs-h2:       clamp(26px, 20.37px + 1.50vw, 42px);   /* セクション見出し */
      --fs-h1:       clamp(28px, 18.16px + 2.62vw, 58px);   /* ページ見出し */
      --fs-stat:     clamp(34px, 26.96px + 1.88vw, 54px);   /* 実績の数値 */
      --fs-stat-lg:  clamp(44px, 30.62px + 3.57vw, 82px);   /* 実績の数値(主役) */
      --fs-display:  clamp(46px, 25.58px + 5.45vw, 104px);  /* 100%保証の特大数字 */

      /* ---- 余白 (8pxグリッド) ---- */
      --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
      --sp-6: 32px; --sp-7: 40px; --sp-8: 56px; --sp-9: 72px; --sp-10: 96px;
      --sp-section: clamp(64px, 41.5px + 6.0vw, 112px);     /* セクション上下 */

      /* ---- 画像比率 (3種に限定して一貫性を出す) ---- */
      --ar-wide: 16 / 9;
      --ar-photo: 4 / 3;
      --ar-square: 1;
    }

    #fsPilates *, #fsPilates *::before, #fsPilates *::after { box-sizing: border-box; }

    /* ================================================================
       日本語組版
       ================================================================ */
    #fsPilates {
      /* 約物(、。「」“”（）)は全角枠に半角分のアキを持つため、そのままだと
         句読点や括弧の前後が間延びする。palt で字幅を詰めて字送りを整える */
      font-feature-settings: "palt" 1;
      /* 既定の line-break: auto では小書き仮名(ャュョッィ)と長音符(ー)が行頭に
         来てしまう(「コミュニテ/ィ」)。strict で行頭禁則を強める */
      line-break: strict;
      /* 対応ブラウザでは行頭・行末の約物のアキも詰める(未対応環境では無視される) */
      text-spacing-trim: trim-start;
    }

    /* 見出しとボタンは文節単位で折り返す。
       日本語は単語の区切りがないためブラウザは任意の文字間で改行でき、
       放置すると「ありませ/ん」「フリーラン/ス」「見/る」のように語が割れる。
       keep-all で文字間改行を禁じ、テンプレート側の <wbr>(文節境界)だけを
       改行位置として許可する。1文節が行幅を超える例外時は
       overflow-wrap: anywhere が保険として働き、はみ出しを防ぐ */
    #fsPilates :is(h1, h2, h3, .plt-btn, .plt-diagnosis-question, .plt-diagnosis-option) {
      word-break: keep-all;
      overflow-wrap: anywhere;
    }

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

    #fsPilates {
      color: var(--text);
      background: var(--paper);
      font-family: var(--font-sans);
      font-size: var(--fs-body);
      line-height: 1.9;
      letter-spacing: 0.035em;
      /* 全幅化(width:100vw)や斜め配置のはみ出しを横スクロールにせず切り落とす。
         clip はスクロールコンテナを作らないので固定CTA(position:fixed)に影響しない */
      overflow-x: clip;
    }

    :where(#fsPilates) img, :where(#fsPilates) svg { display: block; max-width: 100%; }
    :where(#fsPilates) button, :where(#fsPilates) input, :where(#fsPilates) select, :where(#fsPilates) textarea { font: inherit; }
    :where(#fsPilates) button, :where(#fsPilates) a { -webkit-tap-highlight-color: transparent; }
    :where(#fsPilates) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
    :where(#fsPilates) :where(p, h1, h2, h3, h4, ul, ol, dl, dd) { margin-top: 0; }
    :where(#fsPilates) :where(p, ul, ol):last-child { margin-bottom: 0; }
    /* 注釈番号(※1等)は注釈へのリンクなので、小さいラベル内でも10pxを下回らせない */
    :where(#fsPilates) sup { font-size: max(10px, 0.6em); line-height: 0; vertical-align: super; }

    :where(#fsPilates) :focus-visible {
      outline: 3px solid rgba(177, 143, 62, 0.8);
      outline-offset: 4px;
      border-radius: var(--radius-xs);
    }

    .plt-skip-link {
      position: fixed;
      z-index: 9999;
      top: 8px;
      left: 8px;
      transform: translateY(-150%);
      padding: 10px 16px;
      color: #fff;
      background: var(--navy-dark);
      border-radius: var(--radius-xs);
      transition: transform 0.2s ease;
    }
    .plt-skip-link:focus { transform: translateY(0); }

    .plt-container {
      width: min(100% - 40px, 1180px);
      margin-inline: auto;
    }

    .plt-section {
      position: relative;
      padding: var(--sp-section) 0;
    }

    .plt-section--mist { background: var(--mist); }
    .plt-section--white { background: var(--paper); }
    .plt-section--navy {
      color: #fff;
      background:
        radial-gradient(circle at 88% 10%, rgba(177, 143, 62, 0.14), transparent 32%),
        radial-gradient(circle at 8% 94%, rgba(122, 43, 63, 0.25), transparent 28%),
        var(--navy-dark);
      overflow: hidden;
    }

    .plt-section--navy::before,
    .plt-closing::before {
      content: "";
      position: absolute;
      width: 330px;
      height: 330px;
      border: 1px solid rgba(233, 217, 174, 0.16);
      border-radius: 50%;
      right: -210px;
      top: 90px;
      pointer-events: none;
    }

    .plt-section--navy::after,
    .plt-closing::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      border: 1px solid rgba(233, 217, 174, 0.14);
      border-radius: 50%;
      left: -54px;
      bottom: 120px;
      pointer-events: none;
    }

    .plt-section-head {
      max-width: 820px;
      margin-bottom: 36px;
    }

    .plt-kicker {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      /* セクションの案内板なので可読性を優先し、文字は濃いゴールドを使う */
      color: var(--gold-text);
      font-size: var(--fs-caption);
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: 0.22em;
      text-transform: uppercase;
    }

    /* 装飾の罫は明るいゴールドのまま(面・線は色の華やかさを優先) */
    .plt-kicker::before {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--gold);
    }

    /* 暗い面では逆に濃いゴールドが沈むため明るいゴールドに戻す
       (--gold-light on --navy-dark = 11.55)。基本ルールより後ろに置くこと */
    .plt-section--navy .plt-kicker,
    .plt-closing .plt-kicker { color: var(--gold-light); }
    .plt-section--navy .plt-kicker::before,
    .plt-closing .plt-kicker::before { background: var(--gold-light); }

    .plt-section-title {
      margin-bottom: 16px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h2);
      font-weight: 600;
      line-height: 1.42;
      letter-spacing: 0.025em;
      text-wrap: balance;
    }

    .plt-section--navy .plt-section-title,
    .plt-closing .plt-section-title { color: #fff; }

    .plt-lead {
      /* 日本語の可読域は25〜40字。820px(=51字)は長すぎたのでem基準で約39字に絞る */
      max-width: 40em;
      color: var(--muted);
      font-size: var(--fs-body);
      line-height: 2;
    }

    .plt-section--navy .plt-lead { color: rgba(255, 255, 255, 0.75); }

    .plt-pending {
      display: inline-block;
      padding: 0.04em 0.45em 0.08em;
      color: var(--pending-text);
      background: var(--pending-bg);
      border: 1px solid var(--pending-border);
      border-radius: var(--radius-xs);
      font-family: var(--font-sans);
      font-size: 0.78em;
      font-weight: 800;
      line-height: 1.55;
      letter-spacing: 0.02em;
      vertical-align: 0.08em;
      white-space: normal;
    }

    .plt-pending--block {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
    }

    .plt-mock-notice {
      position: relative;
      z-index: 1010;
      padding: 8px 12px;
      color: rgba(255, 255, 255, 0.92);
      background: var(--navy-dark);
      font-size: var(--fs-caption);
      line-height: 1.6;
      text-align: center;
      letter-spacing: 0.04em;
    }

    .plt-mock-notice .plt-pending { margin-inline: 3px; }

    .plt-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 54px;
      padding: 13px 22px;
      border: 1px solid transparent;
      border-radius: var(--radius-pill);
      font-size: var(--fs-body);
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: 0.055em;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .plt-btn::after {
      content: "→";
      font-size: 1.1em;
      transition: transform 0.2s ease;
    }

    .plt-btn:hover { transform: translateY(-2px); }
    .plt-btn:hover::after { transform: translateX(3px); }

    /* 主要CTAは平面のベタ塗りだと弱いので、奥行き(グラデ)・ゴールドの縁・
       立ち上がった影・上端のハイライトで「押せる」見え方にする */
    .plt-btn--primary {
      position: relative;
      color: #fff;
      background: linear-gradient(140deg, #96374f 0%, var(--wine) 45%, var(--wine-dark) 100%);
      border-color: rgba(233, 217, 174, 0.5);
      box-shadow:
        0 10px 24px rgba(122, 43, 63, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
      overflow: hidden;
      isolation: isolate;
    }
    .plt-btn--primary::before {   /* ホバーで光沢が横切る */
      content: "";
      position: absolute;
      z-index: -1;
      inset: -50% -30%;
      width: 35%;
      /* 白38%だと白文字の下地が明るくなり、通過中のコントラストが 2.88 まで落ちる。
         16%にして最悪値でも 4.5 (WCAG AA) を確保する */
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
      transform: translateX(-160%) rotate(18deg);
      transition: transform .55s ease;
    }
    /* hover は「.plt-btn--ghost の通常状態」に入れ替える。
       ワイン地のまま明るくする案は、白文字の下地が明るくなるぶん必ず
       コントラストが落ちる (光沢38%で 2.88 / 16%でも 4.79 が上限) 。
       白地＋ワイン文字なら 9.35 出るので、押せる感と可読性を同時に満たせる */
    .plt-btn--primary:hover {
      color: var(--wine);
      background: #fff;
      border-color: rgba(122, 43, 63, 0.6);
      box-shadow: 0 14px 30px rgba(122, 43, 63, 0.24);
    }
    /* 白地になるので白い光沢は走らせない (白文字前提の演出) */
    .plt-btn--primary:hover::before { opacity: 0; }
    .plt-btn--primary:active { transform: translateY(0); }

    .plt-btn--ghost {
      color: var(--wine);
      background: transparent;
      border-color: rgba(122, 43, 63, 0.6);
    }
    .plt-btn--ghost:hover { color: #fff; background: var(--wine); border-color: var(--wine); }

    .plt-btn--outline {
      color: var(--navy);
      background: #fff;
      border-color: var(--line);
      border-radius: var(--radius-sm);
      box-shadow: 0 5px 14px rgba(35, 42, 63, 0.04);
    }
    .plt-btn--outline:hover { color: var(--wine); border-color: var(--wine); }

    .plt-btn--white {
      color: var(--wine-dark);
      background: #fff;
      box-shadow: 0 12px 30px rgba(19, 11, 14, 0.24);
    }
    .plt-btn--white:hover { background: var(--gold-pale); }

    /* ---- 主役CTA (クロージング) ----
       暗いワイン背景の上に置く白いピル。金のグラデーション枠と外側のグローで
       「押す場所はここ」を一目で分かるようにする。
       枠は border-box に金グラデーションを敷き、面は padding-box に白を敷く二層方式 */
    .plt-cta-hero {
      position: relative;
      display: block;
      width: 100%;
    }

    .plt-btn--hero {
      width: 100%;
      min-height: 74px;
      gap: 14px;
      padding: 16px clamp(20px, 3vw, 34px);
      border: 3px solid transparent;
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, #f6e6bd 0%, #e9d9ae 22%, #b18f3e 52%, #f4e8c6 78%, #cbab63 100%) border-box;
      box-shadow:
        0 0 0 1px rgba(233, 217, 174, 0.45),
        0 0 30px 6px rgba(233, 217, 174, 0.32),
        0 18px 42px rgba(15, 8, 11, 0.34);
      font-size: var(--fs-lead);
    }
    .plt-btn--hero:hover {
      background:
        linear-gradient(var(--gold-pale), var(--gold-pale)) padding-box,
        linear-gradient(135deg, #f6e6bd, #e9d9ae 22%, #b18f3e 52%, #f4e8c6 78%, #cbab63 100%) border-box;
      box-shadow:
        0 0 0 1px rgba(233, 217, 174, 0.6),
        0 0 38px 8px rgba(233, 217, 174, 0.42),
        0 20px 46px rgba(15, 8, 11, 0.36);
    }
    .plt-btn--hero .plt-btn-label { letter-spacing: 0.03em; }

    /* ---- 明るい面に置くCTA (本文のCTA帯・追従CTA共通) ----
       ワインのグラデーション面＋金の縁＋LINEバッジ＋白い円形矢印。
       クロージングの白ピル(.plt-btn--hero)は暗い背景専用なので、
       明るい背景ではこちらを使う */
    .plt-btn--cta {
      gap: 12px;
      min-height: 64px;
      padding: 12px 14px 12px 18px;
      background: linear-gradient(140deg, #b23a58 0%, #96374f 30%, var(--wine) 66%, var(--wine-dark) 100%);
      border: 2px solid rgba(177, 143, 62, 0.62);
      box-shadow:
        0 10px 24px rgba(122, 43, 63, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    }
    .plt-btn--cta:hover {
      border-color: var(--gold);
      box-shadow:
        0 14px 30px rgba(122, 43, 63, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    /* .plt-btn::after のテキスト矢印は使わない (円形矢印と二重になる) */
    .plt-btn--cta::after { content: none; }
    .plt-btn--cta .plt-btn-label { letter-spacing: 0.02em; }
    /* 間隔は gap で取るので、LINEバッジ側の margin は消す (二重に空くため) */
    .plt-btn--cta .plt-line-mini,
    .plt-mobile-cta .plt-line-mini { margin-right: 0; }

    /* 白い円の中に矢印。押せることを形で示す */
    .plt-cta-arrow {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      color: var(--wine);
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(15, 8, 11, 0.24);
      font-size: var(--fs-body);
      font-weight: 800;
      line-height: 1;
    }

    /* 特典リボン。ボタンの右上に半分かかる位置に置き、左端に切り込みを入れて
       「帯が出ている」形にする */
    .plt-cta-ribbon {
      position: absolute;
      z-index: 2;
      top: -14px;
      right: clamp(-6px, -0.4vw, 0px);
      padding: 7px 16px 7px 26px;
      color: var(--wine-dark);
      background: linear-gradient(105deg, #f7ecd0, #e9d9ae 42%, #cdad63);
      border-radius: var(--radius-xs);
      box-shadow: 0 6px 14px rgba(15, 8, 11, 0.28);
      font-size: var(--fs-caption);
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: 0.03em;
      white-space: nowrap;
      clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
    }

    .plt-btn--line {
      color: #fff;
      background: var(--line-green);
      box-shadow: 0 12px 26px rgba(6, 199, 85, 0.2);
    }
    .plt-btn--line:hover { background: #05ad4b; }

    .plt-btn--small {
      min-height: 44px;
      padding: 10px 17px;
      font-size: var(--fs-small);
    }

    .plt-button-row {
      display: grid;
      gap: 12px;
    }

    .plt-microcopy {
      margin-top: 12px;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.75;
    }

    /* ================================================================
       ファーストビュー
       全幅のヒーロー画像の上に、左寄せでテキストを直接のせる。
       白パネルもスクリムも敷かない (ブランドの「明るい・爽やか」を保つため)。
       成立条件は写真側にあり、fv-hero-left.jpg は元画像の右24%を落として
       人物をフレームの右43〜74%へ寄せた切り抜き。左側の無地の壁が
       文字を置く面になる。写真を差し替えるときは必ず
       「濃い文字を置く領域の輝度」を実測してから決めること
       (紺 #1a2033 なら背景の相対輝度 0.24 以上で WCAG AA 4.5:1)。

       絶対配置は使わず、画像の高さぶんだけ負マージンで本文を引き上げ、
       パネルに min-height を持たせて写真と同じ高さに揃えている
       (こうするとパネル直後の帯が必ず写真の外側に出る)
       ================================================================ */
    .plt-hero {
      /* 文字ブロック(約480px)が写真の上半分に収まり、リフォーマーの脚部
         (写真の y62〜68%) にかからない高さ。狭い画面では box 比が画像比 1.70 を
         下回り cover が横をトリミングするが、object-position:0% で左を守る */
      --hero-media-h: clamp(460px, 66vw, 780px);
      --hero-slant: clamp(26px, 3.4vw, 56px);   /* 画像下辺の斜めカット量 */
      position: relative;
      padding-bottom: var(--sp-7);
      background: var(--paper);
    }

    .plt-hero-topbar { padding: 14px 0 12px; }

    .plt-breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.5;
    }
    .plt-breadcrumb a { text-decoration: none; }
    .plt-breadcrumb a:hover { color: var(--wine); text-decoration: underline; }

    /* コンテナの内側にありながら全幅へ引き伸ばす。
       100vw はスクロールバーぶん溢れるが #fsPilates の overflow-x: clip で吸収する
       (clip はスクロールコンテナを作らないので position:fixed の追従CTAに影響しない) */
    .plt-hero-media {
      position: relative;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      height: var(--hero-media-h);
      /* 下辺を右上がりに切って、水平線の連続を断ち切る。
         パネルは右側にあるので、右ほど画像が浅くなる=重なりが際立つ */
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-slant)), 0 100%);
    }

    /* picture は出し分けのための入れ物でしかないので、レイアウト上は無かった
       ことにして .plt-hero-photo を .plt-hero-media の直接の子として扱う */
    .plt-hero-media picture { display: contents; }

    /* 1040px以上は写真の上に濃い文字を直接のせるレイアウト。
       白樺・石畳は明るいが、リフォーマーの黒い部品に本文末尾がかかると
       コントラストが落ちるため、文字面だけを白のグラデーションで持ち上げる。
       ・暗いスクリムは使わない (明るい/爽やか というブランド像に反するため)
       ・右端まで白くすると写真が死ぬので 64% で完全に透明へ抜く
       ・文字は .plt-hero-panel 側 (DOM上あと) なのでこの ::after の上に載る */
    @media (min-width: 1040px) {
      .plt-hero-media::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(96deg,
          rgba(255, 255, 255, 0.80) 0%,
          rgba(255, 255, 255, 0.75) 34%,
          rgba(255, 255, 255, 0.64) 48%,
          rgba(255, 255, 255, 0.22) 58%,
          rgba(255, 255, 255, 0) 68%);
      }
    }

    .plt-hero-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 横位置は 0% 固定。box 比が画像比 1.70 を下回る幅では cover が横を
         トリミングするので、文字を置く左側(無地の壁)を必ず残して右から削る */
      object-position: 0% 34%;
    }

    /* スクリム(白被せ・黒被せ)は敷かない。写真そのものの明るさを訴求に使う。
       可読性は「文字を無地の壁の上にだけ置く」ことで担保している */

    .plt-hero-panel {
      position: relative;
      z-index: 1;
      /* ボタン2つ(約231+220+gap12=463px)が1行に収まる幅を確保する。
         テキストは各要素の max-width で無地ゾーン内に留めるので、
         パネル自体はボタン基準で決めてよい */
      width: min(600px, 52%);
      margin-right: auto;                             /* 左寄せ */
      /* 画像の高さぶん引き上げて重ね、min-height で写真と同じ高さに揃える。
         パネルが写真より背高になった場合ははみ出したぶんセクションが伸びる */
      margin-top: calc(var(--hero-media-h) * -1);
      min-height: var(--hero-media-h);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: clamp(18px, 1.8vw, 26px) clamp(16px, 2vw, 28px) clamp(24px, 3vw, 40px) 0;
    }

    .plt-pma-lockup {
      display: flex;
      /* バッジの上辺を右テキストの1行目に揃える(中央揃えだと上下に段差が出る) */
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 22px;
    }

    .plt-pma-emblem {
      position: relative;
      display: grid;
      flex: 0 0 78px;
      place-items: center;
      width: 78px;
      aspect-ratio: 1;
      color: var(--navy-dark);
      background: radial-gradient(circle, #f9f0d6 0 54%, transparent 55%), conic-gradient(from 0deg, #b18f3e, #e9d9ae, #9b7527, #e9d9ae, #b18f3e);
      border-radius: 50%;
      box-shadow: 0 8px 20px rgba(126, 93, 28, 0.2);
    }

    .plt-pma-emblem::before {
      content: "";
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(90, 30, 46, 0.22);
      border-radius: 50%;
    }

    .plt-pma-emblem strong {
      position: relative;
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      line-height: 1;
      letter-spacing: 0.08em;
    }

    .plt-pma-emblem span {
      position: absolute;
      bottom: 14px;
      font-size: 6.5px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .plt-pma-copy strong {
      display: block;
      margin-bottom: 3px;
      color: var(--gold-text);
      font-family: var(--font-serif);
      font-size: var(--fs-body);
      letter-spacing: 0.05em;
    }

    /* 文字間改行を禁じ、<wbr>を入れた「・」の後ろだけで折り返す
       (放置すると「〜による」の「る」だけが次行に落ちる) */
    .plt-pma-copy p {
      word-break: keep-all;
      overflow-wrap: anywhere;
      margin-bottom: 0;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.7;
    }

    .plt-hero h1 {
      /* 写真の無地ゾーン(左43%)からはみ出さないよう上限を持たせる */
      max-width: min(480px, 42vw);
      margin-bottom: 14px;
      color: var(--navy-dark);
      font-family: var(--font-serif);
      font-size: var(--fs-h1);
      font-weight: 600;
      line-height: 1.43;
      letter-spacing: 0.025em;
    }

    /* 1039px以下(縦積みレイアウト)は本文幅が広いので2行組み。
       1040px以上は写真の上に置くため3行組みにして1行を短くする */
    .plt-hero h1 .plt-br-narrow { display: none; }

    .plt-hero-highlight {
      position: relative;
      display: inline-block;
      color: var(--wine);
      white-space: nowrap;
    }

    .plt-hero-highlight::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.03em;
      height: 5px;
      background: linear-gradient(90deg, var(--gold), var(--gold-light));
      border-radius: var(--radius-pill);
      transform: skewX(-12deg);
      opacity: 0.9;
    }

    .plt-hero-sub {
      max-width: 690px;
      margin-bottom: 22px;
      color: #48464f;
      font-size: var(--fs-body);
      line-height: 2;
    }

    .plt-trust-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
    }

    .plt-trust-badges li {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 7px 12px;
      color: var(--navy-dark);
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(177, 143, 62, 0.42);
      border-radius: var(--radius-pill);
      font-size: var(--fs-caption);
      font-weight: 800;
      line-height: 1.4;
      backdrop-filter: blur(8px);
    }

    .plt-trust-badges li::before {
      content: "✓";
      display: grid;
      place-items: center;
      width: 15px;
      height: 15px;
      color: #fff;
      background: var(--gold);
      border-radius: 50%;
      font-size: 9px;
    }

    /* PMAロックアップは写真の上に白いプレートとして乗せる。
       権威性を示す要素なので傾けない (斜めは不安定さの記号になり権威が損なわれる) */
    .plt-hero-panel .plt-pma-lockup {
      align-items: center;
      width: fit-content;
      margin-bottom: var(--sp-3);
      padding: 9px var(--sp-4) 9px var(--sp-3);
      background: #fff;
      border-left: 3px solid var(--gold);
      border-radius: var(--radius-xs);
      box-shadow: var(--shadow-sm);
    }
    /* 90px = バッジの高さ(90 x 165/192 = 77px)が右のテキストブロックの高さと一致する値。
       プレートの高さは 77+9+9 = 95px のまま変わらないので、FV の他要素に影響しない */
    .plt-hero-panel .plt-pma-badge-img { width: 90px; }

    /* 写真の上に置く本文・補足。--muted (#6c6a72) は壁の輝度に対して 2.84 しか
       出ないので、FV に限って濃くする */
    .plt-hero-panel .plt-hero-sub {
      max-width: min(490px, 44vw);
      margin-bottom: 16px;
      color: #3a3843;
    }
    /* リフォーマーの脚部 (写真の x28〜40% / y62〜68%) にかからないよう幅を絞る */
    .plt-hero-panel .plt-microcopy {
      max-width: min(320px, 30vw);
      color: #3a3843;
    }
    .plt-hero-panel .plt-btn { min-height: 50px; padding: 12px 16px; }
    /* 写真の上では線だけのボタンは弱いので白い面を持たせて自立させる */
    .plt-hero-panel .plt-btn--ghost { background: rgba(255, 255, 255, 0.92); }
    /* 上の行(特異性0,2,0)は `.plt-btn--ghost:hover`(同0,2,0)より後ろにあるため
       hover の背景指定を打ち消してしまう。結果 hover で文字が #fff・背景が白のまま
       になり文字が消えていた。ここで hover を明示的に上書きする (特異性0,3,0) */
    .plt-hero-panel .plt-btn--ghost:hover {
      color: #fff;
      background: var(--wine);
      border-color: var(--wine);
    }

    /* 写真の下の帯。パネルに詰め込むと高さが写真を超えて崩れるため、
       補足文とバッジはここへ逃がす */
    .plt-hero-underband {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px clamp(20px, 2.6vw, 36px);
      margin-top: clamp(20px, 2.4vw, 32px);
    }
    .plt-hero-underband .plt-hero-sub {
      flex: 1 1 380px;
      max-width: 620px;
      margin: 0;
      font-size: var(--fs-small);
      line-height: 1.9;
    }
    .plt-hero-underband .plt-trust-badges { margin: 0; }

    .plt-photo-placeholder {
      position: relative;
      display: grid;
      min-height: 330px;
      place-items: end start;
      padding: 20px;
      color: #fff;
      background:
        linear-gradient(145deg, rgba(35, 42, 63, 0.14), rgba(90, 30, 46, 0.68)),
        radial-gradient(circle at 28% 24%, #e9d9ae, transparent 36%),
        linear-gradient(135deg, #d3b7b1, #7a5261 52%, #232a3f);
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      isolation: isolate;
    }

    .plt-photo-placeholder::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 76%;
      height: 18%;
      left: 12%;
      bottom: 27%;
      border: 3px solid rgba(255, 255, 255, 0.42);
      border-radius: var(--radius-md);
      transform: perspective(400px) rotateX(58deg) rotateZ(-6deg);
      box-shadow: 0 34px 0 -25px rgba(255, 255, 255, 0.2);
    }

    .plt-photo-placeholder::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 32%;
      aspect-ratio: 1;
      right: 12%;
      top: 18%;
      border: 2px solid rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      box-shadow: -120px 70px 0 -46px rgba(255, 255, 255, 0.15);
    }

    .plt-photo-label {
      display: inline-flex;
      flex-direction: column;
      gap: 4px;
      max-width: 310px;
      padding: 12px 14px;
      background: rgba(26, 32, 51, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: var(--radius-sm);
      backdrop-filter: blur(8px);
    }

    .plt-photo-label strong {
      color: var(--gold-light);
      font-size: var(--fs-caption);
      letter-spacing: 0.14em;
    }

    .plt-photo-label span {
      font-size: var(--fs-caption);
      line-height: 1.6;
    }

    .plt-results-grid {
      display: grid;
      gap: 12px;
    }

    .plt-result-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 156px;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: 0 8px 26px rgba(36, 31, 33, 0.05);
      overflow: hidden;
    }

    .plt-result-card::after {
      content: "";
      position: absolute;
      width: 72px;
      height: 72px;
      right: -30px;
      bottom: -34px;
      border: 1px solid rgba(177, 143, 62, 0.3);
      border-radius: 50%;
    }

    /* ---- 主役カード(レッスンデビュー100%保証) ----
       ページで最も強いメッセージだが数字だけでは間が持たないため、
       注釈※3にあった保証の中身をカード内へ引き上げて構成する。
       金の同心円を敷いて「認定・保証」の格を出す */
    /* 背景に実習写真を敷き、ワインのグラデーションを重ねる。
       テキストは最右端がカード幅の69%までなので、写真は右へ寄せて人物を見せる。
       白文字のコントラストは合成後のピクセルで実測して決めた
       (最も明るい部分でも AA 4.5 を大きく上回る) */
    .plt-result-card--featured {
      color: #fff;
      background:
        radial-gradient(circle at 82% 16%, rgba(233, 217, 174, 0.16), transparent 42%),
        linear-gradient(115deg,
          rgba(74, 22, 36, 0.94) 0%,
          rgba(90, 30, 46, 0.89) 45%,
          rgba(122, 43, 63, 0.74) 78%,
          rgba(122, 43, 63, 0.64) 100%),
        /* CSS からの相対パス (pilates/ → pilates/img/)。
           差し替え時は ?v= を上げること */
        url("img/result-featured-bg.webp?v=260726s") 72% center / cover no-repeat;
      border-color: var(--wine-dark);
      box-shadow: 0 16px 36px rgba(122, 43, 63, 0.23);
    }

    .plt-result-card--featured::after {
      content: "";
      position: absolute;
      z-index: 0;
      right: -90px;
      top: -70px;
      width: 300px;
      height: 300px;
      border: 1px solid rgba(233, 217, 174, 0.28);
      border-radius: 50%;
      box-shadow: inset 0 0 0 18px rgba(233, 217, 174, 0.07);
      display: block;
    }

    .plt-result-card--featured > * { position: relative; z-index: 1; }

    .plt-result-hero {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 var(--sp-2);
    }

    .plt-featured-lead {
      max-width: 30em;
      margin: var(--sp-5) 0 0;
      padding-top: var(--sp-5);
      border-top: 1px solid rgba(233, 217, 174, 0.4);
      color: rgba(255, 255, 255, 0.9);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.8;
    }

    .plt-featured-points {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
      margin: var(--sp-5) 0 0;
      padding: 0;
      list-style: none;
    }
    .plt-featured-points li {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      padding: 8px 14px;
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(233, 217, 174, 0.45);
      border-radius: var(--radius-pill);
      font-size: var(--fs-caption);
      font-weight: 700;
      line-height: 1.5;
    }
    .plt-featured-points li::before {
      content: "✓";
      color: var(--gold-light);
      font-weight: 900;
    }

    .plt-result-label {
      margin-bottom: 8px;
      color: var(--muted);
      font-size: var(--fs-caption);
      font-weight: 800;
      letter-spacing: 0.08em;
    }
    /* 主役カードは数字が --fs-stat-lg (最大82px) まで大きいので、
       ラベルを --fs-caption(13px) のままにすると何の数字なのかが読み落とされる。
       この1枚だけラベルを一段上げる (他の3枚は小さいカードなので caption のまま) */
    .plt-result-card--featured .plt-result-label {
      margin-bottom: 12px;
      color: rgba(255, 255, 255, 0.82);
      font-size: var(--fs-lead);
      letter-spacing: 0.1em;
    }

    .plt-result-number {
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-stat);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: 0.01em;
    }
    .plt-result-card--featured .plt-result-number { color: #fff; }

    .plt-result-suffix {
      margin-left: 2px;
      font-family: var(--font-serif);
      font-size: var(--fs-lead);
      font-weight: 600;
      white-space: nowrap;   /* 「13,000人以/上」のように単位が割れるのを防ぐ */
    }

    /* ---- 実績カードのビジュアル ----
       数字だけでは寂しいため、カード下部に固定高のスロットを設けて
       イラスト・写真・ロゴを配置する。
       媒体ごとに縦横比が違うので、高さを揃えたうえで
       「仕上がりの横幅が概ね150〜175pxに収まる」よう2段階の高さを使い、
       4枚が同じ重さに見えるようにしている。
         イラスト(1.80) 84px → 151px  /  写真(16:9) 84px → 149px
         Rintosull(2.96) 52px → 154px /  PMA(3.33) 52px → 173px          */
    .plt-result-visual {
      display: flex;
      align-items: center;
      flex: 0 0 auto;          /* グリッド行高に押されて潰れないよう縮小を禁止する */
      margin-top: auto;
      /* #fsPilates 配下は border-box 固定のため、上パディング16px + 実効84px = 100px */
      height: 100px;
      padding-top: var(--sp-4);
    }

    .plt-result-icon {                    /* 卒業生: 人物群イラスト */
      width: auto;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      object-position: left center;
    }

    .plt-result-photo {                   /* リフォーマー: 実写サムネイル */
      width: auto;
      height: 100%;
      aspect-ratio: var(--ar-wide);
      object-fit: cover;
      border-radius: var(--radius-sm);
    }

    .plt-result-logo {                    /* Rintosull / PMA ロゴ (マークなので一段小さく) */
      width: auto;
      max-width: 100%;
      height: 52px;
      object-fit: contain;
      object-position: left center;
    }

    /* カード右下の飾り円がビジュアルに重なるため、画像を持つカードでは消す */
    .plt-result-card:has(.plt-result-visual)::after { display: none; }

    .plt-footnotes {
      margin-top: 30px;
      padding: 18px 18px 16px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.66);
      border-left: 3px solid var(--gold);
      font-size: var(--fs-caption);
      line-height: 1.85;
    }

    .plt-footnotes p { margin-bottom: 7px; }

    /* ---- コースと費用: 比較表の前に置くレッスン風景 ----
       SPでは比較表の thead が display:none になり、コース名と対象者が画面から
       消える。ここで写真とセットで見せることで、SPでテキストが延々と続く
       見え方も同時に解消する */
    .plt-course-visuals {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--sp-4);
      margin-top: var(--sp-5);
    }

    .plt-course-visual {
      display: flex;
      flex-direction: column;
      margin: 0;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    /* 支給画像は複数カットの組写真 (ベーシック 877x496 / コンプリヘンシブ 840x400) で、
       余白のない全面レイアウトのため cover で切ると端のカットが欠ける。
       共通の 16:9 枠に contain で収めると比率差 (1.77 / 2.10) が上下の余白になるので、
       枠は持たせず画像の比率そのままでカード幅いっぱいに敷く。
       2枚で生じる高さの差は figcaption 側で吸収する (下記) */
    .plt-course-visual img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* flex:1 で余りを吸収し、テキストは中央に置く。
       これで画像の高さが2枚で違ってもカードの高さと下端が揃う
       (align-items:start で逃げるとカード高さが不揃いになる) */
    .plt-course-visual figcaption {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      padding: var(--sp-3) var(--sp-4) var(--sp-4);
      border-top: 1px solid var(--line);
    }

    .plt-course-visual-name {
      display: block;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      font-weight: 700;
      line-height: 1.5;
    }

    .plt-course-visual-sub {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.7;
    }

    /* 639px以下は横並びだとカードが276pxまで痩せるので縦積みにする */
    @media (max-width: 639px) {
      .plt-course-visuals { grid-template-columns: 1fr; gap: var(--sp-3); }
    }

    .plt-table-wrap {
      margin: 28px -20px 0;
      padding: 0 20px 10px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: thin;
    }

    .plt-course-table {
      width: 900px;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
    }

    .plt-course-table th,
    .plt-course-table td {
      padding: 18px 16px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      line-height: 1.75;
    }

    .plt-course-table tr:last-child th,
    .plt-course-table tr:last-child td { border-bottom: 0; }
    .plt-course-table th:last-child,
    .plt-course-table td:last-child { border-right: 0; }

    .plt-course-table thead th {
      color: #fff;
      background: var(--navy);
      font-size: var(--fs-small);
      text-align: left;
    }

    .plt-course-table thead th:first-child {
      width: 150px;
      color: var(--gold-light);
      background: var(--navy-dark);
    }

    .plt-course-table thead th:nth-child(2) { background: var(--wine); }
    .plt-course-table tbody th {
      position: sticky;
      left: 0;
      z-index: 1;
      width: 150px;
      color: var(--navy);
      background: #f5f1ed;
      font-size: var(--fs-small);
      text-align: left;
    }

    .plt-course-table td { width: 375px; font-size: var(--fs-small); }
    .plt-course-table ul { margin: 0; padding-left: 1.3em; }
    .plt-course-table .plt-price {
      color: var(--wine);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      font-weight: 700;
    }

    .plt-table-scroll-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 8px 0 0;
      color: var(--muted);
      font-size: var(--fs-caption);
    }
    .plt-table-scroll-hint::before { content: "↔"; color: var(--gold); }

    /* ---- 比較表: 767px以下は横スクロールをやめ、項目ごとのカードに組み替える ----
       900px幅の表を375pxに押し込むと文字が潰れて比較の本丸が最も読みにくくなるため。
       td の data-course 属性をラベルとして出力し、どちらのコースの値か明示する */
    @media (max-width: 767px) {
      .plt-table-wrap {
        margin: var(--sp-5) 0 0;
        padding: 0;
        overflow: visible;
      }
      .plt-course-table {
        display: block;
        width: 100%;
        background: transparent;
        border: 0;
        box-shadow: none;
      }
      .plt-course-table thead { display: none; }
      .plt-course-table tbody { display: block; }
      .plt-course-table tr {
        display: block;
        margin-bottom: var(--sp-4);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
      }
      .plt-course-table tbody th {
        position: static;
        display: block;
        width: 100%;
        padding: var(--sp-3) var(--sp-4);
        color: #fff;
        background: var(--navy);
        font-size: var(--fs-small);
      }
      .plt-course-table td {
        display: block;
        width: 100%;
        padding: var(--sp-4);
        border-right: 0;
        border-bottom: 1px solid var(--line);
        font-size: var(--fs-body);
      }
      .plt-course-table tr td:last-child { border-bottom: 0; }
      .plt-course-table td::before {
        content: attr(data-course);
        display: block;
        margin-bottom: var(--sp-1);
        color: var(--wine);
        font-size: var(--fs-caption);
        font-weight: 800;
        letter-spacing: 0.08em;
      }
      .plt-table-scroll-hint { display: none; }   /* 横スクロールしないので不要 */
    }

    .plt-course-note {
      margin-top: 17px;
      padding: 14px 16px;
      color: var(--muted);
      background: #fff;
      border: 1px dashed #cbbcae;
      border-radius: var(--radius-sm);
      font-size: var(--fs-small);
      line-height: 1.8;
    }

    .plt-course-links {
      display: grid;
      gap: 10px;
      margin-top: 24px;
    }

    .plt-cta-band {
      display: grid;
      gap: 18px;
      align-items: center;
      margin-top: 34px;
      padding: var(--sp-5);
      overflow: hidden;   /* 上辺リボンの角丸をカードの角に合わせて切る */
      background: linear-gradient(135deg, #fff, #f7eeee);
      border: 1px solid rgba(122, 43, 63, 0.16);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    .plt-cta-band p {
      margin: 0;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      font-weight: 600;
      line-height: 1.65;
    }

    .plt-diagnosis-shell {
      max-width: 900px;
      margin-inline: auto;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    .plt-diagnosis-progress {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      color: var(--gold-text);
      font-size: var(--fs-caption);
      font-weight: 800;
      letter-spacing: 0.13em;
    }

    .plt-diagnosis-progress::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, var(--gold), rgba(177, 143, 62, 0.12));
    }

    .plt-diagnosis-step[hidden],
    .plt-diagnosis-result[hidden] { display: none; }

    .plt-diagnosis-question {
      margin-bottom: 20px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      line-height: 1.55;
    }

    .plt-diagnosis-options { display: grid; gap: 12px; }

    .plt-diagnosis-option {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      min-height: 66px;
      padding: 15px 18px;
      color: var(--navy);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: var(--fs-small);
      font-weight: 800;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .plt-diagnosis-option::after { content: "→"; color: var(--gold); font-size: var(--fs-h4); }
    .plt-diagnosis-option:hover {
      background: var(--gold-pale);
      border-color: var(--gold);
      transform: translateY(-1px);
    }

    .plt-diagnosis-result {
      position: relative;
      padding: 24px;
      background: linear-gradient(145deg, var(--navy-dark), #303a58);
      border-radius: var(--radius-md);
      color: #fff;
      overflow: hidden;
    }

    .plt-diagnosis-result::after {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      right: -78px;
      top: -78px;
      border: 1px solid rgba(233, 217, 174, 0.25);
      border-radius: 50%;
    }

    .plt-diagnosis-result-label {
      margin-bottom: 8px;
      color: var(--gold-light);
      font-size: var(--fs-caption);
      font-weight: 800;
      letter-spacing: 0.16em;
    }

    .plt-diagnosis-result h3 {
      margin-bottom: 12px;
      font-family: var(--font-serif);
      font-size: var(--fs-h2);
      line-height: 1.45;
    }

    .plt-diagnosis-result p { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-small); }
    .plt-diagnosis-result .plt-button-row { margin-top: 20px; }
    .plt-diagnosis-result .plt-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
    .plt-diagnosis-result .plt-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

    .plt-diagnosis-reset {
      margin-top: 18px;
      padding: 0;
      color: rgba(255, 255, 255, 0.75);
      background: none;
      border: 0;
      font-size: var(--fs-caption);
      text-decoration: underline;
      text-underline-offset: 0.2em;
      cursor: pointer;
    }

    .plt-reasons-grid {
      display: grid;
      gap: 14px;
      /* 同じ行のカードは高さを揃える。写真のないカード(02)は
         PMA解説ボックスを伸ばして余りを埋めるので空洞にならない */
      align-items: stretch;
    }

    .plt-reason-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 24px;
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: var(--radius-md);
      overflow: hidden;
      backdrop-filter: blur(6px);
    }

    .plt-reason-number {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 14px;
      color: var(--gold-light);
      font-family: var(--font-serif);
      font-size: var(--fs-small);
      letter-spacing: 0.12em;
    }
    .plt-reason-number::after { content: ""; width: 34px; height: 1px; background: rgba(233, 217, 174, 0.55); }

    .plt-reason-card h3 {
      margin-bottom: 12px;
      color: #fff;
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      font-weight: 600;
      line-height: 1.55;
    }

    .plt-reason-card p { color: rgba(255, 255, 255, 0.73); font-size: var(--fs-small); }

    .plt-reason-card--hero { display: grid; gap: 22px; }

    .plt-reason-photo {
      min-height: 190px;
      border-radius: var(--radius-md);
      box-shadow: none;
    }

    .plt-pma-explainer {
      /* 隣のカード(写真あり)と高さを揃えるため、余った分をこのボックスが吸収する。
         中身は上下中央に置いて間延びして見せない */
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 18px;
      padding: 18px;
      color: rgba(255, 255, 255, 0.8);
      background: rgba(177, 143, 62, 0.11);
      border: 1px solid rgba(233, 217, 174, 0.28);
      border-radius: var(--radius-sm);
      font-size: var(--fs-caption);
      line-height: 1.8;
    }
    .plt-pma-explainer strong { color: var(--gold-light); }

    .plt-support-callout {
      position: relative;
      margin-bottom: 38px;
      padding: 30px 22px;
      text-align: center;
      background: linear-gradient(145deg, #fff, #fcf8ed);
      border: 2px solid var(--gold);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    .plt-support-callout::before,
    .plt-support-callout::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      border: 1px solid rgba(177, 143, 62, 0.2);
      border-radius: 50%;
    }
    .plt-support-callout::before { left: -72px; top: -72px; }
    .plt-support-callout::after { right: -72px; bottom: -72px; }

    .plt-support-eyebrow {
      margin-bottom: 10px;
      color: var(--gold-text);
      font-size: var(--fs-caption);
      font-weight: 800;
      letter-spacing: 0.13em;
    }

    .plt-support-main {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: center;
      gap: 6px 10px;
      margin-bottom: 14px;
      color: var(--wine-dark);
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      font-weight: 600;
      line-height: 1.3;
    }

    .plt-support-main .plt-big {
      font-size: var(--fs-display);
      line-height: 0.9;
      letter-spacing: -0.035em;
    }

    /* 559px以下は「100%」を独立した行にして中央に置く。
       flex-basis:100% を与えると前後のテキストが自動的に別行へ送られ、
       justify-content:center が効いて3行それぞれが中央揃えになる。
       ※基本ルールより後ろに置くこと(前に書くと後勝ちで無効になる) */
    @media (max-width: 559px) {
      .plt-support-main .plt-big { flex: 0 0 100%; }
    }

    .plt-support-note {
      max-width: 700px;
      margin: 0 auto;
      color: var(--muted);
      font-size: var(--fs-caption);
      line-height: 1.75;
    }

    .plt-support-flow {
      display: grid;
      gap: 14px;
      margin-bottom: 30px;
    }

    .plt-support-step {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);          /* 本文と写真の最低限のアキ */
      padding: 22px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }

    /* 支援フロー・働き方の4枚組は写真を同じ 16:9 枠に揃える。
       margin-top:auto で写真をカード下端に寄せるため、見出しや本文の行数が
       カードごとに違っても写真の上下位置が4枚で揃う
       (グリッドの既定 stretch で4枚の高さは同一になっている) */
    .plt-support-photo,
    .plt-work-photo {
      width: 100%;
      aspect-ratio: var(--ar-wide);
      height: auto;
      margin-top: auto;
      object-fit: cover;
      border-radius: var(--radius-sm);
    }

    .plt-support-step-label {
      margin-bottom: 8px;
      color: var(--wine);
      font-size: var(--fs-caption);
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .plt-support-step h3 {
      margin-bottom: 8px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.55;
    }
    .plt-support-step p { color: var(--muted); font-size: var(--fs-small); line-height: 1.75; }

    .plt-check-chips,
    .plt-skill-chips,
    .plt-career-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .plt-check-chips li,
    .plt-skill-chips li,
    .plt-career-chips li {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 36px;
      padding: 8px 12px;
      color: var(--navy);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      font-size: var(--fs-caption);
      font-weight: 700;
      line-height: 1.4;
    }
    .plt-check-chips li::before { content: "✓"; color: var(--wine); font-weight: 900; }

    .plt-workstyles {
      display: grid;
      gap: 12px;
      margin-top: 30px;
    }

    .plt-work-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      min-height: 142px;
      padding: 22px;
      background: linear-gradient(145deg, #fff, #faf7f3);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      overflow: hidden;
    }

    /* 写真を入れたので、飾りのゴースト数字は右上へ小さく退避させる
       (従来は右下＝写真と重なる位置にあった) */
    .plt-work-card::after {
      content: attr(data-number);
      position: absolute;
      right: 14px;
      top: 6px;
      color: rgba(177, 143, 62, 0.16);
      font-family: var(--font-serif);
      font-size: 44px;
      line-height: 1;
    }

    .plt-work-card h3 {
      position: relative;
      z-index: 1;
      margin-bottom: 8px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.55;
    }
    .plt-work-card p { position: relative; z-index: 1; color: var(--muted); font-size: var(--fs-small); }

    .plt-dummy-banner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      margin-bottom: 24px;
      padding: 12px 14px;
      color: #6c4e00;
      background: #fff7cf;
      border: 1px solid #e4c654;
      border-radius: var(--radius-sm);
      font-size: var(--fs-caption);
      font-weight: 700;
      line-height: 1.65;
    }

    .plt-dummy-badge {
      display: inline-grid;
      place-items: center;
      min-width: 58px;
      padding: 4px 8px;
      color: #fff;
      background: #8e6b00;
      border-radius: var(--radius-pill);
      font-size: 9px;
      letter-spacing: 0.12em;
    }

    .plt-voices-grid { display: grid; gap: 16px; }

    /* ---- 卒業生の声 ----
       声は年代のみの匿名アンケート(実データ)。実在人物の顔写真を添えると
       発言の誤帰属になるため写真は使わず、引用そのものを主役に組む */
    .plt-voice-card {
      display: flex;
      flex-direction: column;
      gap: var(--sp-4);
      padding: var(--sp-6) var(--sp-5) var(--sp-5);
      background: #fff;
      border: 1px solid var(--line);
      border-top: 2px solid var(--gold);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }

    .plt-voice-quote {
      position: relative;
      flex: 1;
      margin: 0;
      padding-top: var(--sp-5);
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-body);
      line-height: 2;
    }

    .plt-voice-quote::before {
      content: "“";
      position: absolute;
      left: -4px;
      top: -14px;
      color: var(--gold-light);
      font-size: 58px;
      line-height: 1;
    }

    /* 出典は引用の下に置き、ゴールドの罫で引用と区切る */
    .plt-voice-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--sp-2) var(--sp-3);
      padding-top: var(--sp-4);
      border-top: 1px solid var(--line);
    }

    /* 年代の目印としてのイラスト。特定の個人を指さない素材なので
       発言の誤帰属にならない (装飾扱いなので alt は空) */
    .plt-voice-avatar {
      flex: 0 0 auto;
      width: 64px;
      height: 64px;
      background: var(--mist);
      border: 1px solid var(--line);
      border-radius: 50%;
    }

    .plt-persona-tag {
      display: inline-block;
      padding: 4px 10px;
      color: var(--wine);
      background: var(--wine-pale);
      border-radius: var(--radius-pill);
      font-size: var(--fs-caption);
      font-weight: 800;
      line-height: 1.5;
    }

    .plt-voice-meta { color: var(--muted); font-size: var(--fs-caption); line-height: 1.6; }

    .plt-flow-list {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .plt-flow-item {
      position: relative;
      /* 写真を margin-top:auto で下端に寄せるためカラム方向のフレックスにする
         (ブロックのままだと auto が効かず、本文の行数分だけ写真がずれる) */
      display: flex;
      flex-direction: column;
      gap: var(--sp-2);
      padding: 22px 20px 22px 72px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }

    .plt-flow-item::before {
      content: attr(data-step);
      position: absolute;
      left: 18px;
      top: 20px;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      color: #fff;
      background: var(--navy);
      border-radius: 50%;
      font-family: var(--font-serif);
      font-size: var(--fs-small);
    }

    .plt-flow-item--featured {
      background: linear-gradient(145deg, #fff8f8, #fff);
      border: 2px solid var(--wine);
      box-shadow: var(--shadow-sm);
    }
    .plt-flow-item--featured::before { background: var(--wine); }

    .plt-flow-item h3 {
      margin-bottom: 6px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.5;
    }
    .plt-flow-item p { color: var(--muted); font-size: var(--fs-small); }
    .plt-flow-item .plt-btn { margin-top: 14px; }

    .plt-curriculum-layout { display: grid; gap: 28px; align-items: center; }
    .plt-curriculum-photo { min-height: 260px; }
    .plt-skill-chips li { color: #fff; background: var(--navy); border-color: var(--navy); }

    /* ---- スタジオ一覧 ----
       旧版は縞模様の背景(写真待ちのプレースホルダに見えた)に校舎名だけで、
       器に対して情報が薄く未完成に見えていた。/about/access の実写を入れ、
       写真を主役にしたカードへ変更する */
    .plt-studios-grid { display: grid; gap: var(--sp-4); }

    .plt-studio-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
      color: var(--navy);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      text-decoration: none;
      transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
    }
    a.plt-studio-card:hover {
      border-color: var(--gold);
      box-shadow: var(--shadow-md);
      transform: translateY(-3px);
    }

    /* 写真と地図を差し替えるための器。地図を出しても写真と同じ高さを保つ */
    .plt-studio-media {
      position: relative;
      aspect-ratio: var(--ar-wide);
      background: var(--mist);
    }

    .plt-studio-photo {
      width: 100%;
      aspect-ratio: var(--ar-wide);
      object-fit: cover;
      background: var(--mist);
    }
    .plt-studio-media .plt-studio-photo { height: 100%; }

    /* ---- 地図モーダル ----
       カード内に地図を出すと 381x214 しかなく、拡大・移動が実質できない。
       全画面に近いモーダルで開いて視認性と操作性を確保する。
       iframe は開いた時に JS が差し込み、閉じた時に取り除く (facade)。
       常時 5 枚ぶん埋め込むとページが重く、開いていない人にも
       Google の Cookie が入るため */
    .plt-map-dialog {
      width: min(960px, 94vw);
      max-width: none;
      max-height: 92vh;
      padding: 0;
      color: var(--text);
      background: #fff;
      border: 0;
      border-radius: var(--radius-md);
      box-shadow: 0 30px 80px rgba(20, 14, 18, .38);
      overflow: hidden;
    }
    .plt-map-dialog::backdrop {
      background: rgba(24, 18, 22, .58);
      backdrop-filter: blur(3px);
    }

    .plt-map-dialog-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-4);
      padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
      border-bottom: 1px solid var(--line);
    }
    .plt-map-dialog-title {
      margin: 0;
      color: var(--navy-dark);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.4;
    }
    .plt-map-dialog-close {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      color: var(--navy);
      background: var(--mist);
      border: 1px solid var(--line);
      border-radius: 50%;
      font-size: var(--fs-body);
      line-height: 1;
      cursor: pointer;
      transition: background .2s ease, color .2s ease;
    }
    .plt-map-dialog-close:hover { color: #fff; background: var(--wine); border-color: var(--wine); }
    .plt-map-dialog-close:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

    /* 地図本体。縦は画面の高さから頭と足のぶんを引いて最大限とる */
    .plt-map-dialog-body { height: min(62vh, 560px); background: var(--mist); }
    .plt-map-dialog-body iframe { display: block; width: 100%; height: 100%; border: 0; }

    .plt-map-dialog-foot {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-2) var(--sp-4);
      padding: var(--sp-4) var(--sp-5);
      border-top: 1px solid var(--line);
    }
    .plt-map-dialog-addr {
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-small);
      line-height: 1.6;
    }
    .plt-map-dialog-link {
      flex: 0 0 auto;
      color: var(--wine);
      font-size: var(--fs-small);
      font-weight: 800;
      text-decoration: none;
    }
    .plt-map-dialog-link:hover { text-decoration: underline; }

    @media (max-width: 767px) {
      /* SPは画面いっぱいに近づけ、地図の面積を最大化する */
      .plt-map-dialog { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
      .plt-map-dialog-body { height: calc(100vh - 148px); }
      .plt-map-dialog-foot { flex-direction: column; align-items: flex-start; }
    }

    /* 沖縄カードの「コースを見る →」(a.plt-studio-card::after) と同じ見え方に揃える */
    .plt-studio-maplink {
      margin: var(--sp-1) var(--sp-5) var(--sp-5);
      padding: 0;
      color: var(--wine);
      background: none;
      border: 0;
      font-family: inherit;
      font-size: var(--fs-caption);
      font-weight: 800;
      line-height: 1.5;
      letter-spacing: inherit;
      text-align: left;
      cursor: pointer;
    }
    .plt-studio-maplink:hover { text-decoration: underline; }
    .plt-studio-maplink:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

    .plt-studio-body {
      display: flex;
      flex-direction: column;
      gap: var(--sp-1);
      padding: var(--sp-4) var(--sp-5) var(--sp-5);
    }

    .plt-studio-area {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2);
      margin: 0;
      color: var(--gold-text);
      font-size: var(--fs-caption);
      font-weight: 800;
      letter-spacing: 0.14em;
    }
    .plt-studio-area::before {           /* ゴールドの短い罫でエリア表示を締める */
      content: "";
      width: 18px;
      height: 1px;
      background: currentColor;
    }

    .plt-studio-card h3 {
      margin: 0;
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.45;
    }
    .plt-studio-card p {
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-caption);
    }
    a.plt-studio-card::after {
      content: "コースを見る →";
      margin: var(--sp-1) var(--sp-5) var(--sp-5);
      color: var(--wine);
      font-size: var(--fs-caption);
      font-weight: 800;
    }

    .plt-studio-note {
      margin-top: 22px;
      padding: 16px 18px;
      color: var(--navy);
      background: #fff;
      border-left: 3px solid var(--wine);
      font-size: var(--fs-small);
      line-height: 1.8;
    }

    .plt-knowledge-layout { display: grid; gap: 30px; }
    .plt-knowledge-copy p { margin-bottom: 20px; }
    .plt-career-chips { margin-top: 22px; }
    .plt-career-chips li { background: var(--gold-pale); border-color: var(--gold-light); }

    .plt-related-title {
      margin-bottom: 16px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
    }

    .plt-related-links { display: grid; gap: 10px; }

    .plt-related-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 68px;
      padding: 14px 16px;
      color: var(--navy);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      font-size: var(--fs-small);
      font-weight: 800;
      line-height: 1.6;
      text-decoration: none;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .plt-related-card::after { content: "→"; flex: 0 0 auto; color: var(--gold); font-size: var(--fs-h4); }
    .plt-related-card:hover { border-color: var(--wine); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

    .plt-faq-list {
      max-width: 960px;
      margin-inline: auto;
      border-top: 1px solid var(--line);
    }

    .plt-faq-item { border-bottom: 1px solid var(--line); }

    .plt-faq-item summary {
      position: relative;
      display: grid;
      grid-template-columns: 38px 1fr 26px;
      gap: 9px;
      align-items: start;
      padding: 20px 0;
      color: var(--navy);
      font-weight: 800;
      line-height: 1.65;
      list-style: none;
      cursor: pointer;
    }
    .plt-faq-item summary::-webkit-details-marker { display: none; }

    .plt-faq-q {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      color: #fff;
      background: var(--wine);
      border-radius: 50%;
      font-family: var(--font-serif);
      font-size: var(--fs-body);
    }

    .plt-faq-icon {
      position: relative;
      width: 22px;
      height: 22px;
      margin-top: 4px;
      border: 1px solid var(--gold);
      border-radius: 50%;
    }
    .plt-faq-icon::before,
    .plt-faq-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 9px;
      height: 1px;
      background: var(--gold);
      transform: translate(-50%, -50%);
      transition: transform 0.2s ease;
    }
    .plt-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
    details[open] .plt-faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

    .plt-faq-answer {
      display: grid;
      grid-template-columns: 38px 1fr;
      gap: 9px;
      padding: 0 26px 22px 0;
      color: var(--muted);
      font-size: var(--fs-small);
      line-height: 1.95;
    }

    .plt-faq-a {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      color: var(--wine);
      background: var(--wine-pale);
      border-radius: 50%;
      font-family: var(--font-serif);
      font-size: var(--fs-body);
      font-weight: 800;
    }

    .plt-closing {
      position: relative;
      padding: 82px 0 92px;
      color: #fff;
      background:
        radial-gradient(circle at 85% 25%, rgba(233, 217, 174, 0.14), transparent 30%),
        linear-gradient(145deg, var(--wine-dark), #6a2638 58%, #451421);
      overflow: hidden;
    }

    .plt-closing-grid { display: grid; gap: 34px; position: relative; z-index: 1; }

    .plt-closing-intro {
      margin-bottom: 28px;
      color: rgba(255, 255, 255, 0.88);
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      line-height: 2.05;
      letter-spacing: 0.05em;
    }

    .plt-closing-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .plt-closing-list li {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 10px;
      align-items: start;
      padding: 14px 15px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: var(--radius-sm);
      font-size: var(--fs-small);
      line-height: 1.75;
    }

    .plt-closing-list strong {
      color: var(--gold-light);
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      line-height: 1.2;
    }

    .plt-closing-actions {
      display: grid;
      gap: 12px;
      align-content: center;
    }

    .plt-closing .plt-microcopy { color: rgba(255,255,255,.72); text-align: center; }

    .plt-mobile-cta {
      position: fixed;
      z-index: 1100;
      left: 0;
      right: 0;
      bottom: 0;
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 8px;
      /* 上だけ厚くしている理由: 特典バッジがピルの上辺に重なるので、
         バッジとボタン内の文字がぶつからない余白を確保するため */
      padding: 14px max(10px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
      background: rgba(255,255,255,.96);
      border-top: 1px solid var(--line);
      box-shadow: 0 -14px 34px rgba(23, 19, 21, .18);
      transform: translateY(120%);
      visibility: hidden;
      transition: transform .28s ease, visibility .28s;
      backdrop-filter: blur(12px);
    }

    .plt-mobile-cta.plt-is-visible { transform: translateY(0); visibility: visible; }

    /* サイト共通の GO TO TOP (design.css: SP で position:fixed / bottom:50px / z-index:9999)
       は、この追従CTAバー(高さ 14+62+9=85px + セーフエリア)と重なる。
       CTA を出している間だけ、バーのすぐ上へ逃がす。
       ※#fsGotoTop は #fsPilates の外(footer.php)にあるためページ側から
         直接は辿れない。pilates.js が html に .plt-cta-open を付ける */
    @media (max-width: 769px) {
      #fsGotoTop { transition: bottom .28s ease; }
      html.plt-cta-open #fsGotoTop { bottom: calc(105px + env(safe-area-inset-bottom)); }
    }

    .plt-mobile-cta a {
      position: relative;
      display: grid;
      min-height: 58px;
      place-items: center;
      padding: 10px 8px;
      color: #fff;
      border-radius: var(--radius-pill);
      font-size: var(--fs-small);
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: 0.03em;
      text-align: center;
      text-decoration: none;
      overflow: hidden;          /* 光沢の走査をボタン内に収める */
      isolation: isolate;
    }

    /* ---- 追従CTAは「押したくなる」見え方にする ----
       ①奥行きのあるグラデーション ②ゴールドの縁 ③立ち上がった影
       ④上端のハイライト ⑤ゆっくり走る光沢 で視線を引く */
    /* セレクタは a を含める。上流の `.plt-mobile-cta a`(0,1,1) が
       `.plt-mobile-cta-primary`(0,1,0) に勝って display:grid が残り、
       中身が縦積みになるため */
    .plt-mobile-cta a.plt-mobile-cta-primary {
      /* LINEバッジ / ラベル / 円形矢印 の横並び */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 62px;
      padding: 10px 12px;
      background: linear-gradient(140deg, #b23a58 0%, #96374f 30%, var(--wine) 66%, var(--wine-dark) 100%);
      border: 2px solid rgba(233, 217, 174, 0.72);
      box-shadow:
        0 8px 20px rgba(122, 43, 63, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    .plt-mobile-cta-label {
      font-size: var(--fs-body);
      font-weight: 800;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    /* 特典バッジ。バーの上辺に半分かかる位置に置く。
       <a> は光沢アニメのため overflow:hidden なので、バー側の子として配置する */
    .plt-mobile-cta-badge {
      position: absolute;
      z-index: 2;
      /* バーの外へ飛び出させすぎると本文の上に浮いて見えるので、
         上端は2pxだけ出してピルの上辺に乗せる */
      top: -2px;
      left: 50%;
      transform: translateX(-50%);
      padding: 4px 14px;
      color: var(--wine-dark);
      background: linear-gradient(105deg, #f9f1dc, #e9d9ae 46%, #d3b163);
      border: 1px solid rgba(177, 143, 62, 0.5);
      border-radius: var(--radius-pill);
      box-shadow: 0 4px 10px rgba(15, 8, 11, 0.2);
      font-size: var(--fs-caption);
      font-weight: 800;
      line-height: 1.5;
      letter-spacing: 0.03em;
      white-space: nowrap;
      pointer-events: none;
    }
    .plt-mobile-cta-primary::after {   /* 斜めの光沢が一定間隔で横切る */
      content: "";
      position: absolute;
      z-index: -1;
      top: -60%;
      left: -40%;
      width: 40%;
      height: 220%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
      transform: rotate(18deg);
      animation: plt-cta-shine 4.5s ease-in-out infinite;
    }
    @keyframes plt-cta-shine {
      0%, 62% { left: -40%; }
      92%, 100% { left: 120%; }
    }
    .plt-mobile-cta a:active { transform: translateY(1px); }

    .plt-mobile-cta-line {
      background: linear-gradient(140deg, #22d96d, var(--line-green) 60%, #04a948);
      border: 1px solid rgba(255, 255, 255, 0.4);
      box-shadow: 0 6px 16px rgba(6, 199, 85, 0.34), inset 0 1px 0 rgba(255,255,255,.3);
    }
    .plt-mobile-cta .plt-url-pending {
      position: absolute;
      right: 4px;
      top: -8px;
      padding: 1px 4px;
      color: var(--pending-text);
      background: var(--pending-bg);
      border: 1px solid var(--pending-border);
      border-radius: var(--radius-xs);
      font-size: 7px;
      line-height: 1.4;
    }

    .plt-desktop-only { display: none; }

    .plt-visually-hidden {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    /* ---- 559px以下: 実績カード(主役以外)は「テキスト左・画像右」の横組みにする ----
       縦積みだとカードが間延びして縦に長くなるため。
       560px以上はグリッドが2カラムになりカード幅が半分になるので縦積みのまま */
    @media (max-width: 559px) {
      /* PMAバッジとテキストは横並びを維持する。
         「教育事業者等による国際的な専門家団体」を1行に収めるには221px必要なので、
         バッジを96pxに詰めてコピー欄に227pxを確保する */
      .plt-pma-lockup { gap: var(--sp-3); }
      .plt-result-card:not(.plt-result-card--featured) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--sp-4);
        min-height: 0;
      }
      .plt-result-card:not(.plt-result-card--featured) > .plt-result-label { grid-area: 1 / 1; }
      .plt-result-card:not(.plt-result-card--featured) > div:not(.plt-result-visual) { grid-area: 2 / 1; }
      .plt-result-card:not(.plt-result-card--featured) > .plt-result-visual {
        grid-area: 1 / 2 / span 2 / auto;
        height: auto;
        margin: 0;
        padding: 0;
      }
      .plt-result-icon,
      .plt-result-photo { width: 112px; height: auto; }
      .plt-result-photo { aspect-ratio: var(--ar-wide); object-fit: cover; }
      .plt-result-logo { width: 112px; height: auto; }
    }

    @media (min-width: 560px) {
      .plt-button-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-result-card--featured { grid-column: span 2; }
      .plt-course-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-support-flow, .plt-workstyles, .plt-studios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-voices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-voice-card:last-child { grid-column: span 2; }
      .plt-closing-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-closing-actions .plt-microcopy { grid-column: 1 / -1; }
    }

    @media (min-width: 768px) {
      #fsPilates { --header-height: 80px; }
      .plt-container { width: min(100% - 72px, 1180px); }
      .plt-mock-notice { padding: 7px 20px; }
      .plt-desktop-only { display: inline; }
      .plt-button-row { display: flex; flex-wrap: wrap; }
      .plt-button-row .plt-btn { min-width: 220px; }
      .plt-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .plt-result-card--featured { grid-column: span 2; grid-row: span 2; min-height: 324px; display: flex; flex-direction: column; justify-content: center; }
      .plt-result-card--featured .plt-result-number { font-size: var(--fs-stat-lg); }
      .plt-result-card { min-height: 156px; }
      .plt-table-wrap { margin-inline: 0; padding-inline: 0; }
      .plt-course-table { width: 100%; }
      .plt-table-scroll-hint { display: none; }
      .plt-cta-band { grid-template-columns: 1fr auto; padding: var(--sp-5); }
      .plt-cta-band-main { grid-template-columns: 1fr auto; }
      .plt-diagnosis-shell { padding: 34px; }
      .plt-diagnosis-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-diagnosis-result { padding: 34px; }
      .plt-reason-card--hero { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: center; }
      .plt-reason-photo { min-height: 300px; }
      .plt-support-callout { padding: 42px 32px; }
      .plt-support-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .plt-support-step:not(:last-child)::after {
        content: "→";
        position: absolute;
        z-index: 2;
        right: -15px;
        top: 50%;
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        color: var(--gold-text);
        background: var(--mist);
        border: 1px solid var(--gold-light);
        border-radius: 50%;
        transform: translateY(-50%);
      }
      .plt-workstyles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .plt-voices-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .plt-voice-card:last-child { grid-column: auto; }
      .plt-flow-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
      .plt-flow-item { min-height: 245px; padding: 72px 17px 20px; }
      .plt-flow-item::before { left: 17px; top: 20px; }
      .plt-flow-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 40px;
        right: -10px;
        width: 10px;
        height: 1px;
        background: var(--gold);
      }
      .plt-flow-item .plt-btn { width: 100%; min-width: 0; padding-inline: 10px; }
      .plt-curriculum-layout { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 54px; }
      .plt-curriculum-photo { min-height: 430px; }
      .plt-studios-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .plt-knowledge-layout { grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: 64px; }
      .plt-faq-item summary { grid-template-columns: 45px 1fr 30px; padding: 24px 4px; }
      .plt-faq-answer { grid-template-columns: 45px 1fr; padding: 0 34px 26px 4px; }
      .plt-closing { padding: 116px 0 124px; }
      .plt-closing-grid { grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); gap: 64px; }
      .plt-closing-actions { grid-template-columns: 1fr; }
      .plt-closing-actions .plt-btn { min-height: 62px; }
      .plt-mobile-cta { display: none; }
    }

    /* ---- 1039px以下のFV ----
       重ねレイアウトはパネルが写真をほぼ覆ってしまい成立しないので、
       「コピー → 写真」の縦積みに戻す (写真がボタンの下に沈むと
       ファーストビューに絵が入らないため、写真は見出しの直後)。
       重なりの表現はPMAチップが写真の上辺にかかる形で残す */
    @media (max-width: 1039px) {
      .plt-hero { padding-bottom: var(--sp-7); }
      /* パネルとその中身を display:contents で解体し、写真と兄弟に並べてから
         order で「PMA → 見出し → 写真 → 補足 → バッジ → ボタン」に組み替える */
      .plt-hero-inner { display: flex; flex-direction: column; }
      .plt-hero-panel, .plt-hero-content { display: contents; }
      .plt-hero-panel .plt-pma-lockup {
        order: 1;
        width: auto;
        margin: 0 0 var(--sp-5);
        padding: 0;
        background: none;
        border-left: 0;
        box-shadow: none;
        transform: none;
      }
      .plt-hero-panel .plt-pma-badge-img { width: 96px; }
      .plt-hero-content h1 { order: 2; }
      /* 左右ともコンテナのガター内に収める (=他セクションと左端が揃う)。
         ※ 0731 に一度「左端だけ裁ち落とし」にしたが、SP用の切り抜きを
            被写体中央に変更したことで不要になり、対称の余白に戻した */
      .plt-hero-media {
        order: 3;
        width: 100%;
        margin: 0 0 var(--sp-6);
        height: auto;
        aspect-ratio: 3 / 2;
        border-radius: var(--radius-md);
        overflow: hidden;
        clip-path: none;
      }
      .plt-hero-photo { object-position: 50% 42%; }
      /* 帯も解体して、中身を既存の並び (補足→バッジ) に差し込む */
      .plt-hero-underband { display: contents; }
      .plt-hero-content .plt-hero-sub { order: 4; }
      /* 帯を解体すると .plt-hero-inner (縦flex) の直接の子になる。
         帯用の flex-basis:380px は縦方向では「高さ380px」になってしまうので戻す */
      .plt-hero-underband .plt-hero-sub {
        order: 4;
        flex: 0 0 auto;
        margin-bottom: 22px;
        font-size: var(--fs-body);
      }
      /* 帯は gap で間隔を作るため margin:0 にしているが、縦積みでは
         gap が効かず要素同士が密着するので margin を戻す
         (特にバッジ→CTAボタンが 0px でくっついていた) */
      .plt-hero-underband .plt-trust-badges { order: 5; margin: 0 0 var(--sp-6); }
      .plt-hero-content .plt-button-row { order: 6; }
      .plt-hero-content .plt-microcopy { order: 7; }
      /* 幅の制限と詰めた行間は重ねレイアウト用なので、縦積みでは戻す */
      .plt-hero h1,
      .plt-hero-panel .plt-hero-sub,
      .plt-hero-panel .plt-microcopy { max-width: none; }
      .plt-hero h1 { margin-bottom: 22px; }
      .plt-hero-panel .plt-hero-sub { margin-bottom: 22px; }
    }

    @media (min-width: 1040px) {
      /* 写真の上に置くので3行組みにして1行あたりの文字数を抑える */
      .plt-hero h1 .plt-br-narrow { display: inline; }
      /* 無地ゾーン(約480px)に収まるよう、FVの見出しだけ上限を下げる */
      .plt-hero-panel h1 { font-size: clamp(28px, 16.9px + 1.60vw, 40px); }
      .plt-section-head { margin-bottom: 48px; }
      .plt-reasons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-reason-card--hero { grid-column: 1 / -1; }
      /* 01(全幅) + 02/03 + 04/05 の3行に収める。
         05を全幅にすると04の右隣が空いて穴になるため、2枚並べる */
      .plt-course-table th, .plt-course-table td { padding: 20px 21px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .plt-mobile-cta-primary::after { animation: none; display: none; }
      html { scroll-behavior: auto; }
      #fsPilates *, #fsPilates *::before, #fsPilates *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    }

    /* ================================================================
       0723修正原稿 (松木さん) 対応で追加したコンポーネント
       ================================================================ */

    /* FV: PMAバッジ画像 (CSS製エンブレムの置き換え) */
    .plt-pma-badge-img {
      flex: 0 0 auto;
      width: 110px;
      height: auto;
      filter: drop-shadow(0 8px 18px rgba(126, 93, 28, 0.25));
    }

    /* 559px以下はPMAバッジを96pxに詰めて、右のテキスト欄に221px以上を確保する
       (「教育事業者等による国際的な専門家団体」を1行に収めるため)。
       ※この指定は基本ルールより後ろに置くこと。前に書くと後勝ちで無効になる */
    @media (max-width: 559px) {
      .plt-pma-badge-img { width: 96px; height: auto; flex: 0 0 auto; }
    }

    /* FV: 信頼バッジのアイコン化 (✓を廃止して絵文字/画像アイコンに) */
    .plt-trust-badges li::before { content: none; }
    .plt-badge-ico { font-size: var(--fs-body); line-height: 1; }
    .plt-badge-ico-img { width: auto; height: 15px; }

    /* FV: ブランドサブコピー (運営母体の一文) */
    .plt-hero-sub--brand {
      margin-bottom: 10px;
      color: var(--navy-dark);
      font-weight: 700;
    }

    /* §2 実績カードのロゴは .plt-result-visual スロットで扱うため、
       旧版の絶対配置指定とPMAロゴの部分表示ハックは削除した
       (PMA公式ロゴ 1057x318 を入手し、切り抜きの必要がなくなったため) */

    /* §5: 理由カードの実写画像
       原寸以上に拡大せず・切り抜かず全体を表示する (0724 修正: トリミング/サイズ不備の対処) */
    .plt-reason-photo--img {
      width: 100%;
      height: auto;
      min-height: 0;
      object-fit: contain;
      border-radius: var(--radius-md);
    }
    /* 理由カードの画像は「同じ枠・同じ比率」に統一してカード高さを揃える。
       枠は 16:9 固定。写真は cover で埋め、ロゴ帯を含む素材だけ contain で切り抜かない */
    .plt-reason-photo-sm {
      display: block;
      width: 100%;
      aspect-ratio: var(--ar-wide);
      height: auto;
      margin: var(--sp-4) 0 0;
      object-fit: cover;
      border-radius: var(--radius-sm);
      border: 1px solid rgba(255, 255, 255, 0.14);
    }
    .plt-reason-photo-sm--contain {
      object-fit: contain;
      border-color: transparent;   /* 余白が出るので枠線は消す */
    }
    /* PMA公式ロゴを入手したため、旧素材の切り出しハックは不要になった。
       ロゴは説明ボックス内で他カードの図版と釣り合う大きさにする */
    /* ボックスが伸びた分ロゴも大きくして釣り合いを取る */
    .plt-pma-logo-img {
      display: block;
      width: auto;
      height: 88px;
      max-width: 100%;
      object-fit: contain;
      object-position: left center;
      margin-bottom: var(--sp-4);
      padding: var(--sp-4) var(--sp-5);
      background: #fff;
      border-radius: var(--radius-sm);
    }

    /* §6: 「資格の活かし方」見出し */
    .plt-workstyles-heading {
      margin: 30px 0 14px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h3);
      line-height: 1.5;
    }

    /* ---- FLOW の各ステップ写真 ----
       01(CTA入り)以外に写真を敷く。下端揃えで開始位置を4枚で合わせる */
    .plt-flow-photo {
      width: 100%;
      aspect-ratio: var(--ar-wide);
      height: auto;
      margin-top: auto;
      object-fit: cover;
      border-radius: var(--radius-sm);
    }

    /* ---- 参加者限定特典 ----
       旧版はボタンの上にピルを1つ置いただけで「後付け」に見えていた。
       ゴールドの枠で囲った独立ブロックにし、アイコン・見出し・補足の3層に組む */
    .plt-cta-band-action { display: grid; gap: var(--sp-3); justify-items: stretch; }

    /* 特典は帯の上辺いっぱいのリボンにする。
       旧版は本文と同じ列に置いた箱だったため、中身が左端に寄って右半分が空き
       「間延び」して見えていた。全幅の帯にすることで空きが生まれない */
    .plt-benefit {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: var(--sp-3);
      margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);
      padding: var(--sp-3) var(--sp-5);
      background: linear-gradient(135deg, #fffdf6, var(--gold-pale));
      border-bottom: 1px solid var(--gold);
      border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    /* コピーとボタンを1行に。左のコピーが主役、右にボタン */
    .plt-cta-band-main {
      grid-column: 1 / -1;
      display: grid;
      gap: var(--sp-4);
      align-items: center;
    }

    /* CTAの特典バッジと同じギフト絵文字を使う (「GIFT」の文字から変更)。
       絵文字は多色なので、下地は濃い金ではなく淡い金にして絵柄を沈ませない */
    .plt-benefit-icon {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 40px;
      height: 40px;
      background: linear-gradient(140deg, #fdf8e9, var(--gold-light));
      border: 1px solid rgba(177, 143, 62, 0.55);
      border-radius: 50%;
      font-size: 19px;
      line-height: 1;
    }

    .plt-benefit-body { display: grid; gap: 2px; line-height: 1.5; }
    .plt-benefit-body strong {
      color: var(--wine-dark);
      font-size: var(--fs-small);
      font-weight: 800;
      letter-spacing: 0.06em;
    }
    .plt-benefit-body span {
      color: var(--muted);
      font-size: var(--fs-caption);
    }

    .plt-cta-benefit {
      display: inline-block;
      padding: 4px 12px;
      color: var(--wine-dark);
      background: var(--gold-pale);
      border: 1px solid var(--gold-light);
      border-radius: var(--radius-pill);
      font-size: var(--fs-caption);
      font-weight: 800;
      line-height: 1.6;
      letter-spacing: 0.04em;
    }
    .plt-cta-benefit--closing {
      justify-self: center;
      color: var(--gold-light);
      background: rgba(233, 217, 174, 0.12);
      border-color: rgba(233, 217, 174, 0.45);
    }

    /* クロージングボタン内のLINEミニ表示 */
    .plt-line-mini {
      display: inline-grid;
      /* flex の子として縮むと「LIN / E」と折り返すので、縮小を禁じる */
      flex: 0 0 auto;
      white-space: nowrap;
      place-items: center;
      margin-right: 8px;
      padding: 3px 7px;
      color: #fff;
      background: var(--line-green);
      border-radius: var(--radius-xs);
      font-size: var(--fs-caption);
      font-weight: 800;
      letter-spacing: 0.06em;
    }

    /* §9: カリキュラム詳細 (LPから移植) */
    .plt-curriculum-detail {
      display: grid;
      gap: 14px;
      margin-top: 40px;
    }
    .plt-curriculum-detail-card {
      padding: 24px 22px;
      background: var(--mist);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
    }
    .plt-curriculum-detail-title {
      margin-bottom: 16px;
      padding-bottom: 12px;
      color: var(--wine-dark);
      border-bottom: 1px solid var(--gold-light);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.6;
    }
    .plt-curriculum-part:not(:last-child) { margin-bottom: 18px; }
    .plt-curriculum-part h4 {
      margin-bottom: 8px;
      color: var(--navy);
      font-size: var(--fs-small);
      font-weight: 800;
      line-height: 1.65;
    }
    .plt-curriculum-part ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .plt-curriculum-part li {
      position: relative;
      padding-left: 16px;
      color: var(--muted);
      font-size: var(--fs-small);
      line-height: 1.9;
    }
    .plt-curriculum-part li::before {
      content: "・";
      position: absolute;
      left: 0;
      color: var(--gold);
    }

    /* §11: 資格取得のメリット */
    .plt-merit {
      margin: 0 0 22px;
      padding: 20px 20px 8px;
      background: var(--mist);
      border-left: 3px solid var(--gold);
      border-radius: var(--radius-sm);
    }
    .plt-merit-title {
      margin-bottom: 14px;
      color: var(--navy);
      font-family: var(--font-serif);
      font-size: var(--fs-h4);
      line-height: 1.6;
    }
    .plt-merit-list { margin: 0; }
    .plt-merit-item { margin-bottom: 14px; }
    .plt-merit-item dt {
      margin-bottom: 3px;
      color: var(--wine-dark);
      font-size: var(--fs-small);
      font-weight: 800;
    }
    .plt-merit-item dd {
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-small);
      line-height: 1.85;
    }

    /* §9: カリキュラム写真 (実画像) */
    .plt-curriculum-photo--img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    /* モバイル固定CTA: LINEボタン廃止で1本化 */
    .plt-mobile-cta { grid-template-columns: 1fr; }

    @media (min-width: 768px) {
      .plt-curriculum-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .plt-cta-band-action { justify-items: end; }
    }

    /* ================================================================
       躍動感レイヤー (2026-07-26)
       水平・垂直に整列した箱の連続は落ち着くが動きが出ない。
       ①テキストを写真に重ねる ②カードを段違いに置く ③区切りを斜めにする
       の3手だけを、可読性を損なわない箇所に限定して入れる。
       ※このブロックは必ずファイル末尾に置くこと (同特異性では後勝ちのため、
         上流の基本ルールを確実に上書きできる)
       ================================================================ */

    /* ---- ① カリキュラム: 写真を左端まで裁ち落とし、本文パネルを右から重ねる ---- */
    @media (min-width: 1040px) {
      .plt-curriculum-layout {
        /* コンテナの内側から全幅へ抜ける */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        /* パネルの右端はコンテナの右端に揃える */
        padding-right: max(36px, calc((100vw - 1180px) / 2));
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        align-items: center;
      }
      .plt-curriculum-photo {
        grid-area: 1 / 1;
        justify-self: start;
        width: 62%;
        min-height: 480px;
      }
      .plt-curriculum-photo--img {
        /* 左は裁ち落としなので角丸を落とす */
        border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
      }
      .plt-curriculum-body {
        grid-area: 1 / 1;               /* 同じマスに置いて重ねる */
        justify-self: end;
        width: min(620px, 52%);
        padding: var(--sp-7);
        background: rgba(255, 255, 255, 0.96);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(8px);
      }
      .plt-curriculum-body .plt-section-head { margin-bottom: var(--sp-5); }
    }

    /* ---- ② スタジオ: 写真の上に校舎名のボックスを重ねる ----
       中央列を translateY(30px) で段違いにしていたが、上辺が揃わず
       一覧としての比較がしにくいため 2026-07-26 に取りやめ (カードは上辺で揃える)。
       重なりの表現は「校舎名ボックスが写真に食い込む」形で残している */
    .plt-studio-body {
      position: relative;
      z-index: 1;
      margin: -40px var(--sp-4) var(--sp-4);
      padding: var(--sp-4);
      background: #fff;
      border-radius: var(--radius-sm);
      box-shadow: 0 -6px 20px rgba(33, 27, 30, 0.10);
    }

    /* ---- ③ 区切りを斜めにする ----
       FVの画像下辺と同じ「右上がり」で揃え、モチーフとして反復させる */
    @media (min-width: 768px) {
      .plt-section--navy,
      .plt-closing {
        --slant: clamp(24px, 3vw, 52px);
        clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
        margin-top: calc(var(--slant) * -1);
        padding-top: calc(var(--sp-section) + var(--slant));
      }
    }

    /* 見出しを全セクション左揃えに統一したので、その直下の中央寄せブロックも
       左端に揃える (見出しと本体の開始位置がズレると別ブロックに見えるため) */
    .plt-diagnosis-shell,
    .plt-faq-list { margin-inline: 0; }

    /* ================================================================
       スクロール連動アニメーション (2026-07-27)

       ・opacity と transform だけを使う (レイアウトを動かさないので CLS 0)
       ・初期状態は `.plt-anim` が root に付いている時だけ当てる。
         JS が動かない環境では何も隠れない (プログレッシブエンハンスメント)。
         このフラグは page-pilates.php のインラインスクリプトでパース中に立てる
         — pilates.js は defer なので、そこで付けると
         「見えている→隠れる→出てくる」のチラつきが出る
       ・FV には付けない。LCP(ヒーロー写真)を遅らせるとCore Web Vitalsに響く
       ・一度出したら二度と動かさない (JS側で unobserve)
       ================================================================ */
    .plt-anim :is(.plt-reveal, .plt-stagger > *) {
      opacity: 0;
      transform: translateY(18px);
    }
    .plt-anim :is(.plt-reveal.plt-in, .plt-stagger.plt-in > *) {
      opacity: 1;
      /* none にしておくこと。transform が残ると position:fixed の子や
         トップレイヤー(地図モーダル)の基準がずれる可能性がある */
      transform: none;
      transition:
        opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* カードは少しずつ遅らせて順番に出す。7枚目以降は待たせすぎないよう頭打ち */
    .plt-anim .plt-stagger.plt-in > :nth-child(2) { transition-delay: 0.075s; }
    .plt-anim .plt-stagger.plt-in > :nth-child(3) { transition-delay: 0.15s; }
    .plt-anim .plt-stagger.plt-in > :nth-child(4) { transition-delay: 0.225s; }
    .plt-anim .plt-stagger.plt-in > :nth-child(5) { transition-delay: 0.3s; }
    .plt-anim .plt-stagger.plt-in > :nth-child(6) { transition-delay: 0.375s; }
    .plt-anim .plt-stagger.plt-in > :nth-child(n + 7) { transition-delay: 0.45s; }

    /* 動きを減らす設定では一切動かさない (最初から見えている状態) */
    @media (prefers-reduced-motion: reduce) {
      .plt-anim :is(.plt-reveal, .plt-stagger > *) {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }