// OTA NOW Resort Hotel — o-inn inspired (bright, location & stay forward)
// All copy and images are real, sourced from https://hpdsp.jp/otanowresorthotel/
// Photography: real professional shoot (2024-11), stored locally in /images

// === REAL DATA =============================================================
const CDN = 'https://cdn.r-corona.jp/prd.jln.r-corona.jp/assets/site_files/6s8l8evh';
const IMG = (typeof window !== 'undefined' && window.__IMG_BASE) || 'images';
// Standalone-bundle resolver: uses inlined blob URLs when present, else normal paths.
const RES = (typeof window !== 'undefined' && window.__resources) || {};
const L = (f) => RES[f] || `${IMG}/${f}`;          // local image, key = filename
const C = (id, url) => RES[id] || url;             // cdn image, key = custom id
const RES_URL = '#tripla-slot'; // 予約バー内に配置したtripla検索バーへスクロール（下記の再配置スクリプトが実体を移動）

const HOTEL = {
  nameJa:  '太田ナウリゾートホテル',
  nameEn:  'OTA NOW RESORT HOTEL',
  taglineJa: '大人の街・太田で、ととのう非日常を。',
  addr:    '〒373-0851 群馬県太田市飯田町1267',
  tel:     '0276-49-2111',
  fax:     '0276-50-1171',
  access:  '東武伊勢崎線 太田駅 南口より徒歩5分',
  parking: '市役所前(西側) パークレポ駐車場 / 24時間最大 ¥500 / 45台',
};

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

const HERO_SLIDES_SAUNA = [
  { img:L('exterior.jpg'),           en:'OTA NOW RESORT HOTEL', cap:'東武伊勢崎線 太田駅 南口より 徒歩5分', scenery:true },
  { img:L('suite-twin-day.jpg'),     en:'Private Sauna Suite',  cap:'プライベートサウナ付スイート ・ 56㎡ ・ 1室限定' },
  { img:L('western-suite-night.jpg'),en:'Rooms — 全 77室',      cap:'本館 57室 / 別館アネックス 20室' },
  { img:L('sauna-loyly.jpg'),        en:'Self Löyly',           cap:'3種のアロマ × セルフロウリュ（客室内）' },
];
const HERO_SLIDES_BALANCED = [
  { img:L('exterior.jpg'),           en:'OTA NOW RESORT HOTEL', cap:'東武伊勢崎線 太田駅 南口より 徒歩5分', scenery:true },
  { img:L('western-suite-night.jpg'),en:'Rooms — 全 77室',      cap:'本館 57室 / 別館アネックス 20室' },
  { img:L('room-triple.jpg'),        en:'Comfortable Sleep',    cap:'ベッドにこだわった全77室' },
  { img:L('suite-twin-day.jpg'),     en:'Sauna Suite',          cap:'客室サウナ付スイート ・ 1室限定' },
];

// Sauna suite
const SUITE = {
  price:    '¥ 24,200〜',
  dayHours: '13:00 – 21:00',
  nightHours: '16:00 – 翌10:00',
  hero:     L('suite-twin-dusk.jpg'),
  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('sauna-gear.jpg'),         cap:'Sauna gear'      },
    { src:L('suite-single-night.jpg'),cap:'Lounge · night'  },
    { src:L('western-suite-night.jpg'),cap:'After hours'    },
  ],
};

const SAUNA_BULLETS = [
  { 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:'雨のように落ちるシャワーで一気にリフレッシュ。' },
];

// Stay — travel styles (o-inn "Stay" section)
const STAY = [
  { en:'Sauna',     ja:'ととのう週末に',     d:'一人旅・カップルで', img:L('suite-twin-dusk.jpg') },
  { en:'Business',  ja:'出張・ビジネスに',   d:'駅徒歩5分・連泊にも', img:L('room-double.jpg') },
  { en:'Couple',    ja:'記念日の旅に',       d:'ご夫婦・カップルで',  img:L('western-suite.jpg') },
  { en:'Long stay', ja:'住むように泊まる',   d:'別館アネックス',      img:L('room-double-retro.jpg') },
];

// Rooms
const ROOMS_MAIN = [
  { id:'sgl-s', ja:'喫煙シングル', en:'Single · Smoking',     size:'14㎡', cap:'1名', units:'17室', bed:'シモンズ社製マットレス 110cm × 1', smoke:'喫煙', img:L('room-single.jpg') },
  { id:'sgl-n', ja:'禁煙シングル', en:'Single · Non-smoking', size:'14㎡', cap:'1名', units:'31室', bed:'シモンズ社製マットレス 110cm × 1', smoke:'禁煙', img:L('room-double.jpg') },
  { id:'twn',   ja:'ツイン',       en:'Twin',                 size:'28㎡', cap:'2〜3名', units:'8室', bed:'ベッド2台 ＋ エキストラベッド対応可', smoke:'禁煙', img:L('room-twin-main.jpg') },
  { id:'ste',   ja:'サウナスイート',     en:'Sauna Suite',                size:'48㎡', cap:'2名', units:'1室', feature:'客室内プライベートサウナ付', bed:'ソフテックス社製 110cmリクライニングベッド × 2 ／ IKEA ソファダブルベッド × 1', smoke:'禁煙', img:L('western-suite.jpg') },
];
const ANNEX_ROOMS = [
  { id:'atw', ja:'別館ツイン',   en:'Annex · Twin',   size:'34㎡', cap:'2名', units:'8室',  bed:'ミニキッチン・冷蔵庫・洗濯機 完備', smoke:'禁煙', img:L('annex-twin.jpg') },
  { id:'adb', ja:'別館ダブル',   en:'Annex · Double', size:'34㎡', cap:'2名', units:'10室', bed:'ミニキッチン・冷蔵庫・洗濯機 完備', smoke:'禁煙・喫煙', img:L('room-double-retro.jpg') },
  { id:'afo', ja:'別館フォース', en:'Annex · Fourth', size:'34㎡', cap:'4名', units:'2室',  bed:'ミニキッチン・冷蔵庫・洗濯機 完備', smoke:'禁煙', img:L('annex-fourth.jpg') },
];

// Facility photo cards
const FACILITIES = [
  { ja:'フロント',             en:'Front Desk', d:'24時間スタッフが対応。チェックイン 16:00 / アウト 10:00。', img:C('fac-front', `${CDN}/1067525/4jqt_bw480h360.jpg`) },
  { ja:'ラウンジ',             en:'Lounge',     d:'本館1階。アメニティバイキングもこちらに。',                img:C('fac-lounge', `${CDN}/929901/mvuh_bw480h360.jpg`)   },
];

// Amenity icon grid (o-inn icon row) — sauna labeled as an in-suite feature, not a public bath
const AMENITIES = [
  { ic:'coffee',    t:'無料コーヒー\nコーナー' },
  { ic:'amenity',   t:'アメニティ\nバイキング' },
  { ic:'wifi',      t:'Wi-Fi 完備' },
  { ic:'parking',   t:'提携駐車場' },
  { ic:'clock',     t:'フロント 24h' },
  { ic:'laundry',   t:'コインランドリー\n(本館1台・別館は客室内)' },
  { ic:'vending',   t:'自動販売機' },
  { ic:'nosmoke',   t:'禁煙ルーム' },
  { ic:'sauna',     t:'客室サウナ\n(スイート1室)' },
  { ic:'kitchen',   t:'ミニキッチン\n(別館)' },
];

// Breakfast
const FOOD = {
  hero:  C('food-hero', `${CDN}/1152523/c8jw_bw1200h600.jpg`),
  hours: '7:00 – 9:30 (最終入場 9:00)',
  place: '本館1階 ロビー',
  price: '¥ 1,000 (税込)',
  style: 'セルフサービス',
  menu: [
    { t:'和朝食御膳',     d:'焼き魚・和惣菜・卵焼きなど、滋味あふれる和の朝ごはん。' },
    { t:'朝カレー',       d:'温かい特製カレーもお楽しみいただけます。' },
    { t:'ドリップコーヒー', d:'コーヒーショップ出身スタッフがこだわり抜いた、香り豊かな一杯。' },
    { t:'セルフサービス', d:'ジュース・牛乳・パン類などもご自由にどうぞ。' },
  ],
};

// Plans (honest — categories + the one real published price)
const PLANS = [
  { tag:'Room only', ja:'素泊まり',       t:'季節バリュープラン',       d:'ビジネスにも観光にも。16:00 IN / 10:00 OUT。ゆっくり休める客室で。', price:'' },
  { tag:'Breakfast', ja:'朝食付',         t:'焼き魚・朝カレーの和朝食付',     d:'焼き魚や和惣菜、温かい特製朝カレー。こだわりのドリップコーヒーとともに。', price:'' },
  { tag:'Sauna',     ja:'サウナスイート', t:'プライベートサウナ滞在',   d:'ととのう非日常。ご宿泊のほか、日帰り(13:00–21:00)もご利用いただけます。', price:'¥24,200〜' },
];

// === ICONS =================================================================
const Icon = ({name}) => {
  const p = {fill:'none', stroke:'currentColor', strokeWidth:1.4, strokeLinecap:'round', strokeLinejoin:'round'};
  const svg = {
    sauna:    <g {...p}><path d="M3 21h18M5 21V9l7-4 7 4v12"/><path d="M9 13c0-1 .8-1.4.8-2.4S9 9 9 9M13 13c0-1 .8-1.4.8-2.4S13 9 13 9"/></g>,
    coffee:   <g {...p}><path d="M4 8h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V8Z"/><path d="M17 9h2.5a2.5 2.5 0 0 1 0 5H17"/><path d="M8 3c-.5.8-.5 1.5 0 2.3M12 3c-.5.8-.5 1.5 0 2.3"/></g>,
    wifi:     <g {...p}><path d="M2 9.5a15 15 0 0 1 20 0M5 13a10 10 0 0 1 14 0M8 16.5a5 5 0 0 1 8 0"/><circle cx="12" cy="20" r=".6" fill="currentColor"/></g>,
    parking:  <g {...p}><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 17V8h3.5a2.5 2.5 0 0 1 0 5H9"/></g>,
    amenity:  <g {...p}><path d="M12 4v16M6 8c0 3 2 4 6 4s6-1 6-4M5 20h14"/><path d="M9 4h6"/></g>,
    laundry:  <g {...p}><rect x="5" y="3" width="14" height="18" rx="2"/><circle cx="12" cy="13" r="4"/><path d="M8 6h.5M11 6h.5"/></g>,
    vending:  <g {...p}><rect x="6" y="3" width="12" height="18" rx="1.5"/><path d="M9 6h2M9 9h2"/><rect x="9" y="14" width="6" height="4" rx="1"/></g>,
    clock:    <g {...p}><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></g>,
    nosmoke:  <g {...p}><rect x="3" y="13" width="15" height="4"/><path d="M21 13v4M18 13v4M5 4l14 14"/></g>,
    projector:<g {...p}><rect x="3" y="7" width="18" height="10" rx="2"/><circle cx="10" cy="12" r="3"/><path d="M17 11h.01"/></g>,
    kitchen:  <g {...p}><rect x="4" y="3" width="16" height="18" rx="1.5"/><path d="M4 9h16M8 5v2M11 5v2"/><circle cx="8" cy="15" r="2.2"/></g>,
  };
  return <svg viewBox="0 0 24 24" width="34" height="34" aria-hidden="true">{svg[name]}</svg>;
};

