:root{--ink:#183b45;--navy:#123742;--teal:#20a98e;--mint:#ddf4ed;--cream:#f7f4ec;--orange:#f49a6b;--line:#dce5e3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--cream);color:var(--ink);margin:0;font-family:Hiragino Sans,Yu Gothic UI,Yu Gothic,sans-serif}button,input{font:inherit}button{cursor:pointer}.topbar{border-bottom:1px solid var(--line);z-index:10;background:#fff;align-items:center;height:76px;padding:0 max(24px,50vw - 590px);display:flex;position:sticky;top:0}.brand{color:var(--navy);letter-spacing:.04em;align-items:center;gap:11px;font-size:19px;font-weight:900;text-decoration:none;display:flex}.brand-mark{align-items:flex-end;gap:2px;width:30px;height:32px;display:inline-flex;transform:rotate(-3deg)}.brand-mark i{background:var(--teal);border-radius:10px 10px 3px 3px;width:8px;display:block}.brand-mark i:first-child{height:20px}.brand-mark i:nth-child(2){background:var(--navy);height:30px}.brand-mark i:nth-child(3){background:var(--orange);height:24px}.mode-tabs{align-self:stretch;gap:8px;margin:auto;display:flex}.mode-tabs button{color:#819093;background:0 0;border:0;border-bottom:3px solid #0000;min-width:160px;font-weight:800}.mode-tabs button span{margin-right:8px;font-size:17px}.mode-tabs button.active{color:var(--navy);border-color:var(--teal)}.page-shell,.quick-page{max-width:1180px;margin:0 auto;padding:52px 24px 70px}.intro-row,.quick-head{justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:34px;display:flex}.eyebrow{letter-spacing:.18em;margin:0 0 10px;font-weight:900;color:var(--teal)!important;font-size:12px!important}h1{color:var(--navy);letter-spacing:.03em;margin:0;font-size:clamp(30px,4vw,46px);line-height:1.2}.intro-row p,.quick-head p{color:#728386;margin:10px 0 0;font-size:14px}.progress-card{border:1px solid var(--line);background:#fff;border-radius:14px;min-width:185px;padding:13px 18px;box-shadow:0 8px 24px #1939420a}.progress-card>span{color:#748689;font-size:12px;font-weight:700}.progress-card strong{float:right;color:var(--teal);font-size:24px}.progress-card small{color:#9aabaa;margin-left:3px;font-size:12px}.progress-card div,.quiz-progress div{clear:both;background:#e8efed;border-radius:8px;height:5px;margin-top:9px;overflow:hidden}.progress-card i,.quiz-progress i{background:var(--teal);border-radius:8px;height:100%;transition:all .3s;display:block}.map-layout{grid-template-columns:minmax(0,1fr) 330px;gap:24px;display:grid;position:relative}.map-card,.answer-card,.quiz-card,.finish-card{border:1px solid var(--line);background:#fff;border-radius:18px;box-shadow:0 12px 32px #183b450c}.map-card{flex-direction:column;min-height:570px;padding:22px;display:flex;position:relative;overflow:hidden}.map-toolbar{justify-content:space-between;align-items:center;gap:16px;min-height:38px;display:flex}.map-legend{color:#768689;gap:18px;font-size:11px;font-weight:700;display:flex}.map-legend span{align-items:center;gap:6px;display:flex}.dot{background:#bdd0cd;border-radius:50%;width:9px;height:9px}.selected-dot{background:var(--orange)}.answered-dot{background:#70b4a6}.unanswered-dot{background:#e8efed;border:1px solid #cbd8d5}.correct-dot{background:#28aa78}.wrong-dot{background:#e86d6a}.zoom-controls{border:1px solid var(--line);background:#fff;border-radius:9px;flex-shrink:0;align-items:center;display:flex;overflow:hidden}.zoom-controls button{width:32px;height:32px;color:var(--navy);background:#fff;border:0;font-size:18px;font-weight:900}.zoom-controls button:hover:not(:disabled){background:var(--mint)}.zoom-controls button:disabled{color:#cad4d2;cursor:not-allowed}.zoom-controls span{text-align:center;color:#718487;min-width:48px;font-size:10px;font-weight:800}.japan-map{filter:drop-shadow(0 8px 6px #173c4420);touch-action:none;overscroll-behavior:contain;flex:1;width:100%;min-height:440px}.japan-map.draggable{cursor:grab}.japan-map.draggable:active{cursor:grabbing}.japan-map g{transform-origin:50%;transition:transform .18s ease-out}.prefecture{fill:#e8efed;stroke:#fff;stroke-width:1.2px;cursor:pointer;transform-box:fill-box;transform-origin:50%;outline:none;transition:fill .15s,transform .15s}.prefecture.answered{fill:#70b4a6}.prefecture:hover,.prefecture:focus{fill:#9ac8bf;transform:translateY(-1px)}.prefecture.selected{fill:var(--orange);stroke:#fff7f1;stroke-width:2.2px}.prefecture.correct{fill:#4dbd8f}.prefecture.wrong{fill:#e57973}.prefecture.correct.selected,.prefecture.wrong.selected{stroke:#173b45;stroke-width:2.3px}.map-hint{text-align:center;color:#8a999b;margin:0;font-size:11px}.answer-card{align-self:start;padding:26px;position:sticky;top:96px}.step,.answer-heading{letter-spacing:.04em;align-items:center;gap:10px;font-size:12px;font-weight:900;display:flex}.step span,.answer-heading span{color:#fff;background:var(--navy);border-radius:50%;place-items:center;width:28px;height:28px;font-size:10px;display:grid}.step p{margin:0}.mini-shape{background:#f2f7f5;border-radius:14px;height:132px;margin:18px 0 8px;padding:14px;overflow:hidden}.solo-shape{opacity:0;width:100%;height:100%;overflow:hidden}.solo-shape.ready{opacity:1}.solo-shape path{fill:var(--navy);stroke:var(--navy);stroke-linejoin:round}.selection-label{color:var(--orange);text-align:center;margin:0 0 23px;font-size:11px;font-weight:900}.answer-heading{border-top:1px solid #e7eceb;padding-top:20px}.answer-heading span{background:var(--teal)}.answer-heading label{font-size:12px}.input-wrap{margin-top:13px;position:relative}.input-wrap input,.quick-form input{width:100%;color:var(--navy);background:#fff;border:1.5px solid #cfdcda;border-radius:10px;outline:none;padding:14px 42px 14px 14px}.input-wrap input:focus,.quick-form input:focus{border-color:var(--teal);box-shadow:0 0 0 3px #20a98e18}.input-wrap span{color:#9dadaa;position:absolute;top:13px;right:14px}.input-note{color:#8a9a9c;margin:8px 2px 18px;font-size:10px}.quick-form button,.finish-card button{background:var(--navy);color:#fff;border:0;border-radius:10px;width:100%;padding:14px;font-size:13px;font-weight:900;box-shadow:0 7px 14px #12374226}.answer-detail{border-radius:10px;gap:8px;margin-top:15px;padding:16px;font-size:13px;display:grid}.answer-detail b{font-size:19px}.answer-detail span{justify-content:space-between;gap:10px;display:flex}.answer-detail span strong{font-size:15px}.answer-detail.ok,.quick-feedback.ok{color:#167a59;background:#e2f5ec}.answer-detail.ng,.quick-feedback.ng{color:#c2514c;background:#fff0ed}.check-step{border-top:1px solid #e7eceb;margin-top:20px;padding-top:20px}.check-step .answer-heading{border:0;padding:0}.check-step>p{gap:3px;margin:14px 0;display:grid}.check-step>p strong{font-size:14px}.check-step>p small{color:#8a9a9c;font-size:10px}.check-step>button,.side-score button{background:var(--teal);color:#fff;border:0;border-radius:9px;width:100%;padding:14px;font-weight:900}.check-step>button span{float:right}.side-score{background:var(--navy);color:#fff;text-align:center;border-radius:13px;margin-top:18px;padding:20px}.side-score>span{color:#b5cacc;font-size:11px;font-weight:800;display:block}.side-score>strong{color:#7ce0c3;margin:5px 0;font-size:46px;line-height:1.1;display:block}.side-score>strong small{color:#b5cacc;font-size:14px}.side-score p{color:#d8e5e5;font-size:11px}.side-score button{background:0 0;border:1px solid #fff5;margin-top:8px}.check-area{background:var(--navy);color:#fff;border-radius:14px;gap:14px;width:330px;padding:18px;display:grid;position:absolute;bottom:0;right:0;box-shadow:0 14px 28px #12374228}.check-area div{display:grid}.check-area strong{font-size:16px}.check-area div span{color:#aac1c3;margin-top:3px;font-size:10px}.check-area button{background:var(--teal);color:#fff;border:0;border-radius:9px;padding:14px 18px;font-weight:900}.check-area button span{float:right}.score-banner{background:var(--navy);color:#fff;border-radius:16px;align-items:center;gap:28px;margin-bottom:24px;padding:22px 26px;display:flex;box-shadow:0 14px 30px #1237422f}.score-banner div{align-items:baseline;gap:12px;display:flex}.score-banner div>span{color:#b5cacc;font-size:12px;font-weight:800}.score-banner strong{color:#7ce0c3;font-size:48px;line-height:1}.score-banner small{color:#b5cacc;font-size:15px}.score-banner p{flex:1;font-size:14px;font-weight:700}.score-banner button{color:#fff;background:0 0;border:1px solid #ffffff50;border-radius:8px;padding:10px 16px}.quick-head{align-items:center}.count-picker{border:1px solid var(--line);background:#fff;border-radius:12px;grid-template-columns:repeat(3,minmax(0,1fr));padding:5px;display:grid}.count-picker button{color:#789093;background:0 0;border:0;border-radius:8px;width:100%;padding:10px 8px;font-weight:900}.count-picker button.active{background:var(--navy);color:#fff}.quiz-card{max-width:760px;margin:0 auto;padding:28px 34px 34px}.quiz-progress{color:#839497;letter-spacing:.1em;font-size:11px;font-weight:900}.quiz-progress b{float:right;color:var(--teal);font-size:19px}.quiz-progress small{color:#8b9b9d}.silhouette-stage{background:#f0f5f3;border-radius:16px;height:360px;margin:24px 0;padding:38px;position:relative;overflow:hidden}.silhouette-stage .solo-shape path{fill:var(--navy)}.quick-form label{text-align:center;margin-bottom:14px;font-weight:900;display:block}.quick-form>div{grid-template-columns:1fr 150px;gap:10px;display:grid}.quick-form button{background:var(--teal)}.quick-form button:disabled{opacity:.45;cursor:not-allowed}.quick-feedback{border-radius:10px;justify-content:space-between;margin-top:15px;padding:13px 16px;display:flex}.finish-card,.start-card{text-align:center;border:1px solid var(--line);background:#fff;border-radius:18px;max-width:600px;margin:70px auto;padding:60px 30px;box-shadow:0 12px 32px #183b450c}.finish-card>span{color:var(--teal);letter-spacing:.2em;font-weight:900}.finish-card h2{color:var(--navy);margin:15px;font-size:62px}.finish-card button{background:var(--teal);max-width:260px;margin-top:18px}.start-card>p{color:var(--navy);margin:0 0 24px;font-size:18px;font-weight:900}.start-card .count-picker{max-width:360px;margin:0 auto 20px}.start-button{background:var(--teal);color:#fff;border:0;border-radius:10px;width:100%;max-width:360px;margin:0 auto 14px;padding:15px 18px;font-weight:900;display:block;box-shadow:0 8px 18px #20a98e35}.start-button span{float:right}.start-card small{color:#859597}.back-to-count{color:#6f8588;background:0 0;border:0;padding:0 0 18px;font-size:11px;font-weight:800}.back-to-count:hover{color:var(--teal)}footer{border-top:1px solid var(--line);color:#6f8386;background:#fff;justify-content:center;align-items:center;gap:12px;min-height:105px;padding:24px;font-size:12px;display:flex}footer .brand-mark{transform:scale(.65)}footer small{color:#a5b1b2;margin-left:30px}@media (width<=800px){.topbar{height:68px;padding:0 14px}.brand span{display:none}.mode-tabs{margin-left:auto}.mode-tabs button{min-width:0;padding:0 12px;font-size:12px}.mode-tabs button span{display:none}.page-shell,.quick-page{padding:32px 14px 50px}.intro-row,.quick-head{flex-direction:column;align-items:stretch;margin-bottom:24px}.progress-card{width:100%}.map-layout{grid-template-columns:1fr}.map-card{min-height:auto;padding:14px}.japan-map{min-height:390px}.answer-card{padding:20px;position:static}.mini-shape{height:150px}.check-area{z-index:5;width:auto;margin-top:0;position:sticky;bottom:10px;right:auto}.check-area div{display:none}.check-area button{width:100%}.score-banner{flex-wrap:wrap}.score-banner p{flex-basis:100%;order:3;margin:0}.score-banner strong{font-size:40px}.count-picker{width:100%}.count-picker button{flex:1}.quiz-card{padding:20px 16px}.silhouette-stage{height:300px;padding:28px}.quick-form>div{grid-template-columns:1fr}.quick-feedback{flex-direction:column;gap:4px}.start-card{margin:30px auto;padding:40px 20px}footer{flex-wrap:wrap}footer small{text-align:center;width:100%;margin:0}}@media (width<=460px){h1{font-size:30px}.japan-map{min-height:330px}.map-toolbar{align-items:flex-start}.map-legend{flex-wrap:wrap;justify-content:flex-start;gap:8px}.zoom-controls span{display:none}.silhouette-stage{height:250px}.mode-tabs{gap:0}.mode-tabs button{padding:0 9px}.topbar{gap:5px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}