@charset "UTF-8";
/* ===================================================================
   00. ベース補助
=================================================================== */
:root {
  --header-h: 4.5rem; /* SPヘッダーの実高さ（要実測） */
}

html {
  /* sticky ヘッダー分だけアンカー位置をずらす */
  scroll-padding-top: 7.5rem;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* スキップリンク */
.skip-link {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  transform: translateY(-120%);
  z-index: 1000;
  padding: 0.75em 1.5em;
  background-color: var(--c-blue);
  color: var(--c-white);
  font-size: var(--fs-sm);
  transition: transform var(--ease);
}
.skip-link:focus-visible {
  transform: translateY(0);
}

/* フォーカスリング（全体共通） */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--c-blue-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================================================================
   01. ボタン
=================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.9em 1.8em; /* 文字サイズ連動 → em */
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-white);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: background-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn:active {
  transform: translateY(0);
}

.btn-blue {
  background-color: var(--c-blue);
}
.btn-blue:hover {
  background-color: var(--c-blue-deep);
}

/* LINE導線専用（公式ブランドカラー準拠・ホバーは黒10%乗せ） */
.btn-green {
  background-color: var(--c-line-brand);
}
.btn-green:hover {
  background-color: var(--c-line-brand-hover);
}

/* アウトライン（青罫・青文字）— カード内の「詳細ページへ」等 */
.btn-outline-blue {
  background-color: transparent;
  border: 1px solid var(--c-blue);
  color: var(--c-blue);
  box-shadow: none;
}
.btn-outline-blue:hover {
  background-color: var(--c-blue);
  color: var(--c-white);
  box-shadow: none;
}

/* テキストボタン（詳しく見る 等） */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--c-blue-deep);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--c-blue);
  padding-bottom: 0.2em;
  transition: color var(--ease), border-color var(--ease);
}
.btn-text:hover {
  color: var(--c-gold-deep);
  border-bottom-color: var(--c-gold);
}

/* 矢印 */
.has-arrow::after {
  content: "›";
  font-size: 1.4em;
  line-height: 1;
  margin-left: 0.2em;
}

/* 予約ボタン（アイコン + 2段テキスト） */
.btn-reserve {
  gap: 0.6em;
  padding: 0.7em 1.5em;
  border-radius: var(--radius-sm);
}
.btn-reserve__ico {
  width: 2.25em;
  height: auto;
  flex-shrink: 0;
}
.btn-reserve__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
}
.btn-reserve__main {
  font-size: var(--fs-base);
  font-weight: 700;
}
.btn-reserve__sub {
  font-size: 0.625rem;
  font-weight: 400;
  opacity: 0.92;
  letter-spacing: 0.02em;
}

/* ===================================================================
   02. セクション見出し
=================================================================== */
.sec-title {
  text-align: center;
  margin-bottom: 3rem;
}
.sec-title__main {
  display: inline-block;
  margin: 0;
  font-family: var(--f-jp-serif);
  font-size: var(--fs-2xl);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--c-text-strong);
  text-wrap: balance;
}
.sec-title {
  /* 下飾り: フェード付き罫線＋中央4芒星。
     形はmaskで抜くので色は --c-gold トークン連動のまま */
}
.sec-title::after {
  content: "";
  display: block;
  inline-size: min(240px, 70%);
  block-size: 16px;
  margin-block-start: 0.9rem;
  margin-inline: auto;
  background: var(--c-gold);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13.1 7.6 16.4 10.9 24 12C16.4 13.1 13.1 16.4 12 24C10.9 16.4 7.6 13.1 0 12C7.6 10.9 10.9 7.6 12 0Z'/%3E%3C/svg%3E") no-repeat center/auto 100%, linear-gradient(to right, transparent, var(--c-gold) 25%, var(--c-gold) 75%, transparent) no-repeat center/100% 1px;
}
.sec-title {
  /* 見出し上の小ラベル */
}
.sec-title__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-gold-deep);
  letter-spacing: 0.12em;
  margin-bottom: 0.6em;
}

/* ===================================================================
   03. ヘッダー
=================================================================== */
.site-header {
  --logo-w: 340px; /* scrollTop:0 の拡大サイズ */
  --header-pad: clamp(1rem, 2.5vw, 2.5rem); /* 全幅化の左右余白 */
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: none;
  transition: box-shadow var(--ease);
}
.site-header.is-scrolled { /* JS(.is-scrolled)連動 */
  --logo-w: 260px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); /* 下線の代替（scrolled時のみ） */
}

