/* ============================================================
   components.css
   ボタン／カード／アコーディオン／料金表／情報バー／追従CTAバー／デモ帯／
   フォーム入力欄／地図ファサード／セクション見出し／注記テキスト／
   スキップリンク／スクロールフェードイン／u-系ユーティリティ
   すべてのインタラクティブ要素は最小タップ領域44×44pxを満たす。
   ============================================================ */

/* ============================================================
   7.1 ボタン
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--radius-md);
  padding: 16px 24px; /* 縦16px 横24px（モバイル） */
  border: 2px solid transparent;
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  letter-spacing: var(--ls-btn);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

@media (min-width: 900px) {
  .btn {
    padding: 16px 32px; /* 縦16px 横32px（PC） */
  }
}

.btn:active {
  transform: scale(0.98);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.btn__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 主ボタン */
.btn--primary {
  background-color: var(--c-navy);
  color: var(--c-ivory);
}
.btn--primary:hover,
.btn--primary:active {
  background-color: var(--c-navy-deep);
}

/* 副ボタン */
.btn--secondary {
  background-color: transparent;
  color: var(--c-navy);
  border-color: var(--c-navy);
}
.btn--secondary:hover,
.btn--secondary:active {
  background-color: var(--c-ivory-dim);
}
/* dark面（is-on-dark）に置く副ボタンは文字・枠線をivoryへ、hover背景はcolor-mixで切替（§7.1） */
.is-on-dark .btn--secondary {
  color: var(--c-ivory);
  border-color: var(--c-ivory);
}
.is-on-dark .btn--secondary:hover,
.is-on-dark .btn--secondary:active {
  background-color: color-mix(in srgb, var(--c-navy-deep) 80%, white);
}

/* 電話ボタン */
.btn--phone {
  background-color: var(--c-wood);
  color: var(--c-ivory);
}
.btn--phone:hover,
.btn--phone:active {
  background-color: color-mix(in srgb, var(--c-wood) 88%, black);
}

/* 予約ボタン（常時活性。disabled状態は使用しない） */
.btn--reserve {
  background-color: var(--c-sky-deep);
  color: var(--c-ivory);
}
.btn--reserve:hover,
.btn--reserve:active {
  background-color: color-mix(in srgb, var(--c-sky-deep) 88%, black);
}

/* ============================================================
   7.2 カード
   既定は --c-ivory 背景（--c-ivory-dim 面＝reasons/facility等に置く前提）。
   --c-ivory 面（staff等）に置く場合は .card--on-ivory を併用し --c-ivory-dim に切り替える。
   ============================================================ */
.card {
  background-color: var(--c-ivory);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
@media (min-width: 900px) {
  .card { padding: 32px; }
}

.card--on-ivory {
  background-color: var(--c-ivory-dim);
}

.card__icon {
  width: 48px;
  height: 48px;
  color: var(--c-sky); /* 図版扱いのため使用可（§7.2） */
}
@media (min-width: 900px) {
  .card__icon { width: 56px; height: 56px; }
}

.card__title {
  margin-top: 16px;
}

.card__text {
  margin-top: 8px;
  color: var(--c-text-muted); /* カードは常にアイボリー系背景上でのみ使用する */
}

/* hoverはPCのみ、タッチデバイスでは無効化する */
@media (hover: hover) and (pointer: fine) {
  .card {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }
}

/* ============================================================
   7.3 アイコン付きリスト（trouble・facilityで使用）
   ============================================================ */
.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.icon-list__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--c-sky); /* 図版扱いのため使用可 */
}
@media (min-width: 900px) {
  .icon-list__icon { width: 28px; height: 28px; }
}

.icon-list__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* ============================================================
   7.4 アコーディオン（FAQ）
   .faq__question は <h3> に包まれる<button>のため、見出しの書体・サイズは
   h1-h4ルール（base.css）からの継承に任せ、ここではレイアウトのみを指定する。
   ============================================================ */
.faq__item {
  border-bottom: 1px solid var(--c-ivory-dim); /* 設置面が --c-ivory の場合 */
}
.faq__item--on-dim {
  border-bottom-color: var(--c-ivory); /* 設置面が --c-ivory-dim の場合 */
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  text-align: left;
  background-color: transparent;
}
@media (min-width: 900px) {
  .faq__question {
    padding: 20px 24px;
  }
}
.faq__question:hover {
  background-color: var(--c-ivory-dim); /* 設置面が --c-ivory の時 */
}

