/* =====================================================================
   平成医療学園専門学校 新HPプロトタイプ v2 — デザインシステム正典CSS
   コンセプト「白の規律｜DISCIPLINE IN WHITE」（docs/CONCEPT.md）
   実装仕様の正典：docs/DESIGN_SYSTEM.md（本ファイルと食い違ったら本ファイルが誤り）

   編集権限：DS工程で確定後は読み取り専用。Polish工程のみ編集可（BRIEF.md）。
   ページCSS（css/pages/*.css）でのトークン再定義は禁止（AAAゲート④）。

   目次
   00. トークン（:root）
   01. リセット・ベース
   02. flatモード / prefers-reduced-motion
   03. タイポグラフィ（見出し・.en・.en--label）
   04. レイアウトユーティリティ（container / section / grid-12 / split）
   05. テクスチャ・モチーフ（u-ticks / u-crosshair / u-arc / u-grid8 / u-grain / plate / rule-h）
   06. 写真処理（ph-clinical / ph-duotone-wrap / ph-natural / figure）
   07. CTAボタン・リンク
   08. ヘッダー・ドロワー
   09. SP固定フッター4枠
   10. コンポーネント（sec-head / entry / stat / dept-card / labtable / tl / faq / marker / cta-band）
   11. フッター
   12. モーション（data-reveal系）
   ===================================================================== */

/* =====================================================================
   00. トークン
   ---------------------------------------------------------------------
   ▼ 色の使用は下記「承認16ペア」のみ（DESIGN_SYSTEM.md §1 実測値）。
     表外のテキスト×背景ペアは使用禁止。新ペアが必要なら相対輝度式で
     計算し DESIGN_SYSTEM.md の表に追記してから使うこと。
     （承認ペアの前景/背景の反転使用は同一色ペア＝同一比率のため可。
       DESIGN_SYSTEM.md §6「hoverで塗り反転」の正典指示に基づく）

     ink/base 16.86 AAA        ink/panel 17.80 AAA      ink/mist 15.81 AAA
     text-sub/base 6.09 AA*    text-sub/panel 6.43 AA*  text-sub/mist 5.71 AA*
     steel文字/base 9.78 AAA   steel文字/panel 10.33    steel文字/mist 9.18
     #fff/steel 10.33 AAA      #fff/steel-deep 14.75    base文字/steel-deep 13.96
     #fff/signal 7.90 AAA      signal文字/base 7.49     signal文字/panel 7.90
     #fff/signal-hover 9.89    （*text-subは14px以上でのみ使用）

   ▼ --c-signal はCTA・「募集中」マーカー・SP固定フッター主役枠専用。
     見出し・罫線・アイコン・hover装飾への使用禁止。面積3%以下。
     1ビューポート内の深緋要素は原則1個（SP固定フッター主役枠を除く）。
   ▼ 暗色ベタ（--c-steel-deep）の大面積は最終CTA帯とフッターのみ。
     セクション地への使用禁止（「白い厳しさ」の根幹）。
   ▼ 高彩度色・パステル・多色相並列・グラデーション虹の追加禁止。
   ===================================================================== */
