/* レイアウト: 駄菓子屋の店先。左に大きな名前、右に回せるガチャ機。下は色の帯を重ねる */
:root{
  color-scheme:light;
  --sun:#FFCB1F; --sun-deep:#F7B90F;
  --ink:#17133A;
  --paper:#FFFDF6;
  --tomato:#F4432F;
  --soda:#3CC8F0;
  --pink:#FF8FC4;
  --display:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --body:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --dot:"DotGothic16","Zen Maru Gothic",monospace;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --out:cubic-bezier(.22,1,.36,1);
  --line:4px solid var(--ink);
  --gutter:clamp(20px,4vw,56px);
}
html,body{background:var(--sun);color:var(--ink)}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
/* 結果を開いている間は後ろを止める。スクロールバーの跡は、暗くした背景と同じ色にする */
html:has(dialog[open]){overflow:hidden;background:#453834}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;overflow-x:clip;font:500 17px/1.75 var(--body);font-synthesis:none;line-break:strict;-webkit-font-smoothing:antialiased}
@supports not (overflow-x:clip){
  body{overflow-x:hidden}
}
h1,h2,h3,p,ul,dl,dd{margin:0;padding:0}
ul{list-style:none}
img{max-width:100%;display:block}
svg{display:block}
::selection{background:var(--ink);color:var(--sun)}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px;border-radius:8px}
.band-contact :focus-visible{outline-color:var(--sun)}
.sprite{position:absolute;width:0;height:0}
.wrap{width:100%;max-width:1400px;margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}

