/* =====================================================
   つるが丘温泉 公式サイト  style.css
   Palette: 墨(黒) / 白 / 超軟水の水色 のみ
   ===================================================== */

:root{
  --color-ink:        #1A1A1A;
  --color-base:       #FFFFFF;
  --color-water:      #D4EFFF;
  --color-ink-soft:   #555555;
  --color-water-deep: #A9DCF5;
  --color-bg-soft:    #F7FBFE;

  --maxw: 1120px;
  --gut: clamp(20px, 5vw, 64px);
  --sect-pad: clamp(64px, 11vw, 140px);
  --radius: 4px;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-num: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-jp);
  font-weight:400;
  color:var(--color-ink);
  background:var(--color-base);
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
.num{ font-family:var(--font-num); font-weight:600; letter-spacing:.01em; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* focus visibility */
a:focus-visible, button:focus-visible, iframe:focus-visible{
  outline:2px solid var(--color-water-deep);
  outline-offset:3px;
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  background:var(--color-base);
  transition:opacity .7s ease, visibility .7s ease;
}
.loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{
  width:clamp(150px,34vw,210px); height:auto;
  animation:loaderPulse 1.8s ease-in-out infinite;
}
@keyframes loaderPulse{ 0%,100%{ opacity:.45; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-4px) } }
.loader-bar{
  display:block; width:120px; height:2px; background:var(--color-water); border-radius:2px; overflow:hidden;
}
.loader-bar i{
  display:block; width:40%; height:100%; background:var(--color-water-deep);
  animation:loaderBar 1.3s ease-in-out infinite;
}
@keyframes loaderBar{ 0%{ transform:translateX(-120%) } 100%{ transform:translateX(320%) } }
/* preload中はスクロール抑制 */
body.is-loading{ overflow:hidden; }

/* ---------- layout helpers ---------- */
.section{ padding:var(--sect-pad) var(--gut); }
.section-head{ max-width:var(--maxw); margin:0 auto clamp(36px,6vw,68px); text-align:center; }
.section-head h2{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.5rem,4.5vw,2.3rem); letter-spacing:.05em; line-height:1.5;
}
.eyebrow{
  font-family:var(--font-num); font-weight:600; letter-spacing:.22em;
  font-size:.72rem; color:var(--color-ink-soft); text-transform:uppercase;
  margin-bottom:1em; display:inline-block; position:relative;
}
.section-head .eyebrow::after{
  content:""; display:block; width:34px; height:2px; background:var(--color-water-deep);
  margin:.7em auto 0;
}
.eyebrow-light{ color:var(--color-water); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:54px; padding:0 2em; border-radius:var(--radius);
  font-family:var(--font-jp); font-weight:700; font-size:1rem; letter-spacing:.06em;
  transition:background .25s, color .25s, border-color .25s, transform .15s;
  cursor:pointer; border:1.5px solid transparent;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--color-ink); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.7); backdrop-filter:blur(2px); }
