/* デザイントークン — service-site (PC)
 * 抽出: 2026-08-04 / Figma l4m7BKyPnN5e344nMst7lV
 * 根拠と採取元は ../DESIGN-TOKENS.md を参照。
 *
 * 【禁則】このファイルに値を勝手に追加しないこと。
 * トークンに無い値に出会ったら PROGRESS.md の「トークン追加要望」に報告する。
 */

:root {
  /* --- 色: ベース --- */
  --c-navy: #152743;
  --c-text: #333e4d;
  --c-blue: #5694ef;
  /* 本文中の強調テキスト。section1 のリード文 138:12168。
     S03 で追加。PROGRESS.md「トークン追加要望」に報告済み。--c-blue とは別色 */
  --c-blue-text: #3c7ce3;
  --c-cyan: #66d0ed;
  --c-border: #dce7f5;
  /* S04 で追加。PROGRESS.md「トークン追加要望」に報告済み */
  --c-divider: #ccc; /* section2 3カラムの区切り線 138:11990 */
  --c-card-border: #95a1b3; /* section2 濃紺カードの枠 138:11951 */
  --c-tint: #edf7ff;
  --c-tint-2: #eefbff;
  --c-white: #ffffff;
  /* S06 で追加。PROGRESS.md「トークン追加要望」に報告済み。
     既存のティント系は全て青みがあり、無彩色のグレーは1つも無かった */
  --c-gray-100: #f2f2f2; /* section3b カバー率ブロックの背景 138:11677 */
  --c-gray-200: #e8e8e8; /* section3b「対応言語」バッジの背景 138:11672 */
  --c-red: #d52b2e; /* section3b カバー率の数字 138:11679 */
  /* SP08 で追加。PROGRESS-SP.md「トークン追加要望」に報告済み。
     --c-text(#333e4d) より薄く --c-footer-note(#8ca6c6) より濃い中間のグレー。
     PCの #plans5 注記は --c-text だが、SPだけこの色になっている（`4:335`） */
  --c-text-sub: #5e7188; /* #plans5 の注記（SP） */
  /* SP01 で追加。ハンバーガー `229:75` の3本線。参照画像から直接サンプリングした
     完全な黒で、--c-text(#333e4d) や --c-navy(#152743) とは別。SPのこの1箇所だけ */
  --c-sp-icon: #000000;

  /* --- 色: 濃紺背景まわり（CTA・MV） --- */
  --c-navy-900: #001432;
  --c-navy-800: #001d4d;
  --c-navy-700: #00255e;
  --c-on-navy-sub: #bcd0ec;

  /* --- 色: ボタン --- */
  --c-btn-from: #2d82ff;
  --c-btn-to: #297bed;

  /* --- 色: ヘッダー（半透明 + backdrop-filter） --- */
  --c-header-bg: rgba(255, 255, 255, 0.94);

  /* --- 色: フッター --- */
  --c-footer-bg: #071a38;
  --c-footer-note: #8ca6c6;

  /* --- 色: 濃紺面の上に置く線 --- */
  --c-hairline-on-navy: rgba(255, 255, 255, 0.14);
  --c-border-on-navy: rgba(255, 255, 255, 0.45);

  /* --- グラデーション --- */
  --g-accent-bar: linear-gradient(90deg, #5694ef 0%, #66d0ed 55%, #5694ef 100%);
  --g-button: linear-gradient(90deg, #2d82ff, #297bed);
  --g-navy: linear-gradient(161.39deg, #001432 0%, #00255e 55%, #001d4d 100%);
  /* SP10 で追加。PROGRESS-SP.md「トークン追加要望」に報告済み。
     SPの section7（`4:505`）の背景。**--g-navy とは角度も色も別物**で、
     終端が明るい青（#3c7ce3 = --c-blue-text）まで抜ける。中間の #1f3b69 は既存に無い */
  --g-navy-sp: linear-gradient(122.149deg, #152743 0%, #1f3b69 60%, #3c7ce3 100%);
  --g-tint: linear-gradient(90deg, #eefbff, #edf7ff);
  /* Figma の名前付きスタイル「グラデ2」。S02で追加し、S04で共有部品と判明したため改名。
     用途: MV h1 2行目の文字グラデ 138:12383 / section2 の帯 138:11896。
     --g-button（#2d82ff→#297bed）とは別物。始点 #20c8f6 は既存トークンに無い */
  --g-accent: linear-gradient(90deg, #20c8f6, #297bed);

  /* 装飾レイヤー（138:14498）の帯。画像ではなくCSSグラデーション */
  --g-deco-cyan: linear-gradient(90deg, rgba(102, 208, 237, 0.1), rgba(102, 208, 237, 0.03));
  --g-deco-blue: linear-gradient(90deg, rgba(86, 148, 239, 0.1), rgba(86, 148, 239, 0.03));

  /* --- フォントファミリー --- */
  --f-heading: "Zen Kaku Gothic New", sans-serif;
  --f-body: "Noto Sans JP", sans-serif;
  --f-num: "Montserrat", sans-serif;
  /* 数字用がもう1系統ある。混在は誤りではなくデザインの実態（DESIGN-TOKENS.md 参照） */
  --f-num-alt: "Figtree", sans-serif;

  /* --- フォントサイズ --- */
  --fs-h2: 30px;
  --fs-tel-lg: 28px;
  --fs-h2-sm: 20px;
  --fs-tel: 18px;
  --fs-md: 16px;
  --fs-lead: 15.5px;
  --fs-btn-lg: 15px;
  --fs-base: 14px;
  --fs-nav-sm: 13.5px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-note: 11px;
  --fs-2xs: 10.5px;

  /* --- 行間（Figma実値。normal のものはトークン化しない） --- */
  --lh-tel-lg: 33.6px;
  --lh-h2-sm: 36px;
  --lh-lead: 31px;
  --lh-tel: 20.7px;
  --lh-sm: 20px;
  --lh-note: 18.7px;
  --lh-xs: 14.4px;
  --lh-2xs: 12px;

  /* --- 字送り --- */
  --ls-tel-lg: 1.12px;
  --ls-num: 1.4px;
  --ls-num-sm: 1.2px;
  --ls-tel: 1.08px;

  /* --- 角丸 --- */
  --r-sm: 6px;
  --r-md: 8px;
  /* S06 で追加。section3a / 3b の両方でカードの角丸が12pxだったため
     （2セクション以上での再出現がトークン化の目安。CONVENTIONS.md 参照） */
  --r-card: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- 線 --- */
  --bd: 1px solid var(--c-border);

  /* --- レイアウト ---
   * .is-in の幅はセクションによって 1200 / 1168 / 980 と異なる。
   * 共通クラス側では幅を固定せず、各セクションが max-width を指定する。 */
  --w-wide: 1200px;   /* header / section4 など */
  --w-content: 1168px; /* section7 / footer など */
  --w-narrow: 980px;   /* section2 の内側ブロック */
  --pad-x: 24px;
  --h-header: 68px;
  --h-accent-bar: 3px;

  /* --- カード（section6 実測） --- */
  --card-pad-x: 20px;
  --card-pad-y: 25px;
  --card-gap: 8px;
  --grid-gap: 20px;
}