@charset "UTF-8";
/* ===================================================================
   サウナと酒 余熱（よねつ）— 自主制作の見本サイト
   考え方: 夜を「背景の黒」ではなく「光」で出す。
           暗い面は世界観、明るい面は読ませる情報。明るい面を半分以上にする。
   =================================================================== */

:root{
  /* 色 */
  --ink:        #1A1816;   /* 墨（暗い面の地） */
  --ink-deep:   #121110;   /* さらに沈める面 */
  --ink-soft:   #262220;   /* 暗い面の区切り */
  --paper:      #F5F1E8;   /* 生成り（明るい面の地） */
  --paper-2:    #EBE5D8;   /* 生成りの陰 */
  --on-dark:    #F2EEE6;   /* 暗い面の文字 */
  --on-dark-sub:#B9B1A4;   /* 暗い面の補足 */
  --on-light:   #2A2724;   /* 明るい面の文字 */
  --on-light-sub:#6B645C;  /* 明るい面の補足 */
  --amber:      #B97831;   /* 差し色（酒と灯り）。線・ボタン・小さな光にだけ */
  --amber-lit:  #D9A05B;

  /* 字 */
  --mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* 余白（3段） */
  --sp-l: clamp(88px, 11vw, 168px);
  --sp-m: clamp(56px,  7vw, 112px);
  --sp-s: clamp(28px,  4vw,  56px);
  --gut:  clamp(20px,  5vw,  64px);
  --wrap: 1180px;

  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ink); color:var(--on-dark);
  font-family:var(--gothic); font-size:16px; line-height:1.95;
  font-feature-settings:"palt" 1; letter-spacing:.04em;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
/* 最終行に1〜2文字だけ残る「泣き別れ」を減らす */
p,dd,dt,li,figcaption,summary,caption{ text-wrap:pretty; }
h1,h2,h3{ text-wrap:balance; }
a{ color:inherit; }
h1,h2,h3,p,dl,dd,figure,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--amber); color:#fff; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:#fff; padding:.7em 1.2em;
}
.skip:focus{ left:0; }

/* 共通の部品 -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:0 2em; border-radius:0; border:1px solid transparent;
  font-family:var(--gothic); font-size:.92rem; font-weight:500; letter-spacing:.14em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
}
.btn--amber{ background:var(--amber); color:#FFFBF4; border-color:var(--amber); }
.btn--ghost{ background:transparent; color:var(--on-dark); border-color:rgba(242,238,230,.42); }
@media (hover:hover){
  .btn--amber:hover{ background:var(--amber-lit); border-color:var(--amber-lit); }
  .btn--ghost:hover{ background:rgba(242,238,230,.1); border-color:var(--on-dark); }
}

.sec-head{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); margin-bottom:var(--sp-m); }
.sec-head__en{
  font-size:.72rem; letter-spacing:.4em; margin-bottom:1.4em;
  display:flex; align-items:center; gap:1em;
}
.sec-head__en::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.3; }
.sec-head__ja{
  font-family:var(--mincho); font-weight:500; line-height:1.35;
  font-size:clamp(1.9rem,4.6vw,3rem); letter-spacing:.1em; margin-bottom:.6em;
}
.sec-head__note{ max-width:44em; font-size:.95rem; line-height:2.1; }
.sec-head--dark .sec-head__en{ color:var(--amber-lit); }
.sec-head--dark .sec-head__note{ color:var(--on-dark-sub); }
.sec-head--light .sec-head__en{ color:var(--amber); }
.sec-head--light .sec-head__ja{ color:var(--on-light); }
.sec-head--light .sec-head__note{ color:var(--on-light-sub); }

/* ヘッダー ---------------------------------------------------------- */
.hd{ position:fixed; top:0; left:0; right:0; z-index:100; }
.hd__in{
  max-width:1400px; margin-inline:auto; padding:20px var(--gut);
  display:flex; align-items:center; gap:clamp(16px,3vw,44px);
  transition:padding .32s var(--ease);
}
.hd__logo{ text-decoration:none; display:flex; align-items:baseline; gap:.7em; margin-right:auto; }
.hd__logo-ja{ font-family:var(--mincho); font-size:1.5rem; letter-spacing:.22em; }
.hd__logo-en{ font-size:.62rem; letter-spacing:.36em; color:var(--on-dark-sub); }
.hd__nav{ display:flex; gap:clamp(18px,2.2vw,32px); font-size:14px; letter-spacing:.04em; }
.hd__nav a{ text-decoration:none; }
.hd__cta{ min-height:44px; font-size:.8rem; padding:0 1.5em; }

