/* ============================================================
   goen2026 base — リセット + 基本要素
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  /* 横はみ出しの二次ガード。閉じている drawer は .drawer-shell（全面 fixed +
     overflow:hidden）で確実にクリップしているが、将来的な想定外の右はみ出しに備えて
     ルートでもクリップしておく。overflow:clip はスクロールコンテナを作らないので
     sticky ヘッダー / アンカースクロールには影響しない。 */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* 横スクロール防止のセーフティ + 長すぎる時だけ折る */
h1, h2, h3, h4, p, li, a, td, th, dd, dt, figcaption, summary { overflow-wrap: anywhere; }

/* ============================================================
   日本語の折り返し（禁則処理・行末の孤立文字・単語途中の分割を防ぐ）
   - keep-all: 見出し等で文節を途中で割らない（句読点・スペースでのみ改行）
   - text-wrap: balance/pretty: 行の長さを揃え、最終行に「ます。」等が孤立しない
   - overflow-wrap: anywhere（上）: それでも溢れる時だけ強制的に折る
   ============================================================ */
:lang(ja) { line-break: strict; }

/* すべての見出し: 行の長さを揃え、行末の孤立文字を防ぐ（強制的な非改行はしない） */
:where(h1, h2, h3, h4) { text-wrap: balance; }

/* キュレーションされた短い見出し・キャッチ・中央寄せリード:
   文節を途中で割らず（keep-all）、行の長さも揃える（balance）。
   長すぎる場合のみ overflow-wrap: anywhere（上の一括指定）で強制的に折る。 */
:where(.hero__title, .hero__lead,
  .section-heading__title, .section-heading__lead,
  .stay-style__title, .goen-life__title,
  .page-hero__title, .page-hero__inner p,
  .feature__body h2, .feature__body .eyebrow) {
  word-break: keep-all;
  text-wrap: balance;
}

/* 段落・説明文・箇条書き・カード見出し: 最終行の孤立を防ぐ（keep-all はかけない） */
:where(p, li, dd, dt, blockquote,
  .stay-style__desc, .goen-life__desc, .blog-card__excerpt,
  .card__title, .blog-card__title, .topic-card .card__title) {
  text-wrap: pretty;
}

/* 中央寄せのリード文は幅を絞って2〜3行に美しく収める */
.section-heading--center .section-heading__lead { max-width: 32em; margin-inline: auto; }

/* 文節を途中で改行させない指定（見出し・キャッチで使用） */
.nb { white-space: nowrap; }

/* ------------------------------------------------------------
   狭い画面（<= 820px, feature が1カラムになる幅）では、
   キュレーション見出しの keep-all / .nb(nowrap) / balance を解除する。
   長い日本語の文節（例: <span class="nb">小値賀での滞在を、</span>）が
   nowrap のまま横幅を超えると、iOS Safari はレイアウトビューポート自体を
   広げてしまい、見出し・本文・ボタンの右側が見切れる。
   PC（> 820px）では従来どおりの日本語タイポグラフィを維持する。
   ------------------------------------------------------------ */
@media (max-width: 820px) {
  :where(.hero__title, .hero__lead,
    .section-heading__title, .section-heading__lead,
    .stay-style__title, .goen-life__title,
    .page-hero__title, .page-hero__inner p,
    .feature__body h2, .feature__body .eyebrow) {
    word-break: normal;         /* keep-all を必ず解除（未対応ブラウザ用のフォールバック） */
    word-break: auto-phrase;    /* 対応ブラウザは文節境界で折る（Safari 17.4+ / Chrome 119+） */
    overflow-wrap: anywhere;    /* それでも1行が入り切らなければ任意位置で折る */
    text-wrap: pretty;
    max-width: 100%;
  }
  .nb { white-space: normal; word-break: normal; }
}

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

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }

a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

:lang(en) { --font-heading: var(--font-serif-en); --font-body: var(--font-sans-en); }
:lang(en) body { line-height: 1.7; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--heading);
  line-height: var(--lh-heading);
  letter-spacing: 0.02em;
}
h1 { font-size: var(--fs-800); }
h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
p { max-width: 40em; }
:lang(en) p { max-width: 62ch; }

strong, b { font-weight: 700; }
small { font-size: var(--fs-300); }

ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

figure { margin: 0; }
figcaption { font-size: var(--fs-300); color: var(--text-muted); margin-top: var(--space-1); }

blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-3);
  color: var(--c-ink-700);
  font-family: var(--font-heading);
}

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--border); padding: 0.75em 1em; text-align: left; vertical-align: top; }
th { background: var(--c-mist); font-weight: 700; color: var(--heading); }

::selection { background: var(--c-gold-300); color: var(--c-navy-900); }

/* アクセシビリティ: スキップリンク */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-navy-800); color: #fff;
  padding: 0.75em 1.25em; z-index: var(--z-overlay);
}
.skip-link:focus { left: 12px; top: 12px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}