// === SHARED ================================================================

// o-inn style section header: number + English(italic) + Japanese, then Mincho title + lead
const OHead = ({num, en, ja, title, lead, light}) => (
  <div className={`oh ${light?'oh-light':''}`}>
    <div className="oh-kicker">
      {num && <span className="oh-num">№ {num}</span>}
      {ja && <span className="oh-ja">{ja}</span>}
    </div>
    {en && <h2 className="oh-en oh-en-lg">{en}</h2>}
    {title && <div className="oh-title">{title}</div>}
    {lead && <p className="oh-lead">{lead}</p>}
  </div>
);

const MoreBtn = ({children, href='#', light}) => (
  <a className={`morebtn ${light?'morebtn-light':''}`} href={href}>
    <span>{children}</span><i>→</i>
  </a>
);

// === SECTIONS ==============================================================

const Nav = () => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', f, { passive: true });
    f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  return (
  <nav className={`nav ${scrolled || open ? 'scrolled' : ''}`}>
    <a className="brand" href="#top">
      <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} 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 = ({slides, tagline}) => {
  const [i, setI] = React.useState(0);
  const [copyOn, setCopyOn] = React.useState(true);
  React.useEffect(() => {
    setI(0);
    const t = setInterval(() => setI(p => (p + 1) % slides.length), 6500);
    return () => clearInterval(t);
  }, [slides]);
  React.useEffect(() => {
    setCopyOn(true);
    const t = setTimeout(() => setCopyOn(false), 3200);
    return () => clearTimeout(t);
  }, [tagline]);
  return (
    <header className="hero" id="top">
      <div className="hero-slides">
        {slides.map((s, idx) => (
          <img key={idx} className={`hs ${s.scenery ? 'scenery' : ''} ${idx === i ? 'on' : ''}`} src={s.img} alt={s.en} />
        ))}
        <div className="hero-grad"></div>
      </div>
      <div className="hero-frame"></div>
      <div className="hero-coverlines">
        <span>Issue — 2026</span>
        <span>36.29°N · 139.37°E</span>
        <span>Best Rate Guaranteed</span>
      </div>
      <div className="hero-center">
        <div className={`hc-ja ${copyOn ? 'on' : ''}`}>{tagline}</div>
      </div>
      <div className="hero-cap">
        <div className="hcap-en">{slides[i].en}</div>
        <div className="hcap-ja">{slides[i].cap}</div>
      </div>
      <div className="hero-dots">
        {slides.map((_, idx) => (
          <button key={idx} className={idx === i ? 'on' : ''} onClick={() => setI(idx)} aria-label={`スライド ${idx + 1}`}></button>
        ))}
      </div>
      <div className="hero-scroll"><span>Scroll to explore</span></div>
    </header>
  );
};

// Live default dates for the (decorative) booking bar — always today → tomorrow
const _WD = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
const _fmtD = (d) => `${d.getFullYear()}.${String(d.getMonth()+1).padStart(2,'0')}.${String(d.getDate()).padStart(2,'0')}`;
const _t0 = new Date();
const _t1 = new Date(Date.now() + 86400000);
const IN_DATE = _fmtD(_t0),  IN_WD  = _WD[_t0.getDay()];
const OUT_DATE = _fmtD(_t1), OUT_WD = _WD[_t1.getDay()];

// tripla-style booking search widget
const BookField = ({k, sub, val, sm, chev, grow=1}) => (
  <button className="bw-field" type="button" style={{flexGrow:grow}}>
    <div className="bw-k">{k}<span>{sub}</span></div>
    <div className="bw-v">{val}{sm && <small>{sm}</small>}{chev && <i className="chev">⌄</i>}</div>
  </button>
);

// Sticky top reservation bar — appears after scrolling past the hero
const StickyBook = () => {
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const f = () => setOn(window.scrollY > 520);
    window.addEventListener('scroll', f, { passive: true });
    f();
    return () => window.removeEventListener('scroll', f);
  }, []);
  return (
    <div className={`stickybook ${on ? 'on' : ''}`} style={{transform: on ? 'translate(-50%,0)' : 'translate(-50%,-110%)'}}>
      <div className="sb-fields">
        <button type="button" className="sb-f"><span>IN</span>{IN_DATE}</button>
        <i className="sb-arr">→</i>
        <button type="button" className="sb-f"><span>OUT</span>{OUT_DATE}</button>
        <button type="button" className="sb-f"><span>GUESTS</span>大人2名 · 1室</button>
      </div>
      <div className="sb-right">
        <a className="sb-tel" href="tel:0276492111"><span>TEL</span>0276-49-2111</a>
        <a className="sb-go" href={RES_URL}>空室検索・ご予約 <i>→</i></a>
      </div>
    </div>
  );
};

const ResBar = () => (
  <div className="booking">
    <div className="book-rate">
      <span className="rate-badge">Best&nbsp;Rate</span>
      <span className="rate-txt">ベストレート保証 — 公式サイトからのご予約が、いつでも一番おトクです。</span>
      <span className="rate-note">最低価格保証・特典付き</span>
    </div>
    <div className="bw">
      <div className="bw-lead">
        <div className="bw-lead-en">Book direct</div>
        <div className="bw-lead-ja">空室検索</div>
      </div>
      <div className="tripla-slot" id="tripla-slot">
        <div className="tripla-ph">空室検索を読み込んでいます…</div>
      </div>
    </div>
    <div className="book-sub">
      <div className="book-links">
        <a href="#plans">宿泊プラン一覧 <em>→</em></a>
        <a href="reservation-update.html">予約確認・キャンセル <em>→</em></a>
      </div>
      <div className="book-tripla">Booking engine — <strong>tripla</strong></div>
    </div>
  </div>
);

const Concept = ({sauna}) => (
  <section className="feature">
    <div className="ft-head">
      <div className="ft-kicker">
        <span className="ft-k-en">Feature</span>
        <span className="ft-k-jp">特 集</span>
        <span className="ft-k-no">— Issue 2026</span>
      </div>
      <h2 className="ft-title">
        {sauna
          ? <React.Fragment>A quiet <em>now,</em><br/>in the city.</React.Fragment>
          : <React.Fragment>Sleep well,<br/><em>stay close.</em></React.Fragment>}
      </h2>
      <div className="ft-title-jp">{sauna ? '整 う 街 の ホ テ ル' : '駅 徒 歩 5 分 の 宿'}</div>
    </div>
    <div className="ft-body">
      <div className="ft-photos">
        <figure className="ftp ftp-a">
          <img className="scenery" src={L('exterior.jpg')} alt="太田の街と OTA NOW" />
          <figcaption>№01 — 太田の街と、OTA NOW</figcaption>
        </figure>
        <figure className="ftp ftp-b">
          <img src={L(sauna ? 'suite-twin-dusk.jpg' : 'room-double-retro.jpg')} alt="" />
          <figcaption>№02 — {sauna ? 'Private sauna suite' : 'Guest room · Lounge'}</figcaption>
        </figure>
      </div>
      <div className="ft-text">
        <div className="ft-colophon">
          <div><span>Place</span>群馬県太田市</div>
          <div><span>Rooms</span>全 77 室</div>
          <div><span>Access</span>太田駅 徒歩 5 分</div>
          <div><span>Photo</span>2024 — Ota</div>
        </div>
        <p className="ft-lead">
          <span className="dropcap">{sauna ? '整' : '眠'}</span>
          {sauna
            ? 'う時間が、旅の真ん中にある宿。群馬・太田は、働く街であり、文化の街。その中心に、客室サウナと上質な眠りで「ととのう」全77室のホテルがあります。'
            : 'りの質に、徹底してこだわった宿。群馬・太田の中心、太田駅から徒歩5分。上質な眠りと、駅近の便利さを兼ね備えた全77室です。'}
        </p>
        <p className="ft-lead2">
          {sauna
            ? '出張の夜も、特別な週末も。こだわりの和朝食から、プライベートサウナ付スイートでのひとときまで——いまを心地よくする滞在を、太田の街で。'
            : '出張にも、観光にも。焼き魚や朝カレーの和朝食や、1室限定のサウナ付スイートまで——肩肘張らない上質を、太田の街で。'}
        </p>
      </div>
    </div>
  </section>
);

const SuiteSection = ({sauna}) => (
  <section className="sauna" id="sauna">
    {sauna ? (
      <OHead en="Signature" ja="プライベートサウナ付スイート"
        title="整う、その夜の続きまで。"
        lead="本館に1室だけご用意する、客室内プライベートサウナ付きスイート。お好みの温度に設定できる水風呂と、3種のアロマ × セルフロウリュ。整ったあとは、客室内プロジェクターで映画と音楽を。" light />
    ) : (
      <OHead en="Sauna Suite" ja="客室サウナ付スイート ・ 1室限定"
        title="1室だけの、特別なサウナ時間。"
        lead="お部屋のひとつに、プライベートサウナを備えたスイートをご用意しています。サウナがお好きな方の特別な滞在に。ご宿泊のほか、日帰りでもご利用いただけます。" light />
    )}
    <div className="sg">
      <div className="sg-img">
        <img src={SUITE.hero} alt="プライベートサウナ付スイート" />
        <span className="pill">SUITE · 56㎡ · 定員2名 · 1室限定</span>
      </div>
      <div className="sg-copy">
        <div className="bullets">
          {SAUNA_BULLETS.map(b => (
            <div className="b" key={b.k}>
              <div className="b-k">№ {b.k}</div>
              <div className="b-t">{b.t}</div>
              <div className="b-d">{b.d}</div>
            </div>
          ))}
        </div>
        <div className="suite-plans">
          <div className="sp">
            <div className="sp-k">宿泊 — Overnight</div>
            <div className="sp-h">{SUITE.nightHours}</div>
            <div className="sp-p">{SUITE.price}<small>(税込)</small></div>
          </div>
          <div className="sp">
            <div className="sp-k">日帰り — Day use</div>
            <div className="sp-h">{SUITE.dayHours}</div>
            <div className="sp-p">{SUITE.price}<small>(税込)</small></div>
          </div>
        </div>
        <a className="reserve" href={RES_URL}>スイートを予約する <i>→</i></a>
      </div>
    </div>
    <div className="suite-note">
      <span className="sn-mark">※</span>
      客室内に備わるプライベートサウナです（スイート1室限定／定員2名）。共用の大浴場・サウナ・温泉はございません。
    </div>
    <div className="gallery">
      {SUITE.gallery.map((g,i) => (
        <div className="g-cell" key={i}>
          <img src={g.src} alt={g.cap} />
          <span className="g-cap">{String(i+1).padStart(2,'0')} · {g.cap}</span>
        </div>
      ))}
    </div>
  </section>
);

