/* =========================================================
 * base.css（完成版）
 * - 変数（design tokens）
 * - Lightweight Reset
 * - 基本タイポ / 要素の素の見た目
 * - a11y（skip-link / sr-only / focus-visible）
 * ======================================================= */

/* =========================================================
 * 0. 変数（サイト共通トークン）
 * ======================================================= */
:root{
  --container: 1100px;
  --gutter: 16px;

  --brand: #004b8d;
  --text: #333;
  --muted: #444;
  --surface: #f5f7fa;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* FAQ カテゴリカラー（OKLCH） */
  --faq-jushin-bg: oklch(70% 0.12 240);   --faq-jushin-text: #fff;
  --faq-gairai-bg: oklch(78% 0.08 235);   --faq-gairai-text: #000;
  --faq-kensa-bg: oklch(72% 0.10 210);    --faq-kensa-text: #fff;
  --faq-nyuin-bg: oklch(80% 0.10 150);    --faq-nyuin-text: #000;
  --faq-menkai-bg: oklch(85% 0.06 210);   --faq-menkai-text: #000;
  --faq-ryokin-hoken-bg: oklch(78% 0.16 70); --faq-ryokin-hoken-text: #000;
  --faq-shindansho-bg: oklch(88% 0.12 100);  --faq-shindansho-text: #000;
  --faq-kusuri-bg: oklch(75% 0.13 140);   --faq-kusuri-text: #000;
  --faq-kyukyu-bg: oklch(60% 0.20 30);    --faq-kyukyu-text: #fff;
  --faq-iryo-renkei-bg: oklch(60% 0.14 240); --faq-iryo-renkei-text: #fff;
  --faq-gan-bg: oklch(58% 0.16 300);      --faq-gan-text: #fff;
  --faq-shisetsu-bg: oklch(70% 0.04 250); --faq-shisetsu-text: #000;
  --faq-sonota-bg: oklch(75% 0.02 250);   --faq-sonota-text: #000;

  /* ページタイトル色（デフォルトはブランド色に統一） */
  --page-title-color: var(--brand);
}

/* =========================================================
 * 1. Lightweight Reset
 * ======================================================= */

/* 基本リセット */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 要素をブロックに */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section{
  display: block;
}

/* リストスタイルなし（※本文は common.css で復活させる） */
ol, ul{ list-style: none; }

/* 引用符リセット */
blockquote, q{ quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after{
  content: '';
  content: none;
}

/* テーブル */
table{
  border-collapse: collapse;
  border-spacing: 0;
}

/* 画像は親要素に合わせる */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ボックスサイジングを統一 */
*, *::before, *::after{ box-sizing: border-box; }

/* フォーム要素の基本 */
input, button, textarea, select{
  font: inherit;
  border-radius: 0;
}

/* ボタンの素 */
button{
  cursor: pointer;
  background: transparent;
  border: none;
}

/* =========================================================
 * 2. Base Typography / Elements
 * ======================================================= */

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  font-family: "Noto Sans JP", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;

  line-height: 1.5;
  color: var(--text);
  background: #fff;
}

/* 見出しの共通ルール（font-weightのみ：詳細デザインは common.css 側でOK） */
h1{ font-weight: var(--fw-bold); }
h2, h3{ font-weight: var(--fw-semi); }
h4, h5, h6{ font-weight: var(--fw-medium); }

/* リンクの素（各コンポーネントで上書きOK） */
a{
  color: var(--brand);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* 省略表示に使う時の保険 */
:where(p, li){
  overflow-wrap: anywhere;
}

/* =========================================================
 * 3. a11y
 * ======================================================= */

/* スキップリンク */
.skip-link{
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus,
.skip-link:focus-visible{
  position: static;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: var(--brand);
  color: #fff;
  z-index: 1000;
}

/* sr-only */
.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;
}

/* フォーカス可視化（outline: none; を打ち消す） */
:where(a, button, input, textarea, select):focus-visible{
  outline: 2px solid #ff9800;
  outline-offset: 2px;
}

/* キーボード操作時だけ hover 相当を明確にしたい場合の保険 */
:where(button, [role="button"]):focus-visible{
  border-radius: 4px;
}