.hd.is-scrolled{ background:rgba(18,17,16,.92); backdrop-filter:blur(8px); box-shadow:0 1px 0 rgba(242,238,230,.12); }
.hd.is-scrolled .hd__in{ padding-block:11px; }
[data-motion="scroll-header"].is-scrolled{ background:rgba(18,17,16,.92); box-shadow:0 1px 0 rgba(242,238,230,.12); }

.nav-toggle{
  display:none; width:46px; height:46px; background:none; border:1px solid rgba(242,238,230,.4);
  padding:0; cursor:pointer; position:relative;
}
.nav-toggle span{
  position:absolute; left:13px; width:20px; height:1px; background:var(--on-dark);
  transition:transform .3s var(--ease), opacity .3s;
}
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* 引き出しメニュー */
.drawer{
  position:fixed; inset:0; z-index:99; background:var(--ink-deep);
  display:flex; flex-direction:column; justify-content:center; gap:2.2rem;
  padding:96px var(--gut) var(--sp-s);
}
.drawer[hidden]{ transform:translateY(-8px); }
.drawer__list{ display:flex; flex-direction:column; gap:1.15rem; }
.drawer__list a{
  text-decoration:none; font-family:var(--mincho); font-size:1.5rem; letter-spacing:.14em;
  display:flex; align-items:baseline; gap:1.1em;
}
.drawer__en{ font-family:var(--gothic); font-size:.68rem; letter-spacing:.3em; color:var(--amber-lit); }
.drawer__cta{ align-self:flex-start; }
.drawer__meta{ font-size:.8rem; color:var(--on-dark-sub); letter-spacing:.1em; }

/* ヒーロー ---------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__video{ width:100%; height:100%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(18,17,16,.72) 0%, rgba(18,17,16,.42) 34%, rgba(18,17,16,.62) 72%, rgba(18,17,16,.92) 100%);
}
/* 画面の光源はひとつ。下から琥珀色が差す */
.hero__glow{
  position:absolute; left:50%; bottom:-22%; width:min(1100px,150vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(185,120,49,.42) 0%, rgba(185,120,49,.12) 42%, transparent 68%);
  mix-blend-mode:screen; pointer-events:none;
  animation:glow 9s ease-in-out infinite alternate;
}
@keyframes glow{ from{ opacity:.72; transform:translateX(-50%) scale(1); } to{ opacity:1; transform:translateX(-50%) scale(1.07); } }

.hero__in{
  position:relative; z-index:2; flex:1;
  max-width:var(--wrap); width:100%; margin-inline:auto; padding:132px var(--gut) 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"eyebrow title" "lead title" "act title";
  align-content:end; gap:0 clamp(24px,5vw,72px);
}
.hero__eyebrow{
  grid-area:eyebrow; font-size:.78rem; letter-spacing:.28em; color:var(--on-dark-sub);
  margin-bottom:1.6em; padding-left:2.6em; position:relative;
}
.hero__eyebrow::before{ content:""; position:absolute; left:0; top:.75em; width:2em; height:1px; background:var(--amber-lit); }
.hero__title{ grid-area:title; display:flex; flex-direction:row-reverse; align-items:flex-start; gap:.5em; margin:0; }
.hero__title-ja{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(3.4rem,7.6vw,5.4rem); line-height:1; letter-spacing:.16em;
  text-shadow:0 0 46px rgba(0,0,0,.6);
}
.hero__title-en{
  writing-mode:vertical-rl; font-size:.7rem; letter-spacing:.55em;
  color:var(--on-dark-sub); padding-top:.6em;
}
.hero__lead{
  grid-area:lead; font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.5rem); line-height:1.75; letter-spacing:.13em;
  margin-bottom:1.5em; text-shadow:0 0 40px rgba(0,0,0,.55);
}
.hero__act{ grid-area:act; display:flex; flex-wrap:wrap; gap:12px; }

