/* ==========================================================================
   デザイントークン
   出典: Zeplin プロジェクト 6a9621254335d1864e6edaef の実測値
         (docs/00_PROJECT_BRIEF.md「3. デザイントークン」)
   ========================================================================== */

:root {
  /* --- 配色 ---------------------------------------------------------- */
  --c-green:        #8DC21F;  /* メイン。ボタン・見出しアクセント */
  --c-green-light:  #CCDFA2;  /* 淡グリーン。セクション背景・ボタンhover(実測) */
  --c-page-band:    #CCDEA2;  /* 下層ページヘッダーの帯。--c-green-light とは1階調差（要確認） */
  --c-green-pale:   #E9F5DF;  /* さらに淡いグリーン。リード文の吹き出し */
  --c-orange:       #F5AB37;  /* アクセント。オンラインショップ系 */
  --c-orange-light: #FCD68C;  /* 淡イエロー */
  --c-red:          #D32D25;  /* アクセント。強調・注意 */

  --c-text:         #403632;  /* 本文（ダークブラウン） */
  --c-text-sub:     #7C6C63;  /* 補助テキスト */
  --c-text-hover:   #898989;  /* テキストリンク hover（制作指示書 p4） */

  --c-cream:        #FBF7E9;  /* ベース背景 */
  --c-cream-2:      #F7EFDC;  /* ベース背景2（交互セクション） */
  --c-white:        #FFFFFF;

  --c-border:       #AEAEA7;  /* カード枠線 */
  --c-rule:         #C8C8C8;  /* 罫線 */

  /* --- ボタン hover（制作指示書 p2: 淡色化） -------------------------- */
  --c-green-hover:  #CCDFA2;  /* 指示書 p02 の After をピクセル実測 */
  --c-orange-hover: #FCD68C;  /* 同上 */
  /* CTA ボタン（施設見学・体験のお申込み）の hover。白地＋橙枠 → 橙ベタ＋白文字。
     2026-09-16 市川様のご指定。--c-orange (#F5AB37) とは別の値なので独立したトークンにする。 */
  --c-cta-hover:    #F7B52C;

  /* --- タイポグラフィ ------------------------------------------------- */
  --font-base: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
               "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --lh-body:    1.8;
  --lh-heading: 1.5;

  /* --- レイアウト ----------------------------------------------------- */
  --w-content: 1160px;  /* 本文カラム幅（PC: x=380〜1540 / ガイド矩形の実測） */
  --w-wide:    1560px;  /* 帯・広めのセクション（x=180〜1740） */
  --gutter:    23px;    /* SP 左右余白（375 - 330 の半分 / 実測） */
  /* ヘッダー左右の余白。
     Zeplin は 1920px 時 210px だが、広い画面でロゴとナビが内側に寄って見えるため、
     市川様の指示（2026-09-15）で**両端いっぱい寄り**に変更した。
     1920px 以上で 50px 固定。デザイン comp とはヘッダーだけ意図的に異なる。
     元に戻すときは clamp(23px, 10.94vw, 210px) に差し替える。 */
  --pad-header: clamp(24px, 2.6vw, 50px);

  --radius-s:  8px;
  --radius:    10px;
  --radius-l:  20px;
  --radius-pill: 9999px;

  /* --- その他 --------------------------------------------------------- */
  --header-h:      120px;  /* PC ヘッダー高さ（Zeplin 実測） */
  --header-h-sp:   60px;   /* SP ヘッダー高さ（Zeplin 実測） */
  --spbar-h:       46px;   /* SP 下部固定ボタン帯の高さ（Zeplin 実測） */
  --bp-sp:         1080px; /* この幅未満で SP レイアウトへ切り替える（デザインは1920/375の2種のみのため実装判断） */
  --ease:          cubic-bezier(.22, .61, .36, 1);
}