/* ==========================================================================
   design tokens — 01_design-tokens.md の全定義
   新しい色・角丸を追加しないこと。clamp() の値は設計に組み込まれているため
   そのまま使用する（SP の縮小挙動が値に含まれている）。
   ========================================================================== */

:root {
  /* --- 基本色 ------------------------------------------------------------ */
  --c-navy:        #101C4C;  /* ブランドネイビー：見出し・ヘッダー/フッター背景 */
  --c-red:         #C40921;  /* ブランドレッド：キッカー帯・アクセント・現在地下線 */
  --c-offwhite:    #F2F3F3;  /* オフホワイト：紺背景上の文字・ロゴ */
  --c-text:        #4A4E5C;  /* 本文グレー：白背景上の本文 */
  --c-muted:       #8890A0;  /* 補助グレー：補足文・キャプション・年号 */

  /* --- 背景色 ------------------------------------------------------------ */
  --bg-page:       #EDEDE8;  /* ページ背景（明）: body */
  --bg-section:    #F7F7F5;  /* セクション背景（明）: 交互に敷くグレー */
  --bg-card-dark:  #1A1D2B;  /* カード背景（暗）: 紺背景上のカード（YouTube 等） */
  --bg-footer:     #0B0D18;  /* フッター背景（design/SiteFooter.dc.html の実値） */

  /* --- 限定用途 ---------------------------------------------------------- */
  --c-glow-blue:   #2F5FD6;  /* TOP ヒーロー「生め。」の袋文字・OGP。他では使わない */
  --c-on-navy:     #B9BED2;  /* 紺背景上の本文。TOP「熱」セクションのみ */

  /* --- 半透明（そのまま使用） -------------------------------------------- */
  --line-navy:     rgba(16, 28, 76, .12);   /* 罫線・境界線（白背景上） */
  --veil-navy:     rgba(16, 28, 76, .92);   /* メンバーカードの覆い（下端） */
  --line-offwhite: rgba(242, 243, 243, .5); /* 紺背景上の区切り線 */
  --shadow-sp-header: rgba(0, 0, 0, .25);   /* SP ヘッダーの影 */

  /* --- フォント ---------------------------------------------------------- */
  --f-body:    'Noto Sans JP', sans-serif;          /* 本文・ナビ・フォーム */
  --f-head:    'Zen Kaku Gothic New', sans-serif;   /* 見出し h1〜h3・キャッチコピー */
  --f-en:      'Archivo', sans-serif;               /* 英字キッカー・イニシャル・数字 */

  /* --- 見出しサイズ（clamp） --------------------------------------------- */
  --fs-page-title:    clamp(34px, 9vw, 64px);     /* 下層ページのヘッダー帯 h1 */
  --fs-h2:            clamp(28px, 5vw, 44px);     /* セクション見出し h2 */
  --fs-h2-on-navy:    clamp(26px, 5vw, 44px);     /* 紺背景のセクション見出し */
  --fs-member-h1:     clamp(26px, 3.2vw, 46px);   /* メンバーページのキャッチコピー */
  --fs-h3:            clamp(22px, 4.5vw, 28px);   /* 小セクション見出し h3 */
  --fs-initial:       clamp(24px, 2.6vw, 34px);   /* メンバーのイニシャル */
  --fs-hero:          clamp(56px, 28cqi, 300px);  /* TOP ヒーロー。cqi = コンテナクエリ単位 */

  /* --- 行間・字間 -------------------------------------------------------- */
  --lh-head:      1.4;
  --lh-body:      1.9;
  --lh-long:      2.1;   /* 長文（プライバシーポリシー・メンバー本文） */
  --lh-hero:      .84;
  --ls-kicker:    .18em; /* Archivo のキッカー */
  --ls-en:        .02em;
  --ls-hero:      -.02em;

  /* --- 余白 -------------------------------------------------------------- */
  --pad-section:      clamp(56px, 10vw, 180px) clamp(20px, 8vw, 100px);
  --pad-section-btm:  clamp(40px, 6.25vw, 120px);  /* 写真ありセクションの下部 */
  --pad-navy:         clamp(64px, 12vw, 180px) clamp(24px, 8vw, 100px) clamp(80px, 14vw, 200px);

  /* --- レイアウト -------------------------------------------------------- */
  --w-max:        1920px;  /* 最大幅 */
  --w-read:       640px;   /* 本文の読みやすい幅 */
  --w-read-wide:  min(860px, 100%);
  --h-header-pc:  clamp(88px, 8vw, 120px);
  --h-header-sp:  64px;

  /* --- 影 ---------------------------------------------------------------- */
  --shadow-photo:     0 30px 60px rgba(0, 0, 0, .2);
  --shadow-header-sp: 0 2px 16px rgba(0, 0, 0, .25);

  /* --- 傾き -------------------------------------------------------------- */
  --skew-kicker:  skewX(-20deg);  /* キッカーの帯 */
  --rot-accent:   rotate(-17deg); /* アクセントライン */
  --skew-frame:   skewX(-6deg);   /* 代表写真の枠 */

  /* --- モーション -------------------------------------------------------- */
  --ease-out:     cubic-bezier(.22, .61, .36, 1);
}

/* ブレークポイントは 768px の1点のみ。タブレット専用レイアウトは作らない。
   SP の最小想定幅は 375px。 */