const StaySection = () => (
  <section className="stayband">
    <OHead en="Stay" ja="旅のスタイル"
      title="どんな旅にも、ちょうどいい。"
      lead="ひとりで整う週末も、出張の連泊も、記念日の旅も。太田ナウは、それぞれの「いま」に寄り添います。" />
    <div className="stay">
      {STAY.map((s,i)=>(
        <a className="stc" href="#" key={i}>
          <div className="stc-ph"><img src={s.img} alt={s.ja} /></div>
          <div className="stc-en">{s.en}</div>
          <div className="stc-ja">{s.ja}</div>
          <div className="stc-d">{s.d}</div>
        </a>
      ))}
    </div>
  </section>
);

const RoomCard = ({r, span, h}) => (
  <article className={`room ${span}`}>
    <div className="ph" style={{height:h}}>
      <img src={r.img} alt={r.ja} />
      {r.feature && <span className="room-feat">{r.feature}</span>}
    </div>
    <div className="info">
      <div className="info-top"><span>{r.en}</span><span>{r.units} · {r.cap}</span></div>
      <h3>{r.ja}</h3>
      <div className="spec">
        <div>SIZE<span className="v">{r.size}</span></div>
        <div>BED<span className="v">{r.bed}</span></div>
        <div>SMOKE<span className="v">{r.smoke}</span></div>
      </div>
      <a className="room-book" href="#tripla-slot">この部屋の空室・料金を見る <i>→</i></a>
    </div>
  </article>
);

const RoomsSection = () => (
  <section id="rooms">
    <OHead num="01" en="Rooms" ja="客室"
      title="眠りにこだわった、77の部屋。"
      lead="ベッドにこだわった本館の各タイプと、長期滞在向けの別館アネックス。全77室で、あなたの滞在に合う一室を。" />
    <div className="rooms">
      <RoomCard r={ROOMS_MAIN[0]} span="r1" h={420} />
      <RoomCard r={ROOMS_MAIN[1]} span="r2" h={420} />
      <RoomCard r={ROOMS_MAIN[2]} span="r3" h={460} />
      <RoomCard r={ROOMS_MAIN[3]} span="r4b" h={460} />
    </div>

    <div className="annex-head">
      <div className="oh-eyebrow"><span className="oh-en">Annex</span><span className="oh-ja">別館・長期滞在</span></div>
      <h3>住むように、泊まる。</h3>
      <p>本館ロビー西側出入口から徒歩約20m。ミニキッチン・電子レンジ・洗濯機を備えた、ウィークリーマンション型。外食に頼らず、暮らすように滞在できます。</p>
    </div>
    <div className="annex-grid">
      {ANNEX_ROOMS.map((r,i)=>(<RoomCard key={i} r={r} span="ar" h={340} />))}
    </div>
    <div className="sec-cta"><MoreBtn href="#tripla-slot">空室カレンダーで料金を見る</MoreBtn></div>
  </section>
);

const FoodSection = () => (
  <section className="foodband" id="breakfast">
    <OHead num="02" en="Morning" ja="和の朝食"
      title="一日の始まりに、ほっとする和朝食を。"
      lead="焼き魚や和惣菜、卵焼きなどの定番和朝食に、温かい特製カレー。こだわりのドリップコーヒーとともに、ゆったりとした朝の時間を、本館1階ロビーで。" />
    <div className="food">
      <div className="food-ph"><img src={FOOD.hero} alt="朝食" /></div>
      <div className="food-copy">
        <div className="menu">
          {FOOD.menu.map((m,i) => (
            <div className="m" key={i}>
              <div className="m-k">№ {String(i+1).padStart(2,'0')}</div>
              <div>
                <div className="m-t">{m.t}</div>
                <div className="m-d">{m.d}</div>
              </div>
            </div>
          ))}
        </div>
        <dl>
          <dt>Hours</dt><dd>{FOOD.hours}</dd>
          <dt>Place</dt><dd>{FOOD.place}</dd>
          <dt>Price</dt><dd>{FOOD.price}</dd>
          <dt>Style</dt><dd>{FOOD.style}</dd>
        </dl>
      </div>
    </div>
    <div className="sec-cta" style={{marginTop:56}}><MoreBtn href="#tripla-slot">朝食付きプランで予約する</MoreBtn></div>
  </section>
);

const FacilitiesSection = () => (
  <section id="facility">
    <OHead num="03" en="Facilities" ja="館内・施設"
      title="滞在を、心地よく支える。"
      lead="24時間対応のフロント、アメニティバイキングのラウンジ、無料コーヒー。快適にお過ごしいただくための設備とサービスが揃っています。" />
    <div className="amen">
      {AMENITIES.map((a,i)=>(
        <div className="am" key={i}>
          <Icon name={a.ic} />
          <div className="am-t">{a.t.split('\n').map((l,j)=>(<span key={j}>{l}<br/></span>))}</div>
        </div>
      ))}
    </div>
    <div className="sec-cta"><MoreBtn href="group.html">15名様以上の団体・グループ宿泊はこちら</MoreBtn></div>
  </section>
);

const LUCHA = {
  photos: {
    rooftop: L('lucha-rooftop.jpg'),
    tent:    L('lucha-tent.jpg'),
    party:   L('lucha-party.jpg'),
    lounge:  L('lucha-lounge.jpg'),
    karaoke: L('lucha-karaoke.jpg'),
  },
  facts: [
    { k:'Floor', v:'ホテル 5F' },
    { k:'Seats', v:'72席' },
    { k:'Party', v:'最大 52名' },
    { k:'Hours', v:'12:00–16:00 / 17:00–22:00' },
  ],
  features: [
    { t:'全天候型ビアテラス', d:'屋根付きで雨天でも安心。グランピングテントで非日常を。' },
    { t:'BBQ・海鮮・チルド肉', d:'焼肉店系列ならではの上質なお肉と海鮮を炭火で。' },
    { t:'カラオケ & ダーツ', d:'DAMカラオケとダーツを備えた大部屋。貸切パーティにも。' },
    { t:'宴会・貸切', d:'歓送迎会・誘生日・記念日に。最大 52名まで対応。' },
  ],
};

const LuchadollSection = () => (
  <section className="lucha" id="luchadoll">
    <div className="lucha-head">
      <div className="oh-kicker"><span className="oh-num">— 付帯設備</span><span className="oh-ja">ホテル 5F</span></div>
      <h2 className="lucha-en">Luchadoll</h2>
      <div className="lucha-jp">ビアテラス ルチャドール</div>
      <p className="lucha-lead">屋上に広がる、全天候型のグランピング・ビアテラス。炭火のBBQと海鮮、カラオケ、ダーツ。泊まる前も、泊まった夜も、太田の空の下でにぎやかに。</p>
    </div>
    <div className="lucha-collage">
      <figure className="lc lc-main"><img src={LUCHA.photos.rooftop} alt="ルチャドール 屋上テラス" /><figcaption>Rooftop terrace</figcaption></figure>
      <figure className="lc lc-a"><img src={LUCHA.photos.party} alt="パーティルーム" /><figcaption>Party room</figcaption></figure>
      <figure className="lc lc-b"><img src={LUCHA.photos.tent} alt="グランピングテント" /><figcaption>Glamping tent</figcaption></figure>
      <figure className="lc lc-c"><img src={LUCHA.photos.lounge} alt="ラウンジ" /><figcaption>Lounge</figcaption></figure>
      <figure className="lc lc-d"><img src={LUCHA.photos.karaoke} alt="カラオケ・ダーツ" /><figcaption>Karaoke &amp; darts</figcaption></figure>
    </div>
    <div className="lucha-body">
      <div className="lucha-features">
        {LUCHA.features.map((f,i)=>(
          <div className="lf" key={i}>
            <div className="lf-k">№ {String(i+1).padStart(2,'0')}</div>
            <div className="lf-t">{f.t}</div>
            <div className="lf-d">{f.d}</div>
          </div>
        ))}
      </div>
      <div className="lucha-side">
        <div className="lucha-facts">
          {LUCHA.facts.map((f,i)=>(
            <div className="laf" key={i}><div className="laf-k">{f.k}</div><div className="laf-v">{f.v}</div></div>
          ))}
        </div>
        <a className="lucha-cta" href="https://luchadoll.owst.jp/" target="_blank" rel="noreferrer">ルチャドールを予約 <i>→</i></a>
        <div className="lucha-note">火曜定休 / 全席禁煙 / TEL 050-1721-1231</div>
      </div>
    </div>
  </section>
);

const PlansSection = () => (
  <section className="plansband" id="plans">
    <OHead en="Plans" ja="宿泊プラン"
      title="おすすめのご宿泊プラン。"
      lead="目的に合わせて選べるプランをご用意。公式サイトからのご予約が、いつでも一番おトクです。" />
    <div className="plans">
      {PLANS.map((p,i)=>(
        <a className="pl" href="#" key={i}>
          <div className="pl-tag">{p.tag}</div>
          <div className="pl-ja">{p.ja}</div>
          <h3>{p.t}</h3>
          <p>{p.d}</p>
          <div className="pl-foot">
            {p.price ? <span className="pl-price">{p.price}<small>(税込)</small></span> : <span className="pl-price pl-price--ph">料金はプラン一覧へ</span>}
            <i>→</i>
          </div>
        </a>
      ))}
    </div>
    <div className="plans-cta">
      <div className="pc-rate"><span className="rate-badge">Best&nbsp;Rate</span>当サイトからのご予約が一番おトクです。</div>
      <MoreBtn href="#tripla-slot">すべての宿泊プランを見る</MoreBtn>
    </div>
  </section>
);