.faq__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 200ms ease;
}
[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
}

.faq__answer {
  padding-bottom: 20px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

/* ============================================================
   7.5 料金表
   ============================================================ */
.price-table {
  width: 100%;
  border: 1px solid var(--c-ivory-dim);
  border-collapse: collapse;
}

.price-table th,
.price-table td {
  padding: 12px 16px; /* モバイル */
  text-align: left;
}
@media (min-width: 900px) {
  .price-table th,
  .price-table td {
    padding: 16px 20px; /* PC */
  }
}

.price-table__row:nth-child(even) {
  background-color: var(--c-ivory-dim); /* 設置面が --c-ivory の場合 */
}
.price-table__row--on-dim:nth-child(even) {
  background-color: var(--c-ivory); /* 設置面が --c-ivory-dim の場合 */
}

.price-table__name {
  font-family: var(--ff-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

.price-table__value {
  text-align: right;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.price-table__badge {
  display: inline-block;
  background-color: var(--c-sky-deep);
  color: var(--c-ivory);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: var(--fw-bold);
}

/* ============================================================
   7.6 情報バー（hero__infobar）
   背景は不透明の --c-navy-deep を直接使用する（rgba再現は禁止。§2.3-7）。
   ============================================================ */
.hero__infobar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 0;
  background-color: var(--c-navy-deep);
  padding: 12px 16px;
  border-radius: var(--radius-md);
}
@media (min-width: 900px) {
  .hero__infobar {
    padding: 14px 24px;
  }
}

.hero__infobar-item {
  color: var(--c-ivory);
  font-size: var(--fs-infobar);
  line-height: var(--lh-infobar);
  letter-spacing: var(--ls-infobar);
}

.hero__infobar-divider {
  color: var(--c-ivory-dim);
  margin: 0 8px;
}

/* ============================================================
   7.7 追従CTAバー（cta-bar）
   ============================================================ */
.ctabar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background-color: var(--c-navy-deep);
  box-shadow: var(--shadow-ctabar);
  z-index: var(--z-ctabar);
  display: flex;
  transform: translateY(100%); /* 初期状態：画面外 */
  transition: transform 200ms ease-in; /* 退出時の既定transition */
}

.ctabar.is-active {
  transform: translateY(0);
  transition: transform 300ms ease-out; /* 出現時のtransition */
}

.ctabar .btn {
  flex: 1 1 50%;
  height: 100%;
  border-radius: 0;
}

/* lg(900px)以上は常時非表示。.u-hidden-desktop併用でも同じ結果になる（保険として二重に指定） */
@media (min-width: 900px) {
  .ctabar {
    display: none;
  }
}

/* ============================================================
   7.8 デモ帯（demo-bar）
   position:static（追従させない）。is-on-darkは付与不要のため、色はここで直接指定する。
   ============================================================ */
.demobar {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px; /* モバイル */
  background-color: var(--c-navy-deep);
  color: var(--c-ivory);
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: var(--fw-regular);
  border-bottom: 2px solid var(--c-wood-light);
  text-align: center;
  padding-inline: var(--sp-2);
}
@media (min-width: 900px) {
  .demobar {
    height: 40px; /* PC */
    font-size: 13px;
  }
}

/* ============================================================
   7.9 フォーム入力欄
   ============================================================ */
.form__group {
  margin-bottom: var(--sp-3); /* 24px */
}

.form__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-bold);
}

.form__required {
  color: var(--c-sky-deep); /* 設置面はivory-dim（contact）のためオフホワイト系背景限定ルールに適合 */
  font-size: 12px;
  margin-left: 4px;
}