/* 作品の色（カプセルと種類のラベルに使う） */
.tone-grape{--c:#A98BFF}
.tone-sun{--c:#FFCB1F}
.tone-pink{--c:#FF8FC4}
.tone-soda{--c:#3CC8F0}
.tone-mint{--c:#3DDC97}
.tone-tomato{--c:#F4432F}

/* ボタン: 押すと影がつぶれる */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border:var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:900 18px/1 var(--body);white-space:nowrap;text-decoration:none;cursor:pointer;touch-action:manipulation;box-shadow:5px 5px 0 var(--ink);transition:transform .15s var(--out),box-shadow .15s var(--out)}
/* 乗せると浮き、押すと沈むので、その間だけ当たり判定を広げて、端でもカーソルから外れないようにする
   （inset は枠線の内側から測る。枠線 4px + 動く量より大きくする） */
.btn:hover::after,.btn:active::after{content:"";position:absolute;inset:-8px;border-radius:inherit}
.btn:active::after{inset:-12px}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn-go{background:var(--ink);color:var(--sun);box-shadow:5px 5px 0 var(--tomato)}
.btn-go:hover{box-shadow:7px 7px 0 var(--tomato)}
.btn-go:active{box-shadow:0 0 0 var(--tomato)}
.btn-sm{min-height:46px;padding:0 22px;font-size:16px;box-shadow:3px 3px 0 var(--ink)}
.btn-sm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn-sm:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn-sm.btn-go{box-shadow:3px 3px 0 var(--tomato)}
.btn-sm.btn-go:hover{box-shadow:5px 5px 0 var(--tomato)}
.btn-sm.btn-go:active{box-shadow:0 0 0 var(--tomato)}
.ico{width:15px;height:15px}

/* ナビ */
/* 大きな名前の文字の枠が上に重なるので、ナビを手前に出す */
.nav{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;animation:fall .7s var(--out) backwards}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font:400 22px/1 var(--display);text-decoration:none;white-space:nowrap}
.logo svg{width:42px;height:42px;transition:transform .5s var(--pop)}
.logo:hover svg{transform:rotate(72deg)}
.nav ul{display:flex;gap:clamp(14px,2.4vw,34px)}
.nav li a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:900;font-size:clamp(14px,1.3vw,17px);text-decoration:none;white-space:nowrap}
.nav li a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:4px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--out)}
.nav li a:hover::after{transform:scaleX(1)}

/* ヒーロー */
.band-hero{background-color:var(--sun);background-image:radial-gradient(circle,var(--sun-deep) 2.4px,transparent 2.9px);background-size:20px 20px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title machine" "actions machine";align-content:center;column-gap:clamp(24px,4vw,64px);row-gap:clamp(20px,3vh,32px);padding-top:4px;padding-bottom:clamp(44px,6vh,72px)}
.title{--h:min(19vw,31vh,300px);grid-area:title;position:relative;align-self:end}
h1{font:400 var(--h,1em)/.98 var(--display);letter-spacing:-.02em;text-shadow:.022em .022em 0 var(--paper)}
h1 .line{display:block}
h1 .ch{display:inline-block;transition:transform .35s var(--pop);animation:drop .8s var(--pop) .1s backwards}
h1 .i1{animation-delay:.18s}
h1 .i2{animation-delay:.26s}
h1 .i3{animation-delay:.34s}
h1 .ch:hover{transform:translateY(-.05em) rotate(-5deg)}
.who{position:absolute;left:calc(var(--h)*2.04);top:calc(var(--h)*.42);padding:9px 20px;border:var(--line);border-radius:999px;background:var(--paper);box-shadow:4px 4px 0 var(--ink);font:900 clamp(16px,1.5vw,21px)/1 var(--body);white-space:nowrap;rotate:6deg;animation:pop .6s var(--pop) .55s backwards}
.spark{position:absolute;fill:var(--paper);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round;animation:twinkle 2.8s ease-in-out infinite;pointer-events:none}
.spark-a{left:calc(var(--h)*2.02);top:calc(var(--h)*.02);width:calc(var(--h)*.26);height:calc(var(--h)*.26)}
.spark-b{left:calc(var(--h)*2.34);top:calc(var(--h)*.12);width:calc(var(--h)*.13);height:calc(var(--h)*.13);animation-delay:-1.3s}
.lede{max-width:27em;margin-top:clamp(14px,2.2vh,24px);font-weight:700;font-size:clamp(17px,1.45vw,21px);line-height:1.7;word-break:auto-phrase;animation:rise .8s var(--out) .6s backwards}
.actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:center;gap:16px 18px;align-self:start;animation:rise .8s var(--out) .72s backwards}
.progress{flex-basis:100%;font:400 16px/1.4 var(--dot)}

/* ガチャ機 */
.machine{grid-area:machine;position:relative;width:min(38vw,62vh,540px);aspect-ratio:500/700;align-self:center;animation:machine-in .95s var(--pop) .2s backwards}
.machine.is-settled{animation:none}
.machine.is-shaking{animation:shake .8s linear}
.machine canvas{position:absolute;z-index:1;left:20%;top:2.143%;width:60%;aspect-ratio:1;background:#DDF6FF;border-radius:50%;clip-path:circle(50%);cursor:grab;touch-action:pan-y}
.m-art{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.t-d{font-family:var(--display)}
.t-dot{font-family:var(--dot)}
.dial{position:absolute;z-index:3;left:33%;top:70.29%;width:29.6%;aspect-ratio:1;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;touch-action:manipulation;--turn:0deg}
.dial svg{width:100%;height:100%;transform:rotate(var(--turn));transition:transform .85s cubic-bezier(.3,1.25,.5,1)}
.dial:hover svg{transform:rotate(calc(var(--turn) + 18deg))}
.dial:focus-visible{outline-color:var(--paper);border-radius:50%}
.chute{position:absolute;z-index:3;left:50%;top:88.7%;width:13%;aspect-ratio:1;translate:-50% -50%;opacity:0;pointer-events:none}
.chute.is-in{opacity:1;animation:plop .76s var(--out) both}
.machine:has(.chute.is-in) #outlet-label{opacity:0}
.cap{position:absolute;inset:0;border:clamp(3px,.5vw,4px) solid var(--ink);border-radius:50%;background:linear-gradient(var(--c) 49%,var(--ink) 49%,var(--ink) 54%,var(--paper) 54%)}

/* テープ */
.tape-clip{position:relative;z-index:3;margin-block:-24px;overflow-x:clip}
.tape{width:106%;margin-left:-3%;padding-block:13px;background:var(--ink);color:var(--sun);overflow:hidden;rotate:-1.4deg}
.tape-track{display:flex;width:max-content}
.tape-track.is-running{animation:marquee 100s linear infinite}
.tape-set{display:flex;align-items:center;gap:30px;padding-right:30px;font:400 22px/1.2 var(--display);white-space:nowrap}
.tape svg{width:22px;height:22px;fill:var(--pink)}

/* 作品 */
.band-works{background:var(--soda);padding-block:clamp(84px,10vw,136px) clamp(72px,9vw,120px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 32px;margin-bottom:clamp(28px,4vw,56px)}
h2{font:400 clamp(46px,7.5vw,108px)/1.05 var(--display);letter-spacing:-.015em;text-wrap:balance}
.sec-note{font-weight:700;padding-bottom:.6em;word-break:auto-phrase}
/* 3 作品なので 3 列か 1 列にして、1 枚だけ余らないようにする。作品が増えたら列数も見直す */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,38px)}
.slot:nth-child(odd){--t:-.5deg}
.slot:nth-child(even){--t:.4deg}
.card{container-type:inline-size;position:relative;height:100%;display:flex;flex-direction:column;background:var(--paper);border:var(--line);border-radius:24px;box-shadow:7px 7px 0 var(--ink);overflow:hidden;rotate:var(--t,0deg);transition:translate .2s var(--out),rotate .25s var(--pop),box-shadow .2s var(--out)}
.card:hover{translate:-3px -3px;rotate:calc(var(--t,0deg)*-2.4);box-shadow:11px 11px 0 var(--ink)}
.cover{position:relative;aspect-ratio:40/21;background:var(--c,var(--sun));border-bottom:var(--line);display:grid;place-items:center;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.got{padding:5px 12px;border:3px solid var(--ink);border-radius:10px;background:var(--paper);font:900 14px/1.2 var(--body);white-space:nowrap;rotate:-5deg;scale:0;visibility:hidden;transition:scale .4s var(--pop)}
.card.has-got .got{scale:1;visibility:visible}
.card-body{flex:1;display:flex;flex-direction:column;gap:9px;padding:20px 22px 22px}
.meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font:400 15px/1.3 var(--dot)}
.kind{padding:3px 11px;border:2px solid var(--ink);border-radius:999px;background:var(--c,var(--sun));font:700 13px/1.4 var(--body)}
/* 作品名はカードの幅に合わせる。いちばん長い名前（13 文字）でも 1 行に収まる大きさ */
h3{font:400 20px/1.25 var(--display);font-size:clamp(15px,6.2cqi,27px)}
.role{align-self:flex-start;padding:2px 10px;border:2px solid var(--ink);border-radius:8px;background:var(--sun);font:700 14px/1.5 var(--body)}
.blurb{font-size:16px;line-height:1.7;word-break:auto-phrase}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:9px}

/* 自己紹介 */
.band-about{background:var(--pink);padding-block:clamp(72px,9vw,128px)}
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(28px,5vw,88px)}
.mascot{width:min(100%,400px);height:auto;margin-inline:auto;rotate:-8deg;transition:rotate .8s var(--pop)}
.mascot:hover{rotate:352deg}
.about-text{max-width:32em;margin-top:clamp(16px,2vw,26px);font-weight:700;font-size:clamp(17px,1.5vw,20px);word-break:auto-phrase}
.profile{margin-top:clamp(22px,3vw,36px);border-top:3px dashed var(--ink)}
.profile div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 18px;padding-block:13px;border-bottom:3px dashed var(--ink)}
.profile dt{font:400 16px/1.7 var(--dot)}
.profile dd{font-weight:900}

/* 連絡先 */
.band-contact{background:var(--ink);color:var(--paper);padding-block:clamp(72px,9vw,128px) 28px}
.band-contact h2{color:var(--sun)}
.contact-text{margin-top:14px;font-weight:700}
.links{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,36px)}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 24px;border:3px solid var(--paper);border-radius:999px;color:var(--paper);font-weight:900;font-size:18px;text-decoration:none;transition:background .2s,color .2s}
a.chip:hover{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.chip.is-soon{border-style:dashed}
.chip small{font:400 14px/1 var(--dot);opacity:.88}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin-top:clamp(56px,8vw,104px);font:400 14px/1.4 var(--dot)}
.to-top{display:inline-flex;align-items:center;min-height:44px;color:inherit}

/* 当たりの画面 */
#prize{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:28px max(16px,env(safe-area-inset-right,0px)) 28px max(16px,env(safe-area-inset-left,0px));background:transparent;overflow:auto;overscroll-behavior:contain;color:var(--ink)}
#prize[open]{display:grid}
#prize::backdrop{background:rgba(23,19,58,.8)}
.fx{position:fixed;left:50%;top:50%;width:0;height:0;pointer-events:none}
.fx svg{position:absolute;width:var(--s);height:var(--s);left:calc(var(--s)/-2);top:calc(var(--s)/-2);fill:var(--c);stroke:var(--ink);stroke-width:1.2;animation:fly 1s var(--out) var(--d) both}
.half{position:absolute;left:-65px;width:130px;height:65px;border:5px solid var(--ink);background:var(--c)}
.half-t{top:-65px;border-radius:130px 130px 0 0;animation:half-t .7s var(--out) both}
.half-b{top:0;border-radius:0 0 130px 130px;background:var(--paper);animation:half-b .7s var(--out) both}
/* margin:auto で中央に置く。縦に入りきらない画面でも上が切れず、スクロールで全部見られる */
.prize-card{container-type:inline-size;position:relative;z-index:1;width:min(440px,100%);margin:auto;background:var(--paper);border:var(--line);border-radius:26px;box-shadow:10px 10px 0 var(--sun);animation:card-in .6s var(--pop) .14s backwards}
.prize-card:focus{outline:none}
.prize-card .cover{border-radius:22px 22px 0 0}
.fresh{position:absolute;z-index:2;right:-12px;top:-18px;padding:7px 15px;border:var(--line);border-radius:999px;background:var(--pink);font:400 18px/1 var(--display);rotate:8deg}
.fresh.is-old{background:var(--paper);font:900 14px/1 var(--body)}
.prize-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px}
.prize-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.prize-actions .btn-close{background:none;box-shadow:none;border-color:transparent;text-decoration:underline;text-underline-offset:4px;padding:0 10px}
.prize-actions .btn-close:hover,.prize-actions .btn-close:active{transform:none;box-shadow:none}
.prize-count{font:400 15px/1.4 var(--dot)}

/* 見つからないページ */
.lost{min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:20px;text-align:center}
.lost .mascot{width:min(52vw,220px)}
.lost h1{font-size:clamp(30px,7vw,64px);line-height:1.2;letter-spacing:0;text-shadow:none}
.lost p{font-weight:700}

@keyframes fall{from{opacity:0;transform:translateY(-16px)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes drop{from{opacity:0;transform:translateY(-70px) rotate(-10deg)}}
@keyframes pop{from{opacity:0;scale:.3}}
@keyframes twinkle{0%,100%{transform:scale(.82) rotate(-8deg)}50%{transform:scale(1.08) rotate(8deg)}}
@keyframes machine-in{from{opacity:0;transform:translateY(50px) rotate(4deg)}}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-1.3deg)}30%{transform:rotate(1.3deg)}45%{transform:rotate(-1deg)}60%{transform:rotate(1deg)}80%{transform:rotate(-.5deg)}}
@keyframes plop{0%{opacity:0;transform:translateY(-70%) scale(.5) rotate(-60deg)}25%{opacity:1}55%{transform:translateY(0) scale(1) rotate(12deg)}70%{transform:translateY(-18%) rotate(-7deg)}85%{transform:translateY(0) rotate(3deg)}100%{transform:none}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes fly{0%{transform:scale(.2);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);opacity:0}}
@keyframes half-t{0%{transform:none;opacity:1}100%{transform:translate(-90px,-300px) rotate(-40deg);opacity:0}}
@keyframes half-b{0%{transform:none;opacity:1}100%{transform:translate(90px,300px) rotate(35deg);opacity:0}}
@keyframes card-in{from{opacity:0;transform:scale(.3) rotate(-10deg)}}
@keyframes slot-rise{from{transform:translateY(46px)}to{transform:none}}

@supports (animation-timeline:view()){
  .slot{animation:slot-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}

@media (max-width:1000px){
  .grid{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}
}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "machine" "actions";justify-items:stretch;row-gap:18px;padding-bottom:64px}
  .title{--h:min(21.4vw,190px)}
  h1 .line{display:inline}
  .who{position:static;display:inline-block;margin-bottom:12px;rotate:-3deg}
  .spark-a{left:auto;right:6%;top:4px;width:calc(var(--h)*.52);height:calc(var(--h)*.52)}
  .spark-b{display:none}
  .machine{width:min(76vw,430px,max(240px,38vh));justify-self:center}
  .actions{justify-content:center}
  .progress{text-align:center}
  .about{grid-template-columns:minmax(0,1fr)}
  .mascot{width:min(62vw,300px)}
}
@media (max-width:620px){
  .actions .btn{width:100%}
  .tape-set{font-size:18px}
  .profile div{grid-template-columns:minmax(0,1fr)}
  .prize-actions .btn{flex:1 1 100%}
}
@media (max-width:350px){
  .logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
/* ハイコントラスト表示でも大きな名前が読めるようにする */
@media (forced-colors:active){
  h1{forced-color-adjust:none;color:CanvasText}
}
/* JavaScript が動かないときは、押しても動かないものを隠す */
@media (scripting:none){
  #spin,.dial,.chute{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important}
}