/* Scoped reading layer: do not resize the platform header/footer. */
body[data-guide-page] { text-rendering:optimizeLegibility; }
body[data-guide-page] :is(main,.section,.chapter,.shell) { min-width:0; }
body[data-guide-page] :is(h1,h2,h3,p,li) { word-break:normal; overflow-wrap:break-word; line-break:strict; }
body[data-guide-page] :is(h2,h3,[id]) { scroll-margin-top:110px; }
body[data-guide-page] :is(.chapter,.info-card,.city-card) { border-radius:14px; }
body[data-guide-page] :is(.chapter,.info-card) :is(p,li) { line-height:1.85; }
body[data-guide-page] :is(.section,.shell) :is(a,button,input,summary):focus-visible { outline:3px solid #a34212; outline-offset:3px; }
body[data-guide-page="index"] .hero-banner { padding-block:30px; }
body[data-guide-page="index"] .section { padding-block:24px; }
.guide-phase-tabs { display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 6px; }
.guide-phase-tabs button { min-height:44px;padding:9px 15px;border:1px solid #d9ded8;border-radius:10px;background:white;color:#24463e;font:600 14px/1.4 system-ui;cursor:pointer; }
.guide-phase-tabs button[aria-pressed="true"] { background:#24463e;color:white;border-color:#24463e; }
.guide-phase-status { margin:6px 0 14px;color:#60716b;font-size:12px; }
.guide-city-map { border:1px solid #dbe2db;background:white;border-radius:14px;overflow:hidden; }
.guide-city-map summary { cursor:pointer;min-height:48px;padding:14px 18px;font-size:14px;font-weight:700;color:#24463e; }
.guide-city-map summary span { font-size:12px;font-weight:400;color:#60716b;margin-left:14px; }
body[data-guide-page="index"] .area-map-panel { max-width:680px;background:white;border:0;box-shadow:none;padding:12px; }
body[data-guide-page="index"] .area-city-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }
body[data-guide-page="index"] .area-city-chip { padding:12px 14px;min-height:58px;border-radius:10px; }
body[data-guide-page="index"] .area-city-chip b { font-size:14px; }
body[data-guide-page="index"] .area-city-chip span { font-size:12px; }
body[data-guide-page="areas"] .hero { padding:26px 0 18px; }
body[data-guide-page="areas"] .hero h1 { font-size:clamp(30px,4vw,46px);line-height:1.25; }
body[data-guide-page="areas"] .map-panel { padding:12px;border-radius:14px;box-shadow:none;background:#f2f6f1; }
body[data-guide-page="areas"] .city-card { padding:16px; }
@media(max-width:600px) {
 body[data-guide-page="index"] .area-city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 body[data-guide-page="index"] .area-city-chip { padding:10px; }
 .guide-phase-tabs { gap:6px; }
 .guide-phase-tabs button { padding:8px 10px;font-size:13px; }
 .guide-city-map summary { padding:12px; }
 .guide-city-map summary span { display:block;margin:3px 0 0 18px; }
 body[data-guide-page="index"] .area-map-link { font-size:10px; padding:6px; }
 body[data-guide-page] .city-card :is(p,li),body[data-guide-page] .info-card :is(p,li) { line-break:strict!important;word-break:normal!important;overflow-wrap:break-word!important; }
}
@media(prefers-reduced-motion:reduce) { body[data-guide-page] * { scroll-behavior:auto!important; } }

body[data-guide-page="index"] .hero { min-height:0;padding:26px 20px; }
body[data-guide-page="index"] .hero-title { font-size:32px;line-height:1.3; }
body[data-guide-page="index"] .cards-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
body[data-guide-page="index"] .step-card-visual { width:100%;height:auto;min-height:0;aspect-ratio:16/9; }
body[data-guide-page="index"] .step-card-body { padding:13px; }
body[data-guide-page="index"] .step-card-name { font-size:15px;line-height:1.5; }
body[data-guide-page="index"] .step-card-desc { font-size:12px;line-height:1.65; }
@media(max-width:900px){body[data-guide-page="index"] .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:540px){
 body[data-guide-page="index"] .hero { padding:22px 16px;min-height:0; }
 body[data-guide-page="index"] .hero-title { font-size:28px; }
 body[data-guide-page="index"] .hero-cta { min-height:44px;font-size:12px; }
 body[data-guide-page="index"] .cards-grid { grid-template-columns:1fr; }
 body[data-guide-page="index"] .step-card { display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch;min-height:112px; }
 body[data-guide-page="index"] .step-card-visual { height:auto;min-height:0;min-width:0;width:96px;aspect-ratio:16/9;align-self:center;background-size:400% 400%; }
 body[data-guide-page="index"] .step-card-body { padding:12px; }
 body[data-guide-page="index"] .step-card-top { left:5px;top:5px;padding:3px 5px;border-radius:5px;gap:3px; }
 body[data-guide-page="index"] .step-num { font-size:15px; }
 body[data-guide-page="index"] .step-num-label { font-size:8px; }
 body[data-guide-page="index"] .step-card-link { font-size:12px;margin-top:6px; }
}
/* One navigation system on both screens; keep all articles reachable. */
body[data-guide-page="index"] .mobile-route,
body[data-guide-page="index"] .all-steps-toggle { display:none; }
body[data-guide-page="index"] #step-grid { display:grid;max-height:none;overflow:visible; }
body[data-guide-page="index"] .area-city-chip { display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;line-break:strict; }
body[data-guide-page="index"] .area-city-chip b { white-space:nowrap;word-break:normal; }

body[data-guide-page="index"] button.tab{font-family:inherit;cursor:pointer;min-height:44px}
body[data-guide-page="areas"] .guide-city-map{max-width:800px;margin:auto}
body[data-guide-page="areas"] .map-panel{margin:0;border:0;background:white}
@media(max-width:600px){
 body[data-guide-page="index"] .area-map-panel,body[data-guide-page="areas"] .map-panel{overflow-x:auto}
 body[data-guide-page="index"] .area-map-wrap,body[data-guide-page="areas"] .map-wrap{min-width:580px}
 body[data-guide-page="index"] .area-map-link,body[data-guide-page="areas"] .map-pin{font-size:12px;min-height:32px;padding:6px 9px}
}

body[data-guide-page] [hidden]{display:none!important}
body[data-guide-page="index"] .tabs.guide-searching{display:none}
#guide-clear-search{margin:8px 0;padding:8px 12px;min-height:40px;background:#fff;border:1px solid #bdcbc1;border-radius:8px;color:#24463e;cursor:pointer}

@media(max-width:600px){.guide-city-map[open] summary::after{content:'地図は左右に動かせます →';display:block;font-size:11px;font-weight:400;color:#617267;margin:7px 0 0 18px}}
body[data-guide-page="areas"] .hero-card{padding:16px}
body[data-guide-page="areas"] .score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
body[data-guide-page="areas"] .score{padding:9px 5px;font-size:12px;border-radius:8px}
body[data-guide-page="areas"] .section{padding-block:22px}
@media(max-width:600px){body[data-guide-page="areas"] .hero-card{margin-top:14px}body[data-guide-page="areas"] .hero-card h2{font-size:16px;margin-bottom:10px}}
body[data-guide-page] main :is(p,li){font-weight:400}
body[data-guide-page] main :is(p,li) :is(strong,b){font-weight:700}

/* Mobile reading: keep the first guides close to the introduction. */
@media(max-width:600px){
 body[data-guide-page="index"] .hero{padding:18px 16px}
 body[data-guide-page="index"] .hero-title{font-size:26px;line-height:1.3;margin:7px 0}
 body[data-guide-page="index"] .hero-sub{font-size:12px;line-height:1.65;margin:8px 0 12px}
 body[data-guide-page="index"] .hero-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
 body[data-guide-page="index"] .hero-cta{min-height:36px;padding:7px 11px}
 body[data-guide-page="index"] .hero-cta.primary{font-size:12px}
 body[data-guide-page="index"] .hero-cta.secondary{font-size:11px}
 body[data-guide-page="index"] .hero-audience{font-size:10px;margin-top:12px}
 body[data-guide-page="index"] .search-area{padding:12px 16px 0}
 body[data-guide-page="index"] .search-suggestions{margin:8px 0;gap:5px}
 body[data-guide-page="index"] .search-suggestion{padding:5px 8px;font-size:11px;min-height:30px}
 body[data-guide-page="index"] .tabs{margin-top:8px;gap:5px}
 body[data-guide-page="index"] button.tab{min-height:34px;padding:6px 10px}
 body[data-guide-page="index"] .section{padding-block:18px}
 body[data-guide-page="index"] .guide-phase-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:5px;margin:10px 0 4px;padding-bottom:3px}
 body[data-guide-page="index"] .guide-phase-tabs button{flex:0 0 auto;min-height:36px;padding:6px 9px;font-size:12px;white-space:nowrap}
 body[data-guide-page="index"] .guide-phase-status{margin:5px 0 10px;font-size:11px}
 body[data-guide-page="index"] .step-card{min-height:104px}
 body[data-guide-page="index"] .step-card-body{padding:10px 12px}
 body[data-guide-page="index"] .step-card-desc{font-size:12px;line-height:1.55}
 body[data-guide-page="index"] .step-card-link{margin-top:4px}
}

@media(max-width:600px){
 body[data-guide-page="index"] .hero{padding:16px!important}
 body[data-guide-page="index"] .hero-actions{flex-wrap:nowrap!important;gap:6px!important;margin-top:8px!important}
 body[data-guide-page="index"] .hero-cta{white-space:nowrap;min-height:36px!important;padding:7px 10px!important}
 body[data-guide-page="index"] .hero-audience{margin-top:10px!important}
}