/* =====================================================================
   LUMIÈRE BEAUTY SALON — Cinematic Landing Page
   Art Direction: "光をまとう / Wearing Light"
   Palette: warm sand, mocha, champagne gold on cream
   Build: hand-tuned, dependency-free, motion-first
   ===================================================================== */

/* ---------- 0. Design Tokens ---------- */
:root{
  /* color */
  --cream:        #FAF6F0;
  --cream-2:      #F4ECE2;
  --sand:         #EBE0D2;
  --sand-deep:    #DDCDB8;
  --taupe:        #C5B098;
  --mocha:        #9C8A74;
  --mocha-deep:   #6E5D49;
  --espresso:     #3B332A;
  --ink:          #2A241D;
  --gold:         #B8995E;
  --gold-soft:    #CBB587;
  --gold-bright:  #D8C193;
  --gold-ink:     #7C6230; /* AA-contrast gold for small text on light bg (~5:1) */
  --line:         rgba(59,51,42,.14);
  --line-soft:    rgba(59,51,42,.08);
  --white:        #FFFFFF;

  /* type */
  --serif-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --sans-jp:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --sans-en:  "Jost", var(--sans-jp);

  /* rhythm */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 18px;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur: .8s;
}

/* ---------- 1. Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans-jp);
  color:var(--espresso);
  background:var(--cream);
  line-height:1.85;
  letter-spacing:.04em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--gold-soft); color:var(--ink); }

/* ---------- 2. Film grain + vignette overlay (cinematic texture) ---------- */
.fx-grain,.fx-vignette{ position:fixed; inset:0; pointer-events:none; z-index:9000; }
.fx-grain{
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(3) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)} }
.fx-vignette{ box-shadow:inset 0 0 220px rgba(58,46,32,.16); }
@media (prefers-reduced-motion:reduce){ .fx-grain{ animation:none; } }

/* ---------- 3. Custom cursor ---------- */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; pointer-events:none; z-index:9500; border-radius:50%; mix-blend-mode:multiply; }
.cursor{ width:38px; height:38px; border:1px solid var(--mocha); transform:translate(-50%,-50%); transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s; }
.cursor-dot{ width:5px; height:5px; background:var(--mocha-deep); transform:translate(-50%,-50%); }
.cursor.is-hover{ width:64px; height:64px; background:rgba(184,153,94,.12); border-color:transparent; }
.cursor.is-down{ width:26px; height:26px; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none; } }

/* ---------- 4. Intro loader ---------- */
.intro{
  position:fixed; inset:0; z-index:9800;
  display:grid; place-content:center; gap:20px;
  background:var(--cream);
  transition:opacity 1s var(--ease), visibility 1s;
}
.intro.done{ opacity:0; visibility:hidden; }
html:not(.js) .intro{ display:none; } /* no-JS: never trap the page behind the loader */
.intro__brand{ font-family:var(--serif-en); font-size:clamp(36px,7vw,76px); letter-spacing:.32em; color:var(--espresso); display:flex; gap:.02em; padding-left:.32em; }
.intro__brand span{ opacity:0; transform:translateY(18px); display:inline-block; animation:introLetter .7s var(--ease) forwards; }
.intro__sub{ text-align:center; font-family:var(--sans-en); font-size:11px; letter-spacing:.5em; color:var(--mocha); padding-left:.5em; opacity:0; animation:introFade .8s 1s var(--ease) forwards; }
.intro__bar{ width:min(220px,50vw); height:1px; margin:6px auto 0; background:var(--line); overflow:hidden; }
.intro__bar::after{ content:""; display:block; height:100%; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; animation:introBar 1.8s var(--ease-soft) forwards; }
@keyframes introLetter{ to{ opacity:1; transform:none; } }
@keyframes introFade{ to{ opacity:1; } }
@keyframes introBar{ to{ transform:scaleX(1); } }

/* ---------- 5. Scroll progress ---------- */
.progress{ position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); z-index:8000; }

/* ---------- 6. Header / Nav ---------- */
.header{
  position:fixed; top:0; inset-inline:0; z-index:7000;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.header.scrolled{ padding:14px var(--gutter); background:rgba(250,246,240,.82); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--line-soft); }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--serif-en); font-size:24px; letter-spacing:.22em; color:var(--espresso); }
