/* =========================================================
   デザイントークン（採用LP：TRIVERA建設）
   見た目の組み立ては採用LPの見本（../recruit/）にそろえ、色だけ TRIVERA にしている。
   値の根拠は DESIGN.md。共通の部品は「役割で使う色」を参照する。
   ========================================================= */
:root {
  /* ---------- 色 ---------- */
  --blue: #1a4f9c;         /* ブランドブルー（仮。ブランドカラーが届いたら差し替える） */
  --blue-deep: #12386f;
  --blue-pale: #eaf1fa;
  --blue-mist: #c7d6ec;    /* 青い背景の上の注釈（5.4:1） */
  --yellow: #f5c518;       /* 応募ボタン・手書きの線・段階の帯。白い背景の上の文字には使わない。上に載せる文字は --ink（9.6:1） */
  --yellow-deep: #e8b400;  /* 応募ボタンのホバー。--ink の文字で 8.2:1 */
  --ink: #1b2430;
  --ink-muted: #5a6472;
  --bg: #fbfbfb;
  --bg-gray: #f2f4f6;
  --white: #fff;
  --line: #d9dee5;

  /* 役割で使う色（共通の部品はこちらを参照する） */
  --color-text: var(--ink);
  --color-bg: var(--bg);
  --color-accent: var(--blue);
  --color-accent-text: var(--blue);
  --color-dark: var(--blue);         /* 色つきセクションの背景 */
  --color-dark-deep: var(--blue-deep);
  --color-light: var(--bg-gray);
  --color-overlay: rgba(0, 0, 0, .25);
  --color-line: var(--line);
  --color-cta: var(--yellow);
  --color-cta-deep: var(--yellow-deep);
  --color-mark: rgba(245, 197, 24, .5);
  --color-card: var(--white);
  --shadow-card: 0 0 14px rgba(0, 0, 0, .1);

  /* ---------- フォント（index.html の Google Fonts と合わせる） ---------- */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; /* 見出し用（明朝は使わない） */
  --font-en: "Roboto Condensed", sans-serif;

  /* ---------- 文字サイズ ---------- */
  --fz-display: clamp(32px, 3.9vw, 56px);
  --fz-catch: clamp(28px, 3.4vw, 48px);
  --fz-h2: clamp(24px, 2.5vw, 36px);
  --fz-h3: clamp(18px, 1.7vw, 24px);
  --fz-card: clamp(16px, 1.4vw, 20px);
  --fz-body: clamp(15px, 1.1vw, 16px);
  --fz-note: 13px;
  --fz-label: clamp(12px, 1vw, 14px);   /* メニューの番号など */
  --fz-en-label: 24px;                  /* セクションの英字ラベル（.en-label） */
  --fz-num: clamp(44px, 4.5vw, 64px);

  /* ---------- 余白・サイズ ---------- */
  --header-h: 72px;
  --content-max: 983px;   /* ヘッダーの中身と FV の写真が広がる最大の幅 */
  --gutter: clamp(20px, 4vw, 48px);
  --container: var(--content-max); /* 中身の幅も --content-max（983px）にそろえる */
  --container-narrow: 800px;
  --container-wide: 1280px;
  --section-space: clamp(80px, 10vw, 140px);
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 32px;
  --space-l: 64px;
  --radius: 10px;
  --radius-l: 20px;

  /* ---------- 動き ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --duration: .8s;
}

@media (max-width: 768px) {
  :root {
    --header-h: 60px;
  }
}