/* ==========================================================================
   デザインシステム: カラー・余白・タイポグラフィ・共通ルール
   全セクションはこの変数のみを参照し、個別の色や余白を直書きしない。
   ========================================================================== */
:root {
  /* --- Color: Brand --- */
  --color-navy: #16213d;         /* 見出し・強調テキストの基準色 */
  --color-navy-deep: #0e1830;    /* ボタン・テーブルヘッダーなど最も濃い面 */
  --color-navy-soft: #3d4d72;    /* 本文中の準強調テキスト */
  --color-gold: #b3852a;         /* アクセント(強調テキスト・アイコン) */
  --color-gold-deep: #96701f;    /* ゴールドのホバー・濃色 */

  /* --- Color: Background --- */
  --color-bg: #ffffff;
  --color-bg-soft: #eef1f8;      /* パネル・カードの淡い背景(ブルー系) */
  --color-bg-blue: #eef1f8;      /* ブルー系の淡い背景(比較ボックス等) */
  --color-bg-hero: #f5f0e6;      /* ヒーロー(FV)専用のクリーム系背景 */
  --color-bg-gold: #faf1de;      /* ゴールド系の淡いハイライト背景 */
  --color-bg-navy: #0e1830;      /* 濃色背景セクション */

  /* --- Color: Text --- */
  --color-text: #2c2c2c;
  --color-text-muted: #6b7280;
  --color-text-on-navy: #f5f6f8;
  --color-border: #e6e2d9;
  --color-border-soft: #edeae2;

  /* --- Typography --- */
  --font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;

  --fs-h1: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  --fs-h3: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1rem, 0.92rem + 0.3vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xsmall: 0.75rem;

  --lh-tight: 1.4;
  --lh-base: 1.8;

  /* --- Spacing scale --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  /* --- Radius / Shadow --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 10px rgba(22, 33, 61, 0.06);
  --shadow-md: 0 8px 28px rgba(22, 33, 61, 0.08);

  /* --- Layout --- */
  --container-width: 1180px;
  --container-padding: clamp(1.25rem, 4vw, 2rem);
  --section-padding-y: clamp(3rem, 6vw, 6rem);

  /* --- Motion --- */
  --transition-base: 0.2s ease;
  --fade-duration: 0.6s;

  /* --- Sticky mobile CTA height (used to offset content) --- */
  --mobile-cta-height: 64px;
}