/* 背景のすりガラスは「疑似要素」に持たせる。
   ─ backdrop-filter / filter / transform を .site-header 本体に付けると
     position:fixed の子孫（ドロワー・オーバーレイ）の基準がヘッダーになり、
     画面外へはみ出して横スクロールが発生するため。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: color-mix(in srgb, var(--c-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); /* Safari 17 以下は要プレフィックス */
  backdrop-filter: blur(8px);
}

/* ---------- 上段：言語切替 ---------- */
.header-top {
  border-bottom: 1px solid var(--c-line-light);
}
.header-top__inner {
  display: flex;
  justify-content: flex-end;
  padding-block: 0.35rem;
  max-width: none;
  padding-inline: var(--header-pad);
}

.lang-switch {
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}
.lang-switch a {
  transition: color var(--ease);
}
.lang-switch a:hover {
  color: var(--c-blue-deep);
}
.lang-switch a.is-active {
  color: var(--c-blue-deep);
  font-weight: 700;
}
.lang-switch__sep {
  color: var(--c-line);
  margin-inline: 0.5em;
}

/* ---------- 下段：ロゴ / ナビ / CTA ---------- */
.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.75rem;
  max-width: none;
  padding-inline: var(--header-pad);
}

/* ロゴ（logo-ja/en.svg 単一img構造） */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo .logo__img {
  inline-size: var(--logo-w);
  block-size: auto;
  transition: inline-size 0.35s var(--ease);
}

/* ドロワーの器（PCでは単なる横並び） */
.header-drawer {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

/* グローバルナビ */
.gnav__list {
  display: flex;
  gap: 1.4rem;
}
.gnav a {
  position: relative;
  display: block;
  font-size: 1rem; /* PC基準16px */
  color: var(--c-text-strong);
  padding-block: 0.4em;
  white-space: nowrap;
  transition: color var(--ease);
  /* 下線は擬似要素（レイアウトを揺らさない） */
}
.gnav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--c-blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--ease);
}
.gnav a:hover {
  color: var(--c-blue-deep);
}
.gnav a:hover::after {
  transform: scaleX(1);
}
.gnav .is-current a::after,
.gnav a[aria-current=page]::after {
  transform: scaleX(1);
}
.gnav .is-current a,
.gnav a[aria-current=page] {
  color: var(--c-blue-deep);
  font-weight: 700;
}

/* ヘッダーCTA */
.header-cta {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* ドロワー内の言語切替（SPのみ） */
.drawer-lang {
  display: none;
}

/* SP専用のアンカーナビ（.sp-anchor-nav）はトップ専用のため
   page-index.scss 側に定義。ここには置かない。 */
/* ===================================================================
   04. ドロワー（SP）
=================================================================== */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--c-text-strong);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 1.4rem;
}
.nav-toggle__bars span {
  display: block;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  /* --ease は「0.3s ease」（duration込み）なので、秒数を前置きしないこと */
  transition: translate var(--ease), rotate var(--ease), scale var(--ease), opacity 0.2s ease;
}
.nav-toggle__label {
  font-family: var(--f-en);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}

/* 開いている時は × に変形（フラット記述） */
.nav-toggle[aria-expanded=true] .nav-toggle__bars span:nth-child(1) {
  translate: 0 7px;
  rotate: 45deg;
}

.nav-toggle[aria-expanded=true] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
  scale: 0 1; /* 中央線は横に縮めながら消す */
}

.nav-toggle[aria-expanded=true] .nav-toggle__bars span:nth-child(3) {
  translate: 0 -7px;
  rotate: -45deg;
}

/* 開いたら MENU の文字を消す */
.nav-toggle[aria-expanded=true] .nav-toggle__label {
  opacity: 0;
}

