/* 特設モードの追加スタイル。
   **常設の style.css を読み込んだうえで、その上に足りない分だけを足す**（変数・カード・
   タイプスケール・ヘッダー・フッターは常設と共通のものをそのまま使う）。
   ここで色やフォントを新しく定義しない。増やすときは style.css の変数を参照すること。
   インライン style は書かない（本番の厳格CSPで壊れるため）。 */

/* サンプルデータのまま公開する事故を防ぐ帯。live-*.json の sample:true でだけ出る */
.sample-banner {
  margin: 0;
  padding: 8px 16px;
  background: #4a148c;
  color: #fff;
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: 700;
}

/* 鮮度フェイルセーフの帯（要件 FR-P4）。更新が止まったときだけ出る。
   通常は amber（注意）、72時間超で赤（あてにしない）に上げる。
   最上部に出すので、出れば必ず目に入る。読み飛ばされたら意味がない情報なので、
   カードの中ではなくここに置く。 */
.stale-banner {
  margin: 0;
  padding: 10px 16px;
  background: var(--warn-bg);
  border-bottom: 1px solid #f0c9c4;
  color: var(--ink);
  font-size: var(--fs-meta);
  line-height: 1.6;
}
.stale-banner[hidden] { display: none; }
.stale-banner .hicon { color: #b26a00; vertical-align: -2px; margin-right: 4px; }
.stale-banner--alert {
  background: var(--alert);
  border-bottom-color: var(--alert);
  color: #fff;
}
.stale-banner--alert .hicon { color: #fff; }

/* 特設内のページ切り替え。帯は画面全幅（スクロールしても上に残る面）だが、
   リンクの並びは本文カラム幅に収める。全幅に4つ広げるとタブ間が空きすぎて
   「押す場所」が散らかるため。 */
/* 災害名の見出し。モードタブの跡地（2026-08-03 廃止・1地域=1ページ）。
   ここは「別モード」ではなく災害地域の答えのページなので、名前を1行出すだけにする */
.disaster-head { background: var(--warn-bg); border-bottom: 1px solid #f0c9c4; }
.disaster-title {
  margin: 0;
  padding: 10px 0;
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--alert);
}
.disaster-title-sub { font-weight: 400; color: var(--muted); font-size: var(--fs-meta); margin-left: 6px; }

.sub-nav {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.sub-nav-inner { display: flex; }
/* 等幅(flex:1)にすると、狭い画面で長いタブ名が2行に折り返して sticky バーが 56px→85px に膨らむ。
   タブ名は「一発で中身が分かる」ことを優先したいので、幅は文字数なりにして1行を保つ。
   実測(375px): トップ60 / 支援マップ94 / 手続き70 / 公式リンク集111 = 335px にちょうど収まる。
   **タブ名を増やす・長くするときは 375px で1行に収まるか測ること** */
.sub-nav a {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  padding: 12px 4px;
  font-size: var(--fs-nav);
  text-decoration: none;
  color: var(--muted);
  border-bottom: 3px solid transparent;
}
.sub-nav a:hover { background: var(--hover); }
.v2 .sub-nav a[aria-current="page"] {
  color: var(--alert);
  font-weight: 700;
  border-bottom-color: var(--alert);
}

/* 常設の main（max-width 720px + padding 16px）と同じ幅にして、
   ヘッダー・タブ・本文の縦のラインを通す */
/* 本文は常設と同じ .layout の中に置く（main + .side-rail の2カラム）。
   幅・位置の指定は style.css の main / .side-rail をそのまま使うので、ここでは
   直上にタブがあるぶん上の余白を詰めるだけにする。 */
.v2 .disaster-main { padding-top: 12px; }

/* ============================================================
   情報の重みを4段階で出し分ける。全部が同じ見た目だと、疲れている人が
   「どれから読めばいいか」を毎回自分で判断することになるため。
     1 featured … いま知らないと困るお知らせ（赤の縦罫）
     2 primary  … きょうの行動が決まる情報＝給水（紺の縦罫・時刻を大きく）
     3 通常     … 状況の説明（断水・停電/地震）
     4 sub      … 別ページ・公式サイトへの案内（面を落として後ろに下げる）
   ============================================================ */

/* v2 のカードは「枠線なし＋やわらかい影」なので、`.v2 .card` の指定（specificity 0,2,0）に
   勝てるよう、ここも必ず .v2 を付ける。色は v2 パレット（--alert / --accent / --navy）を使う。 */

/* ============================================================
   ブロックの見え方（2026-08-04 オーナー指摘「ブロックが分かりづらい」）

   特設は影だけでカードを浮かせていたが、明るい背景の上では輪郭が出ず、
   どこからどこまでが1つの塊なのかが読めなかった。**常設は 1px の枠線で
   区切っている**ので、そちらに寄せる（常設 style.css の .card）。
   影は「前に出す」ためだけに使い、境界は線で示す。

   文字の大きさも4段階に絞る。使ってよいのは:
     --fs-h2   24px  カード見出し
     --fs-lead 20px  サブカード見出し・強調
     --fs-body 18px  本文
     --fs-meta 15px  時刻・出典・注記
   --fs-nav(16px) と --fs-micro(13px) は特設の本文では使わない
   （タブなどのナビゲーションだけ）。見出しが本文より小さくなるのを防ぐため。
   ============================================================ */
.v2 .card {
  border: 1px solid var(--border);
}
/* 実測で6段階(13/15/16/18/20/24px)使われていたので、特設のカード内だけ4段階へ寄せる。
   常設の style.css は触らない（あちらの見え方を巻き添えにしないため .v2 で囲う） */
.v2 .card .sub,          /* リンクの補足（16px → 注記サイズへ） */
.v2 .card .map-attr,     /* 地図の出典（13px → 注記サイズへ） */
.v2 .card .featured-tag { /* 「重要」タグ（13px → 注記サイズへ） */
  font-size: var(--fs-meta);
}
.v2 .card .qsection,
.v2 .card .notice {
  font-size: var(--fs-body); /* 本文なので本文サイズ（16px は小さすぎた） */
}
/* サブカードは面ごと外すので枠線も持たない（下で background:none にしている） */
.v2 .card--sub { border: none; }

/* 1. いちばん知らないと困るお知らせ。
   枠の1辺を色で強調すると縁に目が行くので、面をうっすら染めて示す */
.v2 .card--featured { background: #fdf4f3; }
.card--featured .featured-tag {
  display: inline-block;
  background: var(--alert);
  color: #fff;
  font-size: var(--fs-micro);
  border-radius: 3px;
  padding: 2px 8px;
  margin: 0 0 6px;
}

/* 2. きょうの行動が決まる情報（給水）。線ではなく、見出しの色・文字の大きさ・
      影の強さで前に出す（縁に目が行かないようにする） */
.v2 .card--primary {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 20px rgba(20, 83, 154, 0.14);
}
.v2 .card--primary h2,
.v2 .card--primary h2 .hicon { color: var(--accent); }
.v2 .card--primary .spot .nm,
.v2 .card--primary .spot .tm { font-size: var(--fs-lead); }

/* 4. 案内（別ページ・公式サイトへの入口）。情報そのものではないので
      **カードの面ごと外す**。白い面が並ぶと上の情報と同じ重さに見えるため。 */
.v2 .card--sub {
  background: none;
  box-shadow: none;
  padding: 16px 2px 0;
  margin-bottom: 4px;
}
/* 面が無いぶん、隣り合うサブカードが地続きに見えて塊が分からなくなる。
   区切り線を1本引いて「ここから別の話」を示す（最初の1枚は白カード群からの
   切り替わりなので線を引かない＝上の余白だけで足りる） */
.v2 .card--sub + .card--sub { border-top: 1px solid var(--border-light); }
/* **見出しは中身より小さくしない。** --fs-nav(16px) は本文 --fs-body(18px) より小さく、
   カード内のリンク(--fs-lead 20px)よりさらに小さいため、見出しが中身に負けて
   ブロックの切れ目が読めなくなっていた（2026-08-04 オーナー指摘）。
   サブカードを「弱く」見せるのは大きさではなく色と面で行う */
.v2 .card--sub h2 {
  font-size: var(--fs-lead);
  color: var(--muted);
  margin-bottom: 4px;
}
.v2 .card--sub h2 .hicon { color: var(--muted); }
.v2 .card--sub p { font-size: var(--fs-meta); color: var(--muted); margin-bottom: 6px; }

.muni-select {
  width: 100%;
  font-size: var(--fs-lead);
  padding: 10px 12px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
}
.note-small { font-size: var(--fs-meta); color: var(--muted); margin: 6px 0 0; }

/* 自動取得データの1行サマリー */
.auto-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border-light);
  text-decoration: none;
  color: var(--text);
}
.auto-row:first-of-type { border-top: none; }
.auto-row:hover { background: var(--hover); }
/* ラベルは「どの行か」を最初に読ませる部分なので、値に負けない濃さにする。
   薄いグレーの15pxだと、太字18pxの値に押されて行の区別がつかなかった */
.auto-row .k {
  flex: none;
  width: 4.5em;
  color: var(--text);
  font-weight: 700;
  font-size: var(--fs-body);
}
.auto-row .v { flex: 1; font-weight: 700; }
/* 注記は値と別の行に落とす。同じ行に流すと長い括弧書きが値と混ざって折り返し、
   どこまでが答えなのか読めない */
.auto-row .v .nt {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--muted);
  font-size: var(--fs-meta);
  line-height: 1.6;
}
.auto-row .go { flex: none; color: var(--accent); font-size: var(--fs-meta); }

/* 場所（給水所など）。名称+時間／住所+地図 の2行に収める */
.spot { border-top: 1px solid var(--border-light); padding: 10px 0; }
.spot:first-of-type { border-top: none; }
/* **名前 / 時間 / 住所+地図 の3行に固定する**（2026-08-04 オーナー指摘）。
   名前と時間を横並びにすると、時間の長さで位置が左右に動き（「15:00〜24:00」と
   「15:00〜24:00（8月8日からは10:00〜24:00）」が混在する）、一覧の中で目が迷う。
   長い値では名前の幅も奪う。**行を分けて全部左寄せに揃える**のがいちばん読める。 */
.spot .l2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.spot .nm { font-weight: 700; }
/* 時間は名前の下。1つの時間帯の途中では折らず、区切り「／」でだけ折り返す（.tseg） */
.spot .tm { display: block; margin-top: 2px; color: var(--ok); font-weight: 700; }
.spot .tseg { white-space: nowrap; }
.spot .tsep { color: var(--muted); }
.spot .ad { font-size: var(--fs-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 避難所の設備（水道・電気・エアコン・仮設トイレ）。3行目に回す。
   住所と同じ行に入れると 375px で必ずあふれる */
.spot .nt { font-size: var(--fs-meta); color: var(--muted); margin-top: 2px; }
/* 座標が大字の代表点しか取れなかった地点。実測で 1.2km ずれた例があるので黙って出さない。
   警告色にはしない（危険の告知ではなく、地図の見方の但し書きなので） */
.spot .rough {
  flex: none;
  font-size: var(--fs-meta);
  color: var(--muted);
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.spot--finished .nm::after {
  content: "（本日分終了）";
  color: var(--muted);
  font-weight: 400;
  font-size: var(--fs-meta);
}

/* 地図で開くなどの小さめボタン。
   **nowrap にしない。** 「地図で開く」だけでなく「給水所を地図で見る（開設中の避難所と
   一緒に表示）」のような文の長いものにも同じクラスを当てており、375px で22pxはみ出して
   ページ全体が横スクロールしていた（2026-08-04 実測 scrollWidth 397 / clientWidth 375）。
   地点の行に出る短いもの（.spot .pill）だけ、途中で折れないように nowrap を戻す */
.pill {
  display: inline-block;
  max-width: 100%;
  font-size: var(--fs-meta);
  text-decoration: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  padding: 4px 12px;
}
.pill:hover { background: var(--hover); }
.spot .pill { white-space: nowrap; }

.notice {
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: var(--fs-meta);
  margin-top: 10px;
}
.notice--warn { background: var(--warn-bg); border-color: #f0c9c4; }

/* 電話窓口。2列グリッドだと280pxのレールで説明が2行に折り返し、枠だけで322pxを食っていた。
   番号と説明を横1行に並べ、1件あたり1行に収める（説明の長さは gen-disaster-pages.mjs 側で管理）。 */
.tel-list { display: grid; gap: 8px; }
.tel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--warn-bg);
  border-radius: var(--radius);
  padding: 8px 12px;
  text-decoration: none;
}
.tel:hover { filter: brightness(0.98); }
.tel .n { font-size: var(--fs-h2); font-weight: 800; color: var(--alert); }
.tel .d { font-size: var(--fs-meta); color: var(--muted); }
/* 大きく出さない2件。消すのではなく大きさで優先順位を付ける */
.tel-more { font-size: var(--fs-meta); color: var(--muted); margin-top: 10px; line-height: 1.9; }
.tel-more a { font-weight: 700; }

/* 「詳しい状況」の折りたたみ（停電・地震・断水リンク）。中身は常設と同一のカード本文
   （statcards.js）。閉じたまま中身を差し込むので、届くのが遅れても画面は動かない */
.auto-detail { margin: 4px 0 10px; }
.auto-detail > summary {
  cursor: pointer;
  font-size: var(--fs-meta);
  color: var(--muted);
  padding: 4px 2px;
}
.auto-detail > summary:hover { color: var(--ink); }
.auto-detail[open] > summary { color: var(--ink); font-weight: 700; }
.detail-body { padding: 6px 2px 2px; }

/* 折りたたみ末尾の「閉じる」。開くと中身で画面が埋まり、上の summary まで戻らないと
   閉じられなかった（オーナー指摘 2026-08-04）。閉じている間は出さない。
   面と文字色で出し、縁の1辺だけを色で強調しない（既存の設計判断） */
.detail-close { display: none; }
details[open] > .detail-close {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs-meta);
  font-family: inherit;
  cursor: pointer;
}
details[open] > .detail-close:hover { background: var(--hover); color: var(--ink); }

/* 読み込み中の場所取り。データが届く前に「そこに何かが来る」高さを確保しておくためのもので、
   点滅させない（被災者が見る画面で動くものを増やさない）。文字を持たないので読み上げにも乗らない。 */
.sk {
  background: var(--hover);
  border-radius: 4px;
  height: 1em;
  margin: 10px 0;
}
/* 見出しは1〜2行になることが多いので2行ぶん取る。**取りすぎると届いたときに縮んで、
   やはり画面が動く**（上へのズレも同じだけ数えられる）。推測せず実データで測って合わせること。
   較正（1280×800・サンプルの重要お知らせ）: 実カード295px に対し確保295px */
.sk-h { height: 4.0em; margin: 6px 0 14px; }
.sk-short { width: 55%; height: 0.85em; }
/* 狭い画面ぶんの追い足し。同じ文章が3倍の行数に折り返すので、確保も画面幅で変える */
.sk-m { display: none; }
.skeleton-note { color: var(--muted); }

@media (max-width: 640px) {
  .sk-m { display: block; }
  /* 実測較正（375px）: 「値 （注記）」は3行に折り返す。骨格が1行のままだと届いた瞬間に
     2行ぶん伸び、3行×3項目で約160px、下の「きょうの給水」がまとめて押し下げられる。
     1280×800では1行に収まるので確保しない（確保しすぎても縮んで動く） */
  .auto-row .v { min-height: 5.4em; }
}

/* リンク集の市町村ジャンプ。21件を1画面に収める（探しに来るページなので一覧が正しい） */
.jump-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.jump-chip {
  display: inline-block;
  padding: 5px 12px;
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--fs-meta);
  text-decoration: none;
  color: var(--ink);
}
.jump-chip:hover { background: var(--hover); }
/* アンカーで飛んだとき sticky のサブナビに見出しが隠れないよう余白を取る */
.disaster-main .card[id^="c-"] { scroll-margin-top: 60px; }
.pending-note { color: var(--muted); font-size: var(--fs-meta); padding: 8px 0; }

.wip { text-align: center; color: var(--muted); padding: 24px 12px; }

/* 地図プレビュー。トップに MapLibre（約1MB）は載せない（電波1本でも開くのが前提）。
   地理院タイルを <img> として並べるだけの軽い作りにして、詳しくは支援マップへ送る。 */
.map-preview {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #e8eae6;
  display: block;
  margin: 4px 0 10px;
}
.map-preview img {
  position: absolute;
  width: 256px;
  height: 256px;
  /* タイルの継ぎ目に線が出ないように、色調だけ背景地図と揃える */
  filter: saturate(0.7);
  pointer-events: none;
}
.map-preview .mp-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.map-preview .mp-pin--center { background: var(--alert); width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.map-preview .mp-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 45%);
  color: #fff;
  font-size: var(--fs-meta);
  display: flex;
  align-items: flex-end;
  padding: 8px 10px;
}
.map-preview:hover .mp-cover { background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .05) 45%); }
.map-attr { font-size: var(--fs-micro); color: var(--muted); margin: -4px 0 8px; }