.brand__tag{ font-family:var(--sans-en); font-size:8.5px; letter-spacing:.42em; color:var(--mocha); margin-top:5px; padding-left:.3em; }
.nav{ display:flex; align-items:center; gap:34px; }
.nav__link{ position:relative; font-family:var(--sans-en); font-size:12px; letter-spacing:.18em; color:var(--espresso); padding:6px 0; }
.nav__link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav__link:hover::after,.nav__link.active::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  font-family:var(--sans-jp); font-size:12.5px; letter-spacing:.1em; color:var(--white);
  background:linear-gradient(135deg,var(--mocha),var(--mocha-deep));
  padding:12px 26px; border-radius:40px; position:relative; overflow:hidden;
  box-shadow:0 8px 22px -10px rgba(110,93,73,.7);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__cta span{ position:relative; z-index:2; }
.nav__cta::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--gold),var(--gold-bright)); opacity:0; transition:opacity .45s var(--ease); }
.nav__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(184,153,94,.7); }
.nav__cta:hover::before{ opacity:1; }
.nav__toggle{ display:none; width:30px; height:20px; position:relative; }
.nav__toggle span{ position:absolute; left:0; height:1.5px; width:100%; background:var(--espresso); transition:.4s var(--ease); }
.nav__toggle span:nth-child(1){ top:0; } .nav__toggle span:nth-child(2){ top:9px; } .nav__toggle span:nth-child(3){ top:18px; }

/* ---------- 7. Layout helpers ---------- */
.wrap{ width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto; }
.eyebrow{ display:inline-flex; align-items:center; gap:12px; font-family:var(--sans-en); font-size:11px; letter-spacing:.4em; color:var(--gold-ink); text-transform:uppercase; }
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--gold); }
.sec-head{ margin-bottom:clamp(36px,6vw,68px); }
.sec-title{ font-family:var(--serif-en); font-weight:500; font-size:clamp(34px,6vw,64px); letter-spacing:.06em; color:var(--espresso); line-height:1.05; margin-top:14px; }
.sec-title small{ display:block; font-family:var(--serif-jp); font-size:.34em; letter-spacing:.18em; color:var(--mocha); margin-top:14px; }

/* reveal-on-scroll — gated on .js so content stays visible without JS (SEO/no-JS) */
.reveal{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(38px); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.12s; }
.reveal[data-delay="2"]{ transition-delay:.24s; }
.reveal[data-delay="3"]{ transition-delay:.36s; }
.reveal[data-delay="4"]{ transition-delay:.48s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; } }

/* ---------- 8. Photo placeholder system (swap-ready) ---------- */
/* Beautiful by default; salon drops a real <img> into .ph to replace. */
.ph{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--sand) 0%,var(--cream-2) 45%,var(--sand-deep) 100%); border-radius:var(--radius); }
.ph::after{ /* soft light sweep */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 75% 15%, rgba(255,255,255,.55), transparent 55%),
             radial-gradient(90% 80% at 20% 90%, rgba(156,138,116,.28), transparent 60%);
  mix-blend-mode:screen; opacity:.9;
}
.ph__mark{ position:absolute; inset:0; display:grid; place-content:center; gap:10px; text-align:center; color:var(--mocha); }
.ph__mark svg{ width:46px; height:46px; opacity:.5; margin-inline:auto; }
.ph__mark span{ font-family:var(--sans-en); font-size:10px; letter-spacing:.42em; opacity:.7; }
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- 9. HERO ---------- */
.hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:120px var(--gutter) 64px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(80% 60% at 78% 30%, rgba(235,224,210,.9), transparent 70%),
    radial-gradient(70% 70% at 10% 80%, rgba(197,176,152,.35), transparent 70%),
    linear-gradient(120deg, var(--cream) 0%, var(--cream-2) 55%, var(--sand) 100%);
}
.hero__bg::after{ /* floating soft orbs */
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 8%),
            radial-gradient(circle at 85% 65%, rgba(216,193,147,.25), transparent 10%);
}
.hero__inner{ position:relative; z-index:2; width:min(100%,var(--maxw)); margin-inline:auto; display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(24px,4.5vw,64px); align-items:center; }

