/* 行先ページ（scripts/build-destinations.cjs が生成）専用のスタイル */
/* .article-body と .destination-cover はトップのダイアログ用で、幅はダイアログ側が決めている。
   単独ページでは制限が効かず画面いっぱいに広がるので、記事ページと同じ幅に揃える。 */
.travel-article .destination-cover,.travel-article .article-body{max-width:1100px;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px}
.travel-article .destination-cover{margin-bottom:38px}
.travel-article .destination-cover>img{height:380px}
.travel-article .article-body{padding-top:0;padding-bottom:70px}
@media(max-width:760px){
.travel-article .destination-cover,.travel-article .article-body{padding-left:6%;padding-right:6%}
.travel-article .destination-cover>img{height:240px}
.travel-article .article-body{padding-bottom:48px}
}
/* 関連リンクと都道府県別の一覧。
   下地を灰色にして1pxの隙間を線に見せる作りだと、説明文の行数が違う項目が並んだときに、
   背の低いカードの下へ下地が帯になって出る。カードごとに枠線を持たせ、高さを揃える。 */
.related-destinations,.prefecture-group{margin:36px 0}
.related-destinations>h2,.prefecture-group>h2{border-top:3px solid var(--ink);padding-top:12px;margin-bottom:0}
.related-destinations ul,.prefecture-group ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.related-destinations li,.prefecture-group li{display:flex;margin:0}
.related-destinations a,.prefecture-group a{display:flex;flex-direction:column;gap:7px;flex:1;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--ink);text-decoration:none;font-weight:700;color:var(--ink);line-height:1.55;transition:background .15s}
.related-destinations a span,.prefecture-group a span{display:block;font-weight:400;font-size:13px;color:var(--muted);line-height:1.75}
.related-destinations a:hover,.prefecture-group a:hover,.related-destinations a:focus-visible,.prefecture-group a:focus-visible{background:var(--lime)}
.destination-cover figcaption{overflow-wrap:anywhere}
@media(min-width:720px){.related-destinations ul,.prefecture-group ul{grid-template-columns:1fr 1fr}}