:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);--bg:#f4f2ee;--fg:#111;--mut:#777;--card:#fff;--line:#ddd;--acc:#111;--acct:#f4f2ee}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0d0d0d;--fg:#f2f0ea;--mut:#999;--card:#181818;--line:#2c2c2c;--acc:#f2f0ea;--acct:#0d0d0d}}
:root[data-theme="dark"]{--bg:#0d0d0d;--fg:#f2f0ea;--mut:#999;--card:#181818;--line:#2c2c2c;--acc:#f2f0ea;--acct:#0d0d0d}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
.bar{background:var(--acc);color:var(--acct);text-align:center;font-size:12px;padding:8px;text-transform:uppercase;letter-spacing:.15em}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:14px 5vw}
.logo{font-weight:900;letter-spacing:.04em;font-size:19px}.logo span{font-weight:400;margin-left:6px;letter-spacing:.1em}
nav{display:flex;gap:22px;font-size:13px;text-transform:uppercase}
.cartbtn{background:none;border:1px solid var(--line);padding:7px 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.cartbtn:hover{border-color:var(--fg)}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:4vw;align-items:center;padding:8vh 5vw;min-height:70vh}
.hero h1{font-size:clamp(44px,8vw,112px);line-height:.9;margin:0 0 18px;font-weight:900;text-transform:uppercase}
.hero p{color:var(--mut);max-width:46ch;line-height:1.6}
.btn{display:inline-block;background:var(--acc);color:var(--acct);border:0;padding:15px 30px;text-transform:uppercase;font-size:13px;letter-spacing:.15em;margin-top:14px}
.btn:hover{opacity:.85}
.stage{display:flex;justify-content:center}
.band{position:relative;width:min(320px,70vw);aspect-ratio:1/1.05;border-radius:14px;background:var(--b,#ece8df);border:3px solid #0003;box-shadow:inset 0 0 0 8px #0000000d,0 20px 40px #0003;display:flex;align-items:center;justify-content:space-evenly;padding:0 10px}
.band i{font-style:normal;writing-mode:vertical-rl;font-size:clamp(34px,7vw,64px);font-weight:900;color:var(--k,#111);background:#0000000a;border-radius:8px;padding:14px 8px;box-shadow:inset 0 0 0 2px #0002;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.band::after{content:"";position:absolute;left:-3px;right:-3px;bottom:12%;height:6px;background:#111}
.mq{overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums;border-block:1px solid var(--line);padding:14px 0;font-weight:900;letter-spacing:.3em;font-size:14px}
.mq div{display:inline-block;animation:m 25s linear infinite}
@keyframes m{to{transform:translateX(-50%)}}
section{padding:8vh 5vw}
h2{font-size:clamp(26px,4vw,44px);text-transform:uppercase;margin:0 0 30px;font-weight:900}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);padding:16px;display:flex;flex-direction:column}
.card .band{width:100%;box-shadow:none;margin-bottom:14px;aspect-ratio:1/.8}
.card .band i{font-size:38px;padding:10px 6px}
.card-photo{width:100%;margin-bottom:14px;aspect-ratio:1/.8;background:transparent;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px}
.card-soon{width:100%;margin-bottom:14px;aspect-ratio:1/.8;border-radius:4px;background:linear-gradient(160deg,#1c1c1c,#050505);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;position:relative}
.card-soon .ksbg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:min(22vw,120px);font-weight:900;color:rgba(242,240,234,.07);pointer-events:none;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;line-height:1}
.card-soon b{position:relative;color:#f2f0ea;font-size:15px;letter-spacing:.18em;text-transform:uppercase}
.card-soon .jp{position:relative;margin-top:8px;font-size:15px;letter-spacing:.1em;color:#a8a29a;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.card-photo img{width:100%;height:100%;object-fit:contain}
.it-photo{width:60px;flex:none;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.it-photo img{width:100%;height:100%;object-fit:contain}
.card h3{margin:0 0 4px;font-size:15px;text-transform:uppercase}
.card small{color:var(--mut);line-height:1.5;flex:1}
.row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:8px}
select{-webkit-appearance:none;appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23888' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 9px center;color:var(--fg);border:1px solid var(--line);border-radius:0;padding:7px 26px 7px 10px;font:inherit;font-size:12px;letter-spacing:.06em;cursor:pointer}
select:hover{border-color:var(--mut)}
select option{background:var(--bg);color:var(--fg)}
.price{font-weight:700}
.add{background:var(--acc);color:var(--acct);border:0;padding:9px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.14em}
.story{display:grid;grid-template-columns:1fr 1fr;gap:5vw;border-top:1px solid var(--line)}
.story p{color:var(--mut);line-height:1.7}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;text-transform:uppercase;font-size:14px}
.faq p{color:var(--mut);line-height:1.6}
form.nl{display:flex;gap:8px;flex-wrap:wrap}
input{background:var(--card);color:var(--fg);border:1px solid var(--line);padding:14px;font:inherit;min-width:0;flex:1 1 220px}
footer{padding:30px 5vw;color:var(--mut);font-size:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.ov{position:fixed;inset:0;background:#0008;opacity:0;pointer-events:none;transition:.25s;z-index:30}
.ov.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--bg);z-index:40;transform:translateX(100%);transition:.3s;display:flex;flex-direction:column;padding:calc(20px + env(safe-area-inset-top,0px)) 20px calc(20px + env(safe-area-inset-bottom,0px))}
.drawer.on{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.dh b{text-transform:uppercase;letter-spacing:.15em}
.x{background:none;border:0;font-size:26px}
.items{flex:1;overflow:auto}
.it{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.it .band{width:60px;flex:none;box-shadow:none;padding:0}.it .band i{font-size:14px;padding:4px 2px}
.it div.t{flex:1;font-size:13px}.it div.t small{color:var(--mut)}
.q{display:flex;align-items:center;gap:8px;margin-top:6px}
.q button{width:24px;height:24px;border:1px solid var(--line);background:none}
.tot{display:flex;justify-content:space-between;padding:16px 0;font-weight:700}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);max-height:90vh;overflow:auto;background:var(--bg);z-index:50;padding:24px;display:none}
.modal.on{display:block}
.modal input{width:100%;margin-bottom:10px;flex:none}
.hdr-r{display:flex;align-items:center;gap:10px}
.was{opacity:.5;font-weight:400;font-size:.85em;margin-right:4px}
.ctry{max-width:150px}
@media(max-width:760px){.hero,.story{grid-template-columns:1fr}.nav-x{display:none}nav{gap:0}header{padding:12px 4vw;gap:8px}.logo{white-space:nowrap;font-size:16px}.logo span{display:none}.hdr-r{gap:6px}.ctry{max-width:84px;padding:6px 20px 6px 8px;background-position:right 7px center}.dd-menu{left:auto;right:-60px}.cartbtn{white-space:nowrap;padding:8px 10px}}

.dd{position:relative}
.dd-btn{background:none;border:0;padding:0;font-size:13px;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.dd-btn svg{transition:transform .2s}
.dd.on .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:190px;background:var(--bg);border:1px solid var(--line);padding:6px 0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:30}
.dd.on .dd-menu{opacity:1;visibility:visible;transform:none}
@media(hover:hover){.dd:hover .dd-menu{opacity:1;visibility:visible;transform:none}.dd:hover .dd-btn svg{transform:rotate(180deg)}}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-15px;height:15px}
.dd-menu a,.dd-soon{padding:10px 14px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.dd-menu a:hover,.dd-menu a:focus-visible{background:var(--card)}
.dd-soon{color:var(--mut);cursor:default;border-top:1px solid var(--line);margin-top:4px;padding-top:12px}
@media (prefers-reduced-motion:reduce){.dd-menu,.dd-btn svg{transition:none}}

.card-photo{position:relative}
.card-photo img{transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.card-photo img.alt{position:absolute;inset:0;opacity:0}
@media(hover:hover){.card:hover .card-photo.has-alt img.main{opacity:0}.card:hover .card-photo.has-alt img.alt{opacity:1}.card:hover .card-photo img{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.card-photo img{transition:none}}

.tag{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--fg);color:var(--fg);padding:4px 8px;background:var(--card)}