.hero__media{ position:relative; aspect-ratio:4/5; order:1; }
.hero__media .ph{ position:absolute; inset:0; box-shadow:0 50px 90px -50px rgba(94,76,55,.6); }
.hero__media .ph img{ transform:scale(1.05); animation:kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.05) translate(0,0); } to{ transform:scale(1.16) translate(-2%,-2%); } }
@media (prefers-reduced-motion:reduce){ .hero__media .ph img{ animation:none; } }
.hero__media::before{ /* frame accent */
  content:""; position:absolute; inset:-14px -14px auto auto; width:46%; height:46%;
  border-top:1px solid var(--gold); border-right:1px solid var(--gold); opacity:.6; z-index:3; pointer-events:none;
}
.hero__floatcard{ position:absolute; left:-26px; bottom:34px; z-index:4;
  background:rgba(250,246,240,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--line-soft);
  padding:16px 22px; border-radius:14px; box-shadow:0 20px 40px -24px rgba(94,76,55,.55);
  display:flex; align-items:center; gap:14px;
}
.hero__floatcard b{ font-family:var(--serif-en); font-size:30px; color:var(--gold); line-height:1; }
.hero__floatcard small{ font-size:10.5px; letter-spacing:.12em; color:var(--mocha-deep); line-height:1.5; }

.hero__copy{ position:relative; order:2; }
.hero__vtext{ position:absolute; left:-58px; top:0; writing-mode:vertical-rl; font-family:var(--serif-en); font-size:11px; letter-spacing:.5em; color:var(--taupe); }
.hero__title{ font-family:var(--serif-jp); font-weight:500; font-size:clamp(36px,5.6vw,68px); line-height:1.34; color:var(--ink); letter-spacing:.03em; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:inline-block; transform:translateY(110%); animation:riseUp 1s var(--ease) forwards; }
.hero__title .em{ color:var(--gold); font-style:normal; position:relative; }
.hero__title .line:nth-child(1) > span{ animation-delay:.2s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.36s; }
@keyframes riseUp{ to{ transform:none; } }
.hero__lead{ margin-top:26px; font-size:15px; letter-spacing:.1em; color:var(--mocha-deep); opacity:0; animation:introFade 1s .9s var(--ease) forwards; }
.hero__badges{ display:flex; gap:14px; margin-top:38px; opacity:0; animation:introFade 1s 1.1s var(--ease) forwards; }
.badge{ flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 10px; text-align:center; background:rgba(255,255,255,.5); border:1px solid var(--line-soft); border-radius:14px; transition:transform .4s var(--ease), background .4s; }
.badge:hover{ transform:translateY(-4px); background:rgba(255,255,255,.8); }
.badge svg{ width:26px; height:26px; stroke:var(--mocha); }
.badge span{ font-size:11px; letter-spacing:.08em; color:var(--espresso); line-height:1.5; }
.hero__cta{ display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; opacity:0; animation:introFade 1s 1.3s var(--ease) forwards; }

/* primary button */
.btn{ position:relative; display:inline-flex; align-items:center; gap:12px; font-size:14px; letter-spacing:.1em; padding:17px 34px; border-radius:44px; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.btn span{ position:relative; z-index:2; }
.btn--primary{ color:var(--white); background:linear-gradient(135deg,var(--mocha),var(--mocha-deep)); box-shadow:0 14px 30px -12px rgba(110,93,73,.8); }
.btn--primary::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,var(--gold),var(--gold-bright)); opacity:0; transition:opacity .45s var(--ease); }
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -14px rgba(184,153,94,.8); }
.btn--primary:hover::before{ opacity:1; }
.btn--ghost{ color:var(--espresso); border:1px solid var(--mocha); }
.btn--ghost:hover{ background:var(--espresso); color:var(--cream); transform:translateY(-3px); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }

.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--sans-en); font-size:9px; letter-spacing:.4em; color:var(--mocha); }
.hero__scroll .rail{ width:1px; height:46px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll .rail::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--gold); animation:scrollRail 2s var(--ease-soft) infinite; }
@keyframes scrollRail{ 0%{ top:-50%; } 100%{ top:100%; } }

