/* アクセスページ（指示書12）。色はトークンだけ、文字と余白は白銀比の刻み（13・15・18・21・25・36・51・72・102px）。共通の CSS は変えない */
.access{color:var(--semantic-color-text-primary)}
.access .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.access :is(section,[id]){scroll-margin-top:96px}
.access h2,.access h3,.access h4,.access h5{line-height:1.5}
.access .page-intro.access-intro p{font-size:18px;line-height:1.707;max-width:40em;margin:25px 0 0}

/* 来る方法：所要時間を大きく */
/* 目次は共通部品 .side-toc（parts.css）。来かたの要約の帯とタグ型の目次はやめた。所要時間は下の路線図で分かる（11/10 Takeru） */

/* 章の頭（地図の章も同じ間隔） */
.access .access-map{margin-top:102px;margin-bottom:0}
.access .access-map__heading{border-top:1px solid var(--semantic-color-text-primary);padding-top:25px}
.access-ways,.access-block{margin-top:102px}
.access-way h2,.access-block>h2{font-size:36px;margin:0 0 25px;padding-top:25px;border-top:1px solid var(--semantic-color-text-primary)}
.access-block__lead{font-size:18px;line-height:1.707;max-width:40em;margin:0 0 36px}
.access-note{font-size:15px;line-height:1.707;color:var(--semantic-color-text-muted);margin:25px 0 0}
.access p{overflow-wrap:anywhere}

/* 電車・車・空港から */
.access-way--train{display:grid;grid-template-columns:minmax(0,1.414fr) minmax(0,1fr);column-gap:51px}
.access-way--train>h2{grid-column:1/-1}
.access-way__main p{font-size:15px;line-height:1.707;margin:18px 0 0}
.access-way__main .btn--link{font-size:15px}
.access-way__aside{background:var(--semantic-color-surface-muted);border-radius:4px;padding:25px;align-self:start}
.access-way__aside h3{font-size:18px;margin:0 0 9px}
.access-way__aside p{font-size:15px;line-height:1.707;margin:0}
.access-ways__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:51px;margin-top:72px}
.access-way>p{font-size:18px;line-height:1.707;margin:0 0 18px}
.access-route{width:100%;border-collapse:collapse;font-size:18px;line-height:1.5}
.access-route thead th{font-size:13px;font-weight:400;color:var(--semantic-color-text-muted);text-align:left;padding:0 0 9px}
.access-route thead th:last-child,.access-route td{text-align:right}
.access-route tbody th{font-weight:400;text-align:left;padding:15px 18px 15px 0;border-top:1px solid var(--semantic-color-border-default)}
.access-route td{font-weight:700;white-space:nowrap;padding:15px 0;border-top:1px solid var(--semantic-color-border-default);vertical-align:top}
.access-route tbody tr:last-child>*{border-bottom:1px solid var(--semantic-color-border-default)}

/* 現地での移動：手段ごとのカード */
.access-modes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:51px 36px}
.access-mode{border-top:1px solid var(--semantic-color-text-primary);padding-top:18px;display:flex;flex-direction:column}
.access-mode h3{font-size:21px;margin:0 0 4px}
.access-mode__best{font-size:15px;line-height:1.707;font-weight:700;margin:0 0 15px}
.access-facts{margin:0;display:grid;gap:11px}
.access-facts div{display:grid;gap:2px;align-content:start}
.access-facts dt{font-size:13px;color:var(--semantic-color-text-muted)}
.access-facts dd{margin:0;font-size:15px;line-height:1.707}
.access details summary{display:flex;align-items:center;gap:9px;min-height:44px;font-size:15px;cursor:pointer;list-style:none;color:var(--semantic-color-text-primary)}
.access details summary::-webkit-details-marker{display:none}
.access details summary:before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.access details[open]>summary:before{transform:rotate(45deg)}
.access details summary:hover{text-decoration:underline;text-underline-offset:4px}
.access details summary:focus-visible{outline:3px solid var(--semantic-color-focus-default);outline-offset:2px}
.access-mode details{margin-top:auto;padding-top:9px}
.access-mode details .access-facts{padding:4px 0 9px}

/* レンタカー・タクシー：会社ごと */
.access-companies,.access-taxis,.access-sos{list-style:none;margin:0;padding:0}
.access-company{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.414fr);gap:36px;padding:25px 0;border-top:1px solid var(--semantic-color-border-default)}
.access-company:last-child{border-bottom:1px solid var(--semantic-color-border-default)}
.access-company__name h3{font-size:21px;margin:0 0 4px}
.access-company__body>.access-facts,.access-company__more>.access-facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px}
.access-company__more>.access-facts{margin-top:18px;padding-top:18px;border-top:1px dashed var(--semantic-color-border-default)}
.access-company__more{margin-top:9px}
.access-tel{display:inline-flex;align-items:center;min-height:44px;font-size:21px;font-weight:700;letter-spacing:.02em;color:var(--semantic-color-text-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;font-variant-numeric:tabular-nums}
.access-tel:hover{text-decoration-thickness:2px}
.access-tel:focus-visible{outline:3px solid var(--semantic-color-focus-default);outline-offset:2px}
.access-taxis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;margin-bottom:36px}
.access-taxi{border-top:1px solid var(--semantic-color-border-default);padding:18px 0}
.access-taxi h3{font-size:18px;margin:0}
.access-facts--inline{margin-top:4px;gap:4px}
.access-facts--inline div{grid-template-columns:auto 1fr;gap:9px;align-items:baseline}
.access-facts--wide{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:51px;background:var(--semantic-color-surface-muted);padding:25px;border-radius:4px}

