/* ============================================================
   minougun LP — Mono Statement Studio
   フォントは index.html の <link> 1本で読込（@import不使用）
   ============================================================ */

:root {
  /* ラベル・ナビ・ボタン・メタ情報の書体。2026-09-27 本人指示で Space Grotesk からドット書体へ（長い本文は Noto Sans JP のまま） */
  --font-dot: "DotGothic16", "Noto Sans JP", sans-serif;
  /* 明色専用（2026-08-01・本人指示で復帰）。
     一度ダークテーマを実装したが（commit c367233）、本人の環境では Dark Reader が
     prefers-color-scheme を dark と偽装するため、暗くするつもりがない時まで暗くなった。
     拡張が入っている限りサイト側から「明色でよい」を伝える手段がないので、明色専用へ戻す。
     ダークの実装一式は c367233 に残っているので、手動トグルを付けるなら復元して使う。
     なお題字の滲みはこれとは別に解決済み（c667b4d でハローを filter から text-shadow へ移した。
     宣言色になったので、拡張が反転するときに地の色と一緒に処理される）。 */
  color-scheme: only light;
  /* 面 */
  --paper: #f4f2ee;
  --ink: #141414;

  /* テキスト */
  --text: #141414;
  --text-soft: #5a5854;
  /* 紙地の長い補足本文（条件・前置き・注記）用。ラベル等の補助文字は --text-soft のまま。
     #5a5854 は 6.4:1 だが 60代弱視ペルソナが3周とも「条件文が薄い」と減点したため 9.6:1 へ（2026-09-27）。 */
  --text-soft-body: #3f3d39;
  --on-ink: #f4f2ee;
  --on-ink-soft: #c9c7c2; /* 旧#a3a29f（7.4:1）→11:1。r2でP4がPROFILE項目名の弱さを減点 */

  /* アクセント（墨面のみ・面積1%以下） */
  --acid: #c8ff00;
  /* 屋号の欧文部「MINOUGUN」に使う緑（h1・ヘッダー・フッターの3面で共有／.wordmark-en）。
     経緯: Claude Code のワードマーク実測色 #D77757（橙・2.82:1）→ 緑 #23944A（3.47:1）→ 本値。
     紙色 #f4f2ee に対して **5.28:1**。屋号の欧文が出る4箇所すべてで WCAG AA を満たす:
       h1 PC 64px（大文字扱い3:1）/ h1 SP 16.9px・ヘッダー13px・フッター11px（本文扱い4.5:1）。
     3.47:1 の #23944A では小さい3箇所が本文基準に届かなかったため濃くした（2026-07-31本人裁定）。
     明るくするなら #23944A(3.47:1) / #27A552(2.85:1)。差し替えるならここ1箇所。
     既存の --acid(#c8ff00) は紙面で1.06:1なので文字色には使えない。 */
  --pixel-accent: #1B7339;

  /* 線（α値は2026-07-28 a11yレビューで0.16/0.18→引き上げ。低視力で罫が消え
     料金表のスキャン補助が失われるため。1px罫という様式は不変） */
  --line: rgba(20, 20, 20, 0.28);
  --line-strong: #141414;
  --line-on-ink: rgba(244, 242, 238, 0.3);
  --line-on-ink-strong: rgba(244, 242, 238, 0.4);

  /* 角丸（2値のみ） */
  --r-0: 0;
  --r-pill: 999px;

  /* モーション */
  --dur-s: 250ms;
  --dur-m: 600ms;
  --dur-l: 900ms;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-blade: cubic-bezier(0.7, 0, 0.2, 1);

  /* 表示見出しと主要CTAの共通スケール */
  --display-size-max: 8rem;
  --cta-font-size: 1rem;
  --cta-padding-inline-large: 26px;
  --cta-padding-inline-medium: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans JP", sans-serif;
  font-synthesis: none; /* DotGothic16 は1ウェイト。擬似ボールドでドットが滲むのを防ぐ（Noto Sans JP は可変で実ウェイトを持つ） */
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* 黒滝の背景イラスト（美嚢郡=旧吉川町の黒滝＝屋号minougunの由来）。
   07-24: 抽象SVGを imagegen 生成のモノクロ墨絵イラスト（案A）へ差し替え。
   ヒーロー右上のバックドロップとして配置し、左は本文用に開ける（絵の左が霞んで明るい構図）。
   ヒーロー領域のみ（絶対配置でスクロールに追従＝以降のセクションは覆わない・本文の焦点を守る）。
   負のz-indexは使わず背景=0／コンテンツ=1。opacityで淡くし本文の可読性を保つ。
   演出=淡彩カラーで常時表示し、カーソルがヒーロー右のイラストに重なると濃度が上がる（.is-lit・pointer:fine限定・reduced-motionで遷移抑制）。透過カラーWebPを紙面に浮かせる。 */
body { position: relative; }
.kurotaki-bg {
  position: absolute; top: -65px; right: 0; z-index: 0;
  width: min(52vw, 700px); height: 100vh; max-height: 1000px;
  pointer-events: none; user-select: none;
  overflow: visible;
  /* 絵の描画高（object-fit:contain の実寸）。スライド別の揃え変換の基準値。
     デスクトップ: 箱高 min(100vh,1000px) と 幅由来 min(52vw,700px)*1.5 の小さい方。
     641-767px: 箱は static・stage が aspect-ratio 2/3 なので幅由来のみ（=78vw）。
     640px以下: 幅 64vw × 1.5 = 96vw。 */
  --drawn-h: min(min(100vh, 1000px), min(52vw, 700px) * 1.5);
}
@media (max-width: 767px) { .kurotaki-bg { --drawn-h: calc(min(52vw, 700px) * 1.5); } }
@media (max-width: 640px) { .kurotaki-bg { --drawn-h: 96vw; } }
.kurotaki-figure { width: 100%; height: 100%; margin: 0; }
/* 名所スライドショー: 吉川町の名所イラスト（黒滝＋廃校ほか）を数秒間隔でクロスフェード。
   淡彩カラー固定（2026-07-28 A/B実測判定・docs/ab-hero-color-20260728.md）。旧実装の
   「白黒待機→hoverでカラー化」は、hoverが存在しないモバイルで実写参照の水彩14枚が
   一度も色として見えない構造欠陥だったため撤去。hover(.is-lit)は濃度 0.5→0.92 のみ。
   grayscale→カラーのhover文法はリンクである .work-thumb 専用に温存（誤アフォーダンス防止）。
   全スライドは同一寸法(820x1230)・透過WebPで、右上アンカーのcontain。能動スライドのみ表示（他はopacity0でクロスフェード）。 */
.kurotaki-stage { position: relative; width: 100%; height: 100%; }
.kurotaki-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; object-position: right top; display: block;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1);
  /* スライド別の揃え変換（2026-08-18 本人承認・変種B）。14枚のイラストは透明余白が
     バラバラで、絵の実体は「下端が箱の67.1〜95.5%・高さが35.2〜89.4%」まで振れていた。
     各スライドの --ink-k（縮小率）と --ink-ty（移動係数）は index.html のインライン変数で、
     アルファ境界の実測から算出（インク下端比0.671・インク高さ比0.60 目標・拡大は禁止＝
     k≦1 なので水彩のにじみは発生しない）。
     🔴 .is-active に限定しないこと: 退場中の絵はまだ1秒かけて消えている最中で、
     そこで transform が外れると見えたまま跳ねる（プレビューで実害を確認済み）。
     🔴 ファイル名セレクタ（[src$=]等）を使わないこと: ?v= 付きの2枚に当たらず
     「たまにぶれる」の原因になった。変数方式ならクエリ文字列に依存しない。 */
  transform-origin: right top;
  transform: translateY(calc(var(--drawn-h, 100vh) * var(--ink-ty, 0))) scale(var(--ink-k, 1));
}
.kurotaki-slide.is-active { opacity: 0.5; }
.kurotaki-bg.is-lit .kurotaki-slide.is-active { opacity: 0.92; }
main, .footer { position: relative; z-index: 1; }
@media (max-width: 640px) {
  /* 78vw→64vw＋96px下げ（2026-07-28 a11y/artレビュー: 見出し行と絵の輪郭が交差する
     「事故の重なり」の解消。文字背面のテクスチャノイズを減らし、図と地を分離する） */
  .kurotaki-bg {
    width: 64vw; top: 96px;
    /* 箱の下 1/3 は常に透明（全14枚の絵の下端は箱の 66.7〜66.9%＝2026-09-27 実測・--ink-k/--ink-ty で正規化済み）。
       その空白ぶんを負のマージンで返し、キャプション以下を絵の下端＋約20pxまで引き上げる
       （400pxで約104px。ペルソナ3周で「薄いイラスト帯が空白に見える」）。箱は static なので
       grid の行高だけが縮み、絵の描画位置は動かない。 */
    margin-bottom: -26vw;
    /* 箱の高さを「絵の実寸」に合わせる（2026-08-01）。
       スライドは 820x1230（縦横比1.5）で object-fit: contain。スマホでは箱が縦長すぎるため
       絵は幅で決まり、箱の上部 64vw x 96vw ぶんにしか描かれない。
       それなのに箱の高さが calc(100vh - 96px) もあったので、下端に貼るキャプションが
       絵から250px以上も離れ、リード文の下に浮いて出ていた（390pxで実測: 絵の下端471px /
       キャプション724px / リード文の下端658px）。
       箱を 96vw（= 64vw x 1.5）にすると contain の描画結果は変わらないまま、
       下端＝絵の下端になりキャプションが絵に付く。 */
    height: 96vw;
  }
  .kurotaki-slide.is-active { opacity: 0.36; }
}

/* 由来キャプション（美嚢郡=旧吉川町の黒滝＝屋号の由来）。名所イラスト直後の視覚プラカード。
   acid不使用・box-shadow無し。heroの本文グリッドに載せ、右端を揃える。
   枠・下敷きは 2026-08-18 に撤去（経緯はブロック末尾のコメント）。 */
.kurotaki-caption {
  position: static; z-index: 1;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif; font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.22em; color: var(--text-soft);
  /* 折返し可＋右揃え（2026-07-31・レビュー実害A）。旧 white-space:nowrap は、親figureが
     overflow:hidden かつ右アンカーのため、長いキャプションの「頭」が左から切り落とされていた。
     実測: 320px幅で14枚中10枚、375pxで5枚が欠け「郡）・スリーボンド旧工場（2005年頃）」と表示。
     max-width で親内に収め、収まらない分は行を増やす（切らない）。 */
  white-space: normal; text-align: right; line-height: 1.6;
  /* 地色の不透明な下敷き（2026-08-18）。コメント冒頭の「視覚プラカード・全不透明で可読」
     という当初意図に背景が無く、実体としては素の文字が絵の上に載っていた。
     14枚のイラストは下端の透明余白が55〜405pxとバラバラで、絵の実体下端は箱の
     67.1%〜95.5%まで振れる。下の @media の係数0.645は最も余白の大きい1枚
     （初期表示の吉川小学校=0.671）に合わせたものなので、絵が下まで伸びるスライドでは
     キャプションが絵に重なる。実測(1440px・文字を隠して背景のみ測定):
       山田錦の圃場(ink 0.955) 2.89:1 / ひつじ公園(0.946) 2.49:1  ←13px本文の4.5:1に不足
       1920pxでも 3.05:1 / 2.64:1。390pxは絵の下に出るため 6.35:1 で問題なし。
     絵の下端に追従させる案は採れない（スライドごとに位置が数百px動き、キャプション以下の
     リード文・CTAが6秒ごとに上下する）。地色を敷けば、どのスライド・どの幅でも 6.35:1 を
     保てて layout も動かない。fit-content で文字幅にだけ敷く（帯を全幅に広げない）。
     角丸と枠線は 2026-08-18 に本人指示で追加。実績チップ .work-tag と同じ語彙へ寄せている。
     このサイトでボタンとラベルを分けているのは角丸ではなく枠の扱い（--ink の枠＋濃い塗り＝
     押せるもの／--line のヘアライン＝押せないラベル）なので、pill にしても誤アフォーダンスに
     ならない。padding も .work-tag に合わせた。 */
  /* 枠と下敷きは撤去（2026-08-18 本人指示）。上のコメントの下敷き・pill枠は、変換前に
     絵が下まで伸びるスライドでキャプションが絵に重なり 2.49:1 まで落ちたための可読性対策
     だった。スライド別の揃え変換（.kurotaki-slide の --ink-k / --ink-ty）で絵の下端が
     揃い、どの幅・どのスライドでも絵に掛からなくなったため不要。
     実測: 10ビューポート×14枚=140通りすべて 6.35:1（紙面上と同値）。
     右端はグリッドに固定され、文言の長短で動くのは左端のみ（右揃えの組版として自然）。
     文字は瞬時に差し替える（フェードは不自然・本人指示 2026-08-18）。 */
  width: fit-content; max-width: 100%; margin-left: auto;
}
@media (min-width: 768px) {
  /* 絵の下端に寄せる（2026-08-16 本人指示）。キャプションはフローでh1の直後に来るため
     位置が固定なのに対し、絵の下端は箱の高さに従って動く（実測: 画面高700で451px /
     900で580px / 1000以上で646pxに頭打ち＝箱のmax-height 1000pxのため）。
     そのため画面高900以上で、キャプションが地面の影に重なっていた。
     画面高に連動させて絵の下端へ追従させる。係数0.645＝箱の高さに対する絵の実体の下端比、
     500px＝h1下端のおおよその位置に間隔ぶんを見込んだ値。2026-08-16に本人指示で間隔を拡大した。
     実測の間隔: 1024で12px / 1280で22px / 1440で56px / 1920x1080で63px / 1366x768で79px、
     画面高700〜1100では137→55px。いずれも重なり0。
     🔴 下限は 104px（2026-08-18 に 32px から引き上げ）。32px のままだと 1024x768 で
     キャプションが山田錦の圃場の絵に掛かり 4.28:1 に落ちる（枠なしでは 4.5:1 に不足）。
     104px で 10ビューポート×14枚すべて 6.35:1 を実測確認。
     🔴 絶対配置には戻さないこと（フローのままなら本文との衝突が構造的に起きない）。 */
  .kurotaki-caption {
    margin-top: max(104px, calc(min(100vh, 1000px) * 0.645 - 500px));
    margin-bottom: 20px;
  }
}
/* スマホではstageを画像比率に合わせ、captionを次のgrid行に通常配置して画像直下へ置く。 */
@media (max-width: 767px) {
  .kurotaki-bg {
    position: static; align-self: start; justify-self: end;
    height: auto; overflow: visible;
  }
  .kurotaki-figure { height: auto; }
  .kurotaki-stage { height: auto; aspect-ratio: 2 / 3; }
  /* 狭幅では最長キャプション（スリーボンド旧工場・27文字）だけ2行になり、高さが
     35→56px と変わってリード文とCTAが下へずれていた（14枚中1回・2026-08-18実測）。
     2行ぶんを常に確保して、下の要素が動かないようにする。 */
  .kurotaki-caption { position: static; max-width: 100%; min-height: calc(1.6em * 2); }
}

/* reduced-motion: hoverのカラー化は許容しつつ、色/濃度の遷移(transition)は瞬時にする。
   自動スライド送りはmain.js側で停止（先頭スライドのみ表示）。 */
@media (prefers-reduced-motion: reduce) {
  .kurotaki-slide { transition: none; }
}

em, i { font-style: normal; font-weight: 900; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-weight: 900; letter-spacing: 0.02em; color: var(--text); font-feature-settings: "palt" 1; }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1.25; }
h3 { font-size: 1.375rem; line-height: 1.4; }

.display-en {
  /* 英字の節見出しはロゴと同じ Press Start 2P（2026-09-27 本人裁定・A/B/C の実描画モックで B を選択。
     DotGothic16 は1ドット線の拡大で針金のように薄く、見出しの重さが消えたので不採用）。
     Press Start 2P は1文字＝1emの正方形送りなので、Anton 時代（8vw・上限7.5rem）よりかなり小さくする。
     10.5vw上限は、320px幅で既定文字サイズを32pxへ拡大しても最長の SOFTWARE（8字）を版面280px内へ保つ
     （33.6px×8＋字間＝約274px）。通常16px時は clamp 下限32pxが優先され、400px幅で SOFTWARE が 260px。 */
  font-family: "Press Start 2P", "Noto Sans JP", monospace;
  font-weight: 400;
  font-size: min(clamp(2rem, 5.2vw, 5rem), 10.5vw);
  /* 8×8ドットの書体なので 8px の倍数へ切り下げ（1440pxで74.88→72px＝1格子9px）。round() 非対応の
     ブラウザは上の行のまま（2026-09-27 ペルソナr1: 非整数格子で輪郭が不均一）。 */
  font-size: round(down, min(clamp(2rem, 5.2vw, 5rem), 10.5vw), 8px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-synthesis: none;
}

.label {
  font-family: var(--font-dot);
  font-weight: 500;
  font-size: 1rem; /* DotGothic16 の設計サイズ＝16px。14pxだと1x画面でドットが割れる（2026-09-27） */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 2026-09-27 ペルソナr5: 16pxのドット書体は1xで点線構造が薄く、#5a5854（6.35:1）だとP4の読みで最大の減点。
     本文補足と同じ --text-soft-body（9.69:1）へ。書体はそのまま。 */
  color: var(--text-soft-body);
  display: block;
}

p { max-width: 36em; }
/* 和文の途中折返しを避け、文節・句読点の自然な位置で改行する（07-24ユーザー指示）。
   word-break:auto-phrase は対応ブラウザ(Chrome119+/Safari17.4+)で文節境界改行、非対応はnormalへフォールバック。
   line-break:strict で禁則を厳格化、text-wrap:pretty で行末の孤立を軽減。巨大見出し(.statement等)は各自のkeep-allが優先。 */
p, dd, dt, li, figcaption, .lead, .work-plain, .hero-lead,
.cta-micro, .cta-note, .voice-note, .voice-meta {
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lead { font-size: 1.125rem; font-weight: 500; line-height: 1.8; }

a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
:where(a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 2px;
}
::selection { background: var(--ink); color: var(--paper); }

/* 視覚外テキスト（clipパターン・スクリーンリーダー専用） */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* skip link: 視覚外→focusで可視（paper/inkトークンのみ） */
.skip-link {
  position: fixed; top: 0; left: 8px; z-index: 1000;
  transform: translateY(-110%);
  font-family: var(--font-dot);
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--on-ink); background: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 20px; text-decoration: none;
  transition: transform var(--dur-s) var(--ease-expo);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); }

/* アンカー着地位置をsticky nav（64px）ぶんずらす */
[id] { scroll-margin-top: 80px; }

.container { max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 64px); }
/* 640px境界で80→160pxと倍増していたのを連続化（2026-07-31レビュー） */
.section { padding-block: clamp(80px, 12vw, 160px); }
.section--inverse { background: var(--ink); color: var(--on-ink); }
.section--inverse h1, .section--inverse h2, .section--inverse h3 { color: var(--on-ink); }
.section--inverse .label { color: var(--on-ink-soft); }
.section--inverse a { color: var(--on-ink); }
.section--inverse :focus-visible { outline-color: var(--acid) !important; }
.section--inverse ::selection { background: var(--paper); color: var(--ink); }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  /* 不透明（2026-07-31レビュー）。旧 rgba(...,0.94) は墨面セクションの上で下の白文字が透け、
     実測で帯の31.7%の画素が基準色より明るく「濁った帯」に見えていた。 */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-logo {
  /* 書体・色は .wordmark-en（h1と同一）。font-size は Press Start 2P が1文字=1emの正方形で
     通常時は16px（1ドット=2px）を維持し、文字拡大200%では6.25vw天井まで追従させる。
     320pxで20px、390pxで24.375pxとなり、通常時の1.5倍以上を確保する。 */
  font-size: min(1rem, 6.25vw); text-decoration: none;
  /* line-height を明示（既定は body の 1.9＝38pxの行box）。表題用の書体なので字面の上下を締める。
     同時にタップ領域44pxを確保する（旧: 38px。ホーム導線だけが隣の44pxボタン群より狭かった） */
  line-height: 1.2;
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
}
/* margin-left:auto で残余スペースを吸収し、ロゴを左・リンク群を右に分離
   （autoマージンがjustify-contentより先に効くflex仕様を利用。モバイルは.nav-cta-mobileのautoが同役） */
.nav-links {
  display: flex; align-items: center;
  /* 通常root 16pxでは40pxを維持。文字拡大時だけ間隔を詰め、1024pxでも横スクロールを出さない。 */
  gap: clamp(4px, calc(80px - 2.5rem), 40px);
  margin-left: auto;
  /* 🔴 間隔とpaddingのclampだけでは足りない（2026-09-15実測）。root 32px・幅1024pxでは
     どちらも下限に張り付いた上で、なお nav 全体が 45px はみ出して横スクロールが出ていた。
     文字を小さく頭打ちにする案は採らない——拡大できることが a11y の要件そのものなので、
     収まらないときは折り返して縦に伸ばす。通常サイズでは1行のままで見た目は変わらない。
     justify-content:flex-end は、折り返した2行目も右端に揃えるため（margin-left:auto と対）。 */
  flex-wrap: wrap; row-gap: 8px; justify-content: flex-end;
}
.nav-links a {
  position: relative;
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--dur-s) var(--ease-expo);
}
.nav-links a:hover { background-size: 100% 1px; }
/* タップ領域44px確保: 下線・ピルの見た目を動かさず、透明な当たり判定だけ縦に広げる */
.nav-links a::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  height: 44px;
}
/* CONTACT だけピル */
.nav-links a.nav-cta {
  background: var(--ink); color: var(--on-ink);
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  padding: 8px clamp(12px, calc(28px - 0.5rem), 20px); font-weight: 700;
  transition: background-color var(--dur-s) var(--ease-blade), color var(--dur-s) var(--ease-blade);
}
.nav-links a.nav-cta:hover { background: var(--paper); color: var(--ink); }

.nav-mobile { display: none; }
/* モバイル小型CONTACT: desktopでは非表示（nav-links内のピルを使う） */
.nav-cta-mobile { display: none; white-space: nowrap; }
.nav-sheet a { white-space: normal; }
.nav-ja {
  font-family: var(--font-dot); font-size: 1rem;
  font-weight: 500; letter-spacing: 0.04em; text-transform: none;
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  /* ロゴを左、CONTACT+ハンバーガーを右にまとめる（space-between下でCTAを右寄せ）。
     狭幅では下の≤400pxルールで余白を4pxへ詰め、拡大文字の版面を確保する。 */
  .nav-cta-mobile { margin-left: auto; margin-right: 12px; }
  .nav-logo { margin-right: 12px; }
  .nav-cta-mobile {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 44px; padding: 8px 16px;
    flex: 0 1 auto; white-space: normal; text-align: center; line-height: 1.2;
    font-family: var(--font-dot); font-size: min(1rem, 6.25vw); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
    background: var(--ink); color: var(--on-ink);
    border: 1px solid var(--ink); border-radius: var(--r-pill);
  }
  .nav-mobile { display: block; position: relative; }
    /* 枠線は付けない（2026-08-02本人指示）。44x44 は指で押せる面積の確保のためで、
     見た目の箱ではない。押せることは三本線のアイコンが示す。
     focus-visible のリングは :focus-visible の全体ルールで出るのでキーボードの手がかりは残る。 */
  .nav-mobile summary {
    list-style: none; cursor: pointer; display: grid; place-items: center;
    width: 44px; height: 44px; font-size: min(1.25rem, 10vw); color: var(--text);
  }
  .nav-mobile summary svg { width: 1em; height: 1em; }
  .nav-mobile summary::-webkit-details-marker { display: none; }
  /* 上辺をヘッダー罫にちょうど接地させる（2026-07-31レビュー）。summaryは64px高のnav内で44px＝上端10px、
     罫の下端が65pxなので 10+55=65。旧52pxでは罫を3px食い、境界が二重に描かれていた。 */
  .nav-sheet { position: absolute; top: 55px; right: 0; width: min(240px, calc(100vw - 40px)); z-index: 101; background: var(--paper); border: 1px solid var(--line-strong); display: flex; flex-direction: column; }
  .nav-sheet a {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.65em;
    min-width: 0; font-family: var(--font-dot);
    font-size: min(1rem, 6.25vw); font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text); text-decoration: none; white-space: normal;
    overflow-wrap: anywhere; padding: 16px 24px; border-top: 1px solid var(--line);
  }
  .nav-sheet a:first-child { border-top: none; }

  /* JavaScriptなしでもdetailsのメニューを本文に重ねない。開いた分だけヘッダーを伸ばす。 */
  html:not(.js) .nav-inner { height: auto; min-height: 64px; flex-wrap: wrap; }
  html:not(.js) .nav-mobile[open] { flex-basis: 100%; }
  html:not(.js) .nav-mobile[open] summary { margin-left: auto; }
  html:not(.js) .nav-mobile[open] .nav-sheet {
    position: static; width: 100%; min-width: 0; margin-top: 0;
  }
}

/* 320/390px×文字拡大200%のヘッダー回帰対策（2026-08-14 UIレビュー）。
   ロゴ・CTA・summaryのvw天井を緩めたぶん、版面を左右12px、部品間を4pxにする。
   CTAはflex-shrinkと部品内折返しを許可して、44px以上の高さとハンバーガーの表示を両立する。 */
@media (max-width: 400px) {
  .nav .nav-inner { padding-inline: 12px; }
  .nav-logo { margin-right: 4px; }
  .nav-cta-mobile { margin-right: 4px; }
  .nav-cta-mobile { padding-inline: min(0.75rem, 3.75vw); }
}

/* ============ 1. HERO ============ */
.hero { position: relative; min-height: 88vh; display: flex; flex-direction: column; justify-content: space-between; padding-block: 32px 48px; }
.hero > :not(.kurotaki-bg) { position: relative; z-index: 1; }
.hero > .kurotaki-caption { position: static; }
/* 日本語の「何屋か」先出し。巨大英字が叫ぶ前に、和文読者が業種を即読できるようにする。
   ウェイトは 700（2026-07-31）。屋号を Noto Sans JP 900 に戻した結果、直上のこの行と
   h1が同じ顔・同じウェイトになり「屋号＝あおり文を拡大しただけ」に見える、という指摘が
   ペルソナ判定で複数出たため、1段落として階層差を作る。
   上余白は .statement の外側で確保し、名所キャプションの上端帯と要素ボックスを分離する。 */
.hero-jp {
  display: block;
  font-family: "Noto Sans JP", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  line-height: 1.35; letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
  color: var(--text);
  margin-bottom: 24px;
}
/* サイト名「MINOUGUNの一人ボンド研究所」を巨大ステートメントに（07-24ユーザー指示）。
   書体は Noto Sans JP 900。屋号が和文主体だからという理由で 07-24 に Anton から移した判断が正本。
   07-31 に一度 DotGothic16（ドット書体）へ差し替えたが、A/B/C の3案を実描画で作って
   ペルソナ判定（Claude 5体＋codex ultra 5体）を回した結果 **10票中10票が Noto Sans JP 900** で、
   本人裁定により戻した。決め手は2行の長さが揃うこと（実測1440px: 892px と 1016px。
   ドット案は 663/1044、Anton案は 647/1016 で、屋号が「前半＝ラベル / 後半＝本体」に割れて見える）。
   9vw係数: 最長行「一人ボンド研究所」(全角8字・letter-spacing 0.02em込み≈8.16字幅)が
   320〜1440pxの全幅でcontent box内に1行で収まる。下限2rem/上限8remは320px非崩壊と1440過大化の両端。
   この8.16字幅はpalt圧縮を当てにしない素の全角換算なので、paltが効く現状はさらに余裕がある（実測7.94字幅）。
   min(...,10.5vw) の上限（2026-07-31・レビュー実害B）: 下限2remは root font-size に比例するため、
   ブラウザの既定文字サイズを20pxに上げた利用者は 320px幅で 8.16×40=326px となり版面280pxを超える。
   .line が overflow:hidden（行送り演出用）なので、はみ出しは横スクロールではなく
   「一人ボンド研究"所"が消える」無言の欠落になる（実測で再現）。版面に必ず収まる 10.5vw で頭を押さえる。 */
.statement {
  margin-top: clamp(64px, 8vw, 96px);
  font-family: "Noto Sans JP", sans-serif; font-weight: 900;
  font-size: min(clamp(2rem, 9vw, var(--display-size-max)), 10.5vw);
  line-height: 1.08; letter-spacing: 0.02em; text-transform: none;
  font-feature-settings: "palt" 1;
  word-break: keep-all;
  overflow-wrap: normal;
}
/* 紙色のハロー。**filter: drop-shadow ではなく text-shadow で掛ける**（2026-08-01に変更）。
   drop-shadow をやめた理由が2つある。
   1. ダークモード拡張（Dark Reader等）やブラウザの強制ダークは、CSS宣言の色は反転できるが
      filter関数の内側の色は反転しない。地が暗転しても紙色ハローだけ白く残り、白文字の周囲に
      白い光輪が出て題字が滲む（Firefox・Edgeの実機で確認）。
   2. filter は要素を合成レイヤーへ載せるため、サブピクセルAAがグレースケールAAへ落ちて字が甘くなる。
   text-shadow は継承するので **必ず葉の要素に限定して掛ける**。.statement に直接掛けると
   子の .hero-jp が二重に印刷されたようになる（07-31に実害）。.wordmark-en は .stmt-seg--pixel の
   内側だが、同じ字を同じ位置に描くので影は重なるだけで破綻しない。
   2px と 1px を各2回重ねているのは、drop-shadow のアルファ形状に対する掛かり方の濃さへ合わせるため。 */
.statement .hero-jp,
.statement .stmt-seg {
  text-shadow:
    0 0 2px var(--paper), 0 0 2px var(--paper),
    0 0 1px var(--paper), 0 0 1px var(--paper);
}
/* 各セグメント（MINOUGUNの・一人ボンド研究所）はnowrapで語中折返しを禁止（意味の切れ目=行のみ） */
.stmt-seg { white-space: nowrap; }
/* 1行目「MINOUGUNの」だけ8ビットのブロック体（2026-07-31本人指示）。
   Press Start 2P は欧文専用なので「の」は次点の DotGothic16（和文ドット書体）へ落ちる。
   これはフォールバック事故ではなく**意図した使い分け**——2書体とも同じ「ドット絵」の語彙で、
   Press Start 2P が持たない字だけを和文ドット書体が受ける。
   font-size 0.5em: Press Start 2P は1文字=1emの正方形で、等倍だと2行目の全角より明らかに大きくなる。
   2行目の「一人ボンド研究所」は Noto Sans JP 900 のまま（16ドットの漢字は線を太らせると
   内部の空きが埋まって潰れることを実測済み。ブロック体化は欧文でしか成立しない）。 */
.stmt-seg--pixel {
  font-family: "Press Start 2P", "DotGothic16", "Noto Sans JP", monospace;
  font-size: 0.5em;
  letter-spacing: 0.06em;
  font-synthesis: none;
}
/* 屋号の欧文部「MINOUGUN」の共通指定（h1・ヘッダー・フッターの3面で同一）。
   書体と色をここ1箇所に集約し、各面はサイズだけを自分の版面に合わせる。
   助詞「の」以降の和文は各面の地の書体・墨のまま残し、読みを和文へ渡す。 */
.wordmark-en {
  font-family: "Press Start 2P", monospace;
  font-synthesis: none;
  letter-spacing: 0.06em;
  color: var(--pixel-accent);
}
/* アクセスカウンター（.nav-counter系）は2026-07-30本人指示で撤去（復元はrevert） */
/* 上余白は本人指示（2026-08-15）で 48px から引き上げ。巨大見出しとイラストの直下に
   リード文・CTA・判断材料が詰まって見えるため、下の帯全体を一段下げて間を作る。
   vh連動にして、背の低い画面では詰まりすぎない範囲に収める。 */
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: clamp(72px, 11vh, 140px); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; min-width: 0; }
.hero-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 var(--cta-padding-inline-large); border: 1px solid var(--ink); border-radius: var(--r-0);
  font-family: var(--font-dot);
  font-size: var(--cta-font-size); font-weight: 700; letter-spacing: 0.04em;
  text-align: center; text-decoration: none;
  transition: color var(--dur-s) var(--ease-expo), background-color var(--dur-s) var(--ease-expo);
}
.hero-action--primary { color: var(--paper); background: var(--ink); }
.hero-action--primary:hover { color: var(--ink); background: var(--paper); }
.hero-action--secondary { color: var(--ink); background: transparent; }
.hero-action--secondary:hover { color: var(--paper); background: var(--ink); }
.hero-proof {
  display: grid;
  /* 子は2つ（制作実績 / LP・HP制作）なので2列。3列のままだと1440pxで右441px＝
     行幅の33%が空き、border-block の罫が全幅に引かれているせいで「1枠抜けている」
     ように見えていた（2026-08-13 UIレビュー実測）。3つ目の判断材料を足す場合はここを3へ戻す。 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px; border-block: 1px solid var(--line-strong);
}
.hero-proof > div { min-width: 0; padding: 16px; border-right: 1px solid var(--line); }
.hero-proof > div:last-child { border-right: 0; }
.hero-proof dt {
  font-family: var(--font-dot);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.08em; color: var(--text-soft-body);
}
.hero-proof dd { margin: 4px 0 0; font-size: clamp(1rem, 2vw, 1.375rem); font-weight: 900; line-height: 1.4; }
.hero-quick-links {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 28px; border-block: 1px solid var(--line-strong);
}
.hero-quick-links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  padding: 8px 14px; font-size: 0.875rem; font-weight: 700; text-decoration: none;
  border-right: 1px solid var(--line);
}
.hero-quick-links a::after { content: "↘"; font-family: var(--font-dot); }
.hero-quick-links a:last-child { border-right: 0; }
.hero-quick-links a:hover { color: var(--paper); background: var(--ink); }
/* 641〜900px: リード文と2つのボタンを横に並べるだけの幅が無く、.hero-actions の
   min-width:0 のせいでボタン側だけが潰れていた（2026-08-18実測: 700pxで130x63px・
   768pxで143x63px＝ラベルが「制作実績8 / 件を見る」と語中で折れる／860pxでは左右の
   ボタン高さが63pxと48pxで不一致になり align-items:flex-end で段差が出ていた）。
   この帯だけ縦積みにする。ボタンは自然幅の横並びのまま残すので、640px以下のような
   全幅ボタンにはならない。 */
@media (min-width: 641px) and (max-width: 900px) {
  .hero-foot { flex-direction: column; align-items: stretch; }
  .hero-actions { justify-content: flex-start; margin-top: 24px; }
}
@media (max-width: 640px) {
  /* スマホは リード文 → 判断材料（10件／15万円〜）→ ボタン → 案内リンク の順（2026-09-27 ペルソナr2:
     「料金の要約が初画面860pxより下」を5体中4体が減点）。.hero-foot を display:contents で解いて
     リード文とボタン群を .hero の grid 子にし、order で判断材料を間に挟む。DOM順は変えない。 */
  .hero-foot { display: contents; }
  .hero-lead { position: relative; z-index: 1; margin-top: 40px; } /* 旧 .hero-foot の 11vh=95px → 40px */
  .hero-proof { order: 1; margin-top: 20px; }
  .hero-actions { order: 2; position: relative; z-index: 1; justify-content: flex-start; margin-top: 16px; }
  .hero-action { flex: 1 1 100%; width: 100%; }
  .hero-quick-links { order: 3; grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
  .hero-quick-links a { padding-inline: 12px; font-size: 0.875rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-quick-links a:last-child { border-bottom: 0; }
  .hero-proof > div { padding: 12px 8px; } /* 2列のまま（旧1列積み＝約160px→約80px） */
}
.hero-lead { font-size: 1.125rem; font-weight: 500; line-height: 1.8; max-width: 32em; }
@media (max-width: 767px) {
  /* 見出しと配置ラッパーを同じグリッド行に重ね、captionは直後のgrid行へ通常配置する。
     リード文・CTA・判断材料も次行以降へ自動配置し、captionとの交差を構造的に防ぐ。 */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .statement, .kurotaki-bg { grid-column: 1; grid-row: 1; }
  .statement { align-self: start; }
}
/* ヒーロー高の段差を2段に割る（旧: 640px境界で76vh→88vhの12vh一段ジャンプ） */
@media (max-width: 640px) { .hero { min-height: 76vh; } }
@media (min-width: 641px) and (max-width: 1023px) { .hero { min-height: 82vh; } }

/* マーキー帯は2026-07-24ユーザー指示で廃止（復活禁止） */

/* ABOUT/ステートメント節は2026-07-24ユーザー指示で廃止（復活禁止） */

/* ============ 4. WORKS（カードグリッド: PC3列/タブレット2列/スマホ1列・07-24ユーザー指示） ============ */
.works-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; } /* ラベル→見出し8px＝他節と同じ（r1: 0/8/16が混在） */
/* 年代の区切りラベル（WORKSの下・年ごとにグループ化。見出し階層をh2 WORKS→h3 実績名に保つため
   非見出しの<p class="works-year">。将来の年も同じ部品で増設可） */
.works-year {
  font-family: var(--font-dot);
  font-size: 1.5rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--text);
  margin: 0 0 32px;
  padding-top: 0;
  border-top: 0;
  max-width: none; /* p既定36emを解除し、年ラベルの版面をWORKS全幅に揃える。 */
}

.works {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  /* 1fr は minmax(auto,1fr)＝下限min-contentなので、nowrapのチップが列を押し広げる。
     このサイトの他のグリッドは約20箇所すべて minmax(0,1fr) で、ここだけ素の1frだった
     （2026-08-13 UIレビュー実測）。640px/1120pxの多段化ルールは repeat() 側で上書きされるため影響しない。 */
  grid-template-columns: minmax(0, 1fr); gap: 64px 24px;
}
@media (min-width: 640px) { .works { grid-template-columns: repeat(2, 1fr); } }
/* 3段化は1120pxから（2026-07-31レビュー）。960pxで3段にすると1枚278px＝2段時429pxより35%小さく、
   スマホ1段(280px)とほぼ同幅まで縮んでいた。1120pxなら1枚327pxを確保できる。 */
@media (min-width: 1120px) { .works { grid-template-columns: repeat(3, 1fr); } }

.work-card {
  display: flex; flex-direction: column; min-width: 0;
  position: relative; /* 「公式サイトを見る」をカード右下へ（下の .work-official） */
}
.work-card-main {
  display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px;
  padding-bottom: 0;
  text-decoration: none; color: var(--text);
}
/* 「実績詳細を見る」と「公式サイトを見る」を同じ行に（左＝詳細リンク／右＝公式ボタン）。
   縦積みだと1枚あたり約55px、10枚で400px幅のページが約550px伸びていた（2026-09-27 ページ長の指摘）。
   ボタンは絶対配置なので、行の高さは .work-see の min-height 44px で確保する。 */
.work-official {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; right: 0; bottom: 0;
  min-height: 44px; padding: 0 var(--cta-padding-inline-medium);
  font-family: var(--font-dot);
  font-size: var(--cta-font-size); font-weight: 700; letter-spacing: 0.04em;
  color: var(--text); text-decoration: none;
  border: 1px solid var(--line-strong);
  transition: color var(--dur-s) var(--ease-expo), background-color var(--dur-s) var(--ease-expo);
}
.work-official:hover { color: var(--paper); background: var(--ink); }
.service-detail-link { max-width: none; }
.service-detail-link a {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px;
  font-family: var(--font-dot);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 36px 1px;
  transition: background-size var(--dur-s) var(--ease-expo);
}
.service-detail-link a:hover { background-size: 100% 1px; }
/* 3本を1行に並べる枠線ボタン（r2: 幅違いの黒塊3段が本文より強い、と両レーン指摘）。
   閲覧系＝角丸0の枠線（ヒーローの「料金と条件を見る」と同じ語彙）。<p>のまま inline-flex で並べ、
   .software-lead + .service-detail-link の隣接（リリースゲートのピン）は保つ。 */
.service-detail-link--prominent { display: inline-flex; margin: 24px 12px 0 0; vertical-align: top; }
.service-detail-link--prominent a {
  justify-content: center; min-height: 48px; padding: 0 var(--cta-padding-inline-large);
  font-size: var(--cta-font-size);
  color: var(--ink); background: transparent; border: 1px solid var(--ink);
  background-image: none;
  transition: color var(--dur-s) var(--ease-expo), background-color var(--dur-s) var(--ease-expo);
}
.service-detail-link--prominent a:hover { color: var(--paper); background: var(--ink); }
@media (max-width: 640px) {
  .service-detail-link--prominent { display: block; margin-right: 0; }
  .service-detail-link--prominent + .service-detail-link--prominent { margin-top: 12px; } /* 縦積みのときだけ間隔12px（1行並びでこれを効かせると2本目以降が12px浮く） */
  .service-detail-link--prominent a { width: 100%; }
}
/* 静的サムネイル: 全入力方式で常時表示（矩形・角丸0・width/height属性でCLS予約）。
   grayscale→hoverカラーの文法は hover が存在する pointer:fine 限定。タッチ環境は常時カラー
   （2026-07-28 UIペルソナレビュー: モバイルで実績が一度も色で見えない構造欠陥＝ヒーローA/Bと同型の是正）。 */
.work-thumb {
  display: block; width: 100%; height: auto;
  margin: 0 0 16px 0;
  border: 1px solid var(--line);
  transition: filter var(--dur-s) var(--ease-expo);
}
@media (pointer: fine) {
  .work-thumb { filter: grayscale(1); }
  .work-card:hover .work-thumb,
  .work-card:focus-within .work-thumb { filter: grayscale(0); }
}
.work-meta { display: flex; justify-content: space-between; align-items: baseline; }
.work-idx {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.04em; font-feature-settings: "tnum" 1; color: var(--text-soft);
  transition: color var(--dur-s) var(--ease-expo);
}
.work-card:hover .work-idx { color: var(--text); }
.work-name {
  display: block; margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 900; line-height: 1.3;
  letter-spacing: 0.02em; font-feature-settings: "palt" 1;
}
.work-plain {
  display: block;
  font-family: var(--font-dot);
  font-size: 1rem; font-weight: 400; line-height: 1.7;
  letter-spacing: 0.02em; color: var(--text-soft);
  font-feature-settings: "palt" 1;
}
.work-see,
.seo-card-detail-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-dot);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--text); text-decoration: underline; /* 旧 text-soft（r2: 発見性が弱い） */
  text-decoration-thickness: 1px; text-underline-offset: 4px;
  transition: color var(--dur-s) var(--ease-expo);
}
.work-see { align-self: flex-start; margin-top: auto; min-height: 44px; max-width: calc(100% - 200px); }
.seo-card-detail-link { min-height: 44px; padding-block: 8px; }
.work-arrow { display: block; }
.work-card:focus-within .work-see { color: var(--text); }
@media (pointer: fine) {
  .work-see,
  .seo-card-detail-link { text-decoration: none; }
  .work-see::after,
  .seo-card-detail-link::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 1px; background: currentColor;
    transition: width var(--dur-s) var(--ease-expo);
  }
  .work-card:hover .work-see,
  .seo-card-detail-link:hover { color: var(--text); }
  .work-card:hover .work-see::after,
  .work-card:focus-within .work-see::after,
  .seo-card-detail-link:hover::after,
  .seo-card-detail-link:focus-visible::after { width: calc(100% + 6px); }
}
.work-scope-note {
  display: block; margin-top: auto;
  font-size: 0.875rem; line-height: 1.7; color: var(--text-soft);
}
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.work-tag {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px; white-space: nowrap;
}
/* 実績チップは1行に収まる前提の様式だが、文字拡大200%×320pxでは「SEO/AEO対策済み」が
   単独で314pxとなり版面280pxを超える。狭幅でのみ nowrap を解除する。
   通常の文字サイズでは 13px×11文字＋padding＝171px で280pxに収まるため、
   normal にしても折り返さず見た目は変わらない（2026-08-13 UIレビュー実測）。 */
@media (max-width: 400px) {
  .work-tag { white-space: normal; }
}
/* SEO/AEOが担当範囲外の案件を区別する弱いトーンのチップ。 */
.work-tag--no { color: var(--text-soft); border-style: dashed; }
/* 業種別の実績リンク（SERVICEと同じ3本を一覧の前にも置く。2026-09-27 ペルソナr5: 飲食事例が07〜10番目で探すまでが長い） */
.works-industry-links { margin: 0 0 40px; }
.works-claim-scope {
  max-width: 48em; margin: 0 0 24px; padding: 16px 0;
  border-block: 1px solid var(--line); color: var(--text-soft-body); font-size: 1rem; line-height: 1.85;
}

/* WORKS直後の早期CTA。nav-ctaと同じ黒ピル文法に揃え「押せる」ことを明示
   （2026-07-28 UIペルソナレビュー: 本文と同じ見た目で押せると気づかれない是正。既存部品の再利用＝様式内） */
.works-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  max-width: none; margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.works-cta-link {
  font-family: var(--font-dot);
  font-size: var(--cta-font-size); font-weight: 700; letter-spacing: 0.04em;
  color: var(--paper); background: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 var(--cta-padding-inline-large);
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  transition: background var(--dur-s) var(--ease-expo), color var(--dur-s) var(--ease-expo);
}
.works-cta-link:hover { background: var(--paper); color: var(--ink); }
.works-cta-note { font-size: 0.9375rem; color: var(--text-soft-body); }
.works-cta-note a {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-block: -8px; padding-block: 8px;
  color: inherit; text-underline-offset: 3px;
}
/* ============ 5. PROFILE + VOICE（墨面） ============ */
.profile .display-en { margin-top: 8px; margin-bottom: 64px; }
@media (max-width: 640px) {
  .profile .display-en { margin-bottom: 40px; }
  .profile .meta-row { padding-block: 16px; } /* 旧20px（7行×8px＝ページ長）。基本則より後ろでないので詳細度で勝たせる */
}
/* 640px→880px（2026-07-28 artレビュー: 墨面右半分が3画面ぶん無地＝「間」でなく未使用領域に見え、
   料金の品目名が窮屈に折り返す。版面を広げ価格列に呼吸を与える） */
.meta-list { display: grid; gap: 0; min-width: 0; max-width: 880px; }
/* 広幅では版面右1/3が3画面分の無地になるため少しだけ右へ伸ばす（2026-07-28 a11y/artレビュー） */
@media (min-width: 1200px) { .meta-list { max-width: 1000px; } }
.meta-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); min-width: 0; gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--line-on-ink); }
.meta-row dt {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-ink-soft); padding-top: 4px;
}
/* メールアドレスは分割不能な1トークンなので、文字拡大200%×320pxで版面外へ出る
   （2026-08-13 UIレビュー実測: 超過46.3px）。他の長文セル（.price-notes li /
   .software-points li）は既に overflow-wrap:anywhere を持っており、ここだけ漏れていた。 */
.meta-row dd { min-width: 0; margin: 0; font-size: 1rem; line-height: 1.9; color: var(--on-ink); overflow-wrap: anywhere; }
.profile-origin { max-width: 40em; }
.profile .meta-row a[href^="mailto:"] {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-block: -7px; padding-block: 7px;
}
/* ============ PRICE ============ */
.price-section { border-block: 1px solid var(--line-strong); }
.price-section .display-en,
.service-section .display-en { margin-top: 8px; }
.price-lead { max-width: 42em; margin-top: 32px; font-size: 1.0625rem; line-height: 1.9; }
.price-list {
  list-style: none; width: 100%; min-width: 0; max-width: 880px; /* 旧1000px。品目と金額の距離を詰める（r2） */
  margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line-strong);
}
.price-list li {
  /* 品目側だけを縮められるflex列にする。金額側はnowrapのまま、ブラウザの既定文字サイズを
     上げてもWebKitの古いgrid auto列計算に引かれず、料金表を版面外へ押し出さない。 */
  display: flex; width: 100%; min-width: 0; max-width: 100%; gap: 24px; align-items: baseline;
  padding-block: 14px; border-bottom: 1px solid var(--line);
}
.price-list .price-label {
  flex: 1 1 auto; min-width: 0; font-size: 1rem; line-height: 1.6;
  word-break: normal; overflow-wrap: anywhere;
}
.price-copy {
  display: grid; flex: 1 1 auto; gap: 4px; min-width: 0;
}
.price-item-note {
  display: block; font-size: 0.875rem; line-height: 1.7; color: var(--text-soft-body);
}
.price-list .price-value {
  flex: 0 0 auto;
  font-size: 1.125rem; font-weight: 700; line-height: 1.6; text-align: right; /* 金額を行の軸に（r2: 品目と強弱が無い） */
  font-feature-settings: "tnum" 1; white-space: nowrap;
}
.price-terms {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 80px); max-width: 1000px; margin-top: 56px;
}
.price-terms h3 { padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); font-size: 1.125rem; }
.price-notes { list-style: none; min-width: 0; max-width: 100%; margin: 20px 0 4px; padding: 0; display: grid; gap: 10px; }
.price-notes li {
  position: relative; min-width: 0; max-width: 100%; padding-left: 16px;
  font-size: 1rem; line-height: 1.75; color: var(--text-soft-body); overflow-wrap: anywhere;
}
.price-notes li::before {
  content: ""; position: absolute; left: 0; top: 0.8em;
  width: 8px; height: 1px; background: var(--text-soft);
}

@media (max-width: 640px) {
  .meta-row { grid-template-columns: 1fr; gap: 4px; }
  .price-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .price-list .price-value { text-align: left; }
  .price-list .price-label { font-size: 0.875rem; }
  /* 税別表記を足した分、320px×文字200%で「6万5000円／月〜（税別）」が336pxになり版面を
     36px超えた（2026-08-16実測）。狭い幅では折返しを許し、金額と（税別）はそれぞれ
     .nowrap で塊のまま次行へ送る。 */
  .price-list .price-value { font-size: 0.875rem; white-space: normal; }
  .price-item--diagnostic .price-copy { display: contents; }
  .price-item--diagnostic .price-label { order: 1; }
  .price-item--diagnostic .price-value { order: 2; }
  .price-item--diagnostic .price-item-note { order: 3; }
  .price-terms { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* SNSテキストリンク（墨面上・uppercaseラベル・第2有彩色なし・下線スライドhover） */
.sns-links { display: flex; flex-wrap: wrap; gap: 24px; }
.sns-link {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  /* 1文字リンク「X」でも44pxのタップ域を確保（見た目不変・当たり判定のみ・2026-07-28 a11yレビュー） */
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--on-ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--dur-s) var(--ease-expo);
}
.sns-link:hover { background-size: 100% 1px; }

.voice { margin-top: 128px; }
.voice > .label { margin-bottom: 32px; }
/* 641pxちょうどでは本文列が約242pxしか残らず300pxの画像より細くなっていた（2026-07-31レビュー）。
   画像列を可変にし、1列化の境界も760pxまで広げて小型タブレットの潰れを避ける。 */
.voice-inner { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.voice-body { min-width: 0; }
.voice-art {
  width: 300px; height: 300px; border: 1px solid var(--line-on-ink); filter: grayscale(1);
}
.voice-note { font-family: var(--font-dot); font-size: 1rem; font-weight: 400; line-height: 1.9; color: var(--on-ink-soft); margin-top: 20px; max-width: 34em; }
.voice-meta {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  font-feature-settings: "tnum" 1; letter-spacing: 0.04em; color: var(--on-ink-soft); margin-top: 24px;
  overflow-wrap: anywhere;
}
/* acid 唯一の使用箇所（墨面上のCTAテキスト） */
.voice-link {
  /* 44pxのタップ域（見た目は下線リンクのまま・codexレビュー2026-07-28） */
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px;
  font-family: var(--font-dot); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acid); text-decoration: none;
  background: linear-gradient(var(--acid), var(--acid)) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--dur-s) var(--ease-expo);
}
.voice-link:hover { background-size: 100% 1px; }
/* .section--inverse a（0,1,1）が .voice-link（0,1,0）の色を白へ上書きし、acidが実画面に
   出ていなかった実装バグの修正（codex ultra外部監査2026-07-28で発見） */
.section--inverse .voice-link { color: var(--acid); }
.section--inverse .voice-link:focus-visible { outline-color: var(--acid) !important; }
@media (max-width: 760px) {
  .voice { margin-top: 96px; }
  /* 1fr は minmax(auto,1fr) で、下限が min-content になるため長いトークンが
     列を押し広げる。このサイトは .hero-proof / .seo-facts / .price-terms など
     約20箇所で minmax(0,1fr) を使っており、ここだけ素の 1fr だった
     （2026-08-13 UIレビュー実測: 文字拡大200%×320pxで列が331pxに膨らみ30.1px超過）。 */
  .voice-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* モバイルでは個人活動の画像を縮小し、制作サービス情報の縦占有を上位に保つ
     （Round5 codex/Low + keieisha/tenshu/dx: VOICE画像がサービス情報より目立つ区間の是正）。 */
  .voice-art { width: 220px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* PV（ヒーロー直後の紙地セクション。ink面はPROFILEだけ、という上の約束は「面」の話で、下の黒は映像の額縁）。
   カードは tenichi-artist-lp の紹介動画と同じ作り（本人指定 2026-09-27）: 黒カード＋標準の操作バー（再生ボタンは左下）
   ＋DotGothic16のキャプション＋枠付きの「＋動画の内容を文字で読む」。星空・回転・影は借りない（このサイトは角丸0・影なし）。
   狭い画面: ラベル→見出し→説明→カード。1200px以上: 左に文、右にカードの2列。映像は16:9・1px罫 */
.pv-section .display-en { margin-top: 8px; margin-bottom: 32px; }
.pv-section .voice-note { color: var(--text-soft-body); margin-top: 0; }
.pv-card {
  max-width: 960px; margin: 24px 0 0; padding: 14px 14px 10px; color: var(--paper); border: 1px solid rgba(244, 242, 238, .14);
  /* 星空は tenichi-artist-lp の .night（--stars）と同じレシピ（本人指示 2026-09-27「もっと同じデザインで」）:
     置き星14個（1〜2px・1つだけ暖色）＋小さな星のタイル2枚（周期をずらして規則性を消す）＋黒 #070504。
     白玉・流れ星・粒状ノイズは hihumiyo 寄せで一度足したが、tenichi に合わせて外した */
  background:
    radial-gradient(1.4px 1.4px at 14% 22%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 78% 16%, #fff 60%, transparent 61%),
    radial-gradient(1.2px 1.2px at 62% 64%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 30% 80%, #fff 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 88% 70%, #fff 60%, transparent 61%), radial-gradient(1px 1px at 46% 36%, rgba(255, 255, 255, .7) 60%, transparent 61%),
    radial-gradient(1px 1px at 8% 60%, rgba(255, 255, 255, .8) 60%, transparent 61%), radial-gradient(1.3px 1.3px at 54% 90%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 4% 8%, rgba(255, 255, 255, .8) 60%, transparent 61%), radial-gradient(1.5px 1.5px at 96% 40%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 70% 4%, rgba(255, 255, 255, .7) 60%, transparent 61%), radial-gradient(1.2px 1.2px at 22% 96%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 97% 94%, rgba(255, 255, 255, .8) 60%, transparent 61%), radial-gradient(2px 2px at 38% 6%, rgba(255, 238, 200, .9) 50%, transparent 61%),
    radial-gradient(circle, rgba(255, 255, 255, .28) .6px, transparent 1px) 3px 5px / 23px 29px,
    radial-gradient(circle, rgba(255, 240, 220, .18) .5px, transparent .9px) 11px 2px / 37px 31px,
    #070504;
}
.pv-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(244, 242, 238, .12); }
.pv-card figcaption { margin-top: 14px; font-family: var(--font-dot); font-size: 1rem; letter-spacing: .1em; text-align: center; }
.pv-transcript { margin-top: 8px; font-size: 1rem; line-height: 1.8; color: #d6d4cf; }
.pv-transcript summary {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 44px;
  margin-inline: auto; padding: 0 14px; border: 1px solid rgba(244, 242, 238, .25);
  font-family: var(--font-dot); color: var(--paper); cursor: pointer;
}
.pv-transcript summary::marker { content: ""; }
.pv-transcript summary::-webkit-details-marker { display: none; }
.pv-transcript summary::before { content: "＋"; }
.pv-transcript[open] summary::before { content: "－"; }
.pv-transcript p { margin-top: 8px; }
.pv-transcript ol { margin: 8px 0 0; padding-left: 1.4em; }
.pv-transcript li + li { margin-top: 6px; }
@media (min-width: 1200px) {
  /* 左列（ラベル・見出し・3行）はカード581pxの半分以下なので、上寄せだと左下が空く（r1で両レーン指摘）。
     行を1fr/1frに割り、見出し側を下端・文側を上端へ寄せて、塊をカードの天地中央に置く。 */
  .pv-inner { display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 0 clamp(32px, 4vw, 64px); align-items: start; }
  .pv-head, .pv-text { grid-column: 1; min-width: 0; }
  .pv-head { align-self: end; }
  .pv-text { align-self: start; }
  .pv-card { grid-column: 2; grid-row: 1 / span 2; max-width: none; margin-top: 0; }
}

/* SERVICEの説明リストと、SOFTWAREの相談ボタン。 */
.software-lead { font-size: 1.0625rem; line-height: 2; color: var(--text); max-width: 44em; margin-top: 32px; }
.software-lead + .software-lead { margin-top: 12px; }
.software-points { list-style: none; margin-top: 40px; max-width: 44em; }
.software-points li { min-width: 0; padding: 20px 0; border-top: 1px solid var(--line); font-size: 1rem; line-height: 1.9; color: var(--text-soft-body); overflow-wrap: anywhere; }
.software-points li:last-child { border-bottom: 1px solid var(--line); }
.software-points b, .price-notes b { color: var(--text); font-weight: 700; margin-right: 12px; }
@media (max-width: 359px) {
  .software-points b, .price-notes b { display: block; margin: 0 0 4px; }
}
.software-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  margin-top: 32px; padding: 0 var(--cta-padding-inline-large); color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  font-family: var(--font-dot);
  font-size: var(--cta-font-size); font-weight: 700; letter-spacing: 0.04em; text-decoration: none;
  transition: color var(--dur-s) var(--ease-expo), background-color var(--dur-s) var(--ease-expo);
}
.software-cta:hover { color: var(--ink); background: transparent; }
@media (min-width: 1200px) { .software-points { max-width: 1000px; } }

/* ============ SOFTWARE（業務改善ソフト） ============ */
/* SOFTWARE（最長8字）の狭幅上限は .display-en 本体の 10.5vw が既に見込んでいるので、ここでは余白だけ */
.software-section .display-en { margin-top: 8px; }
.software-list { display: grid; gap: 0; min-width: 0; max-width: 880px; margin-top: 40px; border-top: 1px solid var(--line); }
.software-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.software-row dt {
  font-family: var(--font-dot);
  font-size: 1rem; font-weight: 500; letter-spacing: 0.12em; color: var(--text-soft); padding-top: 4px;
}
.software-row dd { min-width: 0; max-width: 40em; margin: 0; font-size: 1rem; line-height: 1.9; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .software-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (min-width: 1200px) { .software-list { max-width: 1000px; } }

/* ============ 6. GIANT CTA ============ */
/* 全セクションの天地余白が clamp(80px,12vw,160px) で完全に同値だったため、余白が
   序列を表現していなかった（2026-08-18実測: works/service/price/software/profile/
   contact すべて1440pxで160px/160px・390pxで80px/80px）。到達点である CONTACT だけ
   一段広く取り、スクロールの終点であることを余白で示す。 */
.cta { padding-block: clamp(104px, 15.5vw, 208px); }
.cta-inner { text-align: center; }
/* 他の6節と同じラベル→英字見出しで開く（r1: 見出し無しで18px薄灰→92pxメールへ跳ぶ、と両レーン指摘）。 */
.cta .display-en { margin: 8px 0 24px; }
.cta-micro {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  color: var(--text); margin: 0 auto 40px; max-width: none;
}
.cta-micro a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.mega-cta {
  font-family: "Anton", sans-serif; font-weight: 400;
  /* 2026-08-01 本人指示で約2割縮小（旧 clamp(2.5rem, 8vw, 7.5rem)＝1440pxで115px）。
     メールアドレスは読み上げる対象ではなく押す対象なので、面積より「押せる形」が保てればよい。 */
  font-size: clamp(2rem, 6.4vw, 6rem);
  line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 4px;
  transition: background-size var(--dur-m) var(--ease-blade);
  overflow-wrap: anywhere;
  display: inline-block; min-height: 44px;
}
.mega-cta:hover { background-size: 100% 4px; }
@media (max-width: 640px) {
  /* 390pxではメールアドレスを1行に収める。文字拡大時は既存の@直後<wbr>を安全弁にする。 */
  .mega-cta { font-size: clamp(1.375rem, 7vw, 2rem); } /* 400pxで28px（旧5.8vw=23px は導入文と差が無かった。8vw=32pxは代替書体で2行になりゲート違反） */
}
.cta-note {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 400;
  line-height: 1.9; color: var(--text-soft-body);
  margin: 32px auto 0; max-width: 34em; text-align: left; /* 旧48px（r2: メール→入力欄が遠い） */
}

/* 問い合わせフォーム（メールと並ぶ通常の相談経路）。
   様式内の道具立てのみ: 1px罫・角丸0・透明地・acid不使用。送信ボタンは既存の黒ピルCTA文法。 */
.contact-form {
  margin: 40px auto 0; max-width: 560px; text-align: left;
  padding-top: 32px; border-top: 1px solid var(--line); /* 旧 72px＋48px */
}
.contact-form-lead { font-size: 1rem; color: var(--text-soft-body); margin: 0 0 24px; }
.form-row { margin: 0 0 20px; }
/* 項目名は連絡直前の視認負荷を下げるため14px基準（codex監査: 高齢スマホ利用者の可読性） */
.form-row label {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; color: var(--text-soft);
  margin-bottom: 8px;
}
.form-req {
  font-size: 0.875rem; letter-spacing: 0.08em; color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-0); padding: 1px 6px;
}
.form-opt {
  font-size: 0.875rem; letter-spacing: 0.08em; color: var(--text-soft);
  border: 1px solid var(--line); border-radius: var(--r-0); padding: 1px 6px;
}
.form-row input, .form-row textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-0);
  padding: 12px 14px; min-height: 48px;
}
.form-row textarea { resize: vertical; }
/* honeypot: 人間には見えない欄（display:noneだと埋めないbotがいるため画面外へ逃がす） */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { font-size: 0.875rem; color: var(--text-soft-body); margin: 0 0 24px; }
.form-privacy a {
  display: inline-flex; align-items: center; min-height: 44px;
  margin-block: -8px; padding-block: 8px;
  color: inherit; text-underline-offset: 3px;
}
.form-submit {
  font-family: var(--font-dot);
  font-size: var(--cta-font-size); font-weight: 700; letter-spacing: 0.04em;
  color: var(--paper); background: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--cta-padding-inline-large);
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  transition: background var(--dur-s) var(--ease-expo), color var(--dur-s) var(--ease-expo);
}
.form-submit:hover { background: var(--paper); color: var(--ink); }

/* ============ 404 ============ */
/* .container は flex item だと shrink-to-fit になり、margin-inline:auto が縮んだ箱を中央寄せする。
   その結果 404 と thanks で左端が原稿量によって動いていた（実測 1440px: index 58px / 404 560px / thanks 432px）。
   width:100% で本文と同じ左軸に戻す（2026-07-31・レビュー実害C）。 */