/* ---------- 10. Marquee trust strip ---------- */
.marquee{ border-block:1px solid var(--line-soft); background:var(--cream-2); overflow:hidden; padding:18px 0; }
.marquee__track{ display:flex; gap:60px; width:max-content; animation:marquee 28s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:16px; font-family:var(--serif-en); font-size:18px; letter-spacing:.14em; color:var(--mocha); white-space:nowrap; }
.marquee__item::after{ content:"✦"; color:var(--gold); font-size:12px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------- 11. CONCEPT / ABOUT ---------- */
.concept{ padding:clamp(80px,12vw,150px) 0; position:relative; }
.concept__lead{ max-width:560px; font-family:var(--serif-jp); font-size:clamp(18px,2.4vw,26px); line-height:2.1; color:var(--espresso); }
.concept__lead .mark{ color:var(--gold); }
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,34px); margin-top:clamp(46px,6vw,76px); }
.feature{ position:relative; }
.feature__media{ aspect-ratio:3/4; margin-bottom:22px; }
.feature__media .ph{ position:absolute; inset:0; }
.feature__num{ position:absolute; top:-18px; left:14px; z-index:3; font-family:var(--serif-en); font-size:64px; color:var(--cream); -webkit-text-stroke:1px var(--gold-soft); }
.feature__media{ position:relative; }
.feature__media .tag{ position:absolute; left:0; bottom:0; z-index:3; background:var(--cream); color:var(--mocha-deep); font-size:10px; letter-spacing:.3em; padding:8px 16px; border-radius:0 12px 0 0; }
.feature h3{ font-family:var(--serif-jp); font-weight:500; font-size:21px; letter-spacing:.06em; color:var(--ink); margin-bottom:12px; display:flex; align-items:baseline; gap:12px; }
.feature h3 i{ font-family:var(--serif-en); font-style:normal; font-size:13px; color:var(--gold); letter-spacing:.1em; }
.feature p{ font-size:13.5px; color:var(--mocha-deep); line-height:2; }

/* ---------- 12. STATS count-up ---------- */
.stats{ background:linear-gradient(135deg,var(--mocha-deep),var(--espresso)); color:var(--cream); padding:clamp(64px,9vw,110px) 0; position:relative; overflow:hidden; }
.stats::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 80% 20%, rgba(184,153,94,.3), transparent 60%); }
.stats__grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat__num{ font-family:var(--serif-en); font-size:clamp(44px,6vw,72px); line-height:1; color:var(--gold-bright); display:flex; align-items:baseline; justify-content:center; gap:4px; }
.stat__num small{ font-size:.4em; color:var(--cream); }
.stat__label{ margin-top:14px; font-size:12px; letter-spacing:.18em; color:rgba(250,246,240,.8); }
.stat::after{ content:""; }
.stats__grid .stat:not(:last-child){ border-right:1px solid rgba(250,246,240,.14); }

/* ---------- 13. MENU ---------- */
.menu{ padding:clamp(80px,12vw,150px) 0; }
.menu__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.menu__badge{ width:104px; height:104px; flex:none; border-radius:50%; display:grid; place-content:center; text-align:center; color:var(--white); background:radial-gradient(circle at 30% 25%, var(--gold-bright), var(--gold) 70%); box-shadow:0 18px 36px -16px rgba(184,153,94,.8); transform:rotate(-8deg); }
.menu__badge b{ font-family:var(--serif-en); font-size:28px; line-height:1; }
.menu__badge small{ font-size:9px; letter-spacing:.22em; display:block; margin-top:3px; }
.menu__list{ margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--line); }
.menu__row{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:clamp(14px,3vw,40px); padding:26px 8px; border-bottom:1px solid var(--line); transition:background .4s var(--ease), padding-inline .4s var(--ease); position:relative; }
.menu__row::before{ content:""; position:absolute; left:0; top:0; height:100%; width:2px; background:var(--gold); transform:scaleY(0); transform-origin:bottom; transition:transform .4s var(--ease); }
.menu__row:hover{ background:var(--cream-2); padding-inline:18px; }
.menu__row:hover::before{ transform:scaleY(1); transform-origin:top; }
.menu__no{ font-family:var(--serif-en); font-size:15px; color:var(--taupe); width:34px; }
.menu__name{ font-family:var(--serif-jp); font-size:clamp(16px,2vw,20px); color:var(--ink); letter-spacing:.04em; }
.menu__name small{ display:block; font-family:var(--sans-en); font-size:10px; letter-spacing:.2em; color:var(--mocha); margin-top:4px; }
.menu__was{ font-size:13px; color:var(--taupe); text-decoration:line-through; }
.menu__now{ font-family:var(--serif-en); font-size:clamp(22px,3vw,30px); color:var(--gold); white-space:nowrap; }
.menu__now small{ font-size:.5em; color:var(--mocha-deep); }
.menu__foot{ display:flex; justify-content:center; margin-top:clamp(40px,5vw,56px); }
.menu__note{ text-align:center; margin-top:20px; font-size:11px; letter-spacing:.1em; color:var(--mocha-deep); }

/* ---------- 14. BEFORE / AFTER interactive ---------- */
.ba{ padding:clamp(80px,12vw,150px) 0; background:var(--cream-2); }
.ba__stage{ position:relative; max-width:760px; margin:clamp(30px,5vw,50px) auto 0; aspect-ratio:16/11; border-radius:var(--radius); overflow:hidden; box-shadow:0 50px 90px -50px rgba(94,76,55,.6); user-select:none; touch-action:none; }
.ba__img{ position:absolute; inset:0; }
.ba__img .ph{ position:absolute; inset:0; border-radius:0; }
.ba__after{ position:absolute; inset:0; clip-path:inset(0 0 0 50%); }
.ba__tag{ position:absolute; top:18px; z-index:4; font-family:var(--sans-en); font-size:11px; letter-spacing:.3em; color:var(--white); background:rgba(58,46,32,.55); padding:7px 16px; border-radius:30px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.ba__tag--b{ left:18px; } .ba__tag--a{ right:18px; }
.ba__handle{ position:absolute; top:0; left:50%; width:2px; height:100%; background:var(--cream); transform:translateX(-50%); z-index:5; box-shadow:0 0 18px rgba(0,0,0,.25); }
.ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:var(--cream); display:grid; place-content:center; box-shadow:0 8px 24px -6px rgba(0,0,0,.4); cursor:ew-resize; }
.ba__grip::before{ content:"‹ ›"; font-family:var(--serif-en); font-size:18px; color:var(--mocha-deep); letter-spacing:2px; }
.ba__hint{ text-align:center; margin-top:18px; font-size:11px; letter-spacing:.18em; color:var(--mocha); }

/* ---------- 15. VOICE ---------- */
.voice{ padding:clamp(80px,12vw,150px) 0; }
.voice__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); margin-top:clamp(40px,6vw,64px); }
.vcard{ background:var(--cream); border:1px solid var(--line-soft); border-radius:var(--radius); padding:34px 30px; position:relative; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.vcard:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -30px rgba(94,76,55,.4); }
.vcard__q{ font-family:var(--serif-en); font-size:60px; line-height:.6; color:var(--sand-deep); }
.vcard__stars{ display:flex; gap:3px; margin:6px 0 14px; color:var(--gold); font-size:13px; }
.vcard h4{ font-family:var(--serif-jp); font-weight:500; font-size:18px; color:var(--ink); margin-bottom:12px; }
.vcard p{ font-size:13px; color:var(--mocha-deep); line-height:2; }
.vcard__who{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); }
.vcard__av{ width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--taupe),var(--sand-deep)); flex:none; }
.vcard__who span{ font-size:11px; letter-spacing:.1em; color:var(--mocha); }

/* ---------- 16. ACCESS ---------- */
.access{ padding:clamp(80px,12vw,150px) 0; background:var(--cream-2); }
.access__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); align-items:center; margin-top:clamp(30px,5vw,40px); }
.access__media{ aspect-ratio:4/3; position:relative; }
.access__media .ph{ position:absolute; inset:0; }
.access__info dl{ display:grid; grid-template-columns:auto 1fr; gap:18px 26px; margin:26px 0 34px; }
.access__info dt{ font-family:var(--serif-en); font-size:11px; letter-spacing:.2em; color:var(--gold-ink); padding-top:3px; }
.access__info dd{ font-size:14px; color:var(--espresso); line-height:1.8; }
.access__name{ font-family:var(--serif-en); font-size:30px; letter-spacing:.1em; color:var(--espresso); }
.access__name small{ display:block; font-family:var(--sans-jp); font-size:12px; letter-spacing:.3em; color:var(--mocha); margin-top:8px; }

