/* 自動結合: corporate-site/_ds/.../tokens/*.css。手で編集しない（更新は結合し直す） */
/* ミナモト — Webfonts
   本文・UI・見出し: Zen Kaku Gothic New（すべてこれ1書体）
   数値/コード/表の桁揃え: JetBrains Mono
   明朝（Zen Old Mincho）は廃止。編集的な一言も Zen Kaku Gothic New の
   Light 300 + 行間 2.1 で組む。
   すべて Google Fonts 配信。ローカル配信に切り替える場合は
   woff2 を assets/fonts/ に置き、下の @import を @font-face に差し替える。 */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ミナモト — Color
   3色。白・黒・青。
   - 白 #FFFFFF … 全面の地。画面の約7割。
   - 黒 #111113 … 見出しと本文。「言葉の色」。純黒 #000 は使わない（青が濁って見えるため）。
   - 青 #0287D3 … ブランド色。塗り面・主CTA・数値・セクション記号。
   注意：#0287D3 は白地の小さい文字では 3.9:1 しか出ない。
   14px 以下の文字と細い罫線には --mn-blue-700 #026FAD（5.4:1）を使う。
   朱（#E45A22）は廃止した。 */
:root {
  /* --- 青 / Minamoto Blue（唯一のブランド色） --- */
  --mn-blue-50:  oklch(0.972 0.014 240);
  --mn-blue-100: oklch(0.938 0.032 240);
  --mn-blue-200: oklch(0.880 0.062 240);
  --mn-blue-300: oklch(0.800 0.098 240);
  --mn-blue-400: oklch(0.715 0.130 240);
  --mn-blue-500: oklch(0.655 0.145 240);
  --mn-blue-600: #0287D3; /* = 基準色 */
  --mn-blue-700: #026FAD; /* 白地の小文字・細線用（5.4:1） */
  --mn-blue-800: oklch(0.455 0.122 240);
  --mn-blue-900: oklch(0.360 0.098 240);
  --mn-blue-950: oklch(0.265 0.072 240);

  /* 基準色のリテラル（印刷・メール・SVG など oklch が使えない出力用） */
  --mn-blue-hex: #0287D3;
  --mn-blue-dark-hex: #026FAD;
  --mn-black-hex: #111113;

  /* --- 墨 / Neutral（ごくわずかに青を含む無彩色） --- */
  --mn-ink-0:   #ffffff;
  --mn-ink-25:  #fafafb;
  --mn-ink-50:  #f4f4f6;
  --mn-ink-100: #e9e9ec;
  --mn-ink-200: #d9d9de;
  --mn-ink-300: #bdbdc4;
  --mn-ink-400: #96969f;
  --mn-ink-500: #71717a;
  --mn-ink-600: #54545c;
  --mn-ink-700: #3d3d43;
  --mn-ink-800: #27272b;
  --mn-ink-900: #111113; /* = 黒 */

  /* --- セマンティック原色（彩度を抑え、ブランド色を邪魔しない） --- */
  --mn-success:    #1f6b4a;
  --mn-success-bg: #e8f2ed;
  --mn-warning:    #8a5a06;
  --mn-warning-bg: #f6eddc;
  --mn-danger:     #a3302a;
  --mn-danger-bg:  #f7e8e7;
  --mn-info:       var(--mn-blue-700);
  --mn-info-bg:    var(--mn-blue-50);

  /* ============ セマンティック別名（実装ではこちらを使う） ============ */
  --surface-page:       var(--mn-ink-0);   /* 地は純白。ページ全体を白で通す */
  --surface-card:       var(--mn-ink-0);
  --surface-sunken:     var(--mn-ink-25);
  --surface-inverse:    var(--mn-ink-900);
  --surface-brand:      var(--mn-blue-600); /* 塗り面。CTA帯など画面に1〜2箇所まで */
  --surface-brand-deep: var(--mn-blue-800);
  --surface-brand-soft: var(--mn-blue-50);

  --text-primary:    var(--mn-ink-900);
  --text-secondary:  var(--mn-ink-800);
  --text-muted:      var(--mn-ink-700);
  --text-inverse:    var(--mn-ink-0);
  --text-brand:      var(--mn-blue-700); /* 文字としての青は必ず 700 */
  --text-on-brand:   var(--mn-ink-0);
  --text-link:       var(--mn-blue-700);
  --text-link-hover: var(--mn-blue-900);
  /* 24px 以上の見出し・数値に限り 600 を文字色に使ってよい */
  --text-brand-display: var(--mn-blue-600);

  --border-subtle:  var(--mn-ink-100);
  --border-default: var(--mn-ink-200);
  --border-strong:  var(--mn-ink-900); /* 構造線は黒 */
  --border-brand:   var(--mn-blue-600);

  --focus-ring: 0 0 0 3px oklch(0.655 0.145 240 / .40);
}