.hero__meta{
  position:relative; z-index:2; max-width:var(--wrap); width:100%; margin:var(--sp-s) auto 0;
  padding:0 var(--gut) clamp(64px,9vw,104px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  border-top:1px solid rgba(242,238,230,.16);
}
.hero__meta li{
  padding:1.3em 0 0; font-size:15px; color:var(--on-dark); line-height:1.7;
}
.hero__meta span{
  display:block; font-size:12px; letter-spacing:.26em; color:var(--amber-lit); margin-bottom:.6em;
}
.hero__scroll{
  position:absolute; right:var(--gut); bottom:clamp(20px,4vw,38px); z-index:3;
  writing-mode:vertical-rl; font-size:.62rem; letter-spacing:.4em; color:var(--on-dark-sub);
  text-decoration:none; display:flex; align-items:center; gap:1em; padding-bottom:.5em;
}
.hero__scroll span{ width:1px; height:52px; background:linear-gradient(var(--amber-lit),transparent); }

/* 導入 -------------------------------------------------------------- */
.intro{
  background:var(--ink-deep); padding:clamp(64px,8vw,120px) var(--gut) clamp(56px,7vw,104px);
  max-width:none; text-align:center;
}
.intro__label{ font-size:.68rem; letter-spacing:.4em; color:var(--amber-lit); margin-bottom:1.6em; }
.intro__text{
  font-family:var(--mincho); font-size:clamp(1.25rem,3vw,2rem); line-height:2.1; letter-spacing:.14em;
  margin-bottom:1.2em;
}
.intro__body{
  max-width:37em; margin:0 auto 2.2em; color:var(--on-dark-sub);
  font-size:15px; line-height:2.15; text-align:left;
}
/* 枠で囲まず、番号を大きく置いて「企画書のカード」に見せない */
.intro__rules{
  max-width:960px; margin:0 auto 2.6em; text-align:left;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,4vw,56px);
}
.intro__rules li{ display:grid; grid-template-columns:auto 1fr; column-gap:1em; align-items:baseline; }
.intro__rules span{
  font-family:var(--mincho); font-size:2.1rem; line-height:1; color:var(--amber);
  letter-spacing:0; grid-row:1/3;
}
.intro__rules b{ display:block; font-family:var(--mincho); font-weight:500; font-size:1.1rem; letter-spacing:.1em; margin-bottom:.5em; }
.intro__rules em{ font-style:normal; font-size:15px; line-height:1.9; color:var(--on-dark-sub); }
.intro__sign{ font-family:var(--mincho); font-size:.95rem; letter-spacing:.24em; color:var(--on-dark-sub); }

/* 暗い面から明るい面への受け渡し（切り替わりを唐突にしない） ------------ */
.bridge{ position:relative; background:var(--ink-deep); }
.bridge img{ width:100%; aspect-ratio:3/1; object-fit:cover; }
.bridge::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(transparent, rgba(18,17,16,.85)); pointer-events:none;
}
.bridge figcaption{
  position:absolute; left:0; right:0; bottom:0;
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut) 1.3em;
  font-family:var(--mincho); font-size:.92rem; letter-spacing:.14em; color:var(--on-dark);
  text-shadow:0 0 22px rgba(0,0,0,.8); z-index:2;
}
@media (max-width:768px){ .bridge img{ aspect-ratio:16/9; } }

