/* ===========================================================
   CCC WEB標準 / 設計トークン（2026-08-27）
   これを最初に読み込む。**数値を直接書かず、必ずここの変数を使う。**

   なぜ変数だけにするのか:
     その場の勘で「ここは20px」と書くと、隣のセクションで22pxになる。
     人は毎回同じ数字を思い出せない。選べる数字を減らせば、勝手に揃う。
   =========================================================== */
:root {
  /* --- 色は「役割」で名前を付ける -------------------------
     #1d4ed8 のような値で覚えると、色を変えるとき全部を探す羽目になる。
     「primary（主役の色）」「surface（面の色）」なら、値を1行変えれば済む。 */
  --primary: #1d4ed8;        /* 主役。ボタン・リンク・強調 */
  --primary-hover: #1740b0;  /* 主役の押したとき */
  --primary-soft: #e8eeff;   /* 主役の薄い面。帯・タグの背景 */
  --on-primary: #ffffff;     /* 主役の上に乗る文字 */
  --accent: #0ea5a4;         /* 差し色。使いすぎない */

  --surface: #ffffff;        /* 基本の面 */
  --surface-alt: #f5f7fb;    /* 1段落とした面。セクションの交互敷き */
  --text: #14181f;           /* 本文 */
  --text-muted: #5b6572;     /* 補足。本文より弱く */
  --border: #e2e6ee;         /* 罫線 */

  /* --- 余白は10段階だけ（8pxの倍数を基本にする） -----------
     4/8/12/16/24/32/48/64/96/128。この中から選ぶ。
     「20px」を許すと、次の人は「18px」を使う。段階を持たない余白は必ず崩れる。 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* --- 角丸・影は4段階だけ ---------------------------------
     影を自由に書くと、同じ画面に5種類の影が並ぶ。見た目が濁る原因はたいていこれ。 */
  --radius-s: 8px; --radius-m: 14px; --radius-l: 24px; --radius-full: 999px;

  --shadow-s: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-m: 0 4px 8px -2px rgba(16,24,40,.10), 0 2px 4px -2px rgba(16,24,40,.06);
  --shadow-l: 0 20px 24px -4px rgba(16,24,40,.10), 0 8px 8px -4px rgba(16,24,40,.04);
  --shadow-xl: 0 32px 64px -12px rgba(16,24,40,.16);

  /* --- 幅と高さ ------------------------------------------- */
  --container: 1160px;       /* 本文の最大幅。これ以上広げると読みにくい */
  --header-h: 72px;          /* 追従ヘッダーの高さ。#リンクのズレ補正にも使う */

  /* --- 動きの速さ・曲線は2種類だけ -------------------------
     曲線を毎回選ぶと、画面ごとに動きの性格が変わって落ち着かない。 */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .18s;  /* 押した反応など、すぐ返すもの */
  --dur-2: .45s;  /* 現れる・消えるなど、見せるもの */

  /* --- 文字 -----------------------------------------------
     Webフォントを読み込まない。読み込むと、その1本のために表示が遅れ、
     配信元が落ちると文字が消える。OSの標準フォントは十分きれいで、速い。 */
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-en: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- 文字の大きさは clamp() で1本にする -------------------
     画面幅ごとにメディアクエリを書くと、間の幅で不格好になる。
     clamp(最小, 画面幅に応じた値, 最大) なら、どの幅でも破綻しない。 */
  --fs-hero: clamp(2.2rem, 6vw, 4.2rem);   /* KVの見出し */
  --fs-h2:   clamp(1.9rem, 4.6vw, 3.1rem); /* セクション見出し */
  --fs-h3:   clamp(1.5rem, 3.2vw, 2.3rem);
  --fs-lead: clamp(1.15rem, 2.1vw, 1.45rem); /* リード文 */
  --fs-body: clamp(1rem, 1.5vw, 1.18rem);    /* 本文 */
  --fs-small: .875rem;

  /* セクションの上下余白。ここも1本に決めて、全セクションで同じものを使う */
  --section-y: clamp(var(--s8), 9vw, var(--s10));
}