/* ---------- 支援マップ（map.html） ---------- */
.map-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; }
.map-chips .chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: var(--fs-nav);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
/* 発表が0件の種別はチップごと隠す（disaster-map.js が hidden を付ける）。
   **この行が無いと隠れない** ―― 上の .map-chips .chip が display:inline-flex を
   指定しているので、hidden 属性の既定（display:none）が特異性で負ける */
.map-chips .chip[hidden] { display: none; }
.map-chips .chip .hicon { margin-right: 6px; }
.v2 .map-chips .chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 700;
}

#dmap {
  height: 62vh;
  min-height: 340px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #e8eae6;
}

/* ポップアップは本文と同じ書体・サイズ感に揃える */
.maplibregl-popup-content {
  font-family: inherit;
  font-size: var(--fs-meta);
  line-height: 1.6;
  padding: 12px 14px;
}
.maplibregl-popup-content h3 { font-size: var(--fs-nav); margin: 0 0 4px; }
.maplibregl-popup-content p { margin: 0 0 4px; }
.maplibregl-popup-content .pu-state { color: var(--alert); font-weight: 700; }
.maplibregl-popup-content .pu-note { font-size: var(--fs-meta); color: var(--muted); }
.maplibregl-popup-content .meta {
  font-size: var(--fs-micro);
  color: var(--muted);
  border-top: 1px solid var(--border-light);
  margin-top: 6px;
  padding-top: 4px;
}
/* 同じ座標に複数の地点があるとき（給水所＝避難所／大字の代表点に集まった施設）。
   ピンはずらさず、押したときに全件を1枚に並べる。6件並ぶ実データがあるので高さを制限して
   中でスクロールさせる（画面の外へ伸ばすと下の件に気づけない） */
.maplibregl-popup-content { max-height: 60vh; overflow-y: auto; }
.maplibregl-popup-content .pu-count { font-weight: 700; color: var(--accent); }
.maplibregl-popup-content .pu-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 0;
}

/* 手続きページ。1→4 の順に進む流れなので、番号を見出しの先頭に丸で置く。
   **中身は持たず入口だけ**（り災証明の要件は市町村ごとに違うため転記しない） */

/* 扱う範囲の明示（「これで全部ではない」）。**薄くしない。**
   最初は card--sub（グレー・--fs-meta）に入れていたが、あれは別ページへの案内の枠で、
   読み飛ばしてよい情報の見え方になる（2026-08-05 オーナー指摘「なぜ大事な文章を薄くした」）。
   誤解を防ぐ但し書きは、読まれなければ意味がない */
.v2 .card.tz-scope p {
  font-size: var(--fs-body);
  color: var(--text);
}
/* いちばん効く一文だけ警告色にする（全部を赤にすると、どれが要点か分からなくなる） */
.v2 .tz-scope .tz-warn { color: var(--alert); }
.tz-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 700;
  flex: none;
}
/* **.v2 .card h2 (0,2,1) に勝てる強さで書く。** .tz-step h2 (0,1,1) では負けて
   display:block のままになり、inline-flex の丸が baseline 揃えで行の下にはみ出していた
   （2026-08-05 実測: h2Display=block・丸の下端が行より下） */
.v2 .card.tz-step h2 { display: flex; align-items: center; }
/* 入口のリンクは押す場所だと分かる大きさにする（本文より大きく、指で押せる高さ） */
.tz-go {
  display: inline-block;
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0;
}
.tz-go:hover { text-decoration: underline; }
.tz-go::after { content: " →"; }

/* 支援マップの凡例。ピンと同じ色・同じ文字で対応づける */
.map-legend {
  font-size: var(--fs-meta);
  color: var(--muted);
  margin: 8px 0 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
}
/* 支援マップの市町村セレクタ。チップのすぐ上に置く（チップと同じ操作列として読ませる） */
.muni-select--map { margin: 0 0 8px; }

/* 凡例は「swatch + ラベル」を1組で扱う。0件の種別は組ごと隠して1行に収める */
.map-legend .lg-item { display: inline-flex; align-items: center; }
.map-legend .lg-item[hidden] { display: none; }
.map-legend .lg {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  margin-right: 4px;
}
/* **display を付けないと効かない。** transform は非置換のインライン要素には適用されない
   （素の span のままだと指定は計算値に載るのに見た目は傾いたまま。
   getComputedStyle で確認すると「直った」と誤判定するので、目視で確かめること） */
.map-legend .lg > * { display: inline-block; transform: rotate(45deg); }
.lg-water { background: #1565c0; }
.lg-bath { background: #8e3fa8; }
.lg-takidashi { background: #c86400; }
.lg-shelter { background: #2e7d32; }
/* 2役の地点（給水所＝避難所など）。ピンは雫の中を斜めに塗り分けてあるので、
   凡例も2色にする（.lg は -45度回っているので、上下で分ければ画面では斜めに見える） */
/* 2色目は明度を上げた色（disaster-map.js の COMBO_LIGHT と同じ値）。
   濃い色どうしだと1色に見えるため、色相ではなく明度で差を作っている */
.lg-combo { background: linear-gradient(to bottom, #1565c0 0 50%, #4caf50 50% 100%); }
.lg-designated { background: #6b7a8f; }
.lg-off { background: #8a939e; }