.form__input,
.form__textarea {
  display: block;
  width: 100%;
  min-height: 48px; /* モバイル */
  padding: 12px 16px;
  border: 1px solid var(--c-text-muted);
  border-radius: var(--radius-sm);
  background-color: var(--c-ivory);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: 16px; /* iOS自動ズーム防止のため常に16px以上を維持する */
}
@media (min-width: 900px) {
  .form__input,
  .form__textarea {
    min-height: 52px; /* PC */
  }
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__input:focus,
.form__textarea:focus {
  border-color: var(--c-navy);
}

.form__notice {
  background-color: var(--c-ivory-dim);
  border-left: 4px solid var(--c-wood);
  padding: 12px 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.form__submit-message {
  background-color: var(--c-ivory-dim);
  padding: 16px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ============================================================
   7.10 地図ファサード
   ============================================================ */
.map-facade {
  position: relative;
  aspect-ratio: 16 / 9; /* モバイル */
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 900px) {
  .map-facade {
    aspect-ratio: auto;
    height: 400px; /* PC固定 */
  }
}

.map-facade__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-facade__overlay {
  position: absolute;
  inset: 0;
  /* 地図読み込み前であることを示す視覚効果のみが目的でテキストコントラスト対象ではないため透過可（§7.10） */
  background-color: rgba(15, 26, 43, 0.4);
  z-index: var(--z-map-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .btn / .btn--secondary をベースに、このoverlayをis-on-dark相当として組み合わせて使う */
.map-facade__button {
  position: relative;
}

/* ============================================================
   7.11 セクション見出し
   ============================================================ */
.section-heading {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--sp-3); /* 24px（モバイル） */
}
@media (min-width: 900px) {
  .section-heading {
    margin-bottom: var(--sp-4); /* 32px（PC） */
  }
}

.section-heading__eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-sky-deep); /* light面 */
}
.is-on-dark .section-heading__eyebrow {
  color: var(--c-wood-light); /* dark面 */
}

.section-heading__lead {
  margin-top: 8px;
  color: var(--c-text-muted); /* light面 */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}
.is-on-dark .section-heading__lead {
  color: var(--c-ivory-dim); /* dark面 */
}

/* ============================================================
   7.12 注記テキスト
   ============================================================ */
.note {
  margin-top: 8px;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  letter-spacing: var(--ls-note);
  color: var(--c-text-muted); /* light面 */
}
.is-on-dark .note {
  color: var(--c-ivory-dim); /* dark面 */
}

/* ============================================================
   スキップリンク（§9.7）
   ============================================================ */
.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  z-index: var(--z-skiplink);
  background-color: var(--c-navy);
  color: var(--c-ivory);
  padding: 12px 20px;
  transition: transform 150ms ease;
}
.skip-link:focus {
  transform: translateY(0);
}

/* ============================================================
   スクロール連動フェードイン（§8.1）
   IntersectionObserverが対象要素に .is-visible を付与する前提。
   80msずつのstagger遅延・最大320msの制御はJS側（要素ごとに transition-delay を設定）で行う。
   ============================================================ */
.js-reveal {
  opacity: 0;
  transform: translateY(24px); /* モバイル */
  transition: opacity var(--dur-fade) var(--ease-out),
              transform var(--dur-fade) var(--ease-out);
}
@media (min-width: 900px) {
  .js-reveal {
    transform: translateY(32px); /* PC */
  }
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   u-系ユーティリティ（§6.4）。1クラス1目的。
   ============================================================ */
.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-7 { margin-top: var(--sp-7); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mt-9 { margin-top: var(--sp-9); }
.u-mt-10 { margin-top: var(--sp-10); }

.u-mb-1 { margin-bottom: var(--sp-1); }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-mb-7 { margin-bottom: var(--sp-7); }
.u-mb-8 { margin-bottom: var(--sp-8); }
.u-mb-9 { margin-bottom: var(--sp-9); }
.u-mb-10 { margin-bottom: var(--sp-10); }

.u-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;
}

/* lg(900px)未満でのみ表示させたい要素に使う（既定は非表示） */
.u-hidden-mobile {
  display: none;
}
@media (min-width: 900px) {
  .u-hidden-mobile {
    display: block;
  }
}

/* lg(900px)以上で非表示にする（cta-barに使用）。
   「表示側」の値をここで固定すると .ctabar 等が持つ display:flex を破壊するため、
   非表示にする側の条件だけを定義し、それ以外の状態は各コンポーネント側の指定に委ねる。 */
@media (min-width: 900px) {
  .u-hidden-desktop {
    display: none;
  }
}

.u-visually-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   index.html が使用するクラス名に対する定義
   担当範囲：ユーティリティ／ヘッダー／追従CTAバー／画像注記／デモ帯本文
   ============================================================ */

/* ---- ユーティリティ ---- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.u-skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: var(--z-skiplink);
  transform: translateY(-120%);
  display: inline-block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-navy);
  color: var(--c-ivory);
  font-family: var(--ff-body);
  font-size: var(--fs-note);
  text-decoration: none;
  border-bottom-right-radius: var(--radius-md);
  transition: transform 160ms var(--ease-out);
}
.u-skip-link:focus-visible,
.u-skip-link:focus { transform: translateY(0); }

.u-hide-pc { display: inline; }
.u-hide-mobile { display: none; }
@media (min-width: 900px) {
  .u-hide-pc { display: none; }
  .u-hide-mobile { display: inline; }
}

/* ---- デモ表記の帯（本文） ---- */
.demobar__text {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-infobar);
  line-height: var(--lh-infobar);
  letter-spacing: var(--ls-infobar);
  color: var(--c-ivory-dim);
  text-align: center;
}

/* ---- ヘッダー ---- */
.hdr {
  position: sticky; top: 0;
  z-index: var(--z-header);
  background: var(--c-ivory);
  border-bottom: 1px solid rgba(23, 38, 61, 0.10);
}
.hdr__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  min-height: 60px;
  padding-block: var(--sp-1);
}
.hdr__logo {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  white-space: nowrap;
}
@media (min-width: 900px) {
  .hdr__inner { min-height: 72px; }
  .hdr__logo { font-size: 1.375rem; }
}
.hdr__nav { display: flex; align-items: center; gap: var(--sp-1); }
.hdr__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: var(--sp-2);
  border-radius: var(--radius-full);
  font-family: var(--ff-body);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-btn);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.hdr__btn-icon { flex: none; }
