:root{--bg:#fff;--sub:#f0efec;--ink:#2a2a28;--mute:#77756f;--line:#d9d7d1;--wood:#a8794c;--dark:#2a2a28;--on-dark:#fff;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#1c1c1b;--sub:#262624;--ink:#ecebe7;--mute:#a09e97;--line:#3a3935;--wood:#d0a073;--dark:#ecebe7;--on-dark:#1c1c1b}}
:root[data-theme="dark"]{color-scheme:dark;--bg:#1c1c1b;--sub:#262624;--ink:#ecebe7;--mute:#a09e97;--line:#3a3935;--wood:#d0a073;--dark:#ecebe7;--on-dark:#1c1c1b}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--sub);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;line-height:1.9;font-size:14px}
.page{max-width:480px;margin:0 auto;background:var(--bg)}
section{padding:56px 24px}
.en{font-family:Jost,sans-serif;font-weight:300;letter-spacing:.12em}
h2.en{font-size:30px;margin:0 0 4px;line-height:1.2}
.jp-sub{font-size:11px;color:var(--mute);margin:0 0 28px}
p{margin:0 0 1em}
.ph{position:relative;background:linear-gradient(160deg,#c9c5bc,#8d887c);color:#fff;display:flex;align-items:flex-end;padding:10px 12px;font:300 11px Jost,sans-serif;letter-spacing:.14em}
.ph.wood{background:linear-gradient(160deg,#c79c6e,#7a5636)}
.ph.sky{background:linear-gradient(180deg,#a9c3d6,#d9d6cb 70%,#8d887c)}
.ph.stone{background:linear-gradient(160deg,#9a9a9a,#4f4f4f)}
/* hero */
.hero .ph{height:300px;padding:0}
.hero-body{padding:32px 24px 40px;background:var(--bg)}
.tag{font:400 11px Jost;letter-spacing:.28em;color:var(--mute)}
.hero h1{font-weight:500;font-size:26px;line-height:1.5;margin:6px 0 4px}
.date{font:300 42px/1.1 Jost;letter-spacing:.06em;margin:6px 0 2px}
.date-sub{font-size:12px;color:var(--mute);margin-bottom:24px}
.btn{display:block;text-align:center;padding:17px;margin-bottom:12px;font-size:14px;font-weight:500;text-decoration:none;border:1px solid var(--dark);transition:background .2s,color .2s}
.btn.fill{background:var(--dark);color:var(--on-dark)}
.btn.line{color:var(--ink)}
.btn:hover{opacity:.85}
.btn:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
.lead{background:var(--sub)}
.lead p{font-size:13.5px}
/* gallery */
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 -24px;padding:0 24px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track .ph{flex:0 0 86%;height:230px;scroll-snap-align:center}
.count{text-align:center;font:300 12px Jost;letter-spacing:.2em;margin:14px 0 4px;color:var(--mute)}
.note{font-size:10.5px;color:var(--mute)}
/* points */
.points{background:var(--sub);padding-bottom:0}
.pt-head{display:flex;gap:14px;align-items:center;margin-bottom:30px}
.badge{flex:none;width:56px;height:56px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:11px;line-height:1.3;text-align:center}
.pt-head b{font-size:15px;line-height:1.6}
.pt{margin:0 -24px 0;padding:0 24px 48px}
.pt .ph{height:260px;margin:0 -24px 20px;font-size:0}
.pt .num{position:absolute;left:20px;bottom:6px;font:200 64px/1 Jost;color:#fff}
.pt h3{font-size:16px;line-height:1.7;margin:0 0 12px;font-weight:700}
.pt p{font-size:13px}
.points .pt:nth-of-type(odd){background:var(--bg);margin-left:-24px;margin-right:-24px}
.points .pt{background:var(--bg)}
/* table */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:14px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{width:84px;font-weight:500;color:var(--mute)}
.line-box{display:block;color:var(--ink);text-decoration:none;margin-top:24px;border:1px solid var(--line);padding:14px;text-align:center;font-size:13px}
/* flow */
.flow{background:var(--sub)}
.step{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.step .n{flex:none;font:200 40px/1 Jost;color:var(--wood)}
.step b{display:block;font-size:15px;margin-bottom:2px}
.step span{font-size:12.5px;color:var(--mute);display:block;line-height:1.8}
/* faq */
.who{display:flex;gap:12px;align-items:center;margin-bottom:20px;font-size:12px}
.who i{width:44px;height:44px;border-radius:50%;background:var(--line);display:block;flex:none}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:18px 28px 18px 0;position:relative;font-weight:500;font-size:13.5px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:15px;font:300 22px Jost;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{font-size:13px;color:var(--mute);padding-bottom:10px}
/* reserve */
.reserve{background:var(--dark);color:var(--on-dark);text-align:center}
.reserve .btn.fill{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.reserve .btn.line{color:var(--on-dark);border-color:var(--on-dark)}
.reserve .date{font-size:40px}
footer{padding:36px 24px 120px;text-align:center;font-size:12px;color:var(--mute)}
footer .en{font-size:20px;color:var(--ink);letter-spacing:.24em;margin-bottom:8px}
.fixed{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;display:flex;background:var(--bg);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;z-index:5}
.fixed .btn{flex:1;margin:0;padding:12px 6px;font-size:12.5px}