:root {
  /* ---- 色（DESIGN_SYSTEM.md §1 全定義。追加・変更禁止） ---- */
  --c-base:         #F7F9FA;  /* 臨床白（寒色）。全体背景 約55% */
  --c-panel:        #FFFFFF;  /* 検査台の純白。カード・表・FVスクリム 約15% */
  --c-mist:         #EEF2F5;  /* 淡鋼ミスト。交互セクション・表ストライプ 約5% */
  --c-ink:          #16181A;  /* 墨黒。本文・見出し文字 */
  --c-text-sub:     #55606A;  /* 鋼グレー。キャプション・注記（14px以上でのみ使用） */
  --c-line:         #D8DEE3;  /* ヘアライン罫・目盛（装飾専用。意味伝達に単独使用禁止） */
  --c-steel:        #24435C;  /* 鋼青（基幹）。見出しアクセント・銘板地・第2CTA 約15% */
  --c-steel-deep:   #142A3B;  /* 深鋼。フッター・最終CTA帯の地（暗色ベタ2箇所限定） 約5% */
  --c-signal:       #9E1B32;  /* シグナル深緋。主CTA・「募集中」マーカー専用 3%以下 */
  --c-signal-hover: #841626;  /* 主CTAのhover/pressed */
  --c-signal-alt:   #6E4300;  /* 予備差し色（焦銅）。通常は未使用。先方が深緋を忌避した
                                 場合のみ --c-signal / --c-signal-hover を差し替える
                                 （白文字8.52:1計算済・差替後もスクショ実見必須） */

  /* ---- 書体3層（Google Fonts。旧MERIDIAN 3書体とは全層交代済み） ---- */
  --font-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;      /* 和文見出し 500/700/900 */
  --font-body:    "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;       /* 和文本文 400/500/700 */
  --font-en:      "Roboto Slab", "Georgia", serif;                                    /* 数字・欧文専用 400/600/700 */

  /* ---- 流体タイポスケール（DESIGN_SYSTEM.md §3） ---- */
  --fs-hero:    clamp(2.25rem, 1.30rem + 4.2vw, 4.00rem);   /* FVメイン（Zen Old Mincho 900） */
  --fs-h1:      clamp(1.75rem, 1.20rem + 2.4vw, 2.75rem);   /* ページ見出し */
  --fs-h2:      clamp(1.375rem, 1.05rem + 1.5vw, 2.00rem);  /* セクション見出し */
  --fs-h3:      clamp(1.125rem, 1.00rem + 0.6vw, 1.375rem);
  --fs-body:    clamp(0.9375rem, 0.90rem + 0.2vw, 1.0625rem); /* 15→17px */
  --fs-small:   0.875rem;   /* 14px。--c-text-sub使用の最小サイズ */
  --fs-stat:    clamp(3.00rem, 1.80rem + 5.5vw, 5.50rem);   /* 計器型実績数字（Roboto Slab 700） */
  --fs-stat-xl: clamp(4.00rem, 2.20rem + 8.0vw, 7.50rem);   /* shakaijin「192」一点強調 */

  /* ---- 8px余白スケール（8の倍数以外の余白値は使用禁止） ---- */
  --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;  --sp-5: 40px;
  --sp-6: 48px; --sp-8: 64px;  --sp-10: 80px; --sp-12: 96px; --sp-16: 128px;

  /* ---- 角丸・罫・影（ピル形状・radius 8px超は全面禁止） ---- */
  --r-0: 0;
  --r-1: 2px;   /* 既定 */
  --r-2: 4px;   /* 最大。写真とFAQのみ */
  --bd-hair: 1px solid var(--c-line);
  --sh-1: 0 1px 2px rgba(20, 42, 59, .06);
  --sh-2: 0 8px 24px -8px rgba(20, 42, 59, .14);

  /* ---- easing・モーション（バウンス・ポヨン系・点滅・回転は全面禁止） ---- */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .35s;
  --dur-2: .7s;

  /* ---- レイアウト ---- */
  --w-container: 1200px;
  --gutter: var(--sp-2);          /* SP 16px → 768px以上で24px */
  /* ヘッダーは「制度適格性の細帯（.topbar）＋メイン行」の2段構成。
     --header-h は2段合計＝scroll-padding-top・body.no-hero・drawer が参照する総高 */
  --header-main-h: 72px;
  --topbar-h: 26px;
  --header-h: calc(var(--header-main-h) + var(--topbar-h));
}
@media (min-width: 768px) {
  :root { --gutter: var(--sp-3); --topbar-h: 30px; }
}

/* =====================================================================
   01. リセット・ベース
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-2));
}
body {
  margin: 0;
  background: var(--c-base);
  color: var(--c-ink);                     /* ink/base 16.86:1 AAA */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.8;                        /* 本文規範 */
  letter-spacing: .02em;
  /* 本文はpaltを掛けない（既定のベタ組み・DESIGN_SYSTEM.md §2） */
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
strong { font-weight: 700; }
hr { border: 0; border-top: var(--bd-hair); margin: 0; }
::selection { background: var(--c-steel); color: #fff; }   /* #fff/steel 10.33:1 */
:focus-visible { outline: 2px solid var(--c-steel); outline-offset: 2px; }
main { display: block; }

/* FVを持たないページ（styleguide等）は body に .no-hero を付けてヘッダー高を確保 */
body.no-hero { padding-top: var(--header-h); }

/* SP固定フッターの高さ確保（全ページ共通・900px未満） */
@media (max-width: 899px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* アクセシビリティ小物 */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* skip-link は top オフセットで隠す（transformだと is-flat の transform:none 強制で露出するため） */
.skip-link {
  position: fixed; top: -80px; left: 0; z-index: 100;
  background: var(--c-steel); color: #fff;
  padding: var(--sp-1) var(--sp-2);
}
.skip-link:focus { top: 0; }

/* =====================================================================
   02. flatモード / prefers-reduced-motion（BRIEF必須仕様）
   URLハッシュに flat を含む、または prefers-reduced-motion: reduce で
   js/main.js が html.is-flat を付与 → 全アニメ無効・全要素即表示。
   ドロワー等の「閉」状態は visibility で担保する（opacity強制1でも閉じたまま）。
   ===================================================================== */
html.is-flat * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   03. タイポグラフィ
   ===================================================================== */
h1, h2, h3, h4, .t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-feature-settings: "palt";           /* 見出しのみ約物詰め */
  line-height: 1.35;                        /* 規範1.3〜1.45 */
  letter-spacing: .04em;                    /* 規範0.04〜0.08em */
  color: var(--c-ink);
}
h1, .t-hero { font-size: var(--fs-h1); letter-spacing: .06em; }
.t-hero     { font-size: var(--fs-hero); font-weight: 900; line-height: 1.3; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-body); }

/* 数字・英字は必ず .en で Roboto Slab に切り替える（AAAゲート④・YOU MUST）
   対象：実績数字・年月日・時刻・電話番号・金額・%・セクション番号・英字ラベル */
.en {
  font-family: var(--font-en);
  font-variant-numeric: lining-nums tabular-nums;   /* 検査値の桁揃え */
  letter-spacing: .01em;
}
.en--label {
  font-family: var(--font-en);
  font-variant-numeric: lining-nums tabular-nums;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}

