/* ============================================================
   Base / Reset / Typography
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;               /* 日本語は広め */
  letter-spacing: .02em;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* 日本語を文節（連文節）で改行し、禁則処理を厳格に。
     auto-phrase 非対応環境は line-break:strict の禁則にフォールバック。
     固有名詞（例: 下板橋）の途中分割や小書き仮名・句読点の行頭を防ぐ。 */
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: break-word;       /* 長い英数字トークンのはみ出しのみ救済 */
}
@media (min-width: 768px) { body { font-size: 16px; } }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--light); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.4;
  /* 見出しは行長を均してオーファン（1〜2文字だけの行）を防ぐ */
  text-wrap: balance;
}

/* 本文ブロックは末尾のオーファンを抑制（最終行が極端に短くならないよう調整） */
:where(p, li, dd, dt, figcaption, caption, blockquote, .hero__title) {
  text-wrap: pretty;
}
.hero__title { text-wrap: balance; }

/* --- Layout helpers --- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: 56px; }
@media (min-width: 768px) { .section { padding-block: 84px; } }

/* --- Responsive line-break helpers --- */
.pc-only { display: none; }
@media (min-width: 768px) {
  .sp-only { display: none; }
  .pc-only { display: inline; }
}

/* --- Accessibility --- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-d);
  outline-offset: 3px;
  border-radius: 4px;
}
.visually-hidden {
  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 {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top var(--t);
}
.skip-link:focus { top: 12px; }

/* --- Reveal on scroll (progressive enhancement: hidden ONLY when JS is on) --- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; } }