/* =============================================================
   POOLO Design System — tokens.css
   デザイントークン（単一ソース）

   ブランド基準 by TABIPPO
   -------------------------------------------------------------
   ・メインカラー（公式ブランド）: #189BBC ＝ --brand
     このブルーが"主役"。本文・ヘッダー・CTA・日付帯すべてこの1色に統一。
     （旧デザインの実装アクセント #1B99B7 系・くすみ深緑 #2D3E36 は撤去）
   ・和文フォント:
       見出しの"顔" = Zen Old Mincho（明朝） … --mincho
       データ/UI見出し = Zen Kaku Gothic New … --head
       本文 = Noto Sans JP … --body
   ・欧文フォント（ブランド指定）: Jost … --en（英字ラベル／数字あしらい）
   ・脱AIの構造原則:
       グラデーション・blur影・角丸の乱発は使わない。
       フラットなベタ面（--brand）＋ 1本のヘアライン（--line）で構成する。
       角丸は 2px 基調（--radius）。影トークンは置かない（フラット面＋罫線が影の役目）。
   ・フォントの読み込みはこの tokens.css の @import に 1本化。
     各ページは tokens.css → components.css の順でリンクすれば書体まで揃う。
   =============================================================  */

@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Jost:wght@400;500;600&display=swap');

