/* ================================================================
   ai-support/v2.css — AI導入支援のページを新デザインのトーンに合わせる上書き（2026-10-09）
   このページは Tailwind（CDN）で組まれている。Tailwind は実行時に <style> を head の末尾へ足すので、
   同じ強さの指定では負ける。そのため html body を頭に付けて優先させている。
   ================================================================ */

:root {
  --navy: #141D39;
  --ink: #141D39;
  --ink-sub: #3B4566;
  --ink-light: #56607F;
  --cobalt: #0B3AA8;
  --accent: #F04B20;
  --surface: #F3F6FB;
  --line: #D5DDEB;
}

html body {
  font-family: "Zen Old Mincho", "Yu Mincho", serif;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
}
html body h1,
html body h2 { font-family: "Zen Old Mincho", "Yu Mincho", serif; font-weight: 900; letter-spacing: .02em; word-break: auto-phrase; }
html body h3 { font-family: "Zen Old Mincho", "Yu Mincho", serif; font-weight: 700; word-break: auto-phrase; }
html body p, html body li, html body td, html body th { word-break: auto-phrase; }

/* ---------- 色（灰色 → 青みのある濃紺の系統） ---------- */
html body .text-gray-900, html body .text-gray-800 { color: var(--ink); }
html body .text-gray-700, html body .text-gray-600 { color: var(--ink-sub); }
html body .text-gray-500, html body .text-gray-400 { color: var(--ink-light); }
html body .bg-gray-50 { background-color: var(--surface); }
html body .bg-gray-100 { background-color: #E9EEF7; }
html body .border-gray-100, html body .border-gray-200, html body .border-gray-300 { border-color: var(--line); }
html body .bg-orange-50, html body .bg-orange-50\/60 { background-color: #FDF0EB; }

/* ---------- 箱：角丸の箱をやめる。ボタンだけ丸くする ---------- */
html body .rounded-xl, html body .rounded-lg, html body .rounded, html body .rounded-t, html body .rounded-r-lg { border-radius: 0; }
html body a.rounded-lg, html body button.rounded-lg { border-radius: 999px; }
html body .shadow-sm { box-shadow: none; }
html body .rounded-xl.border { border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-top-color: var(--navy); }
html body section.bg-gray-50 .bg-white.rounded-xl.border { background-color: #fff; }

/* 挿絵は地が白の画像。淡い面の上でも四角が見えないように multiply でなじませる */
html body img[src^="img/v2/"] { mix-blend-mode: multiply; opacity: 1; }

/* ---------- ヘッダー ---------- */
html body > header { background: rgba(255, 255, 255, .96); backdrop-filter: none; border-bottom-color: var(--line); }

/* ---------- ファーストビュー（紺の面 → 白地＋波形） ---------- */
html body section.bg-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) calc(100% - 100px), #fff 100%),
    url('../images/v2/flow-wave-sub.webp') right top / auto 130% no-repeat,
    #fff;
  color: var(--ink);
}
html body section.bg-primary .text-white\/60 { color: var(--accent); font-weight: 700; }
html body section.bg-primary .text-white\/90 { color: var(--ink-sub); }
html body section.bg-primary .bg-white.rounded-xl { background: transparent; padding: 0; }
html body section.bg-primary a.bg-accent { color: #fff; }

/* ---------- フッター（紺の面 → 白地＋下端の波形） ---------- */
html body footer.bg-primary {
  /* 波形はフッター全体の背景に敷き、薄い白をかぶせて、その上に文字を載せる。
     （以前は文字の下に空きを作って波形だけを見せていたが、別の帯が付いているように見えた） */
  background:
    linear-gradient(180deg, #fff 0, rgba(255, 255, 255, .8) 96px, rgba(255, 255, 255, .64) 100%),
    url('../images/v2/flow-wave-bottom.webp') center bottom / cover no-repeat,
    #fff;
  color: var(--ink);
  border-top: 1px solid var(--line);
}
html body footer.bg-primary .text-white\/80,
html body footer.bg-primary .text-white\/70,
html body footer.bg-primary .text-white\/60,
html body footer.bg-primary .text-white\/50 { color: var(--ink-sub); }
html body footer.bg-primary a { color: var(--ink); }
html body footer.bg-primary a:hover { color: var(--accent); }
html body footer.bg-primary [class*="border-white"] { border-color: var(--line); }

@media (max-width: 768px) {
  /* スマホ幅では挿絵が波形の真上に来て、白い人形に波形が透けて見えた。波形は置かず白地にする */
  html body section.bg-primary { background: #fff; }
  html body footer.bg-primary { background-position: center, left bottom, center; }
}

/* ================================================================
   2026-10-19 流動スケール（top-v2.css・sub-v2.css と同じ物差し）
   - 節ごとにばらばらだった中身の幅（Tailwind の max-w-4xl/5xl/6xl＝896/1024/1152px）を、
     ほかのページと同じ1本の幅（--inner）にそろえる。ヘッダー・フッターの端も同じ
   - 節の上下の余白を、ほかのページと同じ流動の値にする
   - Tailwind の文字と余白は rem で書かれている。1440px より広い画面では基準（1rem）を大きくして、
     ページ全体を比例して大きくする（1440 で 16px → 1920 で 19.2px → 3840 で 38.4px）
   ================================================================ */
:root {
  --gutter: clamp(20px, 9.85px + 2.82vw, 64px);
  --inner: clamp(1184px, 416px + 53.33vw, 1600px);
  --sp-section: clamp(64px, 47.38px + 4.615vw, 136px);
}
@media (min-width: 1441px) { html { font-size: calc(6.4px + .6667vw); } }
@media (min-width: 1921px) {
  :root {
    --gutter: min(3.333vw, 128px);
    --inner: min(75vw, 2880px);
    --sp-section: min(7.083vw, 272px);
  }
  html { font-size: min(1vw, 38.4px); }
}

html body > header > div.mx-auto,
html body > main > section > div.mx-auto,
html body > footer > div.mx-auto {
  max-width: var(--inner);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
html body > main > section.py-16 { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
html body > main > section.bg-primary > div.mx-auto { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }

/* ---------- 目次（2026-10-21）：固定ヘッダー（h-16）の下に節の見出しが隠れないようにする ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html body > main > section[id] { scroll-margin-top: calc(4rem + 16px); }
html body > main > section.page-toc > div.mx-auto { padding-top: 20px; padding-bottom: 20px; }