.btn-ghost:hover{ background:#fff; color:var(--color-ink); border-color:#fff; }
.btn-outline{ background:transparent; color:var(--color-ink); border-color:var(--color-ink); }
.btn-outline:hover{ background:var(--color-ink); color:#fff; }

/* =====================================================
   0. HEADER
   ===================================================== */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  transition:background .35s, box-shadow .35s, transform .4s;
}
.header-inner{
  max-width:1280px; margin:0 auto; padding:14px var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.header-logo img{ height:30px; width:auto; }
.header-logo .logo-dark{ display:none; }
.header-logo .logo-light{ display:block; }

.header-nav{ display:flex; gap:6px; }
.hn-item{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.5em .9em; border-radius:var(--radius);
  font-size:.86rem; font-weight:500; color:#fff;
  transition:background .2s, color .2s;
}
.hn-item svg{ width:18px; height:18px; fill:currentColor; }
.hn-item:hover{ background:rgba(255,255,255,.16); }

/* scrolled state -> white bar, dark logo & nav */
.site-header.scrolled{
  background:rgba(255,255,255,.94);
  box-shadow:0 1px 0 rgba(0,0,0,.07);
  backdrop-filter:blur(8px);
}
.site-header.scrolled .logo-dark{ display:block; }
.site-header.scrolled .logo-light{ display:none; }
.site-header.scrolled .hn-item{ color:var(--color-ink); }
.site-header.scrolled .hn-item:hover{ background:var(--color-water); }
/* hide on scroll-down */
.site-header.hide{ transform:translateY(-100%); }

/* =====================================================
   1. HERO
   ===================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:120px var(--gut) 110px;
  overflow:hidden; color:#fff;
}
.hero-slideshow{ position:absolute; inset:0; overflow:hidden; }
.hero-slide{
  position:absolute; inset:0;
  background-position:center 64%; background-size:cover; background-repeat:no-repeat;
  opacity:0; transform:scale(1.06);
  transition:opacity 1.6s ease;
}
.hero-slide.is-active{
  opacity:1;
  animation:heroZoom 7s ease-out forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.10) } to{ transform:scale(1.0) } }
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,18,22,.14) 0%, rgba(14,18,22,.03) 42%, rgba(14,18,22,.34) 100%),
    linear-gradient(90deg, rgba(14,18,22,.42) 0%, rgba(14,18,22,.05) 50%, rgba(14,18,22,0) 74%);
}
.hero-content{ position:relative; max-width:var(--maxw); width:100%; margin:0 auto; }
.hero-eyebrow{
  font-family:var(--font-num); font-weight:500; letter-spacing:.18em;
  font-size:.8rem; margin-bottom:1.4em; opacity:.92;
}
.hero-title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.9rem,7vw,3.6rem); line-height:1.42; letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.45), 0 2px 28px rgba(0,0,0,.5);
}
.hero-title-sub{
  display:inline-block; margin-top:.5em;
  font-size:clamp(1.05rem,3.4vw,1.6rem); font-weight:500; letter-spacing:.06em;
}
.hero-lead{
  margin-top:1.6em; font-size:clamp(.92rem,2.5vw,1.05rem);
  line-height:1.95; max-width:34em; text-shadow:0 1px 3px rgba(0,0,0,.5), 0 1px 16px rgba(0,0,0,.45);
}
.hero-cta{ margin-top:2.4em; display:flex; flex-wrap:wrap; gap:14px; }

.hero-scroll{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); }
.hero-scroll span{
  display:block; width:1px; height:48px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* =====================================================
   2. POINTS
   ===================================================== */
.points{ background:var(--color-base); }
.points-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px);
}
.point{ text-align:center; padding:8px; }
.point-icon{
  width:108px; height:108px; margin:0 auto 1.2em;
  display:grid; place-items:center; border-radius:50%;
  background:var(--color-water);
}
.point-icon svg{
  width:50px; height:50px; fill:none; stroke:var(--color-ink);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.point-title{
  font-family:var(--font-head); font-weight:700; font-size:1.22rem;
  letter-spacing:.04em; margin-bottom:.6em;
}
.point-text{ font-size:.92rem; color:var(--color-ink-soft); line-height:1.85; }

/* =====================================================
   3. SOFT WATER (主役)
   ===================================================== */
.softwater{ background:var(--color-bg-soft); }
.sw-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(32px,5vw,72px);
  align-items:center;
}
.sw-media{ position:relative; }
.sw-media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius);
  box-shadow:0 24px 60px -28px rgba(40,90,120,.5);
}
.sw-badge{
  position:absolute; left:-14px; bottom:-14px;
  background:var(--color-water); color:var(--color-ink);
  font-family:var(--font-head); font-weight:700; font-size:1.15rem; letter-spacing:.08em;
  text-align:center; line-height:1.3; padding:18px 22px; border-radius:50%;
  width:108px; height:108px; display:grid; place-content:center;
  box-shadow:0 12px 30px -10px rgba(40,90,120,.45);
}
.sw-badge small{ font-family:var(--font-num); font-size:.5rem; letter-spacing:.18em; display:block; font-weight:600; }
.sw-title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.6rem,5vw,2.5rem); line-height:1.45; letter-spacing:.03em;
  margin-bottom:.7em;
}
.sw-lead{ font-size:1rem; line-height:2; margin-bottom:1.8em; }
.sw-note{
  background:#fff; border-left:3px solid var(--color-water-deep);
  padding:1.2em 1.4em; border-radius:var(--radius); margin-bottom:1.8em;
}
.sw-note h3{ font-size:1rem; font-weight:700; margin-bottom:.5em; letter-spacing:.04em; }
.sw-note p{ font-size:.9rem; color:var(--color-ink-soft); line-height:1.9; }
.sw-note b{ color:var(--color-ink); }
.sw-list h3{
  font-family:var(--font-head); font-size:1.1rem; font-weight:700;
  letter-spacing:.04em; margin-bottom:1em;
}
.sw-list ul{ display:grid; gap:.85em; }
.sw-list li{
  position:relative; padding-left:1.8em; font-size:.95rem; line-height:1.8;
}
.sw-list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:11px; height:11px; border-radius:50%;
  background:var(--color-water); box-shadow:0 0 0 4px rgba(212,239,255,.5);
}