/* 一夜の流れ（見せ場） ------------------------------------------------ */
.night{ background:var(--paper); color:var(--on-light); padding:var(--sp-l) 0; }
.night__list{
  --tl-pad:clamp(26px,4vw,52px);
  position:relative; max-width:var(--wrap); margin-inline:auto;
  padding-left:calc(var(--gut) + var(--tl-pad)); padding-right:var(--gut);
}
.night__list::before,.night__prog{
  content:""; position:absolute; left:var(--gut); top:0; width:1px;
}
.night__list::before{ bottom:0; background:rgba(42,39,36,.16); }
.night__prog{
  height:100%; background:linear-gradient(var(--amber),var(--amber-lit));
  transform-origin:top; transform:scaleY(0);
}
.night__item{ position:relative; display:grid; gap:clamp(14px,2.4vw,40px);
  grid-template-columns:108px minmax(0,1fr) minmax(0,340px);
  padding-block:clamp(38px,5vw,64px); border-top:1px solid rgba(42,39,36,.13);
}
.night__item:first-child{ border-top:0; padding-top:0; }
.night__item::before{
  content:""; position:absolute; left:calc(var(--tl-pad) * -1 - 4px); top:clamp(38px,5vw,64px);
  width:9px; height:9px; background:var(--paper); border:1px solid var(--amber);
  transform:rotate(45deg);
}
.night__item:first-child::before{ top:.7em; }
.night__time{ font-family:var(--mincho); line-height:1; letter-spacing:.02em; color:var(--on-light); }
.night__hh{ font-size:clamp(2.6rem,6vw,4rem); }
.night__mm{ font-size:clamp(1rem,2vw,1.3rem); color:var(--on-light-sub); }
.night__body h3{
  font-family:var(--mincho); font-weight:500; font-size:clamp(1.15rem,2.4vw,1.5rem);
  letter-spacing:.1em; line-height:1.6; margin-bottom:.9em;
}
.night__body p{ color:var(--on-light-sub); font-size:.94rem; line-height:2.15; }
.night__tip{
  margin-top:1.2em !important; padding-left:1.1em; border-left:2px solid var(--amber);
  font-size:.82rem !important; letter-spacing:.06em; color:var(--on-light) !important;
}
.night__fig{ overflow:hidden; }
.night__fig img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; filter:saturate(.95); }
/* 破調を1箇所だけ。全部同じ型が続くと説明書に見える */
.night__item--wide{ grid-template-columns:108px minmax(0,1fr); }
.night__item--wide .night__fig{ grid-column:1/-1; margin-top:1.6em; }
.night__item--wide .night__fig img{ aspect-ratio:21/9; }

/* サウナ ------------------------------------------------------------ */
.sauna{ background:var(--ink); padding:var(--sp-l) 0; }
.spec{
  max-width:var(--wrap); margin:0 auto var(--sp-m); padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(242,238,230,.14);
  border:1px solid rgba(242,238,230,.14); border-inline:0;
}
.spec__item{ background:var(--ink); padding:clamp(24px,3vw,38px) clamp(14px,2vw,26px); text-align:center; }
.spec__num{
  display:block; font-family:var(--mincho); font-size:clamp(2rem,4.4vw,3.1rem);
  line-height:1.1; color:var(--amber-lit); letter-spacing:.02em; margin-bottom:.35em;
}
.spec__label{ display:block; font-size:.86rem; letter-spacing:.16em; margin-bottom:.5em; }
.spec__sub{ display:block; font-size:.74rem; color:var(--on-dark-sub); line-height:1.7; }

.sauna__grid{
  max-width:var(--wrap); margin:0 auto var(--sp-m); padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.6vw,20px);
}
.sauna__fig{ position:relative; overflow:hidden; }
.sauna__fig img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.sauna__fig--tall{ grid-row:span 2; }
.sauna__fig--tall img{ aspect-ratio:3/5; }
.sauna__fig--wide{ grid-column:span 2; }
.sauna__fig--wide img{ aspect-ratio:16/7; }
.sauna__fig figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.4em 1em .9em;
  font-size:.76rem; letter-spacing:.06em; line-height:1.6;
  background:linear-gradient(transparent,rgba(18,17,16,.88));
}
.chips{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; flex-wrap:wrap; gap:10px;
}
.chips li{
  border:1px solid rgba(242,238,230,.26); padding:.55em 1.15em;
  font-size:.78rem; letter-spacing:.1em; color:var(--on-dark-sub);
}

/* バーとサ飯 --------------------------------------------------------- */
.bar{ position:relative; background:var(--ink-deep); padding:var(--sp-l) 0; overflow:hidden; }
.bar__media{
  position:relative; height:clamp(230px,42vh,430px); overflow:hidden;
  margin:0 0 var(--sp-m);
}
.bar__video{ width:100%; height:100%; object-fit:cover; }
.bar__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(18,17,16,.5) 0%, rgba(18,17,16,.18) 42%, rgba(18,17,16,.74) 100%);
}
.bar__cap{
  position:absolute; left:0; right:0; bottom:0;
  max-width:var(--wrap); margin-inline:auto; padding:0 var(--gut) 1.4em;
  font-family:var(--mincho); font-size:.95rem; letter-spacing:.16em;
  text-shadow:0 0 24px rgba(0,0,0,.7);
}
.bar__in{ position:relative; z-index:2; }
.menu{
  max-width:var(--wrap); margin:0 auto var(--sp-m); padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px);
}
.menu__head{
  font-family:var(--mincho); font-weight:500; font-size:1.2rem; letter-spacing:.16em;
  padding-bottom:.8em; margin-bottom:1.2em; border-bottom:1px solid rgba(242,238,230,.22);
  display:flex; align-items:baseline; justify-content:space-between;
}
.menu__head span{ font-family:var(--gothic); font-size:.62rem; letter-spacing:.34em; color:var(--amber-lit); }
.menu__list div{
  display:flex; align-items:baseline; gap:.8em; padding:.72em 0;
  border-bottom:1px dotted rgba(242,238,230,.18);
}
.menu__list dt{ font-size:.93rem; }
.menu__list dd{ margin:0 0 0 auto; font-family:var(--mincho); font-size:.95rem; color:var(--on-dark-sub); }

.bar__figs{
  max-width:var(--wrap); margin:0 auto 1.6em; padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.6vw,18px);
}
.bar__figs figure{ overflow:hidden; }
.bar__figs img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; }
.bar__figs figure:nth-child(2) img{ aspect-ratio:1/1; }
.bar__figs figure:nth-child(4) img{ aspect-ratio:3/2; }
.bar__note{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  font-size:.8rem; color:var(--on-dark-sub); letter-spacing:.06em;
}

