/* アクセスページの「北杜の交通とエリア」。地図の中の色は scripts/access_map/build.py の STYLE。文字と余白は白銀比の刻み（13・15・18・21・25・36px） */
.access-map{color:var(--semantic-color-text-primary)}
.access-map__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:36px}
.access-map__heading h2{font-size:36px;line-height:1.5;margin:0 0 15px}
.access-map__heading p{margin:0;font-size:18px;line-height:1.707;max-width:40em}
.access-map__body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.access-map__overview{position:relative;border:1px solid var(--semantic-color-border-default);border-radius:4px;overflow:hidden;background:#fff}
/* ページ内の地図：枠の中で拡大・縮小できる。等倍のときは指の縦スクロールをページに渡し、拡大したら地図を動かせる */
.access-map__stage{position:relative;aspect-ratio:860/700;overflow:hidden;touch-action:pan-y}
.access-map__stage.is-zoomed{touch-action:none;cursor:grab}
.access-map__stage.is-zoomed:active{cursor:grabbing}
.access-map__stage:focus-visible{outline:3px solid var(--semantic-color-focus-default);outline-offset:-3px}
/* 地図の操作は地図の角に置く（右上＝大きく開く、右下＝拡大と縮小） */
.access-map__tools button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:#fff;color:var(--semantic-color-text-primary);font:inherit;font-size:21px;line-height:1;cursor:pointer}
.access-map__tools button:disabled{color:var(--semantic-color-border-default);cursor:default}
.access-map__tools button:not(:disabled):hover{background:var(--semantic-color-surface-muted)}
.access-map__tools button:focus-visible{outline:3px solid var(--semantic-color-focus-default);outline-offset:-3px}
.access-map__expand,.access-map__zoom{position:absolute;right:13px;border:1px solid var(--semantic-color-text-primary);border-radius:4px;overflow:hidden}
.access-map__tools .access-map__expand{top:13px;border:1px solid var(--semantic-color-text-primary)}
.access-map__expand svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.access-map__zoom{bottom:13px;display:grid}
.access-map__zoom button+button{border-top:1px solid var(--semantic-color-border-default)}

.access-map__legend{display:flex;flex-wrap:wrap;gap:11px 25px;padding:0;list-style:none;font-size:15px;margin:18px 0 0}
.access-map__legend li{display:flex;align-items:center;gap:9px}
.access-map__key{width:30px;border-top:3px solid var(--semantic-color-map-rail)}
.access-map__key--highway{border-color:var(--semantic-color-map-highway);border-width:4px}
.access-map__key--road{border-color:var(--semantic-color-map-road)}
.access-map__key--trail{border-top:2px dashed var(--semantic-color-map-trail)}
.access-map__key--trailhead{width:7px;height:7px;border:2px solid var(--semantic-color-map-trail);border-radius:50%;background:#fff}
.access-map__key--peak{width:0;height:0;border:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid var(--semantic-color-map-label)}

/* エリアから探す（地図の塗りと同じ色の札） */
.access-map__areas{margin-top:25px}
.access-map__areas h3{font-size:18px;margin:0 0 11px}
.access-map__areas ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.access-map__area{display:flex;flex-direction:column;justify-content:center;min-height:72px;box-sizing:border-box;padding:11px 18px;border-radius:4px;background:var(--zone);color:var(--semantic-color-text-primary);text-decoration:none}
.access-map__area strong{font-size:15px;line-height:1.5}
.access-map__area small{font-size:13px;line-height:1.5;color:var(--semantic-color-text-primary)}
.access-map__area:hover{background:var(--zone-hover)}
.access-map__area:hover strong{text-decoration:underline;text-underline-offset:4px}
.access-map__area:focus-visible{outline:3px solid var(--semantic-color-focus-default);outline-offset:2px}
.access-map__area--kaikoma{--zone:var(--semantic-color-map-zone-kaikoma);--zone-hover:var(--semantic-color-map-zone-kaikoma-hover)}
.access-map__area--yatsugatake{--zone:var(--semantic-color-map-zone-yatsugatake);--zone-hover:var(--semantic-color-map-zone-yatsugatake-hover)}
.access-map__area--mizugaki{--zone:var(--semantic-color-map-zone-mizugaki);--zone-hover:var(--semantic-color-map-zone-mizugaki-hover)}

/* 方面別の行き方（地図の下） */
.route.access-map__connections{margin:25px 0 0;padding:25px 36px 31px;background:var(--semantic-color-surface-muted);border-radius:4px}

/* 地図の右の目次（番号の目印） */
.access-map__index{font-size:15px;line-height:1.5}
.access-map__index h3{font-size:18px;margin:0 0 11px}
.access-map__group+.access-map__group{margin-top:36px}
.access-map__index ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.access-map__index a{display:flex;align-items:center;gap:11px;min-height:44px;color:inherit;text-decoration:none}
.access-map__index a:hover .access-map__place,.access-map__index a:hover>span:last-child{text-decoration:underline}
.access-map__index .ico--ext{width:13px;height:13px;flex-shrink:0;margin-left:auto;stroke:currentColor;fill:none}
.access-map__place{display:flex;flex-direction:column}
.access-map__place small{font-size:13px;color:var(--semantic-color-text-muted)}
.access-map__marks span:first-child{display:inline-grid;place-items:center;flex-shrink:0;background:var(--semantic-color-map-landmark);color:#fff;width:25px;height:25px;border-radius:50%;font-size:13px;font-weight:700;line-height:1;padding-bottom:.17em;box-sizing:border-box;font-variant-numeric:tabular-nums}
.access-map__marks span.is-near{background:#fff;color:var(--semantic-color-text-primary);box-shadow:inset 0 0 0 1.8px var(--semantic-color-map-landmark)}

.access-map__caption{font-size:13px;color:var(--semantic-color-text-muted);line-height:1.707;margin:25px 0 0}

/* 駅・ICから探す */
.access-map__directory{margin-top:72px}
.access-map__directory h3{font-size:25px;line-height:1.5;margin:0}
.access-map__directory[open]>summary{margin-bottom:25px}
.access-map__stop-group+.access-map__stop-group{margin-top:36px}
.access-map__stop-group h4{font-size:15px;font-weight:700;color:var(--semantic-color-text-muted);margin:0 0 11px}
.access-map__stops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0;gap:0 36px}
.access-map__stops li{border-top:1px solid var(--semantic-color-border-default);padding:15px 0 4px;scroll-margin-top:100px}
.access-map__stops li:target{outline:2px solid var(--semantic-color-focus-default);outline-offset:6px}
.access-map__stops h5{font-size:18px;line-height:1.5;margin:0 0 4px}
.access-map__stops p{font-size:15px;line-height:1.707;margin:0;color:var(--semantic-color-text-muted)}
.access-map__stops a{font-size:15px;display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--semantic-color-text-primary)}
.access-map__stops .ico--ext{width:13px;height:13px;stroke:currentColor;fill:none}

.access-map__sources{font-size:13px;color:var(--semantic-color-text-muted);line-height:1.707;margin:36px 0 0}

/* 大きい地図（ダイアログ） */
.access-map__dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#fff;color:var(--semantic-color-text-primary);overflow:hidden}
.access-map__dialog[open]{display:flex;flex-direction:column}
.access-map__dialog::backdrop{background:rgb(21 21 21 / .7)}
.access-map__toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 25px;border-bottom:1px solid var(--semantic-color-border-default);background:#fff}
.access-map__toolbar h2{font-size:18px;margin:0}
.access-map__controls{display:flex;gap:9px}
.access-map__controls button{min-width:44px;min-height:44px;border:1px solid var(--component-button-secondary-border);border-radius:4px;padding:8px 15px;background:#fff;color:var(--semantic-color-text-primary);font:inherit;font-size:15px;cursor:pointer}
.access-map__controls button:disabled{opacity:.4;cursor:default}
.access-map__controls button:focus-visible,.access-map__viewport:focus-visible{outline:3px solid var(--semantic-color-focus-default);outline-offset:-3px}
.access-map__help{font-size:13px;line-height:1.5;padding:9px 25px;margin:0;color:var(--semantic-color-text-muted)}
.access-map__viewport{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab}
.access-map__viewport:active{cursor:grabbing}
.access-map__canvas{width:100%;height:100%;will-change:transform}
.access-map__canvas svg{width:100%;height:100%;display:block;user-select:none}
.access-map__selection{min-height:76px;padding:13px 25px;background:#fff;border-top:1px solid var(--semantic-color-border-default);font-size:15px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.access-map__selection h3,.access-map__selection p{margin:0}
.access-map__selection h3{font-size:18px}
.access-map__selection a{margin-left:auto}
.access-map__dialog a:focus-visible{outline:3px solid var(--semantic-color-focus-default)}
.access-map__dialog [data-map-stop]{cursor:pointer}

@media(max-width:899px){
.access-map__body{grid-template-columns:minmax(0,1fr)}
.access-map__index{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;align-items:start}
.access-map__index .access-map__group+.access-map__group{margin-top:0}
.access-map__stops{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.access-map__heading{display:block;margin-bottom:25px}
.access-map__heading h2{font-size:25px;margin-bottom:11px}
/* スマホの地図は小さいので、拡大は「大きく開く」に任せる */
.access-map__zoom{display:none}
.access-map__tools .access-map__expand{top:9px;right:9px}
.access-map__legend{gap:9px 18px;font-size:13px}
.access-map__areas ul{grid-template-columns:minmax(0,1fr);gap:9px}
.access-map__area{min-height:56px;padding:9px 15px}
.route.access-map__connections{padding:13px 18px 18px}
.access-map__connections .route__row{grid-template-columns:minmax(0,1fr) minmax(0,auto);column-gap:13px;row-gap:9px}
.access-map__connections .route__from{grid-column:1;grid-row:1;margin-top:0}
.access-map__connections .route__to{grid-column:2;grid-row:1;margin-top:0;text-align:right}
.access-map__connections .route__line{grid-column:1/-1;grid-row:2}
.access-map__directory{margin-top:72px}
.access-map__directory h3{font-size:21px}
.access-map__stops{grid-template-columns:minmax(0,1fr);gap:0}
.access-map__stops li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:13px;padding:9px 0}
.access-map__stops h5{grid-column:1}
.access-map__stops p{grid-column:1;font-size:13px}
.access-map__stops a{grid-column:2;grid-row:1/3;font-size:13px}
.access-map__toolbar{padding:9px 13px;flex-wrap:wrap;gap:9px}
.access-map__toolbar h2{width:100%;font-size:15px}
.access-map__controls{width:100%;gap:6px}
.access-map__controls button:last-child{margin-left:auto}
.access-map__controls button{padding:8px 11px}
.access-map__help{padding:9px 13px}
.access-map__selection{padding:13px;gap:6px 13px;min-height:90px}
.access-map__selection p{width:100%;font-size:13px}
.access-map__selection a{margin-left:0}
}
/* 右の目次が横に並ぶ 900〜1099px は接続図の幅が足りないので、スマホと同じ2段（出発地と到着地、その下に線）にする */
@media(min-width:900px) and (max-width:1099px){
.access-map__connections .route__row{grid-template-columns:minmax(0,1fr) minmax(0,auto);column-gap:18px;row-gap:9px}
.access-map__connections .route__from{grid-column:1;grid-row:1;margin-top:0}
.access-map__connections .route__to{grid-column:2;grid-row:1;margin-top:0;text-align:right}
.access-map__connections .route__line{grid-column:1/-1;grid-row:2}
}