/* 宿 二帆（架空）… 絵の中へ潜っていくトップページ */
:root{
  --paper:#f2ece0;--paper2:#e9e1d1;--ink:#1d2b3d;--ink2:#4a5566;--akane:#b2462c;--akane-d:#8e3420;
  --rule:rgba(29,43,61,.18);
  --hh:64px;
  /* 絵の色（昼） */
  --ln:#25374d;--lni:#3b2c22;--wl:#2c4a66;--sea:#cfdadb;--sea2:#a9bcc2;--land:#efe7d6;--land2:#e4d9c3;
  --roof:#8e97a2;--roof2:#a4836c;--wall:#ebe2cf;--wall2:#ded2ba;--win:#cad2d2;--lit:#cad2d2;--tree:#ccd3bd;
  --street:#e3dbc9;--pier:#d6cebd;--cloud:#f7f3eb;--hill:#d6ddd3;--far:#b5c4c7;
  --sky1:#cfdee3;--sky2:#ebefe9;--sky3:#f3eee2;--pw:#56768f;--pp:#8a9768;--sun:#f3e4b9;--glint:#ffffff;
  --inwall:#ebdfc6;--inwall2:#e1d2b5;--ceil:#d6c3a0;--tatami:#d8cd9c;--shoji:#f5f0e4;--wood:#c8a479;--wood2:#8a6345;
  --table:#73452f;--table2:#55301f;--lacq:#2a1c18;--lacq2:#9a2e20;--white:#f8f5ee;--rice:#fcfbf6;--sashimi:#e3876c;
  --fish:#b98a5a;--shiso:#78985a;--sudachi:#a9bf5a;--igo:#6c683c;--soup:#b88a4f;--nori:#4c5839;--sake:#efe3c0;
  --toko:#d6c199;--vase:#3d4a5a;--zabuton:#7a3a38;--kama:#57524d;--dark:#3a3330;--doma:#cbbfa9;--yu:#bad1d3;
  --noren:#2c4566;--lamp:#efe0b8;--niwa:#7c9168;--pine:#5b7550;--sudare:#d5be8e;--gold:#c2a258;--tray:#3a1e19;
  --washi:#f7f2e7;--print:#b2462c;--steam:rgba(255,255,255,.85);
}
.tod-asa{--sky1:#b9d0dc;--sky2:#f0d8c9;--sky3:#f7e7d5;--sea:#d2dfe1;--sea2:#adc1c6;--sun:#f6d6ae;--lit:#cad2d2;--land:#f1eadb}
.tod-yu{
  --ln:#3a2a33;--wl:#6d3f3d;--sea:#d9b6a3;--sea2:#b98d7b;--land:#f0dcc6;--land2:#e6cdb3;--roof:#8c7f86;--roof2:#9e735f;
  --wall:#efdcc4;--wall2:#e2c9ad;--win:#cdb7a2;--lit:#f3c070;--tree:#d1c4a8;--street:#e8d3bc;--pier:#dfc8b2;--cloud:#f6dfc8;
  --hill:#d9bba7;--far:#a77e78;--sky1:#c25841;--sky2:#e99d72;--sky3:#f5d4a5;--pw:#86504b;--pp:#9c7d5c;--sun:#ffe1a0;--glint:#ffe8bf;
  --lamp:#f7d58e;
}
.tod-yoru{
  --ln:#c3cedb;--wl:#8ea3bb;--sea:#15243b;--sea2:#0f1b2e;--land:#22314a;--land2:#1c2a40;--roof:#33425b;--roof2:#3c3c4e;
  --wall:#2a3850;--wall2:#34435c;--win:#2b3a52;--lit:#f4b75e;--tree:#2b3c4c;--street:#27354b;--pier:#2e3c53;--cloud:#26354d;
  --hill:#1d2b42;--far:#26364d;--sky1:#081020;--sky2:#172846;--sky3:#2b3d5c;--pw:#6f88a6;--pp:#506375;--sun:#f3ecd4;--glint:#f3ecd4;
  --inwall:#e5c58f;--inwall2:#d8b47c;--ceil:#c9a46e;--tatami:#ccb576;--shoji:#f3dca9;--lamp:#ffd88a;--sudare:#a58758;--noren:#20344f;
  --white:#f3ead6;--steam:rgba(255,240,215,.75);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-size:16px;line-height:1.95;letter-spacing:.04em;font-feature-settings:"palt" 0}
a{color:inherit}
h1,h2,h3{font-weight:700;margin:0;line-height:1.4;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
p{margin:0 0 .9em}
button{font:inherit;color:inherit}

.demo-band{margin:0;background:var(--ink);color:#e8e6df;font-family:"Klee One",sans-serif;font-size:12px;line-height:1.6;padding:6px 16px;text-align:center;letter-spacing:.05em;position:relative;z-index:60}

/* ヘッダー（地は不透明） */
.hd{position:sticky;top:0;z-index:50;height:var(--hh);display:flex;align-items:center;gap:22px;padding:0 24px;background:var(--paper);border-bottom:1px solid var(--rule)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;min-height:44px}
.mk{width:34px;height:34px;fill:var(--akane);stroke:var(--akane);stroke-width:2.5}
.mk circle{fill:none}
.logo-t{font-size:20px;font-weight:700;letter-spacing:.2em}
.logo-s{font-family:"Klee One",sans-serif;font-size:12.5px;color:var(--ink2);letter-spacing:.12em;padding-left:10px;border-left:1px solid var(--rule)}
.hd-tel{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;line-height:1.25;min-height:44px;justify-content:center}
.hd-tel small{font-family:"Klee One",sans-serif;font-size:11.5px;color:var(--ink2)}
.hd-tel span{font-size:19px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--akane);color:#fbf6ee;text-decoration:none;font-weight:700;letter-spacing:.14em;border:0;border-radius:2px;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--akane-d)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--akane);outline-offset:3px}
.hd-btn{min-height:46px;padding:0 20px;font-size:15px}

/* 絵（JS が動かないときは普通の縦並び） */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.art{margin:0;height:62vh;min-height:340px;border-bottom:1px solid var(--rule);background:var(--paper2)}
.art svg{display:block;width:100%;height:100%}
.dp{position:relative}
.pn{max-width:640px;margin:0 auto;padding:40px 22px 56px}

/* 絵の線と色 */
:where(.L :is(path,rect,circle,ellipse,use):not([fill])){fill:none}
.s,.si,.s-ak,.s-ak2,.wm-l,.wm-c,.wm-r,.route,.ring{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.s{stroke:var(--ln);stroke-width:1}
.si{stroke:var(--lni);stroke-width:1}
.t{stroke-width:.55}
.b{stroke-width:1.6}
.s-ak{stroke:var(--akane);stroke-width:1.4}
.s-ak2{stroke:var(--print);stroke-width:1.2;opacity:.75}
.wl{fill:none;stroke:var(--wl)}
.wl2{fill:none;stroke:var(--sea)}
.f-sea-s{fill:none;stroke:var(--sea)}
.f-street-s{fill:none;stroke:var(--street)}
.pw{fill:none;stroke:var(--pw);stroke-width:.8;opacity:.75}
.pp{fill:none;stroke:var(--pp);stroke-width:1}
.pp2{fill:none;stroke:var(--pp);stroke-width:.6;opacity:.6}
.sk1{stop-color:var(--sky1)}.sk2{stop-color:var(--sky2)}.sk3{stop-color:var(--sky3)}
.f-sea{fill:var(--sea)}.f-land{fill:var(--land)}.f-roof{fill:var(--roof)}.f-roof2{fill:var(--roof2)}
.f-wall{fill:var(--wall)}.f-wall2{fill:var(--wall2)}.f-win{fill:var(--win)}.f-win.lit{fill:var(--lit)}
.f-tree{fill:var(--tree)}.f-street{fill:var(--street)}.f-pier{fill:var(--pier)}.f-cloud{fill:var(--cloud)}
.f-hill{fill:var(--hill)}.f-far{fill:var(--far)}.f-paper{fill:var(--white)}.f-ink{fill:var(--ln)}.f-akane{fill:var(--akane)}
.f-inwall{fill:var(--inwall)}.f-inwall2{fill:var(--inwall2)}.f-ceil{fill:var(--ceil)}.f-tatami{fill:var(--tatami)}
.f-shoji{fill:var(--shoji)}.f-wood{fill:var(--wood)}.f-wood2{fill:var(--wood2)}.f-table{fill:var(--table)}.f-table2{fill:var(--table2)}
.f-lacq{fill:var(--lacq)}.f-lacq2{fill:var(--lacq2)}.f-white{fill:var(--white)}.f-rice{fill:var(--rice)}.f-sashimi{fill:var(--sashimi)}
.f-fish{fill:var(--fish)}.f-shiso{fill:var(--shiso)}.f-sudachi{fill:var(--sudachi)}.f-igo{fill:var(--igo)}.f-soup{fill:var(--soup)}
.f-nori{fill:var(--nori)}.f-sake{fill:var(--sake)}.f-toko{fill:var(--toko)}.f-vase{fill:var(--vase)}.f-zabuton{fill:var(--zabuton)}
.f-kama{fill:var(--kama)}.f-dark{fill:var(--dark)}.f-doma{fill:var(--doma)}.f-yu{fill:var(--yu)}.f-noren{fill:var(--noren)}
.f-lamp{fill:var(--lamp)}.f-niwa{fill:var(--niwa)}.f-pine{fill:var(--pine)}.f-sudare{fill:var(--sudare)}.f-gold{fill:var(--gold)}
.f-tray{fill:var(--tray)}.f-washi{fill:var(--washi)}.f-shadow{fill:rgba(10,4,2,.38)}
.sun{fill:var(--sun)}
.tod-yu .sun{opacity:0}
.glint{fill:none;stroke:var(--glint);stroke-width:3;stroke-linecap:round;opacity:.7}
.st{fill:none;stroke:var(--steam);stroke-width:3.5;stroke-linecap:round;vector-effect:none}
.route{fill:none;stroke:var(--akane);stroke-width:1.6;stroke-dasharray:7 6}
.route.r2{stroke-dasharray:2 5;stroke-width:1.8}
.ring{fill:none;stroke:var(--akane);stroke-width:1.2}
.grain{fill:none;stroke:rgba(255,220,200,.07);stroke-width:2}
.tray-edge{fill:none;stroke:rgba(255,230,210,.25);stroke-width:3}
.fiber{fill:none;stroke:rgba(150,120,80,.18);stroke-width:1.1}
.rule{fill:none;stroke:rgba(178,70,44,.13);stroke-width:1.2}
.print{fill:var(--print);font-family:"Zen Old Mincho",serif;font-weight:700;opacity:.85}
.print-f{fill:var(--print);opacity:.8}
.print-f-s{stroke:var(--print);stroke-width:2.5;opacity:.8}
.wm-c{fill:none;stroke:rgba(44,74,102,.28);stroke-width:1}
.wm-c.t{stroke-width:.6}
.wm-l{fill:none;stroke:rgba(44,74,102,.5);stroke-width:1}
.wm-r{fill:none;stroke:rgba(178,70,44,.5);stroke-width:1;stroke-dasharray:3 3}
.lb,.lbi{font-family:"Klee One",sans-serif;font-weight:600;fill:var(--ln);paint-order:stroke;stroke:var(--land);stroke-width:4px;stroke-linejoin:round}
.lbi{fill:var(--lni);stroke:rgba(255,248,232,.85)}
.lb.ak{fill:var(--akane)}
.lb.big,.lb.mid{font-weight:400;stroke:none;fill-opacity:.8}
.lb.rt{fill:var(--akane);font-weight:600}
.vt{writing-mode:vertical-rl;text-orientation:upright}
.noren-t{fill:#f1eadc;font-family:"Zen Old Mincho",serif;font-weight:700}
.tod-yoru .lb.ak,.tod-yoru .lb.rt{fill:#f0a77f}
.tod-yoru .lb{stroke:var(--sea2)}
.room-l{cursor:pointer}
.dish{cursor:pointer}
.L .hl{filter:none}

/* ---------------- JS が動くとき：絵は1枚の舞台に、文は絵の上に ---------------- */
.js .art{display:none}
.stage{position:fixed;inset:0;z-index:0;background:var(--sea);overflow:hidden;touch-action:pan-y}
.stage svg{display:block;width:100%;height:100%}
.js .stage .dish,.js .stage .room-l{pointer-events:auto}
.js main{position:relative;z-index:2;pointer-events:none}
.js main .pn,.js main .ft{pointer-events:auto}
.js .dp{padding:62vh 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.js #shima{padding-top:0;min-height:calc(100vh - var(--hh) - 30px);padding-bottom:70vh}
.js #shima .pn{margin-top:4vh}
.js .dp-loop{padding-bottom:95vh}
.js .pn{position:relative;width:min(452px,36vw);margin:0 0 0 5vw;padding:34px 36px 30px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 22px 50px -26px rgba(15,25,40,.45)}
.js .pn::before{content:"";position:absolute;inset:6px;border:1px solid var(--rule);pointer-events:none}
.js [data-pos=right] .pn{margin-left:auto;margin-right:calc(5vw + 96px)}
.js .pn-w{width:min(500px,40vw)}
.pn-k{font-family:"Klee One",sans-serif;color:var(--akane);font-size:14px;letter-spacing:.24em;margin-bottom:.5em;display:flex;align-items:center;gap:10px}
.pn-k::before{content:"";width:22px;height:1px;background:currentColor}
h1{margin:.1em 0 .55em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .5em}
.h1-a{font-size:21px;letter-spacing:.16em;width:100%}
.h1-b{font-size:62px;letter-spacing:.18em;line-height:1.05}
.h1-r{font-family:"Klee One",sans-serif;font-size:14px;color:var(--ink2);letter-spacing:.3em}
h2{font-size:31px;letter-spacing:.1em;margin:.1em 0 .7em}
h2 small{display:block;font-size:14px;color:var(--ink2);letter-spacing:.2em;font-weight:600;margin-top:.2em}
h3{font-size:17px;letter-spacing:.1em;margin-bottom:.6em}
.pn p{font-size:15.5px}
.note{font-size:13.5px!important;color:var(--ink2);line-height:1.85}
.acc{margin:1.1em 0 1.3em;border-top:1px solid var(--rule)}
.acc div{display:grid;grid-template-columns:8.6em 1fr;gap:12px;padding:.55em 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.7}
.acc dt{font-family:"Klee One",sans-serif;font-weight:600;color:var(--akane)}
.acc dd{margin:0}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.tel{display:flex;flex-direction:column;text-decoration:none;line-height:1.35;min-height:44px;justify-content:center}
.tel span{font-size:19px;font-weight:700;letter-spacing:.06em}
.tel small{font-size:12px;color:var(--ink2)}
.hint{margin:1.4em 0 0!important;font-family:"Klee One",sans-serif;font-size:13.5px!important;color:var(--ink2);display:flex;align-items:center;gap:10px}
.hint i{width:12px;height:22px;border:1px solid var(--ink2);border-radius:7px;position:relative;flex:none}
.hint i::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:5px;margin-left:-1px;background:var(--akane);border-radius:1px;animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(8px);opacity:0}100%{opacity:0}}
.sugi{list-style:none;margin:1em 0 1.2em;padding:0;border-top:1px solid var(--rule)}
.sugi li{display:grid;grid-template-columns:3.2em 1fr;gap:10px;padding:.65em 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.75}
.sugi b{font-family:"Klee One",sans-serif;color:var(--akane);font-weight:600}
.rooms{list-style:none;margin:1em 0 1.2em;padding:0;display:grid;gap:10px}
.rooms button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 12px;width:100%;text-align:left;background:transparent;border:1px solid var(--rule);padding:12px 14px;cursor:pointer;line-height:1.7;transition:border-color .2s,background .2s}
.rooms b{font-size:20px;letter-spacing:.12em}
.rooms .r-f{align-self:center;font-family:"Klee One",sans-serif;font-size:13px;color:var(--akane)}
.rooms span:last-child{grid-column:1/3;font-size:14px}
.rooms button:hover,.rooms button[aria-pressed=true]{border-color:var(--akane);background:rgba(178,70,44,.06)}
.hint2{font-family:"Klee One",sans-serif;font-size:13.5px!important;color:var(--akane)}
.fee{margin-top:1.2em;padding-top:1.1em;border-top:1px solid var(--rule)}
.fee table{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:.6em}
.fee th,.fee td{padding:.45em .3em;border-bottom:1px solid var(--rule);text-align:right;font-weight:400}
.fee th{text-align:left;font-family:"Klee One",sans-serif}
.fee thead td{font-family:"Klee One",sans-serif;font-size:13px;color:var(--ink2)}
.fee tbody td{font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.calc{margin-top:1em;padding:16px 16px 18px;background:var(--paper2);position:relative}
.c-t{font-family:"Klee One",sans-serif;font-size:13px!important;color:var(--akane);margin-bottom:.5em!important;letter-spacing:.2em}
.seg{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.seg button{flex:1;min-height:44px;min-width:52px;border:1px solid var(--rule);background:var(--paper);cursor:pointer;font-size:14.5px;letter-spacing:.06em;transition:background .15s,color .15s}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.c-sum{display:flex;align-items:baseline;gap:8px;margin:.5em 0 0!important}
.c-l{font-family:"Klee One",sans-serif;font-size:13.5px;color:var(--ink2)}
.c-sum output{font-size:38px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.c-y{font-size:16px}
.c-br{font-family:"Klee One",sans-serif;font-size:13px!important;color:var(--ink2);margin-bottom:.9em!important}
.btn-s{min-height:50px;width:100%;font-size:15px}

/* 手紙 */
.js [data-pos=letter]{align-items:flex-start}
.js .pn-letter{width:min(560px,94vw);margin-left:calc(50% - 400px);padding:0;background:transparent;border:0;box-shadow:none}
.js .pn-letter::before{display:none}
.sheet{position:relative;padding:40px 44px 34px;background:var(--washi);box-shadow:0 30px 60px -30px rgba(20,8,4,.6),0 0 0 1px rgba(120,80,40,.12);transform-origin:50% 0}
.sheet::after{content:"";position:absolute;inset:14px;border:1px solid rgba(178,70,44,.35);pointer-events:none}
.lt-lead{font-size:15px!important}
.f-row{margin-bottom:14px;position:relative;z-index:1}
.f-row label{display:flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.1em;margin-bottom:2px}
.f-row em{font-style:normal;font-family:"Klee One",sans-serif;font-size:11.5px;padding:0 7px;line-height:20px;background:var(--akane);color:#fff;letter-spacing:.1em}
.f-row em.opt{background:transparent;color:var(--ink2);border:1px solid var(--rule)}
.f-row input,.f-row select,.f-row textarea{width:100%;font-family:"Klee One",sans-serif;font-size:19px;color:#1d2a4a;background:transparent;border:0;border-bottom:1.5px solid rgba(29,43,61,.45);padding:6px 2px 4px;min-height:46px;border-radius:0;outline:none;transition:border-color .2s}
.f-row textarea{resize:vertical;line-height:48px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,rgba(29,43,61,.3) 47px,rgba(29,43,61,.3) 48px);border-bottom:0;padding-top:0;min-height:144px}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{border-color:var(--akane)}
.f-row [aria-invalid=true]{border-color:#c0392b;background:rgba(192,57,43,.05)}
.f-date{display:grid;grid-template-columns:1fr auto auto;gap:10px}
.f-date select{width:auto;padding-right:6px}
.f-use{font-size:13.5px!important;margin:6px 0 4px!important}
.f-pp{font-size:13px;margin-bottom:14px;color:var(--ink2)}
.f-pp summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-family:"Klee One",sans-serif}
.f-pp p{font-size:13px!important;line-height:1.85}
.f-err{color:#b0291b;font-size:14px!important;font-family:"Klee One",sans-serif;font-weight:600}
.btn-seal{width:100%;min-height:56px;font-size:17px}
.f-demo{font-family:"Klee One",sans-serif;font-size:12.5px!important;color:var(--ink2);text-align:center;margin:.6em 0 0!important}
.sealed{padding:40px 36px 30px;background:var(--paper);border:1px solid var(--rule);text-align:left;outline:none}
.env{position:relative;width:180px;height:112px;margin:0 auto 24px;background:#efe6d3;border:1px solid rgba(90,60,30,.35);perspective:600px}
.env-f{position:absolute;left:0;top:0;width:100%;height:70px;background:#e6dbc3;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;border-top:1px solid rgba(90,60,30,.35)}
.env-s{position:absolute;left:50%;top:52px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:var(--akane);color:#fff3e6;display:grid;place-items:center;font-size:24px;font-family:"Zen Old Mincho",serif;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.2)}
.sd-t{font-size:23px!important;font-weight:700;letter-spacing:.08em;text-align:center}
.sd-t small{display:block;font-size:13px;font-weight:400;color:var(--ink2);letter-spacing:.04em}
.sd-l{padding-left:1.4em;font-size:14.5px;line-height:1.85}
.sd-l li{margin-bottom:.4em}
.sd-u{font-size:14px!important}
.sd-u a{font-weight:700}
.sd-b{background:none;border:1px solid var(--rule);min-height:44px;padding:0 18px;cursor:pointer;font-size:14px}
.js .pn-info{margin-top:28px;margin-left:calc(50% - 400px);width:min(560px,94vw)}
.i-tel{font-size:28px!important;font-weight:700;letter-spacing:.06em;margin-bottom:.3em!important}
.i-tel a{text-decoration:none}
.map{display:inline-flex;align-items:center;min-height:44px}
.pn-loop h2{font-size:26px}
.ft{font-size:13px;line-height:1.85;padding:28px 24px 40px;color:var(--ink2)}
.js .ft{background:var(--paper);border:1px solid var(--rule);width:min(452px,36vw);margin:26px 0 0 5vw}
.ft-n{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:.14em}
.ft-d{font-family:"Klee One",sans-serif}

/* 封をする動き */
.folding .sheet{animation:fold 1.05s cubic-bezier(.6,0,.3,1) forwards}
@keyframes fold{0%{transform:none;opacity:1}45%{transform:perspective(1100px) rotateX(58deg) scaleY(.6);opacity:1}100%{transform:perspective(1100px) rotateX(82deg) scale(.32) translateY(-200px);opacity:0}}
.sealed.show .env-f{animation:flap .7s .15s cubic-bezier(.5,0,.2,1) both}
.sealed.show .env-s{animation:stamp .5s .8s cubic-bezier(.2,1.6,.4,1) both}
.sealed.show .sd-t,.sealed.show .sd-l,.sealed.show .sd-u,.sealed.show .sd-b{animation:rise .6s 1.1s both}
@keyframes flap{from{transform:rotateX(180deg)}to{transform:rotateX(0)}}
@keyframes stamp{from{transform:scale(2.2) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 目盛り（深さのナビ） */
.gauge{position:fixed;z-index:40;right:22px;top:50%;transform:translateY(-44%);display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:14px 10px 12px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 18px 40px -26px rgba(10,20,40,.5)}
.gauge ol{list-style:none;margin:0;padding:0 0 0 18px;position:relative}
.g-rail{position:absolute;left:21px;top:30px;height:calc(5 * 50px - 50px);width:1px;background:var(--ink2);opacity:.6}
.g-dot{position:absolute;left:-5px;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--akane);box-shadow:0 0 0 3px var(--paper);will-change:transform}
.gauge li a{display:flex;flex-direction:column;justify-content:center;height:50px;min-width:44px;padding-left:12px;text-decoration:none;line-height:1.2;position:relative}
.gauge li a::before{content:"";position:absolute;left:-1px;top:50%;width:7px;height:1px;background:var(--ink2)}
.gauge li b{font-size:19px;letter-spacing:.1em;font-weight:700;transition:color .2s}
.gauge li span{font-family:"Klee One",sans-serif;font-size:11px;color:var(--ink2);letter-spacing:.04em;white-space:nowrap}
.gauge li a.on b{color:var(--akane)}
.g-w{margin:4px 0 0!important;padding-top:8px;border-top:1px solid var(--rule);font-family:"Klee One",sans-serif;font-size:11px;line-height:1.4;color:var(--ink2);display:flex;flex-direction:column;align-items:center}
.g-w b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.g-sky{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;background:transparent;border:1px solid var(--rule);cursor:pointer;font-family:"Klee One",sans-serif;font-size:12px;color:var(--ink2)}
.g-sky b{font-size:14px;color:var(--ink)}

.mbar{display:none}
.tip{position:fixed;z-index:70;pointer-events:none;background:var(--paper);border:1px solid var(--akane);padding:8px 12px 7px;font-size:14px;line-height:1.55;max-width:260px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);transform:translate(-50%,calc(-100% - 14px))}
.tip b{display:block;font-family:"Klee One",sans-serif;color:var(--akane);font-size:15px}

@media (max-width:1100px){
  .hd-tel small{display:none}
  .gauge li span{display:none}
}
/* スマホ */
@media (max-width:760px){
  :root{--hh:54px}
  .demo-band{font-size:10.5px;padding:5px 12px;line-height:1.5}
  .hd{padding:0 10px 0 12px;gap:10px}
  .logo-s{display:none}
  .logo-t{font-size:18px;letter-spacing:.14em}
  .mk{width:30px;height:30px}
  .hd-tel{display:none}
  .hd-btn{min-height:44px;padding:0 14px;font-size:14px;letter-spacing:.08em}
  .js .dp{padding:56vh 0}
  .js #shima{padding-top:calc(46vh);padding-bottom:64vh;min-height:0}
  .js #shima .pn{margin-top:0}
  .js .pn,.js .pn-w,.js [data-pos=right] .pn,.js .ft{width:auto;margin:0 12px;padding:26px 22px 22px}
  .js .pn-letter,.js .pn-info{width:auto;margin-left:10px;margin-right:10px}
  .sheet{padding:30px 22px 26px}
  .sealed{padding:30px 22px 24px}
  .h1-a{font-size:18px}
  .h1-b{font-size:50px}
  h2{font-size:25px}
  .acc div{grid-template-columns:1fr;gap:0}
  .gauge{position:sticky;top:var(--hh);right:auto;transform:none;flex-direction:row;align-items:center;height:46px;padding:0 8px 0 4px;gap:4px;border-width:0 0 1px;box-shadow:none}
  .gauge ol{display:flex;flex:1;justify-content:space-between;padding:0}
  .g-rail{left:26px;right:84px;top:auto;bottom:6px;height:1px;width:auto}
  .gauge li a{height:44px;padding:0 8px;align-items:center}
  .gauge li a::before{display:none}
  .gauge li b{font-size:15px;letter-spacing:.06em}
  .g-w{display:none!important}
  .g-sky{min-height:40px;padding:0 10px;gap:4px}
  .mbar{display:grid;grid-template-columns:1fr 1.5fr;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--paper);border-top:1px solid var(--rule);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:10px;transition:transform .25s}
  .mbar a{display:flex;align-items:center;justify-content:center;min-height:52px;text-decoration:none;font-weight:700;letter-spacing:.1em;border:1px solid var(--ink);font-size:15.5px}
  .mbar .mb-main{background:var(--akane);border-color:var(--akane);color:#fbf6ee}
  .mbar.away{transform:translateY(110%)}
  body{padding-bottom:0}
  .js .dp-loop{padding-bottom:90vh}
  .f-date{grid-template-columns:1fr 1fr}
  .f-date input{grid-column:1/3}
  .art{height:52vh}
}
@media (prefers-reduced-motion:reduce){
  .hint i::after{animation:none;top:8px}
}
.room-hl{fill:rgba(178,70,44,0);transition:fill .3s}
.room-hl.on{fill:rgba(178,70,44,.12);stroke:var(--akane);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:8 5}
.room-l.on{fill:var(--akane)}
.nw{white-space:nowrap}
html:not(.js) .js-only{display:none!important}