/* 空間 -------------------------------------------------------------- */
.rooms{ background:var(--paper-2); color:var(--on-light); padding:var(--sp-l) 0; }
.rooms__grid{
  max-width:var(--wrap); margin:0 auto var(--sp-s); padding-inline:var(--gut);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,24px);
}
.rooms__fig[data-interactive]{ overflow:visible; display:flex; flex-direction:column; }
.rooms__fig .ph{ display:block; overflow:hidden; }
.rooms__fig img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; }
.rooms__fig--big{ grid-column:span 3; }
.rooms__fig--big img{ aspect-ratio:16/8; }
.rooms__fig figcaption{ padding-top:.9em; font-size:.8rem; color:var(--on-light-sub); letter-spacing:.06em; }
.rooms__fig figcaption b{ font-family:var(--mincho); font-weight:500; color:var(--on-light); margin-right:.9em; }
.rooms__band{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.rooms__band img{ width:100%; aspect-ratio:3/1; object-fit:cover; }
.rooms__band figcaption{ padding-top:.9em; font-size:.8rem; color:var(--on-light-sub); }

/* 料金 -------------------------------------------------------------- */
.price{ background:var(--paper); color:var(--on-light); padding:var(--sp-l) 0; }
.price__wrap{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(28px,5vw,72px); align-items:start;
}
.price__table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.price__table caption{
  text-align:left; font-family:var(--mincho); font-size:1.05rem; letter-spacing:.12em;
  padding-bottom:1em; color:var(--on-light);
}
.price__table th,.price__table td{ padding:1.05em .6em; border-bottom:1px solid rgba(42,39,36,.14); text-align:left; }
.price__table thead th{
  font-size:.7rem; letter-spacing:.24em; color:var(--on-light-sub); font-weight:500;
  border-bottom:1px solid rgba(42,39,36,.3); padding-bottom:.8em;
}
.price__table tbody th{ font-weight:400; }
.price__table td:last-child{ text-align:right; font-family:var(--mincho); font-size:1.08rem; white-space:nowrap; }
.price__opt{ display:grid; gap:0; border-top:1px solid rgba(42,39,36,.3); }
.price__opt li{
  display:grid; grid-template-columns:1fr auto; gap:.2em 1em;
  padding:1.05em 0; border-bottom:1px solid rgba(42,39,36,.14);
}
.price__opt span{ font-size:.92rem; }
.price__opt b{ font-family:var(--mincho); font-weight:400; font-size:1.08rem; }
.price__opt em{
  grid-column:1/-1; font-style:normal; font-size:.78rem; color:var(--on-light-sub); line-height:1.7;
}
.price__foot{
  max-width:var(--wrap); margin:var(--sp-s) auto 0; padding-inline:var(--gut);
  font-size:.82rem; color:var(--on-light-sub);
}
.price__foot a{ color:var(--amber); }

/* FAQ --------------------------------------------------------------- */
.faq{ background:var(--paper); color:var(--on-light); padding:0 0 var(--sp-l); }
.faq__list{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.faq details{ max-width:880px; }
.faq details{ border-bottom:1px solid rgba(42,39,36,.16); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.35em 2.4em 1.35em 0; position:relative;
  font-family:var(--mincho); font-size:1.02rem; letter-spacing:.08em; line-height:1.7;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4em; top:50%; width:11px; height:11px;
  border-right:1px solid var(--amber); border-bottom:1px solid var(--amber);
  transform:translateY(-70%) rotate(45deg); transition:transform .32s var(--ease);
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq details p{ padding:0 0 1.5em; font-size:.92rem; line-height:2.15; color:var(--on-light-sub); }

/* アクセス ----------------------------------------------------------- */
.access{ background:var(--paper-2); color:var(--on-light); padding:var(--sp-l) 0; }
.access__wrap{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,5vw,72px); align-items:start;
}
.access__dl div{ display:grid; grid-template-columns:5.5em 1fr; gap:1em; padding:1em 0; border-bottom:1px solid rgba(42,39,36,.14); }
.access__dl dt{ font-size:.76rem; letter-spacing:.2em; color:var(--on-light-sub); padding-top:.35em; }
.access__dl dd{ margin:0; font-size:.94rem; line-height:1.9; }
.access__dl small{ font-size:.74rem; color:var(--on-light-sub); }
.access__map svg{ width:100%; height:auto; border:1px solid rgba(42,39,36,.18); }
.mp-road{ font-family:var(--gothic); font-size:13px; fill:#8A8172; letter-spacing:.1em; }
.mp-lbl{ font-family:var(--gothic); font-size:13px; fill:#2A2724; letter-spacing:.06em; }
.mp-lbl--em{ font-family:var(--mincho); font-size:19px; fill:#2A2724; letter-spacing:.14em; }
.mp-sub{ font-family:var(--gothic); font-size:11px; fill:#6B645C; }
.access__mapnote{ padding-top:.9em; font-size:.76rem; color:var(--on-light-sub); }

/* 予約 -------------------------------------------------------------- */
.reserve{ background:var(--ink); padding:var(--sp-l) 0; }
.reserve__in{ max-width:820px; margin-inline:auto; padding-inline:var(--gut); }
.reserve .sec-head__en{ color:var(--amber-lit); display:flex; align-items:center; gap:1em; font-size:.72rem; letter-spacing:.4em; margin-bottom:1.4em; }
.reserve .sec-head__en::after{ content:""; flex:1; height:1px; background:currentColor; opacity:.3; }
.reserve__title{
  font-family:var(--mincho); font-weight:500; font-size:clamp(1.9rem,4.6vw,3rem);
  letter-spacing:.12em; margin-bottom:.6em;
}
.reserve__lead{ color:var(--on-dark-sub); font-size:.95rem; line-height:2.1; margin-bottom:2.4em; }
.reserve__demolabel{ font-size:.7rem; letter-spacing:.2em; color:var(--amber-lit); margin-bottom:.9em; }
.reserve__slots{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(242,238,230,.16); border:1px solid rgba(242,238,230,.16); }
.slot{ background:var(--ink); padding:1.1em 1.3em; display:flex; align-items:center; gap:.9em; flex-wrap:wrap; }
.slot__day{ font-size:.78rem; color:var(--on-dark-sub); }
.slot__t{ font-size:.85rem; }
.slot__x{ margin-left:auto; font-family:var(--mincho); font-size:1.25rem; }
.slot__x--ok{ color:var(--amber-lit); }
.slot__x--few{ color:var(--amber-lit); font-size:.9rem; }
.slot__x--no{ color:#6E665C; }
.reserve__demo{ font-size:.78rem; color:var(--on-dark-sub); margin:1em 0 var(--sp-m); }

.reserve__flow{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,32px); margin-bottom:var(--sp-m); }
.reserve__flow li{ position:relative; padding-top:1.4em; border-top:1px solid rgba(242,238,230,.24); }
.reserve__flow li::after{
  content:""; position:absolute; top:-1px; left:0; width:26px; height:1px; background:var(--amber);
}
.reserve__flow span{ display:block; font-size:.64rem; letter-spacing:.3em; color:var(--amber-lit); margin-bottom:.9em; }
.reserve__flow b{ display:block; font-family:var(--mincho); font-weight:500; font-size:1rem; letter-spacing:.1em; margin-bottom:.6em; }
.reserve__flow em{ font-style:normal; font-size:.78rem; line-height:1.9; color:var(--on-dark-sub); }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 1.6rem; }
.form__row{ display:flex; flex-direction:column; gap:.6em; }
.form__row--full{ grid-column:1/-1; }
.form label{ font-size:.78rem; letter-spacing:.16em; color:var(--on-dark-sub); display:flex; gap:.8em; align-items:center; }
.form label span{ font-size:.62rem; letter-spacing:.14em; color:var(--amber-lit); border:1px solid currentColor; padding:.15em .6em; }
.form input,.form select,.form textarea{
  font:inherit; font-size:.95rem; color:var(--on-dark); background:transparent;
  border:0; border-bottom:1px solid rgba(242,238,230,.32); border-radius:0;
  padding:.7em .2em; width:100%; transition:border-color .3s;
}
.form textarea{ resize:vertical; }
.form input::placeholder,.form textarea::placeholder{ color:#6E665C; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-bottom-color:var(--amber-lit); }
.form select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--amber-lit) 50%),linear-gradient(135deg,var(--amber-lit) 50%,transparent 50%); background-position:calc(100% - 12px) 1.25em,calc(100% - 7px) 1.25em; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.form select option{ background:var(--ink); }
.form__submit{ grid-column:1/-1; justify-self:start; margin-top:.4em; }
.form__note{ grid-column:1/-1; font-size:.8rem; color:var(--amber-lit); line-height:1.9; border-left:2px solid var(--amber); padding-left:1em; }

/* フッター ----------------------------------------------------------- */
.ft{ background:var(--ink-deep); padding:var(--sp-m) 0 clamp(28px,4vw,48px); }
.ft__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,64px);
  padding-bottom:var(--sp-s); border-bottom:1px solid rgba(242,238,230,.14);
}
.ft__ja{ font-family:var(--mincho); font-size:1.7rem; letter-spacing:.24em; display:block; }
.ft__en{ font-size:.62rem; letter-spacing:.34em; color:var(--on-dark-sub); display:block; margin-top:.7em; }
.ft__addr{ margin-top:1.6em; font-size:.82rem; line-height:2; color:var(--on-dark-sub); }
.ft__nav{ display:grid; gap:.7em; font-size:.83rem; align-content:start; }
.ft__nav a{ text-decoration:none; color:var(--on-dark-sub); }
.ft__disc{
  max-width:var(--wrap); margin:var(--sp-s) auto 0; padding-inline:var(--gut);
  font-size:.78rem; line-height:2; color:var(--on-dark-sub);
  border-left:2px solid var(--amber); padding-left:1.2em;
}
.ft__disc b{ color:var(--on-dark); }
.ft__copy{
  max-width:var(--wrap); margin:var(--sp-s) auto 0; padding-inline:var(--gut);
  font-size:.68rem; letter-spacing:.2em; color:#6E665C;
}

/* アニメーションを止めるボタン（動きを減らす設定の人にだけ出す） --------- */
.stopper{
  position:fixed; right:12px; bottom:12px; z-index:120;
  background:var(--ink-deep); color:var(--on-dark); border:1px solid var(--amber);
  padding:.7em 1.1em; font-size:.76rem; letter-spacing:.08em; cursor:pointer;
}
body.is-motion-off .hero__glow,
body.is-motion-off [data-motion="marquee"] > *{ animation:none !important; }

/* ------------------------------------------------------------------ */
/* 1024px以下                                                          */
/* ------------------------------------------------------------------ */
@media (max-width:1024px){
  .hd__nav,.hd__cta{ display:none; }
  .nav-toggle{ display:block; }
  .hd__logo{ margin-right:auto; }

  .night__item{ grid-template-columns:92px minmax(0,1fr); }
  .night__fig{ grid-column:1/-1; margin-top:.6em; }
  .night__fig img{ aspect-ratio:16/9; }

  .sauna__grid{ grid-template-columns:repeat(2,1fr); }
  .sauna__fig--tall{ grid-row:span 2; }
  .sauna__fig--wide{ grid-column:span 2; }

  .rooms__grid{ grid-template-columns:repeat(2,1fr); }
  .rooms__fig--big{ grid-column:span 2; }

  .price__wrap,.access__wrap{ grid-template-columns:1fr; }
  .bar__figs{ grid-template-columns:repeat(2,1fr); }
}

/* ------------------------------------------------------------------ */
/* 768px以下（スマホ）                                                  */
/* ------------------------------------------------------------------ */
@media (max-width:768px){
  body{ font-size:15px; }

  /* スマホは縦書きの店名を上の段に逃がす（横に置くと本文が細くなって泣き別れる） */
  .hero__in{
    padding-top:104px;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"title" "eyebrow" "lead" "act";
  }
  .hero__title{ justify-self:end; margin-bottom:1.1em; }
  .hero__title-ja{ font-size:clamp(3.2rem,15vw,4.6rem); }
  .hero__eyebrow{ margin-bottom:1.2em; }
  .hero__lead{ font-size:clamp(1.35rem,6.4vw,1.9rem); }
  .hero__act{ flex-direction:column; align-items:stretch; }
  .hero__act .btn{ width:100%; }
  .hero__meta{ grid-template-columns:1fr; gap:0; padding-bottom:84px; }
  .hero__meta li{ padding:1.1em 0; border-bottom:1px solid rgba(242,238,230,.1); }
  .hero__meta li:last-child{ border-bottom:0; }
  .hero__scroll{ display:none; }

  .night__list{ --tl-pad:22px; }
  .night__item{ grid-template-columns:1fr; gap:.4em; }
  .night__time{ display:flex; align-items:baseline; gap:.15em; margin-bottom:.5em; }
  .night__hh{ font-size:2.6rem; }
  .night__item::before{ top:clamp(38px,5vw,64px); }

  .spec{ grid-template-columns:repeat(2,1fr); }
  .sauna__grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .menu{ grid-template-columns:1fr; }
  .bar__figs{ grid-template-columns:1fr 1fr; }
  .rooms__grid{ grid-template-columns:1fr 1fr; }

  .price__table{ font-size:.86rem; }
  .price__table th,.price__table td{ padding:.9em .35em; }

  .intro__rules{ grid-template-columns:1fr; }
  .reserve__flow{ grid-template-columns:1fr; gap:1.4rem; }
  .reserve__slots{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .form__submit{ justify-self:stretch; }

  .ft__in{ grid-template-columns:1fr; }
  .ft__nav{ grid-template-columns:1fr 1fr; }
}

/* 動きを減らす設定 ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .hero__glow{ animation:none; }
  .night__prog{ transform:scaleY(1); }
}