.hdr__btn--tel {
  color: var(--c-navy);
  border: 1px solid rgba(23, 38, 61, 0.28);
  background: transparent;
}
.hdr__btn--tel:hover { background: var(--c-ivory-dim); }
.hdr__btn--book {
  color: var(--c-ivory);
  background: var(--c-sky-deep);
  border: 1px solid var(--c-sky-deep);
}
.hdr__btn--book:hover { background: #275C85; border-color: #275C85; }

/* ---- 画像の「イメージです」注記 ---- */
.figure__note {
  margin: var(--sp-1) 0 0;
  font-family: var(--ff-body);
  font-size: 0.75rem;     /* 12px。掲載上必要な情報のため可読性の下限を下回らせない */
  line-height: 1.6;
  color: var(--c-text-muted);
  text-align: right;
}
.is-on-dark .figure__note { color: var(--c-ivory-dim); opacity: 0.72; }

/* ---- 追従CTAバー ---- */
.ctabar {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: var(--z-ctabar);
  background: var(--c-navy);
  box-shadow: var(--shadow-ctabar);
  transform: translateY(110%);
  transition: transform 260ms var(--ease-out);
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.ctabar.is-visible, .ctabar.is-active { transform: translateY(0); }
.ctabar__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-width: 560px;
  margin-inline: auto;
}
.ctabar__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px;
  min-height: 48px;
  padding-inline: 6px;
  border-radius: var(--radius-full);
  font-family: var(--ff-body);
  font-size: 0.8125rem;          /* 13px。375pxで3ボタンが1行に収まる値 */
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;           /* ラベルを途中で折らない */
  transition: background-color 180ms var(--ease-out);
}
.ctabar__label { white-space: nowrap; }
.ctabar__icon { flex: none; width: 18px; height: 18px; }
.ctabar__btn--tel  { background: var(--c-ivory); color: var(--c-navy); border: 1px solid var(--c-ivory); }
.ctabar__btn--tel:hover { background: #FFFFFF; }
.ctabar__btn--book { background: var(--c-sky-deep); color: var(--c-ivory); border: 1px solid var(--c-sky-deep); }
.ctabar__btn--book:hover { background: #275C85; border-color: #275C85; }
.ctabar__btn--contact {
  background: transparent; color: var(--c-ivory);
  border: 1px solid var(--c-wood-light);
}
.ctabar__btn--contact:hover { background: rgba(196, 168, 130, 0.14); }
@media (min-width: 400px) { .ctabar__btn { font-size: 0.875rem; gap: 6px; padding-inline: 10px; } }
@media (min-width: 900px) { .ctabar { display: none; } }

/* ---- JS未読込時に本文が消えないための保険 ---- */
.js-reveal { opacity: 1; transform: none; }
.js .js-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-fade) var(--ease-out), transform var(--dur-fade) var(--ease-out); }
.js .js-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   見出しの改行制御（2026-09-03 追補）
   日本語は語間にスペースが無いため、既定では語中で折れる。
   ・text-wrap: balance で行長を均等化し、最終行1文字などの不格好な折返しを防ぐ
   ・line-break: strict で禁則を厳格に（行頭の「、」「。」「ー」等を防ぐ）
   ・意味の切れ目を守りたい塊は HTML 側で .u-nobr に包む
   ============================================================ */