/* ミナモト — Typography
   書体は1つ（Zen Kaku Gothic New）。数値のみ JetBrains Mono。
   声色の差はウェイトと行間で作る。書体を増やして作らない。
   和文は字面が大きいので欧文より行間を広く（本文 1.9）、
   字送りは 0.02〜0.04em を基本に、締まりを出したい大見出しだけ 0.01em。 */
:root {
  --font-sans: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fw-light: 400; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 900; /* @kind font */

  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:16px;
  --fs-md:  17px;
  --fs-lg:  20px;
  --fs-xl:  24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-4xl: 48px;
  --fs-5xl: 62px;
  --fs-6xl: 80px;

  --lh-tight: 1.25; /* @kind font */
  --lh-snug: 1.5; /* @kind font */
  --lh-body: 1.9; /* @kind font */
  --lh-loose: 2.1; /* @kind font */

  --ls-display: 0.01em;
  --ls-heading: 0.02em;
  --ls-body: 0.04em;
  --ls-caps: 0.16em;

  /* 役割別ショートハンド */
  --type-display:  var(--fw-bold) var(--fs-5xl)/var(--lh-tight) var(--font-sans);
  --type-h1:       var(--fw-bold) var(--fs-3xl)/1.35 var(--font-sans);
  --type-h2:       var(--fw-bold) var(--fs-2xl)/1.4 var(--font-sans);
  --type-h3:       var(--fw-bold) var(--fs-xl)/1.5 var(--font-sans);
  --type-body:     var(--fw-regular) var(--fs-base)/var(--lh-body) var(--font-sans);
  --type-body-lg:  var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-sans);
  --type-caption:  var(--fw-regular) var(--fs-xs)/1.7 var(--font-sans);
  /* 旧 --type-editorial の代替。明朝ではなく Light + 広い行間で「編集的な一言」を作る。
     1画面に1ブロックまで。ボタン・ラベルには使わない。 */
  --type-lead:     var(--fw-light) var(--fs-2xl)/var(--lh-loose) var(--font-sans);
}

/* ミナモト — Spacing / Layout。4pxグリッド。 */
:root {
  --sp-0: 0px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1160px;
  --container-xl: 1320px;
  --gutter: var(--sp-6);
  --section-y: var(--sp-24);
  --section-y-sm: var(--sp-16);
}

/* ミナモト — Radius。角は「丸すぎない」。基準は 8px、カードは 12px。 */
:root {
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;
}

/* ミナモト — Elevation。影は「青のにじみ」。黒ではなく青を薄く重ねる。
   静止状態のカードは影を持たない（境界線1pxのみ）。影は浮いているものだけの語彙。 */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(2,60,100,.06);
  --shadow-sm: 0 1px 2px rgba(2,60,100,.06), 0 2px 4px rgba(2,60,100,.05);
  --shadow-md: 0 1px 3px rgba(2,60,100,.06), 0 4px 10px rgba(2,60,100,.07);
  --shadow-lg: 0 2px 5px rgba(2,60,100,.06), 0 8px 18px rgba(2,60,100,.10);
  --shadow-xl: 0 4px 10px rgba(2,60,100,.07), 0 16px 32px rgba(2,60,100,.14);
  --shadow-inset: inset 0 1px 2px rgba(2,60,100,.08);
}

/* ミナモト — Motion。水面の波紋を思わせる、跳ねない減速。 */
:root {
  --dur-instant: 80ms; /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */
  --dur-reveal: 640ms; /* @kind other */

  --ease-standard: cubic-bezier(.2, .8, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, .55, .45, 1); /* @kind other */
  --ease-in: cubic-bezier(.55, 0, 1, .45); /* @kind other */
  --ease-inout: cubic-bezier(.65, 0, .35, 1); /* @kind other */

  --transition-base: all var(--dur-base) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; /* @kind other */
    --dur-base: 1ms; /* @kind other */
    --dur-slow: 1ms; /* @kind other */
    --dur-reveal: 1ms; /* @kind other */
  }
}

/* ミナモト — Base reset（最小限） */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: var(--ls-heading); text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }