/* =====================================================================
   エルクリエイター デザインシステム ― トークン
   ---------------------------------------------------------------------
   サイト全体の「見た目の決めごと」はこのファイルだけにある。
   ここを書き換えると、全ページ（トップ・下層・事例・フォームほか）が変わる。
   components.css と各ページはこの変数しか参照しない（色や書体を直書きしない）。

   決まった経緯（2026-09）
   - 白背景／ピンク #E50079・黒・グレー … 立川さんと合意（09-24）
   - 書体はゴシック系で「読みやすさ・シンプル・大手感」 … 立川さんの指摘（09-24）
   - 見出しは日本語を大きく／角丸4〜8px／ボタンはピル型／ピンクは点とアクセントだけ
     … 立川さんへのヒアリングの回答（09-28）
   - グレーは茶色みを含まないニュートラル … 熊本さんの指摘（09-29）
   ===================================================================== */

/* ---------- 書体の読み込み（書体を変えるときは、ここと下の --font-* を一緒に直す） ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root {
  /* ---------- 書体 ---------- */
  --font-jp: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;   /* 本文・見出し */
  --font-en: 'Inter', 'Noto Sans JP', sans-serif;                          /* 英字ラベル・数字 */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-num: 600;              /* 大きな数字 */

  /* ---------- 文字サイズ（見出しと本文の差は3倍以上） ---------- */
  --fs-hero: clamp(2.25rem, 5.2vw, 4.25rem);   /* トップのキャッチ */
  --fs-page: clamp(2rem, 4.4vw, 3.5rem);       /* 下層ページのタイトル */
  --fs-h2: clamp(1.75rem, 3.4vw, 2.75rem);     /* セクション見出し */
  --fs-h3: 1.125rem;                           /* カード・項目の見出し */
  --fs-lead: 1rem;
  --fs-body: .9375rem;
  --fs-small: .8125rem;
  --fs-caption: .75rem;
  --fs-label: .8125rem;                        /* 見出しの上の英字ラベル */
  --fs-num: clamp(2.5rem, 4.4vw, 3.75rem);     /* 数字で見せる箇所 */

  --lh-body: 2;
  --lh-head: 1.4;
  --ls-head: .06em;
  --ls-body: .02em;
  --ls-label: .08em;

  /* ---------- 色 ---------- */
  --c-ink: #1C1718;          /* 見出し・主ボタン（ロゴ由来の黒） */
  --c-text: #3A3A3D;         /* 本文 */
  --c-sub: #6E6E73;          /* 補足・キャプション */
  --c-accent: #E50079;       /* ピンク：点とアクセントだけに使う。面では使わない */
  --c-kk: #E8710A;           /* 要確認（立川さんの確認待ちの仮の文・数字）の文字色。デザインのピンクと分けるためオレンジ（2026-10-09 熊本さん） */
  --c-accent-soft: #FDEEF6;  /* ピンクのごく薄い地（選択中など最小限） */
  --c-bg: #FFFFFF;
  --c-bg-alt: #F5F5F6;       /* セクションを交互に敷く淡いグレー */
  --c-line: #E4E4E7;         /* 罫線 */
  --c-line-strong: var(--c-ink);
  --c-g2: #CDCDD1;
  --c-g3: #A1A1A6;
  --c-on-ink: #FFFFFF;

  /* ---------- 形 ---------- */
  --radius: 6px;             /* 写真・カード・箱（ヒアリング：4〜8px） */
  --radius-btn: 999px;       /* ボタンとタグ（ヒアリング：ピル型） */
  --radius-photo: var(--radius);
  --shadow: none;            /* 影は使わない。区切りは余白と罫線で */

  /* ---------- 余白（8の倍数） ---------- */
  --container: 1240px;
  --pad-x: clamp(24px, 5vw, 72px);
  --sec-y: clamp(88px, 11vw, 152px);   /* セクションの上下 */
  --ph-top: clamp(112px, 10vw, 144px); /* 下層ページの頭：ヘッダーの下からパンくずまで */
  --ph-toc: below;                     /* 下層ページの頭の目次：below＝タイトル下に横一列（2026-10-06 熊本さんが決定）。on＝タイトル右／side＝左に2カラム／bar＝帯で追従／float＝右下ボタン／off＝なし */
  --gap-s: 16px;
  --gap: 32px;
  --gap-l: 64px;

  /* ---------- 動き（画面に入ったとき一度だけ） ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-reveal: 1s;
  --reveal-y: 28px;
  --dur-hover: .5s;              /* ホバーの変化。パッと切り替えず、ゆっくり（2026-10-06 熊本さん「大手っぽくない」） */

  /* ---------- トップのFV（three.js） ----------
     形：ring / cube / orbit / slices / lines / dots / ripples / wire
     速さ：1 が基準。0.5 で半分、0 で止まる */
  --fv-mode: video;     /* video＝現行サイトの公式PV（Vimeo）／three＝3Dの形（2026-10-05 熊本さん「現サイトのムービーを一旦」） */
  --mega: b;           /* メガメニュー：b＝3分割（名前｜リンク｜写真）に決定（2026-10-06 熊本さん）。now／a／c は比較用に残している */
  --cta: d;            /* CTA：d＝2枚のカード（資料ダウンロード／お問い合わせ）に決定（2026-10-06 熊本さん）。a／b／c は比較用に残している */
  --flow: e;           /* 流れ：e＝縦のタイムラインを2列に決定（2026-10-08 熊本さん）。a・b・c・d・f・g は比較用に残している */
  --sib: b;            /* 横断リンク：b＝番号つきカード（ホバーで背面に色面）に決定（2026-10-06 熊本さん）。a／b2／c は比較用に残している */
  --fv-shape: ring;
  --fv-speed: 1;
}