.t-sub  { color: var(--c-text-sub); font-size: var(--fs-small); }  /* 14px未満へ縮小禁止 */
.t-steel { color: var(--c-steel); }
.lead { max-width: 44em; }

/* =====================================================================
   04. レイアウトユーティリティ
   ===================================================================== */
.container {
  width: min(100% - var(--gutter) * 2, var(--w-container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - var(--gutter) * 2, 880px); }

/* セクション上下（PC --sp-12〜16／SP --sp-8〜10・8px厳守のためmedia切替） */
.section { padding-block: var(--sp-8); position: relative; }
.section--lg { padding-block: var(--sp-10); }
@media (min-width: 900px) {
  .section { padding-block: var(--sp-12); }
  .section--lg { padding-block: var(--sp-16); }
}

/* 背景ユーティリティ（連続する2セクションで同背景を繰り返さない・§9） */
.bg-base  { background: var(--c-base); }
.bg-panel { background: var(--c-panel); }
.bg-mist  { background: var(--c-mist); }
/* 暗色ベタは .cta-band / .site-footer 専用。汎用 .bg-steel-deep は定義しない */

/* 12カラムグリッド（PC）。SPは1カラム縦積み */
.grid-12 { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .grid-12 { grid-template-columns: repeat(12, 1fr); }
  /* 非対称配置用：span（幅）と start（開始位置）を組み合わせる
     ※ gs-* は grid-column-end で span を指定する（grid-columnショートハンドだと
       gstart-* 併用時に span が破棄され1カラム化する。実測済みの罠） */
  .gs-3  { grid-column-end: span 3; }  .gs-4  { grid-column-end: span 4; }
  .gs-5  { grid-column-end: span 5; }  .gs-6  { grid-column-end: span 6; }
  .gs-7  { grid-column-end: span 7; }  .gs-8  { grid-column-end: span 8; }
  .gs-9  { grid-column-end: span 9; }  .gs-12 { grid-column-end: span 12; }
  .gstart-1 { grid-column-start: 1; } .gstart-2 { grid-column-start: 2; }
  .gstart-3 { grid-column-start: 3; } .gstart-4 { grid-column-start: 4; }
  .gstart-5 { grid-column-start: 5; } .gstart-6 { grid-column-start: 6; }
  .gstart-7 { grid-column-start: 7; } .gstart-8 { grid-column-start: 8; }
  .gstart-9 { grid-column-start: 9; } .gstart-10 { grid-column-start: 10; }
  /* 段違いオフセット（3分岐カード等の非対称リズム用） */
  .goffset-1 { margin-top: var(--sp-6); }
  .goffset-2 { margin-top: var(--sp-12); }
}

/* 写真×テキストの2分割（左右は .split--flip で必ず交互反転・§9） */
.split { display: grid; gap: var(--sp-4); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 6fr; gap: var(--sp-8); }
  .split__media { order: 2; }
  .split__body  { order: 1; }
  .split--flip .split__media { order: 1; }
  .split--flip .split__body  { order: 2; }
}

/* =====================================================================
   05. テクスチャ・モチーフ（計測と検査の図形言語＋銘板）
   規律：1画面（1ビューポート）にモチーフは2種まで。うるさくなったら負け。
   ===================================================================== */

/* --- 目盛（スケールティック）。ゴニオメーター・血圧計の目盛に由来 --- */
.u-ticks {
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 8px);
}
.u-ticks--major {  /* 5目盛ごとに長針（40px周期・高さ12px） */
  height: 12px;
  background-image:
    repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 40px);
  background-size: 100% 8px, 100% 12px;
  background-position: left bottom, left bottom;
  background-repeat: no-repeat;
}
.u-ticks--dark {   /* 深鋼地用（白2〜4%目盛・B案グラフト・ベタ回避） */
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 8px);
}
.u-ticks--dark.u-ticks--major {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 40px);
}

/* --- 照準（クロスヘア「＋」）。刺鍼点・触診点の抽象化 --- */
.u-crosshair { position: relative; }
.u-crosshair::before {
  content: "";
  width: 12px; height: 12px;
  display: inline-block;
  margin-right: var(--sp-1);
  vertical-align: -1px;
  background:
    linear-gradient(var(--c-steel), var(--c-steel)) center / 1px 12px no-repeat,
    linear-gradient(var(--c-steel), var(--c-steel)) center / 12px 1px no-repeat;
}

/* --- 角度アーク（ゴニオメーターの分度器弧・透過4%・inline SVG） --- */
.u-arc {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%2324435C%22%20opacity%3D%220.55%22%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%220%22%20r%3D%22600%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%220%22%20r%3D%22480%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%220%22%20r%3D%22560%22%20stroke-width%3D%2224%22%20stroke-dasharray%3D%222%2046.9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right -10% top -20%;
  background-size: 60vmin auto;
  /* SVG側stroke opacity .55 × 実効面積で透過2〜4%相当（#24435C固定） */
}

/* --- 微細方眼（計測用紙＝8pxグリッドの可視化・opacity 3〜5%） --- */
.u-grid8 {
  background-image:
    repeating-linear-gradient(0deg,  rgba(36, 67, 92, .04) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(36, 67, 92, .04) 0 1px, transparent 1px 8px);
}

