/* STAGE10: 全国比較。既存の地図・検索・クイズには干渉しない。 */
.national-compare{min-width:0;scroll-margin-top:22px;padding:5px 0 26px;color:#1b4257}
.national-kicker,.national-quiz-kicker{font-weight:800;letter-spacing:.12em;color:#277e9c;font-size:.72rem;margin:0 0 8px}
.national-compare h3{font-size:clamp(1.3rem,3.8vw,1.75rem);line-height:1.45;color:#16465e;margin:0 0 10px}
.national-lead{font-size:.91rem;line-height:1.8;color:#466778;margin:0 0 19px}
.national-topic-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:15px}
.national-topic{border-radius:11px;border:1px solid #bbd4e0;background:#f4f9fb;color:#215973;padding:11px 5px;min-height:49px;font-weight:800;font-size:.87rem;cursor:pointer;line-height:1.35}
.national-topic:hover{background:#e2f1f8}
.national-topic.is-active,.national-topic[aria-pressed="true"]{background:#17617e;color:#fff;border-color:#17617e}
.national-card,.national-explore,.national-quiz{background:#f9fcfe;border:1px solid #cbdfe7;border-radius:18px;padding:20px;margin:0 0 17px;min-width:0}
.national-stat-heading{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.national-chip{border-radius:999px;padding:5px 10px;font-size:.74rem;font-weight:750;color:#17516e;background:#e1f1f8}
.national-chip-subtle{color:#47647c;background:#eaf0f4}
.national-card h4{font-size:clamp(1.24rem,3.2vw,1.58rem);line-height:1.5;margin:0 0 12px;color:#153f56}
.national-stat-copy{font-size:.92rem;line-height:1.8;color:#365b6c;margin:0 0 19px}
.national-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.national-metrics>div{background:#eaf5fa;border:1px solid #d1e6ef;border-radius:12px;padding:11px 12px;min-width:0}
.national-metrics span{display:block;color:#507184;font-size:.78rem;font-weight:700;margin-bottom:5px}
.national-metrics strong{display:block;overflow-wrap:anywhere;color:#194a66;font-size:clamp(1rem,3.5vw,1.2rem);font-variant-numeric:tabular-nums}
.national-bars{margin:0 0 20px}
.national-bar-label{font-size:.8rem;font-weight:700;color:#527284;margin:0 0 9px}
.national-bar{height:37px;display:flex;align-items:center;justify-content:flex-start;position:relative;border-radius:9px;overflow:hidden;margin-bottom:8px;font-weight:800;font-size:.82rem;letter-spacing:.01em}
.national-bar span{position:relative;z-index:1;padding:0 10px}
.national-bar-total{background:#e2ebf0;color:#284f65}
.national-bar-hokkaido{background:#e2ebf0;color:#173e55}
.national-bar-hokkaido::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--national-fill,22.1%);background:#50a4bd;border-radius:9px}
.national-compare h5{font-size:.95rem;color:#254f66;margin:0 0 10px}
.national-mosaic{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin:0 0 9px;max-width:360px}
.national-mosaic span{aspect-ratio:1;border-radius:3px;background:#dfebf0;min-width:0}
.national-mosaic span.is-hokkaido{background:#2182a2}
.national-mosaic-note{font-size:.77rem;line-height:1.75;color:#516c7c;margin:0 0 16px}
.national-interpretation{border-left:3px solid #2e94b0;padding:10px 12px;background:#edf8fb;color:#284f62;border-radius:5px;font-size:.89rem;line-height:1.8;margin:0 0 14px}
.national-source-link{display:inline-block;color:#145f80;text-decoration:underline;text-underline-offset:3px;font-size:.82rem;line-height:1.6;overflow-wrap:anywhere}
.national-explore h4,.national-quiz h4{font-size:1.12rem;line-height:1.5;color:#174961;margin:0 0 8px}
.national-explore p{font-size:.86rem;color:#436477;line-height:1.75;margin:0 0 13px}
.national-town-actions{display:flex;flex-wrap:wrap;gap:9px}
.national-town-actions button{flex:1 1 160px;min-height:46px;border:1px solid #9dc6d7;border-radius:10px;padding:10px 12px;color:#155776;font-size:.86rem;font-weight:750;background:white;cursor:pointer}
.national-town-actions button:hover{background:#ebf7fb}
.national-quiz-count{font-size:.8rem;color:#5c7581;margin:2px 0 10px}
.national-quiz-question{font-size:.96rem;line-height:1.7;color:#1d4559;font-weight:800;margin:0 0 14px}
.national-quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.national-quiz-options button{border:1px solid #bdd6e1;border-radius:11px;background:white;color:#1d506a;min-height:56px;padding:12px;font-size:.92rem;font-weight:750;cursor:pointer;line-height:1.45;overflow-wrap:anywhere}
.national-quiz-options button:hover:not(:disabled){background:#e8f5fa}
.national-quiz-options button.is-correct{background:#e5f7ef;border-color:#228462;color:#15593d}
.national-quiz-options button.is-wrong{background:#fff0e9;border-color:#c38d72;color:#804426}
.national-quiz-options button:disabled{cursor:default;opacity:1}
.national-quiz-feedback{font-size:.87rem;line-height:1.8;color:#225168;margin-top:14px;padding:12px 13px;border-radius:10px;background:#eaf6fa;border-left:3px solid #328da7}
.national-quiz-feedback[hidden]{display:none}
.national-next{min-height:44px;padding:11px 20px;margin-top:13px;border:0;border-radius:11px;background:#19617e;color:white;font-size:.87rem;font-weight:800;cursor:pointer}
.national-next:disabled{opacity:.5;cursor:not-allowed}
.national-methodology{border:1px solid #d4e2e9;background:#f7fafc;border-radius:13px;padding:14px;color:#3c6071;font-size:.8rem;line-height:1.8;margin:0 0 12px}
.national-methodology summary{cursor:pointer;font-weight:800;color:#205971;font-size:.87rem}
.national-methodology p{margin:11px 0}
.national-reference-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.national-reference-scroll table{border-collapse:collapse;width:100%;min-width:550px;font-size:.75rem;background:white}
.national-reference-scroll th,.national-reference-scroll td{padding:9px 7px;border:1px solid #d2e4eb;text-align:left;vertical-align:top}
.national-reference-scroll th{background:#eaf5fa;color:#1a506b}
.national-reference-scroll a{color:#14617f}
.national-topic:focus-visible,.national-town-actions button:focus-visible,.national-quiz-options button:focus-visible,.national-next:focus-visible{outline:3px solid #df9c2b;outline-offset:2px}
@media(max-width:850px){header[role="group"] .nav-tabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important}header[role="group"] .nav-btn{min-height:43px!important} .national-compare{padding-top:13px} .national-topic-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:420px){.national-card,.national-explore,.national-quiz{padding:16px 12px}.national-metrics{grid-template-columns:1fr}.national-quiz-options{grid-template-columns:1fr}.national-mosaic{gap:3px} .national-topic-tabs{gap:5px}}
@media(prefers-reduced-motion:reduce){.national-compare{scroll-behavior:auto}}
.national-number-ones{border:1px solid #cbdfe7;background:#f9fcfe;border-radius:18px;padding:18px;margin:0 0 17px}
.national-number-ones h4{color:#174961;font-size:1.08rem;line-height:1.5;margin:0 0 8px}
.national-number-ones>p{color:#506c7c;line-height:1.65;font-size:.82rem;margin:0 0 14px}
.national-ones-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.national-ones-grid article{background:white;border:1px solid #d0e2e9;border-radius:11px;padding:12px;min-width:0}
.national-ones-grid article>span{font-size:.73rem;color:#587687}
.national-ones-grid h5{font-size:.88rem;color:#1b5068;line-height:1.4;margin:5px 0}
.national-ones-grid strong{display:block;color:#16617e;font-size:1.02rem;margin:7px 0}
.national-ones-grid p{font-size:.76rem;line-height:1.65;color:#557080;overflow-wrap:anywhere;margin:0}
.national-ones-grid a{color:#156180;text-decoration:underline;text-underline-offset:2px}
@media(max-width:850px){.national-ones-grid{grid-template-columns:1fr}}