@charset "UTF-8";
:root { --paper:#f6f5ef; --ink:#252622; --muted:#696a63; --line:#deded5; --accent:#e94f2e; font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible,a:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
h1[tabindex="-1"]:focus { outline:none; }
button:hover:not(:disabled) { filter:brightness(.97); }
[hidden] { display:none !important; }
h1,h2,p { margin:0; }
svg { flex-shrink:0; }
.page-shell { max-width:1440px; margin:auto; padding:0 6.25%; min-height:100svh; display:flex; flex-direction:column; }
.site-header { height:114px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); gap:20px; }
.wordmark { display:flex; align-items:center; gap:10px; padding:8px 0; border:0; background:none; font-size:18px; font-weight:800; letter-spacing:-.04em; }
.wordmark-dot { color:var(--accent); }
main { flex:1; display:flex; flex-direction:column; justify-content:center; }
.quiz-layout { display:grid; grid-template-columns:1fr 1fr; gap:8%; padding:72px 0 68px; align-items:center; }
.eyebrow { display:flex; align-items:center; gap:11px; font-weight:700; font-size:13px; letter-spacing:.12em; }
.short-rule { width:25px; height:2px; background:var(--accent); display:inline-block; }
.intro h1 { font-size:clamp(53px,5.9vw,80px); line-height:1.25; letter-spacing:-.075em; font-weight:900; margin:22px 0 24px; }
.headline-speed { color:var(--accent); position:relative; }
.speed-lines { display:inline-block; font-weight:500; font-size:.65em; letter-spacing:-.25em; transform:skew(-20deg) translate(9px,-1px); opacity:.8; }
.red-period { color:var(--accent); }
.intro-copy { font-size:14px; line-height:2; letter-spacing:.025em; }
.promise { display:flex; align-items:center; gap:16px; margin-top:32px; width:100%; position:relative; }
.promise-number { font-family:Arial,sans-serif; font-weight:700; font-size:48px; line-height:1; letter-spacing:-.07em; }
.promise-number>span { font-family:inherit; font-size:16px; margin-left:5px; }
.promise-description { font-size:11px; font-weight:700; line-height:1.9; border-left:1px solid #c5c6bd; padding-left:16px; }
.promise-description>span { color:var(--muted); font-weight:400; }
.scribble-arrow { width:70px; margin-left:auto; margin-right:6px; align-self:flex-start; transform:rotate(-8deg); }
.question-area { margin-top:23px; }
.question-card { background:#fff; border:1.5px solid var(--ink); box-shadow:8px 8px 0 #e2e3d9; position:relative; }
.card-topline { display:flex; justify-content:space-between; align-items:center; margin:0 32px; height:77px; border-bottom:1px solid var(--line); }
.small-label { font-family:Arial,sans-serif; font-size:10px; letter-spacing:.16em; font-weight:700; }
.question-counter { font-family:Arial,sans-serif; font-size:11px; letter-spacing:.07em; color:var(--muted); }
.question-counter strong { font-size:25px; font-weight:400; color:var(--ink); }
.question-body { padding:37px 32px 28px; }
.question-prompt { font-size:13px; letter-spacing:.08em; }
.question-title { line-height:1.32; letter-spacing:-.065em; font-size:clamp(40px,4.2vw,59px); font-weight:800; margin:16px 0 35px; }
.question-title>span { display:block; }
.question-ending { font-size:.56em; margin-top:7px; letter-spacing:0; }
.answer-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.answer { display:flex; align-items:center; justify-content:flex-start; gap:9px; min-height:66px; padding:0 17px; font-size:17px; font-weight:700; border:1.5px solid var(--ink); transition:transform 100ms,background 100ms; }
.answer:active { transform:translateY(2px); }
.answer svg { width:22px; height:22px; }
.answer-yes { background:#cf3e20; color:white; border-color:#cf3e20; }
.answer-no { background:white; }
.button-arrow { margin-left:auto; font-weight:400; font-family:Arial,sans-serif; font-size:22px; }
.card-caption { margin-top:18px; text-align:center; color:var(--muted); font-size:10px; letter-spacing:.02em; }
.card-bottomline { margin:0 32px; height:57px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); font-size:10px; letter-spacing:.02em; }
.mini-target { font-size:23px; font-family:Arial,sans-serif; }
.progress-track { height:4px; width:100%; background:#eeeee8; }
#progress-fill { height:100%; background:var(--accent); }
.below-card { display:flex; align-items:center; justify-content:space-between; padding-top:22px; }
.back-button { background:none; border:0; padding:8px 0; font-size:11px; color:var(--muted); }
.back-button span { margin-right:7px; }
.back-button:disabled { opacity:.4; }
.keyboard-hint { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:9px; }
kbd { font:9px Arial,sans-serif; border:1px solid #d5d6cc; border-radius:3px; padding:3px 5px; margin-left:6px; }
.result-view { display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; padding:90px 0; }
.result-lead { font-size:18px; margin:28px 0 18px; }
.result-intro h1 { font-size:clamp(30px,3vw,42px); line-height:1.5; font-weight:800; letter-spacing:-.045em; }
#result-prefecture { display:block; font-size:clamp(50px,5.3vw,72px); color:var(--accent); letter-spacing:-.065em; }
.result-small { font-size:.76em; }
.result-copy { font-size:13px; margin-top:25px; line-height:1.8; }
.result-card { padding:36px; background:#fff; border:1.5px solid var(--ink); box-shadow:8px 8px 0 #e2e3d9; text-align:center; }
.result-stamp { display:inline-flex; align-items:center; gap:10px; color:var(--accent); font-size:24px; font-weight:800; letter-spacing:.12em; transform:rotate(-7deg); }
.result-stamp svg { width:50px; height:50px; }
.result-count { font-size:23px; font-weight:700; margin:16px 0 25px; }
.result-count strong { font-family:Arial,sans-serif; font-size:90px; letter-spacing:-.06em; font-weight:700; margin-right:12px; }
.result-stats { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; }
.result-stats strong { font-size:16px; }
.result-note { color:var(--muted); font-size:11px; margin:24px 0; }
.button-dark { background:var(--ink); color:white; border:1px solid var(--ink); display:flex; align-items:center; justify-content:space-between; width:100%; min-height:60px; padding:12px 20px; font-size:12px; font-weight:700; }
.button-dark span { font-size:22px; }
.is-ending { background:#dceff7; --line:#bcd7e1; }
.is-ending .wordmark-dot { color:#497c96; }
.ending-view { text-align:center; max-width:520px; width:100%; min-width:0; margin:0 auto; padding:44px 0 52px; }
.sky-mark { width:120px; margin:0 auto 20px; }
.sky-mark svg { display:block; width:100%; }
.ending-eyebrow { display:block; font-size:11px; color:#48697a; letter-spacing:.08em; }
.ending-view h1 { font-size:clamp(40px,4.5vw,62px); letter-spacing:-.065em; margin:18px 0 15px; line-height:1.4; }
.ending-copy { font-size:15px; letter-spacing:.08em; }
.music-label { text-align:left; color:#48697a; margin:36px 0 15px; }
#youtube-container { position:relative; width:100%; max-width:100%; min-width:0; aspect-ratio:16/9; min-height:200px; border-radius:8px; background:#242424; overflow:hidden; }
#youtube-container iframe { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; max-width:100%; border:0; }
.music-link { color:#315d73; font-size:11px; display:inline-block; margin-top:16px; text-underline-offset:4px; }
.ending-restart { margin-top:28px; border:0; background:none; padding:12px; font-size:12px; color:#315d73; }
.ending-restart span { font-size:18px; padding-right:7px; }
.noscript { position:fixed; inset:auto 0 0; padding:20px; background:var(--ink); color:#fff; text-align:center; }
@media (min-width:1450px) { .page-shell { padding:0 90px; } }
@media (max-width:900px) and (min-width:701px) { .quiz-layout,.result-view { gap:5%; } .page-shell { padding:0 5%; } .card-topline,.card-bottomline { margin:0 24px; } .question-body { padding-left:24px; padding-right:24px; } .answer { padding:0 11px; gap:6px; font-size:15px; } .button-arrow { display:none; } .scribble-arrow { display:none; } }
@media (max-width:700px) {
  .page-shell { padding:0 24px; }
  .site-header { height:76px; }
  .wordmark { font-size:14px; gap:7px; }
  .wordmark svg { width:23px; height:23px; }
  .quiz-layout { grid-template-columns:1fr; gap:28px; padding:31px 0 35px; }
  .eyebrow { font-size:10px; gap:8px; }
  .short-rule { width:18px; }
  .intro { position:relative; }
  .intro h1 { font-size:clamp(40px,9.5vw,61px); line-height:1.28; letter-spacing:-.075em; margin:14px 0 12px; }
  .intro h1 br:last-of-type { display:none; }
  .speed-lines { transform:skew(-20deg) translate(9px,0); }
  .intro-copy { font-size:11px; line-height:1.8; }
  .promise { position:absolute; top:30px; right:0; width:auto; margin:0; display:block; text-align:right; }
  .promise-number { font-size:34px; }
  .promise-number>span { font-size:12px; }
  .promise-description { display:block; border:0; padding:6px 0 0; font-size:8px; }
  .promise-description>span { display:none; }
  .scribble-arrow { display:none; }
  .question-area { margin-top:0; }
  .question-card { box-shadow:5px 5px 0 #e2e3d9; }
  .card-topline { height:54px; margin:0 23px; }
  .small-label { font-size:8px; }
  .question-counter strong { font-size:22px; }
  .question-body { padding:24px 23px 20px; }
  .question-prompt { font-size:11px; }
  .question-title { font-size:43px; margin:12px 0 24px; }
  .question-ending { display:inline !important; font-size:.51em; margin-left:7px; }
  #prefecture-name { display:inline; white-space:nowrap; }
  .answer { min-height:58px; padding:0 14px; font-size:16px; }
  .answer svg { width:19px; height:19px; }
  .button-arrow { font-size:20px; }
  .card-caption { font-size:9px; margin-top:15px; }
  .card-bottomline { margin:0 23px; height:45px; font-size:9px; }
  .below-card { padding-top:12px; }
  .keyboard-hint { display:none; }
  .result-view { grid-template-columns:1fr; gap:32px; padding:40px 0; }
  .result-intro h1 { font-size:28px; }
  #result-prefecture { font-size:52px; }
  .result-lead { font-size:14px; margin:20px 0 12px; }
  .result-copy { font-size:11px; margin-top:15px; }
  .result-card { padding:26px; box-shadow:5px 5px 0 #e2e3d9; }
  .result-count { margin:10px 0 20px; }
  .result-count strong { font-size:76px; }
  .result-stamp svg { width:40px; height:40px; }
  .result-stamp { font-size:20px; }
  .ending-view { padding:35px 0; }
  .sky-mark { width:100px; margin-bottom:15px; }
  .ending-view h1 { font-size:45px; }
  .ending-copy { font-size:13px; }
  .music-label { margin-top:27px; }
}
@media (max-width:374px) { .page-shell { padding:0 18px; } .intro h1 { font-size:37px; } .intro h1 br:last-of-type { display:initial; } .promise { top:32px; } .promise-number { font-size:28px; } .question-title { font-size:35px; } .question-body { padding-left:18px; padding-right:18px; } .answer { padding:0 10px; gap:6px; } .button-arrow { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }