/* ==========================================================================
   デザイントークン ― ★色・余白・書体はこのファイルだけを直す
   ========================================================================== */

:root {
  /* ── ブランド ───────────────────────────────────────────── */
  --accent: #0F6DB0;
  --accent-strong: #0C5F9A;   /* hover。白文字で 6.18 */
  --accent-soft: #E3F1FB;     /* 特徴01の面・タグの地 */
  --accent-line: #CBE4F6;     /* 特徴01の枠 */
  --accent-light: #1689D8;    /* ⚠ 旧アクセント。装飾の線にだけ使う。文字とCTAに使わない（3.44〜3.75で不合格） */
  --sun: #F4C542;             /* マーカーの下地・装飾円。★文字を載せない */

  /* ── 文字 ───────────────────────────────────────────── */
  --ink-1: #253238;           /* 見出し・本文 */
  --ink-2: #51626B;           /* 補足 */
  --ink-3: #636E75;           /* 注記・キャプション。白地 5.23 / 薄青地 4.89 */

  /* ── 面 ─────────────────────────────────────────────── */
  --paper: #FFFFFF;
  --paper-alt: #F3F8FB;
  --paper-deep: #E9F1F6;
  --n-100: #F7FAFC;
  --n-200: #E9F1F6;
  --n-300: #D7E3EA;

  /* ── 線 ─────────────────────────────────────────────── */
  --border-1: #DCE7ED;        /* 罫線（最頻） */
  --border-2: #C2D3DC;        /* 枠線 */

  /* ── 意味づけ（この別名を使って書く） ─────────────────── */
  --text-heading: var(--ink-1);
  --text-body: var(--ink-1);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-inverse: #F6F5F4;
  --surface-page: var(--paper);
  --surface-alt: var(--paper-alt);
  --surface-card: #FFFFFF;
  --surface-inverse: #253238;
  --border-strong: var(--ink-1);
  --link: #0F6DB0;
  --link-hover: #0C5F9A;

  /* ── 黄系（特徴02） ─────────────────────────────────── */
  --sun-pale: #FDF3D6;        /* 面。--ink-1 で 11.91 */
  --sun-line: #F0DFA8;        /* 枠 */
  --sun-deep: #846400;        /* 文字。--sun-pale 上で 4.99 */
  --sun-icon: #B08307;        /* 図形。3:1 基準で 3.45 */

  /* ── 濃地の上に載せる色（フッター・パネル04） ───────── */
  --on-dark-1: #DDDFDF;       /* リンク */
  --on-dark-2: #B1B6B7;       /* 住所・本文 */
  --on-dark-3: #ABB0B2;       /* ラベル・© */
  --on-dark-body: #D3D6D7;    /* パネル04の本文 */
  --on-dark-chip: #DADCDD;    /* パネル04のチップ文字 */
  --on-dark-line: rgba(255, 255, 255, 0.35);  /* 線（文字ではない） */
  --on-dark-rule: rgba(253, 253, 252, 0.15);  /* 罫線（文字ではない） */

  /* ── フォーカス（★変更禁止。2色リング） ──────────────── */
  --focus-ring: #FFD43D;
  --focus-ring-outer: #000000;

  /* ── フォーム ────────────────────────────────────────── */
  --field-border: #6B8797;    /* 枠線。3:1 を満たす */
  --field-border-focus: #0F6DB0;
  --field-bg: #FFFFFF;
  --field-text: #253238;
  --field-placeholder: #636E75;
  --error: #B3261E;
  --error-bg: #FDECEA;
  --error-strong: #9B1C17;

  /* ── 装飾（文字を載せない） ──────────────────────────── */
  --deco-ring: rgba(22, 137, 216, 0.2);
  --bar-bg: rgba(255, 255, 255, 0.96);
  --veil-concept: linear-gradient(180deg, rgba(243, 248, 251, 0.94), rgba(255, 255, 255, 0.9));
  --veil-flow: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 248, 251, 0.88));
  --veil-price: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 248, 251, 0.9));
  --veil-access: linear-gradient(180deg, rgba(243, 248, 251, 0.93), rgba(255, 255, 255, 0.9));

  /* ── 写真マスク（★この4種以外を作らない） ───────────── */
  --photo-r: 14px;
  --blob-a: 58% 42% 50% 50% / 55% 46% 54% 45%;
  --blob-b: 46% 54% 55% 45% / 52% 44% 56% 48%;
  --blob-c: 52% 48% 44% 56% / 46% 58% 42% 54%;
  --arc: 46% 46% 12px 12px / 30% 30% 12px 12px;

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

  /* ── 文字サイズ ─────────────────────────────────────── */
  --text-display: clamp(2.375rem, 1.2rem + 3.9vw, 4.25rem);
  --text-h1: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem);
  --text-h2: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  --text-h3: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --text-hero: clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem);
  --text-panel: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  --text-panel-no: clamp(44px, 5vw, 72px);
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-body-size: 1rem;     /* 16px */
  --text-sm: 0.875rem;        /* 14px ＝ 本文の下限 */
  --text-xs: 0.75rem;         /* 12px ＝ 注記の下限 */
  --text-eyebrow: 0.75rem;    /* 12px。欧文ラベル専用（_ds の既定 13px から下げた。13px は使わない） */

  --leading-display: 1.24;
  --leading-heading: 1.42;
  --leading-body: 1.9;
  --leading-tight: 1.55;

  --tracking-heading: 0.028em;
  --tracking-body: 0.02em;
  --tracking-eyebrow: 0.14em;
  --tracking-latin: 0.01em;

  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  /* ── 余白・レイアウト ────────────────────────────────── */
  --container-max: 1200px;
  --container-wide: 1280px;
  --container-narrow: 760px;
  --grid-gap: clamp(16px, 2.5vw, 32px);
  --gutter: clamp(20px, 4vw, 48px);
  --section-gap-lg: clamp(96px, 6.5vw + 48px, 160px);
  --section-gap-md: clamp(64px, 4.5vw + 32px, 104px);
  --section-gap-sm: clamp(40px, 3vw + 20px, 64px);
  --stack-heading: clamp(20px, 2vw, 32px);
  --stack-eyebrow: 12px;
  --header-h: 72px;
  --header-h-compact: 56px;
  --header-h-mobile: 60px;
  --bar-h: 72px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ── 罫線・角丸・影 ──────────────────────────────────── */
  --radius-s: 2px;
  --radius-m: 6px;
  --radius-l: 12px;
  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--border-1);
  --hairline-2: 1px solid var(--border-2);
  --rule-strong: 1px solid var(--border-strong);
  --shadow-1: 0 1px 2px rgba(26, 21, 18, 0.06), 0 4px 12px rgba(26, 21, 18, 0.05);
  --shadow-2: 0 4px 8px rgba(26, 21, 18, 0.08), 0 16px 40px rgba(26, 21, 18, 0.12);
  --shadow-header: 0 1px 0 var(--border-1), 0 8px 24px rgba(26, 21, 18, 0.05);
  --shadow-panel: 0 -16px 40px rgba(37, 50, 56, 0.12);

  /* ── モーション ──────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 560ms;
  --reveal-shift: 16px;

  --fx-parallax: 1;
  --fx-motion: 1;
}

@media (max-width: 767px) {
  :root { --fx-parallax: 0; }   /* スマホではパララックスを切る */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --reveal-shift: 0px;
    --fx-parallax: 0;
    --fx-motion: 0;
  }
}