/* --- グレイン（feTurbulence・深鋼面専用。白面には使わない） --- */
.u-grain { position: relative; }
.u-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  opacity: .04;
  mix-blend-mode: screen;
}
.u-grain > * { position: relative; z-index: 1; }

/* --- 診療科銘板（B案グラフト・記憶の第二の柱）。
       写真キャプション・3分岐入口・カード見出し・学科区分は全てこの文法。
       通し番号は全サイト固定：01柔整／02鍼灸／03W併修／04OC／05社会人 --- */
.plate {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--c-steel);
  color: #fff;                              /* #fff/steel 10.33:1 AAA */
  border-radius: var(--r-0);                /* 直角 */
  padding: 6px 14px 6px 10px;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.plate .en { font-weight: 600; letter-spacing: .08em; }
.plate--line {                              /* 白地用の枠版 */
  background: transparent;
  color: var(--c-steel);                    /* steel/base 9.78:1 AAA */
  border: 1px solid var(--c-steel);
}
.plate--deep {                              /* 暗帯上用 */
  background: var(--c-steel-deep);
  border: 1px solid rgba(255, 255, 255, .25);
}

/* --- 精密ヘアライン罫「計測開始線」（左端24px・鋼青2px重ね・全ページ同一規則） --- */
.rule-h {
  position: relative;
  border: 0;
  border-top: 1px solid var(--c-line);
}
.rule-h::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 24px; height: 2px;
  background: var(--c-steel);
}

/* =====================================================================
   06. 写真処理（15点・CSSフィルタのみ・元ファイル非加工）
   割当は DESIGN_SYSTEM.md §5 の表に従う。逸脱はPolish承認制。
   ===================================================================== */
.ph-clinical { filter: saturate(.6) contrast(1.06) brightness(1.02); }  /* 標準。明るい低彩度。暗くしない */
.ph-duotone-wrap { background: var(--c-steel); }
.ph-duotone-wrap img { filter: grayscale(1); mix-blend-mode: luminosity; }  /* 鋼青デュオトーン。世界観面積専用 */
.ph-natural { filter: saturate(.9); }        /* 1割の体温。OC文脈限定・全サイト2点まで */

/* 写真共通造形：角丸r-2以下＋1px鋼青キーライン＋四隅L字マーカー */
.figure { position: relative; display: block; }
.figure > img,
.figure > .ph-duotone-wrap {
  border-radius: var(--r-2);
  outline: 1px solid var(--c-steel);
  outline-offset: -1px;
}
.figure > .ph-duotone-wrap { display: block; overflow: hidden; }  /* inlineのままだと鋼青下地が画像背後に敷かれずデュオトーン失効 */
.figure::before, .figure::after,
.figure .figure__corners::before, .figure .figure__corners::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 0 solid var(--c-steel);
  pointer-events: none;
}
.figure::before                    { top: -4px;    left: -4px;  border-top-width: 1px; border-left-width: 1px; }
.figure::after                     { top: -4px;    right: -4px; border-top-width: 1px; border-right-width: 1px; }
.figure .figure__corners::before   { bottom: -4px; left: -4px;  border-bottom-width: 1px; border-left-width: 1px; }
.figure .figure__corners::after    { bottom: -4px; right: -4px; border-bottom-width: 1px; border-right-width: 1px; }
.figure__cap { margin-top: var(--sp-1); }    /* キャプションは .plate--line を併用 */

/* =====================================================================
   07. CTAボタン・リンク
   共通：radius --r-1・高さ48px以上・タップ44px以上・hoverで目盛線が伸びる
   ===================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 48px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
  text-align: center;
  overflow: hidden;
  transition: background-color var(--dur-1) var(--ease-expo),
              color var(--dur-1) var(--ease-expo),
              box-shadow var(--dur-1) var(--ease-expo);
}
.btn .en { font-weight: 600; }
/* hover：目盛線が伸びる線アニメ（scaleX・--dur-1） */
.btn::after {
  content: "";
  position: absolute;
  left: var(--sp-2); right: var(--sp-2); bottom: 6px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-1) var(--ease-expo);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }

/* 主CTA＝シグナル深緋×白（7.90:1）。OC予約系専用 */
.btn--primary { background: var(--c-signal); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--c-signal-hover); } /* 9.89:1 */

