/*
  base.css
  リセット＋基本要素の素の見た目のみ。BEMクラス・コンポーネント・セクション固有の装飾は書かない。
  タイポグラフィの数値はデザイン定義に従う。
*/

/* ===== リセット ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 1rem = 16px */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px; /*  最小対応幅 */
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: var(--fw-regular);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.8;
  letter-spacing: 0.02em;
  word-break: normal; /* break-allは使わない */
  overflow-wrap: break-word;
  line-break: strict;
}

@media (min-width: 900px) {
  body {
    font-size: 1rem; /* 16px */
    line-height: 1.85;
  }
}

/* ===== 見出し ===== */
h1,
h2,
h3 {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.22vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

h2 {
  font-size: clamp(1.375rem, 1.04rem + 1.48vw, 1.875rem);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

h3 {
  font-size: 1.125rem; /* 18px */
  font-weight: var(--fw-medium);
  line-height: 1.6;
}

@media (min-width: 900px) {
  h1 {
    line-height: 1.4;
  }
  h2 {
    line-height: 1.45;
  }
  h3 {
    font-size: 1.375rem; /* 22px */
  }
}

/* ===== 段落・リスト ===== */
p {
  margin: 0; /* 余白は後続要素側のmargin-topで一方向に管理する */
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dt,
dd {
  margin: 0;
}

/* ===== リンク ===== */
a {
  color: var(--c-green);
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

/*
  暗い面のリンク（2026-09-08 修正）。
  既定の --c-green を --c-green-deep 地のフッターに置くとコントラスト比が約1.4:1 になり、
  読めない。暗い面では --c-bg（10.73:1）を使う。
*/
.is-on-dark a {
  color: var(--c-bg);
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: color var(--dur-fast) ease;
  }
}

a:hover {
  color: var(--c-green-deep);
}

/* dark面上のテキストリンクは周囲の文字色（--c-bgまたは--c-bg-dim）を継承する */
.is-on-dark a {
  color: inherit;
}

.is-on-dark a:hover {
  color: var(--c-bg);
}

/* ===== 画像 ===== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  display: block;
}

/* アンカー遷移を滑らかにする（2026-09-08 追加）。
   prefers-reduced-motion: reduce のときは即時ジャンプに戻す。 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ===== フォーム要素・ボタンの素の見た目（装飾はcomponents.cssで指定） ===== */
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

input,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

/* ===== フォーカスリング ===== */
:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 2px;
}

/*
  dark面（is-on-dark）のフォーカスリングは--c-surfaceにする。
  is-on-darkが祖先要素の場合（`.is-on-dark :focus-visible`）と、
  要素自身に付与される場合（`.is-on-dark:focus-visible`）の両方に対応する。
*/
.is-on-dark :focus-visible,
.is-on-dark:focus-visible {
  outline-color: var(--c-surface);
}

/*
  headerはの規定によりis-on-darkを付与しない（.hdr自体がdark専用ブロックのため）。
  そのままでは既定の--c-green（light面用）の輪が緑地に緑輪となり視認できないため、
  .hdr配下は明示的にdark面のフォーカスリング色を適用する。
*/
.hdr :focus-visible {
  outline-color: var(--c-surface);
}

/* ===== スクロール位置補正 ===== */
[id] {
  scroll-margin-top: 64px;
}

@media (min-width: 900px) {
  [id] {
    scroll-margin-top: 80px;
  }
}