:root{
  --red:#E8322A;--red-d:#B8261F;--mus:#FFC93C;--mus-d:#C98A12;--cyan:#2BB7E8;
  --ink:#151313;--cream:#FFF6E5;--white:#fff;--brown:#7A4A12;
  --w:min(100vw,520px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--red);color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-size:16px;line-height:1.8;overflow-x:hidden;
  background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.6px);background-size:14px 14px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp{display:inline}
h1,h2,h3,.game__title{word-break:auto-phrase;text-wrap:balance;line-break:strict;font-feature-settings:"palt"}

main{max-width:520px;margin:0 auto;position:relative;overflow-x:clip;background:var(--cream);box-shadow:0 0 0 4px var(--ink),0 30px 80px rgba(122,20,15,.45)}

/* ---------- パート（完成画像） ---------- */
.part{position:relative;overflow:hidden}
.part__frame{position:relative}
.part img{width:100%}
.hit{position:absolute;display:block;border-radius:999px;outline-offset:4px}
.hit:focus-visible{outline:4px solid var(--cyan)}
.hit--fv{left:6%;right:6%;top:88.4%;height:6.8%}
.hit--cta{left:3%;right:3%;top:81.2%;height:10.8%}
.hit--law{left:6%;right:6%;top:91%;height:5.6%;border-radius:12px}

/* FV：画像が弾んで出る＋後ろで放射線が回る */
.part--fv{background:var(--red);padding-bottom:18px}
.rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(184,38,31,.0) 0 6deg,rgba(184,38,31,.55) 6deg 9deg);animation:spin 40s linear infinite;pointer-events:none}
.part--fv .part__frame{animation:boing 1.1s cubic-bezier(.2,1.4,.4,1) both;transform-origin:50% 90%}
.pop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes boing{0%{transform:scale(.6) translateY(18%);opacity:0}55%{transform:scale(1.04) translateY(-1.5%);opacity:1}75%{transform:scale(.985)}100%{transform:none}}