.error-page { min-height: 100vh; display: flex; align-items: center; padding-block: 96px; }
.error-page > .container { width: 100%; }
.error-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.error-inner .label { margin: 0; }
/* align-items:flex-start のため、子は「内容幅」で決まり親幅に縛られない。thanks の本文には
   分割できない info@minougun.com が入っているので、320px×文字200%で min-content が
   親を超え横スクロールが出ていた（2026-08-18実測: scrollWidth 418 / clientWidth 320・
   はみ出し98px。root 16/20/24pxでは出ないため通常のviewport検査を素通りしていた）。
   thanks.html は公式verifyのROUTESに入っておらず検査自体が届いていなかったので、
   scripts/verify-seo-pages.mjs にも追加した。
   stretch で親幅に収め、それでも足りないときはメールアドレスを折り返させる（.mega-cta と同じ手当て）。 */
.error-inner .lead { max-width: 32em; align-self: stretch; overflow-wrap: anywhere; }
/* タップ領域44px（2026-07-31レビュー）。下線の位置を動かさないよう .qa-back と同じ透明::before拡張 */
.error-back {
  position: relative;
  margin-top: 24px;
  font-family: var(--font-dot); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--dur-s) var(--ease-expo);
}
.error-back::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 44px; }
.error-back:hover { background-size: 100% 1px; }

/* ============ 7. FOOTER ============ */
/* ============ .qa-* 版面（Mono Statement Studio様式・privacy.htmlが使用） ============
   元は100の質問ページ用（2026-07-30本人指示でページ撤去済み・様式はprivacyが共用のため維持） */
.qa-hero { padding-block: 96px 48px; }
.qa-title {
  font-family: "Noto Sans JP", sans-serif; font-weight: 900;
  font-size: clamp(3rem, 12vw, var(--display-size-max)); line-height: 1.02; letter-spacing: 0.01em;
  font-feature-settings: "palt" 1; margin-block: 16px 24px;
}
.qa-intro { font-size: 1.0625rem; font-weight: 500; line-height: 1.9; color: var(--text-soft-body); max-width: 40em; }
/* 旧 .subpage 系（下層で水彩を浅くする3ルール）は 2026-07-31 に削除。
   class="subpage" を持つHTMLは1つも無く（100の質問ページの撤去で消滅）、
   privacy.html も水彩装置自体を持たないため完全な死にコードだった。 */
/* 戻りリンク。文字サイズは維持し、inline-flexの実ボックスで44pxタップ域を確保する。 */
.qa-back {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 32px; position: relative;
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text);
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--dur-s) var(--ease-expo); text-decoration: none;
}
.qa-back:hover { background-size: 100% 1px; }
.qa-groups { padding-bottom: 128px; }
.qa-group { padding-top: 64px; }
.qa-cat {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft);
  padding-bottom: 16px; border-bottom: 1px solid var(--line-strong); margin-bottom: 8px;
}
/* ============ 法務ページ（privacy.html） ============
   100の質問の版面（.qa-hero / .qa-groups / .qa-group / .qa-cat）をそのまま使い、
   本文の段落・箇条書き・リンクだけを足す。新しい色・角丸・影は導入しない。
   本文リンクは常時下線を維持する（hoverで出す方式は、読める前提の本文中では見落とされるため）。 */
.legal-p { margin: 0 0 16px; font-size: 1rem; line-height: 1.95; color: var(--text-soft-body); max-width: 40em; }
.legal-p:last-child { margin-bottom: 0; }
.legal-list { margin: 0 0 16px; padding: 0; list-style: none; max-width: 40em; }
.legal-list li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 1rem; line-height: 1.95; color: var(--text-soft);
}
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 10px; height: 1px; background: var(--text-soft);
}
.legal-list li:last-child { margin-bottom: 0; }
.legal-list b { font-weight: 500; color: var(--text); }
.legal-list code { font-family: var(--font-dot); font-size: 1rem; letter-spacing: 0.02em; }
.legal-link {
  color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.legal-p .legal-link[href^="mailto:"] {
  display: inline-block; min-height: 44px; max-width: 100%;
  margin-block: -8px; padding-block: 8px;
  overflow-wrap: anywhere;
}
.legal-link:hover { text-decoration-thickness: 2px; }
.legal-date { margin-top: 24px; }

.footer { border-top: 1px solid var(--line-strong); padding-block: 48px; }
.footer-inner { display: flex; justify-content: space-between; align-items: baseline; gap: 24px 32px; flex-wrap: wrap; }
/* line-height は表題用に締める（未指定だと body の 1.9＝30.4px の行box。2026-07-31レビュー） */
.footer-logo { font-family: "Noto Sans JP", sans-serif; font-weight: 900; font-size: 16px; line-height: 1.2; letter-spacing: 0.02em; font-feature-settings: "palt" 1; }
/* フッターの欧文部だけ実寸を詰める（Press Start 2Pは正方形送りのため和文16pxと並べると大きい） */
.footer-logo .wordmark-en { font-size: 1rem; }
.footer-meta { font-family: var(--font-dot); font-size: 1rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); }
.footer-link {
  font-family: var(--font-dot); font-size: 1rem; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
  letter-spacing: 0.04em; color: var(--text); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--dur-s) var(--ease-expo);
}
.footer-link:hover { background-size: 100% 1px; }

/* ============ 行単位 stagger（自走型・no-JS安全） ============
   fail-open化（2026-07-28 UIペルソナレビュー）: 静的stateは常時可視とし、隠すのはアニメの
   fromフレームだけにする。CSSアニメを止める環境（拡張・撮影ツール等）でも屋号が消えない。 */
.line { display: block; overflow: hidden; }
.line-inner {
  display: block;
  animation: line-up var(--dur-l) var(--ease-expo) backwards;
}
@keyframes line-up { from { transform: translateY(110%); } to { transform: translateY(0); } }

/* ============ スクロール reveal（.js ゲート） ============
   隠すのは装飾ラベル（.reveal-fade）だけ。本文と見出しは常時可視で、JS初期化の成否に
   本質情報の可視性を依存させない（2026-07-28 codexレビュー: reveal SPOF根治）。 */
.js .reveal-fade {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-m) var(--ease-expo), transform var(--dur-m) var(--ease-expo);
}
.js .reveal-fade.is-in { opacity: 1; transform: translateY(0); }
.js .reveal-fade[data-d="2"] { transition-delay: 90ms; }
.js .reveal-fade[data-d="3"] { transition-delay: 180ms; }
.js .reveal-fade[data-d="4"] { transition-delay: 270ms; }

/* ============ reduced motion（完全ブロック） ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .line-inner { transform: translateY(0) !important; animation: none !important; }
  .js .reveal-fade { opacity: 1 !important; transform: none !important; }
}

/* ============ SEO/AEO 下層ページ ============
   mono-statement-studio の既存語彙（紙色、墨色、巨大タイポ、1px罫、角丸0）だけで構成。
   本文はJSなしで常時可視。grid子は minmax(0,1fr) で320pxの横溢れを防ぐ。 */
.seo-page { min-width: 0; overflow-wrap: anywhere; }
.seo-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 72px; padding-inline: clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line-strong); background: var(--paper);
}
.seo-brand {
  display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px;
  font-weight: 700; text-decoration: none;
}
.seo-brand .wordmark-en { font-size: 1rem; }
.seo-brand-ja { font-size: 0.875rem; letter-spacing: 0.04em; color: var(--ink); }
.seo-nav { display: flex; align-items: center; gap: clamp(12px, 3vw, 36px); list-style: none; }
.seo-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-dot); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.1em; text-decoration: none;
}
.seo-breadcrumb {
  max-width: 1440px; margin-inline: auto; padding: 22px clamp(20px, 4vw, 64px);
  font-size: 0.875rem; color: var(--text-soft); border-bottom: 1px solid var(--line);
}
/* パンくちだけ min-height の指定が漏れており実測 38x19 / 50x19 で WCAG 2.5.8 の
   24x24 を下回っていた（2026-08-13 UIレビュー）。他の対話要素は .seo-nav a /
   .seo-footer a / .seo-related a など全て44pxを確保済み。文中リンクではなく
   独立ナビなので免除対象外。行の見た目を変えないよう padding-block だけで稼ぐ。 */
.seo-breadcrumb a {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 10px;
  color: var(--text-soft);
}
.seo-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  max-width: 1440px; margin-inline: auto; padding: clamp(72px, 11vw, 152px) clamp(20px, 4vw, 64px) clamp(64px, 9vw, 120px);
}
.seo-hero h1 {
  max-width: 13em;
  /* vw天井（2026-08-14実測）。clamp下限が rem なので文字拡大200%では 2.6rem=83.2px に
     膨らむ。h1内の <span class="nowrap"> で「ページ・LP制作」のような意味のまとまりを
     保っても狭幅の版面を超えないよう、12vwで上限を設ける。通常の文字サイズでは
     clamp 側が小さく選ばれる幅が多く、広い画面の見た目は変えない。
     .statement / .display-en / .seo-cta h2 と同じ min(clamp(...), Nvw) の処方に揃える。 */
  /* 2026-08-16 本人指示で縮小（1440で122px→72px / 390で41.6px→32px）。
     vw天井12vwは文字拡大200%の保険としてそのまま残す。 */
  font-size: min(clamp(2rem, 5.2vw, 4.5rem), 12vw);
  line-height: 1.1;
  letter-spacing: 0; text-wrap: balance;
}
.seo-answer {
  max-width: 42em; margin-left: min(18vw, 260px);
  font-size: clamp(1.0625rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.9;
}
.seo-updated {
  margin-left: min(18vw, 260px); font-family: var(--font-dot);
  font-size: 1rem; letter-spacing: 0.08em; color: var(--text-soft);
}
.seo-hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-left: min(18vw, 260px);
}
.seo-hero-actions .seo-button { margin-top: 0; }
.seo-case-media {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
  align-items: end; gap: 24px; max-width: 1440px; margin-inline: auto;
  padding: 0 clamp(20px, 4vw, 64px) clamp(72px, 10vw, 136px);
}
/* 実績詳細のヒーロー画像はカラー表示（2026-08-16 本人指示）。ホームのWORKSカードは
   「リンク＝モノクロ待機、hoverで色が戻る」文法を維持するが、詳細ページは実物を
   見せる面なので既定からカラーにする。 */
