/* ================================================================
   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; }
}