/* Winter 2026-27 tokens (03_design.md §2) and the parts the autumn page did not have. Loaded last. */
:root{
 --ember:#B4432B;--ember-d:#9A3721;--ember-rgb:180,67,43;
 --ink:#1C2833;--ink-rgb:28,40,51;--ink-deep:#121B23;
 --frost-gold:#C9A962;
 --lake:#2F5D7C;
 --snow:#F3F6F7;--ice:#D9E5EC;--ice-rgb:217,229,236;
 --mute:#5A6670;--mute-rgb:90,102,112;
 --text-w:#F1F4F6;--text-w-m:#AEBBC6;
 --hearth-rgb:44,24,16;
 --line:#C3CDD4;--line-soft:#D5DEE4;
 --white:#fff;--focus:#E8B147;
 --sans:'Hiragino Sans','Yu Gothic',Meiryo,sans-serif
}
body{background:var(--snow);color:var(--ink)}
img{height:auto}
.scene-media picture{display:contents}

/* Hero: whiter photographs need a deeper scrim than autumn (left + bottom). */
.scene-hero .scene-scrim{background:linear-gradient(90deg,rgba(var(--ink-rgb),.84) 0%,rgba(var(--ink-rgb),.5) 45%,rgba(var(--ink-rgb),.06) 78%),linear-gradient(0deg,rgba(var(--ink-rgb),.78),transparent 32%,transparent 72%,rgba(var(--ink-rgb),.55))}
.scene-snow .scene-image{object-position:50% 45%}
.chapter-copy>p.chapter-link{margin-top:18px;font-size:13px}
.chapter-copy>p.chapter-link a{color:inherit;border-bottom:1px solid #ffffff80;text-decoration:none;padding-bottom:3px}

/* The winter h1 runs 12 characters a line; keep it on two lines and leave room for the price row. */
.scene-hero .hero-typography{top:18%}
.scene-hero .hero-typography h1{font-size:clamp(36px,4vw,58px)}
@media(min-width:681px) and (max-height:820px){.scene-hero .hero-typography{top:16%}.scene-hero .hero-typography h1{font-size:min(4vw,5.6vh)}}

/* Lead price (until the early-booking date closes; see $heroPrice in index.php). */
.lead-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:18px 0 0 5px;font-size:13px;letter-spacing:.04em}
.lead-price b{font:400 30px/1.2 Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em;white-space:nowrap}
.lead-price b span{font:15px/1 var(--sans);margin-left:2px}
.lead-price small{flex-basis:100%;font-size:11px;line-height:1.7;opacity:.85}
.plans .lead-price{margin:0 0 30px;color:var(--ink)}
.plans .lead-price b{color:var(--ember)}
.plans .lead-price small{color:var(--mute);opacity:1}


/* Plans grouped by purpose: five lead plans as rows, four supporting plans as small cards. */
.plan-group+.plan-group{margin-top:64px}
.plan-group-title{display:flex;align-items:center;gap:16px;margin-bottom:30px;font-size:15px;letter-spacing:.1em;color:var(--lake)}
.plan-group-title:after{content:'';flex:1;height:1px;background:var(--line)}
.plan-sub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.plan-group-title+.plan-sub-grid{margin-top:0;padding-top:0;border-top:0}
.plan-sub{display:flex;flex-direction:column;min-width:0}
.plan-sub .plan-visual img{aspect-ratio:3/2}
.plan-sub .plan-info{padding-top:16px}
.plan-sub .plan-info h4{font-size:20px;margin-bottom:8px}
.plan-sub .plan-info>p:not(.plan-kind):not(.benefit){min-height:0;font-size:13px}
.plan-sub .plan-link{margin-top:auto;font-size:13px;padding-block:12px}
.plan-sub .plan-info>p:last-of-type{margin-bottom:16px}
.plans-all .stay-plan .benefit small{margin-top:4px}

/* Album captions link to the hotel's own pages. */
.album-item small{white-space:normal}
.album-note{display:block;margin-top:14px;font-size:12px;color:var(--text-w-m)}
.album-note a{color:var(--text-w)}

/* Film dialog with Day 1 / Day 2 switch. */
.film-tabs{display:flex;gap:6px}
.film-tabs button{background:transparent;color:var(--text-w-m);border:1px solid #ffffff40;padding:6px 14px;font-size:12px}
.film-tabs button[aria-pressed=true]{background:var(--text-w);color:var(--ink);border-color:var(--text-w)}
.film-note{margin-top:10px;font-size:11px;color:var(--text-w-m)}
dialog{background:var(--ink-deep)}

.faq details p a,.practical a{color:var(--lake)}

@media(max-width:1000px){
 .plan-sub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 /* SP: copy sits low over a heavy bottom scrim (bottom 40% at .85 or more). */
 .scene-hero .scene-scrim{background:linear-gradient(0deg,rgba(var(--ink-rgb),.92) 0%,rgba(var(--ink-rgb),.86) 42%,rgba(var(--ink-rgb),.74) 62%,rgba(var(--ink-rgb),.6) 76%,rgba(var(--ink-rgb),.38) 90%,rgba(var(--ink-rgb),.5) 100%)}
 .scene:not(.scene-hero) .scene-scrim{background:linear-gradient(180deg,rgba(var(--ink-rgb),.5) 0%,rgba(var(--ink-rgb),.72) 35%,rgba(var(--ink-rgb),.78) 70%,rgba(var(--ink-rgb),.9) 100%)}
 .scene-dinner:not(.scene-hero) .scene-scrim{background:linear-gradient(180deg,rgba(var(--hearth-rgb),.5) 0%,rgba(var(--hearth-rgb),.74) 35%,rgba(var(--hearth-rgb),.8) 70%,rgba(var(--hearth-rgb),.92) 100%)}
 .scene-hero .hero-typography{top:auto;bottom:calc(160px + env(safe-area-inset-bottom))}
 .scene-hero .hero-typography h1{font-size:clamp(22px,7vw,30px)}
 .scene-hero .film-open{bottom:calc(104px + env(safe-area-inset-bottom))}
 .scene-hero .reserve-disc{top:100px;bottom:auto;right:20px;width:84px;height:84px;font-size:11px}
 .chapter-copy h2{font-size:clamp(22px,7.2vw,31px)}
 .lead-price{margin:14px 0 0;font-size:12px;gap:0 10px}
 .lead-price b{font-size:26px}
 .lead-price small{font-size:10px}
 .plans .lead-price{margin-bottom:22px}
 .plan-group+.plan-group{margin-top:48px}
 .plan-group-title{margin-bottom:6px}
 .plan-sub-grid{display:block;margin-top:32px;padding-top:0;border-top:0}
 .plan-group-title+.plan-sub-grid{margin-top:20px}
 .plan-sub{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:16px;align-items:start;padding-block:20px;border-top:1px solid var(--line)}
 .plan-sub .plan-info{padding-top:0}
 .plan-sub .plan-info h4{font-size:18px}
 .plan-sub .plan-link{margin-top:10px}
 .film-dialog-header{flex-wrap:wrap}
 .film-tabs{order:3;flex-basis:100%}
}
@media(max-width:680px) and (max-height:740px){
 .scene-hero .hero-typography{bottom:calc(152px + env(safe-area-inset-bottom))}
 .scene-hero .hero-typography .hero-plan-index{display:none}
 .scene-hero .film-open{bottom:calc(98px + env(safe-area-inset-bottom))}
 .scene-hero .reserve-disc{display:none}
 .scene-hero .hero-copy{font-size:12px;line-height:1.85}
 .lead-price{margin-top:10px}
}
@media(max-width:360px){
 .scene-hero .film-open>span:last-child{max-width:none}
 .lead-price b{font-size:23px}
 .scene-hero .reserve-disc{width:76px;height:76px;font-size:10px}
}

/* H1/L3: on PC the B variant's snow chapter loop stays hidden. Since 2026-10-29 the hero's family loop plays on PC too,
   as the half-width portrait film over the still photograph (cinematic.css). */
@media(min-width:1001px){
 .scene .scene-film{display:none!important}
 .scene-hero .scene-aside{text-shadow:0 1px 10px rgba(var(--ink-rgb),.7),0 0 2px rgba(var(--ink-rgb),.5)}
}
/* H5: the location line sits over a moving film; keep it readable at any frame. */
.scene-hero .location{text-shadow:0 1px 6px rgba(0,0,0,.65)}

/* L1: let the browser balance headings and avoid one-character last lines (older browsers fall back to the normal wrap). */
h1,h2,h3,h4{text-wrap:balance}
p,small,li,summary,figcaption{text-wrap:pretty}

/* M4: a group with one supporting plan (snow play + pool) reads as a wide row, like the lead plans. */
@media(min-width:681px){
 .plan-sub-grid:has(>.plan-sub:only-child){grid-template-columns:minmax(0,1fr)}
 .plan-sub:only-child{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:center}
 .plan-sub:only-child .plan-info{padding-top:0}
 .plan-sub:only-child .plan-info h4{font-size:26px;margin-bottom:12px}
 .plan-sub:only-child .plan-info>p:not(.plan-kind):not(.benefit){font-size:14px}
 .plan-sub:only-child .plan-link{margin-top:20px}
}

/* M3: booking entry, winter page only (the shared css/booking-entry.css also serves home, autumn and family). */
body[data-lp="winter2026"] .listel-booking-entry{background:var(--white);border-color:var(--line);color:var(--ink);font-family:var(--sans)}
body[data-lp="winter2026"] .listel-booking-entry__intro>span{color:var(--mute)}
body[data-lp="winter2026"] .listel-booking-entry .listel-booking-entry__intro h2{color:var(--ink);font-family:var(--sans);font-weight:500}
body[data-lp="winter2026"] .listel-booking-entry__choices>a{border-color:var(--line);color:var(--ink);font-family:var(--sans);font-weight:500}
body[data-lp="winter2026"] .listel-booking-entry__choices>a.listel-booking-entry__primary{background:var(--ember);border-color:var(--ember);color:#fff}
body[data-lp="winter2026"] .listel-booking-entry__primary strong{font-weight:700}
body[data-lp="winter2026"] .listel-booking-entry .listel-booking-entry__note{color:var(--mute)}
body[data-lp="winter2026"] .listel-booking-entry a:focus-visible{outline-color:var(--focus)}
@media(max-width:700px){
 body[data-lp="winter2026"] .listel-booking-entry__choices{grid-template-columns:1fr}
 body[data-lp="winter2026"] .listel-booking-entry__intro h2 br{display:inline}
 body[data-lp="winter2026"] .listel-booking-entry .listel-booking-entry__intro h2{font-size:20px}
 body[data-lp="winter2026"] .listel-booking-entry__choices>a{padding:12px 14px;font-size:14px}
}
/* Hero kept to title, one line and one button so the photograph carries it; price and details live in the plans section. */
.nw{white-space:nowrap}
.scene-hero .hero-plan-direct{margin-left:0;margin-top:26px}
.scene-hero .hero-copy{max-width:none}
.scene-hero .scene-scrim{background:linear-gradient(90deg,rgba(var(--ink-rgb),.62) 0%,rgba(var(--ink-rgb),.3) 38%,rgba(var(--ink-rgb),0) 62%),linear-gradient(0deg,rgba(var(--ink-rgb),.66),rgba(var(--ink-rgb),.3) 16%,transparent 30%,transparent 80%,rgba(var(--ink-rgb),.4))}
.scene-hero .hero-typography h1,.scene-hero .hero-copy{text-shadow:0 2px 14px rgba(var(--ink-rgb),.5)}
/* Tablets: the copy sits at the top over sky, so darken from the top down. */
@media(min-width:681px) and (max-width:1000px){
 .scene-hero .scene-scrim{background:linear-gradient(180deg,rgba(var(--ink-rgb),.62) 0%,rgba(var(--ink-rgb),.42) 40%,rgba(var(--ink-rgb),.08) 58%,rgba(var(--ink-rgb),.3) 72%,rgba(var(--ink-rgb),.78) 100%)}
}
/* Landscape tablets would crop the portrait loop to sky; show the still instead. */
@media(min-width:681px) and (max-width:1000px) and (orientation:landscape){
 .scene-hero .hero-film,.scene .scene-film{display:none!important}
}
@media(max-width:680px){
 .scene-hero .scene-scrim{background:linear-gradient(0deg,rgba(var(--ink-rgb),.88) 0%,rgba(var(--ink-rgb),.72) 26%,rgba(var(--ink-rgb),.3) 46%,rgba(var(--ink-rgb),0) 60%,rgba(var(--ink-rgb),0) 84%,rgba(var(--ink-rgb),.45) 100%)}
}
@media(max-width:680px){
 .scene-hero .hero-plan-direct{margin-top:16px}
}
.scene-hero .film-open{text-shadow:0 1px 8px rgba(var(--ink-rgb),.85),0 0 2px rgba(var(--ink-rgb),.6)}
/* Phones: the film (the chosen photograph until it plays) sits in the top half untouched, and the copy sits below it on ink. */
@media(max-width:680px){
 .scene-hero{background:var(--ink)}
 .scene-hero .scene-media{bottom:auto;height:56%}
 .scene-hero .scene-image{object-position:50% 40%;transform:none}
 .scene-hero .scene-scrim{background:linear-gradient(180deg,rgba(var(--ink-rgb),.45) 0%,rgba(var(--ink-rgb),0) 13%,rgba(var(--ink-rgb),0) 44%,rgba(var(--ink-rgb),1) 56%,rgba(var(--ink-rgb),1) 100%)}
 .scene-hero .hero-typography h1,.scene-hero .hero-copy,.scene-hero .location,.scene-hero .film-open{text-shadow:none}
}
@media(max-width:680px) and (max-height:740px){
 .scene-hero .scene-media{height:46%}
 .scene-hero .scene-scrim{background:linear-gradient(180deg,rgba(var(--ink-rgb),.45) 0%,rgba(var(--ink-rgb),0) 15%,rgba(var(--ink-rgb),0) 35%,rgba(var(--ink-rgb),1) 46%,rgba(var(--ink-rgb),1) 100%)}
}
/* 2026-10-29: plan links read as buttons (they were a ruled text row), and each card shows its 1/14 price above it. */
.plans-all .plan-link{justify-content:center;gap:12px;padding:15px 20px;border:1px solid var(--ember);border-radius:3px;background:var(--ember);color:#fff;font-weight:500;letter-spacing:.06em;transition:background .2s,border-color .2s,color .2s}
.plans-all .plan-link:hover{background:var(--ember-d);border-color:var(--ember-d);color:#fff}
.plans-all .plan-sub .plan-link{background:#fff;color:var(--ember)}
.plans-all .plan-sub .plan-link:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:18px;font-size:12px;color:var(--mute);letter-spacing:.04em}
.plan-price b{font:400 24px/1.3 Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;color:var(--ember);white-space:nowrap}
.plan-price b span{font:13px/1 var(--sans);margin-left:2px}
.plans-all .plan-price+.plan-link{margin-top:12px}
.plan-sub .plan-price{margin-top:auto;padding-top:4px}
.plan-sub .plan-price b{font-size:20px}
.plan-sub .plan-price+.plan-link{margin-top:10px}
@media(min-width:681px){.plan-sub:only-child .plan-price{margin-top:22px}}
.plan-nav-sticky{display:none}
/* Phones: the plan list runs about 20 screens, so the three kinds stay reachable just under the header while it is on screen,
   and the lead plans use a shorter photo and tighter heading. */
@media(max-width:680px){
 .plans-all .section-top .plan-nav{display:none}
 .plans-all .plan-nav-sticky{position:sticky;top:var(--plan-nav-top,72px);z-index:6;display:flex;width:auto;margin:0 -25px 6px;padding:10px 25px;gap:6px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line-soft);backdrop-filter:blur(8px)}
 .plans-all .plan-nav-sticky a{flex:1;justify-content:center;padding:9px 6px;font-size:13px}
 .plans-all .plan-group{scroll-margin-top:64px}
 .plans-all .stay-plan .plan-visual img{aspect-ratio:2/1}
 .plans-all .stay-plan+.stay-plan{margin-top:32px}
 .plans-all .stay-plan .plan-info{padding-top:18px}
 .plans-all .stay-plan .plan-info h4{font-size:23px;margin-bottom:10px}
 /* Supporting plans: photo and title side by side, then price and button across the full width. */
 .plan-sub{row-gap:0}
 .plan-sub .plan-visual{grid-column:1;grid-row:1/span 3}
 .plan-sub .plan-info{display:contents}
 .plan-sub .plan-info>*{grid-column:2}
 .plan-sub .plan-info>.plan-price,.plan-sub .plan-info>.plan-link{grid-column:1/-1}
 .plan-sub .plan-info>p:last-of-type{margin-bottom:0}
 .plan-sub .plan-price{margin-top:12px;padding-top:0}
 .plan-sub .plan-price b{font-size:20px}
}
@media(max-width:360px){
 .plans-all .plan-nav-sticky{margin-inline:-19px;padding-inline:19px}
 .plans-all .plan-nav-sticky a{font-size:12px;padding-inline:4px}
}
/* 2026-10-29 PC hero: the family loop instead of the still. Its blurred copy fills the frame so the copy sits on moving colour,
   and the still photograph underneath is hidden so the people do not appear twice. */
.hero-ambient{display:none}
@media(min-width:1001px){
 .scene-hero .scene-media .scene-image{visibility:hidden}
 .scene-hero{background:var(--ink)}
 .scene-hero .hero-ambient{display:block;position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(38px) brightness(.55) saturate(1.15);transform:translateZ(0)}
 .scene-hero .scene-scrim{background:linear-gradient(90deg,rgba(var(--ink-rgb),.72) 0%,rgba(var(--ink-rgb),.35) 45%,rgba(var(--ink-rgb),0) 70%),linear-gradient(0deg,rgba(var(--ink-rgb),.6),transparent 30%)}
 .scene-hero .hero-film{opacity:1}
}
/* 2026-10-29 plan comparison: "which suits you" choice, then the five winter plans side by side, then the non-ski plans as cards. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.plan-chooser{margin:34px 0 22px}
.plan-chooser-q{font-size:15px;letter-spacing:.08em;margin-bottom:12px;color:var(--ink)}
.plan-chooser-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.plan-chooser button{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:4px;background:#fff;text-align:left;color:var(--ink);transition:border-color .2s,background .2s}
.plan-chooser button strong{font-size:15px;font-weight:500}
.plan-chooser button span{font-size:12px;color:var(--mute)}
.plan-chooser button:hover{border-color:var(--ember)}
.plan-chooser button[aria-pressed="true"]{border-color:var(--ember);background:rgba(var(--ember-rgb),.06);box-shadow:inset 0 0 0 1px var(--ember)}
.plan-chooser button[aria-pressed="true"] strong{color:var(--ember)}
.plan-compare-hint{display:none;font-size:12px;color:var(--mute);margin-bottom:6px}
.plan-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-top:1px solid var(--line)}
.plan-compare{width:100%;min-width:900px;border-collapse:separate;border-spacing:0;font-size:14px;color:var(--ink)}
.plan-compare th,.plan-compare td{padding:13px 12px;border-bottom:1px solid var(--line-soft);text-align:center;vertical-align:middle;line-height:1.6;transition:background .25s,opacity .25s}
.plan-compare tbody th,.plan-compare tfoot th,.plan-compare .plan-compare-corner{position:sticky;left:0;z-index:1;width:172px;background:#fff;text-align:left;font-size:13px;font-weight:400;color:var(--mute)}
.plan-compare thead th{vertical-align:top;padding:18px 10px 16px;font-weight:400}
.plan-compare-corner span{display:block;font-size:12px;line-height:1.7}
.plan-compare-photo{display:block;overflow:hidden;border-radius:4px;margin-bottom:12px}
.plan-compare-photo img{aspect-ratio:3/2;object-fit:cover;transition:transform .5s}
.plan-compare-photo:hover img{transform:scale(1.05)}
.plan-compare-kind{display:block;font-size:11px;color:var(--ember);margin-bottom:4px}
.plan-compare-name{display:block;font-size:17px;font-weight:500;letter-spacing:.04em;line-height:1.5}
.plan-compare-for{display:block;margin-top:4px;font-size:12px;color:var(--mute);line-height:1.6}
.plan-compare td small{display:block;font-size:11px;color:var(--mute);line-height:1.5}
.plan-compare-none{color:#B8C3CB}
.plan-compare-ok{display:block;font:normal 700 18px/1.2 var(--sans);color:var(--ember)}
.plan-compare-price b{font:400 24px/1.2 Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;color:var(--ember);white-space:nowrap}
.plan-compare-price b span{font:12px/1 var(--sans);margin-left:2px}
.plan-compare tfoot td{padding:16px 8px;border-bottom:0}
.plan-compare tfoot .plan-link{margin:0;padding:12px 8px;font-size:13px;gap:8px}
.plan-compare.has-pick [data-plan]:not(.is-picked){opacity:.4}
.plan-compare [data-plan].is-picked{background:rgba(var(--ember-rgb),.05)}
.plan-compare thead th.is-picked{box-shadow:inset 0 3px 0 var(--ember)}
.plan-compare-note{margin-top:16px;font-size:12px;line-height:1.8;color:var(--mute)}
.plans-all .plan-group-onsen{margin-top:64px}
.plans-all .plan-group-onsen .plan-sub-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media(max-width:1000px){
 .plan-compare-hint{display:block}
 .plan-chooser-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .plan-chooser{margin:26px 0 18px}
 .plan-chooser button{padding:12px 12px}
 .plan-chooser button strong{font-size:14px}
 .plan-chooser button span{font-size:11px}
 .plan-compare-wrap{margin-inline:-25px;padding-left:0}
 .plan-compare{min-width:0;width:auto;font-size:13px}
 .plan-compare th,.plan-compare td{padding:11px 8px;min-width:148px}
 .plan-compare tbody th,.plan-compare tfoot th,.plan-compare .plan-compare-corner{width:92px;min-width:92px;padding-left:25px;font-size:11px;box-shadow:6px 0 10px -8px rgba(0,0,0,.25)}
 .plan-compare-name{font-size:15px}
 .plan-compare-corner span{font-size:10px;letter-spacing:0}
 .plan-compare-price b{font-size:20px}
 .plans-all .plan-group-onsen{margin-top:48px}
}
/* 2026-10-29 readability pass on the comparison: bigger, darker text; banded rows; a choice that looks pressable; a narrower phone table. */
.plan-chooser-q{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:17px;font-weight:500}
.plan-chooser-q small{font-size:12px;font-weight:400;color:var(--mute);letter-spacing:.04em}
.plan-chooser button{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:16px 16px;border:1px solid var(--line);border-radius:6px;background:var(--snow);box-shadow:0 2px 0 var(--line);cursor:pointer;transition:border-color .2s,background .2s,transform .15s,box-shadow .15s}
.plan-chooser button svg{grid-row:1/span 2;width:40px;height:40px;padding:7px;border-radius:50%;background:#fff;fill:none;stroke:var(--ember);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plan-chooser button strong{font-size:16px}
.plan-chooser button:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--line)}
.plan-chooser button[aria-pressed="true"]{background:#fff;transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--ember)}
.plan-chooser button[aria-pressed="true"] svg{background:var(--ember);stroke:#fff}
.plan-compare{font-size:15px}
.plan-compare tbody th,.plan-compare tfoot th,.plan-compare .plan-compare-corner{font-size:14px;font-weight:500;color:var(--ink)}
.plan-compare td small{font-size:12px;color:var(--mute)}
.plan-compare tbody tr:nth-child(even) th,.plan-compare tbody tr:nth-child(even) td{background:#F2F5F7}
.plan-compare-for{font-size:13px}
.plan-compare-lbl-sp{display:none}
@media(max-width:680px){
 .plan-chooser-q{font-size:16px}
 .plan-chooser button{grid-template-columns:34px 1fr;column-gap:10px;padding:12px 12px}
 .plan-chooser button svg{width:34px;height:34px;padding:6px}
 .plan-chooser button strong{font-size:14px}
 .plan-compare{font-size:14px}
 .plan-compare th,.plan-compare td{min-width:122px;padding:11px 6px}
 .plan-compare tbody th,.plan-compare tfoot th,.plan-compare .plan-compare-corner{width:84px;min-width:84px;padding-left:18px;padding-right:6px;font-size:12px;line-height:1.45}
 .plan-compare-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 .plan-compare-lbl-sp{display:inline}
 .plan-compare-wrap{margin-inline:-25px}
 .plan-compare-name{font-size:14px}
 .plan-compare-for{font-size:11px}
 .plan-compare td small{font-size:11px}
 .plan-compare-price b{font-size:19px}
 .plan-compare tfoot .plan-link{padding:11px 4px;font-size:12px;gap:4px;white-space:nowrap}
 .plan-compare-more{display:none}
}
@media(max-width:680px){
 .plan-chooser-options{grid-template-columns:1fr;gap:8px}
 .plan-chooser button{padding:10px 14px}
 .plan-chooser button span{font-size:12px}
}
@media(max-width:680px){
 .plan-compare{font-size:13px}
 .plan-compare tbody th,.plan-compare tfoot th,.plan-compare .plan-compare-corner{width:92px;min-width:92px;padding-left:14px;padding-right:4px}
 .plan-compare-name{font-size:13px}
}
@media(max-width:680px){.plan-compare-name{letter-spacing:0;white-space:nowrap}}
/* 2026-10-29: price and booking button sit in each plan's heading (like a shop's comparison table), so the button clearly belongs to that plan. */
.plan-compare thead th{padding-bottom:20px}
.plan-compare-head-price{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft)}
.plan-compare-head-price small{display:block;font-size:11px;color:var(--mute);line-height:1.5}
.plan-compare-head-price b{font:400 24px/1.25 Arial,Helvetica,sans-serif;font-variant-numeric:lining-nums tabular-nums;color:var(--ember);white-space:nowrap}
.plan-compare-head-price b span{font:12px/1 var(--sans);margin-left:2px}
.plan-compare thead .plan-link{margin:10px 0 0;padding:11px 8px;font-size:13px;gap:8px;white-space:nowrap}
.plan-compare thead th.is-picked .plan-link{box-shadow:0 0 0 3px rgba(var(--ember-rgb),.2)}
@media(max-width:680px){
 .plan-compare-head-price b{font-size:19px}
 .plan-compare-head-price small{font-size:10px}
 .plan-compare thead .plan-link{padding:10px 4px;font-size:12px;gap:4px}
}
.plan-compare thead .plan-link{gap:0}.plan-compare thead .plan-link span[aria-hidden="true"]{margin-left:8px}@media(max-width:680px){.plan-compare thead .plan-link span[aria-hidden="true"]{margin-left:4px}}
/* 2026-10-29 stay-date picker above the comparison */
.plan-date{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0 18px;padding:14px 18px;border:1px solid var(--line);border-radius:6px;background:#fff}
.plan-date label{font-size:15px;font-weight:500;color:var(--ink)}
.plan-date-field{display:inline-flex;align-items:center;gap:6px}
.plan-date input{font:500 17px/1.2 Arial,var(--sans);color:var(--ink);padding:9px 12px;border:1px solid var(--ember);border-radius:4px;background:#fff;min-height:44px}
.plan-date input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.plan-date-wd{font-size:15px;color:var(--ink)}
.plan-date small{flex-basis:100%;font-size:12px;line-height:1.7;color:var(--mute)}
.plan-date-status{flex-basis:100%;margin:0;font-size:13px;color:var(--ember)}
.plan-date-status:empty{display:none}
@media(max-width:680px){
 .plan-date{padding:12px 14px}
 .plan-date input{font-size:16px}
}
@media(max-width:680px){.plan-compare-for{min-height:3.2em}}
.plan-early-chip{display:inline-block;margin:0 0 4px;padding:2px 8px;border-radius:99px;background:var(--ember);color:#fff;font:normal 500 11px/1.6 var(--sans);letter-spacing:.06em;white-space:nowrap}
.lead-price .plan-early-chip{margin:0 2px;align-self:center}
@media(max-width:680px){.plan-early-chip{font-size:10px;padding:1px 7px}}
/* Plan notes as icon lines (2026-10-30): the date picker's help and the comparison notes */
.plan-facts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.plan-date .plan-facts{flex-basis:100%;margin-top:4px}
.plan-facts li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.7;color:var(--mute)}
.plan-facts .ic{flex:0 0 18px;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--ember);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.plan-facts small{display:block;font-size:11.5px;opacity:.85}
ul.plan-compare-note{margin-top:20px;font-size:inherit}
@media(min-width:1001px){ul.plan-compare-note{grid-template-columns:1fr 1fr;column-gap:36px}}
/* Small kana and long-vowel marks never start a line (2026-10-30) */
html{line-break:strict}
/* Mobile comparison, observed on Amazon's mobile A+ table: compact labels above values, horizontal rules, one scroller. */
@media(max-width:680px){
 .plan-compare-wrap{position:relative;overscroll-behavior-x:contain;margin-inline:-10px;border-top:0}
 .plan-compare-wrap:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
 .plan-compare{--compare-column-width:clamp(145px,calc((100vw - 30px)/2),230px);display:block;width:max-content;min-width:100%;font-size:15px}
 .plan-compare thead,.plan-compare tbody{display:block}
 .plan-compare tr{display:grid;grid-template-columns:repeat(5,var(--compare-column-width))}
 .plan-compare .plan-compare-corner{display:none}
 .plan-compare th,.plan-compare td{min-width:0;width:auto;padding:0 6px 6px;text-align:left;line-height:1.5}
 .plan-compare thead th{padding:10px 6px 16px;border-bottom:0}
 .plan-compare tbody tr{border-top:1px solid #B8C3CB}
 .plan-compare tbody tr:last-child{border-bottom:1px solid #B8C3CB}
 .plan-compare tbody th{grid-column:1 / -1;position:static;width:auto;min-width:0;padding:4px 6px 0;background:#fff;color:var(--ink);font-size:14px;font-weight:700;line-height:1.5;box-shadow:none;border:0}
 .plan-compare-label{display:block;position:sticky;left:6px;width:max-content;max-width:calc(100vw - 42px)}
 .plan-compare tbody tr:nth-child(even) th{background:#fff}
 .plan-compare tbody td,.plan-compare tbody tr:nth-child(even) td{background:#fff;border:0}
 .plan-compare-name{font-size:14px;white-space:normal;min-height:0;line-height:1.5}
 .plan-compare-for{font-size:12px;line-height:1.5;min-height:3em;margin-top:4px}
 .plan-compare-photo{margin-bottom:6px}
 .plan-compare-head-price{margin-top:6px;padding-top:6px;border-top:0}
 .plan-compare-head-price b{font-size:22px}
 .plan-compare thead .plan-link{min-height:44px;margin-top:8px;padding:10px 6px;white-space:normal;justify-content:center}
 .plan-compare.has-pick [data-plan]:not(.is-picked){opacity:1}
 .plan-compare tbody [data-plan].is-picked,.plan-compare tbody tr:nth-child(even) [data-plan].is-picked{background:rgba(var(--ember-rgb),.05)}
}

/* Phone table (2026-10-30): a third column peeks in, less space on the left, and a chip that says it scrolls until the first swipe. */
.plan-compare-box{position:relative}
.plan-compare-swipe{display:none}
@media(max-width:1000px){
 .plan-compare-hint{display:none}
 .plan-compare-swipe{display:flex;align-items:center;gap:6px;position:absolute;z-index:3;top:64px;right:10px;padding:8px 14px;border-radius:999px;background:rgba(16,32,48,.78);color:#fff;font-size:12px;letter-spacing:.06em;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18);transition:opacity .35s,transform .35s}
 .plan-compare-swipe i{font-style:normal;font-size:14px;animation:plan-swipe 1.4s ease-in-out infinite}
 .plan-compare-box.is-scrolled .plan-compare-swipe{opacity:0;transform:translateX(8px)}
}
@keyframes plan-swipe{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.plan-compare-swipe i{animation:none}}
@media(max-width:680px){
 .plan-compare-wrap{margin-left:-25px;margin-right:-25px}
 .plan-compare{--compare-column-width:clamp(140px,calc((100vw - 54px)/2),230px);padding-left:8px;padding-right:8px}
 .plan-compare-label{left:2px}
}

/* Phone line breaks (2026-10-30): .ph is one phrase; a line only breaks between phrases (Safari has no word-break:auto-phrase). */
.ph{display:inline-block}
@media(max-width:680px){
 .interlude h2{font-size:min(35px,8.6vw)}
 .section-top h2#plans-title{font-size:min(35px,8.4vw)}
}

/* Comparison: a heading row says the rows are what each plan includes (2026-11-02). */
.plan-compare tbody .plan-compare-group th{position:static;width:auto;min-width:0;padding:14px 12px 10px;background:#fff;border-bottom:2px solid var(--ember);box-shadow:none;color:var(--ember);font-size:15px;font-weight:700;letter-spacing:.06em;text-align:left}
.plan-compare tbody .plan-compare-group th small{display:inline;margin-left:10px;font-size:12px;font-weight:400;color:var(--mute);letter-spacing:0}
@media(max-width:680px){
 .plan-compare tbody tr.plan-compare-group{border-top:0}
 .plan-compare tbody .plan-compare-group th{padding:10px 6px 8px;font-size:15px}
}

/* PC: plan columns share the width equally (2026-11-02). With auto layout a long cell (the 手ぶら glove note) widened its column and enlarged that card's photo. */
@media(min-width:1001px){.plan-compare{table-layout:fixed}}