@charset "UTF-8";
/* ==========================================================================
   越後湯沢温泉 じょんのびの宿 大峰山荘  style.css
   テーマ：木の温もり ― 生成り・薄茶・白木・ひさしの紅
   ========================================================================== */

:root {
  --cha: #6b4a2f;         /* 茶：見出し・リンク・ボタン枠の基調色 */
  --kogecha: #3f2e22;     /* 焦茶：フッター */
  --kinari: #f5efe6;      /* 生成り（ベージュ）：ページ地 */
  --paper: #fcf9f4;       /* 白木：カード・帯 */
  --usucha: #e8dac6;      /* 薄茶：トップの大きな帯 */
  --beige: #efe4d4;       /* ベージュ：淡い面 */
  --kihada: #b4946d;      /* 木肌：格子・飾り線 */
  --sumi: #33261c;        /* 本文（温かみのある黒茶） */
  --kiri: #5f4f41;        /* 補足文字 */
  --line: #dccbb3;
  --beni: #a3262a;        /* 紅：建物のひさしの色。予約導線に使用 */
  --beni-dark: #85191d;

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;

  --gutter: clamp(20px, 5vw, 48px);
  --wrap: 1160px;
  --header-h: 64px;
  --dock-h: 0px;
  --radius: 3px;
}
@media (min-width: 1100px) { :root { --header-h: 84px; } }
@media (max-width: 767.98px) { :root { --dock-h: calc(66px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open, html.menu-open body { overflow: hidden; }

body {
  margin: 0;
  padding-bottom: var(--dock-h);
  background: var(--kinari);
  color: var(--sumi);
  font-family: var(--gothic);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: .04em;
  overflow-wrap: break-word;
  line-break: strict;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }

img, svg { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .3em; }
address { font-style: normal; }
strong { font-weight: 700; }
::selection { background: #e2cdae; color: var(--sumi); }
h1, h2, h3 { margin: 0; font-weight: 600; }

:focus-visible { outline: 3px solid var(--cha); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }
#main:focus { outline: none; }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 10px 18px; background: var(--cha); color: #fff; text-decoration: none;
}
.skip:focus { top: 12px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---------- Type ---------- */
.section-title {
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  line-height: 1.65;
  letter-spacing: .1em;
  margin: 0 0 .9em;
  font-feature-settings: "palt";
}
.section-subtitle {
  position: relative;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.625rem);
  line-height: 1.6;
  letter-spacing: .1em;
  margin: 0 0 1.4em;
  padding-bottom: .7em;
  border-bottom: 1px solid var(--line);
}
.section-subtitle::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 44px; height: 2px; background: var(--kihada);
}
.en {
  display: block;
  font-family: var(--mincho);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--kiri);
}
.body-copy { max-width: 36em; }
.body-copy + .body-copy { margin-top: 1em; }
.small { font-size: .875rem; color: var(--kiri); }
.caption { font-size: .8125rem; line-height: 1.7; color: var(--kiri); margin: .8em 0 0; }
.group-title {
  font-family: var(--mincho); font-size: 1.1875rem; letter-spacing: .08em;
  margin: 2.2em 0 .7em;
}
.detail-heading {
  font-family: var(--mincho); font-size: 1.1875rem; letter-spacing: .08em;
  margin: 0 0 .6em;
}

/* ---------- Links & buttons ---------- */
.inline-link { color: var(--cha); text-decoration: underline; text-decoration-thickness: 1px; }
.inline-link:hover { text-decoration-thickness: 2px; }

.text-link {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 6px 0;
  color: var(--cha);
  font-weight: 500;
  letter-spacing: .08em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .5em;
}
.text-link:hover { text-decoration-thickness: 2px; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid var(--beni);
  border-radius: var(--radius);
  background: var(--beni);
  color: #fff;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.button:hover { background: var(--beni-dark); border-color: var(--beni-dark); }
.button-outline { background: transparent; color: var(--cha); border-color: var(--cha); }
.button-outline:hover { background: var(--cha); border-color: var(--cha); color: #fff; }
.button-arrow { font-size: .9em; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 28px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--kinari);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 18px rgba(63, 46, 34, .05); }
.header-inner {
  display: flex; align-items: center; gap: 20px;
  width: min(1320px, 100% - var(--gutter) * 2);
  height: var(--header-h);
  margin-inline: auto;
}
.brand { flex: none; display: block; }
.brand img { width: auto; height: 38px; }
@media (min-width: 1100px) { .brand img { height: 50px; } }  /* ロゴ画像の原寸（221×50）で表示 */

.desktop-nav { display: none; }
@media (min-width: 1100px) {
  .desktop-nav { display: flex; gap: clamp(20px, 2.2vw, 34px); margin-left: auto; }
}
.desktop-nav a {
  position: relative;
  padding: 8px 0;
  font-size: .9375rem;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
}
.desktop-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.desktop-nav a[aria-current="page"] { color: var(--cha); font-weight: 700; }

.header-book { display: none; }
@media (min-width: 768px) {
  .header-book { display: inline-flex; margin-left: auto; min-height: 44px; padding: 8px 20px; font-size: .875rem; }
}
@media (min-width: 1100px) { .header-book { margin-left: 12px; } }

/* スマートフォン・タブレットのメニュー */
.mobile-menu { margin-left: auto; }
@media (min-width: 768px) { .mobile-menu { margin-left: 4px; } }
@media (min-width: 1100px) { .mobile-menu { display: none; } }
.mobile-menu summary {
  display: flex; align-items: center; gap: 10px;
  min-width: 44px; min-height: 44px; padding: 0 4px;
  cursor: pointer; list-style: none;
  font-size: .8125rem; font-weight: 500; letter-spacing: .1em;
  color: var(--cha);
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.menu-lines { position: relative; display: block; width: 26px; height: 10px; }
.menu-lines::before, .menu-lines::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
  background: currentColor; transition: transform .25s, top .25s;
}
.menu-lines::before { top: 0; }
.menu-lines::after { top: 8.5px; }
.mobile-menu[open] .menu-lines::before { top: 4.25px; transform: rotate(35deg); }
.mobile-menu[open] .menu-lines::after { top: 4.25px; transform: rotate(-35deg); }
.mobile-menu nav {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
  display: flex; flex-direction: column;
  padding: 16px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--kinari);
  border-top: 1px solid var(--line);
}
.mobile-menu nav a {
  display: flex; justify-content: space-between; align-items: center;
  width: min(640px, 100%); margin-inline: auto;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mincho); font-size: 1.1875rem; font-weight: 500; letter-spacing: .1em;
  text-decoration: none;
}
.mobile-menu nav a::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-top: 1.5px solid var(--kiri); border-right: 1.5px solid var(--kiri);
  transform: rotate(45deg);
}
.mobile-menu nav a[aria-current="page"] { color: var(--cha); font-weight: 700; }
.mobile-menu nav a[href="reserve.html"] {
  justify-content: center;
  margin-top: 28px; border: 0; border-radius: var(--radius);
  background: var(--beni); color: #fff;
  font-family: var(--gothic); font-size: 1rem;
}
.mobile-menu nav a[href="reserve.html"]::after { display: none; }

/* ---------- Top page: hero ---------- */
.hero { background: var(--usucha); color: var(--sumi); overflow: hidden; }
.hero-inner { display: grid; width: min(1280px, 100%); margin-inline: auto; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 600px) and (max-width: 899.98px) { .hero-photo img { aspect-ratio: 3 / 2; } }
.hero-tag {
  position: absolute; top: 0; left: clamp(16px, 4vw, 28px);
  writing-mode: vertical-rl;
  padding: 18px 9px 22px;
  background: rgba(63, 46, 34, .86);
  color: #fff;
  font-family: var(--mincho); font-size: .875rem; letter-spacing: .32em;
}
.hero-copy {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(36px, 7vw, 56px) var(--gutter) clamp(44px, 8vw, 64px);
  text-align: center;
}
.hero-place {
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-size: .8125rem; letter-spacing: .14em;
  color: var(--kiri);
}
.hero-vertical {
  writing-mode: vertical-rl;
  text-align: start;
  font-family: var(--mincho);
  font-feature-settings: normal;
}
.hero-title {
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 3.25rem);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .14em;
  white-space: nowrap;
  color: var(--kogecha);
}
.hero-title .line { display: block; }
.hero-description {
  margin: 0;
  margin-block-start: clamp(20px, 3vw, 36px);
  margin-inline-start: 2.5em;
  font-size: clamp(.9375rem, .88rem + .3vw, 1.0625rem);
  line-height: 2.1;
  letter-spacing: .16em;
  white-space: nowrap;
  color: var(--sumi);
}
.hero-copy .text-link { margin-top: clamp(28px, 4vw, 44px); color: var(--cha); }

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
    padding: clamp(48px, 6vw, 88px) var(--gutter);
  }
  .hero-copy { padding: 0; }
  .hero-description { margin-inline-start: 5em; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-photo { animation: omine-fade 1.4s ease-out both; }
  .hero-title .line { animation: omine-descend 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-title .line:nth-child(1) { animation-delay: .35s; }
  .hero-title .line:nth-child(2) { animation-delay: .6s; }
  .hero-title .line:nth-child(3) { animation-delay: .85s; }
  .hero-description, .hero-copy .text-link, .hero-place { animation: omine-fade 1s 1.2s both; }
}
@keyframes omine-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes omine-descend { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* 到着情報 */
.arrival-strip { background: var(--paper); border-bottom: 1px solid var(--line); }
.arrival-inner { display: grid; margin: 0 auto; padding: 0; list-style: none; }
.arrival-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.arrival-item:last-child { border-bottom: 0; }
.arrival-item span { font-size: .875rem; color: var(--kiri); }
.arrival-item strong {
  font-family: var(--mincho); font-size: 1.1875rem; font-weight: 600; letter-spacing: .08em;
}
@media (min-width: 768px) {
  .arrival-inner { grid-template-columns: repeat(3, 1fr); }
  .arrival-item {
    flex-direction: column; align-items: center; gap: 2px;
    padding: 30px 12px; border-bottom: 0; border-left: 1px solid var(--line); text-align: center;
  }
  .arrival-item:first-child { border-left: 0; }
  .arrival-item strong { font-size: 1.375rem; }
}

/* ---------- Top page: sections ---------- */
.section { padding: clamp(72px, 10vw, 136px) 0; }
.intro { display: grid; gap: 8px 72px; }
.intro .section-title { margin-bottom: .6em; }
@media (min-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
  .intro .section-title { margin-bottom: 0; }
}
.intro-copy { max-width: 34em; }

.feature {
  display: grid; gap: 28px;
  align-items: center;
  margin-top: clamp(72px, 10vw, 128px);
}
.feature-content { max-width: 32em; }
.feature-content .section-title { margin-bottom: .7em; }
.feature-content .text-link { margin-top: 16px; }
.feature-image img { width: 100%; }
.feature-image.is-small { max-width: 440px; }
.feature-photo-note { margin-top: .8em; font-size: .8125rem; color: var(--kiri); }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); }
  .feature.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .feature.reverse .feature-image { order: 2; justify-self: end; width: 100%; }
}

/* 四季 */
.season-section { background: var(--usucha); color: var(--sumi); padding: clamp(72px, 10vw, 128px) 0; }
.season-head { display: grid; gap: 8px 72px; margin-bottom: clamp(36px, 5vw, 56px); }
.season-head p { max-width: 32em; }
@media (min-width: 900px) { .season-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: end; } .season-head .section-title { margin: 0; } }
.season-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px; margin: 0; padding: 0; list-style: none;
  background: var(--kihada);
  border: 2px solid var(--kihada);
}
@media (min-width: 900px) { .season-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.season { padding: clamp(28px, 4vw, 48px) 16px; background: var(--paper); text-align: center; }
.season strong {
  display: block;
  font-family: var(--mincho); font-weight: 500;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 1.2;
  color: var(--cha);
}
.season p { margin: .9em 0 0; font-size: .9375rem; color: var(--sumi); }

/* アクセス概要 */
.home-access { display: grid; gap: 40px 72px; }
.home-access .text-link { margin-top: 16px; }
@media (min-width: 900px) { .home-access { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; } }

/* ---------- Definition lists ---------- */
.data-list { margin: 0; border-top: 1px solid var(--line); }
.data-list > div { display: grid; gap: 4px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.data-list dt { font-weight: 700; color: var(--cha); }
.data-list dd { margin: 0; }
.data-list dd p { margin-bottom: .7em; }
.data-list dd p:last-child { margin-bottom: 0; }
@media (min-width: 640px) {
  .data-list > div { grid-template-columns: 10.5em minmax(0, 1fr); }
}
.price-line { font-weight: 700; }

/* 時間の表示 */
.hours { margin: 28px 0 0; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--cha); }
.hours > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px;
  padding: 16px 24px;
}
.hours > div + div { border-top: 1px solid var(--line); }
.hours dt { font-size: .9375rem; font-weight: 700; color: var(--kiri); }
.hours dd {
  margin: 0; white-space: nowrap;
  font-family: var(--mincho); font-size: clamp(1.625rem, 1.4rem + .9vw, 2rem);
  font-weight: 600; letter-spacing: .04em; line-height: 1.4; color: var(--cha);
}

/* ---------- Sub page heading ---------- */
.page-hero { padding: clamp(20px, 3vw, 32px) 0 clamp(36px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: .4em .7em;
  margin-bottom: clamp(28px, 5vw, 56px);
  font-size: .8125rem; color: var(--kiri);
}
.breadcrumb a { text-decoration: underline; text-decoration-color: var(--line); }
.breadcrumb a:hover { text-decoration-color: currentColor; }
.page-heading { display: grid; gap: 20px 72px; }
.page-heading h1 {
  font-family: var(--mincho);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.125rem);
  font-weight: 600; line-height: 1.4; letter-spacing: .14em;
  font-feature-settings: "palt";
}
.page-heading .en { margin-top: .9em; }
.lede { margin: 0; max-width: 34em; font-size: 1.0625rem; line-height: 2; }
@media (min-width: 900px) {
  .page-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: end; }
}
.page-body { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }
.subsection { margin-top: clamp(64px, 9vw, 112px); }
.page-body > section:first-child { margin-top: 0; }

/* ---------- Shared layouts ---------- */
.split { display: grid; gap: 32px; align-items: center; }
.split--top { align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 88px); } }
.photo img { width: 100%; }

.two-col { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: 64px; } }

.info-note {
  margin-top: 32px; padding: 22px 26px;
  background: var(--beige);
  border-left: 3px solid var(--cha);
}

.content-list, .note-list { margin: 20px 0 0; padding: 0; list-style: none; }
.content-list li { position: relative; padding-left: 1.4em; margin-top: .5em; }
.content-list li::before {
  content: ""; position: absolute; left: .15em; top: .95em;
  width: .6em; height: 1px; background: var(--kiri);
}
.note-list { margin: .4em 0 .8em; font-size: .9375rem; }
.note-list li { margin-top: .2em; }

/* 写真一覧（温泉・館内）
   スマホ：1列／タブレット：2列／PC：大きい写真2枚＋小さい写真3枚 */
.photo-grid { display: grid; gap: 32px; }
.photo-grid figure { display: flex; flex-direction: column; min-width: 0; }
.photo-grid img { width: 100%; }
.photo-grid figcaption { margin-top: .7em; font-size: .9375rem; font-weight: 500; letter-spacing: .08em; }
@media (min-width: 640px) and (max-width: 899.98px) {
  .photo-grid { display: block; columns: 2; column-gap: 20px; }
  .photo-grid figure { break-inside: avoid; margin-bottom: 28px; }
}
@media (min-width: 900px) {
  .photo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 24px; }
  .photo-grid figure { grid-column: span 2; }
  .photo-grid img { aspect-ratio: 4 / 3; object-fit: cover; }
  .photo-grid .photo-wide { grid-column: span 4; }
  .photo-grid .photo-wide img { aspect-ratio: 3 / 2; }
  .photo-grid .photo-tall img { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
}

.floorplan { display: grid; gap: 32px; align-items: start; }
.floorplan-image { max-width: 476px; }
.floorplan-image img { width: 100%; border: 1px solid var(--line); background: var(--paper); }
@media (min-width: 900px) { .floorplan { grid-template-columns: minmax(0, 1fr) minmax(0, 476px); gap: 72px; } }

/* ---------- Rooms ---------- */
.room {
  display: grid; gap: 28px; align-items: center;
  padding: clamp(40px, 6vw, 72px) 0;
  border-bottom: 1px solid var(--line);
}
.room:first-child { padding-top: 0; }
.room-photos {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px; align-items: end;
  max-width: 600px;
}
.room-photos img { width: 100%; }
.room-photos .caption { grid-column: 1 / -1; margin-top: 0; }
.room-size {
  display: flex; align-items: baseline; gap: .15em;
  margin-bottom: .5em;
  font-family: var(--mincho); font-size: 1.375rem; font-weight: 600; letter-spacing: .12em;
}
.room-size .num { font-size: 3.5rem; line-height: 1; letter-spacing: 0; margin-left: .2em; color: var(--cha); }
.room-size small { font-size: 1.125rem; }
.room-description { max-width: 30em; }
.room-description .text-link { margin-top: 12px; }
@media (min-width: 900px) {
  .room { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; }
}

/* ---------- Stay information ---------- */
.timings { display: grid; gap: 16px; }
@media (min-width: 640px) { .timings { grid-template-columns: 1fr 1fr; } }
.time-block { padding: 26px 28px; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--cha); }
.time-block h3 { font-size: 1rem; font-weight: 700; letter-spacing: .1em; color: var(--kiri); }
.time-block .time {
  margin: .15em 0 .5em;
  font-family: var(--mincho); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 600; line-height: 1.35; letter-spacing: .04em; color: var(--cha);
}
.time-block p:last-child { font-size: .9375rem; }

.table-scroll {
  margin-top: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--paper); border: 1px solid var(--line);
}
.table-scroll:focus-visible { outline-offset: 2px; }
.rates { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.rates th, .rates td { padding: 14px 14px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.rates thead th { background: var(--cha); color: #fff; font-size: .8125rem; font-weight: 500; letter-spacing: .06em; }
.rates tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--paper); color: var(--cha); font-weight: 700; text-align: left;
  box-shadow: inset -1px 0 0 var(--line);
}
.rates thead th:first-child { position: sticky; left: 0; z-index: 2; text-align: left; }
.rates tbody tr:nth-child(even) td, .rates tbody tr:nth-child(even) th { background: #faf5ec; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 0; }
.table-note { margin-top: 20px; font-size: .9375rem; max-width: 46em; }
.table-note p { margin-bottom: .8em; }

/* ---------- Plans / Reservation ---------- */
.booking-panel { display: grid; gap: 16px; }
@media (min-width: 900px) { .booking-panel { grid-template-columns: 1.1fr 1fr; } }
.booking-card { padding: clamp(28px, 4vw, 48px); background: var(--paper); border: 1px solid var(--line); }
.booking-card h2 {
  margin: .3em 0 .8em;
  font-family: var(--mincho); font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.6; letter-spacing: .1em;
}
.booking-card .button { margin: 12px 0 14px; }
.booking-card--primary { border-top: 3px solid var(--beni); }
.booking-card--phone { border-top: 3px solid var(--cha); }
.phone-number {
  display: inline-block; margin: 8px 0 4px;
  font-family: var(--mincho); font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); font-weight: 600;
  letter-spacing: .06em; color: var(--cha); text-decoration: none;
}
.phone-number:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.booking-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .booking-steps { grid-template-columns: repeat(3, 1fr); } }
.booking-steps li { padding: 26px 26px 28px; background: var(--paper); border: 1px solid var(--line); }
.step-no { display: block; font-family: var(--mincho); font-size: 2rem; font-weight: 500; line-height: 1.2; color: var(--beni); }
.booking-steps h3 { margin: .5em 0 .4em; font-size: 1.0625rem; font-weight: 700; letter-spacing: .08em; }
.booking-steps p { font-size: .9375rem; }

.link-rows { margin-top: 48px; border-top: 1px solid var(--line); }
.link-rows a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 4px; border-bottom: 1px solid var(--line);
  font-weight: 500; text-decoration: none;
}
.link-rows a::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-top: 1.5px solid var(--cha); border-right: 1.5px solid var(--cha);
  transform: rotate(45deg); transition: transform .2s;
}
.link-rows a:hover { color: var(--cha); }
.link-rows a:hover::after { transform: translateX(4px) rotate(45deg); }

/* ---------- Access ---------- */
.access-top { display: grid; gap: 36px; align-items: center; }
.access-top address { margin: 0 0 28px; font-size: 1.0625rem; line-height: 2; }
.exterior { max-width: 360px; }
.exterior img { width: 100%; }
@media (min-width: 900px) {
  .access-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 72px; }
  .exterior { justify-self: end; width: 100%; }
}
.access-methods { display: grid; gap: 16px; margin-top: clamp(56px, 8vw, 96px); }
@media (min-width: 900px) { .access-methods { grid-template-columns: 1fr 1fr; } }
.access-method { padding: clamp(28px, 4vw, 44px); background: var(--paper); border: 1px solid var(--line); }
.access-method h2 {
  margin-bottom: .8em;
  font-family: var(--mincho); font-size: clamp(1.3rem, 1.15rem + .6vw, 1.5rem); letter-spacing: .1em;
}
.access-method .data-list { margin-top: 24px; }
@media (min-width: 640px) { .access-method .data-list > div { grid-template-columns: 8.5em minmax(0, 1fr); } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-item { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 28px; background: var(--paper); border: 1px solid var(--line); }
.contact-item h2 { font-size: 1rem; font-weight: 700; letter-spacing: .1em; color: var(--kiri); }
.contact-value {
  margin: .25em 0 .3em;
  font-family: var(--mincho); font-size: clamp(1.5rem, 1.3rem + .9vw, 1.875rem); font-weight: 600;
  letter-spacing: .04em; color: var(--cha); text-decoration: none; word-break: break-all;
}
a.contact-value:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.contact-item .button { margin-top: auto; }
.contact-item p:not(.contact-value) { margin-bottom: 20px; font-size: .9375rem; }

/* ---------- Terms & privacy ---------- */
.legal-layout { display: grid; gap: 36px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.legal-nav a {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); font-size: .875rem; text-decoration: none;
}
.legal-nav a:hover { border-color: var(--cha); color: var(--cha); }
@media (min-width: 1000px) {
  .legal-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 80px; }
  .legal-nav {
    position: sticky; top: calc(var(--header-h) + 32px); align-self: start;
    flex-direction: column; gap: 0; border-left: 1px solid var(--line);
  }
  .legal-nav a { padding: 10px 0 10px 20px; border: 0; border-radius: 0; background: none; }
}
.legal-content { max-width: 44em; }
.legal-content h2 {
  position: relative;
  margin: 3em 0 1.2em; padding-bottom: .7em;
  border-bottom: 1px solid var(--line);
  font-family: var(--mincho); font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); letter-spacing: .1em;
}
.legal-content h2::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 2px; background: var(--kihada); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin: 2.2em 0 .7em; font-size: 1.0625rem; font-weight: 700; color: var(--cha); letter-spacing: .06em; }
.legal-content .clause { margin: 0 0 .6em; }
.legal-content ul { margin: .4em 0 1em; padding-left: 1.4em; }
.legal-content li { margin-top: .3em; }

/* ---------- Reservation band ---------- */
.reservation-band { padding: clamp(64px, 9vw, 104px) 0; background: var(--paper); border-top: 1px solid var(--line); }
.reservation-inner { display: grid; gap: 32px 64px; }
.reservation-band h2 {
  margin-bottom: .6em;
  font-family: var(--mincho); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  line-height: 1.6; letter-spacing: .12em;
}
.reservation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.reservation-phone a {
  font-family: var(--mincho); font-size: clamp(1.625rem, 1.4rem + 1vw, 2rem); font-weight: 600;
  letter-spacing: .06em; color: var(--cha); text-decoration: none;
}
.reservation-phone span { display: block; font-size: .875rem; color: var(--kiri); }
@media (min-width: 900px) { .reservation-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--kogecha); color: rgba(255, 255, 255, .92); padding: clamp(56px, 8vw, 88px) 0 28px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.footer-main { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer-main { grid-template-columns: 1.2fr 1.3fr .8fr; gap: 56px; } }
.brand-sub { display: block; font-size: .8125rem; letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.footer-name { display: block; margin: .15em 0 .7em; font-family: var(--mincho); font-size: 2rem; font-weight: 600; letter-spacing: .2em; color: #fffaf2; }
.footer-brand address { font-size: .9375rem; line-height: 2; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-content: start; }
.footer-nav a { padding: 8px 0; font-size: .9375rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-nav a[aria-current="page"] { color: #fff; font-weight: 700; }
.social-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.social-title { margin: 0 0 4px; font-family: var(--mincho); font-size: .875rem; letter-spacing: .1em; color: rgba(255, 255, 255, .75); }
.social-links a { padding: 4px 0; font-size: .9375rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: .8125rem; color: rgba(255, 255, 255, .78);
}
.footer-bottom .copyright { margin-left: auto; }
@media (max-width: 767.98px) { .footer-bottom .copyright { margin-left: 0; width: 100%; } }

/* ---------- Floating UI ---------- */
.back-top {
  position: fixed; right: 16px; bottom: calc(var(--dock-h) + 16px); z-index: 39;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); color: var(--cha);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(63, 46, 34, .12);
}
.back-top[hidden] { display: none; }
.back-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (min-width: 768px) { .back-top { right: 24px; bottom: 24px; } }

.mobile-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1.45fr; gap: 8px;
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(252, 249, 244, .98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(63, 46, 34, .08);
}
@media (min-width: 768px) { .mobile-dock { display: none; } }
.mobile-dock a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: var(--radius);
  font-size: .9375rem; font-weight: 500; letter-spacing: .06em; text-decoration: none;
}
.mobile-dock a:first-child { border: 1px solid var(--cha); color: var(--cha); }
.mobile-dock a:last-child { background: var(--beni); color: #fff; }
.mobile-dock svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-dock, .back-top, .reservation-band, .skip { display: none !important; }
  body { padding: 0; background: #fff; }
}