/* ---------- 17. FINAL CTA ---------- */
.final{ position:relative; padding:clamp(80px,12vw,140px) var(--gutter); overflow:hidden; background:linear-gradient(135deg,var(--mocha) 0%, var(--mocha-deep) 55%, var(--espresso) 100%); color:var(--cream); text-align:center; }
.final::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 50% 0%, rgba(216,193,147,.32), transparent 65%); }
.final__inner{ position:relative; z-index:2; max-width:760px; margin-inline:auto; }
.final__off{ display:inline-flex; align-items:baseline; gap:10px; font-family:var(--serif-en); margin-bottom:18px; }
.final__off b{ font-size:clamp(56px,11vw,120px); line-height:.9; color:var(--gold-bright); }
.final__off span{ font-size:clamp(20px,4vw,34px); letter-spacing:.1em; }
.final__off em{ font-style:normal; font-family:var(--sans-jp); font-size:13px; letter-spacing:.3em; align-self:flex-start; border:1px solid var(--gold-soft); color:var(--gold-bright); padding:5px 12px; border-radius:30px; }
.final h2{ font-family:var(--serif-jp); font-weight:500; font-size:clamp(24px,4vw,40px); letter-spacing:.06em; margin-bottom:16px; }
.final p{ font-size:14px; letter-spacing:.1em; color:rgba(250,246,240,.85); margin-bottom:40px; }
.final__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn--light{ background:var(--cream); color:var(--espresso); box-shadow:0 16px 34px -14px rgba(0,0,0,.5); }
.btn--light:hover{ transform:translateY(-3px); box-shadow:0 24px 44px -16px rgba(0,0,0,.55); }
.btn--lined{ border:1px solid rgba(250,246,240,.5); color:var(--cream); }
.btn--lined:hover{ background:rgba(250,246,240,.12); transform:translateY(-3px); }
.final__contacts{ display:flex; gap:34px; justify-content:center; flex-wrap:wrap; margin-top:42px; }
.fcontact{ display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.12em; color:rgba(250,246,240,.85); }
.fcontact svg{ width:18px; height:18px; stroke:var(--gold-bright); }

/* ---------- 18. FOOTER ---------- */
.footer{ background:var(--ink); color:rgba(250,246,240,.74); padding:64px var(--gutter) 30px; }
.footer__top{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-start; padding-bottom:38px; border-bottom:1px solid rgba(250,246,240,.1); }
.footer__brand .brand__name{ color:var(--cream); }
.footer__brand p{ font-size:12px; line-height:2; margin-top:16px; max-width:320px; }
.footer__nav{ display:flex; gap:46px; flex-wrap:wrap; }
.footer__col h5{ font-family:var(--sans-en); font-size:10px; letter-spacing:.3em; color:var(--gold-soft); margin-bottom:16px; }
.footer__col a{ display:block; font-size:12px; padding:5px 0; transition:color .3s; }
.footer__col a:hover{ color:var(--cream); }
.footer__bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:26px; font-family:var(--sans-en); font-size:10px; letter-spacing:.18em; }