/* スクロールで出る：パートごとに違う出方 */
.reveal{opacity:0;transition:opacity .2s}
.reveal.is-in{opacity:1}
.reveal[data-fx="slam"].is-in .part__frame{animation:slam .7s cubic-bezier(.2,1.5,.4,1) both}
.reveal[data-fx="zoom"].is-in .part__frame{animation:zoom .8s cubic-bezier(.2,1.3,.4,1) both}
.reveal[data-fx="spin"].is-in .part__frame{animation:twist .9s cubic-bezier(.2,1.3,.4,1) both}
.reveal[data-fx="slide"].is-in .part__frame{animation:slide .8s cubic-bezier(.2,1.2,.4,1) both}
@keyframes slam{0%{transform:scale(1.25) rotate(-4deg);opacity:0}60%{transform:scale(.97) rotate(1deg);opacity:1}100%{transform:none}}
@keyframes zoom{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes twist{0%{transform:rotate(-12deg) scale(.8);opacity:0}100%{transform:none;opacity:1}}
@keyframes slide{0%{transform:translateX(40%) rotate(4deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- 流れる文字の帯 ---------- */
.ticker{position:relative;background:var(--ink);color:var(--mus);border-top:4px solid var(--mus);border-bottom:4px solid var(--mus);overflow:hidden;transform:rotate(-2deg) scale(1.06);margin:-6px 0;z-index:2}
.ticker--rev{background:var(--mus);color:var(--ink);border-color:var(--ink);transform:rotate(2deg) scale(1.06)}
.ticker__track{display:flex;width:max-content;gap:18px;padding:10px 0;animation:tick 18s linear infinite;font-family:"Dela Gothic One",sans-serif;font-size:22px;line-height:1.3;white-space:nowrap}
.ticker--rev .ticker__track{animation-direction:reverse}
.ticker i{flex:0 0 auto;align-self:center;width:14px;height:14px;background:var(--red);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ticker--rev i{border-radius:50%;clip-path:none;background:var(--red)}
@keyframes tick{to{transform:translateX(-50%)}}

.mega{background:var(--red);overflow:hidden;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.mega__track{display:flex;width:max-content;gap:28px;padding:6px 0;animation:tick 10s linear infinite;font-family:"Dela Gothic One",sans-serif;font-size:56px;line-height:1.2;color:var(--white);
  -webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);white-space:nowrap}

/* ---------- 外食カウンター ---------- */
.game{position:relative;overflow:hidden;background:var(--mus);padding:44px 20px 40px;text-align:center;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  background-image:radial-gradient(rgba(255,255,255,.35) 1.6px,transparent 1.7px);background-size:12px 12px}
.game__en{font-family:"Dela Gothic One",sans-serif;font-size:15px;letter-spacing:.2em;color:var(--red)}
.game__title{font-weight:300;font-size:36px;line-height:1.45;margin:6px 0 8px}
.game__lead{font-size:17px;margin-bottom:20px}
.game__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.game__btn{font:inherit;font-size:16px;font-weight:700;min-height:48px;padding:8px 18px;border-radius:999px;border:3px solid var(--ink);background:var(--white);color:var(--ink);
  box-shadow:0 5px 0 var(--ink);cursor:pointer;transition:transform .08s,box-shadow .08s;-webkit-tap-highlight-color:transparent}
.game__btn[data-c="r"]{background:var(--red);color:var(--white)}
.game__btn[data-c="b"]{background:var(--cyan);color:var(--ink)}
.game__btn:active,.game__btn.is-hit{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.game__meter{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 6px}
.game__mascot{width:96px;height:auto;border-radius:50%;border:4px solid var(--ink);background:var(--cream);box-shadow:0 0 0 4px var(--white);object-fit:cover;aspect-ratio:1/1;object-position:50% 30%}
.game__mascot.is-jump{animation:jump .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes jump{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-22px) rotate(-10deg)}100%{transform:none}}
.game__count{font-family:"Dela Gothic One",sans-serif;font-size:84px;line-height:1;color:var(--white);-webkit-text-stroke:3px var(--ink);text-shadow:5px 5px 0 var(--red)}
.game__count small{font-size:30px;margin-left:4px}
.game__count.is-pop{animation:numpop .35s cubic-bezier(.2,1.8,.4,1)}
@keyframes numpop{0%{transform:scale(1.5)}100%{transform:none}}
.game__msg{font-size:17px;font-weight:700;min-height:3.4em;max-width:22em;margin:8px auto 0;background:var(--white);border:3px solid var(--ink);border-radius:18px;padding:10px 14px;position:relative}
.game__msg::before{content:"";position:absolute;top:-14px;left:50%;margin-left:-10px;border:10px solid transparent;border-bottom-color:var(--ink);border-top:0}
.game__reset{margin-top:14px;font:inherit;font-size:16px;background:none;border:0;border-bottom:2px solid var(--ink);cursor:pointer;min-height:44px}
.game__burst{position:absolute;inset:0;pointer-events:none}
.game__burst i{position:absolute;width:14px;height:14px;border:3px solid var(--ink);border-radius:50%;animation:fly 1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.4);opacity:0}}

/* ---------- フッター ---------- */
.foot{max-width:520px;margin:0 auto;background:var(--ink);color:var(--cream);padding:32px 20px 120px;font-size:16px;line-height:1.8}
.foot p+p{margin-top:12px}
.foot a{color:var(--mus)}
.foot__copy{opacity:.7}

/* ---------- 追従ボタン（押せる立体・ぷにっと押せる） ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 14px calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;
  transform:translateY(130%);transition:transform .45s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.dock.is-on{transform:none;pointer-events:auto}
.dock__btn{position:relative;display:flex;align-items:center;gap:10px;width:min(100%,480px);min-height:64px;padding:8px 22px 8px 10px;border-radius:999px;text-decoration:none;
  color:#2A1A12;font-weight:700;font-size:19px;letter-spacing:.02em;border:3px solid var(--ink);
  background:linear-gradient(to bottom,rgba(255,255,255,.45),rgba(255,255,255,0) 38%),var(--mus);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.8),inset -3px -5px 8px rgba(255,255,255,.35),0 7px 0 var(--mus-d),0 7px 0 3px var(--ink),0 16px 26px rgba(122,74,18,.45)}
.dock.is-on .dock__btn{animation:wiggle 4s ease-in-out 1.5s infinite}
@keyframes wiggle{0%,86%,100%{transform:none}89%{transform:rotate(-3deg) scale(1.03)}92%{transform:rotate(3deg) scale(1.03)}95%{transform:rotate(-2deg)}}
.dock__btn.is-press{animation:none;transform:translateY(5px) scale(1.02,.94);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 2px 0 var(--mus-d),0 2px 0 3px var(--ink),0 6px 12px rgba(122,74,18,.4)}
.dock__btn.is-release{animation:squish .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes squish{0%{transform:translateY(5px) scale(1.04,.92)}50%{transform:translateY(-3px) scale(.97,1.05)}100%{transform:none}}
.dock__icon{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--white)}
.dock__label{flex:1;text-align:center}
.dock__btn b{font-size:22px}

/* ---------- 読み進めた量 ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:6px;z-index:30;background:rgba(21,19,19,.25)}
.progress__bar{display:block;height:100%;width:calc(var(--p,0)*100%);background:repeating-linear-gradient(45deg,var(--mus) 0 10px,var(--ink) 10px 20px)}

/* ---------- 動きを止める ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:var(--white);padding:8px 12px 8px 16px;border-bottom:3px solid var(--mus)}
.topbar__name{font-family:"Dela Gothic One",sans-serif;font-size:17px;line-height:1.3;color:var(--mus)}
.topbar__name small{font-family:"Noto Sans JP",sans-serif;font-size:13px;color:var(--white);margin-left:2px}
.motion-toggle{font:inherit;font-size:15px;font-weight:700;min-height:44px;padding:4px 14px;border-radius:999px;
  background:var(--white);color:var(--ink);border:2px solid var(--ink);box-shadow:0 3px 0 var(--mus-d);cursor:pointer}
.motion-toggle[aria-pressed="true"]{background:var(--mus)}

/* ---------- 画面の端から顔を出すマスコット ---------- */
.peek{position:fixed;z-index:15;left:-6px;bottom:96px;width:66px;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 30%;border-radius:50%;
  border:4px solid var(--ink);background:var(--cream);box-shadow:0 0 0 4px var(--white);transform:translateX(-140%) rotate(-20deg);opacity:0;transition:transform .5s cubic-bezier(.2,1.6,.4,1),opacity .3s;pointer-events:none}
.peek.is-on{transform:translateX(0) rotate(8deg);opacity:1}

/* PC：外側の余白にも動き */
@media (min-width:900px){
  body{background-size:18px 18px}
  .peek{left:calc(50% - 260px - 150px);width:120px;bottom:160px}
}

/* 動きを止める（OS設定・ボタン） */
.no-motion *,.no-motion *::before,.no-motion *::after{animation:none!important;transition:none!important}
.no-motion .reveal{opacity:1}
.no-motion .dock{transform:none;pointer-events:auto}
.no-motion .dock:not(.is-on){transform:translateY(130%);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1}
}