/* トミナガハルキは帰れない — ゲーム紹介（about.html）
   ゲームのフィットネスアプリ風UIと同じ色・書体：青／水色／アイス／ピーチ、オレンジの「遊ぶ」、Zen Maru Gothic＋Outfit。
   飾り（斜線の円・ドット）は Adobe Stock 素材から書き出した image/ui/*.webp を、大きく角からはみ出させて使う */
:root{
  --ink:#0b0e16; --navy:#073f75; --navy-2:#052f5c;
  --text:#1b2433; --text-2:#5b6676; --line:#d5e9f7;
  --blue:#0695ed; --blue-deep:#0473ba; --blue-dark:#0675c4; --sky:#6ec6f4; --ice:#bce5fd; --ice-2:#e6f5fe; --page:#f2f8fd;
  --peach:#fcc2aa; --peach-deep:#f08a62; --heart:#ff303b; --gold:#ffc44b;
  --f-ui:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-num:"Outfit","Zen Maru Gothic",system-ui,sans-serif;
  --gut:clamp(16px,4.5vw,56px);
  --shadow:0 14px 34px rgba(4,30,60,.16);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--navy-2);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--text);background:var(--page);font:500 16px/1.9 var(--f-ui);overflow-x:clip;text-wrap:wrap}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue-deep);text-underline-offset:3px}
h1,h2,h3,p{margin:0}
.wrap{width:min(1180px,100% - var(--gut)*2);margin:0 auto}
.catch,.sec-h h2,.final h2,.story-txt .quote,.gimmick p,.qa summary,.reel figcaption{word-break:keep-all;overflow-wrap:anywhere}
kbd{display:inline-block;min-width:1.9em;padding:0 7px;border-radius:7px;background:#fff;color:var(--text);font:700 12px/1.9 var(--f-num);text-align:center;box-shadow:0 0 0 1.5px var(--line),0 2px 0 var(--line)}
[hidden]{display:none!important}

/* ---------- buttons (as on the title screen) ---------- */
.btn-go{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:180px;border:0;border-radius:999px;padding:15px 38px 15px 58px;
  background:linear-gradient(135deg,#ffc24f,#f5862c);color:#3b1606;font:700 22px/1.2 var(--f-ui);letter-spacing:.3em;text-decoration:none;
  box-shadow:0 12px 28px rgba(245,134,44,.45),0 0 0 3px rgba(255,255,255,.28) inset;transition:transform .12s,filter .12s}
.btn-go::before{content:"";position:absolute;left:26px;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:#3b1606}
.btn-go::after{content:"";position:absolute;left:33px;top:50%;margin-top:-5px;border-left:8px solid #ffc24f;border-top:5px solid transparent;border-bottom:5px solid transparent}
.btn-go:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-go:active{transform:translateY(1px) scale(.98)}
.btn-go:focus-visible,.btn-ghost:focus-visible,.bar a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.btn-go.big{font-size:26px;padding:19px 48px 19px 70px}
.btn-go.big::before{left:30px;width:24px;height:24px;margin-top:-12px}
.btn-go.big::after{left:39px;margin-top:-6px;border-left-width:9px;border-top-width:6px;border-bottom-width:6px}
.btn-ghost{display:inline-flex;align-items:center;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.12);color:#fff;font:700 15px/1.2 var(--f-ui);padding:14px 24px;letter-spacing:.06em;border-radius:999px;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}

/* ---------- top bar ---------- */
.bar{position:absolute;left:0;right:0;top:0;z-index:5;padding-top:env(safe-area-inset-top,0px)}
.bar-in{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;flex-direction:column;color:#fff;text-decoration:none;margin-right:auto;line-height:1.25}
.brand b{font:700 15px var(--f-ui);letter-spacing:.08em}
.brand span{font:700 10px var(--f-num);letter-spacing:.28em;color:var(--peach)}
.bar-nav{display:flex;gap:24px}
.bar-nav a{color:rgba(255,255,255,.88);font:700 12px var(--f-num);letter-spacing:.2em;text-decoration:none}
.bar-nav a:hover{color:#fff}
.bar-play{color:#3b1606;background:linear-gradient(135deg,#ffc24f,#f5862c);font:700 14px/1 var(--f-ui);letter-spacing:.2em;padding:11px 18px 11px 22px;border-radius:999px;text-decoration:none;box-shadow:0 6px 16px rgba(245,134,44,.4)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(140deg,#0b8fe6 0%,#0675c4 55%,#05549a 100%);padding:clamp(104px,12vw,140px) 0 0}
.deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.deco img{position:absolute;height:auto;opacity:.92}
.hero .d-stripe{width:clamp(300px,34vw,520px);right:-140px;top:-150px;animation:floaty 9s ease-in-out infinite}
.hero .d-dots{width:clamp(320px,34vw,520px);left:-180px;top:46%;opacity:.5;animation:floaty 11s ease-in-out -4s infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:700 11px var(--f-num);letter-spacing:.28em;color:#3b1606;background:var(--peach);padding:6px 14px;border-radius:999px}
.eyebrow i{width:5px;height:5px;border-radius:50%;background:#3b1606}
.hero .logo{margin:22px 0 0;line-height:0}
.hero .logo img{width:clamp(260px,34vw,480px);filter:invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.35))}
.catch{margin-top:26px;font:700 clamp(20px,2.3vw,28px)/1.5 var(--f-ui);letter-spacing:.06em}
.hero .lead{margin-top:14px;max-width:32em;color:rgba(255,255,255,.9);font-size:16px}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.free{margin-top:14px;font:700 13px var(--f-ui);letter-spacing:.08em;color:rgba(255,255,255,.82)}

/* the gameplay card, as the title's demo card: white rim, LIVE-style badge, two floating tiles */
.hero-media{position:relative;padding:28px 0 40px}
.hero-media::before{content:"";position:absolute;width:clamp(220px,24vw,360px);aspect-ratio:1;border-radius:50%;background:var(--peach);left:-12%;top:-14%;z-index:0} /* the big peach sun behind the card's corner */
.hero-media::after{content:"";position:absolute;width:clamp(240px,26vw,380px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.55);right:-16%;bottom:-18%;z-index:0}
.screen{position:relative;z-index:1;aspect-ratio:4/3;border-radius:26px;overflow:hidden;background:#0b3c6a url("../image/about/poster.webp") center/cover;box-shadow:0 0 0 6px #fff,0 30px 70px rgba(2,24,52,.45)}
.hv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.hv.on{opacity:1}
.screen .live{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--text);font:700 11px var(--f-num);letter-spacing:.16em;padding:5px 11px 5px 9px;border-radius:999px;box-shadow:0 6px 16px rgba(2,24,52,.25)}
.screen .live i{width:8px;height:8px;border-radius:50%;background:var(--heart);animation:beat 1.1s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}18%{transform:scale(1.32)}36%{transform:scale(.96)}}
.screen .cap{position:absolute;left:92px;top:16px;background:var(--blue);color:#fff;font:700 12px var(--f-ui);letter-spacing:.06em;padding:5px 12px;border-radius:999px}
.vid-toggle{position:absolute;right:14px;bottom:14px;border:0;border-radius:999px;background:rgba(11,14,22,.62);color:#fff;font:700 12px/1 var(--f-ui);letter-spacing:.04em;padding:9px 13px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vid-toggle:hover{background:rgba(11,14,22,.8)}
.vid-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.w-tile{position:absolute;z-index:2;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:#fff;color:var(--text);border-radius:18px;padding:10px 18px 10px 11px;box-shadow:0 14px 34px rgba(2,24,52,.32);animation:floaty 6s ease-in-out infinite}
.w-tile svg{grid-row:1 / 3;width:42px;height:42px;padding:10px;border-radius:50%}
.w-tile span{display:flex;align-items:baseline;gap:3px;line-height:1}
.w-tile b{font:800 26px var(--f-num)}
.w-tile small{font:600 12px var(--f-num);color:var(--text-2)}
.w-tile em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-2);line-height:1.6}
.w-hr{left:-30px;bottom:6px}
.w-hr svg{fill:var(--heart);background:#ffe1e3}
.w-hr svg path{animation:beat 1.1s ease-in-out infinite;transform-origin:12px 13px}
.w-km{right:-26px;top:0;animation-delay:-3s}
.w-km svg{fill:var(--blue);background:var(--ice-2)}
@media (prefers-reduced-motion:reduce){.deco img,.w-tile,.w-hr svg path,.screen .live i{animation:none}}

/* the town skyline under the hero (the same two layers as the title screen's course band) */
.skyline{position:relative;height:200px;margin-top:0;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20960%2090%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23073f75%22%20d%3D%22M0%2090V12h34V90zM34%2090V2h22V90zM45%202v-14h2v14zM56%2090V70h46V90zM64%2070v-10h30v10zM102%2090V72h22V90zM113%2072v-14h2v14zM124%2090V36h28V90zM152%2090V53h46V90zM198%2090V30h22V90zM209%2030v-14h2v14zM220%2090V52h22V90zM242%2090V69h58V90zM250%2069v-10h42v10zM300%2090V35h22V90zM311%2035v-14h2v14zM322%2090V9h58V90zM380%2090V47h40V90zM420%2090V30h58V90zM428%2030v-10h42v10zM478%2090V45h34V90zM512%2090V59h22V90zM523%2059v-14h2v14zM534%2090V43h34V90zM568%2090V17h22V90zM590%2090V29h46V90zM598%2029v-10h30v10zM636%2090V9h22V90zM658%2090V63h22V90zM680%2090V15h58V90zM738%2090V58h58V90zM767%2058v-14h2v14zM796%2090V71h46V90zM802%2071v-7h12v7zM842%2090V45h34V90zM876%2090V58h40V90zM884%2058v-10h24v10zM916%2090V11h34V90zM950%2090V43h34V90z%22/%3E%3C/svg%3E") 0 30px/960px 90px repeat-x,url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20960%20120%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%230d5fa8%22%20d%3D%22M0%20120V62h34V120zM6%2062v-7h12v7zM34%20120V24h40V120zM42%2024v-10h24v10zM74%20120V48h58V120zM103%2048v-14h2v14zM132%20120V14h28V120zM160%20120V9h22V120zM182%20120V65h34V120zM188%2065v-7h12v7zM216%20120V25h46V120zM262%20120V26h58V120zM320%20120V36h46V120zM366%20120V62h46V120zM412%20120V11h58V120zM470%20120V52h58V120zM476%2052v-7h12v7zM528%20120V31h46V120zM574%20120V58h46V120zM580%2058v-7h12v7zM620%20120V37h22V120zM642%20120V30h46V120zM648%2030v-7h12v7zM688%20120V33h46V120zM734%20120V45h46V120zM757%2045v-14h2v14zM780%20120V57h46V120zM826%20120V30h28V120zM854%20120V51h40V120zM862%2051v-10h24v10zM894%20120V19h22V120zM905%2019v-14h2v14zM916%20120V71h28V120zM944%20120V16h46V120z%22/%3E%3C/svg%3E") 0 0/960px 120px repeat-x,linear-gradient(180deg,transparent 118px,#073f75 118px,#052f5c 100%);animation:skyline 160s linear infinite}
@keyframes skyline{to{background-position:-1920px 30px,-960px 0,0 0}}
@media (prefers-reduced-motion:reduce){.skyline{animation:none}}

/* ---------- numbers ---------- */
.stats{position:relative;z-index:2;list-style:none;margin:-110px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.stats li{background:#fff;border-radius:22px;padding:22px 24px 20px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:6px}
.stats b{font:800 clamp(40px,4.6vw,60px)/1 var(--f-num);color:var(--blue);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stats small{font:700 15px var(--f-ui);color:var(--blue-deep)}
.stats span{grid-column:1 / -1;margin-top:8px;font-size:13px;font-weight:700;color:var(--text-2);letter-spacing:.04em}
.stats li:nth-child(2) b{color:var(--peach-deep)}
.stats li:nth-child(3) b{color:var(--heart)}

/* ---------- section heads ---------- */
.sec{padding:clamp(72px,10vw,128px) 0 0}
.sec-h{margin-bottom:22px}
.sec-h .en{font:800 clamp(44px,7.4vw,104px)/.92 var(--f-num);letter-spacing:-.015em;color:var(--peach-deep);text-transform:uppercase}
.sec-h .en b{font-weight:800;color:var(--blue)}
.sec-h h2{margin-top:14px;font:700 clamp(22px,2.8vw,32px)/1.45 var(--f-ui);letter-spacing:.04em;text-wrap:balance}
.sec-lead{max-width:46em;color:var(--text-2);margin:-4px 0 34px}
.pic{position:relative;margin:0;border-radius:22px;overflow:hidden;background:var(--ice);box-shadow:var(--shadow)}
.pic img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- story ---------- */
.story-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,88px);align-items:center}
.story-txt p+p{margin-top:16px}
.story-txt .quote{display:inline-block;margin-top:24px;font:700 clamp(18px,2vw,22px)/1.5 var(--f-ui);color:#fff;background:var(--blue);padding:10px 22px;border-radius:999px;letter-spacing:.04em}
.story-pics{position:relative;padding:0 0 18% 0}
.story-pics .p1{width:84%}
.story-pics .p2{position:absolute;right:0;bottom:0;width:58%;box-shadow:0 0 0 6px var(--page),0 22px 44px rgba(4,30,60,.22)}
.story-pics .p1 figcaption{top:14px;bottom:auto}
.pic figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.95);color:var(--text);font:700 13px/1.4 var(--f-ui);padding:6px 13px;border-radius:999px;box-shadow:0 6px 14px rgba(2,24,52,.2)}

/* ---------- moves ---------- */
.move-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.move{position:relative;background:#fff;border-radius:24px;padding:24px 24px 26px;box-shadow:var(--shadow)}
.mv-no{position:absolute;right:22px;top:18px;font:800 40px/1 var(--f-num);color:var(--ice);letter-spacing:-.02em}
.mv-ic{width:52px;height:52px;padding:12px;border-radius:50%;background:var(--blue);fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;box-shadow:0 8px 18px rgba(6,149,237,.35)}
.move h3{margin-top:16px;font:700 24px/1.3 var(--f-ui);letter-spacing:.06em}
.mv-in{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:12px 0 12px}
.sw{font:700 13px/1.5 var(--f-ui);color:var(--blue-deep);background:var(--ice-2);padding:4px 12px;border-radius:999px}
.ks{display:flex;flex-wrap:wrap;gap:5px}
.move p:last-child{font-size:15px;line-height:1.8;color:var(--text-2)}
.reel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
.reel figcaption{display:flex;flex-direction:column;gap:0;border-radius:16px;padding:8px 14px 9px;font-size:12px;color:var(--text-2)}
.reel figcaption b{font-size:16px;color:var(--text)}

/* ---------- heart rate ---------- */
.heart{position:relative;margin-top:clamp(72px,10vw,128px);padding:clamp(64px,9vw,112px) 0;color:#fff;background:linear-gradient(160deg,#0b8fe6 0%,#0675c4 45%,#05549a 100%);overflow:hidden}
.heart::before{content:"";position:absolute;width:clamp(360px,44vw,640px);aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.28);right:-14%;top:-30%}
.heart-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px clamp(32px,5vw,72px);align-items:center}
.heart .sec-h .en{color:var(--peach)}
.heart .sec-h .en b{color:#fff}
.heart-txt p{color:rgba(255,255,255,.9)}
.heart-txt p+p{margin-top:14px}
.hr-card{background:#fff;color:var(--text);border-radius:26px;padding:22px 24px 24px;box-shadow:0 26px 60px rgba(2,24,52,.4)}
.hr-head{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.06em}
.hr-head svg{width:40px;height:40px;padding:9px;border-radius:50%;background:#ffe1e3;fill:var(--heart)}
.hr-head svg path{animation:beat 1.1s ease-in-out infinite;transform-origin:12px 13px}
.hr-head em{margin-left:auto;font-style:normal;font-size:12px;color:var(--text-2);letter-spacing:.02em}
.ecg{display:block;width:100%;height:96px;margin:14px 0 6px}
.ecg path{fill:none;stroke:var(--heart);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:ecg 3.2s linear infinite}
@keyframes ecg{0%{stroke-dashoffset:1400}70%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ecg path{animation:none;stroke-dashoffset:0}.hr-head svg path{animation:none}}
.bands{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.bands li{border-radius:16px;padding:12px 12px 12px;background:var(--ice-2);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 3px}
.bands li:nth-child(1){min-height:84px}
.bands li:nth-child(2){min-height:104px;background:var(--ice)}
.bands li:nth-child(3){min-height:124px;background:var(--peach)}
.bands li:nth-child(4){min-height:144px;background:var(--heart);color:#fff}
.bands b{font:800 clamp(24px,2.6vw,32px)/1 var(--f-num)}
.bands small{font:600 11px var(--f-num);opacity:.75}
.bands span{flex-basis:100%;margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.04em}
.tricks{grid-column:1 / -1;margin-top:18px}
.tricks h3{font:700 15px var(--f-ui);letter-spacing:.08em;color:rgba(255,255,255,.85);margin-bottom:12px}
.tricks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tricks li{font:700 15px/1.3 var(--f-ui);padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.45)}
.tricks li.hot{background:var(--peach);border-color:var(--peach);color:#3b1606}

/* ---------- record ---------- */
.record-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.ticket{position:relative;background:#fff;border-radius:26px;padding:24px 26px 26px;box-shadow:0 26px 60px rgba(4,30,60,.18);max-width:470px;width:100%;justify-self:center}
.tk-head{display:flex;justify-content:space-between;align-items:center}
.chip{font:700 13px var(--f-ui);letter-spacing:.1em;color:#fff;background:var(--blue);padding:5px 13px;border-radius:999px}
.ex{font:700 12px var(--f-ui);color:var(--text-2);background:var(--ice-2);padding:4px 11px;border-radius:999px}
.tk-route{display:flex;align-items:center;gap:12px;margin:18px 0 6px;font:700 18px var(--f-ui)}
.tk-route i{position:relative;flex:1;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 10px,transparent 10px 16px)}
.tk-route i::after{content:"";position:absolute;right:-3px;top:-4px;width:11px;height:11px;border-radius:50%;background:var(--blue)}
.tk-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;margin:16px 0 0;padding:16px 0;border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line)}
.tk-rows dt{font-size:12px;font-weight:700;color:var(--text-2)}
.tk-rows dd{margin:0;font:700 26px/1.2 var(--f-num);font-variant-numeric:tabular-nums}
.tk-rows small{font:600 12px var(--f-num);color:var(--text-2);margin-left:2px}
.tk-score{display:flex;flex-direction:column;gap:2px;margin-top:16px}
.tk-score span{font:800 12px var(--f-num);letter-spacing:.24em;color:var(--blue)}
.tk-score b{font:700 18px var(--f-ui)}
.stamp{position:absolute;right:20px;bottom:22px;transform:rotate(-12deg);border:3px solid var(--heart);color:var(--heart);border-radius:14px;padding:8px 12px 7px;font:700 17px/1.2 var(--f-ui);text-align:center;letter-spacing:.06em;opacity:.9}
.stamp small{display:block;font:700 10px var(--f-num);letter-spacing:.04em;margin-top:3px}
.record-txt>p{color:var(--text)}
.record-txt>p+ul,.record-txt ul+p{margin-top:20px}
.score-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.score-list li{display:grid;grid-template-columns:6.4em 1fr;gap:12px;align-items:center;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:0 6px 18px rgba(4,30,60,.08)}
.score-list b{font:700 15px var(--f-ui);color:#fff;background:var(--blue);border-radius:999px;text-align:center;padding:3px 0;letter-spacing:.1em}
.score-list span{font-size:15px;line-height:1.6}

/* ---------- courses ---------- */
.course{--tod:var(--blue);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(40px,6vw,72px)}
.course:nth-of-type(odd){grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.course:nth-of-type(odd) .c-media{order:2}
.c0{--tod:#3aa7e8;--tod-2:#e6f5fe}
.c1{--tod:#f08a62;--tod-2:#fde6dc}
.c2{--tod:#3a4fb8;--tod-2:#e3e7fb}
.c3{--tod:#0695ed;--tod-2:#e6f5fe}
.c4{--tod:#0aa5b8;--tod-2:#dcf5f7}
.c5{--tod:#1d2a6b;--tod-2:#e1e4f2}
.c-media{position:relative}
.c-media .pic{border-radius:26px}
.c-time{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:10px;color:#fff}
.c-time b{font:800 clamp(48px,6vw,80px)/1 var(--f-num);letter-spacing:-.02em;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.c-time span{font:700 13px var(--f-ui);background:var(--tod);padding:5px 12px;border-radius:999px;letter-spacing:.1em}
.c-no{display:flex;align-items:baseline;gap:12px;font:800 44px/1 var(--f-num);color:var(--tod)}
.c-no span{font:700 13px var(--f-num);letter-spacing:.24em;color:var(--text-2)}
.course h3{margin-top:8px;font:700 clamp(26px,3vw,34px)/1.3 var(--f-ui);letter-spacing:.06em}
.c-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.c-meta span{font:700 13px/1.5 var(--f-ui);padding:4px 12px;border-radius:999px;background:var(--tod-2);color:var(--text)}
.c-body>p:not([class]){color:var(--text)}
.route{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 6px}
.route li{display:flex;align-items:center;gap:6px;font:700 13px/1.5 var(--f-ui);color:var(--text-2)}
.route li::after{content:"";width:14px;height:2px;background:var(--line);border-radius:1px}
.route li:last-child{color:#fff;background:var(--tod);padding:3px 12px;border-radius:999px}
.route li:last-child::after{display:none}
.gimmick{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;margin-top:20px;background:#fff;border-radius:20px;padding:10px 18px 10px 10px;box-shadow:0 8px 22px rgba(4,30,60,.1)}
.gimmick img{width:150px;aspect-ratio:4/3;object-fit:cover;border-radius:14px}
.gimmick p{font:700 15px/1.6 var(--f-ui)}
.gimmick p span{display:block;width:max-content;font-size:11px;letter-spacing:.14em;color:#fff;background:var(--tod);padding:1px 10px;border-radius:999px;margin-bottom:5px}

/* ---------- the town ---------- */
.town-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.town-grid li{background:#fff;border-radius:22px;padding:22px 22px 24px;box-shadow:var(--shadow)}
.town-grid h3{font:700 20px/1.4 var(--f-ui);letter-spacing:.06em;color:var(--blue-deep);margin-bottom:8px}
.town-grid p{font-size:15px;line-height:1.8;color:var(--text-2)}

/* ---------- faq ---------- */
.faq-in{max-width:900px}
.qa{display:grid;gap:12px}
.qa details{background:#fff;border-radius:20px;box-shadow:0 6px 18px rgba(4,30,60,.08)}
.qa summary{position:relative;list-style:none;cursor:pointer;padding:18px 58px 18px 22px;font:700 17px/1.5 var(--f-ui)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";display:inline-block;margin-right:12px;font:800 18px var(--f-num);color:var(--blue)}
.qa summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg);transition:transform .2s}
.qa details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.qa summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:20px}
.qa details p{padding:0 22px 20px 52px;color:var(--text-2);font-size:15px}

/* ---------- final call ---------- */
.final{position:relative;overflow:hidden;margin-top:clamp(72px,10vw,128px);padding:clamp(72px,10vw,120px) 0;text-align:center;color:#fff;background:linear-gradient(140deg,#0b8fe6 0%,#0675c4 55%,#05549a 100%)}
.final .d-sun{position:absolute;width:clamp(300px,34vw,520px);aspect-ratio:1;border-radius:50%;background:var(--peach);left:-12%;bottom:-38%}
.final .d-stripe{width:clamp(300px,34vw,520px);right:-150px;top:-160px;animation:floaty 9s ease-in-out infinite}
.final-in{position:relative;display:flex;flex-direction:column;align-items:center}
.final .logo img{width:clamp(220px,26vw,360px);filter:invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.35))}
.final h2{margin:26px 0 30px;font:700 clamp(22px,2.8vw,32px)/1.45 var(--f-ui);letter-spacing:.06em}
.final .games{margin-top:22px}
.final .games a{color:#fff;font-weight:700;font-size:14px}

/* ---------- footer ---------- */
.foot{background:var(--navy-2);color:rgba(255,255,255,.75);text-align:center;font:700 13px/2 var(--f-ui);padding:26px var(--gut) calc(30px + env(safe-area-inset-bottom,0px))}
.foot a{color:#fff;text-underline-offset:4px;white-space:nowrap}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;margin-top:4px}

/* ---------- narrower screens ---------- */
@media (max-width:1080px){
  .bar-nav{display:none}
  .hero-in{grid-template-columns:1fr}
  .hero-txt{max-width:640px}
  .hero-media{max-width:640px;width:100%;margin:0 auto}
  .w-hr{left:-10px}.w-km{right:-10px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .move-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heart-in{grid-template-columns:1fr}
  .town-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .story-in,.record-in{grid-template-columns:1fr}
  .course,.course:nth-of-type(odd){grid-template-columns:1fr}
  .course:nth-of-type(odd) .c-media{order:0}
  .record-txt{order:-1}
}
@media (max-width:620px){
  body{font-size:15px}
  .bar-in{height:62px}
  .brand b{font-size:13px}
  .hero{padding-top:84px}
  .hero .logo img{width:min(100%,300px)}
  .catch{margin-top:20px}
  .cta{gap:10px}
  .btn-go{min-width:0;flex:1 1 100%;font-size:20px}
  .btn-ghost{flex:1 1 100%;justify-content:center}
  .hero-media{padding:30px 0 52px}
  .hero-media::before{left:-18%;top:-6%}
  .screen{border-radius:20px;box-shadow:0 0 0 5px #fff,0 22px 50px rgba(2,24,52,.45)}
  .w-tile{padding:8px 14px 8px 8px;border-radius:16px}
  .w-tile svg{width:34px;height:34px;padding:8px}
  .w-tile b{font-size:21px}
  .w-hr{left:-4px;bottom:4px}.w-km{right:-4px;top:2px}
  .screen .cap{display:none}
  .skyline{height:170px}
  .stats{gap:10px;margin-top:-96px}
  .stats li{padding:16px 16px 14px;border-radius:18px}
  .stats b{font-size:38px}
  .stats li:nth-child(4) b{font-size:30px}
  .stats span{font-size:12px}
  .move-grid,.town-grid{grid-template-columns:1fr}
  .move{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:18px 18px 20px}
  .mv-ic{width:46px;height:46px;padding:11px}
  .move h3{margin-top:0;font-size:22px}
  .move .mv-in,.move p:last-child{grid-column:1 / -1}
  .mv-no{top:16px;right:18px;font-size:34px}
  .reel .pic{background:#fff}
  .reel{grid-template-columns:1fr 1fr;gap:10px}
  .reel .pic{border-radius:16px}
  .reel figcaption{position:static;border-radius:0;box-shadow:none;padding:7px 10px 9px;background:#fff}
  .reel figcaption b{font-size:14px}
  .bands{gap:6px}
  .bands li{padding:10px 8px;border-radius:12px}
  .bands li:nth-child(1){min-height:70px}.bands li:nth-child(2){min-height:88px}.bands li:nth-child(3){min-height:106px}.bands li:nth-child(4){min-height:124px}
  .bands b{font-size:22px}
  .tricks li{font-size:14px;padding:7px 13px}
  .ticket{padding:20px 18px 22px}
  .tk-rows dd{font-size:22px}
  .stamp{right:14px;bottom:18px;font-size:15px}
  .score-list li{grid-template-columns:5.6em 1fr;gap:10px;padding:10px 12px}
  .c-time{left:14px;bottom:12px}
  .gimmick{grid-template-columns:110px 1fr;gap:12px;padding:8px 14px 8px 8px}
  .gimmick img{width:110px}
  .gimmick p{font-size:14px}
  .qa summary{font-size:16px;padding:16px 50px 16px 18px}
  .qa details p{padding:0 18px 18px 18px}
  .btn-go.big{font-size:22px;padding:17px 40px 17px 62px}
  .final .d-sun{width:240px;left:-110px;bottom:-120px}
  .hero .d-stripe{width:300px;right:-150px;top:-130px}
  .hero .d-dots{width:320px;left:-190px;top:auto;bottom:120px}
}