/* Design Tokens — 長津製作所 コーポレート。色・余白・サイズの唯一の出典。値はハードコードせずこの変数を使う */
/* 起点の根拠は references/design.md（キーエンス・村田の実測を比で翻訳／ブランド色はロゴ実測） */
: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; --space-5xl: 120px;
  --container-max: 1200px; /* キーエンス実測 */ --content-readable: 680px; --grid-columns: 12; --grid-gutter: 24px;
  --header-h: 104px; /* 2段ヘッダー：上段40＋下段64（キーエンス方式）。SPは1段56 */
  --header-h-sp: 56px;
  --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;
  --fs-display: 120px; /* 署名の数字「1μm」専用（design.md 逸脱に明記） */
  --lh-body: 1.75; /* キーエンス本文 28/16 */ --lh-heading: 1.4;
  --font-base: "Noto Sans JP", system-ui, sans-serif;
  --font-heading: "Noto Sans JP", system-ui, sans-serif;
  --font-num: "Helvetica Neue", Helvetica, Arial, "Noto Sans JP", sans-serif; /* 数字・英字。キーエンス方式＝システムのHelvetica/Arial（Webフォントを増やさない・Interは使わない＝ai-tell B-7） */

  /* 見出しの段（比で決める：h2 ＝ h1 ÷ 1.33／h3 ＝ 本文の1.25倍）。個別に font-size を書かない */
  --h-page: var(--fs-3xl);   /* h1（ヒーロー・下層ページ題）48 */
  --h-section: var(--fs-2xl); /* h2 36 */
  --h-block: var(--fs-md);    /* h3 20 */
  --h-page-sp: var(--fs-xl);  /* SP h1 30 */
  --h-section-sp: var(--fs-lg); /* SP h2 24 */

  /* 色：無彩色＋赤1色（赤の面はロゴと主CTAだけ。他は線と記号） */
  --color-text: #222222; --color-text-sub: #6F6F6F; --color-line: #E1E1E1;
  --color-bg: #FCFCFC;      /* 白地（純白は使わない） */
  --color-bg-alt: #F3F3F3;  /* 淡グレー帯・タイル地（キーエンス実測） */
  --color-ink: #222222;     /* 締めの濃色帯（問い合わせ） */
  --color-on-ink: #FCFCFC; --color-on-ink-sub: #B5B5B5;
  --brand-500: #D8000F;     /* 公式ロゴ（NAGATSU Advanced molds in Japan・9/25支給）の赤を実測。旧ロゴ #C9151E から変更 */
  --color-video: #000000;   /* PR動画の地の黒（動画の余白と一体化させる箇所だけ。一般の塗りには使わない） */
  --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 4px rgba(0,0,0,.15);  /* キーエンス通常 */
  --shadow-md: 0 8px 15px rgba(0,0,0,.15); /* キーエンス hover */
  --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: 200ms; --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);
}
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }