body{margin:0;background:#F3F8F4}
*{box-sizing:border-box}
.page{font-family:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;color:#26302B;background:#F3F8F4;line-height:1.8;overflow:clip}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}
a{color:inherit}
.en{font-family:'Bricolage Grotesque','Zen Kaku Gothic New',sans-serif}
.mono{font-family:'DM Mono',monospace}

/* wordmark */
.wm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.04em;line-height:1;display:inline-flex;align-items:center;color:#1E3A32;text-decoration:none}
.wm .ro{display:inline-block;width:.6em;height:.6em;border-radius:50%;border:.14em solid #1E3A32;margin:0 .03em;position:relative;top:.04em}
.wm .rf{background:#7FD1A8}
.wm .rf::after{content:"";position:absolute;width:.16em;height:.16em;border-radius:50%;background:#1E3A32;left:.2em;top:.07em;animation:look 5s ease-in-out infinite}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0;flex-wrap:wrap}
.nav nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.nav nav a{text-decoration:none;font-weight:500;font-size:15px;min-height:44px;display:inline-flex;align-items:center;color:#26302B;border-bottom:2px solid transparent}
.nav nav a:hover{border-bottom-color:#7FD1A8}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;background:#25785A;color:#fff;font-weight:700;font-size:16px;text-decoration:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s;border:0}
.btn:hover{transform:translateY(-4px) scale(1.05);background:#1E3A32}
.btn.ghost{background:transparent;color:#1E3A32;border:1.5px solid #1E3A32}
.btn.ghost:hover{background:#1E3A32;color:#fff}
a:focus-visible,button:focus-visible{outline:3px solid #FF7A3D;outline-offset:3px}

/* hero */
.hero{display:grid;grid-template-columns:1.02fr 1fr;gap:40px;align-items:center;padding:36px 0 110px}
.kick{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#25785A;letter-spacing:.04em}
.kick i{width:36px;height:2px;background:#25785A;display:block}
h1.hl{white-space:nowrap;font-weight:900;font-size:min(58px,calc((100vw - 120px)*.054));line-height:1.28;letter-spacing:.01em;margin:18px 0 22px;color:#1E3A32}
h1.hl em{font-style:normal;position:relative;white-space:nowrap}
h1.hl em::after{content:"";position:absolute;left:-4px;right:-4px;bottom:.08em;height:.34em;background:#BFE6CF;z-index:-1;border-radius:4px;transform-origin:left;animation:ul .9s 1.25s cubic-bezier(.34,1.56,.64,1) both}
.lead{font-size:18px;color:#3F4F47;max-width:30em;margin:0 0 34px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.stage{position:relative;height:540px}
.disc{position:absolute;width:420px;height:420px;border-radius:50%;background:#CFE9DA;left:50%;top:50%;margin:-210px 0 0 -210px;animation:pop 1.1s .1s cubic-bezier(.2,.7,.2,1) both}
.win{position:absolute;border-radius:16px;background:#fff;border:1px solid rgba(30,58,50,.14);box-shadow:0 26px 50px -26px rgba(30,58,50,.45);animation:winIn 1s var(--wd,.3s) cubic-bezier(.34,1.56,.64,1) both,flt 7s var(--fd,0s) ease-in-out infinite}
.dots{display:flex;gap:6px;padding:11px 14px}
.dots b{width:9px;height:9px;border-radius:50%;background:#D8DDD9;display:block}
.sparkle{position:absolute;color:#25785A;animation:tw 3.2s ease-in-out infinite}
.shot{display:block;width:100%;height:100%;object-fit:cover}
.zoom{animation:zm 24s ease-in-out infinite alternate}
@keyframes zm{from{transform:scale(1)}to{transform:scale(1.06)}}
.ph{position:absolute;border-radius:30px;overflow:hidden;border:6px solid #1B3A5C;background:#1B3A5C;box-shadow:0 30px 50px -24px rgba(27,58,92,.6)}
.ph.a{left:11%;top:46px;width:200px;height:400px;--r:-4deg;animation:flt 7s ease-in-out infinite}
.ph.b{right:11%;top:26px;width:200px;height:400px;--r:4deg;animation:flt 7s -3s ease-in-out infinite}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.appic{display:block;border-radius:22%;box-shadow:0 18px 30px -14px rgba(42,43,99,.65)}

/* apps */
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.sec-h h2{margin:0;font-weight:900;font-size:44px;line-height:1.3;color:#1E3A32}
.sec-h p{margin:0;color:#4B5B53;max-width:26em}
.sec-h p.one{max-width:none;white-space:nowrap;font-size:clamp(11px,calc((100vw - 40px)/32),17px)}
@media (max-width:360px){.sec-h p.one{white-space:normal}}
.label{font-weight:700;font-size:13px;letter-spacing:.14em;color:#25785A;text-transform:uppercase}
.band{display:grid;grid-template-columns:1.08fr 1fr;gap:64px;align-items:center;margin-bottom:96px}
.band.flip .art{order:2}
.art{position:relative;height:440px;border-radius:22px;overflow:hidden;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.band:hover .art{transform:translateY(-6px) rotate(-.6deg)}
.band.flip:hover .art{transform:translateY(-6px) rotate(.6deg)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:5px 14px;border-radius:999px;border:1.5px solid currentColor}
.band h3{font-weight:900;font-size:36px;line-height:1.35;margin:16px 0 8px;letter-spacing:.01em}
.band .name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em;margin:0}
.band p.t{font-size:17px;margin:14px 0 20px;max-width:27em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;list-style:none}
.chips li{font-size:14px;font-weight:500;padding:4px 14px;border-radius:999px}
.arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;text-decoration:none;min-height:48px;padding:0 26px;border-radius:999px;color:#fff;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.arrow:hover{transform:translateY(-4px) scale(1.05)}
.arrow svg{transition:transform .35s}
.arrow:hover svg{transform:translateX(5px)}

/* hanairo */
.sw{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4.6s ease-in-out infinite}
.sw.b{animation-duration:5.4s;animation-delay:-1.2s}
.sw.c{animation-duration:4s;animation-delay:-2.4s}
.sw.d{animation-duration:6s;animation-delay:-3.1s}
.pt{animation:fall 9s linear infinite}
/* soft serve */
.tier{transform-box:fill-box;transform-origin:50% 100%;animation:curl 6s cubic-bezier(.3,1.4,.5,1) infinite}
.tier.t2{animation-delay:.25s}.tier.t3{animation-delay:.5s}.tier.t4{animation-delay:.75s}
.wob{transform-origin:50% 100%;animation:wob 6s ease-in-out infinite}
.wave{animation:wv 7s linear infinite}
.bub{animation:rise2 6s ease-in infinite}
/* smallmenu */
.bar{display:flex;align-items:center;gap:14px;background:#2A2B63;border-radius:12px;height:52px;padding:0 18px;color:#D9DDE3;font-size:14px;font-weight:500}
.ics{display:flex;align-items:center;gap:12px;margin-left:auto}
.hid{display:flex;gap:12px;overflow:hidden;animation:hide 7s cubic-bezier(.6,0,.3,1) infinite}
.ic{width:20px;height:20px;border-radius:6px;flex:none}
.chev{width:26px;height:26px;border-radius:8px;background:#fff;color:#2A2B63;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none;animation:chv 7s ease-in-out infinite}
.lab{position:relative;height:26px;font-size:15px;font-weight:700;color:#2A2B63;text-align:center}
.lab span{left:0;right:0}
.lab span{position:absolute;left:0;top:0}
.l1{animation:l1 7s infinite}.l2{animation:l2 7s infinite;opacity:0}

/* next */
.next{border:2px dashed #7FD1A8;border-radius:22px;padding:44px 40px;display:grid;grid-template-columns:auto 1fr auto;gap:36px;align-items:center;background:rgba(255,255,255,.5)}
.next h3{margin:0 0 6px;font-weight:900;font-size:28px;color:#1E3A32}
.next p{margin:0;color:#4B5B53}
.bd{display:flex;gap:8px}
.bd i{width:14px;height:14px;border-radius:50%;background:#25785A;display:block;animation:bn 1.3s ease-in-out infinite}
.bd i:nth-child(2){animation-delay:.18s}.bd i:nth-child(3){animation-delay:.36s}

/* about */
.about{background:#DCEFE3;padding:110px 0;margin-top:110px}
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:20px}
.pt3{border-top:2px solid #1E3A32;padding-top:22px}
.pt3 .n{font-family:'DM Mono',monospace;font-size:45px;line-height:1;margin-bottom:6px;color:#25785A}
.pt3 h3{margin:8px 0 10px;font-weight:900;font-size:24px;line-height:1.45;color:#1E3A32}
.pt3 p{margin:0;color:#3F4F47;font-size:16px}

/* contact */
.contact{background:#1E3A32;color:#E4F3EA;padding:96px 0}
.contact h2{margin:0 0 14px;font-weight:900;font-size:40px;line-height:1.4;color:#fff}
.contact p{margin:0 0 30px;max-width:28em;color:#BFE0CE}
.btn.mint{background:#BFE6CF;color:#1E3A32}
.btn.mint:hover{background:#fff}
footer{padding:36px 0 44px;font-size:14px;color:#4B5B53}
footer .in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
footer a{text-decoration:none;margin-left:22px;min-height:44px;display:inline-flex;align-items:center}
footer a:hover{text-decoration:underline}

/* motion */
@keyframes rise{from{opacity:0;transform:translateY(44px) scale(.96)}to{opacity:1;transform:none}}
.rise{animation:rise 1s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
.ln{display:block;transform-origin:0 100%;animation:lnIn 1s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
@keyframes lnIn{from{opacity:0;transform:translateY(.7em) rotate(-5deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes winIn{from{opacity:0;translate:0 70px;scale:.78}to{opacity:1;translate:0 0;scale:1}}
@keyframes look{0%,35%{transform:translate(0,0)}45%,70%{transform:translate(.1em,.05em)}80%,100%{transform:translate(0,0)}}
@keyframes rvIn{0%{opacity:0;translate:0 70px;scale:.94;rotate:-1.5deg}65%{opacity:1;translate:0 -8px;scale:1.01;rotate:.3deg}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes artIn{0%{opacity:0;translate:-90px 40px;scale:.85;rotate:-6deg}70%{opacity:1;translate:8px -6px;scale:1.02;rotate:1deg}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes artInR{0%{opacity:0;translate:90px 40px;scale:.85;rotate:6deg}70%{opacity:1;translate:-8px -6px;scale:1.02;rotate:-1deg}100%{opacity:1;translate:0 0;scale:1;rotate:0deg}}
@keyframes txtIn{0%{opacity:0;translate:46px 26px}70%{opacity:1;translate:-5px -2px}100%{opacity:1;translate:0 0}}
@keyframes txtInR{0%{opacity:0;translate:-46px 26px}70%{opacity:1;translate:5px -2px}100%{opacity:1;translate:0 0}}
@keyframes chip{0%{opacity:0;scale:.3}70%{opacity:1;scale:1.15}100%{opacity:1;scale:1}}
@keyframes numPop{0%{scale:0;rotate:-30deg}60%{scale:1.25;rotate:6deg}100%{scale:1;rotate:0deg}}
@keyframes ul{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes flt{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes fall{0%{transform:translate(0,-30px) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translate(-60px,420px) rotate(240deg);opacity:0}}
@keyframes curl{0%{transform:scale(0,0)}14%{transform:scale(1,1)}86%{transform:scale(1,1)}100%{transform:scale(0,0)}}
@keyframes wob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes wv{from{transform:translateX(0)}to{transform:translateX(-120px)}}
@keyframes rise2{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-220px);opacity:0}}
@keyframes hide{0%,30%{max-width:230px;opacity:1}42%,86%{max-width:0;opacity:0;gap:0}100%{max-width:230px;opacity:1}}
@keyframes chv{0%,30%{transform:scale(1)}42%{transform:scale(1.25)}52%,100%{transform:scale(1)}}
@keyframes l1{0%,34%{opacity:1}40%,92%{opacity:0}98%,100%{opacity:1}}
@keyframes l2{0%,38%{opacity:0}46%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes bn{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px)}}
/* scroll reveal: 画面に入ったら一度だけ再生（JS が .js と .in を付ける） */
@keyframes fadeUp{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes fromOut{from{opacity:0;translate:-80px 18px}to{opacity:1;translate:0 0}}
@keyframes fromOutR{from{opacity:0;translate:80px 18px}to{opacity:1;translate:0 0}}
@keyframes chipIn{from{opacity:0;translate:0 14px;scale:.82}to{opacity:1;translate:0 0;scale:1}}
.js .rv,.js .band .art,.js .band > div:last-child > *,.js .chips li,.js .pt3 .n{opacity:0}
.js .pt3 .n{display:inline-block;transform-origin:0 100%}
.js .rv.in{animation:fadeUp 1.1s cubic-bezier(.22,.7,.2,1) var(--rd,0s) both}
.js .rv.d2{--rd:.12s}.js .rv.d3{--rd:.24s}
.js .band.in .art{animation:fromOut 1.2s cubic-bezier(.22,.7,.2,1) both}
.js .band.flip.in .art{animation-name:fromOutR}
.js .band.in > div:last-child > *{animation:fromOutR 1s cubic-bezier(.22,.7,.2,1) both}
.js .band.flip.in > div:last-child > *{animation-name:fromOut}
.js .band.in > div:last-child > *:nth-child(1){animation-delay:.25s}
.js .band.in > div:last-child > *:nth-child(2){animation-delay:.38s}
.js .band.in > div:last-child > *:nth-child(3){animation-delay:.5s}
.js .band.in > div:last-child > *:nth-child(4){animation-delay:.62s}
.js .band.in > div:last-child > *:nth-child(5){animation-delay:.74s}
.js .band.in > div:last-child > *:nth-child(6){animation-delay:.86s}
.js .band.in .chips li{animation:chipIn .8s cubic-bezier(.22,.7,.2,1) both}
.js .band.in .chips li:nth-child(1){animation-delay:1s}
.js .band.in .chips li:nth-child(2){animation-delay:1.18s}
.js .band.in .chips li:nth-child(3){animation-delay:1.36s}
.js .pt3.rv{opacity:1}
.js .pt3.rv.in{animation:none}
.js .pt3{--rd:0s}.js .pt3.d2{--rd:.7s}.js .pt3.d3{--rd:1.4s}
@media (min-width:1001px){.js .pt3.d2{--rd:1.2s}.js .pt3.d3{--rd:2.4s}}
.js .pt3 h3,.js .pt3 p{opacity:0}
.js .pt3.in .n{opacity:1;animation:numPop .8s cubic-bezier(.34,1.56,.64,1) var(--rd) both}
.js .pt3.in h3{animation:fadeUp .9s cubic-bezier(.22,.7,.2,1) calc(var(--rd) + .25s) both}
.js .pt3.in p{animation:fadeUp .9s cubic-bezier(.22,.7,.2,1) calc(var(--rd) + .45s) both}

@media (max-width:1000px){
.contact .wrap{grid-template-columns:1fr !important;gap:36px !important}
.hero{grid-template-columns:1fr;padding-bottom:70px}
h1.hl{font-size:min(58px,calc((100vw - 80px)/9.6))}
.stage{height:480px}
.band{grid-template-columns:1fr;gap:30px;margin-bottom:72px}
.band.flip .art{order:0}
.art{height:380px}
.pts{grid-template-columns:1fr}
.next{grid-template-columns:1fr;gap:20px}
.sec-h h2{font-size:36px}
}
@media (max-width:600px){
.wrap{padding:0 20px}
h1.hl{font-size:calc((100vw - 40px)/9.6)}
.lead{font-size:16px}
.stage{height:400px}
.disc{width:300px;height:300px;margin:-150px 0 0 -150px}
.win.wa{transform-origin:0 0}
.art{height:340px}
.band h3{font-size:28px}
.contact h2{font-size:min(30px,calc((100vw - 40px)/13.4))}
.about .sec-h h2{white-space:nowrap;font-size:min(36px,calc((100vw - 40px)/14.5))}
.next{padding:30px 22px}
.nav nav a.hide-s{display:none}
}
/* sub page */
.phead{padding:26px 0 56px}
.crumb{display:flex;gap:10px;align-items:center;font-size:14px;color:#4B5B53;margin:6px 0 34px}
.crumb a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.crumb a:hover{text-decoration:underline}
.phead h1{margin:8px 0 14px;font-weight:900;font-size:56px;line-height:1.25;color:#1E3A32}
.phead p{margin:0;color:#3F4F47;max-width:34em;font-size:18px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.tabs a{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:#fff;border:1.5px solid #CFE0D5;text-decoration:none;font-weight:700;color:#1E3A32;transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s}
.tabs a:hover{transform:translateY(-3px);background:#CFE9DA;border-color:#7FD1A8}
.tabs i{font-style:normal;font-size:13px;min-width:24px;height:24px;border-radius:999px;background:#E4F3EA;color:#25785A;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cat{padding-top:36px;scroll-margin-top:12px}
.cat-h{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:2px solid #1E3A32;padding-bottom:14px;margin-bottom:48px}
.cat-h h2{margin:0;font-weight:900;font-size:34px;line-height:1.3;color:#1E3A32;display:flex;align-items:baseline;gap:14px}
.cnt{font-size:14px;color:#25785A}
.empty{border:2px dashed #7FD1A8;border-radius:22px;padding:44px 32px;background:rgba(255,255,255,.5);display:flex;flex-direction:column;gap:6px;margin-bottom:96px}
.empty b{font-size:20px;color:#1E3A32}
.empty span{color:#4B5B53}
.cat .band:last-child{margin-bottom:96px}
main .next{margin-bottom:110px}

/* top: platforms */
.plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:760px}
.plat{display:flex;flex-direction:column;gap:6px;padding:28px 26px;border-radius:22px;background:#fff;border:1px solid #DCE7DF;text-decoration:none;min-height:210px;transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,border-color .3s}
.plat:hover{transform:translateY(-6px);border-color:#7FD1A8;box-shadow:0 22px 36px -24px rgba(30,58,50,.5)}
.plat .pn{font-weight:800;font-size:28px;letter-spacing:-.02em;color:#1E3A32;line-height:1.2}
.plat .pc{font-size:13px;color:#25785A}
.plat .pl{font-size:15px;color:#3F4F47;line-height:1.7;margin-top:8px;flex:1}
.plat .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#25785A;margin-top:12px;transition:gap .3s}
.plat:hover .go{gap:14px}
.plat.soon{background:rgba(255,255,255,.55);border-style:dashed;border-color:#B9DCC8}
.plat.soon .pn,.plat.soon .pl{color:#4B5B53}
@media (max-width:1000px){.phead h1{font-size:44px}.cat-h h2{font-size:28px}}
@media (max-width:600px){.plats{gap:12px}.plat{padding:22px 18px;min-height:190px}.plat .pn{font-size:22px}.phead h1{font-size:36px}.phead p{font-size:16px}.empty{padding:30px 22px}}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}