/* ===========================================================
関東・甲信越の林道マップ スタイル
-----------------------------------------------------------
★ このファイルは公開されます。コメントも含めてです ★
2026-08-05 まで、ここには別プロジェクトの名前が書かれた
コメントが残っていました。公開前の grep はその語を見ておらず、
素通りしていました。**流用したファイルは、コメントと
使っていないルールを必ず消してから使うこと。**
=========================================================== */
/* ---------- 配色（ライトが既定） ----------
★ 色は必ずこの変数を通すこと ★ 直書きするとダークモードに追従しません。
★ ダークは JS が を付けたときだけ ★
「システム設定に合わせる」もJSが解決して light / dark のどちらかを
入れます（メディアクエリでの二重定義を避けるため）。JSが動かない
環境では今までどおりライトのままです。
★ 姉妹サイト5つで同じ方式です ★ 直すときは5つとも直してください。 */
:root {
color-scheme: light;
--bg: #f4f6f9;
--ink: #1a1f28;
--ink2: #2b3240; /* 本文の濃い字 */
--head: #3a4252; /* 見出し・強めの字 */
--head2: #4a545f; /* 注記カードの本文 */
--sub: #5a6472;
--sub2: #6c757d;
--sub2b: #6b7480;
--sub2c: #5b636d;
--sub3: #7a838f;
--sub4: #8a929c;
--sub4b: #8b949e;
--card: #fff;
--card2: #f7f9fb; /* 薄い地・ホバーの地 */
--card3: #fbfcfd; /* 表の見出しの地 */
--card4: #fafbfc; /* 注記カード・チップの地 */
--line: #e3e7ed;
--line2: #e3e7ee;
--line3: #eef1f5; /* 行の区切り・薄いホバー地 */
--line4: #e0e4e9; /* チップの枠 */
--line-strong: #d5dae1;
--ctl-line: #cfd6de; /* 入力欄・ボタンの枠 */
--ctl-line2: #e2e7ec; /* 共有ボタンの枠 */
--ctl-line-hover: #9aa3ad;
--sep: #b9c4d1;
--closure-line: #c9ced4;
--closure-open: #7d8894;
--soil: #8a5a2b;
--link: #0b5ed7;
--focus: #0d6efd; /* フォーカスの輪郭 */
--stat-blue: #0d6efd; /* サマリーの青帯 */
--stat-green: #12805c; /* サマリーの緑帯 */
--lead-accent: #6f42c1; /* 解説カードの帯 */
--route: #d9480f; /* 特集ルートの帯 */
--shadow: rgba(0,0,0,0.08);
--sort-on-bg: #1a1f28; /* 選択中の並び替えボタン */
--sort-on-ink: #fff;
--danger: #b42318;
--danger-bg: #fdecea;
--danger-strong: #d92d20; /* 警告ブロックの枠 */
--danger-soft-bg: #fff8f6; /* 警告ブロックの地 */
--danger-bd: #f0b4ae;
--danger2: #a63a0f;
--danger2-bg: #fdece7;
--danger2-bd: #f5c6b4;
--cl-closed: #a3252b;
--cl-closed-bg: #fdf0f0;
--warn: #d9a406;
--warn-ink: #7a5c02;
--warn-bg: #fffaed;
--warn-bd: #f0dca8;
--warn2: #8a6d00; /* 営業状況「注意」の字 */
--warn2-bg: #fff8e1;
--warn3: #9a5b12; /* 規制「一部」の字 */
--warn3-bg: #fdf6ec;
--ok: #0f6b4e;
--ok-bg: #e6f5ef;
--ok2: #1a6b45; /* 「接続」の字 */
--ok2-bg: #e7f5ee;
--ok2-bd: #bde3cd;
--ok3: #2f7a43; /* 共有「コピーしました」 */
--ok3-bg: #f2f9f4;
--mute: #555f6b; /* 規制「規制あり」の字 */
--mute-bg: #f2f4f6;
--mute2: #4a5568; /* 隙間「一般道」の字 */
--mute2-bg: #f2f4f7;
--mute2-bd: #dde2e9;
--unknown-bg: #eceff3; /* 営業状況「不明」の地 */
--nodo: #1864ab; /* 農道の印の字 */
--nodo-bg: #eaf2fb;
--sh-line-bd: #06c755; /* 共有ボタン各社。縁と字だけ色を借りる */
--sh-line-ink: #06862f;
--sh-fb-bd: #1877f2;
--sh-fb-ink: #1461c8;
--sh-hb-bd: #00a4de;
--sh-hb-ink: #0083b3;
--sh-x: #1a1f28;
/* ---- 地図の線の色。★ ダークでも変えません ★ ----
地図タイルはダークでも明るいままです（暗色化しない）。凡例は
「地図上の見え方をそのまま再現する」ためのものなので、ここが
テーマで変わると凡例と実物がずれます。 */
--map-closed: #d92d20;
--map-caution: #e07000;
--map-known: #0f7b52;
--map-plain: #4a5568;
--map-this: #d9480f;
--map-other: #1a1f28;
--map-dot-bg: #fff;
--map-dot-line: #1a1f28;
}
/* ダーク。★ 地はOGカード（og-card.png）と同じ紺 #1a2a4a ★
土色もカードと同じ明るめ #c68c4a（#8a5a2b は紺に沈むため）。
薄い色地は「濃い版の色の14%透過」で作っています。 */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #1a2a4a;
--ink: #f4f6f9;
--ink2: #dce4f0;
--head: #dce4f0;
--head2: #a7b4ca;
--sub: #a7b4ca;
--sub2: #a7b4ca;
--sub2b: #a7b4ca;
--sub2c: #a7b4ca;
--sub3: #8c9bb5;
--sub4: #8c9bb5;
--sub4b: #8c9bb5;
--card: #213254;
--card2: #1f2f51;
--card3: #1f2f51;
--card4: #1f2f51;
--line: #324569;
--line2: #324569;
--line3: #2e4166;
--line4: #324569;
--line-strong: #3c5077;
--ctl-line: #3c5077;
--ctl-line2: #3c5077;
--ctl-line-hover: #8c9bb5;
--sep: #46587e;
--closure-line: #46587e;
--closure-open: #8c9bb5;
--soil: #c68c4a;
--link: #8ab8ec;
--focus: #8ab8ec;
--stat-blue: #8ab8ec;
--stat-green: #3fae85;
--lead-accent: #a98ae0;
--route: #e8794a;
--shadow: rgba(0,0,0,0.3);
--sort-on-bg: #dce4f0;
--sort-on-ink: #1a2a4a;
--danger: #f08a80;
--danger-bg: rgba(240,138,128,0.14);
--danger-strong: #f08a80;
--danger-soft-bg: rgba(240,138,128,0.14);
--danger-bd: rgba(240,138,128,0.45);
--danger2: #f0967a;
--danger2-bg: rgba(240,138,128,0.14);
--danger2-bd: rgba(240,138,128,0.45);
--cl-closed: #f08a80;
--cl-closed-bg: rgba(240,138,128,0.14);
--warn: #e6c35c;
--warn-ink: #e6c35c;
--warn-bg: rgba(230,195,92,0.14);
--warn-bd: rgba(230,195,92,0.45);
--warn2: #e6c35c;
--warn2-bg: rgba(230,195,92,0.14);
--warn3: #e6c35c;
--warn3-bg: rgba(230,195,92,0.14);
--ok: #6fcf9f;
--ok-bg: rgba(111,207,159,0.14);
--ok2: #6fcf9f;
--ok2-bg: rgba(111,207,159,0.14);
--ok2-bd: rgba(111,207,159,0.45);
--ok3: #6fcf9f;
--ok3-bg: rgba(111,207,159,0.14);
--mute: #a7b4ca;
--mute-bg: rgba(167,180,202,0.14);
--mute2: #a7b4ca;
--mute2-bg: rgba(167,180,202,0.14);
--mute2-bd: rgba(167,180,202,0.45);
--unknown-bg: rgba(167,180,202,0.14);
--nodo: #8ab8ec;
--nodo-bg: rgba(138,184,236,0.14);
--sh-line-ink: #4ed88a;
--sh-fb-ink: #6ea8f5;
--sh-hb-ink: #4cc4ec;
--sh-x: #f4f6f9;
/* 地図の線の色（--map-…）はここで上書きしません。上のコメント参照 */
}
* { box-sizing: border-box; }
body {
margin: 0;
padding: 24px;
background: var(--bg);
font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
color: var(--ink);
line-height: 1.6;
}
.wrap { max-width: 980px; margin: 0 auto; }
/* ---------- ヘッダー ---------- */
header.page-header {
background: var(--card);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 20px;
box-shadow: 0 1px 3px var(--shadow);
}
header.page-header h1 { margin: 0 0 6px 0; font-size: 24px; }
header.page-header .date-line { color: var(--sub); font-size: 14px; }
/* 本数の内訳。★ 合計より小さく ★ 走り手が知りたいのは合計が先です */
header.page-header .date-line.sub { font-size: 13px; color: var(--sub3); margin-top: 2px; }
/* ---------- 紋章 ----------
★ ライトに濃い面を足さないこと ★
カード画像（og-card.png）は紺の地ですが、ライトのページに置くのは
**線だけ**の emblem.svg です。ライトの配色は明るいまま、濃い面は
1ドットも増えません。長く読む画面に濃い面があると、目に残像が残ります。
このサイトは林道名を探して何十行もスクロールする場所なので、特に効きます。
（ダークモードは別です。2026-08-20 に山村さんの指定で追加しました。
ダークの地はOGカードと同じ紺で、紋章もカードと同じ配色の
emblem-dark.svg に切り替わります。下の .emblem-light / .emblem-dark。）
★ 幅ではなく高さで揃えること ★
紋章は正方形とは限りません（コース現況だけ横長です）。
幅を固定すると、そこだけ潰れて別の絵になります。
★ page-header 全体に flex を掛けないこと ★
林道ページ・県ページのヘッダーまで横並びになり、見出しと
「全長・標高」の行が1行に潰れます。with-emblem を付けた側だけです。
★ 姉妹サイト5つで同じ指定です ★ 直すときは5つとも直してください。 */
header.page-header.with-emblem { display: flex; align-items: center; gap: 16px; }
header.page-header.with-emblem .ph-body { min-width: 0; flex: 1; }
header.page-header .emblem { flex: none; height: 64px; width: auto; display: block; }
@media (max-width: 640px) {
/* ★ 紋章を消さずに小さくすること ★ display:none にすると、
スマホで来た人だけブランドの印を見ないまま帰ります */
header.page-header.with-emblem { gap: 12px; }
header.page-header .emblem { height: 46px; }
}
/* ライト用とダーク用の紋章を両方置いて、表示だけ切り替える。
★ ![]()
の src はCSSから差し替えられないため、2枚置く方式です ★ */
/* ★ 隠す側も :root 付きで書くこと（2026-08-20 の不具合修正）★
header.page-header .emblem { display: block } のほうが詳細度で強いので、
裸の .emblem-dark { display: none } では負けて、ライトで2枚とも表示されます。 */
:root[data-theme="dark"] .emblem-light,
:root:not([data-theme="dark"]) .emblem-dark { display: none; }
/* ---------- カード ---------- */
.card {
background: var(--card);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 18px;
box-shadow: 0 1px 3px var(--shadow);
}
.card h2 { margin: 0 0 12px; font-size: 16px; }
.card h3 { font-size: 14px; margin: 20px 0 8px; }
.card p { margin: 0 0 10px; font-size: 14px; color: var(--ink2); }
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 0 0 10px; padding-left: 20px; font-size: 14px; color: var(--ink2); }
.card li { margin-bottom: 4px; }
/* 解説ページの導入部（ボタンは置かない。導線はヘッダーのpagenavに1本だけ） */
.card.lead { border-left: 4px solid var(--lead-accent); }
.card.lead strong { color: var(--ink); }
/* ヘッダー内の控えめな導線 */
.pagenav { margin-top: 10px; font-size: 13px; color: var(--sub); }
.pagenav a { color: var(--sub); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.pagenav a:hover { color: var(--ink); border-bottom-color: var(--sub4); }
/* 凡例の下などに添える一行注記 */
.footnote { font-size: 12.5px; color: var(--sub); margin: 12px 0 0; }
.footnote a { color: var(--sub); }
/* ---------- 凡例 ---------- */
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--head); }
.legend .item { display: flex; align-items: center; gap: 8px; }
.hint { font-size: 12.5px; color: var(--sub2); margin: 12px 0 0; }
.tag {
display: inline-block; font-size: 11px; font-weight: 700;
padding: 1px 7px; border-radius: 10px; margin-right: 6px;
vertical-align: 1px;
}
.tag.open { background: var(--ok-bg); color: var(--ok); }
/* ---------- 比較表（series.html） ---------- */
.cmp { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-bottom: 10px; }
.cmp th, .cmp td {
border: 1px solid var(--line); padding: 9px 12px;
text-align: left; vertical-align: top;
}
.cmp thead th { background: var(--card2); font-size: 13px; }
.cmp tbody th { background: var(--card3); font-weight: 700; width: 130px; color: var(--head); }
.table-scroll { overflow-x: auto; }
/* ---------- 出典・フッター ---------- */
.sources { font-size: 13px; }
.sources ul { margin: 8px 0 0; padding-left: 18px; }
.sources li { margin-bottom: 4px; }
.sources a { color: var(--link); }
footer.page-footer {
font-size: 12.5px; color: var(--sub2); text-align: center;
padding: 18px 0 8px;
border-top: 1px solid var(--line);
margin-top: 4px;
}
footer.page-footer .site-name {
font-weight: 700; color: var(--head); font-size: 14px;
margin-bottom: 2px;
}
footer.page-footer .foot-links { margin: 10px 0 6px; }
footer.page-footer .foot-links a { color: var(--sub); text-decoration: none; }
footer.page-footer .foot-links a:hover { color: var(--ink); text-decoration: underline; }
footer.page-footer .foot-links .sep { margin: 0 8px; color: var(--sep); }
footer.page-footer .updated { font-size: 11.5px; color: var(--sub4); }
/* ---------- テーマ切替（ライト / 自動 / ダーク） ----------
フッターに置く小さな3ボタン。★ JSが動いた時だけ見えます ★
（html に data-theme を付けるのはJSなので、無い＝JSが動いていない＝
押しても効かないボタンを見せない、という理屈です。）
★ 姉妹サイト5つで同じ指定です ★ 直すときは5つとも直してください。 */
.theme-switch { display: none; margin-top: 10px; }
html[data-theme] .theme-switch { display: block; }
.theme-switch button {
font: inherit;
font-size: 12px;
color: var(--sub);
background: none;
border: 1px solid var(--sep);
padding: 2px 12px;
margin: 0;
cursor: pointer;
}
.theme-switch button + button { border-left: none; }
.theme-switch button:first-of-type { border-radius: 999px 0 0 999px; padding-left: 14px; }
.theme-switch button:last-of-type { border-radius: 0 999px 999px 0; padding-right: 14px; }
.theme-switch button[aria-pressed="true"] {
color: var(--ink);
background: var(--card);
font-weight: 700;
}
.theme-switch button:focus-visible { outline: 2px solid var(--soil); outline-offset: 1px; }
/* ---------- 詳細ページ（race.html） ---------- */
.crumb { font-size: 13px; margin-bottom: 14px; color: var(--sep); }
.crumb a { color: var(--sub); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb .sep { margin: 0 8px; }
.cmp.info tbody th { width: 110px; }
/* 楽天ウェブサービスのクレジット表示（フッター）。
★ 消したり隠したりしないこと ★ API利用の必須要件です。
「ユーザーが、このサイトが楽天ウェブサービスに支えられていると
理解できなくなるような出し方をしないこと」とされているので、
小さくはしますが display:none や視認できない色にはしません。 */
.rws-credit { margin-top: .6em; font-size: 12px; }
.rws-credit a { color: var(--mute); }
/* 近隣の宿泊・入浴施設の表（詳細ページ）。
★ 名前の列を広く取ること ★ 公式サイトのリンクが名前の下に入るので、
等分にすると名前が2〜3行に折り返して、行数ぶん縦に伸びます。
★ 距離は右寄せ ★ 296m / 1.1km / 2.8km が並ぶので、桁を揃えます。 */
.near-places td:first-child { width: 40%; }
.near-places td:nth-child(3) { text-align: right; white-space: nowrap; }
.near-places td:last-child { white-space: nowrap; }
.near-places .nb { margin-left: .4em; }
@media (max-width: 480px) {
.near-places td:first-child { width: auto; }
}
.unknown { color: var(--sub4); }
/* ---------- 営業状況 ---------- */
.tag.st-open { background: var(--ok-bg); color: var(--ok); }
.tag.st-caution { background: var(--warn2-bg); color: var(--warn2); }
.tag.st-closed { background: var(--danger-bg); color: var(--danger); }
.tag.st-unknown { background: var(--unknown-bg); color: var(--sub2); }
/* ---------- 土地の許可についての警告 ---------- */
/* 林道・河川敷にだけ出る。目立たなければ意味がないので、
カードの中に埋めずに独立したブロックにしている */
.land-warning {
background: var(--danger-soft-bg);
border: 2px solid var(--danger-strong);
border-radius: 12px;
padding: 16px 20px;
margin-bottom: 18px;
}
.land-warning .lw-title {
font-weight: 700; font-size: 15px; color: var(--danger);
margin-bottom: 8px;
}
.land-warning ul { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink2); }
.land-warning li { margin-bottom: 6px; }
.land-warning li:last-child { margin-bottom: 0; }
/* 詳細ページでは、この警告を「走れるかどうかは書いてありません」の
カード（.notes）の中に統合している（2026-08-20）。
赤枠は付けず、見出しの赤だけ残す。地域ページとトップは上の独立ブロックのまま */
.notes .lw-title {
font-weight: 700; font-size: 15px; color: var(--danger);
margin: 16px 0 8px;
}
.notes .lw-list { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink2); }
.notes .lw-list li { margin-bottom: 6px; }
.notes .lw-list li:last-child { margin-bottom: 0; }
.tag.land { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-bd); }
/* ---------- 林道マップ ---------- */
#map {
height: 520px;
border-radius: 8px;
border: 1px solid var(--line);
/* Leaflet のポップアップがカードからはみ出さないように */
z-index: 0;
}
.map-tools {
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
}
.map-tools input[type="search"] {
flex: 1 1 auto; min-width: 0;
font: inherit; font-size: 14px;
padding: 9px 12px;
border: 1px solid var(--ctl-line); border-radius: 8px;
background: var(--card); color: var(--ink);
}
.map-tools input[type="search"]:focus {
outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.map-count { flex: none; font-size: 13px; font-weight: 700; color: var(--sub); }
.map-legend {
display: flex; flex-wrap: wrap; gap: 8px 20px;
margin-top: 14px; font-size: 12.5px; color: var(--head);
}
.map-legend .item { display: flex; align-items: center; gap: 8px; }
/* 凡例の線は、地図上の見え方（色・太さ・線種）をそのまま再現する。
凡例と実物が違うと、かえって迷わせるため。
★ 色は --map-… の変数です。ダークでも変わりません ★
地図タイルはダークでも明るいまま＝実物の線の色も変わらないからです。 */
.map-legend .ln {
display: inline-block; width: 30px; flex: none;
/* 高さは太さに合わせて個別指定。中央に揃えるため box は固定 */
height: 6px; background-clip: content-box;
}
.ln-closed {
background: var(--map-closed); /* 太い実線 */
border-radius: 3px;
}
.ln-caution { /* 破線 */
background: repeating-linear-gradient(90deg, var(--map-caution) 0 9px, transparent 9px 15px);
height: 5px;
}
.ln-known { /* 実線 */
background: var(--map-known);
height: 5px; border-radius: 2.5px;
}
.ln-plain { /* 実線。細くしすぎない */
background: var(--map-plain);
height: 3px; border-radius: 1.5px;
}
/* ---------- スマホ ---------- */
@media (max-width: 560px) {
body { padding: 14px; }
.cmp tbody th, .cmp.info tbody th { width: auto; }
}
/* ===========================================================
房総の林道マップ で足したもの
=========================================================== */
/* 詳細ページの地図。一覧より小さめ */
.map-small { height: 380px; }
/* 詳細ページの凡例。当該の道は種別の色（背景色は build.mjs が直に指定）、
周辺は黒。★ ここに緑を足さないこと ★ 緑の線は「通行できます」と読まれます */
.ln-this { background: var(--map-this); height: 5px; border-radius: 2.5px; }
/* 県の地図の凡例。林道＝灰、農道＝青。色は kind.mjs が持っています */
.ln-kind { height: 4px; border-radius: 2px; }
.ln-other { background: var(--map-other); height: 3px; border-radius: 1.5px; opacity: 0.7; }
.map-legend .ln-dot {
display: inline-block; flex: none;
width: 12px; height: 12px; border-radius: 50%;
background: var(--map-dot-bg); border: 2px solid var(--map-dot-line);
}
/* 並び替えのボタン */
.sort-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin-bottom: 8px;
}
.sort-bar .sb-label {
font-size: 12.5px; font-weight: 700; color: var(--sub);
margin-right: 2px;
}
.sortbtn {
font: inherit; font-size: 13px; font-weight: 700;
padding: 6px 12px;
border: 1px solid var(--ctl-line); border-radius: 999px;
background: var(--card); color: var(--head);
cursor: pointer;
}
.sortbtn:hover { border-color: var(--sub4); background: var(--card2); }
.sortbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* 選ばれている項目。矢印だけでなく色でも分かるようにする */
.sortbtn.is-on {
background: var(--sort-on-bg); border-color: var(--sort-on-bg); color: var(--sort-on-ink);
}
.sortbtn .ar { margin-left: 5px; font-size: 12px; }
/* 林道の一覧 */
/* 行は div。中のリンクが 、その隣に☆ボタンが並ぶ。
★ の中に