const AccessSection = () => (
  <section id="access">
    <OHead num="04" en="Access" ja="交通アクセス"
      title="東京から、ひと息の距離。"
      lead="東武伊勢崎線 太田駅 南口より徒歩5分。文化と産業が息づく「大人の街」太田の中心に建ちます。" />
    <div className="acc">
      <div className="map">
        <iframe title="太田ナウリゾートホテル 地図" src="https://www.openstreetmap.org/export/embed.html?bbox=139.3691%2C36.2866%2C139.3851%2C36.2966&layer=mapnik&marker=36.291627%2C139.377147" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
        <a className="map-link" href="https://maps.google.com/maps?q=36.291627,139.377147" target="_blank" rel="noreferrer">Google Map で見る →</a>
      </div>
      <div className="acc-info">
        <dl>
          <dt>Name</dt><dd>{HOTEL.nameJa}<br/><span className="acc-en">OTA NOW RESORT HOTEL</span></dd>
          <dt>Address</dt><dd>{HOTEL.addr}</dd>
          <dt>Access</dt><dd>{HOTEL.access}</dd>
          <dt>Parking</dt><dd>{HOTEL.parking}</dd>
          <dt>Check</dt><dd>IN 16:00 — 24:00 / OUT — 10:00</dd>
        </dl>
        <div className="tels">
          <div className="ct"><div className="k">Tel</div><div className="v">{HOTEL.tel}</div></div>
          <div className="ct"><div className="k">Fax</div><div className="v">{HOTEL.fax}</div></div>
        </div>
      </div>
    </div>
  </section>
);

const OTA_SITES = ['Booking.com', 'Expedia', 'agoda', 'Trip.com', 'Hotels.com', 'Trivago'];

const InvoiceSection = () => (
  <section id="invoice" className="invoiceband">
    <OHead num="05" en="Information" ja="お知らせ"
      title="適格請求書（インボイス）について"
      lead="インボイス制度に対応した領収書の発行について、ご予約方法によりお取り扱いが異なります。ご出張・経費精算でインボイスが必要なお客様はご確認ください。" />
    <div className="invoice">
      <div className="inv-main">
        <p className="inv-lead">適格請求書（インボイス）に対応した領収書をご希望のお客様は、<strong>公式サイトからのご予約</strong>をお願いいたします。</p>
        <ul className="inv-list">
          <li><span className="inv-no">01</span><div><b>海外予約サイトの領収書はインボイス非対応です。</b>海外予約サイトのオンライン決済でご予約いただいた際に発行される領収書は、日本国内の適格請求書・領収書（インボイス）に対応しておりません。</div></li>
          <li><span className="inv-no">02</span><div><b>当ホテルでの発行はいたしかねます。</b>海外予約サイトからオンライン決済でご予約の場合、当ホテルにて領収書（インボイス）を発行することができません。宿泊証明書をご希望の場合も、適格請求書発行事業者番号の記載がないものをお渡しいたします。</div></li>
          <li><span className="inv-no">03</span><div><b>事前決済をご検討の場合。</b>ご利用予定の予約サイトがインボイス対応事業者であるか、各予約サイトへお問い合わせください。確実にインボイスが必要な場合は公式サイトをご利用ください。</div></li>
        </ul>
      </div>
      <aside className="inv-aside">
        <div className="inv-aside-lab">対象となる海外予約サイトの例</div>
        <div className="inv-tags">{OTA_SITES.map((s,i)=>(<span key={i}>{s}</span>))}</div>
        <a className="inv-cta" href={RES_URL}>公式サイトで予約する <i>→</i></a>
        <div className="inv-note">ご不明な点はお電話（{HOTEL.tel}）でも承ります。</div>
      </aside>
    </div>
  </section>
);

const Footer = () => (
  <footer>
    <div className="f-cta">
      <div className="oh-eyebrow oh-c"><span className="oh-en">Reservation</span><span className="oh-ja">ご宿泊予約</span></div>
      <h4>Stay somewhere <em>quiet.</em></h4>
      <div className="f-rate"><span className="rate-badge">Best&nbsp;Rate</span>当サイトからのご予約が一番おトクです。</div>
      <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">{HOTEL.taglineJa}</div>
        <div className="f-addr">{HOTEL.addr}<br/>TEL {HOTEL.tel} ／ FAX {HOTEL.fax}</div>
      </div>
      <div className="col">
        <h5>Stay</h5>
        <a href="#">サウナスイート</a><a href="#">客室一覧</a><a href="#">宿泊プラン</a><a href="#">長期滞在 · 別館</a><a href="group.html">団体・グループ宿泊</a>
      </div>
      <div className="col">
        <h5>Hotel</h5>
        <a href="#facility">館内・施設</a><a href="#breakfast">朝食</a><a href="banquet.html">宴会・会議</a><a href="group.html">団体予約</a><a href="#access">アクセス</a>
      </div>
      <div className="col">
        <h5>Reserve</h5>
        <a href={RES_URL}>空室検索</a><a href="reservation-update.html">予約確認・キャンセル</a><a href="#">ベストレート保証</a>
      </div>
    </div>
    <div className="f-colophon">
      <div><span>Art Direction</span>OTA NOW</div>
      <div><span>Photography</span>2024 — Ota, Gunma</div>
      <div><span>Typeface</span>Cormorant · Shippori Mincho</div>
      <div><span>Issue</span>— 2026</div>
    </div>
    <div className="f-bot">
      <span>© {new Date().getFullYear()} 太田ナウリゾートホテル</span>
      <span>Ota · Gunma — JP</span>
      <span>宿泊約款 · プライバシーポリシー · 会員規約</span>
    </div>
  </footer>
);

// === ROOT ==================================================================

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "emphasis": "バランス型"
}/*EDITMODE-END*/;

const Announcement = () => (
  <section className="notice-band" id="news">
    <a className="nb-inner" href="reservation-update.html">
      <div className="nb-left">
        <span className="nb-badge">重要</span>
        <span className="nb-date">2026.08.03</span>
      </div>
      <div className="nb-body">
        <span className="nb-lab">Information — お知らせ</span>
        <p className="nb-title">予約システムを新しくしました。切替前にお取りいただいたご予約はそのまま有効です。ご確認・変更・取消の方法はこちらをご覧ください。</p>
      </div>
      <span className="nb-go">詳しく見る&nbsp;→</span>
    </a>
  </section>
);

const TrustStrip = () => (
  <div className="trust">
    <div className="tr-i"><b>Best Rate</b>公式サイト限定の最低価格</div>
    <div className="tr-i"><b>No Fee</b>予約手数料なし・最短1分で予約</div>
    <div className="tr-i"><b>Flexible</b>変更・取消もオンラインで完結</div>
  </div>
);

const FAQS = [
  ['チェックイン・チェックアウトの時間は？','チェックインは16:00〜24:00、チェックアウトは10:00です。'],
  ['最寄り駅からのアクセスは？','東武伊勢崎線 太田駅 南口より徒歩5分です。'],
  ['駐車場はありますか？','提携駐車場（市役所前・西側 パークレポ駐車場／24時間最大500円・45台）をご利用いただけます。'],
  ['サウナはありますか？','客室内にプライベートサウナを備えた1室限定のサウナスイートがございます。ご宿泊のほか、日帰り（13:00〜21:00）でもご利用いただけます。'],
  ['朝食はありますか？','本館1階ロビーにて、焼き魚・和惣菜・特製朝カレーの和朝食をご用意しています（7:00〜9:30／最終入場9:00・1,000円税込）。'],
  ['Wi-Fiは使えますか？','全館Wi-Fi完備です。無料でご利用いただけます。'],
];
const FAQSection = () => (
  <section id="faq" className="faqband">
    <OHead num="05" en="FAQ" ja="よくあるご質問"
      title="ご不明な点は、お気軽に。"
      lead="お電話（0276-49-2111）でもご案内しています。" />
    <div className="faqs">
      {FAQS.map((f,i)=>(
        <details className="fq" key={i}>
          <summary><span className="fq-q">{f[0]}</span><i className="fq-x">＋</i></summary>
          <p>{f[1]}</p>
        </details>
      ))}
    </div>
  </section>
);

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="#tripla-slot">空室・料金を見る <i>→</i></a>
  </div>
);

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const sauna = t.emphasis === 'サウナ前面';

  // Cross-page anchors (e.g. arriving from the sauna page at index.html#access)
  // need a post-render scroll, because the target doesn't exist when the browser
  // first reads the hash. Runs once after mount.
  React.useLayoutEffect(() => {
    const id = (window.location.hash || '').replace('#', '');
    if (!id) return;
    if ('scrollRestoration' in window.history) window.history.scrollRestoration = 'manual';
    let n = 0, stop = false;
    const onWheel = () => { stop = true; };
    window.addEventListener('wheel', onWheel, { passive: true, once: true });
    window.addEventListener('touchstart', onWheel, { passive: true, once: true });
    const jump = () => {
      if (stop) return;
      const el = document.getElementById(id);
      if (el) window.scrollTo(0, el.getBoundingClientRect().top + window.scrollY - 8);
      if (n++ < 14) requestAnimationFrame(jump);
    };
    jump();
    return () => { window.removeEventListener('wheel', onWheel); window.removeEventListener('touchstart', onWheel); };
  }, []);

  // triplaのインライン検索バー（自動挿入・元位置では非表示）を、ヒーロー下の予約バー枠 #tripla-slot に移動して
  // 本物の予約バーとして表示する。tripla は非同期で挿入するためポーリング＋監視で確実に捕捉する。
  React.useEffect(() => {
    const slot = () => document.getElementById('tripla-slot');
    const wrapInApp = () => document.querySelector('#tripla-searching-app [class*="search-widget-wrapper"]');
    let tries = 0;
    const move = () => {
      const s = slot(), w = wrapInApp();
      if (s && w) {
        s.querySelectorAll('.tripla-ph').forEach(p => p.remove());
        s.appendChild(w);
        return true;
      }
      return false;
    };
    const id = setInterval(() => { const ok = move(); if (ok || tries++ > 50) clearInterval(id); }, 350);
    const obs = new MutationObserver(() => { move(); });
    obs.observe(document.body, { childList: true, subtree: true });
    const stop = setTimeout(() => obs.disconnect(), 25000);
    return () => { clearInterval(id); obs.disconnect(); clearTimeout(stop); };
  }, []);

  const slides = sauna ? HERO_SLIDES_SAUNA : HERO_SLIDES_BALANCED;
  const tagline = sauna
    ? '大人の街・太田で、ととのう非日常を。'
    : '上質な眠りと、駅から徒歩5分。';
  return (
    <div className="va">
      <style>{css}</style>
      <Nav />
      <Hero slides={slides} tagline={tagline} />
      <ResBar />
      <TrustStrip />
      <Announcement />
      <Concept sauna={sauna} />
      {sauna ? (
        <React.Fragment>
          <SuiteSection sauna={true} />
          <StaySection />
          <RoomsSection />
          <FoodSection />
        </React.Fragment>
      ) : (
        <React.Fragment>
          <RoomsSection />
          <StaySection />
          <FoodSection />
          <SuiteSection sauna={false} />
        </React.Fragment>
      )}
      <FacilitiesSection />
      <LuchadollSection />
      <PlansSection />
      <AccessSection />
      <FAQSection />
      <Footer />
      <MobileCTA />
      <TweaksPanel title="Tweaks">
        <TweakSection label="コンテンツの見せ方" />
        <TweakRadio label="サウナの打ち出し" value={t.emphasis}
          options={['バランス型','サウナ前面']}
          onChange={(v)=>setTweak('emphasis', v)} />
      </TweaksPanel>
    </div>
  );
};