/* 第2CTA＝鋼青×白（10.33:1）。資料請求・個別相談など */
.btn--secondary { background: var(--c-steel); color: #fff; }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--c-steel-deep); } /* 14.75:1 */

/* 第3CTA＝墨黒1pxアウトライン。文脈CTA・詳細導線。hoverで塗り反転（正典§6） */
.btn--tertiary { background: transparent; border: 1px solid var(--c-ink); color: var(--c-ink); }
.btn--tertiary:hover, .btn--tertiary:focus-visible { background: var(--c-ink); color: var(--c-base); }

/* 深鋼地用＝白1pxアウトライン（最終CTA帯の第2CTA）。hoverで塗り反転 */
.btn--outline-white { background: transparent; border: 1px solid #fff; color: #fff; }
.btn--outline-white:hover, .btn--outline-white:focus-visible { background: #fff; color: var(--c-steel-deep); }

.btn--block { display: flex; width: 100%; }

/* テキストリンク＝鋼青＋下線 */
.link-text {
  color: var(--c-steel);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-1) var(--ease-expo);
}
.link-text:hover { text-decoration-thickness: 2px; }

/* =====================================================================
   08. ヘッダー・ドロワー
   透過（臨床白グラデ）→スクロールで88%白＋blur固定・高さ72px
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(247, 249, 250, .94) 0%, rgba(247, 249, 250, 0) 100%);
  transition: background-color var(--dur-1) var(--ease-expo),
              box-shadow var(--dur-1) var(--ease-expo);
}

/* --- 制度適格性の細帯（REFERENCES.md §3-5：新宿医療 .seo 型）
   面積を食わずに全ページで制度適格性を宣言する。テキストのみ（リンクにしない＝
   26〜30px高ではタップ44px規範を満たせないため。導線は本文・CTAが担う） --- */
.topbar {
  flex: 0 0 var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--c-mist);
  border-bottom: var(--bd-hair);
}
.topbar__inner {
  width: min(100% - var(--gutter) * 2, 1360px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: .6875rem;                       /* 11px。装飾的な補助表示 */
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--c-steel);                     /* steel/mist 9.18:1 AAA */
  white-space: nowrap;
  overflow: hidden;
}
.topbar__item { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.topbar__item::before {                      /* 照準マーカー（1pxクロス・銘板文法の最小単位） */
  content: "";
  flex: none;
  width: 8px; height: 8px;
  background:
    linear-gradient(var(--c-steel), var(--c-steel)) center / 1px 8px no-repeat,
    linear-gradient(var(--c-steel), var(--c-steel)) center / 8px 1px no-repeat;
}
.topbar__sub { color: var(--c-ink); font-weight: 400; }
@media (max-width: 767px) {
  .topbar__inner { font-size: .625rem; letter-spacing: .02em; }
  .topbar__sub,
  .topbar__item--second { display: none; }   /* SPは第1項目のみ・1行に収める */
}
.site-header.is-scrolled,
body.nav-open .site-header {
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--c-line);       /* 下辺ヘアライン */
}
.site-header__inner {
  width: min(100% - var(--gutter) * 2, 1360px);
  margin-inline: auto;
  flex: 1;                                   /* .topbar と合わせて --header-h を分け合う */
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* 校名ロゴ（墨黒・テキストロックアップ） */
.brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.3; }
.brand__en {
  font-size: .625rem;
  color: var(--c-steel);
}
.brand__name {
  font-family: var(--font-display);
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .06em;
  color: var(--c-ink);
}

/* PCナビ */
.gnav { display: flex; align-items: center; gap: var(--sp-3); }
.gnav__list { display: flex; align-items: center; gap: var(--sp-1); list-style: none; }
.gnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-1) 12px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-ink);
}
.gnav__link::after {                        /* hover＝目盛線 */
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 6px;
  height: 1px;
  background: var(--c-steel);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-1) var(--ease-expo);
}
.gnav__link:hover::after,
.gnav__link[aria-current="page"]::after { transform: scaleX(1); }
.gnav__link[aria-current="page"] { color: var(--c-steel); font-weight: 700; }

.header-tel {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
  min-height: 44px;
  justify-content: center;
}
.header-tel__num { font-size: 1.125rem; font-weight: 700; color: var(--c-steel); }
.header-tel__note { font-size: .625rem; color: var(--c-text-sub); }
/* ↑ .header-tel__note は10px：--c-text-subの14px規範の例外を避けるため
   Polish確認対象。問題があれば --c-ink に変更する */
.header-cta { min-height: 48px; padding-inline: var(--sp-3); }
/* ヘッダー資料請求（PC常設第3導線・チェックリスト#1）：.link-text と併用する軽量テキスト枠。
   btn型にしない理由＝1100〜1250px幅でヘッダー内折返しリスクがあるため。タップ44px確保 */
.header-req {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .04em;
}

/* ハンバーガー（線2本・44px角） */
.nav-toggle {
  position: relative;
  width: 44px; height: 44px;
  display: none;
  border-radius: var(--r-1);
}
.nav-toggle__bar,
.nav-toggle__bar::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px; height: 1px;
  background: var(--c-ink);
  transition: transform var(--dur-1) var(--ease-expo);
}
.nav-toggle__bar { top: 18px; display: block; }
.nav-toggle__bar::before { top: 8px; left: 0; }
body.nav-open .nav-toggle__bar { transform: translateY(4px) rotate(45deg); }
body.nav-open .nav-toggle__bar::before { transform: translateY(-8px) rotate(-45deg); }

/* ドロワー（SP・全面臨床白・CTA内包）
   閉状態は visibility:hidden（flatモードのtransform:none強制でも閉を維持） */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--c-base);
  padding: calc(var(--header-h) + var(--sp-4)) var(--gutter) var(--sp-8);
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--dur-1) var(--ease-expo),
              visibility 0s linear var(--dur-1);
}
body.nav-open .drawer {
  visibility: visible;
  transform: none;
  transition: transform var(--dur-1) var(--ease-expo);
}
.drawer__list { list-style: none; border-top: var(--bd-hair); }
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: var(--sp-1) var(--sp-1);
  border-bottom: var(--bd-hair);
  font-family: var(--font-display);
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .06em;
}
.drawer__link .en { font-size: var(--fs-small); color: var(--c-steel); font-weight: 600; }
.drawer__cta { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }

/* --- ドロワー内の訪問者別6分岐（REFERENCES.md §3-1・東洋医療型）
   PC本文のカードとラベルを組み替える：SPは検索意図に寄せた呼びかけにする
   （PC「社会人・既卒の方へ」→ SP「働きながら学びたい方へ」） --- */
.drawer__guide { margin-top: var(--sp-5); }
.drawer__guide-head {
  display: block;
  font-family: var(--font-en);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-steel);
}
.drawer__guide-list { list-style: none; margin-top: var(--sp-2); border-top: var(--bd-hair); }
.drawer__guide-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-1);
  border-bottom: var(--bd-hair);
  font-size: var(--fs-small);
  font-weight: 500;
}
.drawer__guide-list a .en { color: var(--c-steel); font-weight: 600; }
.drawer__tel {
  margin-top: var(--sp-3);
  text-align: center;
  font-size: var(--fs-small);
}
.drawer__tel .en {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-steel);
  /* タップ44px確保（AAA実装要件・実測40px→44px）：flex中央寄せでmin-height付与 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

@media (max-width: 1099px) {
  .gnav, .header-tel, .header-cta { display: none; }
  .nav-toggle { display: block; }
}

/* =====================================================================
   09. SP固定フッター4枠（900px未満のみ・PCとは別コンポーネント）
   ファネル順：資料請求→OC予約（主役・唯一の彩色枠）→個別相談→電話
   アイコンなし文字のみ（銘板文法）・タップ各枠44px以上
   ===================================================================== */
.spfooter {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 45;
  display: none;
  grid-template-columns: 1fr 1.4fr 1fr .8fr;
  background: var(--c-steel-deep);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: var(--sh-2);
}
@media (max-width: 899px) { .spfooter { display: grid; } }
.spfooter__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--sp-1);
  color: #fff;                               /* #fff/steel-deep 14.75:1 */
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.4;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.spfooter__item:first-child { border-left: 0; }
.spfooter__item--primary {
  background: var(--c-signal);               /* #fff/signal 7.90:1 */
  font-weight: 700;
  border-left: 0;
}
.spfooter__item--primary:active { background: var(--c-signal-hover); }
.spfooter__small { font-size: .6875rem; font-weight: 500; letter-spacing: .06em; }
.spfooter__main  { font-size: .9375rem; }

/* =====================================================================
   10. コンポーネント
   ===================================================================== */

/* --- セクション見出しの規範形（§9）：plate → 英字ラベル → 和文見出し → 計測開始線 --- */
.sec-head { margin-bottom: var(--sp-5); }
.sec-head > * + * { margin-top: var(--sp-1); }
.sec-head__label {
  display: block;
  font-size: .75rem;
  color: var(--c-steel);
}
.sec-head__title { font-size: var(--fs-h2); }
.sec-head .rule-h { margin-top: var(--sp-2); }

/* --- 訪問者別入口3分岐（銘板文法カード・全体がリンク） --- */
.entry {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  background: var(--c-panel);
  border: var(--bd-hair);
  border-radius: var(--r-1);
  padding: var(--sp-3);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-1) var(--ease-expo);
}
.entry:hover { box-shadow: var(--sh-2); }
.entry .plate { align-self: flex-start; }
.entry__title { font-size: var(--fs-h3); }
.entry__arrow {
  display: inline-block;
  margin-left: var(--sp-1);
  color: var(--c-steel);
  font-weight: 600;
  transition: transform var(--dur-1) var(--ease-expo);
}
.entry:hover .entry__arrow { transform: translateX(4px); }
.entry__lead { font-size: var(--fs-small); color: var(--c-text-sub); }

/* --- 訪問者別の補助3分岐（主要3カードの下段・銘板リスト形式）
   REFERENCES.md §3-1：東洋医療は6分岐すべてに独立ページを持つ。プロトタイプでは
   主要3＝カード／補助3＝リストの2階層とし、本番の独立ページは SITEMAP_PROPOSAL.md に設計 --- */
.entry-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-panel);
  border: var(--bd-hair);
  border-radius: var(--r-1);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur-1) var(--ease-expo);
}
.entry-sub:hover { box-shadow: var(--sh-2); }
.entry-sub:hover .entry__arrow { transform: translateX(4px); }
.entry-sub__label { font-weight: 700; line-height: 1.5; }
.entry-sub__note {
  display: block;
  font-size: var(--fs-small);                /* 14px：--c-text-sub の使用下限 */
  font-weight: 400;
  color: var(--c-text-sub);
}
.entry__media img {
  border-radius: var(--r-2);
  outline: 1px solid var(--c-steel);
  outline-offset: -1px;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;          /* カード幅が違っても写真比率を揃える */
  object-fit: cover;
}

/* --- stat数字ブロック（計器型）。上下に .u-ticks を伴って使う ---
   条件併記必須：数字の隣接位置に .stat__cond（NGゲート3）
   国試プレースホルダは .stat--pending：00.0%＋全国平均併記枠＋仮表示注記 */