.seo-case-media img {
  width: 100%; border: 1px solid var(--line);
}
.seo-case-media figcaption { padding-bottom: 8px; font-size: 0.875rem; }
.seo-case-media a,
.seo-related a { display: inline-flex; align-items: center; min-height: 44px; }
.seo-facts { border-block: 1px solid var(--line-strong); }
.seo-facts dl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1440px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 64px);
}
.seo-facts dl > div { min-width: 0; padding: 28px 24px 32px 0; border-right: 1px solid var(--line); }
.seo-facts dl > div + div { padding-left: 24px; }
.seo-facts dl > div:last-child { border-right: 0; }
.seo-facts dt {
  margin-bottom: 10px; font-family: var(--font-dot);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text-soft);
}
.seo-facts dd { font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 700; line-height: 1.55; }
.seo-section {
  display: grid; grid-template-columns: minmax(64px, 0.25fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px); max-width: 1440px; margin-inline: auto;
  padding: clamp(72px, 10vw, 136px) clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
}
.seo-section-index { font-family: var(--font-dot); font-size: 1rem; color: var(--text-soft); }
/* 2026-08-16 本人指示で縮小（1440で57.6px→40px / 390で28.8px→24px）。 */
.seo-section h2 { font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1.25; }
.seo-section-answer { font-size: clamp(1.0625rem, 2vw, 1.375rem); font-weight: 700; line-height: 1.8; }
.seo-section-copy {
  display: grid; grid-column: 3; align-content: start; gap: 12px; min-width: 0;
}
.seo-section-copy > p:not(.seo-section-answer) {
  font-size: 1.0625rem; line-height: 1.95; color: var(--text-soft);
}
.seo-page--service .seo-hero {
  padding-top: clamp(52px, 7vw, 96px);
  padding-bottom: clamp(44px, 6vw, 80px);
}
.seo-restaurant-cases,
.seo-service-scope,
.seo-service-note {
  max-width: 1440px; margin-inline: auto;
  padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line-strong);
}
.seo-restaurant-cases > h2,
.seo-service-scope > h2,
.seo-service-note > h2 {
  margin: 10px 0 28px; font-size: clamp(1.8rem, 4vw, 3.75rem); line-height: 1.18;
}
.seo-restaurant-case-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.seo-restaurant-case {
  display: grid; grid-template-rows: auto 1fr; min-width: 0;
  border-block: 1px solid var(--line-strong); background: var(--paper);
}
.seo-restaurant-case img {
  width: 100%; border-bottom: 1px solid var(--line-strong);
  transition: filter var(--dur-s) var(--ease-expo);
}
@media (pointer: fine) {
  .seo-restaurant-case img { filter: grayscale(1); }
  .seo-restaurant-case:hover img,
  .seo-restaurant-case:focus-within img { filter: grayscale(0); }
}
.seo-restaurant-case-copy { display: flex; flex-direction: column; min-width: 0; padding: 22px; }
.seo-restaurant-case h3 { font-size: clamp(1.3rem, 2.4vw, 2rem); }
.seo-restaurant-case p { margin-top: 10px; font-size: 1.0625rem; color: var(--text-soft-body); line-height: 1.8; }
.seo-restaurant-case-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; padding-top: 20px; }
.seo-card-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 var(--cta-padding-inline-medium); color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); font-size: var(--cta-font-size); font-weight: 700; text-decoration: none;
}
.seo-card-button:hover { color: var(--ink); background: transparent; }
.seo-card-button--secondary { color: var(--ink); background: transparent; }
.seo-card-button--secondary:hover { color: var(--paper); background: var(--ink); }
.seo-service-scope ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; border-block: 1px solid var(--line-strong);
}
.seo-service-scope li { min-width: 0; padding: 24px; border-right: 1px solid var(--line); }
.seo-service-scope li:first-child { padding-left: 0; }
.seo-service-scope li:last-child { padding-right: 0; border-right: 0; }
.seo-service-scope h3 { font-size: 1.15rem; }
.seo-service-scope li p { margin-top: 8px; font-size: 1.0625rem; color: var(--text-soft-body); line-height: 1.8; }
.seo-decision-info ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seo-decision-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  margin-top: 28px; padding: 0 var(--cta-padding-inline-large); color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-0);
  font-size: var(--cta-font-size); font-weight: 700; text-decoration: none;
  transition: color var(--dur-s) var(--ease-expo), background-color var(--dur-s) var(--ease-expo);
}
.seo-decision-link:hover { color: var(--ink); background: transparent; }
.seo-service-note {
  display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: 12px clamp(24px, 5vw, 72px);
}
.seo-service-note .label,
.seo-service-note h2 { grid-column: 1; }
.seo-service-note h2 { margin-bottom: 0; }
.seo-service-note-copy {
  display: grid; grid-column: 2; grid-row: 1 / span 2; align-self: center;
  gap: 12px; min-width: 0;
}
.seo-service-note-copy > p:last-child { font-size: 1.0625rem; line-height: 1.9; color: var(--text-soft-body); }
/* 2026-08-16 本人指示で縮小（1440で48px→32px / 390で28px→22px）。共通h2の
   clamp(1.75rem,3.5vw,3rem) が効いていたので、生成ページ側だけ上書きする。 */
.seo-related > h2 { font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.3; }
.seo-related {
  display: grid; grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  gap: 32px; max-width: 1440px; margin-inline: auto;
  padding: clamp(72px, 10vw, 128px) clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line-strong);
}
.seo-related ul { list-style: none; border-top: 1px solid var(--line-strong); }
.seo-related li { border-bottom: 1px solid var(--line); }
.seo-related a {
  justify-content: space-between; width: 100%; padding-block: 12px;
  font-size: 1rem; text-decoration: none;
}
.seo-related a::after { content: "↗"; font-family: var(--font-dot); }
.seo-cta {
  max-width: 1440px; margin-inline: auto; padding: clamp(80px, 12vw, 160px) clamp(20px, 4vw, 64px);
}
.seo-cta h2 {
  max-width: 12em; margin: 12px 0 24px;
  /* vw天井（2026-08-13 UIレビュー）。clamp下限が rem なので文字拡大200%（root 32px）で
     2.3rem=73.6px に膨らみ、子の .seo-cta-nowrap が white-space:nowrap のため
     「飲食店サイト」6字＝実測333px となり版面280pxを33px超えて横スクロールが出ていた。
     .statement / .display-en と同じ min(clamp(...), Nvw) の処方に揃える。
     1440px では 13vw=187px より clamp の 86.4px が小さいので見た目は不変。 */
  /* 2026-08-16 本人指示で縮小（1440で86.4px→56px / 390で36.8px→28px）。 */
  font-size: min(clamp(1.75rem, 3.9vw, 3.5rem), 13vw); line-height: 1.15;
  text-wrap: balance;
}
/* 生成ページの見出しは文節境界で折る（2026-08-13 UIレビュー）。
   実測: restaurant h1 が「飲食店ホーム / ページ・LP制作」、sushi h1@390 が
   「寿司店 寿司・ / 至尊 LP制作」と顧客の店名を語中で割っていた。原因は .seo-page の
   overflow-wrap:anywhere が見出しにも継承され、既定の word-break:normal と組んで
   どこでも切れる状態だったこと。auto-phrase は本文で既に使っている文節境界改行で、
   非対応ブラウザでは normal へ落ちるだけなので退行しない。
   overflow-wrap:anywhere は版面外への突き抜けを防ぐ最後の砦なので**残す**
   （keep-all にすると CJK 連続が不可分になり 320px で確実に溢れる）。 */
.seo-hero h1,
.seo-cta h2,
.seo-section h2,
.seo-restaurant-cases > h2,
.seo-service-scope > h2,
.seo-service-note > h2 {
  word-break: auto-phrase;
}
.seo-cta-nowrap { white-space: nowrap; }
/* h1内の固有名詞を割らせない（2026-08-14実測: 中黒が改行機会になり
   「寿司・至尊」が390pxで「寿司・」「至尊」に分断されていた）。
   親の overflow-wrap:anywhere は残るので、収まらない極端な幅では
   従来どおり折り返してレイアウトは壊れない。 */
.nowrap { white-space: nowrap; }
/* h1の文節単位改行: inline-blockは文節間でのみ折り、文節が行幅を超える時だけ
   内部で字割りに落ちる（nowrapと違い320px×200%でも横はみ出しを作らない） */
.h1-phrase { display: inline-block; }
@media (max-width: 400px) {
  .seo-cta-nowrap { display: inline-block; font-size: 0.78em; }
  /* X11の金額は単位まで同じ行に保つ。root 32px時だけ語句の幅が版面を2px押し広げるため、
     通常サイズを変えないvw天井で320pxのレイアウト幅内に収める。 */
  .seo-decision-info .nowrap { font-size: min(1em, 9vw); }
}
.seo-cta p:not(.label) { font-size: 1.0625rem; }
.seo-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  margin-top: 28px; padding: 0 var(--cta-padding-inline-large); color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--r-0);
  font-size: var(--cta-font-size); font-weight: 700; text-decoration: none;
}
.seo-button:hover { color: var(--ink); background: var(--paper); }
.seo-button--consultation { border-radius: var(--r-pill); }
.seo-button--secondary { color: var(--ink); background: transparent; }
.seo-button--secondary:hover { color: var(--paper); background: var(--ink); }
.seo-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px;
  padding: 36px clamp(20px, 4vw, 64px); color: var(--on-ink); background: var(--ink);
}
.seo-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); }
.seo-footer small { font-family: var(--font-dot); font-size: 1rem; color: var(--on-ink-soft); }

@media (max-width: 720px) {
  .seo-header { align-items: flex-start; flex-direction: column; gap: 0; padding-top: 12px; }
  .seo-nav { width: 100%; justify-content: space-between; }
  .seo-answer, .seo-updated, .seo-hero-actions { margin-left: 0; }
  .seo-case-media { grid-template-columns: minmax(0, 1fr); }
  .seo-facts dl { grid-template-columns: minmax(0, 1fr); }
  .seo-facts dl > div,
  .seo-facts dl > div + div { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .seo-facts dl > div:last-child { border-bottom: 0; }
  .seo-section { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .seo-section-index,
  .seo-section h2 { grid-column: 1; }
  .seo-section-copy { grid-column: 1; }
  .seo-related { grid-template-columns: minmax(0, 1fr); }
  .seo-restaurant-case-grid,
  .seo-service-scope ul,
  .seo-service-note { grid-template-columns: minmax(0, 1fr); }
  .seo-service-scope li,
  .seo-service-scope li:first-child,
  .seo-service-scope li:last-child { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .seo-service-scope li:last-child { border-bottom: 0; }
  .seo-service-note .label,
  .seo-service-note h2,
  .seo-service-note-copy { grid-column: 1; grid-row: auto; }
}

@media (max-width: 359px) {
  .seo-header { padding-inline: 16px; }
  .seo-nav { gap: 8px; }
  .seo-nav a { font-size: 0.875rem; }
  /* 2.25rem も rem なので文字拡大200%では72pxに膨らむ。上の12vw天井を
     この幅だけ上書きしないよう、同じ min() を掛ける。通常サイズでは
     2.25rem=36px < 12vw=38.4px（320px時）なので見た目は変わらない。 */
  .seo-hero h1 { font-size: min(2.25rem, 12vw); }
}