.brand{font-size:clamp(16px,3vw,25px);font-weight:900;text-decoration:none;color:#126aaf}.hero{background:linear-gradient(115deg,#d4f3ff,#f0f9cd);border-radius:28px;margin:20px 0;padding:30px}.hero h1{font-size:clamp(32px,6vw,58px);color:#126aaf;margin:12px 0}.hero-inner{position:relative;max-width:none;padding:0}.hero p{color:#173049}.hero-kicker{color:#346958}.hioki-hero-art{width:120px;height:120px;object-fit:cover;border-radius:50%;float:right;margin:10px}.choices{display:flex!important;flex-direction:column!important;gap:12px}.choice{width:100%;min-height:64px;text-align:left;touch-action:manipulation}.choice.selected{outline:4px solid #f5ae22;outline-offset:2px;background:#fff7d8}.choice:focus-visible,.btn:focus-visible{outline:4px solid #f5ae22;outline-offset:3px}.hioki-modes{display:flex;flex-wrap:wrap;gap:12px}.hioki-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.hioki-region{border:2px solid #d8e7ed;background:white;border-radius:20px;padding:20px}.volume{display:flex;align-items:center;gap:6px;font-size:13px}.volume input{width:80px}.volume output{min-width:36px}.notice{background:#fff1ce;padding:12px;border-radius:10px}.question{line-height:1.65;font-size:clamp(22px,3.5vw,32px)}.source-note{font-size:12px;color:#546777}button{touch-action:manipulation}#app{max-width:1050px;margin:auto;padding:16px}.site-header{flex-wrap:wrap;gap:12px}.top-section{margin-top:20px}.feedback{font-size:28px;color:#116b68}.result-row{padding:16px 0;border-bottom:1px solid #ddd}.record-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:560px){.site-header{padding:12px}.header-actions{gap:6px}.hero{padding:20px}.hioki-hero-art{width:70px;height:70px}.record-grid{grid-template-columns:1fr}.volume input{width:60px}.hioki-modes .btn{flex:1 1 140px}.quiz .topline{flex-wrap:wrap}.panel{padding:20px}}.hero{min-height:0}.hero-inner{text-shadow:none}.hero h1{white-space:normal;letter-spacing:0}.hero h1,.hero p{text-shadow:none}.hero .hioki-modes{justify-content:center}.hero p{font-size:clamp(17px,2.2vw,23px)}
body{font-family:"Noto Sans JP","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif}

/* Phase 4: high-clarity illustrated regional selection, no travel animation. */
.hioki-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:18px}
.hioki-region.scenic-card{padding:0;overflow:hidden;border:2px solid #bfd7df;border-radius:19px;background:#fff;box-shadow:0 8px 22px #16365212}
.scenic-card.cleared{border-color:#e3b556;box-shadow:0 8px 24px #a477251b}
.region-scene{position:relative;min-height:160px;overflow:hidden;background:#c6e3dc}
.region-scene img{width:100%;height:179px;display:block;object-fit:cover}
.scene-label{position:absolute;inset:auto 0 0;padding:31px 16px 12px;background:linear-gradient(transparent,#12283ddb);color:white;text-shadow:0 1px 3px #102e35}
.scene-label strong{font-size:24px;display:block;font-weight:900;letter-spacing:.04em;line-height:1.25}
.scene-label small{font-weight:700;font-size:13px}
.region-card-body{padding:13px 17px 18px}
.region-stat{font-weight:850;font-size:16px;margin:2px 0 8px}
.region-card-body progress{margin:5px 0 7px;height:10px}
.master-state{font-weight:800;font-size:13px;min-height:36px;line-height:1.5;margin:5px 0 10px;color:#325275}
.cleared .master-state{color:#845918}
.region-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.region-actions .btn{font-size:14px;min-height:48px;padding:9px 7px;border-radius:11px;line-height:1.3;box-shadow:0 2px 0 #00000012}
.region-actions .btn.master-cleared{background:#fff6db;border-color:#d2aa55;color:#75521f}
.region-actions .btn:disabled{background:#edf0f3;color:#667582;border-color:#d2dbe2;opacity:.78}
.master-quiz .panel{border-color:#dfbd64;background:linear-gradient(#fffdf5,#fff)}
.master-quiz .eyebrow{color:#815c1c}
.master-result-msg{font-weight:850;color:#806019;background:#fff6dd;border-radius:12px;padding:12px}
@media(max-width:700px){.hioki-grid{grid-template-columns:1fr 1fr;gap:12px}.region-scene img{height:130px}.scene-label{padding:24px 10px 9px}.scene-label strong{font-size:20px}.region-card-body{padding:11px}.region-actions{grid-template-columns:1fr}.region-actions .btn{min-height:46px}}
@media(max-width:480px){.hioki-grid{grid-template-columns:1fr}.region-scene img{height:190px}.region-actions{grid-template-columns:1fr 1fr}.scene-label strong{font-size:24px}}