/* 注意のまとまり */
.access-cautions{margin-top:102px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:51px;background:var(--semantic-color-surface-muted);border-radius:4px;padding:51px}
.access-cautions section:first-child{grid-column:1/-1}
.access-cautions h2{font-size:21px}
.access-cautions .access-fold>summary{margin-bottom:11px}
.access-cautions p,.access-cautions li{font-size:15px;line-height:1.707}
.access-cautions p{margin:0 0 11px}
.access-cautions ul{margin:0;padding-left:1.2em}
.access-licence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin:0 0 15px}
.access-licence>div{background:#fff;border-radius:4px;padding:18px 25px}
.access-licence h4{font-size:18px;margin:0 0 4px}
.access-licence p{margin:0}

/* 緊急時・医療 */
.access-sos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 51px}
.access-sos li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:18px;padding:13px 0;border-top:1px solid var(--semantic-color-border-default)}
.access-sos__who{font-size:15px;font-weight:700}
.access-sos .access-tel{grid-column:2;grid-row:1/3;justify-self:end}
.access-sos__note{grid-column:1;font-size:13px;line-height:1.5;color:var(--semantic-color-text-muted)}
.access-sos li:nth-child(-n+2) .access-tel{font-size:25px}

.access-sources{font-size:13px;line-height:1.707;margin-top:72px}

@media(min-width:900px){.access-company__more[open]>summary{display:none}.access-company__more>.access-facts{margin-top:9px}}
@media(max-width:1099px){.access-modes{grid-template-columns:repeat(2,minmax(0,1fr))}.access-taxis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){
.access-way--train{grid-template-columns:minmax(0,1fr)}
.access-way__aside{margin-top:25px}
.access-company{grid-template-columns:minmax(0,1fr);gap:4px}
.access-company__body>.access-facts,.access-company__more>.access-facts{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
.access .page-intro.access-intro p{font-size:15px;margin-top:18px}
.access .access-map,.access-ways,.access-block,.access-cautions{margin-top:72px}
.access-way h2,.access-block>h2{font-size:25px;margin-bottom:18px;padding-top:18px}
.access .access-map__heading{padding-top:18px}
.access-block__lead,.access-way>p{font-size:15px;margin-bottom:25px}
.access-route{font-size:15px}
.access-route tbody th{padding:11px 13px 11px 0}
.access-route td{padding:11px 0;white-space:normal;min-width:6em}
.access-ways__pair{grid-template-columns:minmax(0,1fr);gap:72px;margin-top:72px}
.access-modes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px;width:100vw;box-sizing:border-box;margin-left:calc(50% - 50vw);padding:0 16px 13px;scroll-padding:0 16px}
.access-mode{flex:0 0 78%;scroll-snap-align:start}
.access-mode h3{font-size:18px}
.access-company{padding:18px 0}
.access-company__name h3{font-size:18px}
.access-company__name{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:13px}
.access-taxis{grid-template-columns:minmax(0,1fr);margin-bottom:25px}
.access-taxi{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:13px;padding:9px 0}
.access-taxi .access-facts{grid-column:1/-1;margin-top:0}
.access-taxi .access-facts dd,.access-taxi .access-facts dt{font-size:13px}
.access-facts--wide{grid-template-columns:minmax(0,1fr);padding:18px}
.access-cautions{grid-template-columns:minmax(0,1fr);gap:0;padding:18px 16px;width:100vw;box-sizing:border-box;margin-left:calc(50% - 50vw);border-radius:0}
.access-licence{grid-template-columns:minmax(0,1fr);gap:13px}
.access-licence>div{padding:15px 18px}
.access-sos{grid-template-columns:minmax(0,1fr)}
.access-sos li{padding:9px 0}
.access-sources{margin-top:51px}
.access-facts{grid-template-columns:auto minmax(0,1fr);gap:6px 13px}
.access-facts div{display:contents}
.access-company__body>.access-facts,.access-company__more>.access-facts{grid-template-columns:auto minmax(0,1fr)}
.access-facts dt{padding-top:2px}
.access-mode .access-facts,.access-taxi .access-facts{grid-template-columns:minmax(0,1fr);gap:2px}
.access-mode .access-facts div,.access-taxi .access-facts div{display:grid}
.access-facts--wide{grid-template-columns:minmax(0,1fr);gap:2px}
.access-facts--wide div{display:grid;gap:2px}
.access-facts--wide div+div{margin-top:11px}
}
/* 畳める章（狭い画面では見出しだけ。広い画面は access.js が開き、開閉の印を出さない） */
.access-fold>summary{min-height:44px}
.access-fold>summary :is(h2,h3){margin:0}
@media(min-width:900px){.access-fold[open]>summary{pointer-events:none}.access-fold[open]>summary:before{display:none}}
@media(max-width:899px){.access-cautions{gap:0}.access-cautions section+section{border-top:1px solid var(--semantic-color-border-default)}.access-cautions .access-fold>summary{min-height:56px;margin:0}.access-cautions .access-fold[open]{padding-bottom:18px}.access-fold[open]>summary{margin-bottom:11px}}
/* 来かたの所要時間：表をやめ、TOPと同じ路線図の部品（route.css）で見せる（11/10 Takeru） */
.access .route{--route-name:18px;--route-small:13px;--route-gap:25px}
.access .access-way>p+.route{margin-top:25px}
@media (max-width:767px){.access .route{--route-name:15px;--route-gap:13px;--route-min:84px;--route-to:fit-content(7.5em)}}
/* 車と空港の2列は1099pxまでは縦に積む（路線図の線の長さを保つ）。英語は到着地の名前が長いので折り返す */
@media (max-width:1099px){.access-ways__pair{grid-template-columns:minmax(0,1fr);gap:72px}}
html[lang="en"] .access .route{--route-to:fit-content(11em)}
@media (max-width:767px){html[lang="en"] .access .route{--route-to:fit-content(7.5em)}}