/* generated by tools/port_design.py — tokens: ds-update/tokens.css (2026-10-13) */
:root{
  /* 地色・インク — 全幅の塗り面（墨・藍）は場面転換にだけ使う（design-system 原則1） */
  --bg:        #ffffff;
  --bg-sub:    #f5f5f3;   /* セクション切り替えの最弱トーン。これより濃い面を作らない */
  --ink:       #14161a;
  --ink-2:     #5a6069;
  --ink-3:     #9aa0a8;
  --rule:      #e0e2e5;

  /* アクセントは1色のみ。藍に決定（2026-10-13 代表） */
  --accent:    #17346b;
  --accent-ink:#ffffff;

  --font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --font-body: "Noto Sans JP", var(--font-ja);
  --font-head: "Zen Kaku Gothic New", var(--font-ja);   /* 和文の見出し（2026-10-13 決定・案A） */
  --font-en:   "Archivo", var(--font-ja);               /* 欧文の見出し・ワードマーク・数字。Inter は使わない */

  /* 36px以上の和文には必ず負のトラッキングを入れる */
  /* fs-display の下限34px：375/360px幅で「まだ知られていない」9字が1行に収まる値（40pxだと「い」1字が次行に落ちる。2026-09-19実測） */
  /* 画面幅基準の最大の文字はFVだけ（原則5）。それ以外は 56px 上限 */
  --fs-fv-mark:   min(calc((100vw - 2 * var(--gutter)) / 3.1), 180px); /* top「OHGI」。幅 3.1em の中で字を均等に配る＝SPは全幅・PCは左詰めで字間の比率が同じ */
  --fs-fv-name:   min(calc((100vw - 2 * var(--gutter)) / 5.78), 96px); /* company「奥義合同会社」。SPは全幅 */
  --fs-fv-copy:   clamp(32px, 3.4vw, 52px);  /* about FV の和文 */
  --fs-fv-line:   clamp(17px, 1.5vw, 24px);  /* top FV の一言 */
  --fs-sec:       clamp(28px, 3vw, 44px);    --ls-sec: -.01em;  /* 節の英字見出し */
  --fs-lead:      clamp(24px, 2.6vw, 38px);  --lh-lead: 1.55;   /* VISION・CONTACT のメインコピー・代表挨拶の見出し */
  --fs-heading-l: clamp(24px, 3.2vw, 48px);                     /* 社名の由来（塗り抜き） */
  --fs-item:      clamp(20px, 2.2vw, 32px);  --lh-item: 1.45;   /* Our Services の項目名 */
  --fs-mission:   clamp(17px, 1.5vw, 22px);
  /* 旧 --fs-display / --fs-h1 / --fs-h2 は 2026-10-13 に廃止（過大） */
  --fs-h1:      clamp(32px, 4.2vw, 56px); --ls-h1:      -.045em; --lh-h1:      1.25;  /* privacy のページ名だけ */
  --fs-h3:      20px;                     --ls-h3:      -.02em;  --lh-h3:      1.45;
  --fs-body:    16px;                     --ls-body:    .01em;   --lh-body:    1.9;
  --fs-small:   13px;                     --ls-small:   .04em;   --lh-small:   1.7;
  --fs-label:   11px;                     --ls-label:   .18em;

  /* 和文の行長は em。ch は使わない（全角1文字≒2ch で意図の半分になる） */
  --measure:    34em;
  --measure-narrow: 24em;

  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 64px; --s-7: 96px; --s-8: 160px;
  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1200px;

  --dur-fast: 160ms; --dur: 320ms; --dur-slow: 720ms;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 動きは最終状態を基本スタイルにし、隠れた状態から足す（design-system「モーション」） */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-body);
  line-height:var(--lh-body); letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
}
/* grid の既定 min-width:auto で英数字が溢れるため必ず潰す */
.grid{ display:grid; gap:var(--s-5); }
.grid > *{ min-width:0; }

/* site_base.css */
/* Production-only rules that the prototype either set in <helmet> or did not have.
   Values come from the handoff README; nothing here changes the design. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; background:var(--bg); }
a{ color:inherit; }
a:hover{ color:var(--accent); }
img{ max-width:100%; }

/* README「リンク・フォーカス」: focus-visible は藍、墨・藍の面の上では白 */
:focus-visible{ outline:2px solid #17346b; outline-offset:3px; }
section[style*="background:var(--ink)"] :focus-visible,
section[style*="background:var(--accent)"] :focus-visible,
section[data-scene="fv"] :focus-visible{ outline-color:#fff; }

/* 動き: 初回描画で一瞬見えてから隠れるのを防ぐ。motion-guard.js が条件を満たすときだけ .m を付け、
   motion.js が各要素に from を入れた時点で外す。JS無効・reduced-motion・印刷では .m が付かない／外れる */
.m [data-from]{ opacity:0; }
@media print{ .m [data-from]{ opacity:1; } }

/* スキップリンク（キーボード利用者向け。フォーカス時だけ見える） */
.skip{ position:absolute; left:8px; top:-100px; z-index:100; padding:8px 12px; background:#fff; color:var(--ink); }
.skip:focus{ top:8px; }

/* hover (from prototype style-hover) */
.hv0:hover,.hv0:focus-visible{background:var(--ink) !important; color:var(--bg) !important}
.hv1:hover,.hv1:focus-visible{background:var(--ink) !important; color:#fff !important}
.hv2:hover,.hv2:focus-visible{background:var(--ink) !important; color:#fff !important}
.hv3:hover,.hv3:focus-visible{background:var(--ink) !important; color:#fff !important}