.stat { padding: var(--sp-4) var(--sp-3); }
.stat__num {
  font-size: var(--fs-stat);
  font-weight: 700;
  line-height: 1.05;
  color: var(--c-steel);                     /* steel/panel 10.33:1・steel/mist 9.18:1 */
  font-feature-settings: normal;
}
.stat__num .stat__unit { font-size: .38em; font-weight: 600; letter-spacing: .04em; }
.stat--xl .stat__num { font-size: var(--fs-stat-xl); }
.stat__label { font-weight: 700; margin-top: var(--sp-1); }
.stat__cond {
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  margin-top: var(--sp-1);
  line-height: 1.6;
}
.stat__note {
  font-size: var(--fs-small);
  color: var(--c-text-sub);
  margin-top: var(--sp-1);
  line-height: 1.6;
}
.stat--pending .stat__num { color: var(--c-text-sub); }  /* 仮表示＝実数と誤認させない減灰 */

/* --- 学科カード --- */
.dept-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-panel);
  border: var(--bd-hair);
  border-radius: var(--r-1);
  overflow: hidden;
  transition: box-shadow var(--dur-1) var(--ease-expo);
}
.dept-card:hover { box-shadow: var(--sh-2); }
.dept-card__plate { position: absolute; top: 0; left: 0; z-index: 2; }
.dept-card__media img { width: 100%; height: auto; object-fit: cover; }
.dept-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}
.dept-card__title { font-size: var(--fs-h3); }
.dept-card__meta { font-size: var(--fs-small); color: var(--c-text-sub); }
.dept-card__list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-small); }
.dept-card__foot { margin-top: auto; padding-top: var(--sp-2); border-top: var(--bd-hair); }

/* --- 比較表（ラボレポート様式）。SPは縦積みカード化（§6・横スクロール不使用） --- */
.labtable {
  width: 100%;
  background: var(--c-panel);
  border: var(--bd-hair);
  font-size: var(--fs-body);
}
.labtable caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  padding-bottom: var(--sp-1);
}
.labtable th, .labtable td {
  border: var(--bd-hair);
  padding: var(--sp-2) var(--sp-2);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}
.labtable thead th {
  background: var(--c-mist);
  font-weight: 700;
  font-family: var(--font-body);
}
.labtable tbody th[scope="row"] { font-weight: 500; background: var(--c-base); white-space: nowrap; }
.labtable td.is-num { text-align: right; }   /* 数字・時刻セルは .en 併用で右揃えtabular */
@media (min-width: 768px) {
  .labtable tbody tr { transition: background-color var(--dur-1) var(--ease-expo); }
  .labtable tbody tr:hover { background: var(--c-mist); }
}
@media (max-width: 767px) {
  /* 縦積みカード化：thead不可視化＋data-label疑似ヘッダ */
  .labtable { border: 0; background: transparent; }
  .labtable thead { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; width: 1px; height: 1px; }
  .labtable tbody tr {
    display: block;
    background: var(--c-panel);
    border: var(--bd-hair);
    margin-bottom: var(--sp-2);
  }
  .labtable tbody th[scope="row"] {
    display: block;
    background: var(--c-mist);
    border: 0;
    border-bottom: var(--bd-hair);
    white-space: normal;
  }
  .labtable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-2);
    border: 0;
    border-bottom: var(--bd-hair);
  }
  .labtable tbody td:last-child { border-bottom: 0; }
  .labtable tbody td::before {
    content: attr(data-label);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--c-text-sub);
    flex-shrink: 0;
  }
  .labtable td.is-num { text-align: right; }
}

/* --- タイムライン（目盛付き・3年間の流れ等） --- */
.tl {
  list-style: none;
  position: relative;
  padding-left: var(--sp-5);
}
.tl::before {                                /* 縦の計測線 */
  content: "";
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: var(--c-line);
}
.tl::after {                                 /* 縦目盛（8px刻み） */
  content: "";
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 8px;
  background-image: repeating-linear-gradient(180deg, var(--c-line) 0 1px, transparent 1px 8px);
}
.tl__item { position: relative; padding-bottom: var(--sp-5); }
.tl__item:last-child { padding-bottom: 0; }
.tl__item::before {                          /* 照準ノード */
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-5) + 3px);
  top: 4px;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--c-steel), var(--c-steel)) center / 1px 11px no-repeat,
    linear-gradient(var(--c-steel), var(--c-steel)) center / 11px 1px no-repeat,
    var(--c-base);
}
.tl__plate { margin-bottom: var(--sp-1); }
.tl__title { font-size: var(--fs-h3); margin-bottom: var(--sp-1); }
.tl__body { font-size: var(--fs-body); }

/* --- FAQ（details/summaryネイティブ・敬体で制度・事実の回答） --- */
.faq {
  background: var(--c-panel);
  border: var(--bd-hair);
  border-radius: var(--r-2);
}
.faq + .faq { margin-top: var(--sp-2); }
.faq__q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-expo);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--c-mist); }
.faq__icon {                                 /* ＋/−（1px線・回転しない） */
  position: relative;
  flex-shrink: 0;
  width: 16px; height: 16px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  background: var(--c-steel);
  transition: transform var(--dur-1) var(--ease-expo);
}
.faq__icon::before { left: 2px; right: 2px; top: 50%; height: 1px; }          /* 横線 */
.faq__icon::after  { top: 2px; bottom: 2px; left: 50%; width: 1px; }          /* 縦線 */
.faq[open] .faq__icon::after { transform: scaleY(0); }
.faq__a {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-top: var(--bd-hair);
}

