// OTA NOW — Private Sauna special page (cinematic dark)
// Showcases the in-suite private sauna. Real photos from /images.

const IMG = (typeof window !== 'undefined' && window.__IMG_BASE) || 'images';
const RES = (typeof window !== 'undefined' && window.__resources) || {};
const L = (f) => RES[f] || `${IMG}/${f}`;
const RES_URL = 'index.html#tripla-slot'; // ホームの予約バー（tripla）へ誘導

const HOTEL = { nameJa:'太田ナウリゾートホテル', tel:'0276-49-2111', access:'東武伊勢崎線 太田駅 南口より徒歩5分' };

const NAV = [
  { ja:'トップ',        en:'Top',      href:'index.html' },
  { ja:'客室',          en:'Rooms',    href:'index.html#rooms' },
  { ja:'サウナスイート', en:'Sauna',    href:'sauna.html' },
  { ja:'朝食',          en:'Breakfast',href:'index.html#breakfast' },
  { ja:'館内・施設',    en:'Facility', href:'index.html#facility' },
  { ja:'宴会・会議',    en:'Banquet',  href:'banquet.html' },
  { ja:'宿泊プラン',    en:'Plans',    href:'index.html#plans' },
  { ja:'アクセス',      en:'Access',   href:'index.html#access' },
];

// The ととのう ritual — 3 steps, all within the suite
const RITUAL = [
  { no:'I',   en:'Heat',  ja:'蒸す',   d:'3種のアロマから香りを選び、セルフロウリュ。好きなだけ蒸気を立ち上げ、芯まで温める。', img:L('sauna-loyly.jpg') },
  { no:'II',  en:'Cool',  ja:'冷ます', d:'温度をカスタムできる水風呂へ。自分の「気持ちいい」を、その日の体調に合わせて。', img:L('sauna-bucket.jpg') },
  { no:'III', en:'Rest',  ja:'憩う',   d:'オーバーヘッドシャワーを浴び、客室で外気浴のように、ゆっくりと身体を休める。', img:L('suite-single-night.jpg') },
];

// The 6 details (こだわり)
const DETAILS = [
  { k:'01', t:'プライベートサウナ',         d:'共用ではなく、客室内に備わる完全個室。2名で入ってもゆとりある広さで、人目を気にせず「ととのう」。' },
  { k:'02', t:'温度カスタムの水風呂',       d:'好みの温度に設定できる水風呂。キンと締めるも、まろやかに整えるも、思いのまま。' },
  { k:'03', t:'3種のアロマ × セルフロウリュ', d:'香りを選び、自分のペースでロウリュ。立ち上る蒸気とアロマで、五感から整う。' },
  { k:'04', t:'サウナハット・ポンチョ',     d:'頭と身体を守るギアを完備。手ぶらでも、本格的に楽しめる。' },
  { k:'05', t:'オロポ & Bluetoothスピーカー', d:'好きな音楽と、サウナーの定番ドリンク。ととのいの時間を、思いのままに。' },
  { k:'06', t:'オーバーヘッドシャワー',     d:'雨のように頭上から落ちるシャワー。火照った身体を、一気にリセット。' },
];

const GALLERY = [
  { src:L('sauna-room.jpg'),        cap:'Private sauna' },
  { src:L('sauna-loyly.jpg'),       cap:'Self löyly' },
  { src:L('sauna-bucket.jpg'),      cap:'Bucket & ladle' },
  { src:L('suite-twin-day.jpg'),    cap:'Suite · day' },
  { src:L('sauna-gear.jpg'),    cap:'Sauna gear · オロポ' },
  { src:L('western-suite-night.jpg'),cap:'After hours' },
];

const PLANS = [
  { k:'Overnight', ja:'ご宿泊', h:'16:00 IN — 翌10:00 OUT', p:'¥ 24,200〜', s:'プライベートサウナ付スイートに泊まる。' },
  { k:'Day use',   ja:'日帰り', h:'13:00 — 21:00 のうち最大数時間', p:'¥ 24,200〜', s:'泊まらずに、サウナだけ味わう。' },
];