/* ---------- 19. Sticky mobile CTA ---------- */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:6500; display:none; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(250,246,240,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 -2px 20px -6px rgba(94,76,55,.3); transform:translateY(120%); transition:transform .5s var(--ease); }
.sticky-cta.show{ transform:none; }
.sticky-cta a{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:14px; border-radius:40px; font-size:13px; letter-spacing:.06em; }
.sticky-cta .s-line{ background:#06C755; color:#fff; }
.sticky-cta .s-resv{ background:linear-gradient(135deg,var(--mocha),var(--mocha-deep)); color:#fff; }
.sticky-cta svg{ width:16px; height:16px; }

/* ---------- 20. Section index dots ---------- */
.dots{ position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:6000; display:flex; flex-direction:column; gap:14px; }
.dots button{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:.3s var(--ease); }
.dots button.active{ background:var(--gold); transform:scale(1.5); }
.dots button:hover{ background:var(--mocha); }

/* ---------- 21. Accessibility: skip link + focus ---------- */
.skip{ position:absolute; left:-9999px; top:0; z-index:9999; background:var(--espresso); color:var(--cream); padding:12px 20px; border-radius:0 0 10px 0; font-size:13px; letter-spacing:.08em; }
.skip:focus{ left:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
*:focus:not(:focus-visible){ outline:none; }
.btn:focus-visible,.nav__cta:focus-visible{ outline-offset:4px; }

/* ---------- 22. RESERVATION FLOW (ご予約の流れ) ---------- */
.flow{ padding:clamp(80px,12vw,150px) 0; }
.flow__steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(40px,6vw,64px); position:relative; }
.flow__steps::before{ content:""; position:absolute; top:46px; left:16%; right:16%; height:1px; background:repeating-linear-gradient(90deg,var(--taupe) 0 6px,transparent 6px 12px); z-index:0; }
.fstep{ position:relative; z-index:1; text-align:center; }
.fstep__no{ width:92px; height:92px; margin:0 auto 22px; border-radius:50%; background:var(--cream); border:1px solid var(--line); display:grid; place-content:center; position:relative; transition:transform .5s var(--ease), border-color .5s; }
.fstep:hover .fstep__no{ transform:translateY(-6px); border-color:var(--gold); }
.fstep__no svg{ width:32px; height:32px; stroke:var(--mocha-deep); }
.fstep__badge{ position:absolute; top:-8px; right:-8px; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); color:var(--white); font-family:var(--serif-en); font-size:15px; display:grid; place-content:center; box-shadow:0 6px 14px -6px rgba(184,153,94,.9); }
.fstep h3{ font-family:var(--serif-jp); font-weight:500; font-size:18px; color:var(--ink); margin-bottom:10px; }
.fstep p{ font-size:13px; color:var(--mocha-deep); line-height:1.95; max-width:240px; margin-inline:auto; }
.fstep__en{ display:block; font-family:var(--sans-en); font-size:10px; letter-spacing:.3em; color:var(--gold-ink); margin-bottom:8px; }

/* ---------- 23. FAQ (accordion) ---------- */
.faq{ padding:clamp(80px,12vw,150px) 0; background:var(--cream-2); }
.faq__list{ max-width:760px; margin:clamp(36px,5vw,52px) auto 0; }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px; padding:26px 6px; font-family:var(--serif-jp); font-size:clamp(15px,2vw,18px); color:var(--ink); transition:color .3s; }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--gold); }
.faq__item summary .q{ font-family:var(--serif-en); font-size:18px; color:var(--gold); flex:none; }
.faq__item summary .ico{ margin-left:auto; flex:none; width:18px; height:18px; position:relative; transition:transform .4s var(--ease); }
.faq__item summary .ico::before,.faq__item summary .ico::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--mocha); }
.faq__item summary .ico::before{ width:18px; height:1.5px; }
.faq__item summary .ico::after{ width:1.5px; height:18px; transition:transform .4s var(--ease); }
.faq__item[open] summary .ico::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__item[open] summary{ color:var(--gold); }
.faq__a{ overflow:hidden; }
.faq__a p{ padding:0 6px 28px 42px; font-size:13.5px; color:var(--mocha-deep); line-height:2; }
.faq__item[open] .faq__a{ animation:faqOpen .5s var(--ease); }
@keyframes faqOpen{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* ---------- 21. Responsive ---------- */
@media (max-width:980px){
  .nav{ position:fixed; inset:0 0 0 auto; width:min(78vw,340px); flex-direction:column; justify-content:center; gap:28px; background:var(--cream); padding:40px; transform:translateX(100%); transition:transform .5s var(--ease); box-shadow:-20px 0 60px -30px rgba(0,0,0,.4); }
  .nav.open{ transform:none; }
  .nav__toggle{ display:block; z-index:7100; }
  .nav__toggle.open span:nth-child(1){ top:9px; transform:rotate(45deg); }
  .nav__toggle.open span:nth-child(2){ opacity:0; }
  .nav__toggle.open span:nth-child(3){ top:9px; transform:rotate(-45deg); }
  .hero__inner{ grid-template-columns:1fr; gap:40px; }
  .hero__media{ order:2; max-width:440px; margin-inline:auto; width:100%; }
  .hero__copy{ order:1; }
  .hero__vtext{ display:none; }
  .features{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; gap:50px; }
  .feature__media{ aspect-ratio:16/11; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); gap:40px 12px; }
  .stats__grid .stat:nth-child(2){ border-right:none; }
  .voice__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .access__grid{ grid-template-columns:1fr; }
  .flow__steps{ grid-template-columns:1fr; max-width:360px; margin-inline:auto; gap:34px; }
  .flow__steps::before{ display:none; }
  .dots{ display:none; }
}
@media (max-width:640px){
  :root{ --gutter:20px; }
  .header{ padding:16px 20px; }
  .menu__row{ grid-template-columns:1fr auto; align-items:center; row-gap:10px; padding:20px 4px; }
  .menu__no{ display:none; }
  .menu__name{ grid-column:1 / -1; }
  .menu__was{ grid-column:1; align-self:center; }
  .menu__now{ grid-column:2; text-align:right; align-self:center; }
  .sticky-cta{ display:flex; }
  .hero__floatcard{ left:8px; bottom:8px; padding:12px 16px; }
  .hero__badges{ gap:8px; }
  .badge{ padding:14px 6px; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .marquee__item{ font-size:15px; }
  .final__contacts{ gap:18px; }
}