const css = `
  .va{font-family:'Noto Sans JP',system-ui,sans-serif;background:var(--paper);color:var(--ink);
      --paper:#F7F3EC;--paper2:#EFE9DD;--ink:#1C1A17;--rule:rgba(28,26,23,.13);--muted:#8A8378;
      --accent:#B68A53;--gold:#E0B274;--dark:#13110F;
      max-width:1680px;margin:0 auto;position:relative;overflow-x:clip}
  .va a{color:inherit;text-decoration:none}
  .va h1,.va h2,.va h3,.va h4{margin:0}
  .va img{display:block}

  /* TRUST STRIP — 公式予約の根拠 */
  .va .trust{margin:14px 48px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
  .va .tr-i{background:var(--paper);padding:13px 22px;display:flex;align-items:baseline;gap:13px;font-family:'Shippori Mincho',serif;font-size:12.5px;color:#4A443C}
  .va .tr-i b{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:9.5px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;white-space:nowrap}
  @media(max-width:640px){
    .va .trust{grid-template-columns:1fr;margin:10px 12px 0}
    .va .tr-i{padding:11px 16px}
  }

  /* ROOM CARD BOOK LINK */
  .va .room-book{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-family:'Shippori Mincho',serif;font-size:13px;color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:3px;transition:.2s;align-self:flex-start}
  .va .room-book i{font-style:normal;color:var(--accent);transition:transform .2s}
  .va .room-book:hover{color:var(--accent)}
  .va .room-book:hover i{transform:translateX(4px)}

  /* NAV */
  .va .nav{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:1680px;z-index:70;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px 48px;background:linear-gradient(180deg,rgba(15,13,11,.72) 0%,rgba(15,13,11,.34) 60%,rgba(15,13,11,0) 100%);transition:padding .3s ease,background .3s ease}
  .va .nav.scrolled{padding:12px 48px;background:rgba(19,17,15,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(224,178,116,.22)}
  .va .nav.scrolled .brand-tag{opacity:0}
  .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,.7);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}
  .va .nav a,.va .brand strong,.va .brand-tag,.va .lang{text-shadow:0 1px 12px rgba(0,0,0,.55)}
  .va .nl-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.7)}
  .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,.78);letter-spacing:.18em}
  .va .res{font-size:12px;letter-spacing:.18em;padding:12px 26px;border:1px solid var(--gold);border-radius:999px;color:#1C1A17;background:var(--gold);font-weight:600;transition:.2s;box-shadow:0 6px 20px -8px rgba(224,178,116,.8)}
  .va .res:hover{background:#fff;border-color:#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:88vh;min-height:660px;max-height:920px;overflow:hidden;background:var(--dark)}
  .va .hero-slides{position:absolute;inset:0}
  .va .hs{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease;transform:scale(1.06);filter:saturate(.92) brightness(.92);will-change:transform,opacity}
  .va .hs.on{opacity:1;animation:9.5s ease-out forwards}
  .va .hs.on:nth-child(4n+1){animation-name:kbA}
  .va .hs.on:nth-child(4n+2){animation-name:kbB}
  .va .hs.on:nth-child(4n+3){animation-name:kbC}
  .va .hs.on:nth-child(4n+4){animation-name:kbD}
  @keyframes kbA{from{transform:scale(1.14) translate(2%,1%)}to{transform:scale(1) translate(0,0)}}
  @keyframes kbB{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.13) translate(-1.6%,1%)}}
  @keyframes kbC{from{transform:scale(1.12) translate(-2%,-1%)}to{transform:scale(1.02) translate(0,0)}}
  @keyframes kbD{from{transform:scale(1.03) translate(0,0)}to{transform:scale(1.15) translate(1.4%,-1.2%)}}
  @media (prefers-reduced-motion: reduce){
    .va .hs.on{animation:none;transform:scale(1)}
  }
  .va .hs.scenery{filter:saturate(1.08) brightness(.95)}
  .va .hero-grad{position:absolute;inset:0;background:radial-gradient(58% 46% at 50% 53%,rgba(19,17,15,.36) 0%,rgba(19,17,15,0) 72%),linear-gradient(180deg,rgba(19,17,15,.42) 0%,rgba(19,17,15,.12) 32%,rgba(19,17,15,.16) 62%,rgba(19,17,15,.62) 100%)}
  .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:.4em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:20px}
  .va .hero h1{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:84px;line-height:.92;letter-spacing:.03em}
  .va .hero h1 em{font-style:italic}
  .va .hc-sub{font-family:'JetBrains Mono',monospace;font-weight:400;font-size:13px;letter-spacing:.42em;margin-top:14px;padding-left:.42em;color:rgba(255,255,255,.82)}
  .va .hc-ja{font-family:'Shippori Mincho',serif;font-size:31px;font-weight:600;letter-spacing:.2em;color:#fff;position:relative;padding-top:34px;line-height:1.7;text-shadow:0 2px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(10px);transition:opacity 1.1s ease,transform 1.1s ease}
  .va .hc-ja.on{opacity:1;transform:translateY(0)}
  .va .hc-ja:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:1px;background:rgba(255,255,255,.45)}
  .va .hero-cap{position:absolute;left:48px;bottom:120px;z-index:2;color:#fff}
  .va .hcap-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px}
  .va .hcap-ja{font-family:'Shippori Mincho',serif;font-size:13px;letter-spacing:.12em;margin-top:6px;color:rgba(255,255,255,.9)}
  .va .hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:108px;z-index:2;display:flex;gap:12px}
  .va .hero-dots button{width:30px;height:2px;border:0;padding:0;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s}
  .va .hero-dots button.on{background:#fff}
  .va .hero-scroll{position:absolute;right:48px;bottom:116px;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}
  .va .hero-frame{position:absolute;inset:22px;border:1px solid rgba(255,255,255,.26);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,.82);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;pointer-events:none}

  /* TOP ANNOUNCEMENT — JALシティ様式の告知 */
  .va .notice-band{padding:52px 48px 0}
  .va .nb-inner{display:flex;align-items:center;gap:28px;background:var(--dark);border:1px solid rgba(224,178,116,.4);border-left:4px solid var(--gold);padding:22px 32px;transition:.25s;box-shadow:0 26px 54px -34px rgba(19,17,15,.7)}
  .va .nb-inner:hover{box-shadow:0 30px 62px -30px rgba(19,17,15,.82);transform:translateY(-1px)}
  .va .nb-left{display:flex;flex-direction:column;gap:9px;align-items:flex-start;flex:none}
  .va .nb-badge{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;background:#C24E33;color:#fff;padding:6px 12px;border-radius:2px;font-weight:500}
  .va .nb-date{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;color:var(--gold)}
  .va .nb-body{flex:1;min-width:0}
  .va .nb-lab{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .va .nb-title{font-family:'Shippori Mincho',serif;font-weight:600;font-size:16px;color:#F7F3EC;margin:7px 0 0;line-height:1.72;text-wrap:pretty}
  .va .nb-go{font-family:'Shippori Mincho',serif;font-size:13.5px;color:var(--gold);white-space:nowrap;flex:none;border-bottom:1px solid rgba(224,178,116,.5);padding-bottom:2px;transition:.2s}
  .va .nb-inner:hover .nb-go{color:#fff;border-bottom-color:#fff}

  /* FAQ */
  .va .faqband{background:var(--paper2)}
  .va .faqs{max-width:880px;margin:8px auto 0;display:flex;flex-direction:column;gap:10px}
  .va .fq{background:var(--paper);border:1px solid var(--rule)}
  .va .fq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;cursor:pointer;padding:18px 24px}
  .va .fq summary::-webkit-details-marker{display:none}
  .va .fq-q{font-family:'Shippori Mincho',serif;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.6}
  .va .fq-x{font-style:normal;color:var(--accent);font-size:16px;flex:none;transition:transform .25s}
  .va .fq[open] .fq-x{transform:rotate(45deg)}
  .va .fq p{margin:0;padding:0 24px 20px;font-size:13.5px;line-height:2;color:#4A443C}

  /* 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(19,17,15,.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 rgba(247,243,236,.35);color:#F7F3EC;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:14.5px;letter-spacing:.05em}
    .va .mcta-res i{font-style:normal}
    .va{padding-bottom:74px}
  }

  /* STICKY TOP RESERVATION BAR */
  .va .stickybook{position:fixed;top:58px;left:50%;width:100%;max-width:1440px;z-index:60;
    display:flex;align-items:center;gap:26px;padding:12px 28px;
    background:rgba(19,17,15,.96);backdrop-filter:blur(8px);color:#F7F3EC;
    border-bottom:1px solid rgba(224,178,116,.25);
    transform:translate(-50%,-110%);transition:transform .35s ease}
  .va .stickybook.on{transform:translate(-50%,0)}
  .va .sb-brand{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;font-weight:500;white-space:nowrap}
  .va .sb-fields{display:flex;align-items:center;gap:14px;flex:1;justify-content:center}
  .va .sb-f{display:flex;align-items:baseline;gap:8px;background:transparent;border:0;color:#F7F3EC;
    font-family:'Shippori Mincho',serif;font-size:14px;cursor:pointer;padding:8px 10px;white-space:nowrap;transition:background .15s}
  .va .sb-f:hover{background:rgba(247,243,236,.08)}
  .va .sb-f span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--gold)}
  .va .sb-arr{font-style:italic;font-family:'Cormorant Garamond',serif;color:var(--gold)}
  .va .sb-right{display:flex;align-items:center;gap:18px}
  .va .sb-tel{display:flex;align-items:baseline;gap:8px;font-family:'Cormorant Garamond',serif;font-size:20px;white-space:nowrap}
  .va .sb-tel span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;color:rgba(247,243,236,.55)}
  .va .sb-go{display:flex;align-items:center;gap:9px;background:var(--gold);color:var(--dark);padding:11px 22px;
    font-family:'Shippori Mincho',serif;font-size:13px;letter-spacing:.08em;white-space:nowrap;transition:.18s}
  .va .sb-go i{font-style:normal;transition:transform .2s}
  .va .sb-go:hover{background:#F7F3EC}.va .sb-go:hover i{transform:translateX(4px)}

  /* BOOKING WIDGET */
  .va .booking{margin:-66px 48px 0;position:relative;z-index:10;background:var(--paper);border:1px solid var(--rule);box-shadow:0 40px 80px -44px rgba(28,26,23,.55)}
  .va .book-rate{display:flex;align-items:center;gap:16px;padding:15px 28px;border-bottom:1px solid var(--rule);background:var(--dark);color:#F7F3EC}
  .va .rate-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark);background:var(--gold);padding:7px 12px;white-space:nowrap}
  .va .rate-txt{font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.02em}
  .va .rate-note{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:rgba(247,243,236,.62);text-transform:uppercase;white-space:nowrap}
  .va .bw{display:flex;align-items:stretch;padding:14px 18px}
  .va .bw-lead{padding:6px 22px 6px 8px;border-right:1px solid var(--rule);display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
  .va .bw-lead-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;line-height:1}
  .va .bw-lead-ja{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase;margin-top:6px}
  .va .bw-field{flex:1 1 0;min-width:0;background:transparent;border:0;border-right:1px solid var(--rule);text-align:left;padding:6px 16px;cursor:pointer;font-family:inherit;transition:background .15s}
  .va .bw-field:hover{background:rgba(182,138,83,.1)}
  .va .bw-k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;display:flex;align-items:baseline;gap:6px;margin-bottom:8px;white-space:nowrap;overflow:hidden}
  .va .bw-k span{font-size:8px;opacity:.6}
  .va .bw-v{font-family:'Shippori Mincho',serif;font-size:16px;color:var(--ink);display:flex;align-items:baseline;gap:5px;line-height:1;white-space:nowrap}
  .va .bw-v small{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
  .va .bw-v .chev{font-style:normal;margin-left:auto;color:var(--muted);font-size:15px;line-height:0}
  .va .bw-arrow{display:flex;align-items:center;padding:0 4px;color:var(--accent);font-family:'Cormorant Garamond',serif;font-size:20px;font-style:italic}
  .va .bw-go{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--dark);color:#F7F3EC;padding:0 32px;margin-left:14px;font-size:13px;letter-spacing:.14em;font-family:'Shippori Mincho',serif;transition:.18s}
  .va .bw-go:hover{background:var(--accent);color:#fff}
  .va .bw-go-ic{font-size:17px}
  .va .book-sub{display:flex;align-items:center;justify-content:space-between;padding:13px 28px;border-top:1px solid var(--rule)}
  .va .book-links{display:flex;gap:28px}
  .va .book-links a{font-family:'Shippori Mincho',serif;font-size:13px;color:#4a443c}
  .va .book-links a em{font-style:normal;color:var(--accent);margin-left:4px}
  .va .book-tripla{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
  .va .book-tripla strong{color:var(--ink);font-weight:500}

  /* tripla — 自動挿入されるインライン検索バーは既定で絶対配置になりヒーローに重なる。そのため元位置では非表示のままにし、JSで #tripla-slot（予約バー内）へ移動して本物の予約UIとして表示する。#tripla-searching-app の外に出ると下の非表示ルールが効かなくなり表示される。 */
  #tripla-searching-app [class*="search-widget-wrapper"]{display:none !important}
  .va .tripla-slot{flex:1;display:flex;align-items:center;min-height:118px;padding:4px 6px;scroll-margin-top:96px}
  .va .tripla-ph{width:100%;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--muted)}
  .va .tripla-slot [class*="search-widget-wrapper"]{display:block !important;position:static !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;width:100% !important;max-width:100% !important;margin:0 !important;z-index:auto !important}
  /* neutralize the design's global element rules (esp. .va section{padding:130px}) that bleed into the tripla widget now that it lives inside .va */
  .va .tripla-slot section{padding:0 !important}
  .va .tripla-slot [class*="input-wrapper"]{padding:0 !important}
  .va .tripla-slot h1,.va .tripla-slot h2,.va .tripla-slot h3,.va .tripla-slot h4{margin:revert}

  /* SECTION HEADER (o-inn style, centered) */
  .va section{padding:130px 56px}
  .va .oh{text-align:center;margin:0 auto 76px;max-width:900px}
  .va .oh-eyebrow{display:flex;align-items:baseline;gap:14px;justify-content:center}
  .va .oh-eyebrow.oh-c{margin-bottom:18px}
  .va .oh-kicker{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:26px}
  .va .oh-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:.2em}
  .va .oh-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:34px;color:var(--ink);letter-spacing:.01em}
  .va .oh-ja{font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.34em;color:var(--muted)}
  .va .oh-kicker .oh-ja{font-size:15px;letter-spacing:.5em;color:var(--ink);padding-left:.5em}
  .va h2.oh-en-lg{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:74px;line-height:.95;letter-spacing:.01em;color:var(--ink);margin:0}
  .va .oh-title{font-family:'Shippori Mincho',serif;font-size:23px;font-weight:600;margin-top:20px;letter-spacing:.1em;line-height:1.6;color:var(--ink)}
  .va .oh-lead{font-size:14.5px;line-height:2.05;color:#5b544b;margin:24px auto 0;max-width:600px;text-wrap:pretty}
  .va .oh-light .oh-en,.va .oh-light .oh-en-lg,.va .oh-light .oh-title{color:#F7F3EC}
  .va .oh-light .oh-kicker .oh-ja{color:rgba(247,243,236,.8)}
  .va .oh-light .oh-ja{color:rgba(247,243,236,.6)}
  .va .oh-light .oh-lead{color:rgba(247,243,236,.78)}
  .va .oh-light .oh-num{color:var(--gold)}

  .va .sec-cta{display:flex;justify-content:center;margin-top:72px}
  .va .morebtn{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--ink);padding:16px 40px;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.08em;transition:.2s}
  .va .morebtn i{font-style:normal;transition:transform .2s}
  .va .morebtn:hover{background:var(--ink);color:var(--paper)}
  .va .morebtn:hover i{transform:translateX(5px)}
  .va .morebtn-light{border-color:rgba(247,243,236,.5);color:#F7F3EC}
  .va .morebtn-light:hover{background:#F7F3EC;color:var(--ink)}

  /* FEATURE (editorial spread) */
  .va .feature{padding:150px 56px;max-width:1240px;margin:0 auto}
  .va .ft-head{text-align:center;margin-bottom:84px}
  .va .ft-kicker{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:30px}
  .va .ft-k-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:var(--accent)}
  .va .ft-k-jp{font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.5em;color:var(--ink);padding-left:.5em}
  .va .ft-k-no{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
  .va .ft-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:92px;line-height:.96;letter-spacing:.005em;color:var(--ink);margin:0}
  .va .ft-title em{font-style:italic}
  .va .ft-title-jp{font-family:'Shippori Mincho',serif;font-weight:600;font-size:21px;letter-spacing:.5em;color:var(--muted);margin-top:26px;padding-left:.5em}
  .va .ft-body{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
  .va .ft-photos{position:relative;height:600px}
  .va .ftp{position:absolute;margin:0;overflow:hidden;background:#d8d2c5}
  .va .ftp img{width:100%;height:100%;object-fit:cover}
  .va .ftp-a{top:0;left:0;width:72%;height:430px;z-index:1}
  .va .ftp-b{bottom:0;right:0;width:54%;height:350px;z-index:2;box-shadow:-22px -22px 0 0 var(--paper)}
  .va .ftp figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;mix-blend-mode:difference}
  .va .ft-colophon{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--rule)}
  .va .ft-colophon div{display:flex;flex-direction:column;gap:5px;font-family:'Shippori Mincho',serif;font-size:14px;color:var(--ink)}
  .va .ft-colophon span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
  .va .ft-lead{font-family:'Shippori Mincho',serif;font-size:16px;line-height:2.15;color:#3a352e;margin:0 0 22px;text-wrap:pretty}
  .va .dropcap{float:left;font-family:'Shippori Mincho',serif;font-size:68px;line-height:.72;font-weight:700;margin:8px 16px 0 0;color:var(--accent)}
  .va .ft-lead2{font-size:14px;line-height:2.05;color:#5b544b;margin:0;text-wrap:pretty}

  /* SAUNA (dark signature) */
  .va .sauna{background:var(--dark);color:#F7F3EC}
  .va .sg{display:grid;grid-template-columns:1.12fr 1fr;gap:60px;align-items:start}
  .va .sg-img{position:relative;height:660px;overflow:hidden}
  .va .sg-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.94)}
  .va .pill{position:absolute;left:20px;bottom:20px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#fff;letter-spacing:.2em;background:rgba(0,0,0,.4);padding:8px 14px;text-transform:uppercase}
  .va .bullets{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px}
  .va .b{padding-top:20px;border-top:1px solid rgba(247,243,236,.18)}
  .va .b-k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:.2em;margin-bottom:9px}
  .va .b-t{font-family:'Shippori Mincho',serif;font-size:17px;margin-bottom:8px;font-weight:500}
  .va .b-d{font-size:12px;line-height:1.75;color:rgba(247,243,236,.72)}
  .va .suite-plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:38px;padding:24px 0;border-top:1px solid rgba(247,243,236,.18);border-bottom:1px solid rgba(247,243,236,.18)}
  .va .sp-k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--gold);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
  .va .sp-h{font-family:'Shippori Mincho',serif;font-size:14px;color:rgba(247,243,236,.72);margin-bottom:8px}
  .va .sp-p{font-family:'Cormorant Garamond',serif;font-size:38px;font-weight:300}
  .va .sp-p small{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(247,243,236,.55);letter-spacing:.16em;margin-left:6px}
  .va .reserve{margin-top:34px;display:inline-flex;align-items:center;gap:14px;background:#F7F3EC;color:var(--dark);padding:18px 34px;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.1em;transition:.2s}
  .va .reserve i{font-style:normal;transition:transform .2s}
  .va .reserve:hover{background:var(--gold)}
  .va .reserve:hover i{transform:translateX(5px)}
  .va .suite-note{display:flex;gap:11px;align-items:baseline;margin-top:40px;padding:18px 22px;border:1px solid rgba(247,243,236,.22);background:rgba(247,243,236,.045);font-family:'Shippori Mincho',serif;font-size:13px;line-height:1.85;color:rgba(247,243,236,.82);letter-spacing:.02em}
  .va .sn-mark{color:var(--gold);font-size:14px;flex:0 0 auto}
  .va .gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:48px}
  .va .g-cell{position:relative;height:172px;overflow:hidden;background:#1a1a1a}
  .va .g-cell img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
  .va .g-cap{position:absolute;left:10px;bottom:9px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;mix-blend-mode:difference}

  /* STAY */
  .va .stayband{background:var(--paper2)}
  .va .stay{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .va .stc{display:block}
  .va .stc-ph{height:340px;overflow:hidden;background:#d8d2c5;margin-bottom:18px}
  .va .stc-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .7s ease}
  .va .stc:hover .stc-ph img{transform:scale(1.05)}
  .va .stc-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:26px}
  .va .stc-ja{font-family:'Shippori Mincho',serif;font-size:15px;margin-top:6px}
  .va .stc-d{font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:6px}

  /* ROOMS */
  .va .rooms{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;row-gap:64px}
  .va .room .ph{overflow:hidden;background:#d8d2c5;position:relative}
  .va .room .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .7s ease}
  .va .room:hover .ph img{transform:scale(1.04)}
  .va .room .info{margin-top:20px}
  .va .room .info-top{display:flex;justify-content:space-between;align-items:baseline;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
  .va .room h3{font-family:'Shippori Mincho',serif;font-size:23px;font-weight:600;letter-spacing:.04em;margin-bottom:16px}
  .va .room-feat{position:absolute;top:14px;left:14px;font-family:'Shippori Mincho',serif;font-size:12px;letter-spacing:.06em;color:#E6B570;background:rgba(19,17,15,.9);padding:7px 14px;border-radius:2px;box-shadow:0 6px 18px -5px rgba(0,0,0,.55)}
  .va .room .spec{display:grid;grid-template-columns:74px 1fr 110px;gap:22px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.08em;padding-top:16px;border-top:1px solid var(--rule)}
  .va .room .spec .v{display:block;color:var(--ink);font-family:'Shippori Mincho',serif;font-size:13.5px;letter-spacing:0;margin-top:5px;line-height:1.5}
  .va .r1{grid-column:1/span 6}
  .va .r2{grid-column:7/span 6}
  .va .r3{grid-column:1/span 6}
  .va .r4b{grid-column:7/span 6}

  /* ANNEX */
  .va .annex-head{max-width:720px;margin:104px auto 0;text-align:center}
  .va .annex-head .oh-eyebrow{justify-content:center;margin-bottom:16px}
  .va .annex-head h3{font-family:'Shippori Mincho',serif;font-size:30px;font-weight:600;letter-spacing:.05em;margin-bottom:18px}
  .va .annex-head p{font-size:14.5px;line-height:2.05;color:#5b544b;margin:0 auto;max-width:600px}
  .va .annex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
  .va .annex{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:96px;align-items:center}
  .va .annex-ph{height:520px;overflow:hidden;background:#d8d2c5}
  .va .annex-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
  .va .annex-body .oh-eyebrow{justify-content:flex-start;margin-bottom:18px}
  .va .annex-body h3{font-family:'Shippori Mincho',serif;font-size:34px;font-weight:600;letter-spacing:.05em;margin-bottom:20px}
  .va .annex-body p{font-size:14.5px;line-height:2.05;color:#5b544b;margin:0 0 32px;max-width:480px}
  .va .annex-types{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--rule);padding-top:26px}
  .va .at-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px}
  .va .at-ja{font-family:'Shippori Mincho',serif;font-size:14px;margin:3px 0 9px}
  .va .at-spec{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;color:var(--muted)}

  /* FOOD */
  .va .foodband{background:var(--paper2)}
  .va .food{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;max-width:1180px;margin:0 auto}
  .va .food-ph{height:560px;overflow:hidden;background:#d8d2c5}
  .va .food-ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.94)}
  .va .menu{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:30px}
  .va .m{display:grid;grid-template-columns:46px 1fr;gap:14px;padding-top:16px;border-top:1px solid var(--rule)}
  .va .m-k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.18em}
  .va .m-t{font-family:'Shippori Mincho',serif;font-size:16px;font-weight:600;margin-bottom:4px}
  .va .m-d{font-size:12px;line-height:1.65;color:#5b544b}
  .va .food dl{display:grid;grid-template-columns:74px 1fr;gap:10px 24px;font-size:13px;border-top:1px solid var(--rule);padding-top:24px;margin:0}
  .va .food dt{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;align-self:center}
  .va .food dd{margin:0;font-family:'Shippori Mincho',serif}

  /* FACILITIES */
  .va .fac{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-bottom:80px;max-width:980px;margin-left:auto;margin-right:auto}
  .va .fc .ph{height:330px;overflow:hidden;background:#d8d2c5}
  .va .fc .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .7s}
  .va .fc:hover .ph img{transform:scale(1.04)}
  .va .fc-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;margin-top:18px;color:var(--accent)}
  .va .fc h3{font-family:'Shippori Mincho',serif;font-size:20px;font-weight:600;margin:2px 0 10px;letter-spacing:.04em}
  .va .fc p{font-size:13px;line-height:1.85;color:#5b544b;margin:0}
  .va .amen{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;border:1px solid var(--rule);background:var(--rule)}
  .va .am{background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:38px 12px;text-align:center;color:var(--ink)}
  .va .am-t{font-family:'Shippori Mincho',serif;font-size:13px;line-height:1.5;letter-spacing:.04em}
  .va .am-t br:last-child{display:none}

  /* PLANS */
  .va .plansband{background:var(--dark);color:#F7F3EC}
  .va .plansband .oh-en,.va .plansband .oh-title{color:#F7F3EC}
  .va .plansband .oh-ja{color:rgba(247,243,236,.6)}
  .va .plansband .oh-lead{color:rgba(247,243,236,.78)}
  .va .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .va .pl{display:flex;flex-direction:column;background:rgba(247,243,236,.05);border:1px solid rgba(247,243,236,.15);padding:34px 30px;transition:.2s}
  .va .pl:hover{background:rgba(247,243,236,.09)}
  .va .pl-tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
  .va .pl-ja{font-family:'Shippori Mincho',serif;font-size:13px;color:rgba(247,243,236,.7);margin:14px 0 4px}
  .va .pl h3{font-family:'Shippori Mincho',serif;font-size:23px;font-weight:600;letter-spacing:.04em;margin-bottom:16px}
  .va .pl p{font-size:13px;line-height:1.9;color:rgba(247,243,236,.78);margin:0 0 28px;flex:1}
  .va .pl-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(247,243,236,.18);padding-top:18px}
  .va .pl-price{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:300}
  .va .pl-price small{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:rgba(247,243,236,.55);margin-left:6px}
  .va .pl-price--ph{font-family:'Shippori Mincho',serif;font-size:13px;color:rgba(247,243,236,.6)}
  .va .pl-foot i{font-style:normal;color:var(--gold);font-size:18px;transition:transform .2s}
  .va .pl:hover .pl-foot i{transform:translateX(5px)}
  .va .plans-cta{display:flex;align-items:center;justify-content:space-between;margin-top:48px;padding-top:36px;border-top:1px solid rgba(247,243,236,.16)}
  .va .pc-rate{display:flex;align-items:center;gap:14px;font-family:'Shippori Mincho',serif;font-size:14px;color:rgba(247,243,236,.85)}

  /* ACCESS */
  .va .acc{display:grid;grid-template-columns:1.3fr 1fr;border:1px solid var(--rule);max-width:1180px;margin:0 auto}
  .va .map{position:relative;background:#ece6d9;min-height:520px;overflow:hidden;border-right:1px solid var(--rule)}
  .va .map svg{width:100%;height:100%;display:block}
  .va .map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.92) contrast(1.02)}
  .va .map-link{position:absolute;left:20px;bottom:20px;background:var(--dark);color:#F7F3EC;font-family:'Shippori Mincho',serif;font-size:12px;letter-spacing:.06em;padding:11px 20px;transition:.2s}
  .va .map-link:hover{background:var(--accent)}
  .va .acc-info{padding:48px}
  .va .acc-info dl{display:grid;grid-template-columns:88px 1fr;gap:18px 26px;margin:0}
  .va .acc-info dt{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;padding-top:6px}
  .va .acc-info dd{margin:0;font-family:'Shippori Mincho',serif;font-size:14.5px;line-height:1.8;padding-bottom:18px;border-bottom:1px solid var(--rule)}
  .va .acc-info dd:last-of-type{border-bottom:0}
  .va .acc-en{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.16em}
  .va .tels{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}

  /* INVOICE NOTICE */
  .va .invoiceband{background:var(--paper2)}
  .va .invoice{display:grid;grid-template-columns:1.5fr 1fr;gap:0;max-width:1180px;margin:0 auto;border:1px solid var(--rule);background:var(--paper)}
  .va .inv-main{padding:48px 52px}
  .va .inv-lead{font-family:'Shippori Mincho',serif;font-size:18px;line-height:1.85;margin:0 0 30px;color:var(--ink)}
  .va .inv-lead strong{color:var(--accent);font-weight:600}
  .va .inv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
  .va .inv-list li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;font-size:13.5px;line-height:1.9;color:#46423b;padding-top:22px;border-top:1px solid var(--rule)}
  .va .inv-list li:first-child{border-top:0;padding-top:0}
  .va .inv-no{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--accent);padding-top:3px}
  .va .inv-list b{color:var(--ink);font-weight:600}
  .va .inv-aside{padding:48px 40px;background:var(--dark);color:#EDE7DB;display:flex;flex-direction:column}
  .va .inv-aside-lab{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(237,231,219,.6)}
  .va .inv-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .va .inv-tags span{font-size:12px;letter-spacing:.02em;border:1px solid rgba(237,231,219,.28);padding:6px 12px;border-radius:2px;color:rgba(237,231,219,.92)}
  .va .inv-cta{margin-top:32px;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;background:var(--accent);color:#1C1A17;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.04em;padding:15px 22px;transition:.2s}
  .va .inv-cta:hover{filter:brightness(1.08)}
  .va .inv-cta i{font-style:normal}
  .va .inv-note{margin-top:auto;padding-top:24px;font-size:11.5px;line-height:1.7;color:rgba(237,231,219,.6)}
  .va .ct{padding:18px;border:1px solid var(--rule)}
  .va .ct .k{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase}
  .va .ct .v{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:300;margin-top:6px}

  /* FOOTER */
  .va footer{background:var(--dark);color:#F7F3EC}
  .va .f-cta{text-align:center;padding:96px 56px;border-bottom:1px solid rgba(247,243,236,.14)}
  .va .f-cta .oh-en{color:#F7F3EC}
  .va .f-cta .oh-ja{color:rgba(247,243,236,.6)}
  .va footer h4{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:64px;font-weight:300;margin:6px 0 26px}
  .va footer h4 em{font-style:italic;color:var(--gold)}
  .va .f-rate{display:flex;align-items:center;justify-content:center;gap:14px;font-family:'Shippori Mincho',serif;font-size:14px;color:rgba(247,243,236,.85);margin-bottom:30px}
  .va .f-resbtn{display:inline-flex;align-items:center;gap:12px;background:#F7F3EC;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:80px 56px 64px}
  .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(247,243,236,.78);font-size:14px;margin:14px 0 20px;line-height:1.8}
  .va .f-addr{font-size:12px;line-height:1.9;color:rgba(247,243,236,.55);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
  .va .col h5{font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(247,243,236,.5);letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
  .va .col a{display:block;color:#F7F3EC;font-size:14px;margin-bottom:11px;font-family:'Shippori Mincho',serif;transition:.15s}
  .va .col a:hover{color:var(--gold)}
  .va .f-colophon{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:36px 56px;border-top:1px solid rgba(247,243,236,.14)}
  .va .f-colophon div{display:flex;flex-direction:column;gap:6px;font-family:'Shippori Mincho',serif;font-size:13px;color:rgba(247,243,236,.85)}
  .va .f-colophon span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,243,236,.45)}
  .va .f-bot{display:flex;justify-content:space-between;border-top:1px solid rgba(247,243,236,.14);padding:26px 56px;font-family:'JetBrains Mono',monospace;font-size:10px;color:rgba(247,243,236,.5);letter-spacing:.18em;text-transform:uppercase}

  /* RESPONSIVE */
  /* LUCHADOLL */
  .va .lucha{background:#13110F;color:#F2ECE1;padding:130px 56px}
  .va .lucha-head{text-align:center;max-width:760px;margin:0 auto 56px}
  .va .lucha-head .oh-kicker{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px}
  .va .lucha-head .oh-num{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--gold)}
  .va .lucha-head .oh-ja{font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.34em;color:rgba(242,236,225,.6)}
  .va .lucha-en{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:72px;line-height:.95;color:#fff}
  .va .lucha-jp{font-family:'Shippori Mincho',serif;font-size:18px;letter-spacing:.3em;color:var(--gold);margin-top:14px}
  .va .lucha-lead{font-size:14.5px;line-height:2.05;color:rgba(242,236,225,.8);margin:24px auto 0;max-width:620px;text-wrap:pretty}
  .va .lucha-collage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:10px;max-width:1240px;margin:0 auto}
  .va .lc{position:relative;margin:0;overflow:hidden;background:#1a1714}
  .va .lc img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.92);transition:transform .8s ease}
  .va .lc:hover img{transform:scale(1.05)}
  .va .lc figcaption{position:absolute;left:12px;bottom:10px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;mix-blend-mode:difference}
  .va .lc-main{grid-column:1/span 2;grid-row:1/span 2}
  .va .lc-a{grid-column:3/span 1;grid-row:1/span 1}
  .va .lc-b{grid-column:4/span 1;grid-row:1/span 1}
  .va .lc-c{grid-column:3/span 1;grid-row:2/span 1}
  .va .lc-d{grid-column:4/span 1;grid-row:2/span 1}
  .va .lucha-body{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;max-width:1240px;margin:64px auto 0;align-items:start}
  .va .lucha-features{display:grid;grid-template-columns:1fr 1fr;gap:28px 36px}
  .va .lf{padding-top:18px;border-top:1px solid rgba(242,236,225,.18)}
  .va .lf-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;color:var(--gold);margin-bottom:10px}
  .va .lf-t{font-family:'Shippori Mincho',serif;font-size:18px;font-weight:600;margin-bottom:10px}
  .va .lf-d{font-size:13px;line-height:1.85;color:rgba(242,236,225,.74)}
  .va .lucha-side{background:rgba(242,236,225,.05);border:1px solid rgba(242,236,225,.14);padding:32px 30px}
  .va .laf{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(242,236,225,.14)}
  .va .laf:last-child{border-bottom:0}
  .va .laf-k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,236,225,.55)}
  .va .laf-v{font-family:'Shippori Mincho',serif;font-size:15px}
  .va .lucha-cta{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--gold);color:#13110F;padding:16px;font-family:'Shippori Mincho',serif;font-size:14px;letter-spacing:.08em;margin-top:22px;transition:.18s}
  .va .lucha-cta i{font-style:normal;transition:transform .2s}
  .va .lucha-cta:hover{background:#fff}.va .lucha-cta:hover i{transform:translateX(5px)}
  .va .lucha-note{font-size:11px;line-height:1.7;color:rgba(242,236,225,.5);margin-top:14px;font-family:'Shippori Mincho',serif;text-align:center}

  @media(max-width:1080px){
    .va .sb-fields,.va .sb-tel{display:none}
    .va .nav{padding:12px 18px}
    .va .brand-tag{display:none}
    .va .brand strong{font-size:20px}
    .va .lang{display:none}
    .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(15,13,11,.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 .hc-ja{font-size:21px;letter-spacing:.14em}
    .va h2.oh-en-lg{font-size:48px}
    .va .ft-title{font-size:54px}
    .va .feature .ft-body{grid-template-columns:1fr;gap:40px}
    .va .ft-photos{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;position:static}
    .va .ftp{position:static;width:auto !important;height:280px !important;box-shadow:none !important}
    .va .hero-coverlines{display:none}
    .va .sg,.va .food,.va .annex,.va .acc,.va .invoice{grid-template-columns:1fr}
    .va .stay,.va .plans,.va .fac{grid-template-columns:1fr 1fr}
    .va .annex-grid{grid-template-columns:1fr}
    .va .lucha-collage{grid-template-columns:1fr 1fr;grid-auto-rows:160px}
    .va .lc{grid-column:auto !important;grid-row:auto !important}
    .va .lucha-body,.va .lucha-features{grid-template-columns:1fr}
    .va .rooms .room{grid-column:1/span 12 !important}
    .va .amen{grid-template-columns:repeat(2,1fr)}
    .va .gallery{grid-template-columns:repeat(3,1fr)}
  }

  /* PHONE */
  @media(max-width:640px){
    .va{overflow-x:hidden}
    .va .hero{height:auto;min-height:0;aspect-ratio:3/4;max-height:none}
    .va .hero h1{font-size:46px}
    .va .hc-ja{font-size:17px;letter-spacing:.1em;padding-top:24px}
    .va .hc-ja:before{width:30px}
    /* hero chrome was positioned for a tall desktop hero — tighten for the short mobile hero */
    .va .hero-frame{inset:12px}
    .va .hero-cap{left:18px;bottom:92px}
    .va .hcap-en{font-size:18px}
    .va .hcap-ja{font-size:11px}
    .va .hero-dots{bottom:74px}
    .va .hero-scroll{display:none}
    /* hide the redundant/empty sticky bar on phones — nav 「ご予約」 stays available */
    .va .stickybook{display:none}

    /* top announcement — stack on phones */
    .va .notice-band{padding:30px 12px 0}
    .va .nb-inner{flex-wrap:wrap;gap:12px 16px;padding:16px 18px}
    .va .nb-left{flex-direction:row;align-items:center;gap:12px}
    .va .nb-title{font-size:13.5px}
    .va .nb-go{width:100%;text-align:right}

    /* sections: kill the giant desktop whitespace */
    .va section{padding:56px 18px}
    .va .oh{margin:0 auto 36px}
    .va .oh-eyebrow{gap:10px;flex-wrap:wrap}
    .va h2.oh-en-lg{font-size:34px}
    .va .oh-en{font-size:26px}
    .va .oh-title{font-size:18px;letter-spacing:.04em;line-height:1.65;margin-top:14px}
    .va .oh-lead{font-size:13px;line-height:1.9;margin-top:16px}
    .va .sec-cta{margin-top:40px}
    .va .morebtn{padding:14px 28px;font-size:13px}

    /* booking widget — stack fields 2-up, full-width search */
    .va .booking{margin:-30px 12px 0}
    .va .book-rate{flex-wrap:wrap;gap:6px 10px;padding:12px 14px}
    .va .rate-txt{font-size:12px;line-height:1.6}
    .va .rate-note{display:none}
    .va .bw{flex-wrap:wrap;padding:8px 8px 12px}
    .va .bw-lead,.va .bw-arrow{display:none}
    .va .bw-field{flex:1 1 44%;border-right:none;border-bottom:1px solid var(--rule);padding:10px 14px}
    .va .bw-go{flex:1 1 100%;margin:12px 0 0;padding:16px}
    .va .book-sub{flex-direction:column;gap:12px;align-items:flex-start;padding:14px}
    .va .book-links{gap:20px}

    /* feature spread */
    .va .feature{padding:64px 18px}
    .va .ft-head{margin-bottom:44px}
    .va .ft-title{font-size:40px}
    .va .ft-title-jp{font-size:14px;letter-spacing:.3em;margin-top:18px}
    .va .ftp{height:230px !important}

    /* one column everywhere it matters */
    .va .stay,.va .plans,.va .fac,.va .menu,.va .bullets,.va .suite-plans,.va .lucha-features,.va .annex-types{grid-template-columns:1fr}
    .va .amen{grid-template-columns:repeat(2,1fr)}
    .va .gallery{grid-template-columns:repeat(2,1fr)}
    .va .g-cell{height:140px}

    /* tame oversized media heights */
    .va .sg-img{height:380px}
    .va .food-ph,.va .annex-ph{height:280px}
    .va .stc-ph{height:300px}
    .va .map{min-height:320px}
    .va .acc-info{padding:28px 20px}
    .va .acc-info dl{grid-template-columns:78px 1fr;gap:12px 16px}
    .va .invoice{grid-template-columns:1fr}
    .va .inv-main{padding:36px 22px}
    .va .inv-lead{font-size:16px}
    .va .inv-aside{padding:32px 22px}
    .va .room .spec{grid-template-columns:1fr;gap:14px}
    .va .f-brand{grid-column:1/-1}
    .va .room h3{font-size:21px}
    .va .rooms{row-gap:44px}

    /* sauna / lucha dark sections */
    .va .sauna,.va .lucha{padding:64px 18px}
    .va .lucha-en{font-size:48px}
    .va .lucha-collage{grid-template-columns:1fr 1fr;grid-auto-rows:120px}
    .va .lucha-body{margin-top:40px;gap:36px}
    .va .reserve,.va .lucha-cta{width:100%;justify-content:center;box-sizing:border-box}

    /* plans cta + footer */
    .va .plans-cta{flex-direction:column;gap:20px;align-items:stretch;text-align:center}
    .va .pc-rate{justify-content:center}
    .va .f-cta{padding:60px 18px}
    .va footer h4{font-size:42px}
    .va .f-resbtn{width:100%;justify-content:center;box-sizing:border-box}
    .va .f-top{grid-template-columns:1fr 1fr;gap:28px 24px;padding:52px 18px 44px}
    .va .f-bot{flex-direction:column;gap:8px;padding:24px 18px;text-align:center;letter-spacing:.12em}
  }
`;

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