:root {

  /* ---------- Color: ブランドブルー（主役・公式メイン） ---------- */
  --brand: #189BBC;        /* 公式メインカラー。ベタ面・CTA・数字・罫の基準 */
  --brand-deep: #127E9A;   /* ホバー／強調テキスト（明朝の引用など） */
  --brand-mid: #8FC6D6;    /* 中間トーン（補助・淡い面のアクセント） */
  --brand-pale: #DDECF1;   /* 最淡の面（問いセクション・photo-break の帯） */

  /* ---------- Color: インク（文字は純黒〜ソフト黒） ---------- */
  --ink: #000000;          /* 見出し・重要テキスト（純黒） */
  --ink-soft: #1E1E1E;     /* body 既定の文字色 */
  /* 補助テキストの黒アルファ段階（本文の階調はこの範囲で付ける） */
  --ink-72: rgba(0, 0, 0, 0.72);
  --ink-66: rgba(0, 0, 0, 0.66);
  --ink-62: rgba(0, 0, 0, 0.62);
  --ink-60: rgba(0, 0, 0, 0.60);
  --ink-55: rgba(0, 0, 0, 0.55);
  --ink-50: rgba(0, 0, 0, 0.50);
  --ink-40: rgba(0, 0, 0, 0.40);

  /* ---------- Color: 背景 ---------- */
  --bg: #FFFFFF;           /* 基本背景（純白・フラット） */
  --bg-off: #F9F9F9;       /* 段差用のオフホワイト（要点／お知らせ／フッター） */

  /* ---------- Color: 罫線（影の代わりの主役） ---------- */
  --line: #E4E4E4;         /* 標準のヘアライン */
  --line-pale: #C2DCE5;    /* ブルー面上の淡い罫（問いセクション内） */

  /* ---------- Color: ブルー面の上に載る白（オンブランド） ---------- */
  --on-brand: #FFFFFF;
  --on-brand-92: rgba(255, 255, 255, 0.92);
  --on-brand-88: rgba(255, 255, 255, 0.88);
  --on-brand-75: rgba(255, 255, 255, 0.75);
  --on-brand-40: rgba(255, 255, 255, 0.40);

  /* ---------- Typography: フォントファミリー ---------- */
  --mincho: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;         /* 見出しの"顔" */
  --head: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;         /* データ・UI見出し */
  --body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;                /* 本文 */
  --en: 'Jost', sans-serif;                                                       /* 英字ラベル・数字 */

  /* =============================================================
     Typography: サイズスケール（2026-08-31 追加）
     -------------------------------------------------------------
     追加の理由：components.css のフォントサイズが 9.5 / 10 / 10.5 / 11 /
     11.5 / 12 / 12.5 / 13 / 13.5 / 14 / 14.5 / 15px の "12段階" に膨らんでいた。
     0.5px 差は視覚的に判別できないので、階層として機能しない＝ただのノイズ。
     判別できる段差だけを残して 9段階（小さい側は 4段階）に整理する。

     使い方：新規コンポーネントは必ずこのトークンから選ぶ。
     生の px を書くのは、選べる段がどうしても無いと判断できたときだけ。
     ※ 既存コンポーネントの生 px は互換のため据え置き。触るときに置き換える。
     ============================================================= */

  --fs-label: 11px;      /* 英字ラベル・目次番号（--en ＋ --ls-label と組む） */
  --fs-xs:    12.5px;    /* 注記・出典・キャプション */
  --fs-sm:    14px;      /* UI・リスト項目・表の中身 */
  --fs-base:  16px;      /* 本文 */
  --fs-md:    20px;      /* リード文・小見出し */
  --fs-lg:    26px;      /* セクション見出し */
  --fs-xl:    clamp(30px, 4.0vw, 40px);   /* 大見出し */
  --fs-2xl:   clamp(38px, 5.6vw, 60px);   /* セクションの顔 */
  --fs-3xl:   clamp(44px, 6.6vw, 76px);   /* Hero */

  /* ---------- Typography: 行間（和文は広めが基準） ---------- */
  --lh-tight: 1.35;      /* --fs-2xl 以上の大見出し */
  --lh-head:  1.55;      /* 見出し・リード */
  --lh-body:  1.95;      /* 本文の既定 */
  --lh-loose: 2.15;      /* ゆったり読ませる本文・引用 */

  /* ---------- Typography: 字間 ---------- */
  --ls-label: 0.18em;    /* 英字ラベル（大文字＋Jost） */
  --ls-head:  0.04em;    /* 和文見出し */
  --ls-body:  0.02em;    /* 和文本文 */

  /* =============================================================
     Spacing: 余白スケール（2026-08-31 追加）
     -------------------------------------------------------------
     数字ではなく "関係" で名前を付ける。--sp-1..8 のような等比の梯子だと
     「なんとなく中くらい」で選べてしまい、余白が距離を語らなくなるため。
     この命名なら、使うたびに「これは近いのか遠いのか」を決めることになる。
     ============================================================= */

  --sp-tie:   6px;                        /* 不可分：ラベルとその値、見出しと添字 */
  --sp-near:  12px;                       /* 同じかたまりの中 */
  --sp-item:  22px;                       /* 項目と項目 */
  --sp-group: 40px;                       /* 小見出しと、その外側 */
  --sp-block: 72px;                       /* ブロックとブロック */
  --sp-sec:   clamp(88px, 12vh, 132px);   /* セクションとセクション */

  /* ---------- Layout ---------- */
  --header-h: 64px;                          /* 固定ヘッダー高（≤640px で 54px） */
  /* 版面（.shell）の最大幅。1160px 固定だと 1600px 超のディスプレイで
     左右の余白ばかりが増え、中身が画面の真ん中に細く残る。
     約1611px から緩やかに広げ、1945px 以降は 1400px で止める。 */
  --shell-max: clamp(1160px, 72vw, 1400px);
  --shell-pad: clamp(22px, 5.4vw, 72px);     /* 版面の左右パディング */

  /* ---------- Shape ---------- */
  --radius: 2px;           /* 角丸の基調（タグ・ボタン）。乱発しない */
  --bw-frame: 8px;         /* Hero 写真のブルー額装罫（≤860px で 6px） */

  /* ---------- Transition ---------- */
  --trans-fast: 0.2s ease;   /* 色・罫のホバー */
  --trans-base: 0.25s ease;  /* ボタンの面 */
  --trans-slow: 0.28s ease;  /* 追従CTAのスライドイン */

  /* ---------- z-index ---------- */
  --z-header: 200;
  --z-float: 180;
}

@media (max-width: 640px) {
  :root { --header-h: 54px; }
}