// 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 (
);
};
const Hero = () => (
);
const Intro = () => (
Conceptこの一室のために
サウナは、
誰にも譲りたくない。
大浴場でも、共用サウナでもない。客室の中だけに用意した、あなただけのプライベートサウナ。温度も、香りも、音も、時間も——すべてを自分のものにして、心ゆくまで「ととのう」。太田ナウが、この一室にこだわり抜いた理由です。
※客室内に備わるプライベートサウナです(スイート1室限定/定員2名)。共用の大浴場・サウナ・温泉はございません。
);
const Ritual = () => (
№ 01整いの作法
The ritual
蒸して、冷まして、憩う。
{RITUAL.map((r,i)=>(
{r.no}
{r.en}
{r.ja}
{r.d}
))}
);
const Details = () => (
№ 02こだわり
Six details
細部まで、整えた。
);
const Gallery = () => (
{GALLERY.map((g,i)=>(
№ {String(i+1).padStart(2,'0')} — {g.cap}
))}
);
const Plans = () => (
№ 04ご利用方法
Stay or visit
泊まっても、日帰りでも。
{PLANS.map((p,i)=>(
{p.k}
{p.ja}
{p.h}
{p.p}(税込)
{p.s}
))}
);
const Footer = () => (
);
const MobileCTA = () => (
);
const App = () => (
);
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();