// === SHARED ================================================================
const Nav = () => {
  const [open, setOpen] = React.useState(false);
  return (
  <nav className={`nav ${open ? 'open' : ''}`}>
    <a className="brand" href="index.html">
      <strong>OTA <em>now</em></strong>
      <span className="brand-tag">Resort Hotel — Ota, Gunma</span>
    </a>
    <ul className={open ? 'open' : ''}>
      {NAV.map((n,i)=>(
        <li key={i}><a href={n.href} className={n.en==='Sauna'?'on':''} onClick={()=>setOpen(false)}><span className="nl-en">{n.en}</span>{n.ja}</a></li>
      ))}
    </ul>
    <div className="nav-right">
      <span className="lang">JP / EN</span>
      <a href={RES_URL} className="res">ご予約</a>
      <button className="nav-burger" onClick={()=>setOpen(o=>!o)} aria-label="メニュー">{open ? '✕' : '☰'}</button>
    </div>
  </nav>
  );
};

const Hero = () => (
  <header className="hero" id="top">
    <img className="hero-img" src={L('sauna-loyly.jpg')} alt="プライベートサウナ" />
    <div className="hero-grad"></div>
    <div className="hero-frame"></div>
    <div className="hero-coverlines">
      <span>Private Sauna Suite</span><span>1 室 限 定</span><span>整う · ととのう</span>
    </div>
    <div className="hero-center">
      <div className="hc-eyebrow">Private Sauna · in your suite</div>
      <h1>Just<br/><em>breathe.</em></h1>
      <div className="hc-jp">整 う を 、 ひ と り 占 め 。</div>
    </div>
    <div className="hero-scroll"><span>Scroll to explore</span></div>
  </header>
);

const Intro = () => (
  <section className="intro">
    <div className="oh-kicker oh-c"><span className="oh-en sm">Concept</span><span className="oh-ja">この一室のために</span></div>
    <h2 className="intro-h">サウナは、<br/>誰にも譲りたくない。</h2>
    <p className="intro-p">大浴場でも、共用サウナでもない。客室の中だけに用意した、あなただけのプライベートサウナ。温度も、香りも、音も、時間も——すべてを自分のものにして、心ゆくまで「ととのう」。太田ナウが、この一室にこだわり抜いた理由です。</p>
    <div className="intro-note">※客室内に備わるプライベートサウナです（スイート1室限定／定員2名）。共用の大浴場・サウナ・温泉はございません。</div>
  </section>
);

const Ritual = () => (
  <section className="ritual">
    <div className="oh oh-light">
      <div className="oh-kicker"><span className="oh-num">№ 01</span><span className="oh-ja">整いの作法</span></div>
      <h2 className="oh-en">The ritual</h2>
      <div className="oh-title">蒸して、冷まして、憩う。</div>
    </div>
    <div className="steps">
      {RITUAL.map((r,i)=>(
        <div className="st" key={i}>
          <div className="st-img"><img src={r.img} alt={r.ja} /><span className="st-no">{r.no}</span></div>
          <div className="st-en">{r.en}</div>
          <h3>{r.ja}</h3>
          <p>{r.d}</p>
        </div>
      ))}
    </div>
  </section>
);

const Details = () => (
  <section className="details">
    <div className="oh">
      <div className="oh-kicker"><span className="oh-num">№ 02</span><span className="oh-ja">こだわり</span></div>
      <h2 className="oh-en">Six details</h2>
      <div className="oh-title">細部まで、整えた。</div>
    </div>
    <div className="dets">
      {DETAILS.map(d=>(
        <div className="det" key={d.k}>
          <div className="det-k">№ {d.k}</div>
          <h3>{d.t}</h3>
          <p>{d.d}</p>
        </div>
      ))}
    </div>
  </section>
);

const Gallery = () => (
  <section className="galleryband">
    <div className="oh oh-light">
      <div className="oh-kicker"><span className="oh-num">№ 03</span><span className="oh-ja">ギャラリー</span></div>
      <h2 className="oh-en">In the room</h2>
    </div>
    <div className="gal">
      {GALLERY.map((g,i)=>(
        <figure className={`gc gc-${i}`} key={i}>
          <img src={g.src} alt={g.cap} />
          <figcaption>№ {String(i+1).padStart(2,'0')} — {g.cap}</figcaption>
        </figure>
      ))}
    </div>
  </section>
);

