// 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 = () => (
プライベートサウナ
Private Sauna Suite1 室 限 定整う · ととのう
Private Sauna · in your suite

Just
breathe.

整 う を 、 ひ と り 占 め 。
Scroll to explore
); const Intro = () => (
Conceptこの一室のために

サウナは、
誰にも譲りたくない。

大浴場でも、共用サウナでもない。客室の中だけに用意した、あなただけのプライベートサウナ。温度も、香りも、音も、時間も——すべてを自分のものにして、心ゆくまで「ととのう」。太田ナウが、この一室にこだわり抜いた理由です。

※客室内に備わるプライベートサウナです(スイート1室限定/定員2名)。共用の大浴場・サウナ・温泉はございません。
); const Ritual = () => (
№ 01整いの作法

The ritual

蒸して、冷まして、憩う。
{RITUAL.map((r,i)=>(
{r.ja}{r.no}
{r.en}

{r.ja}

{r.d}

))}
); const Details = () => (
№ 02こだわり

Six details

細部まで、整えた。
{DETAILS.map(d=>(
№ {d.k}

{d.t}

{d.d}

))}
); const Gallery = () => (
№ 03ギャラリー

In the room

{GALLERY.map((g,i)=>(
{g.cap}
№ {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}

))}
サウナスイートを予約する
Best Rate公式サイトからのご予約が一番おトクです。
); 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();