:root {
  /* ── 面（背景）───────────────────────────────── */
  --surface-page:      #f2f0eb;  /* 紙白。ページ全体の地色 */
  --surface-alt:       #e9e4db;  /* 交互に敷く地色 */
  --paper-deep:        #d9d2c7;  /* 深い紙色 */
  --paper-deep-hover:  #cfc7b8;  /* 上の hover */
  --surface-inverse:   #22262a;  /* 暗転帯・フッター */
  --surface-hero:      #23272c;  /* Hero・空間の暗い面 */

  /* ── 文字（明るい面の上）──────────────────────── */
  --ink-1:             #35393c;  /* 本文・見出し。紙白の上で 10.2:1 */
  --text-muted:        #5d6265;  /* 補助テキスト。紙白の上で 5.42:1 */

  /* ── 文字（暗い面の上）────────────────────────── */
  --on-dark:           #f4f2ec;  /* 主文字・写真上キャプション */
  --on-dark-head:      #e9e6de;  /* 見出し */
  --on-dark-cta:       #efede6;  /* 固定CTAバー */
  --on-dark-body:      #dad7cf;  /* フッター本文 */

  /* ── アクセント（藍鉄）― 唯一の有彩色 ─────────── */
  --accent:            #3f5b6d;  /* ボタン地・リンク hover */
  --accent-strong:     #2f4859;  /* ボタン hover / active */
  --accent-light:      #9db4c2;  /* 暗い面の英字ラベル・リンク hover */
  --accent-lighter:    #c3d2db;  /* 暗い面のリンク active */

  /* ── 装飾 ─────────────────────────────────────── */
  --watermark:         #c6c1b4;  /* 透かし漢字。⚠ aria-hidden="true" 必須 */
  --rule:              rgba(53, 57, 60, .12);   /* 罫線（紙白の上） */
  --rule-dark:         rgba(244, 242, 236, .18);/* 罫線（暗い面の上） */

  /* ── 写真の上に文字を置くときのスクリム ──────────
   */
  --scrim-plate:       rgba(28, 32, 35, .72);  /* 写真上キャプションの板 */
  --scrim-label:       rgba(28, 32, 35, .68);  /* 分岐カードの大ラベル */
  --scrim-hero-v:      linear-gradient(to top, rgba(20,23,26,.42), rgba(20,23,26,.18) 45%, rgba(20,23,26,.34) 100%);
  --scrim-hero-h:      linear-gradient(to right, rgba(20,23,26,.34), rgba(20,23,26,0) 38%, rgba(20,23,26,0) 72%, rgba(20,23,26,.34) 100%);
  --scrim-flat-45:     rgba(20, 23, 26, .45);  /* 06 空間の全面 */
  --scrim-bottom-55:   linear-gradient(to top, rgba(20,23,26,.55), rgba(20,23,26,0) 55%);
  --scrim-left-55:     linear-gradient(to right, rgba(20,23,26,.55), rgba(20,23,26,0) 60%);
  --scrim-bottom-62:   linear-gradient(to top, rgba(20,23,26,.62), rgba(20,23,26,0));

  /* ── 書体 ─────────────────────────────────────── */
  --font-serif:  'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;  /* 地の書体 */
  --font-sans:   'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-latin:  'Archivo', 'Noto Sans JP', sans-serif;

  --tracking-heading: 0.12em;
  --leading-body:     2.1;

  /* ── 文字サイズ ───────────────────────────────
   */
  --fs-label:  12px;    /* ★限定用途のみ。ハレノヒと同じ枠組みの例外 */
  --fs-small:  14px;    /* 補助テキスト・品名の説明・ナビ和文 */
  --fs-body:   16px;    /* 本文 */
  --fs-body-l: 17px;    /* 本文（大） */
  --fs-lead:   18px;    /* リード文 */
  --fs-num:    21px;    /* 電話番号・金額 */
  --fs-logo:   20px;    /* ロゴ */

  /* ── 余白・グリッド ───────────────────────────── */
  --container-max:  1240px;
  --gutter:         clamp(24px, 6vw, 80px);
  --grid-gap:       24px;
  --section-gap-sm: clamp(64px, 9vw, 112px);
  --section-gap-md: clamp(104px, 14vw, 176px);
  --section-gap-lg: clamp(152px, 20vw, 256px);

  /* ── 角丸 ― すべて 0。直角 ─────────────────────── */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* ── 画像比率 ─────────────────────────────────── */
  --ratio-primary:   3 / 4;   /* 主写真（縦） */
  --ratio-secondary: 4 / 3;   /* 情景カード（横） */

  /* ── モーション（水の流れ：遅く・滑らかに）──────── */
  --dur-fast:  500ms;
  --dur-base:  1000ms;
  --dur-slow:  1800ms;
  --ease-out:  cubic-bezier(0.19, 1, 0.22, 1);

  /* ── フォーカスリング ─────────────────────────
   */
  --focus-dark:  #101315;   /* 外側4px。明るい面で効く */
  --focus-light: #f4f2ec;   /* 内側2px。暗い面・写真の上で効く */
}

/* ── 分岐点 ──────────────────────────────
 * desktop = 1001px以上 / tablet = 621〜1000px / mobile = 620px以下
 * ⚠ JS で画面幅を見て切り替えない。CSSのメディアクエリだけを使う。
 */