const Plans = () => (
  <section className="plansband">
    <div className="oh">
      <div className="oh-kicker"><span className="oh-num">№ 04</span><span className="oh-ja">ご利用方法</span></div>
      <h2 className="oh-en">Stay or visit</h2>
      <div className="oh-title">泊まっても、日帰りでも。</div>
    </div>
    <div className="plans">
      {PLANS.map((p,i)=>(
        <div className="pl" key={i}>
          <div className="pl-k">{p.k}</div>
          <div className="pl-ja">{p.ja}</div>
          <div className="pl-h">{p.h}</div>
          <div className="pl-p">{p.p}<small>(税込)</small></div>
          <p>{p.s}</p>
        </div>
      ))}
    </div>
    <div className="plans-cta">
      <a className="reserve" href={RES_URL}>サウナスイートを予約する <i>→</i></a>
      <div className="rate"><span className="badge">Best&nbsp;Rate</span>公式サイトからのご予約が一番おトクです。</div>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="f-cta">
      <div className="oh-kicker oh-c"><span className="oh-en sm">Reservation</span><span className="oh-ja">ご予約</span></div>
      <h4>Come <em>get well.</em></h4>
      <a className="f-resbtn" href={RES_URL}>空室検索・ご予約 <i>→</i></a>
    </div>
    <div className="f-top">
      <div className="f-brand">
        <strong>OTA <em>now</em></strong>
        <div className="ja">大人の街・太田で、ととのう非日常を。</div>
        <div className="f-addr">{HOTEL.access}<br/>TEL {HOTEL.tel}</div>
      </div>
      <div className="col"><h5>Sauna</h5>
        <a href="#top">プライベートサウナ</a><a href="#top">整いの作法</a><a href="#top">こだわり</a></div>
      <div className="col"><h5>Hotel</h5>
        <a href="index.html#rooms">客室</a><a href="banquet.html">宴会・会議</a><a href="index.html#access">アクセス</a></div>
      <div className="col"><h5>Reserve</h5>
        <a href={RES_URL}>空室検索</a><a href="reservation-update.html">予約確認</a></div>
    </div>
    <div className="f-bot">
      <span>© {new Date().getFullYear()} 太田ナウリゾートホテル</span>
      <span>Ota · Gunma — JP</span>
      <span>宿泊約款 · プライバシーポリシー</span>
    </div>
  </footer>
);


const MobileCTA = () => (
  <div className="mcta" role="navigation" aria-label="予約">
    <a className="mcta-tel" href="tel:0276-49-2111" aria-label="電話で予約・相談">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3A19.5 19.5 0 0 1 5.2 13 19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z"></path></svg>
      <span>電話</span>
    </a>
    <a className="mcta-res" href="index.html#tripla-slot">サウナスイートを予約 <i>→</i></a>
  </div>
);

const App = () => (
  <div className="va">
    <style>{css}</style>
    <Nav /><Hero /><Intro /><Ritual /><Details /><Gallery /><Plans /><Footer /><MobileCTA />
  </div>
);