/* --- 「募集中」マーカー（--c-signal許可箇所。1ビューポート1個原則） --- */
.marker-open {
  display: inline-block;
  border: 1px solid var(--c-signal);
  color: var(--c-signal);                    /* signal/base 7.49:1・signal/panel 7.90:1 */
  border-radius: var(--r-0);
  padding: 2px 10px;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.6;
}

/* --- 最終CTA帯（深鋼地・障壁除去文言スロット付き・見出しのみ中央揃え） --- */
.cta-band {
  position: relative;
  background: var(--c-steel-deep);
  color: var(--c-base);                      /* base/steel-deep 13.96:1 */
  text-align: center;
  overflow: hidden;
}
.cta-band__inner { padding-block: var(--sp-10); }
@media (min-width: 900px) { .cta-band__inner { padding-block: var(--sp-12); } }
.cta-band__title {
  color: #fff;                               /* #fff/steel-deep 14.75:1 */
  font-size: var(--fs-h2);
}
.cta-band__lead { margin-top: var(--sp-2); max-width: 40em; margin-inline: auto; }
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.cta-band__actions .btn { min-width: 280px; }
@media (max-width: 599px) {
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .cta-band__actions .btn { min-width: 0; }
}
/* 障壁除去スロット（AAAゲート⑤・銘板リストで常設・語り口はTONE.md NGリスト厳守） */
.cta-band__barriers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
}
.cta-band__barriers .plate--deep { font-weight: 400; }

/* =====================================================================
   11. フッター（深鋼地・暗色ベタ許可箇所②）
   ===================================================================== */
.site-footer {
  background: var(--c-steel-deep);
  color: var(--c-base);                      /* base/steel-deep 13.96:1 */
  font-size: var(--fs-small);
  line-height: 1.8;
}
.site-footer a { color: #fff; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__inner { padding-block: var(--sp-8) var(--sp-4); }
.site-footer__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: 4fr 2fr 3fr 3fr; gap: var(--sp-4); }
}
.site-footer__brand .brand__name { color: #fff; font-size: 1.25rem; }
.site-footer__brand .brand__en { color: var(--c-base); }
.site-footer__head {
  display: block;
  font-size: .75rem;
  color: var(--c-base);
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.site-footer__list { list-style: none; }
.site-footer__list li { margin-bottom: var(--sp-1); }
.site-footer__tel { margin-top: var(--sp-2); }
.site-footer__tel .en { font-size: 1.5rem; font-weight: 700; color: #fff; }
/* フッター電話（cta_{page}_final_tel）：タップ44px確保（AAA実装要件・実測32px→44px） */
.site-footer__tel a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* フッター内インラインリンク（cta_{page}_final_req「お問い合わせフォーム」）：
   タップ44px確保（実測21px→45px）。インライン要素の縦paddingは行送りを変えず
   ヒットエリアとrectのみ拡張する。上6px/下18pxの非対称配分で、直上行の
   電話リンク（tel:）への誤タップ域侵食を最小化 */
.site-footer__list a.gtm_cta {
  padding-block: 6px 18px;
}
.site-footer__note { margin-top: var(--sp-2); }
/* 暗地フッター内の .t-sub は色を臨床白へ上書き（--c-text-sub #55606A は
   steel-deep 地で承認ペア外＝コントラスト不足のため。base/steel-deep 13.96:1 を維持） */
.site-footer .t-sub { color: var(--c-base); opacity: .85; }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-block: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
  align-items: center;
}
.site-footer__copy { font-size: .75rem; }

/* =====================================================================
   12. モーション（宣言的API・js/main.jsと対）
   出現：opacity 0→1＋translateY(12px)→0・--dur-2 --ease-expo・1回のみ
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease-expo),
              transform var(--dur-2) var(--ease-expo);
}
[data-reveal].is-inview { opacity: 1; transform: none; }

/* 線の伸長リビール（rule-h等）：data-reveal="line" */
[data-reveal="line"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-expo);
}
[data-reveal="line"].is-inview { transform: scaleX(1); }

/* グループ内スタッガー（子要素を80ms刻みで順次出現） */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease-expo),
              transform var(--dur-2) var(--ease-expo);
}
[data-reveal-group].is-inview > * { opacity: 1; transform: none; }
[data-reveal-group].is-inview > *:nth-child(2) { transition-delay: .08s; }
[data-reveal-group].is-inview > *:nth-child(3) { transition-delay: .16s; }
[data-reveal-group].is-inview > *:nth-child(4) { transition-delay: .24s; }
[data-reveal-group].is-inview > *:nth-child(5) { transition-delay: .32s; }
[data-reveal-group].is-inview > *:nth-child(6) { transition-delay: .4s; }
[data-reveal-group].is-inview > *:nth-child(7) { transition-delay: .48s; }
[data-reveal-group].is-inview > *:nth-child(8) { transition-delay: .56s; }

/* 磁力ボタン（.btn--magnetic・pointer:fine時のみJSが有効化） */
.btn--magnetic { will-change: transform; transition: transform var(--dur-1) var(--ease-expo); }