/* =====================================================
   4. SAUNA (暗転)
   ===================================================== */
.sauna{ background:var(--color-ink); color:#fff; }
.sauna-inner{ max-width:var(--maxw); margin:0 auto; }
.sauna-head{ text-align:center; margin-bottom:clamp(40px,6vw,72px); }
.sauna-title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.7rem,5.5vw,2.8rem); line-height:1.45; letter-spacing:.04em;
}
.sauna-title .num{ font-size:1.25em; color:var(--color-water); margin:0 .04em; }

.sauna-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px);
  margin-bottom:clamp(40px,6vw,64px);
}
.sauna-card{
  background:#222; border:1px solid #2e2e2e; border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.sc-media{ aspect-ratio:16/10; overflow:hidden; }
.sc-media img{ width:100%; height:100%; object-fit:cover; }
.sc-body{ padding:clamp(20px,3vw,30px); }
.sc-tag{
  font-family:var(--font-head); font-weight:700; font-size:1.08rem; letter-spacing:.03em;
  margin-bottom:.9em; display:flex; flex-wrap:wrap; align-items:center; gap:.6em; line-height:1.5;
}
.sc-price{
  font-family:var(--font-num); font-weight:700; font-size:.82rem;
  background:var(--color-water); color:var(--color-ink);
  padding:.25em .7em; border-radius:100px; letter-spacing:.02em;
}
.sc-price--free{ background:transparent; color:var(--color-water); border:1px solid var(--color-water); }
.sc-body p{ font-size:.92rem; color:#cfcfcf; line-height:1.9; }
.sc-roryu{ margin-top:1em; padding-top:1em; border-top:1px solid #333; }
.sc-roryu b{ color:var(--color-water); }

.totonoi{ text-align:center; }
.totonoi-lead{ font-family:var(--font-head); font-weight:700; font-size:1.3rem; letter-spacing:.05em; }
.totonoi-sub{ color:#cfcfcf; margin-top:.5em; font-size:.95rem; }
.totonoi-sub b{ color:#fff; }
.totonoi-seats{
  display:flex; justify-content:center; gap:clamp(28px,6vw,72px); margin-top:1.8em;
}
.totonoi-seats li{ display:flex; flex-direction:column; align-items:center; }
.totonoi-seats .num{ font-size:2.6rem; color:var(--color-water); line-height:1; }
.totonoi-seats span:last-child{ font-size:.82rem; color:#bdbdbd; margin-top:.5em; letter-spacing:.08em; }

/* =====================================================
   5. BATHS
   ===================================================== */
.baths{ background:var(--color-base); }
.bath-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,28px);
}
.bath-card{
  border-radius:var(--radius); overflow:hidden; background:#fff;
  box-shadow:0 16px 40px -28px rgba(0,0,0,.35); border:1px solid #f0f0f0;
}
.bath-media{ aspect-ratio:4/3; overflow:hidden; }
.bath-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.bath-card:hover .bath-media img{ transform:scale(1.05); }
.bath-info{ padding:1.1em 1.2em 1.3em; }
.bath-info h3{
  font-family:var(--font-head); font-weight:700; font-size:1.1rem; letter-spacing:.03em;
  display:flex; align-items:baseline; gap:.5em; margin-bottom:.35em;
}
.bath-info .temp{ font-size:.78rem; color:var(--color-ink-soft); font-family:var(--font-jp); font-weight:500; }
.bath-info .temp .num{ font-size:1.1rem; color:var(--color-ink); }
.bath-info p{ font-size:.86rem; color:var(--color-ink-soft); line-height:1.7; }

/* =====================================================
   6. FIRST VISIT
   ===================================================== */
.first{ background:var(--color-bg-soft); }
.steps{
  max-width:var(--maxw); margin:0 auto clamp(40px,6vw,64px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px);
}
.step{ text-align:center; }
.step-media{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.step-media img{ width:100%; height:100%; object-fit:cover; }
.step-num{
  position:absolute; top:10px; left:10px;
  font-family:var(--font-num); font-weight:700; font-size:1rem;
  background:var(--color-ink); color:#fff; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%;
}
.step h3{ font-family:var(--font-head); font-weight:700; font-size:1.12rem; margin:1em 0 .4em; letter-spacing:.03em; }
.step p{ font-size:.9rem; color:var(--color-ink-soft); }

.first-cols{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px);
}
.first-card{
  background:#fff; border-radius:var(--radius); padding:clamp(24px,4vw,38px);
  border:1px solid #eaf3fa;
}
.first-card h3{
  font-family:var(--font-head); font-weight:700; font-size:1.2rem; letter-spacing:.04em;
  margin-bottom:.8em; padding-bottom:.6em; border-bottom:2px solid var(--color-water);
  display:inline-block;
}
.first-card p{ font-size:.93rem; line-height:1.95; color:#333; }
.first-card--sauna{ background:var(--color-water); border-color:var(--color-water); }

/* =====================================================
   7. PRICE
   ===================================================== */
.price{ background:var(--color-base); }
.price-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px);
}
.price-block{
  background:var(--color-bg-soft); border-radius:var(--radius);
  padding:clamp(24px,3.5vw,38px); border:1px solid #eaf3fa;
}
.price-block--amenity{ grid-column:1 / -1; }
.price-block h3{
  font-family:var(--font-head); font-weight:700; font-size:1.25rem; letter-spacing:.04em;
  margin-bottom:1em;
}
.price-table{ width:100%; border-collapse:collapse; }
.price-table th{
  text-align:left; font-weight:500; font-size:.95rem; padding:.85em 0;
  border-bottom:1px solid #e3eef6; vertical-align:middle;
}
.price-table th small{ display:block; font-size:.72rem; color:var(--color-ink-soft); font-weight:400; }
.price-table td{
  text-align:right; padding:.85em 0; border-bottom:1px solid #e3eef6; white-space:nowrap;
}
.price-table td .num{ font-size:1.4rem; }
.price-table td.free{ color:var(--color-water-deep); font-weight:700; }
.pay{ margin-top:1.6em; padding-top:1.4em; border-top:1px dashed #cfe3f1; }
.pay h4{ font-size:.95rem; font-weight:700; margin-bottom:.4em; }
.pay p{ font-size:.92rem; }
.pay-note{ font-size:.78rem; color:var(--color-ink-soft); margin-top:.3em; }

.amenity-free, .amenity-paid{ font-size:.92rem; line-height:1.9; margin-bottom:1em; }
.tag-free,.tag-paid{
  display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.06em;
  padding:.2em .8em; border-radius:100px; margin-right:.8em; vertical-align:middle;
}
.tag-free{ background:var(--color-water); color:var(--color-ink); }
.tag-paid{ background:#fff; color:var(--color-ink-soft); border:1px solid #d6e6f1; }

/* =====================================================
   8. ABOUT
   ===================================================== */
.about{ background:var(--color-bg-soft); }
.about-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center;
}
.about-media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius);
  box-shadow:0 24px 60px -30px rgba(40,80,110,.5);
}
.about-body h2{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.5rem,4.5vw,2.3rem); line-height:1.5; letter-spacing:.04em; margin-bottom:1em;
}
.about-text p{ font-size:.96rem; line-height:2.05; margin-bottom:1.2em; color:#333; }
.about-text p:last-child{ margin-bottom:0; }

/* =====================================================
   9. ACCESS
   ===================================================== */
.access{ background:var(--color-base); }
.access-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start;
}
.info-table{ width:100%; border-collapse:collapse; }
.info-table th{
  text-align:left; vertical-align:top; white-space:nowrap;
  font-weight:700; font-size:.9rem; width:6.5em; padding:1em .5em 1em 0;
  border-bottom:1px solid #ececec; color:var(--color-ink);
}
.info-table td{
  font-size:.94rem; padding:1em 0; border-bottom:1px solid #ececec; line-height:1.7;
}
.info-table td small{ color:var(--color-ink-soft); font-size:.8rem; }
.info-table a{ color:var(--color-ink); border-bottom:1px solid var(--color-water-deep); }
.access-cta{ display:flex; gap:14px; margin-top:1.8em; flex-wrap:wrap; }
.access-map{ position:sticky; top:90px; }
.access-map iframe{
  width:100%; height:clamp(320px,46vw,480px); border:0; border-radius:var(--radius);
  filter:grayscale(.15) contrast(1.02);
}

/* =====================================================
   10. FOOTER
   ===================================================== */
.site-footer{ background:var(--color-ink); color:#cfcfcf; padding:clamp(48px,7vw,80px) var(--gut) 110px; }
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px;
}
.footer-logo{ height:34px; width:auto; margin-bottom:1.2em; }
.footer-addr{ font-size:.86rem; line-height:1.8; }
.footer-meta dl{ display:grid; grid-template-columns:auto 1fr; gap:.5em 1.4em; font-size:.88rem; }
.footer-meta dt{ color:#8f8f8f; }
.footer-meta dd{ margin:0; }
.footer-meta a{ border-bottom:1px solid #444; }
.footer-copy{
  max-width:var(--maxw); margin:clamp(36px,5vw,56px) auto 0;
  font-family:var(--font-num); font-size:.74rem; letter-spacing:.1em; color:#777;
  border-top:1px solid #2a2a2a; padding-top:1.6em;
}

/* =====================================================
   MOBILE FIXED CTA
   ===================================================== */
.mobile-cta{
  position:fixed; bottom:0; left:0; width:100%; z-index:90;
  display:none; grid-template-columns:1fr 1fr;
  box-shadow:0 -6px 24px -10px rgba(0,0,0,.3);
}
.mc-item{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  min-height:60px; font-weight:700; font-size:1rem; letter-spacing:.05em;
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mc-item svg{ width:20px; height:20px; fill:currentColor; }
.mc-tel{ background:var(--color-ink); color:#fff; }
.mc-map{ background:var(--color-water); color:var(--color-ink); }

/* =====================================================
   REVEAL ANIMATION
   ===================================================== */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1023px){
  .sw-inner, .about-inner{ grid-template-columns:1fr; gap:36px; }
  .access-inner{ grid-template-columns:1fr; }
  .access-map{ position:static; }
  .header-nav .hn-item span{ display:none; }
  .header-nav .hn-item{ padding:.5em; }
}

@media (max-width:767px){
  :root{ --sect-pad:clamp(56px,14vw,80px); }
  .header-nav{ display:none; }            /* スマホは固定CTAに集約 */
  .header-inner{ padding:12px var(--gut); }
  .header-logo img{ height:26px; }

  .points-grid{ grid-template-columns:1fr; gap:32px; max-width:360px; }
  .point-icon{ width:96px; height:96px; }

  .sauna-cards{ grid-template-columns:1fr; }
  .bath-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .bath-info h3{ font-size:1rem; }

  .steps{ grid-template-columns:1fr; max-width:420px; }
  .first-cols{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; }

  .mobile-cta{ display:grid; }
  main{ /* keep content above fixed bar handled per-section */ }
  body{ padding-bottom:0; }
  .site-footer{ padding-bottom:96px; }    /* 固定CTAに被らない */

  .hero{ min-height:92svh; padding-top:100px; }
  .totonoi-seats{ gap:36px; }
  .sw-badge{ width:92px; height:92px; font-size:1rem; }
}

@media (max-width:380px){
  .bath-grid{ grid-template-columns:1fr; max-width:320px; margin-inline:auto; }
}

/* =====================================================
   REDUCED MOTION
   ===================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero-slide{ transition:opacity .4s ease; transform:none !important; animation:none !important; }
  .hero-slide.is-active{ animation:none !important; }
  .loader-logo{ animation:none !important; opacity:1; }
  .loader-bar i{ animation:none !important; }
}

/* =====================================================
   ★ KOGANEYU-STYLE THEME（白基調・大きな写真・縦組みコピー）
   白×黒＋写真、差し色に水色。ミニマル editorial。
   ===================================================== */
:root{
  --radius:8px;
  --ink2:#161616;
  --ink2-soft:#6b7076;
  --line2:#e7e7e7;
}
body{ color:var(--ink2); background:#ffffff; }

/* 各セクション白（サウナ・フッター含め統一トーン） */
.points,.softwater,.baths,.first,.price,.about,.access,.sauna{ background:transparent; }
.sauna{ color:var(--ink2); }

/* ---------- HERO：大きな写真 ＋ 縦組みコピー ---------- */
.hero{
  display:flex; align-items:stretch; gap:clamp(20px,3.5vw,52px);
  min-height:100svh; padding:104px var(--gut) 64px;
  color:var(--ink2); background:#fff; overflow:hidden;
}
.hero-slideshow{ display:none; }
.hero-veil{
  position:relative; inset:auto; flex:1 1 auto; align-self:stretch; min-height:60svh;
  background:url('../assets/img/hero-1.jpg') center/cover no-repeat;
  border-radius:var(--radius);
}
.hero-content{
  position:relative; flex:0 0 auto; width:auto; max-width:none; margin:0;
  display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:1.4em;
}
.hero-eyebrow{
  writing-mode:horizontal-tb; color:var(--ink2-soft); font-weight:600;
  letter-spacing:.16em; font-size:.72rem; margin:0; opacity:1;
}
.hero-title{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:var(--font-head); font-weight:700; color:var(--ink2);
  font-size:clamp(1.5rem,3vw,2.5rem); line-height:1.9; letter-spacing:.16em;
  text-shadow:none; margin:0;
}
.hero-title-sub,.hero-lead,.hero-cta{ display:none; }
.hero-scroll span{ background:linear-gradient(180deg,rgba(20,20,20,.55),transparent); }

/* ---------- 文字色：黒基調 ---------- */
.section-head h2,.sw-title,.point-title,.bath-info h3,.step h3,
.about-body h2,.totonoi-lead,.price-block h3,.pay h4,.sauna-title{ color:var(--ink2); text-shadow:none; }
.point-text,.bath-info p,.bath-info .temp,.step p,.about-text p,.pay p,.pay-note,
.amenity-free,.amenity-paid,.sc-body p,.totonoi-sub,.info-table td small{ color:var(--ink2-soft); }
.sw-note h3,.sw-note b,.sw-list li,.price-table th,.pay p,
.info-table th,.info-table td,.totonoi-sub b{ color:var(--ink2); }
/* 小見出し：黒の小ラベル＋水色の下線バー（差し色） */
.eyebrow,.hero-eyebrow{ color:var(--ink2-soft); }
.eyebrow-light{ color:var(--color-water-deep); }
.section-head .eyebrow::after{ background:var(--color-water-deep); }
.sauna-title .num,.totonoi-seats .num,.bath-info .temp .num,.sc-roryu b{ color:var(--color-water-deep); }

/* ---------- ヘッダー：白地に黒ロゴ・黒ナビ ---------- */
.header-logo .logo-dark{ display:block; }
.header-logo .logo-light{ display:none; }
.hn-item{ color:var(--ink2); }
.hn-item:hover{ background:#f0f0f0; }
.site-header.scrolled{ background:rgba(255,255,255,.9); box-shadow:0 1px 0 var(--line2); backdrop-filter:blur(8px); }
.site-header.scrolled .logo-dark{ display:block; }
.site-header.scrolled .logo-light{ display:none; }
.site-header.scrolled .hn-item{ color:var(--ink2); }
.site-header.scrolled .hn-item:hover{ background:#f0f0f0; }

/* ---------- カード：白・細い枠・控えめな影 ---------- */
.sw-note,.first-card,.price-block,.bath-card,.sauna-card{
  background:#fff; border:1px solid var(--line2);
  box-shadow:0 14px 36px -28px rgba(0,0,0,.35);
}
.sw-note{ border-left:3px solid var(--color-water-deep); }
.first-card--sauna{ background:var(--color-water); border-color:var(--color-water); }
.first-card--sauna h3,.first-card--sauna p{ color:var(--ink2); }
.info-table a{ color:var(--ink2); border-bottom-color:var(--color-water-deep); }
.sc-price--free{ color:var(--color-water-deep); border-color:var(--color-water-deep); }
.sc-roryu{ border-top-color:var(--line2); }
.totonoi-seats span:last-child{ color:var(--ink2-soft); }

/* ---------- 写真：長方形（角丸小） ---------- */
.sw-media img,.about-media img{ border-radius:var(--radius); box-shadow:none; }
.bath-media,.sc-media,.step-media{ border-radius:var(--radius); }

/* ---------- ボタン：黒基調・角丸小 ---------- */
.btn{ border-radius:6px; }
.btn-primary{ background:var(--ink2); color:#fff; }
.btn-primary:hover{ background:#000; }
.btn-outline{ color:var(--ink2); border-color:var(--ink2); }
.btn-outline:hover{ background:var(--ink2); color:#fff; }
.mc-tel{ background:var(--ink2); color:#fff; }
.mc-map{ background:var(--color-water); color:var(--ink2); }

/* ---------- フッター：黒 ---------- */
.site-footer{ background:#141414; color:#c9c9c9; }
.footer-logo{ filter:none; opacity:1; }
.footer-meta dt{ color:#8b8b8b; }
.footer-meta a{ border-bottom-color:#444; }
.footer-copy{ color:#7a7a7a; border-top-color:#2a2a2a; }

/* ---------- レスポンシブ（ヒーロー縦積み） ---------- */
@media (max-width:1023px){
  .hero{ flex-direction:column; padding-top:96px; }
  .hero-veil{ width:100%; min-height:44svh; flex:0 0 auto; }
  .hero-content{ align-items:flex-start; justify-content:flex-start; }
  .hero-title{ writing-mode:horizontal-tb; letter-spacing:.04em; line-height:1.5; }
}

/* =====================================================
   ★ EDITORIAL POLISH（脱・テンプレ／意図ある作り込み）
   ===================================================== */
:root{ --radius:2px; }

/* 見出し：中央寄せ＋下線バーの“定型”をやめ、左寄せ・大判に */
.section-head{ text-align:left; max-width:var(--maxw); margin-bottom:clamp(32px,5vw,64px); }
.section-head .eyebrow::after{ display:none; }
.eyebrow{ font-family:var(--font-num); letter-spacing:.32em; font-size:.68rem; text-transform:uppercase; }
.section-head h2{ font-size:clamp(2rem,5.6vw,3.4rem); line-height:1.28; letter-spacing:.01em; }
.section-head h2::after{
  content:""; display:block; width:44px; height:2px; margin-top:.6em;
  background:var(--ink2);
}

/* 余白リズムを広く（editorialの“間”） */
.section{ padding:clamp(84px,12vw,168px) var(--gut); }

/* お風呂：影付き角丸カード（テンプレ臭）→ 写真＋キャプションの誌面組み */
.bath-grid{ counter-reset:bath; gap:clamp(28px,3.4vw,52px) clamp(18px,2.4vw,34px); }
.bath-card{ background:none; border:none; box-shadow:none; border-radius:0; overflow:visible; position:relative; }
.bath-media{ border-radius:var(--radius); }
.bath-info{ padding:1.05em 0 0; border-top:1px solid var(--ink2); margin-top:.9em; }
.bath-info h3{ font-size:1.05rem; }
.bath-info h3::before{
  counter-increment:bath; content:counter(bath,decimal-leading-zero);
  font-family:var(--font-num); font-weight:700; font-size:.82rem;
  color:var(--color-water-deep); margin-right:.8em; letter-spacing:.04em;
}

/* パネル類：影を外し、細罫のみのミニマルに */
.first-card,.price-block{ box-shadow:none; border:1px solid var(--line2); border-radius:var(--radius); }
.first-card--sauna{ border-color:var(--color-water); }
.sw-note{ box-shadow:none; border-radius:0; background:#f6f6f6; }
.sauna-card{ box-shadow:none; border:1px solid var(--line2); border-radius:var(--radius); }

/* ステップ番号：丸バッジ→大きな誌面ナンバー */
.step{ text-align:left; }
.step-media{ border-radius:var(--radius); }
.step-num{
  position:static; width:auto; height:auto; background:none; color:var(--ink2);
  display:block; font-size:2rem; line-height:1; margin:.7em 0 0; letter-spacing:.02em;
}
.step h3{ margin-top:.3em; }

/* サウナの見出しも左寄せで揃える */
.sauna-head{ text-align:left; }

/* ヒーロー：写真を左端までブリード＋縦コピー拡大で“作った感” */
.hero{ padding-left:0; padding-right:0; }
.hero-veil{ border-radius:0 var(--radius) var(--radius) 0; }
.hero-content{ padding-right:var(--gut); }
.hero-title{ font-size:clamp(1.7rem,3.4vw,3rem); letter-spacing:.22em; line-height:2; }

@media (max-width:1023px){
  .hero{ padding-left:0; padding-right:0; }
  .hero-veil{ border-radius:0; }
  .hero-content{ padding-left:var(--gut); padding-right:var(--gut); }
}

/* =====================================================
   見出しを消したセクションのラベルを“大きな見出し”に昇格
   （サウナ／お風呂／はじめて）
   ===================================================== */
#softwater .eyebrow, #about .eyebrow, #sauna .eyebrow, #baths .eyebrow, #first .eyebrow{
  display:block; margin-bottom:.7em;
  font-family:var(--font-head); font-weight:700; color:var(--ink2);
  font-size:clamp(1.9rem,5.2vw,3.2rem); line-height:1.28; letter-spacing:.04em;
  text-transform:none;
}
#softwater .eyebrow::after, #about .eyebrow::after,
#sauna .eyebrow::after, #baths .eyebrow::after, #first .eyebrow::after{
  content:""; display:block; width:44px; height:2px; margin:.5em 0 0; background:var(--ink2);
}
/* 項目名の上に小さな英語ラベル */
#softwater .eyebrow::before, #about .eyebrow::before,
#sauna .eyebrow::before, #baths .eyebrow::before, #first .eyebrow::before{
  content:attr(data-en); display:block;
  font-family:var(--font-num); font-weight:600; font-size:.68rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink2-soft); margin-bottom:.9em; line-height:1;
}

/* =====================================================
   TOP：1〜6の写真を順番にスライドショー表示（左の写真ブロック）
   ===================================================== */
.hero-slideshow{
  display:block; position:relative; inset:auto;
  flex:1 1 auto; align-self:stretch; min-height:60svh;
  border-radius:0 var(--radius) var(--radius) 0; overflow:hidden;
}
.hero-veil{ display:none; }
/* 切替時の“一瞬拡大”を無効化（拡大アニメを止め、フェードのみ） */
.hero-slide{ transform:none; }
.hero-slide.is-active{ animation:none; transform:none; }
@media (max-width:1023px){
  .hero-slideshow{ width:100%; min-height:44svh; flex:0 0 auto; border-radius:0; }
}

/* =====================================================
   ととのいスペースの画像
   ===================================================== */
.totonoi-media{
  max-width:760px; margin:0 auto clamp(26px,4vw,44px);
  border-radius:var(--radius); overflow:hidden;
}
.totonoi-media img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }

/* =====================================================
   ハンバーガー & ドロワーメニュー
   ===================================================== */
.header-actions{ display:flex; align-items:center; gap:clamp(10px,2vw,20px); }
.menu-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; background:none; border:0; cursor:pointer;
}
.menu-toggle span{
  display:block; width:24px; height:2px; background:var(--ink2);
  transition:transform .3s ease, opacity .3s ease;
}
body.drawer-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.drawer-open .menu-toggle span:nth-child(2){ opacity:0; }
body.drawer-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer-overlay{
  position:fixed; inset:0; z-index:190; background:rgba(12,14,16,.42);
  opacity:0; transition:opacity .35s ease;
}
.drawer-overlay[hidden]{ display:none; }
body.drawer-open .drawer-overlay{ opacity:1; }

.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(86vw,360px); z-index:200;
  background:#fff; box-shadow:-24px 0 70px -34px rgba(0,0,0,.45);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
  padding:92px clamp(24px,4vw,38px) 40px; overflow-y:auto;
}
body.drawer-open .drawer{ transform:translateX(0); }
.drawer-close{
  position:absolute; top:18px; right:22px; width:40px; height:40px;
  font-size:2rem; line-height:1; background:none; border:0; cursor:pointer; color:var(--ink2);
}
.drawer-list{ display:flex; flex-direction:column; }
.drawer-list a{
  display:block; padding:1.05em .2em;
  font-family:var(--font-head); font-weight:700; font-size:1.15rem; letter-spacing:.04em;
  color:var(--ink2); border-bottom:1px solid var(--line2);
  transition:color .2s ease, padding-left .2s ease;
}
.drawer-list a:hover{ color:var(--color-water-deep); padding-left:.7em; }
body.drawer-open{ overflow:hidden; }

/* =====================================================
   スマホ：スクロール時の上部のガタつき対策
   ===================================================== */
.site-header{ -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateZ(0); }
.site-header.hide{ transform:translateY(-100%) translateZ(0); }
@media (max-width:767px){
  /* 固定ヘッダーの半透明ぼかしをやめ、再描画のカクつきを回避 */
  .site-header.scrolled{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* 下スクロールで隠す動きを無効化（アドレスバー animation との干渉でガタつくため） */
  .site-header.hide{ transform:translateZ(0); }
}

/* =====================================================
   本文内の強調（『いつもの場所』）
   ===================================================== */
.about-text .emphasis{
  font-family:var(--font-head); font-weight:700;
  font-size:1.53em; line-height:1.2; letter-spacing:.03em;
  color:var(--ink2);
  display:inline-block; margin:.12em .06em;
  border-bottom:3px solid var(--color-water-deep);
}

/* =====================================================
   セクションごとの薄い背景色（白一色を回避・交互）
   ===================================================== */
#softwater{ background:#f1f7fd; }
#baths{ background:#f1f7fd; }
#price{ background:#f1f7fd; }