/* オーバーレイ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background-color: rgba(93, 76, 50, 0.35);
  opacity: 0;
  transition: opacity var(--ease);
}
.drawer-overlay.is-visible {
  opacity: 1;
}

/* ===================================================================
   05. パンくず
   ※パンくずはプロジェクト方針で非搭載（マークアップ側に存在しない）。
     復活の可能性に備えてスタイルのみ温存。
=================================================================== */
.breadcrumb {
  padding-block: 0.9rem;
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.breadcrumb__list li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.breadcrumb__list li + li::before {
  content: "›";
  color: var(--c-line);
  font-size: 1.1em;
}
.breadcrumb__list a {
  transition: color var(--ease);
}
.breadcrumb__list a:hover {
  color: var(--c-blue-deep);
}
.breadcrumb__list [aria-current=page] {
  color: var(--c-text-sub);
}

/* ===================================================================
   06. ページヒーロー（下層共通）
   レイヤー（下→上）: __bg(写真・SVGマスク) → __veil(すりガラス)
                     → __deco(装飾webp) → __inner(テキスト)
=================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  aspect-ratio: 2000/768; /* 写真基準 */
  min-block-size: 22rem; /* テキスト量が多い時の保険（超えたら伸びる） */
  max-inline-size: 100%;
  /* hidden ではなく clip。スクロールコンテナを作らないので、
     祖先の position:sticky（.site-header）を殺さない */
  overflow: clip;
  /* 調整ツマミ */
  --photo-pos: 65% 40%; /* 写真のトリミング位置 */
  --deco-shift: 3px; /* 装飾webpの下げ量（正で下へ） */
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos);
  mask-image: url("/assets/images/decoration/sub-hero-path.svg");
  mask-size: var(--mask-size, 100% 100%); /* 【追加】マスクのサイズを可変に */
  mask-position: var(--mask-pos, 0 0); /* 【追加】マスクの位置 */
  mask-repeat: no-repeat;
}
.page-hero {
  /* 上端すりガラス。ぼかしはグラデマスクで下へ溶かす */
}
.page-hero__veil {
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 42%;
  z-index: 1;
  -webkit-backdrop-filter: blur(7px); /* Safari 17以下 */
  backdrop-filter: blur(7px);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-bg-cream) 55%, transparent), transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
  pointer-events: none;
}
.page-hero {
  /* 全面装飾（金曲線・きらめき・下端ベージュ波） */
}
.page-hero__deco {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("/assets/images/decoration/back-sub-header.webp");
  background-repeat: no-repeat;
  /* 【追加】x/y を分離してSPから個別に上書きできるように。
     既定値は従来と同じ（left / 下端に --deco-shift ぶん下げ） */
  background-position: var(--deco-pos-x, left) var(--deco-pos-y, calc(100% + var(--deco-shift, 0px)));
  background-size: var(--deco-size, 100% auto);
  pointer-events: none;
}
.page-hero {
  /* テキスト（縦センター・最前面） */
}
.page-hero__inner {
  position: relative;
  z-index: 3;
  block-size: 100%;
  align-content: center;
}
.page-hero__title {
  margin: 0;
  font-family: var(--f-jp-serif);
  font-size: var(--fs-3xl);
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--c-text-strong);
  text-wrap: balance;
}
.page-hero__en {
  font-family: var(--f-script);
  font-size: var(--fs-2xl);
  color: var(--c-blue);
  margin: 0.2em 0 1.2em;
  letter-spacing: 0.04em;
}
.page-hero__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-text-sub);
  max-width: 28em;
}

/* ===================================================================
   07. 共通CTA（チャンク cta_band の実クラス体系）
=================================================================== */
.c-cta {
  padding-block: 3.5rem;
  background: var(--c-blue-pale); /* セクション帯 */
}
.c-cta__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: 2em clamp(1.5em, 4vw, 2.8em);
  background: var(--c-white); /* 白カード */
  border: 1px solid var(--c-line-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) {
  .c-cta__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.c-cta {
  /* --- 左: 文言＋イラスト --- */
}
.c-cta__lead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1em;
  align-items: center;
}
.c-cta__text {
  margin-block: 0;
  align-content: center;
  font-family: var(--f-jp-serif);
  font-size: var(--fs-base);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-wrap: balance;
  color: var(--c-text-strong);
}
.c-cta__text > h3 {
  font-size: var(--fs-md);
  color: var(--c-blue-deep);
  font-weight: 600;
}
.c-cta__illust {
  inline-size: clamp(6em, 12vw, 9em);
  block-size: auto;
  align-self: center;
}
.c-cta {
  /* --- 右: ボタン＋電話 --- */
}
.c-cta__action {
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.c-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  inline-size: 100%;
}
.c-cta__buttons .c-btn {
  flex: 1;
  min-inline-size: 12em;
}
.c-cta__tel {
  margin-block: 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text-sub);
}
.c-cta__tel a {
  display: inline-block;
  margin-inline-start: 0.8em;
  font-size: 2em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-blue-deep);
  text-decoration: none;
}
@media (max-width: 767px) {
  .c-cta__tel a {
    display: block;
    margin-inline-start: 0;
    margin-block-start: 0.3em;
  }
}

/* 共通ボタン（c-btn）— 既存 .btn 系とは別体系 */
.c-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  padding: 1em 1.8em;
  border-radius: var(--radius-sm);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-white);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background-color var(--ease), transform var(--ease);
}
.c-btn span {
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.92;
}
.c-btn:hover {
  transform: translateY(-2px);
}
.c-btn--lg {
  font-size: var(--fs-base);
  padding-block: 1.1em;
}
.c-btn--web {
  background-color: var(--c-blue);
}
.c-btn--web:hover {
  background-color: var(--c-blue-deep);
}
.c-btn {
  /* LINE導線＝公式ブランドカラー準拠（黒10%乗せホバー） */
}
.c-btn--line {
  background-color: var(--c-line-brand);
}
.c-btn--line:hover {
  background-color: var(--c-line-brand-hover);
}

/* ===================================================================
   08. 目次（tocGen が nav.c-toc を出力）
=================================================================== */
.c-toc {
  margin-block: 0 2.5rem;
  padding: 1.8em 2em;
  background: var(--c-cream, #faf6ef);
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
}
.c-toc__title {
  margin-block: 0 1em;
  font-family: var(--f-jp-serif);
  font-size: 1.125em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--c-text-strong);
}
.c-toc {
  /* 目次なので素直に縦1列（多段組みは読み順が追いにくい） */
}
.c-toc__list {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none; /* 番号はスニペットが "1. " を出力済み */
}
.c-toc__item {
  line-height: 1.7;
}
.c-toc__item a {
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  color: var(--c-blue-deep);
  text-decoration: none;
}
.c-toc__item a:hover {
  text-decoration: underline;
}

/* ===================================================================
   09. ページャー（DocLister paginate 出力・column / info 共用）
   出力構造: nav.news-pager > .pagenation > a.page-link[.active]
                                          / a.page-nav-text（PREV/NEXT）
=================================================================== */
.news-pager {
  margin-block-start: 2.5rem;
}
.news-pager .pagenation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.news-pager .page-link {
  display: grid;
  place-content: center;
  inline-size: 2.4em;
  block-size: 2.4em;
  border-radius: 50%;
  font-family: var(--f-en-serif, "Cormorant Garamond", serif);
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
  color: var(--c-blue-deep);
  background: var(--c-white);
  border: 1px solid var(--c-blue);
  transition: background-color var(--ease), color var(--ease);
}
.news-pager .page-link:hover {
  background: var(--c-cream, #faf6ef);
}
.news-pager {
  /* 現在ページ */
}
.news-pager .page-link.active {
  background: var(--c-blue);
  color: var(--c-white);
  border-color: var(--c-blue);
  pointer-events: none;
}
.news-pager {
  /* PREV / NEXT はテキストリンク（丸にしない） */
}
.news-pager .page-nav-text {
  display: inline-flex;
  align-items: center;
  padding-inline: 0.8em;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--c-blue-deep);
  transition: color var(--ease);
}
.news-pager .page-nav-text:hover {
  color: var(--c-gold-deep);
}

/* ===================================================================
   10. アクセス（チャンク access_section・about / top 共用）
=================================================================== */
.sec-access {
  background-color: var(--c-bg-cream);
  /* --- 住所（コピペ用に選択しやすく） --- */
}
.sec-access .access-address {
  margin-block-end: 2.5rem;
  text-align: center;
}
.sec-access .access-address__text {
  margin-block: 0 0.4em;
  font-size: 1.125rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--c-text-strong);
  user-select: all; /* クリックで全選択＝コピペしやすく */
}
.sec-access .access-address__sub {
  margin-block: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--c-text-sub);
}
.sec-access {
  /* --- 地図（画面全幅） --- */
}
.sec-access .access__map {
  margin-block-end: 4rem;
}
.sec-access .access__map iframe {
  display: block;
  inline-size: 100%;
  block-size: 26rem;
  border: 0;
}
@media (max-width: 767px) {
  .sec-access .access__map iframe {
    block-size: 20rem;
  }
}
.sec-access {
  /* --- 道順写真（5枚・番号付き） --- */
}
.sec-access .route-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: route;
  /* SPは横スワイプ（scroll-snap・JS不要） */
}
@media (max-width: 767px) {
  .sec-access .route-steps {
    grid-auto-flow: column;
    grid-auto-columns: 68%;
    grid-template-columns: none;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    padding-block-end: 0.5rem;
    /* 負マージンによるフルブリードは廃止（container余白と不一致で横溢れするため） */
    margin-inline: 0;
    padding-inline: 0;
  }
  .sec-access .route-steps::-webkit-scrollbar {
    display: none;
  }
  .sec-access .route-steps { /* Safari/Chrome */ }
}
.sec-access .route-step {
  counter-increment: route;
  position: relative;
}
@media (max-width: 767px) {
  .sec-access .route-step {
    scroll-snap-align: center;
  }
}
.sec-access .route-step {
  /* 次の写真へ向かう矢印（最後以外・PCのみ） */
}
.sec-access .route-step:not(:last-child)::after {
  content: "▶";
  position: absolute;
  inset-block-start: 3.4em;
  inset-inline-end: -0.9rem;
  font-size: 0.75em;
  color: var(--c-gold);
}
@media (max-width: 899px) {
  .sec-access .route-step:not(:last-child)::after {
    content: none;
  }
}
.sec-access .route-step__img {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.sec-access .route-step__img img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
.sec-access .route-step__img {
  /* 左上に連番バッジ */
}
.sec-access .route-step__img::before {
  content: counter(route);
  position: absolute;
  inset-block-start: 0.5em;
  inset-inline-start: 0.5em;
  z-index: 1;
  display: grid;
  place-content: center;
  inline-size: 1.9em;
  block-size: 1.9em;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: var(--fs-base);
  line-height: 1;
}
.sec-access .route-step__text {
  margin-block: 0.8em 0;
  font-size: 1rem; /* ルート基準 */
  line-height: 1.8;
  color: var(--c-text-sub);
}

/* ===================================================================
   11. フッター
=================================================================== */
.site-footer {
  position: relative;
  padding-block: 3.5rem 1.5rem;
  background-color: var(--c-bg-cream);
  border-top: 1px solid var(--c-line-light);
}

.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1.3fr; /* 旧: 1.5fr 1fr 1fr 1.3fr */
  gap: 2.5rem;
  align-items: start;
}

.logo--footer .logo__img {
  inline-size: 280px;
  block-size: auto;
}

.footer-address {
  margin-top: 1rem;
  font-size: var(--fs-xs);
  font-style: normal;
  line-height: 1.9;
  color: var(--c-text-sub);
}

/* フッターナビ（DLMenu自動生成・PCは2列） */
.footer-nav ul {
  columns: 2;
  column-gap: 2.5rem;
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}
.footer-nav li {
  break-inside: avoid;
}
.footer-nav a {
  display: block;
  font-size: var(--fs-sm);
  padding-block: 0.4em;
  color: var(--c-text-sub);
  transition: color var(--ease);
}
.footer-nav a:hover {
  color: var(--c-blue-deep);
}

.footer-contact__label {
  margin: 0 0 0.2em;
  font-size: var(--fs-xs);
  color: var(--c-text-sub);
}

.footer-tel {
  margin: 0 0 1rem;
}
.footer-tel a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--f-jp);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--c-blue-deep);
}
.footer-tel {
  /* 単色アイコンはmask方式（色をCSSで制御） */
}
.footer-tel .tel-icon {
  display: inline-block;
  inline-size: 40px;
  block-size: 40px;
  background-color: var(--c-blue-deep);
  mask: url("/assets/images/icon/icon-phone.svg") no-repeat center/contain;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-text-mute);
}
.footer-bottom__links {
  display: flex;
  gap: 1.5rem;
}
.footer-bottom__links a {
  transition: color var(--ease);
}
.footer-bottom__links a:hover {
  color: var(--c-blue-deep);
}

.footer-copy {
  margin: 0;
}

/* ===================================================================
   12. SP下部固定CTA / ページトップ
=================================================================== */
/* 画面右下に固定。既定は隠れていて、JSが .is-visible を付けると出る */
.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 85; /* バー(80)より上・ドロワー(96)より下 */
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: var(--c-white);
  border: 1px solid var(--c-line);
  color: var(--c-blue-deep);
  font-size: var(--fs-md);
  box-shadow: var(--shadow-card);
  /* 出入りのアニメーション（下からふわっと・少し小さい状態から） */
  opacity: 0;
  visibility: hidden;
  translate: 0 1rem;
  scale: 0.9;
  transition: opacity var(--ease), translate var(--ease), scale var(--ease), visibility var(--ease), transform var(--ease), bottom var(--ease), background-color var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  scale: 1;
}
.to-top {
  /* 矢印は個別に回す（親のtranslateYと打ち消し合わないよう分離） */
}
.to-top > span {
  transform: rotate(90deg);
}
.to-top:hover {
  transform: translateY(-3px);
  background-color: var(--c-blue-pale);
}

/* SP下部固定バー（既定は非表示） */
.sp-fixed-cta {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  gap: 1px;
  background-color: var(--c-line);
  padding-bottom: env(safe-area-inset-bottom); /* iPhone ホームバー回避 */
  box-shadow: 0 -4px 16px rgba(93, 76, 50, 0.12);
  transition: translate var(--ease), opacity var(--ease);
  /* JS(.is-hidden)連動：下へ逃がす */
}
.sp-fixed-cta.is-hidden {
  translate: 0 100%;
  opacity: 0;
  pointer-events: none;
}
.sp-fixed-cta__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  padding: 0.7em 0.3em;
  font-size: 0.6875rem;
  color: var(--c-white);
  line-height: 1.2;
}
.sp-fixed-cta__item img {
  width: 2em;
  height: auto;
}
.sp-fixed-cta__item--blue {
  background-color: var(--c-blue);
}
.sp-fixed-cta__item--green {
  background-color: var(--c-line-brand);
}
.sp-fixed-cta__item--tel {
  background-color: var(--c-gold-deep);
}

/* バーが引っ込んでいる間は、バーの高さ分の余白（1080pxブロック）も消す */
body:has(.sp-fixed-cta.is-hidden) {
  padding-bottom: 0;
}

/* ===================================================================
   13. お知らせ行（トップ・info一覧で共用）/ ✓リスト
=================================================================== */
.news-list {
  max-width: 900px;
  margin-inline: auto;
  border-block-start: 1px solid var(--c-cream, #eee5d8);
}

.news-item {
  display: grid;
  grid-template-columns: 7em 7em 1fr;
  gap: 1em 1.5em;
  align-items: center;
  padding-block: 1.1em;
  border-block-end: 1px solid var(--c-cream, #eee5d8);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--ease);
}
.news-item:hover {
  background-color: var(--c-cream, #faf6ef);
}
@media (max-width: 599px) {
  .news-item {
    grid-template-columns: 7em 1fr;
    gap: 0.5em 1em;
  }
}

.news-item:hover .news-item__title {
  color: var(--c-blue-deep);
}

.news-item__date {
  font-size: var(--fs-base);
  letter-spacing: 0.06em;
  color: var(--c-text-mute);
}

.news-item__title {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text-strong);
  transition: color var(--ease);
}
@media (max-width: 599px) {
  .news-item__title {
    grid-column: 1/-1;
  }
}

/* カテゴリバッジ（tvLabelの&wrapで data-cat を吐く） */
.news-item__cat {
  display: grid;
  place-content: center;
  padding: 0.45em 0.6em;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--c-white);
  background: #666666;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.news-item__cat[data-cat=休診] {
  background: var(--c-gold-deep);
}

.news-item__cat[data-cat=重要] {
  background: #c2604f;
}

/* ---------- ✓リスト（不安・持ち物 共用: tplCheckItem） ---------- */
.check-list {
  margin-block: 0;
  padding-inline-start: 0;
  list-style: none;
}
.check-list__item {
  position: relative;
  padding-inline-start: 2em;
  padding-block: 0.45em;
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--c-text-strong);
}
.check-list__item::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  display: grid;
  align-content: center;
  justify-content: center;
  inline-size: 1.3em;
  block-size: 1.3em;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 0.75em;
  line-height: 1;
}

/* ===================================================================
   14. 機械翻訳
=================================================================== */
.gtrans-dialog {
  max-inline-size: min(34em, 90vw);
  padding: 2em;
  border: 1px solid var(--c-gold);
  border-radius: var(--radius);
  background: var(--c-white);
}
.gtrans-dialog::backdrop {
  background: rgba(93, 76, 50, 0.4);
}
.gtrans-dialog__text {
  margin-block: 0 1.5em;
  font-size: 0.9rem;
  line-height: 1.9;
}
.gtrans-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8em;
}

/* 翻訳が表示できなかった場合のガイドバー（JSで hidden を解除） */
.gtrans-bar {
  background: var(--c-cream, #fdf9f0);
  color: var(--c-text);
  border-block-end: 1px solid var(--c-gold);
  font-size: 0.8125rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gtrans-bar.is-open {
  opacity: 1;
}
@starting-style {
  .gtrans-bar.is-open {
    opacity: 0;
  }
}
.gtrans-bar {
  /* .container と併用するため詳細度を揃える */
}
.gtrans-bar__inner.container, .gtrans-bar__inner {
  display: flex;
  align-items: center;
  gap: 1em;
  padding-block: 0.7em;
}
.gtrans-bar__text {
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.7;
}
.gtrans-bar__close {
  flex: 0 0 auto;
  inline-size: 2em;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.2em;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.2s ease;
}
.gtrans-bar__close:hover, .gtrans-bar__close:focus-visible {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
@media (width <= 767px) {
  .gtrans-bar {
    font-size: 0.75rem;
  }
  .gtrans-bar__inner.container, .gtrans-bar__inner {
    gap: 0.5em;
    padding-block: 0.6em;
  }
}

/* 英語ページの見出し調整（和文セリフ体と欧文で字面が異なるため）
   判定は <html lang="en"> */
:lang(en) .sec-title__main {
  font-size: var(--fs-xl);
  letter-spacing: 0.02em;
}

html[lang=en] .page-hero__en {
  display: none;
}

/* 英語はメニュー文言が長いのでナビだけ一段小さく（rem連動） */
html[lang=en] .gnav a {
  font-size: var(--fs-sm);
}

/* ===================================================================
   15. レスポンシブ
=================================================================== */
/* ---------- 〜1368px：ヘッダーCTAをドロワー内2行目へ ---------- */
@media (max-width: 1367.98px) {
  .header-drawer {
    flex-wrap: wrap; /* 折返しの発生場所をここに限定 */
    justify-content: flex-end;
    row-gap: 0.25rem;
  }
  .header-cta {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}
/* ---------- 〜1526px：英語ページのみ折返しを早める（文言が長いため） ---------- */
@media (min-width: 920.02px) and (max-width: 1526px) {
  html[lang=en] .header-drawer {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.25rem;
  }
  html[lang=en] .header-cta {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}
/* ---------- 〜1200px：ナビ間隔とCTAを圧縮 ---------- */
@media (max-width: 1200px) {
  .header-drawer {
    gap: 1.1rem;
  }
  .gnav__list {
    gap: 1rem;
  }
  .gnav a {
    font-size: var(--fs-sm);
  }
  .btn-reserve {
    padding: 0.6em 1em;
  }
  .btn-reserve__main {
    font-size: var(--fs-sm);
  }
}
/* ---------- 〜1080px：ヘッダーCTAを隠しSP固定バーへ委譲 ---------- */
@media (max-width: 1080px) {
  .header-cta {
    display: none;
  }
  .sp-fixed-cta {
    display: flex;
  }
  /* 固定バーの高さぶん本文下部に余白 */
  body {
    padding-bottom: calc(3.75rem + env(safe-area-inset-bottom));
  }
  /* SP固定バーの上に逃がす。バーが引っ込んだら定位置へ下ろす */
  .to-top {
    right: 1rem;
    bottom: calc(3.75rem + env(safe-area-inset-bottom) + 0.75rem);
  }
  body:has(.sp-fixed-cta.is-hidden) .to-top {
    bottom: 1.5rem;
  }
}
/* ---------- 〜992px：ヒーロー・フッターの段組み変更 ---------- */
@media (max-width: 992px) {
  /* 横長すぎるので縦を稼ぐ（aspect-ratio運用のため padding では調整しない） */
  .page-hero {
    aspect-ratio: 16/9;
  }
  .page-hero__title {
    font-size: var(--fs-2xl);
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .footer-contact {
    grid-column: 1/-1;
  }
  .footer-cta {
    flex-direction: row;
  }
  .footer-cta .btn {
    flex: 1;
  }
}
/* ---------- 〜920px：ドロワー化 ---------- */
@media (max-width: 920px) {
  /* stickyヘッダー分だけアンカー位置をずらす（SPは実高さが縮む） */
  html {
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }
  .nav-toggle {
    display: flex;
    z-index: 100;
  }
  .header-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 96;
    width: min(82vw, 340px);
    height: 100vh; /* dvh 非対応ブラウザ用フォールバック */
    height: 100dvh;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 5.5rem 1.5rem 2rem;
    background-color: var(--c-bg);
    box-shadow: -6px 0 24px rgba(93, 76, 50, 0.14);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--ease), visibility var(--ease);
  }
  .header-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .gnav__list {
    flex-direction: column;
    gap: 0;
  }
  .gnav a {
    font-size: var(--fs-base);
    padding: 1em 0.4em;
    border-bottom: 1px solid var(--c-line-light);
  }
  .gnav a::after {
    display: none;
  }
  .gnav .is-current a,
  .gnav a[aria-current=page] {
    color: var(--c-blue-deep);
    background-color: var(--c-blue-pale);
  }
  /* ドロワー内の言語切替を表示 */
  .drawer-lang {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .drawer-lang a {
    flex: 1;
    text-align: center;
    padding: 0.7em;
    font-size: var(--fs-sm);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
    color: var(--c-text-sub);
    transition: background-color var(--ease), color var(--ease);
  }
  .drawer-lang a.is-active {
    background-color: var(--c-blue);
    border-color: var(--c-blue);
    color: var(--c-white);
  }
  /* 上段の言語切替はドロワーへ移すので非表示 */
  .header-top {
    display: none;
  }
  /* ドロワー展開中は背面スクロールを固定 */
  body.is-drawer-open {
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  /* ページヒーロー: 写真を右側だけに出す（左はクリーム地） */
  .page-hero {
    --photo-pos: 100% 50%; /* 写真のトリミング＝右寄せ */
    --mask-size: auto 100%; /* マスクを高さ基準にして幅は比率追従 */
    --mask-pos: 100% 50%; /* マスクを右端中央へ */
    /* 装飾webpもマスクに追従させる */
    --deco-size: auto 60%;
    --deco-pos-x: 20%;
    --deco-pos-y: 98%;
  }
  .footer-address {
    display: none;
  } /* 住所は非表示 */
  /* ロゴをセンター */
  .footer-brand {
    text-align: center;
  }
  .footer-brand .logo--footer {
    justify-content: center;
  }
  /* ナビ: 罫線で区切ったボタン風グリッド */
  .footer-nav {
    border-block-start: 1px solid var(--c-line);
    padding-block: 0;
    /* .footer-nav が2つ並ぶので、境目で線が二重にならないよう上罫線を落とす */
  }
  .footer-nav + .footer-nav {
    border-block-start: none;
  }
  .footer-nav {
    /* columns（縦流し）だと nth-child と列位置が一致しないためgridに変更 */
  }
  .footer-nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
  }
  .footer-nav li {
    border-block-end: 1px solid var(--c-line);
  }
  .footer-nav li:nth-child(2n) {
    border-inline-start: 1px solid var(--c-line);
  }
  .footer-nav a {
    font-size: 0.82rem;
    padding-block: 0.9em;
    text-align: center;
    color: var(--c-text-strong);
  }
  /* 予約ボタン2カラム */
  .footer-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .footer-cta .btn-reserve {
    padding: 0.8em 0.5em;
    flex-direction: column;
    gap: 0.3em;
  }
  .footer-cta .btn-reserve__ico {
    inline-size: 1.8em;
  }
  .footer-cta .btn-reserve__body {
    align-items: center;
    text-align: center;
  }
  .footer-cta .btn-reserve__main {
    font-size: 0.85rem;
  }
  .footer-cta .btn-reserve__sub {
    font-size: 0.6rem;
  }
  /* コピーライト */
  .footer-bottom {
    justify-content: center;
    text-align: center;
    font-size: 0.65rem;
  }
  /* 末尾の余白を詰める */
  .site-footer {
    padding-block-end: 0.5rem;
  }
}
/* ---------- 〜640px：スマホ ---------- */
@media (max-width: 640px) {
  .site-header {
    --logo-w: 220px;
  }
  .site-header.is-scrolled {
    --logo-w: 190px;
  }
  .sec-title__main {
    font-size: var(--fs-xl);
  }
  .sec-title::after {
    inline-size: min(180px, 80%);
    margin-block-start: 0.7rem;
  }
  .page-hero {
    aspect-ratio: 3/2;
  }
  .page-hero__title {
    font-size: var(--fs-xl);
  }
  .page-hero__en {
    font-size: var(--fs-lg);
  }
  .page-hero__lead {
    font-size: var(--fs-sm);
  }
  .c-cta {
    padding-block: 2.5rem;
  }
  .c-cta__inner {
    padding: 1.5rem;
    border-radius: var(--radius);
  }
  .c-cta__lead {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .c-cta__illust {
    inline-size: 5rem;
  }
  .c-cta__buttons {
    flex-direction: column;
  }
  .c-cta__buttons .c-btn {
    inline-size: 100%;
  }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer-bottom__links {
    gap: 1rem;
  }
  .to-top {
    width: 3rem;
    height: 3rem;
  }
}