/* Design Tokens — 色・余白・サイズの唯一の出典。値はハードコードせずこの変数を使う */
:root {
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px; --space-lg: 24px;
  --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px;
  --container-max: 1280px; --content-readable: 720px; --grid-columns: 12; --grid-gutter: 24px;
  --header-h: 72px; /* ヘッダー高さ既定（PC64〜80の中値・案件で調整）。SPは56〜64目安 */
  --fs-caption: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 20px; --fs-lg: 24px;
  --fs-xl: 30px; --fs-2xl: 36px; --fs-3xl: 48px; --fs-4xl: 60px; --fs-5xl: 72px;
  --lh-body: 1.6; --lh-heading: 1.2;
  --font-base: "Noto Sans JP", system-ui, sans-serif;
  --font-heading: "Noto Sans JP", system-ui, sans-serif;
  --color-text: #1A1A1A; --color-text-sub: #555555; --color-bg: #FAFAFA;
  --brand-500: #204483;
  --color-success: #16A34A; --color-warning: #D97706; --color-error: #DC2626; --color-info: #2563EB; /* 機能色は意味固定（情報=青）。ブランド色に追従させない */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 24px; --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.1); --shadow-xl: 0 20px 25px rgba(0,0,0,.1);
  --dur-micro: 150ms; --dur-base: 250ms; --dur-large: 400ms;
  --ease-out: cubic-bezier(0,0,0.2,1); --ease-in-out: cubic-bezier(0.4,0,0.2,1);
  --tap-min: 44px; --focus-ring: 2px solid var(--brand-500); --focus-offset: 2px; --disabled-opacity: 0.45;
}
/* brand-ramp-auto: --brand-500 から50〜900を自動派生。--brand-500 の1行を変えれば全段が追従する。 */
/* ここでの white/black は「色を作る混合原料」であり、塗り色として純白#FFF・純黒#000を使う意味ではない。 */
:root {
  --brand-50:  color-mix(in srgb, var(--brand-500) 6%,  white);
  --brand-100: color-mix(in srgb, var(--brand-500) 12%, white);
  --brand-200: color-mix(in srgb, var(--brand-500) 24%, white);
  --brand-300: color-mix(in srgb, var(--brand-500) 40%, white);
  --brand-400: color-mix(in srgb, var(--brand-500) 70%, white);
  --brand-600: color-mix(in srgb, var(--brand-500) 85%, black);
  --brand-700: color-mix(in srgb, var(--brand-500) 70%, black);
  --brand-800: color-mix(in srgb, var(--brand-500) 55%, black);
  --brand-900: color-mix(in srgb, var(--brand-500) 42%, black);
}
/* ── 三洋工業 案件上書き（デザインブリーフ実測値より。design.md参照） ── */
:root {
  --color-bg: #F5F0E9;            /* お手本の白70%をベージュに置換（翻訳方針・確認A承認済） */
  --color-surface: #FFFFFF;       /* カード・表の地。ベージュ上に白で密度差を作る */
  --color-text: #2A2723;          /* ベージュに馴染む温かいダークグレー */
  --color-text-sub: #6B655D;
  --content-readable: 1060px;     /* 実測の副コンテナ（読み物ブロック） */
  --space-5xl: 160px;             /* セクション上下（実測140〜180の中値） */
  --fs-h2: 40px;                  /* 和文h2（実測40px） */
  --fs-num-giant: clamp(80px, 14vw, 220px); /* 署名の巨大数字 */
  --lh-body: 1.7; --lh-heading: 1.3;
  --radius-photo: 20px;           /* 写真カード（実測20px） */
  --radius-hero: 60px;            /* 色面ブロックの大きな曲線 */
  --dur-micro: 300ms; --dur-base: 400ms; --dur-large: 1000ms; /* 実測0.3/0.4/1s */
  --font-en: "Heebo", var(--font-base); /* 英字ディスプレイ（お手本踏襲） */
  --accent-500: #B4571F;          /* テラコッタ。使用は主CTAのみに限定 */
  --accent-600: color-mix(in srgb, #B4571F 85%, black);
  --hairline: rgba(32, 68, 131, .14); /* 区切りのヘアライン */
}
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }