/* ============================================================
   天泉美肌の湯フルヤマ 公式サイト — style.css
   カラー・フォント等のブランド変数は :root にまとめてあります。
   ロゴは assets/logo/ 内の実データ（白抜き版）を使用しています。
   差し替え時は .logo-mark / .logo-wordtext の src を変更してください。
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@700;800&display=swap');

/* ---------- Design tokens ---------- */
:root{
  /* base */
  --ink:        #1a1815;   /* 墨色 ベース */
  --ink-2:      #22201b;   /* 少し明るい面 */
  --ink-3:      #2c2922;   /* カード面 */
  --navy:       #16232f;   /* 深い藍（ロゴのブルー由来） */
  --navy-2:     #1e3245;

  --washi:      #f5efe1;   /* 生成り・和紙色 */
  --washi-2:    #efe6d2;
  --washi-3:    #e7dabf;

  --gold:       #b8934f;
  --gold-light: #d9bd82;
  --gold-deep:  #8c6a34;

  --red-accent: #8a3229;

  --text-on-dark: #f2ead9;
  --text-on-dark-soft: #e2d8bf;
  --text-on-light: #2a251d;
  --text-on-light-soft: #55503f;

  --font-serif: 'Shippori Mincho', 'Noto Serif JP', serif;
  --font-sans:  'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-logo:  'M PLUS Rounded 1c', var(--font-sans);

  --container: 1180px;
  --gutter: clamp(20px, 5vw, 56px);

  --shadow-soft: 0 18px 40px rgba(0,0,0,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 88px; }
body{
  margin: 0;
  background: var(--ink);
  color: var(--text-on-dark);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
/* grid items must not be prevented from shrinking below their (CJK) text's
   max-content width — without this, long unbroken paragraphs blow out
   1fr grid tracks on narrow viewports */
.history-grid > *,
.shiobara-panel > *,
.onsen-stats > *,
.meal-layout > *,
.footer-grid > *{ min-width: 0; }

.mobile-only{ display: inline; }
@media (min-width: 640px){ .mobile-only{ display: none; } }

/* keep a short trailing Japanese phrase from wrapping mid-word / leaving an orphan character */
.nowrap{ white-space: nowrap; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p{ margin: 0; }
button{ font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
table{ border-collapse: collapse; width: 100%; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Utility ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-serif);
  letter-spacing: .28em;
  font-size: .78rem;
  color: var(--gold-light);
  margin-bottom: 14px;
}
.eyebrow::before{
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.section-heading{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.5;
  letter-spacing: .04em;
}
.section-lede{
  margin-top: 18px;
  max-width: 62ch;
  color: var(--text-on-dark-soft);
  font-size: 1.06rem;
  line-height: 1.85;
}
.on-light .section-lede{ color: var(--text-on-light-soft); }

.section{
  position: relative;
  padding: clamp(64px, 10vw, 132px) 0;
}
.on-light{ background: var(--washi); color: var(--text-on-light); }
.on-light .eyebrow{ color: var(--gold-deep); }

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 15px 34px;
  font-size: .92rem;
  letter-spacing: .12em;
  border: 1px solid var(--gold);
  border-radius: 2px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.btn-solid{
  background: var(--gold);
  color: var(--ink);
}
.btn-solid:hover{ background: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); }
.btn-outline{
  color: var(--text-on-dark);
  border-color: rgba(242,234,217,.45);
}
.btn-outline:hover{ border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-2px); }
.on-light .btn-outline{ color: var(--text-on-light); border-color: rgba(42,37,29,.35); }
.on-light .btn-outline:hover{ color: var(--gold-deep); border-color: var(--gold-deep); }

/* reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible{ transition-delay: .12s; }
.reveal-delay-2.is-visible{ transition-delay: .24s; }
.reveal-delay-3.is-visible{ transition-delay: .36s; }

/* staggered child reveal — grid/gallery items fade + rise in sequence
   once their reveal-tracked ancestor gains .is-visible. Pure CSS: no
   extra IntersectionObserver targets needed. Uses custom properties
   (rather than a literal `transform` shorthand) so this composes
   cleanly with the JS-driven tilt effect on .room-card / .stat-card
   instead of fighting it for the transform property. */
.onsen-gallery > figure,
.dog-gallery figure,
.meal-gallery .placeholder-img{
  --reveal-y: 26px;
  --reveal-scale: .96;
  opacity: 0;
  transform: translateY(var(--reveal-y)) scale(var(--reveal-scale));
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible .onsen-gallery > figure,
.mascot-corner.is-visible .dog-gallery figure,
.meal-layout.is-visible .meal-gallery .placeholder-img,
.onsen-gallery.is-visible > figure{
  opacity: 1;
  --reveal-y: 0px;
  --reveal-scale: 1;
}
/* .room-card / .stat-card reveal state lives in the tilt-composed rule
   further down (they share the transform property with the JS tilt
   effect, so only one rule may declare `transform` for them). */
.reveal.is-visible .room-gallery .room-card,
.reveal.is-visible .onsen-stats .stat-card,
.onsen-stats.is-visible .stat-card,
.room-gallery.is-visible .room-card{
  opacity: 1;
  --reveal-y: 0px;
  --reveal-scale: 1;
}
.onsen-gallery > figure:nth-child(1),
.onsen-stats .stat-card:nth-child(1),
.room-gallery .room-card:nth-child(1),
.dog-gallery figure:nth-child(1),
.meal-gallery .placeholder-img:nth-child(1){ transition-delay: .05s; }
.onsen-gallery > figure:nth-child(2),
.onsen-stats .stat-card:nth-child(2),
.room-gallery .room-card:nth-child(2),
.dog-gallery figure:nth-child(2),
.meal-gallery .placeholder-img:nth-child(2){ transition-delay: .16s; }
.onsen-gallery > figure:nth-child(3),
.room-gallery .room-card:nth-child(3),
.meal-gallery .placeholder-img:nth-child(3){ transition-delay: .27s; }
.meal-gallery .placeholder-img:nth-child(4){ transition-delay: .38s; }

/* hero-scale showcase photos wipe into view rather than plainly fading */
.room-hero{ clip-path: inset(0 0 0 100%); transition: clip-path 1s var(--ease); }
.room-hero.is-visible{ clip-path: inset(0 0 0 0%); }
.history-photo{ clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.history-grid.is-visible .history-photo{ clip-path: inset(0 0% 0 0); }
.onsen-gallery .main-shot{ clip-path: inset(0 0 0 100%); transition: clip-path 1.05s var(--ease); }
.onsen-gallery.is-visible .main-shot,
.reveal.is-visible .onsen-gallery .main-shot{ clip-path: inset(0 0 0 0%); }

/* scroll progress indicator */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 200;
  pointer-events: none;
}

/* logo mark — a slow steam-like breathing pulse */
@keyframes steamBreathe{
  0%, 100%{ opacity: 1; transform: translateY(0) scale(1); }
  50%{ opacity: .8; transform: translateY(-2px) scale(1.03); }
}
.logo-mark{ animation: steamBreathe 3.8s ease-in-out infinite; }

/* .room-card / .stat-card: single owner of the `transform` property.
   Composes the staggered-reveal offset with the JS-driven pointer tilt
   (set as inline custom properties, so they always win over these
   class-level defaults) so the two effects never fight each other. */
.room-card, .stat-card{
  --reveal-y: 26px;
  --reveal-scale: .96;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  opacity: 0;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y))
             translateY(calc(var(--reveal-y) + var(--tilt-lift))) scale(var(--reveal-scale));
  transition: opacity .7s var(--ease), transform .5s var(--ease);
}

/* placeholder image block (差し替え前提) */
.placeholder-img{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(184,147,79,.10) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #2b2721, #1c1a16);
  border: 1px dashed rgba(217,189,130,.45);
  color: var(--text-on-dark-soft);
  text-align: center;
  padding: 20px;
  min-height: 220px;
}
.placeholder-img .ph-icon{ font-size: 1.8rem; opacity: .8; }
.placeholder-img .ph-label{ font-family: var(--font-serif); font-size: .95rem; letter-spacing: .06em; }
.placeholder-img .ph-note{ font-size: .72rem; letter-spacing: .04em; color: var(--gold-light); }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  background: rgba(20,18,15,.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(217,189,130,.14);
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(15,14,12,.92);
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* logo lockup — official brand artwork, white cutout for use on dark grounds.
   Source files (mark/wordtext, both white + blue variants, plus the full
   vertical lockup) live in assets/logo/ for future reuse on light grounds. */
.logo{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.logo-mark{
  height: 34px;
  width: auto;
  flex-shrink: 0;
}
.logo-wordtext{
  height: 34px;
  width: auto;
}

.main-nav{ display: none; }
.main-nav ul{ display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.main-nav a{
  position: relative;
  font-size: .88rem;
  letter-spacing: .06em;
  padding: 6px 0;
  color: var(--text-on-dark-soft);
  transition: color .3s var(--ease);
}
.main-nav a::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold-light);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.main-nav a:hover{ color: var(--text-on-dark); }
.main-nav a:hover::after{ transform: scaleX(1); transform-origin: left; }

.header-cta{ display: none; }

.hamburger{
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  align-items: center;
}
.hamburger span{
  width: 22px; height: 1px; background: var(--text-on-dark);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(15,13,11,.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.mobile-nav.is-open{ opacity: 1; transform: translateY(0); visibility: visible; }
.mobile-nav a{
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: .1em;
  color: var(--text-on-dark);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.mobile-nav.is-open a{ opacity: 1; transform: translateY(0); }
.mobile-nav a:nth-child(1){ transition-delay: .05s; }
.mobile-nav a:nth-child(2){ transition-delay: .1s; }
.mobile-nav a:nth-child(3){ transition-delay: .15s; }
.mobile-nav a:nth-child(4){ transition-delay: .2s; }
.mobile-nav a:nth-child(5){ transition-delay: .25s; }
.mobile-nav a:nth-child(6){ transition-delay: .3s; }
.mobile-nav a:nth-child(7){ transition-delay: .35s; }
.mobile-nav .btn{ margin-top: 10px; }

@media (min-width: 960px){
  .main-nav{ display: block; }
  .header-cta{ display: inline-flex; }
  .hamburger{ display: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--text-on-dark);
  isolation: isolate;
  overflow: hidden;
}
.hero-media{
  position: absolute; inset: 0; z-index: -2;
}
.hero-media img{
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  transform: translateY(var(--parallax-y, 0px)) scale(1.12);
  will-change: transform;
}
.hero-media::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.6) 34%, rgba(10,9,8,.18) 58%, transparent 75%),
    linear-gradient(180deg, rgba(15,13,11,.5) 0%, rgba(15,13,11,.22) 26%, rgba(15,13,11,.58) 60%, rgba(10,9,8,.95) 100%);
  z-index: -1;
}
.hero-inner{
  width: 100%;
  padding: 200px var(--gutter) 64px;
}
.hero-text{
  max-width: 680px;
  padding: 34px clamp(20px, 4vw, 44px);
  background: linear-gradient(120deg, rgba(10,9,8,.5), rgba(10,9,8,.28));
  border-left: 2px solid var(--gold);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hero-eyebrow{
  font-family: var(--font-serif);
  letter-spacing: .4em;
  font-size: .78rem;
  color: var(--gold-light);
  margin-bottom: 22px;
  display: block;
}
.hero-title{
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 6.2vw, 4rem);
  line-height: 1.45;
  letter-spacing: .03em;
  text-shadow: 0 6px 30px rgba(0,0,0,.45);
}
.hero-title em{
  font-style: normal;
  color: var(--gold-light);
}
.hero-sub{
  margin-top: 26px;
  max-width: 54ch;
  color: var(--text-on-dark-soft);
  font-size: 1rem;
  line-height: 2;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
}
.hero-actions{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-quicklinks{
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  border-top: 1px solid rgba(242,234,217,.18);
  padding-top: 22px;
}
.hero-quicklinks a{
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--text-on-dark-soft);
  transition: color .3s var(--ease);
}
.hero-quicklinks a:hover{ color: var(--gold-light); }

.scroll-cue{
  position: absolute;
  right: var(--gutter);
  bottom: 28px;
  display: none;
  align-items: center;
  gap: 10px;
  font-size: .68rem;
  letter-spacing: .3em;
  color: var(--text-on-dark-soft);
}
.scroll-cue .line{
  width: 1px; height: 44px;
  background: linear-gradient(var(--gold-light), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  50.1%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}
@media (min-width: 720px){ .scroll-cue{ display: flex; } }

/* ============================================================
   History / 塩原温泉とは
   ============================================================ */
.history-grid{
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
.history-photo{ overflow: hidden; box-shadow: var(--shadow-soft); }
.history-photo img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform .8s var(--ease); }
.history-photo:hover img{ transform: scale(1.05); }
.history-caption{
  margin-top: 12px;
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--text-on-dark-soft);
}
.on-light .history-caption{ color: var(--text-on-light-soft); }

.history-text p + p{ margin-top: 1.4em; }
.history-text p{ color: var(--text-on-dark-soft); }
.on-light .history-text p{ color: var(--text-on-light-soft); }

.divider-orn{
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 88px 0 48px;
  color: var(--gold);
}
.divider-orn::before, .divider-orn::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,147,79,.55), transparent);
}
.divider-orn svg{ width: 20px; height: 20px; }

.shiobara-panel{
  background: var(--ink-3);
  border: 1px solid rgba(184,147,79,.18);
  padding: clamp(28px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.history-gallery{
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.history-gallery figure{ position: relative; overflow: hidden; box-shadow: var(--shadow-soft); }
.history-gallery img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform .7s var(--ease);
}
.history-gallery figure:hover img{ transform: scale(1.05); }
.history-gallery figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--text-on-dark);
  background: linear-gradient(0deg, rgba(0,0,0,.68), transparent);
}
@media (min-width: 720px){
  .history-gallery{ grid-template-columns: repeat(2, 1fr); }
}

.mascot-corner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.mascot-corner > *{ min-width: 0; }
.mascot-figure{
  background: #fff;
  border: 1px solid rgba(184,147,79,.28);
  padding: 30px 24px;
  text-align: center;
  align-self: start;
}
.mascot-figure img{ max-width: 160px; margin: 0 auto; }
.mascot-caption{
  margin-top: 16px;
  font-size: .84rem;
  line-height: 1.8;
  color: var(--text-on-light-soft);
}
.mascot-caption strong{ color: var(--text-on-light); font-size: 1.05em; }
.mascot-profile{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(184,147,79,.4);
  display: grid;
  gap: 8px;
  text-align: left;
}
.mascot-profile li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .84rem;
  color: var(--text-on-light);
}
.mascot-profile li span{
  color: var(--gold-deep);
  letter-spacing: .08em;
  font-size: .74rem;
}
.mascot-goods h3{
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: .04em;
  margin-top: 4px;
}
.mascot-goods figure{
  margin: 20px 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.mascot-goods img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: top; }
.mascot-goods p{ margin-top: 16px; color: var(--text-on-light-soft); font-size: .92rem; }

.dog-gallery{
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.dog-gallery figure{ overflow: hidden; box-shadow: var(--shadow-soft); }
.dog-gallery img{ width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.dog-gallery figure:hover img{ transform: scale(1.06); }
.dog-gallery-caption{ margin-top: 14px; color: var(--text-on-light-soft); font-size: .88rem; line-height: 1.8; }

@media (min-width: 860px){
  .mascot-corner{ grid-template-columns: 260px 1fr; align-items: start; }
}

.shiobara-panel h3{
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: .05em;
}
.shiobara-panel p{ color: var(--text-on-dark-soft); margin-top: 14px; font-size: 1.02rem; line-height: 1.85; }
.on-light .shiobara-panel{ background: #fff; border-color: rgba(184,147,79,.3); }
.on-light .shiobara-panel p{ color: var(--text-on-light-soft); }

@media (min-width: 860px){
  .history-grid{ grid-template-columns: 1.05fr 1fr; align-items: center; }
  .history-grid.reverse{ direction: rtl; }
  .history-grid.reverse > *{ direction: ltr; }
  .shiobara-panel{ grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
}

/* ============================================================
   Onsen highlight
   ============================================================ */
.onsen-section{
  background:
    radial-gradient(120% 100% at 15% 0%, rgba(184,147,79,.14), transparent 60%),
    var(--navy);
  color: var(--text-on-dark);
}
.onsen-head{ max-width: 760px; }

.onsen-gallery{
  margin-top: 56px;
  display: grid;
  gap: 18px;
}
.onsen-gallery figure{ position: relative; overflow: hidden; box-shadow: var(--shadow-soft); }
.onsen-gallery img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.onsen-gallery figure:hover img{ transform: scale(1.06); }
.onsen-gallery figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-on-dark);
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent);
}
.onsen-gallery .main-shot{ aspect-ratio: 4/3; }
.onsen-gallery .sub-shot{ aspect-ratio: 4/3; }
.onsen-gallery .video-shot{ aspect-ratio: 16/10; }
.onsen-gallery .video-shot .ph-badge{
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(15,13,11,.72);
  border: 1px solid rgba(217,189,130,.5);
  color: var(--gold-light);
  font-size: .68rem;
  letter-spacing: .1em;
  padding: 6px 12px;
}

@media (min-width: 780px){
  .onsen-gallery{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }
  .onsen-gallery .main-shot{ grid-column: 1 / 3; grid-row: 1 / 3; aspect-ratio: auto; height: 100%; }
  .onsen-gallery .sub-shot{ grid-column: 3; aspect-ratio: auto; }
  .onsen-gallery .video-shot{ grid-column: 3; aspect-ratio: auto; }
}

.onsen-stats{
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.stat-card{
  background: rgba(245,239,225,.05);
  border: 1px solid rgba(217,189,130,.28);
  padding: 30px 28px;
  position: relative;
}
.stat-card .stat-eyebrow{
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--gold-light);
}
.stat-card .stat-num{
  display: block;
  margin-top: 14px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  color: var(--text-on-dark);
}
.stat-card .stat-num .unit{ font-size: .42em; margin-left: .3em; color: var(--text-on-dark-soft); }
.stat-card .stat-desc{ margin-top: 12px; font-size: .94rem; line-height: 1.8; color: var(--text-on-dark-soft); }

@media (min-width: 720px){
  .onsen-stats{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Rooms
   ============================================================ */
.room-hero{
  margin-top: 56px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.room-hero img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.room-hero figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px clamp(18px,4vw,34px);
  background: linear-gradient(0deg, rgba(0,0,0,.72), transparent 70%);
  font-size: .78rem;
  color: var(--text-on-dark-soft);
  letter-spacing: .03em;
}

.room-gallery{
  margin-top: 22px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.room-card{ background: var(--ink-3); border: 1px solid rgba(184,147,79,.16); overflow: hidden; }
.room-card .room-card-media{ aspect-ratio: 4/3; overflow: hidden; }
.room-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.room-card:hover img{ transform: scale(1.05); }
.room-card-body{ padding: 20px 22px 26px; }
.room-card-body h3{ font-family: var(--font-serif); font-size: 1.05rem; letter-spacing: .04em; }
.room-card-body p{ margin-top: 8px; font-size: .92rem; line-height: 1.75; color: var(--text-on-dark-soft); }

.facility-gallery{ max-width: 780px; }

@media (min-width: 720px){
  .room-gallery{ grid-template-columns: repeat(3, 1fr); }
  .facility-gallery{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Meals
   ============================================================ */
.meal-layout{
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
.meal-highlight{
  background: linear-gradient(135deg, rgba(184,147,79,.16), rgba(184,147,79,.03));
  border: 1px solid rgba(184,147,79,.32);
  padding: 28px 26px;
}
.meal-highlight .tag{
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--gold-deep);
  background: var(--gold-light);
  padding: 5px 12px;
  margin-bottom: 14px;
}
.meal-highlight h3{ font-family: var(--font-serif); font-size: 1.25rem; }
.meal-highlight p{ margin-top: 10px; color: var(--text-on-light-soft); font-size: .92rem; }

.meal-gallery{ display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
.meal-gallery .placeholder-img{ aspect-ratio: 4/3; min-height: unset; }

.meal-supervisor{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 8px;
}
.meal-supervisor .icon{
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  color: var(--gold-light);
  font-family: var(--font-serif);
}
.meal-supervisor p{ color: var(--text-on-light-soft); font-size: .92rem; }

@media (min-width: 860px){
  .meal-layout{ grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ============================================================
   Pricing
   ============================================================ */
.price-table-wrap{
  margin-top: 56px;
  overflow-x: auto;
  box-shadow: var(--shadow-soft);
}
.price-table{ min-width: 560px; background: var(--ink-3); }
.price-table th, .price-table td{
  padding: 20px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(184,147,79,.18);
}
.price-table thead th{
  font-family: var(--font-serif);
  letter-spacing: .06em;
  font-size: .9rem;
  color: var(--gold-light);
  background: rgba(184,147,79,.08);
}
.price-table tbody td{ font-size: .95rem; color: var(--text-on-dark-soft); }
.price-table tbody td.plan{ color: var(--text-on-dark); font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.price-table thead th:first-child{ white-space: nowrap; }
.price-table tbody td.amount{ font-family: var(--font-serif); font-size: 1.05rem; color: var(--text-on-dark); white-space: nowrap; }
.price-table tbody tr:last-child td{ border-bottom: none; }

.price-notes{
  margin-top: 24px;
  display: grid;
  gap: 8px;
  font-size: .82rem;
  color: var(--text-on-dark-soft);
}
.price-notes li{ padding-left: 1.4em; position: relative; }
.price-notes li::before{ content: "※"; position: absolute; left: 0; color: var(--gold-light); }

.reserve-box{
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  border: 1px solid rgba(217,189,130,.3);
  padding: 30px clamp(20px, 4vw, 40px);
}
.reserve-box .rb-text h3{ font-family: var(--font-serif); font-size: 1.15rem; }
.reserve-box .rb-text p{ margin-top: 8px; font-size: .92rem; color: var(--text-on-dark-soft); }
.reserve-actions{ display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  background: #100f0d;
  padding: 72px 0 28px;
  color: var(--text-on-dark-soft);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
.footer-brand .logo-mark,
.footer-brand .logo-wordtext{ height: 42px; }
.footer-brand p{ margin-top: 18px; font-size: .9rem; line-height: 1.9; max-width: 34ch; }

.footer-col h4{
  font-family: var(--font-serif);
  font-size: .86rem;
  letter-spacing: .12em;
  color: var(--text-on-dark);
  margin-bottom: 16px;
}
.footer-col ul{ display: grid; grid-template-columns: 1fr; gap: 10px; font-size: .9rem; line-height: 1.7; }
.footer-col a:hover{ color: var(--gold-light); }

.footer-sns{ display: flex; gap: 14px; margin-top: 4px; }
.footer-sns a{
  width: 38px; height: 38px;
  border: 1px solid rgba(217,189,130,.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.footer-sns a:hover{ border-color: var(--gold-light); color: var(--gold-light); }

.footer-ig-qr{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.footer-ig-qr img{
  width: 68px;
  height: 68px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.footer-ig-qr:hover img{ transform: scale(1.05); }
.footer-ig-qr span{
  font-size: .82rem;
  line-height: 1.7;
  color: var(--text-on-dark-soft);
}
.footer-ig-qr strong{ color: var(--text-on-dark); font-weight: 700; }

.footer-bottom{
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(205,194,171,.6);
}

@media (min-width: 720px){
  .footer-grid{ grid-template-columns: 1.3fr repeat(3, 1fr); }
}