/* base.css ── 要素の既定値と汎用ユーティリティ
   ── 目次 ──
   ・base.css — リセット／要素既定／汎用ユーティリティ4件／スクロール登場演出の基盤

   ── 編集の手引き ──
   ・要素セレクタのリセットと既定値、全体に効く規則だけを置く
   ・見出しは word-break: auto-phrase（文節で折る。収まらなければ語中で折れる）
   ・本文も auto-phrase。keep-all は横スクロールを起こすため使わない
   ・語中で折られては困る語は .u-nobr で個別に指定する
   ------------------------------------------------------------------ */

/* ==========================================================================
   base.css — リセット／要素既定／汎用ユーティリティ4件／スクロール登場演出の基盤
   個別コンポーネントの見た目・特定セクションのレイアウトはここに書かない
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  min-width: 320px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- 見出し（明朝はここのみ） ---- */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading-bold);
  color: var(--color-primary);
  font-feature-settings: "palt" 1;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p {
  max-width: 40em;
}

ul,
ol {
  list-style: none;
}

dl,
figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  min-height: 48px;
  min-width: 48px;
}

input,
textarea {
  width: 100%;
  min-height: 48px;
  border: none;
  background: none;
  appearance: none;
  -webkit-appearance: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  text-align: left;
  font-weight: inherit;
}

/* ---- フォーカス可視化（outline: noneを代替なしで使わない土台） ---- */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- 汎用ユーティリティ（4件のみ） ---- */
.skip-link {
  position: absolute;
  top: calc(-1 * var(--space-11));
  left: var(--space-2);
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  font-weight: var(--fw-body-bold);
  border-radius: var(--radius-md);
  transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus-visible {
  top: var(--space-2);
}

.u-phrase {
  display: inline-block;
}

.u-tabular-nums {
  font-variant-numeric: tabular-nums;
}

.section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-sm);
}
@media (min-width: 768px)  { .section__inner { padding-inline: var(--pad-md); } }
@media (min-width: 1280px) { .section__inner { padding-inline: var(--pad-lg); } }

/* ---- スクロール登場演出の基盤（初期状態／表示後の状態のみ。delayは各要素側） ---- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- prefers-reduced-motion: reduce のグローバル無効化 ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 見出し類の改行制御。
   改行の基準は「単語・文節の切れ目」と句点「。」のみとし、読点「、」の位置を
   改行の根拠にしない。word-break: auto-phrase は日本語を文節単位で折り返すため、
   「持ち物」「来院」のような語が途中で割れるのを防げる。
   未対応のブラウザでは normal と同じ挙動になり、従来どおり表示される。
   本文にも適用する。「あります」が「ありま／す」と割れるなど、
   語の途中での改行が実際に発生していたため。 */
/* 見出し・重要な箇所は文節単位で折り返す（収まらない場合は語中で折れる） */
h1, h2, h3, h4,
summary {
  word-break: auto-phrase;
  line-break: strict;
}

/* 本文は語の途中で折らない。
   keep-all（句読点でしか折らない）は語中改行を完全に禁じられるが、
   句読点のない長い一続きがカード幅を超えて横スクロールを起こしたため使えない
   （実測：320pxで80px、1280pxで90pxの溢れ）。
   auto-phrase は文節の切れ目で折るため語中改行が起きず、収まらない長い語だけ
   .u-nobr で個別に折り返し禁止にして補う */
p, li, dd, dt, caption, th, td, label, figcaption {
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: normal;
}

/* 途中で折り返されると意味が壊れる語（長い固有名詞など）を1語として保つ。
   word-break: auto-phrase でも、行に収まらない長い語は最後の手段で
   語中改行されるため、個別に指定する */
.u-nobr {
  white-space: nowrap;
}