h1, h2, h3,
.hero__catch, .hero__sub,
.section-heading, .section-heading__lead,
.trouble__title, .reasons__title, .analysis__title, .flow__title,
.menu__title, .staff__title, .facility__title, .rating__title,
.access__title, .faq__title, .contact__title,
.trouble__item-title, .reasons__item-title, .flow__step-title,
.menu__item-title, .facility__item-title, .faq__trigger-text {
  text-wrap: balance;
  line-break: strict;
  overflow-wrap: break-word;   /* anywhere は語中で分断するため使わない */
  min-width: 0;                /* flex/grid 内で幅が潰れるのを防ぐ */
}

/* 本文は balance ではなく pretty（末行の孤立語を防ぐ） */
p, li, dd { text-wrap: pretty; line-break: strict; }

/* 途中で折ってはいけない塊 */
.u-nobr { white-space: nowrap; }

/* 折り返し位置を明示したい箇所（改行可能点をここだけに限定する） */
.u-wrap-unit { display: inline-block; }

/* ---- スクロール演出のスタッガー（同一グリッド内で順に現れる） ---- */
.js .trouble__list > .js-reveal:nth-child(2),
.js .reasons__list > .js-reveal:nth-child(2),
.js .flow__steps > .js-reveal:nth-child(2),
.js .menu__list > .js-reveal:nth-child(2),
.js .facility__list > .js-reveal:nth-child(2) { transition-delay: 80ms; }
.js .trouble__list > .js-reveal:nth-child(3),
.js .reasons__list > .js-reveal:nth-child(3),
.js .flow__steps > .js-reveal:nth-child(3),
.js .menu__list > .js-reveal:nth-child(3),
.js .facility__list > .js-reveal:nth-child(3) { transition-delay: 160ms; }
.js .trouble__list > .js-reveal:nth-child(n+4),
.js .flow__steps > .js-reveal:nth-child(n+4),
.js .menu__list > .js-reveal:nth-child(n+4),
.js .facility__list > .js-reveal:nth-child(n+4) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .js .js-reveal { transition-delay: 0s !important; }
}

/* ============================================================
   is-on-dark の汎用リンク色に対する上書き（2026-09-03）
   base.css の `.is-on-dark a:not(.btn)`（詳細度 0,2,1）より
   詳細度を高くする必要があるため、要素セレクタを足して後勝ちさせる。
   ボタンは各ボタン定義の配色を優先する。
   ============================================================ */
.ctabar a.ctabar__btn--tel     { color: var(--c-navy); }
.ctabar a.ctabar__btn--book    { color: var(--c-ivory); }
.ctabar a.ctabar__btn--contact { color: var(--c-ivory); }
.ftr a.ftr__link               { color: var(--c-wood-light); }
.ftr a.ftr__tel                { color: var(--c-ivory); }


/* ============================================================
   横スクロール防止（2026-09-03）
   狭い画面で flex/grid の子が縮まないことによる横はみ出しを防ぐ。
   ①各所で個別に幅を詰め ②最後の安全網を敷く。
   ============================================================ */

/* --- 安全網：flex/grid の子は既定で縮まないため min-width を 0 に --- */
*, *::before, *::after { min-width: 0; }
img, svg, video, iframe, table, pre { max-width: 100%; }
html, body { overflow-x: clip; }   /* clip は sticky を壊さない */

/* --- ヘッダー：狭い画面でロゴとボタンを収める --- */
.hdr__inner { flex-wrap: nowrap; }
.hdr__logo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 359px) {
  .hdr__logo { font-size: 0.9375rem; letter-spacing: 0.02em; }
  .hdr__btn { padding-inline: 10px; font-size: 0.8125rem; gap: 4px; }
  .hdr__btn-icon { width: 16px; height: 16px; }
}

/* --- 追従CTAバー：狭い画面でも3ボタンを1行に収める --- */
@media (max-width: 359px) {
  .ctabar { padding: 6px; }
  .ctabar__inner { gap: 4px; }
  .ctabar__btn { font-size: 0.75rem; gap: 3px; padding-inline: 2px; }
  .ctabar__icon { width: 15px; height: 15px; }
}