/*
routes.css
「航路案内」共通スタイル。
・routes.html …………… 地区選択画面（暫定＝テキスト/カード版。9/1以降に地図イラスト版へ差し替え予定）
・routes-honto/miyako/yaeyama.html … 各地区ページ（航路図 ＋ 離島／遊覧の一覧）
ヘッダー・フッター・文字サイズ切替・配色変数は css/common.css を参照。
配色は common.css の :root（玉色・紺・黄緑・朱・ページ地）のみを使用し、
生 hex / rgba は直書きしない（塗り分けは #F9F8F3 地に color-mix で変数を混ぜて生成。members.css と同方針）。
*/
/* 航路種別の識別色（members.css の割り当てと統一） */
:root{
--route-ferry:var(--navy); /* 離島航路 */
--route-yuran:var(--vermilion); /* 遊覧航路 */
/* 実用的な注意書き（.disc-inline / .linknote）用の中間トーン。
パンくず・地図出典の --text-mute(#66716E) より濃く、本文 --text(#242B2A) よりは控えめ。
common.css は変更せず、既存2変数の color-mix で生成（members.css と同方針）。 */
--route-note:color-mix(in srgb, var(--text-mute) 50%, var(--text));
}
/* ===== 地区ページ：見出し・戻り導線 =====
余白調整（2026-08-29）：パンくず↔見出しは広げ、見出し↔凡例(①離島航路)は詰める */
.crumb + .titlerow{margin-top:16px;}
.titlerow{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;}
.titlerow h1{margin-bottom:4px;}
/* 「運賃・運航時刻…」の注意書き。行動に関わる注記なので中間トーンで少し濃く */
.disc-inline{font-size:.78em;color:var(--route-note);line-height:1.7;}
/* ===== 凡例 ===== */
.legend{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;padding:6px 0 8px;font-size:.84em;color:var(--text);}
.legend .dot{
width:21px;height:21px;border-radius:var(--r-pill);flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
color:#fff;font-size:.66em;font-weight:700;margin-right:6px;
}
.legend .dot.ferry{background:var(--route-ferry);}
.legend .dot.yuran{background:var(--route-yuran);}
/* 地図データの出典（凡例行の末尾＝地図の直前に配置）。出典表記なので控えめのまま */
.legend .mapcredit{margin-left:auto;font-size:.86em;color:var(--text-mute);}
.legend .mapcredit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.legend .mapcredit a:hover{color:var(--link);}
/* ===== 航路図 ===== */
/* 地図・一覧は概要／会員一覧ページと同じ「#F9F8F3 パネル＋細枠」に載せ、
ページ地(#E7EFEE)と航路図のうす青が直接隣り合わないようにする */
.routemap{
border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
background:#F9F8F3;padding:10px;margin-bottom:8px;
}
.routemap img{width:100%;height:auto;display:block;border-radius:calc(var(--r-md) - 5px);}
/* 地図の直下＝一覧の直前：事業者名リンクの操作注記。すぐ下の一覧の話なのでここに置く。
行動に関わる注記なので中間トーンで少し濃く */
.linknote{font-size:.8em;color:var(--route-note);line-height:1.6;margin:10px 0 7px;}
/* ===== 航路一覧 ===== */
.routes{
display:grid;grid-template-columns:1fr 1fr;gap:4px 30px;
background:#F9F8F3;border:1px solid var(--line);border-radius:var(--r-md);
padding:16px 22px 18px;
}
.routecol .chead{
display:flex;align-items:center;gap:9px;margin-bottom:2px;
padding-bottom:9px;border-bottom:2px solid var(--navy);
}
.routecol .chead .bar{width:4px;height:16px;border-radius:var(--r-sm);flex-shrink:0;}
.routecol .chead .bar.ferry{background:var(--route-ferry);}
.routecol .chead .bar.yuran{background:var(--route-yuran);}
.routecol .chead .lbl{font-size:.95em;font-weight:700;color:var(--navy);}
.ritem{
display:flex;gap:11px;padding:11px 2px;
border-bottom:1px solid var(--line);font-size:.9em;
}
.routecol .ritem:last-child{border-bottom:none;}
.rnum{
width:22px;height:22px;border-radius:var(--r-pill);flex-shrink:0;margin-top:2px;
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:.72em;font-weight:700;
}
.rnum.ferry{background:var(--route-ferry);}
.rnum.yuran{background:var(--route-yuran);}
.rcname{font-weight:700;color:var(--navy);line-height:1.5;}
.rcname a{color:var(--link);text-decoration:underline;text-underline-offset:3px;}
.ritem.yuran .rcname,
.ritem.yuran .rcname a{color:var(--vermilion);}
/* 航路（発着）テキストは会員一覧カードの .route と同じ var(--text) に揃える */
.rdesc{color:var(--text);font-size:.9em;margin-top:2px;line-height:1.6;}
/* ===== 航路案内CTAパネル =====
トップページ（css/top.css の .routes / .route-buttons）の濃い紺パネルをそのまま流用。
地区選択画面(routes.html)の本体、および各地区ページ下部の「ほかの地区へ」導線として
全4ページで使う。#F0F1FB は top.css の .note と同値（紺地の上の白系テキスト）。 */
/* 地区選択画面(routes.html)はコンテンツが少ないページ。以前は .body--select に
min-height の決め打ち値を入れて高さを確保していたが、common.css のスティッキーフッター
（.page を min-height:100dvh のフレックス、.body を flex:1 0 auto）でフッターが
画面下端に来るようになったため不要になり削除（2026-08-31）。 */
/* 見出し「航路案内」を少し下げてパネルに寄せる（2026-08-29） */
.body--select h1{margin:26px 0 0;}
/* 濃い紺パネル。現在は各地区ページ下部の「ほかの地区へ」導線のみで使用
（routes.html 本体の地区選択は下記 .district-pick に置き換え済み） */
.route-cta{
background:var(--navy);border-radius:var(--r-md);
padding:20px 20px 21px;margin:36px 0 6px;position:relative;overflow:hidden;
}
.route-cta:first-child{margin-top:0;}
.route-cta .routes-deco-wave{position:absolute;left:0;right:0;bottom:6px;width:100%;height:20px;opacity:.2;pointer-events:none;}
.route-cta .routes-head,
.route-cta .route-buttons{position:relative;z-index:1;}
.route-cta .routes-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;flex-wrap:wrap;}
.route-cta h2{margin:0;font-size:.95em;letter-spacing:.04em;color:#fff;display:flex;align-items:center;gap:8px;}
.route-cta h2::before{content:"";width:5px;height:14px;background:var(--accent);border-radius:2px;display:inline-block;}
.route-cta .note{margin:0;font-size:.78em;letter-spacing:.02em;color:#F0F1FB;opacity:.9;}
.route-cta .route-buttons{display:flex;gap:12px;flex-wrap:wrap;}
.route-cta .route-buttons a{
flex:1;min-width:150px;
background:#F9F8F3;border:1.5px solid var(--accent);color:var(--text);
padding:16px 14px;border-radius:var(--r-md);
font-size:.9em;font-weight:700;letter-spacing:.1em;text-decoration:none;
display:flex;justify-content:space-between;align-items:center;transition:background .15s ease;
}
.route-cta .route-buttons a:hover{background:var(--accent);}
/* ===== routes.html：地区選択（PC＝1枚の地理地図／スマホ＝3タイル） =====
・島の形は 内の を1組だけ定義し、PC地図とスマホタイルの双方から