:root { --bg: #111111; --red: #E2001A; --text: #ffffff; --muted: #9a9a9a; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; font-size: 16px; line-height: 1.8; }
main { max-width: 560px; margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.part { position: relative; }
.part img { display: block; width: 100%; height: auto; }
.hit { position: absolute; display: block; color: transparent; font-size: 1px; overflow: hidden; border-radius: 6px; }
.hit:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.textlink { background: #1E2023; padding: 4px 6% 28px; }
.textlink.dark { background: #111111; }
.textlink.light { background: #F2F3F5; padding-top: 0; }
.textlink a { display: block; min-height: 48px; padding: 12px 16px; border-radius: 18px; color: #fff; text-decoration: none; text-align: center; font-size: 16px; background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, #464A52 0%, #1E2024 100%); box-shadow: inset 0 1px 0 rgba(160,164,172,.6), 0 5px 0 #08080A, 0 10px 16px rgba(0,0,0,.5); }
.textlink a:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(160,164,172,.6), 0 2px 0 #08080A, 0 6px 10px rgba(0,0,0,.5); }
.foot { max-width: 560px; margin: 0 auto; padding: 40px 6% 120px; text-align: center; color: var(--muted); font-size: 14px; }
.foot a { color: #fff; }
.foot img { display: block; margin: 0 auto 16px; width: 120px; height: auto; background: #fff; border-radius: 6px; padding: 6px; }
.small { font-size: 12px; }
.sticky { position: fixed; left: 50%; bottom: 14px; transform: translate(-50%, 160%); width: min(92vw, 520px); min-height: 54px; padding: 14px 16px; color: #fff; text-align: center; text-decoration: none; font-weight: 700; font-size: 17px; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(110,0,12,.65); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 48%), linear-gradient(180deg, #FF4654 0%, #C40018 100%); box-shadow: inset 0 2px 0 rgba(255,150,160,.55), 0 6px 0 #78000E, 0 14px 22px rgba(0,0,0,.55); transition: transform .3s ease; z-index: 10; }
.sticky:active { box-shadow: inset 0 2px 0 rgba(255,150,160,.55), 0 2px 0 #78000E, 0 6px 12px rgba(0,0,0,.5); }
.sticky.show:active { transform: translate(-50%, 4px); }
.sticky.show { transform: translate(-50%, 0); }
.part-fv img { animation: fvIn .9s ease-out both; }
@keyframes fvIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }

/* ---------- section dividers ---------- */
.dv { position: relative; height: 72px; background: #0C0C0C; overflow: hidden; }
/* 1) light beam */
.dv-beam span { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, transparent 0%, rgba(226,0,26,.9) 18%, #FF5A6A 50%, rgba(226,0,26,.9) 82%, transparent 100%); box-shadow: 0 0 10px rgba(226,0,26,.9), 0 0 28px rgba(226,0,26,.55); }
.dv-beam span::after { content: ""; position: absolute; top: -3px; left: 0; width: 22%; height: 8px; border-radius: 8px; background: radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.7) 40%, rgba(255,90,106,0) 100%); filter: blur(1px); transform: translateX(-120%); animation: beamRun 3.2s cubic-bezier(.6,0,.2,1) infinite; }
.dv-beam::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(226,0,26,.18), transparent 70%); }
@keyframes beamRun { 0% { transform: translateX(-120%); } 70%, 100% { transform: translateX(560%); } }
/* bright version leading into the sunny voice section */
.dv-sun { background: linear-gradient(180deg, #0C0C0C 0%, #0C0C0C 46%, #F2F3F5 100%); }
.dv-sun span { top: 46%; background: linear-gradient(90deg, transparent 0%, rgba(255,190,90,.85) 20%, #FFF4DC 50%, rgba(255,190,90,.85) 80%, transparent 100%); box-shadow: 0 0 12px rgba(255,190,90,.9), 0 0 36px rgba(255,170,60,.55); }
.dv-sun::before { background: radial-gradient(70% 60% at 50% 46%, rgba(255,190,90,.22), transparent 70%); }
/* 2) bike riding across */
.dv-bike { height: 108px; }
.dv-bike .road { position: absolute; left: 0; right: 0; bottom: 20px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 26px, transparent 26px 48px); animation: roadMove .6s linear infinite; }
@keyframes roadMove { to { background-position: -48px 0; } }
.dv-bike .rider { position: absolute; bottom: 21px; left: -180px; width: 104px; animation: ride 5.5s cubic-bezier(.45,.05,.25,1) infinite; }
.dv-bike .rider img { position: relative; display: block; width: 104px; height: auto; filter: drop-shadow(0 0 6px rgba(226,0,26,.55)); }
.dv-bike .speed { position: absolute; right: 88%; top: 18%; width: 140px; height: 60%; background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(226,0,26,.85) 7px 9px, transparent 9px 15px); -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
@keyframes ride { 0% { left: -180px; } 62%, 100% { left: calc(100% + 40px); } }
/* 3) checkered racing stripe */
.dv-check { height: 64px; }
.dv-check span { position: absolute; left: -10%; right: -10%; top: 50%; height: 26px; transform: translateY(-50%) skewY(-3deg); background: repeating-conic-gradient(#F2F2F2 0 25%, #151515 0 50%) 0 0 / 13px 13px; border-top: 3px solid var(--red); border-bottom: 3px solid var(--red); box-shadow: 0 0 18px rgba(226,0,26,.35); animation: checkMove 1.6s linear infinite; }
@keyframes checkMove { to { background-position: 26px 0; } }
/* 4) start line before the apply section */
.dv-start { height: 88px; display: grid; place-items: center; }
.dv-start span { position: absolute; left: 0; right: 0; top: 50%; height: 26px; transform: translateY(-50%); background: repeating-conic-gradient(#F2F2F2 0 25%, #151515 0 50%) 0 0 / 13px 13px; opacity: .9; }
.dv-start b { position: relative; padding: 6px 22px; border-radius: 999px; background: var(--red); color: #fff; font: 700 15px/1.2 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .35em; box-shadow: 0 0 0 3px #0C0C0C, 0 0 22px rgba(226,0,26,.7); animation: startPulse 1.8s ease-in-out infinite; }
@keyframes startPulse { 0%, 100% { box-shadow: 0 0 0 3px #0C0C0C, 0 0 14px rgba(226,0,26,.5); } 50% { box-shadow: 0 0 0 3px #0C0C0C, 0 0 30px rgba(226,0,26,.95); } }

/* ---------- button shine ---------- */
.hit.shine { overflow: hidden; border-radius: 22px; }
.hit.shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); transform: translateX(-140%) skewX(-18deg); animation: shine 3.4s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-140%) skewX(-18deg); } 45%, 100% { transform: translateX(420%) skewX(-18deg); } }

/* ---------- scroll reveal (only when JS is on) ---------- */
.js .rv { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
.js .part.rv img { transform: scale(1.04); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.js .part.rv.in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .part-fv img { animation: none; } .sticky { transition: none; }
  .dv *, .dv::before, .dv::after, .dv * ::after, .hit.shine::after, .dv-beam span::after { animation: none !important; }
  .dv-bike .rider { left: 40%; }
  .hit.shine::after { display: none; }
  .js .rv, .js .part.rv img { opacity: 1; transform: none; transition: none; }
}