const css = `
  .va{font-family:'Noto Sans JP',system-ui,sans-serif;background:var(--dark);color:#F2ECE1;
      --dark:#0B0A09;--dark2:#13110F;--paper:#F7F3EC;--ink:#1C1A17;--muted:#8d857a;
      --accent:#C79A5E;--gold:#E0B274;--rule:rgba(242,236,225,.14);
      max-width:1440px;margin:0 auto;position:relative;overflow-x:clip}
  .va a{color:inherit;text-decoration:none}

  /* MOBILE FIXED BOTTOM CTA */
  .va .mcta{display:none}
  @media(max-width:640px){
    .va .mcta{position:fixed;left:0;right:0;bottom:0;z-index:85;display:grid;grid-template-columns:92px 1fr;gap:10px;
      padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
      background:rgba(11,10,9,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(224,178,116,.3)}
    .va .mcta a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px}
    .va .mcta-tel{border:1px solid #F2ECE159;color:#F2ECE1;font-family:'Shippori Mincho',serif;font-size:13px}
    .va .mcta-res{background:var(--gold);color:#1F1B16;font-family:'Shippori Mincho',serif;font-weight:600;font-size:14px;letter-spacing:.04em}
    .va .mcta-res i{font-style:normal}
    .va{padding-bottom:74px}
  }

  /* tripla — hide the auto-injected floating header search bar so it doesn't overlap the hero. Booking via the ご予約 buttons + tripla's floating launcher. */
  #tripla-searching-app [class*="search-widget-wrapper"]{display:none !important}
  .va h1,.va h2,.va h3,.va h4{margin:0}
  .va img{display:block}

  /* NAV */
  .va .nav{position:absolute;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 48px}
  .va .brand strong{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;letter-spacing:.04em;color:#fff;font-weight:500;line-height:1}
  .va .brand-tag{display:block;margin-top:5px;font-size:9px;letter-spacing:.28em;color:rgba(255,255,255,.65);text-transform:uppercase}
  .va .nav ul{display:flex;gap:30px;list-style:none;padding:0;margin:0;justify-content:center}
  .va .nav ul a{font-size:13px;color:#fff;letter-spacing:.06em;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.9}
  .va .nav ul a.on{opacity:1}.va .nav ul a.on .nl-en{color:var(--gold)}
  .va .nl-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.65)}
  .va .nav-right{display:flex;gap:16px;justify-content:flex-end;align-items:center}
  .va .lang{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.18em}
  .va .res{font-size:12px;letter-spacing:.18em;padding:12px 24px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;transition:.2s}
  .va .res:hover{background:#fff;color:var(--ink)}
  .va .nav-burger{display:none;background:transparent;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:6px 8px;text-shadow:0 1px 10px rgba(0,0,0,.5)}

  /* HERO */
  .va .hero{position:relative;height:92vh;min-height:640px;max-height:940px;overflow:hidden;background:#000}
  .va .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.66) contrast(1.05);animation:herodrift 26s ease-in-out infinite alternate;will-change:transform}
  @keyframes herodrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.1) translate(-1.2%,-.8%)}}
  @media (prefers-reduced-motion: reduce){ .va .hero-img{animation:none} }
  .va .hero-grad{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%,rgba(11,10,9,.1) 0%,rgba(11,10,9,.55) 60%,rgba(11,10,9,.92) 100%)}
  .va .hero-frame{position:absolute;inset:22px;border:1px solid rgba(255,255,255,.22);z-index:2;pointer-events:none}
  .va .hero-coverlines{position:absolute;top:104px;left:50px;right:50px;z-index:2;display:flex;justify-content:space-between;color:rgba(255,255,255,.8);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase}
  .va .hero-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;z-index:2}
  .va .hc-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
  .va .hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:140px;line-height:.9;letter-spacing:.01em}
  .va .hero h1 em{font-style:italic;color:#fff}
  .va .hc-jp{font-family:'Shippori Mincho',serif;font-size:17px;letter-spacing:.5em;margin-top:28px;padding-left:.5em;color:rgba(255,255,255,.92)}
  .va .hero-scroll{position:absolute;right:48px;bottom:50px;z-index:2;color:#fff;writing-mode:vertical-rl;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
  .va .hero-scroll:after{content:"";display:block;width:1px;height:48px;background:linear-gradient(rgba(255,255,255,.7),transparent);margin-top:10px}

  /* SECTION + HEAD */
  .va section{padding:130px 56px}
  .va .oh{text-align:center;margin:0 auto 76px;max-width:820px}
  .va .oh-kicker{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}
  .va .oh-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold);letter-spacing:.2em}
  .va .oh-ja{font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.34em;color:var(--muted)}
  .va .oh-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:72px;line-height:.95;color:var(--ink)}
  .va .oh-en.sm{font-size:20px;font-weight:400;color:var(--accent)}
  .va .oh-title{font-family:'Shippori Mincho',serif;font-size:30px;font-weight:600;margin-top:20px;letter-spacing:.1em;line-height:1.55;color:var(--ink)}
  .va .oh-light .oh-en,.va .oh-light .oh-title{color:#F2ECE1}
  .va .oh-light .oh-ja{color:rgba(242,236,225,.6)}

  /* INTRO (dark) */
  .va .intro{text-align:center;padding:140px 56px;background:var(--dark2)}
  .va .oh-c{justify-content:center}
  .va .oh-c .oh-ja{color:var(--muted)} .va .oh-en.sm{color:var(--accent)}
  .va .intro-h{font-family:'Shippori Mincho',serif;font-size:46px;font-weight:600;line-height:1.5;letter-spacing:.06em;color:#F2ECE1}
  .va .intro-p{font-size:15px;line-height:2.2;color:rgba(242,236,225,.8);max-width:660px;margin:32px auto 0;text-wrap:pretty}
  .va .intro-note{margin:40px auto 0;max-width:620px;font-family:'Shippori Mincho',serif;font-size:12.5px;line-height:1.9;color:var(--muted);border-top:1px solid var(--rule);padding-top:24px}

  /* RITUAL */
  .va .ritual{background:var(--dark);padding-top:130px}
  .va .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;max-width:1180px;margin:0 auto}
  .va .st-img{position:relative;height:420px;overflow:hidden;margin-bottom:24px;background:#1a1714}
  .va .st-img img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.82);transition:transform .9s ease}
  .va .st:hover .st-img img{transform:scale(1.05)}
  .va .st-no{position:absolute;left:18px;top:14px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:40px;color:#fff;mix-blend-mode:difference}
  .va .st-en{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  .va .st h3{font-family:'Shippori Mincho',serif;font-size:28px;font-weight:600;letter-spacing:.1em;margin-bottom:14px}
  .va .st p{font-size:13.5px;line-height:1.95;color:rgba(242,236,225,.74);margin:0}

  /* DETAILS (paper) */
  .va .details{background:var(--paper);color:var(--ink)}
  .va .details .oh-num{color:var(--accent)}.va .details .oh-ja{color:var(--muted)}
  .va .dets{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(28,26,23,.12);border:1px solid rgba(28,26,23,.12);max-width:1180px;margin:0 auto}
  .va .det{background:var(--paper);padding:44px 34px}
  .va .det-k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:18px}
  .va .det h3{font-family:'Shippori Mincho',serif;font-size:21px;font-weight:600;letter-spacing:.04em;margin-bottom:14px;line-height:1.5}
  .va .det p{font-size:13.5px;line-height:1.95;color:#5b544b;margin:0}

  /* GALLERY (dark, asymmetric) */
  .va .galleryband{background:var(--dark2)}
  .va .gal{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:10px;max-width:1240px;margin:0 auto}
  .va .gc{position:relative;margin:0;overflow:hidden;background:#1a1714}
  .va .gc img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.86)}
  .va .gc figcaption{position:absolute;left:12px;bottom:10px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;mix-blend-mode:difference}
  .va .gc-0{grid-column:1/span 3;grid-row:1/span 2}
  .va .gc-1{grid-column:4/span 3;grid-row:1/span 1}
  .va .gc-2{grid-column:4/span 1;grid-row:2/span 1}
  .va .gc-3{grid-column:5/span 2;grid-row:2/span 1}
  .va .gc-4{grid-column:1/span 4;grid-row:3/span 1}
  .va .gc-5{grid-column:5/span 2;grid-row:3/span 1}

  /* PLANS (paper) */
  .va .plansband{background:var(--paper);color:var(--ink)}
  .va .plansband .oh-num{color:var(--accent)}.va .plansband .oh-ja{color:var(--muted)}
  .va .plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}
  .va .pl{border:1px solid rgba(28,26,23,.14);padding:40px 36px;background:#fff}
  .va .pl-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .va .pl-ja{font-family:'Shippori Mincho',serif;font-size:22px;font-weight:600;margin:10px 0 6px;letter-spacing:.06em}
  .va .pl-h{font-family:'Shippori Mincho',serif;font-size:13px;color:var(--muted);margin-bottom:18px}
  .va .pl-p{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:300;letter-spacing:.01em}
  .va .pl-p small{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--muted);margin-left:8px}
  .va .pl p{font-size:13px;line-height:1.8;color:#5b544b;margin:14px 0 0;border-top:1px solid rgba(28,26,23,.12);padding-top:16px}
  .va .plans-cta{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:56px}
  .va .reserve{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);padding:20px 44px;font-family:'Shippori Mincho',serif;font-size:15px;letter-spacing:.1em;transition:.2s}
  .va .reserve i{font-style:normal;transition:transform .2s}
  .va .reserve:hover{background:var(--accent);color:#fff}.va .reserve:hover i{transform:translateX(5px)}
  .va .rate{display:flex;align-items:center;gap:14px;font-family:'Shippori Mincho',serif;font-size:13.5px;color:#5b544b}
  .va .badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:7px 12px}

  /* FOOTER */
  .va footer{background:var(--dark);color:#F2ECE1}
  .va .f-cta{text-align:center;padding:96px 56px;border-bottom:1px solid var(--rule)}
  .va .f-cta .oh-en{color:#F2ECE1}.va .f-cta .oh-ja{color:var(--muted)}.va .f-cta .oh-en.sm{color:var(--accent)}
  .va footer h4{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:62px;font-weight:300;margin:6px 0 26px}
  .va footer h4 em{font-style:italic;color:var(--gold)}
  .va .f-resbtn{display:inline-flex;align-items:center;gap:12px;background:#F2ECE1;color:var(--dark);padding:18px 40px;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.08em;transition:.2s}
  .va .f-resbtn i{font-style:normal;transition:transform .2s}
  .va .f-resbtn:hover{background:var(--gold)}.va .f-resbtn:hover i{transform:translateX(5px)}
  .va .f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding:78px 56px 60px}
  .va .f-brand strong{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;font-weight:500;display:block}
  .va .f-brand .ja{font-family:'Shippori Mincho',serif;color:rgba(242,236,225,.78);font-size:14px;margin:14px 0 20px;line-height:1.8}
  .va .f-addr{font-size:12px;line-height:1.9;color:rgba(242,236,225,.5);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
  .va .col h5{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(242,236,225,.5);letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
  .va .col a{display:block;color:#F2ECE1;font-size:14px;margin-bottom:11px;font-family:'Shippori Mincho',serif;transition:.15s}
  .va .col a:hover{color:var(--gold)}
  .va .f-bot{display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding:26px 56px;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(242,236,225,.5);letter-spacing:.18em;text-transform:uppercase}

  @media(max-width:1080px){
    .va .nav{padding:18px 24px}
    .va .nav-burger{display:flex}
    .va .nav ul{display:none}
    .va .nav ul.open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:rgba(11,10,9,.97);backdrop-filter:blur(8px);padding:6px 0;border-top:1px solid rgba(224,178,116,.2);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
    .va .nav ul.open li{width:100%}
    .va .nav ul.open a{flex-direction:row;justify-content:flex-start;align-items:baseline;gap:12px;padding:15px 24px;width:100%}
    .va .nav ul.open .nl-en{min-width:74px}
    .va .hero h1{font-size:88px}
    .va .steps,.va .dets,.va .plans{grid-template-columns:1fr}
    .va .gal{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
    .va .gc{grid-column:auto !important;grid-row:auto !important}
  }

  @media(max-width:640px){
    .va{overflow-x:hidden}
    .va .nav{padding:16px 16px}
    .va .brand-tag,.va .lang{display:none}
    .va .brand strong{font-size:20px}
    .va .hero{height:auto;min-height:0;aspect-ratio:3/4;max-height:none}
    .va .hero h1{font-size:56px}
    .va .hc-eyebrow{font-size:10px;letter-spacing:.26em;margin-bottom:16px}
    .va .hc-jp{font-size:13px;letter-spacing:.3em;margin-top:18px}
    .va .hero-frame{inset:12px}
    .va .hero-coverlines,.va .hero-scroll{display:none}

    .va section,.va .intro,.va .ritual{padding:60px 18px}
    .va .oh{margin:0 auto 40px}
    .va .oh-kicker{gap:10px;flex-wrap:wrap}
    .va .oh-en{font-size:40px}
    .va .oh-en.sm{font-size:16px}
    .va .oh-title{font-size:20px;margin-top:14px;line-height:1.5}
    .va .intro-h{font-size:27px;line-height:1.5}
    .va .intro-p{font-size:13.5px;line-height:1.95;margin-top:24px}
    .va .intro-note{font-size:12px;margin-top:28px}

    .va .steps{gap:40px}
    .va .st-img{height:300px;margin-bottom:18px}
    .va .st h3{font-size:24px}
    .va .det{padding:32px 24px}

    .va .gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px}

    .va .pl{padding:32px 26px}
    .va .pl-p{font-size:40px}
    .va .plans-cta{margin-top:40px}
    .va .reserve{width:100%;justify-content:center;box-sizing:border-box;padding:18px}
    .va .rate{justify-content:center;flex-wrap:wrap;gap:10px;text-align:center}

    .va .f-cta{padding:56px 18px}
    .va footer h4{font-size:38px}
    .va .f-resbtn{width:100%;justify-content:center;box-sizing:border-box}
    .va .f-top{grid-template-columns:1fr 1fr;gap:28px 24px;padding:48px 18px 40px}
    .va .f-brand{grid-column:1/-1}
    .va .f-bot{flex-direction:column;gap:8px;padding:24px 18px;text-align:center}
  }
`;

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
