@charset "UTF-8";
/*
 * エムラボメディア 共通スタイル
 *
 * 方針
 *  - 見やすさ最優先。情報密度は落とさない
 *  - ただしポータルニュースの見た目そのものにはしない。
 *    「赤いロゴ + 紺のナビ帯 + 青リンク + グレー地に囲み枠」の組み合わせが
 *    既存の大手ニュースサイトを強く想起させるため、そこから離す:
 *      ヘッダとナビを1本の濃いスレート帯にまとめる
 *      アクセントはティール。赤は使わない（赤は危険度の色として予約する）
 *      本文側は白地・枠なしで、罫線と余白で区切る
 *      サイドバーだけ淡い面で区別する
 *  - 災害の深刻度は気象庁の配色に合わせる（黒=災害切迫 / 紫=危険 / 赤=警戒 / 黄=注意）
 *    ここだけは独自色にしない。利用者が既に知っている意味と食い違うと危ないため
 *  - JS を切っても全ページ読める（サーバ側で描画する）
 */

:root {
  --ink: #17202a;
  --ink-sub: #5b6672;
  --ink-weak: #8a939d;

  --paper: #fff;
  --page: #fff;
  --panel: #f4f7f7;
  --rule: #e2e7ea;
  --rule-strong: #cfd6db;

  --brand: #0d6e6a;
  --brand-dark: #0a5551;
  --brand-ink: #0b5b58;

  /*
   * 主要な操作（投稿ボタン）。
   * 地を明るくすると白文字が読みにくくなる（#0a8078 で 4.80:1 まで落ちた）。
   * 目立たせたいときに上げるのは彩度ではなくコントラスト。
   * 濃い地に白文字で 8.64:1。暗い配色では明暗を入れ替える。
   */
  --cta-bg: #0a5551;
  --cta-bg-hover: #073f3c;
  --cta-ink: #fff;

  /* ヘッダ・ナビ・フッタ。既定は明るい配色。右上のボタンで暗い配色に切り替わる */
  --head-bg: #fff;
  --head-ink: #17202a;
  --head-dim: #5b6672;
  --head-border: #e2e7ea;
  --head-hover: #f4f7f7;
  --foot-bg: #f7f9f9;
  --shadow: rgba(10, 17, 23, .12);

  /* 左右の余白。ヘッダ・本文・フッタで同じ値を使い、縦のラインを揃える */
  --gutter: 30px;

  --link: #0b5b58;
  --link-visited: #4c5a68;
  --link-hover: #0d6e6a;

  /* 気象庁の危険度配色 */
  --sev5: #0c0c0c;  /* 災害切迫・特別警報 */
  --sev4: #aa00aa;  /* 危険 */
  --sev3: #ff2800;  /* 警戒 */
  --sev2: #f2e700;  /* 注意 */
  --sev1: #c9c9c9;  /* 情報 */
  --sev5-text: #fff;
  --sev4-text: #fff;
  --sev3-text: #fff;
  --sev2-text: #333;
  --sev1-text: #333;
}

/*
 * 暗い配色。既定ではない。ヘッダ右上のボタンで切り替え、選択は localStorage に残す。
 * 危険度の色（--sev*）はどちらのテーマでも変えない。気象庁の配色なので
 * 明るさで意味が変わってはいけない。
 */
:root[data-theme="dark"] {
  --ink: #e6edf2;
  --ink-sub: #9fadb8;
  --ink-weak: #78848e;

  --paper: #121a21;
  --page: #121a21;
  --panel: #1a242c;
  --rule: #26313a;
  --rule-strong: #35424d;

  --brand: #2bb3a3;
  --brand-ink: #4ecdbb;

  /* 暗い地の上では、濃い緑の面に白文字だと沈む。明暗を入れ替えて 8.01:1 */
  --cta-bg: #3ec9b8;
  --cta-bg-hover: #58dbcb;
  --cta-ink: #06241f;

  --link: #4ecdbb;
  --link-visited: #9aa8b4;
  --link-hover: #6fe0d0;

  --head-bg: #1a232b;
  --head-ink: #fff;
  --head-dim: #c8d2da;
  --head-border: #26313a;
  --head-hover: rgba(255, 255, 255, .08);
  --foot-bg: #161e25;
  --shadow: rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* 画面外に逃がした要素で横スクロールが出ないようにする */
body { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,
               "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.75;
}

a { color: var(--link); text-decoration: none; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--link-hover); text-decoration: underline; }

/* ============ ヘッダ + ナビ（1本の帯にまとめる） ============ */
.site-head {
  background: var(--head-bg);
  border-bottom: 1px solid var(--head-border);
  position: relative;
  z-index: 900;
}
.site-head__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px var(--gutter) 10px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.site-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--head-ink);
  letter-spacing: .06em;
  position: relative;
  padding-left: 14px;
  white-space: nowrap;   /* 名前が途中で折れると読めなくなる */
  flex: none;
}
.site-logo::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(13, 110, 106, .3);
}
.site-logo:visited { color: var(--head-ink); }
.site-logo:hover { text-decoration: none; color: var(--head-ink); }
.site-tagline { font-size: 12px; color: var(--head-dim); }
.site-updated { margin-left: auto; font-size: 12px; color: var(--head-dim); white-space: nowrap; }
.site-updated__date { margin-right: 4px; }

.gnav { background: var(--head-bg); border-bottom: 1px solid var(--head-border); }
.gnav__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  overflow-x: auto;
  gap: 2px;
}
.gnav a {
  color: var(--head-dim);
  padding: 8px 14px 10px;
  font-size: 13.5px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.gnav a:visited { color: var(--head-dim); }
.gnav a:hover { color: var(--head-ink); text-decoration: none; border-bottom-color: var(--rule-strong); }
.gnav a[aria-current="page"] {
  color: var(--head-ink);
  font-weight: 700;
  border-bottom-color: var(--brand);
}

/* 「災害の種類」。JS を切っても開けるよう details で作る */
.gnav__more { position: relative; flex: none; }
.gnav__more > summary {
  list-style: none;
  cursor: pointer;
  color: var(--head-dim);
  padding: 8px 26px 10px 14px;
  font-size: 13.5px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  position: relative;
}
.gnav__more > summary::-webkit-details-marker { display: none; }
.gnav__more > summary::after {
  content: "";
  position: absolute; right: 11px; top: 50%;
  width: 6px; height: 6px; margin-top: -4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.gnav__more > summary:hover { color: var(--head-ink); border-bottom-color: var(--rule-strong); }
.gnav__more[open] > summary,
.gnav__more > summary[aria-current="page"] {
  color: var(--head-ink);
  font-weight: 700;
  border-bottom-color: var(--brand);
}
.gnav__list {
  position: absolute; left: 0; top: 100%; z-index: 1400;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .17);
  min-width: 190px;
  padding: 4px 0;
}
.gnav__list a {
  display: block;
  color: var(--ink);
  padding: 9px 16px;
  border-bottom: 0;
}
.gnav__list a:visited { color: var(--ink); }
.gnav__list a:hover { background: var(--panel); border-bottom-color: transparent; }
.gnav__list a[aria-current="page"] { border-bottom-color: transparent; }

.gnav__spacer { flex: 1 1 auto; min-width: 12px; }

/*
 * 投稿は「読む」ではなく「書く」ので、他の項目と見た目を変える。
 * 2つは対で並ぶので、枠だけ／塗りつぶし の組にして関係が分かるようにする。
 * 片方だけボタンにすると、隣の文字リンクが押せないものに見えてしまう。
 */
/*
 * セレクタは .gnav a.〜 で書く。.gnav a（要素を含むので詳細度 0,1,1）が
 * .gnav__post（0,1,0）に勝ってしまい、color の指定が効いていなかった。
 * 白のはずの文字が --head-dim のグレーで出ていた原因。
 */
.gnav a.gnav__ugc,
.gnav a.gnav__post {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 5px 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 3px;
  border-bottom: 0;
  white-space: nowrap;
}

/* 枠だけ。地の色が明るくても暗くても、ブランド色の枠と文字で読める */
.gnav a.gnav__ugc {
  color: var(--brand-ink);
  border: 1.5px solid var(--brand);
  background: transparent;
}
.gnav a.gnav__ugc:visited { color: var(--brand-ink); }
.gnav a.gnav__ugc:hover {
  color: var(--brand-ink);
  background: var(--panel);
  text-decoration: none;
  border-bottom-color: var(--brand);
}
.gnav a.gnav__ugc[aria-current="page"] {
  color: var(--cta-ink);
  background: var(--cta-bg);
  border-color: var(--cta-bg);
}

/* 塗りつぶし。枠のぶんだけ内側を詰めて、2つの高さを揃える */
.gnav a.gnav__post {
  padding: 8px 18px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-size: 14px;
  letter-spacing: .03em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}
.gnav a.gnav__post:visited { color: var(--cta-ink); }
.gnav a.gnav__post svg { stroke-width: 2.6; }
.gnav a.gnav__post:hover {
  background: var(--cta-bg-hover);
  color: var(--cta-ink);
  text-decoration: none;
  border-bottom-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .26);
}
.gnav a.gnav__post[aria-current="page"] { color: var(--cta-ink); border-bottom-color: transparent; }

/* 第2階層タブ */
.subnav { background: var(--paper); border-bottom: 1px solid var(--rule); }
.subnav__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 0 var(--gutter);
}
.subnav a {
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  color: var(--ink);
}
.subnav a:visited { color: var(--ink); }
.subnav a:hover { text-decoration: none; border-bottom-color: var(--rule-strong); }
.subnav a[aria-current="page"] { border-bottom-color: var(--brand); font-weight: 700; }

/* ============ レイアウト ============ */
.wrap {
  max-width: 1040px;
  margin: 18px auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 292px;
  gap: 30px;
  align-items: start;
}
.wrap--single { grid-template-columns: 1fr; }

/* 本文側は枠で囲まない。罫線と余白で区切る */
.card {
  background: transparent;
  border: 0;
  margin-bottom: 26px;
}
.card__head {
  padding: 0 0 8px;
  margin: 0 0 10px;
  border-bottom: 2px solid var(--rule-strong);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: relative;
}
.card__head::before {
  content: "";
  position: absolute;
  left: -14px; top: 2px;
  width: 4px; height: 17px;
  background: var(--brand);
  border-radius: 1px;
}
.card__head .count { font-size: 12px; color: var(--ink-sub); font-weight: 400; }
.card__body { padding: 0; }
.card__more {
  padding: 10px 0 0;
  font-size: 13px;
  text-align: right;
}

/* サイドバーだけ面で区別する */
aside .card {
  background: var(--panel);
  padding: 14px 16px 6px;
  margin-bottom: 18px;
}
aside .card__head { border-bottom-color: var(--rule-strong); }
aside .card__head::before { left: -14px; }
aside .card__body { padding: 0 0 8px; }
aside .card__more { padding-bottom: 10px; }

/* ============ 災害一覧 ============ */
.hazard-list { list-style: none; margin: 0; padding: 0; }
.hazard-list > li { border-bottom: 1px solid var(--rule); }
.hazard-list > li:last-child { border-bottom: 0; }

.hz {
  display: flex;
  gap: 12px;
  padding: 12px 4px;
  align-items: flex-start;
}
.hz:hover { background: #f7faf9; text-decoration: none; }

.hz__sev {
  flex: none;
  width: 60px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 2px;
  margin-top: 3px;
  letter-spacing: .02em;
}
.sev-5 { background: var(--sev5); color: var(--sev5-text); }
.sev-4 { background: var(--sev4); color: var(--sev4-text); }
.sev-3 { background: var(--sev3); color: var(--sev3-text); }
.sev-2 { background: var(--sev2); color: var(--sev2-text); }
.sev-1 { background: var(--sev1); color: var(--sev1-text); }

.hz__main { min-width: 0; flex: 1; }
.hz__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
}
.hz:hover .hz__title { color: var(--brand-ink); text-decoration: underline; }
.hz__meta {
  font-size: 12px;
  color: var(--ink-sub);
  margin-top: 3px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hz__excerpt {
  font-size: 13px;
  color: #46505a;
  margin-top: 5px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 新着は塗りつぶしの赤タグにしない。赤は危険度に予約している */
.badge-new {
  display: inline-block;
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  letter-spacing: .06em;
  vertical-align: 2px;
  margin-left: 6px;
}

/* ============ サイドバー ============ */
.side-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.side-list li { border-bottom: 1px solid var(--rule); }
.side-list li:last-child { border-bottom: 0; }
.side-list a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 0;
  color: var(--ink);
}
.side-list a:visited { color: var(--ink); }
.side-list a:hover { color: var(--brand-ink); text-decoration: none; }
.side-list .num { font-size: 12px; color: var(--ink-sub); flex: none; }
.side-list .dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  vertical-align: -1px;
}

/* ============ 個別ページ ============ */
.detail__title {
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: .01em;
  margin: 0 0 10px;
}
.detail__meta {
  font-size: 13px;
  color: var(--ink-sub);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.detail__body { font-size: 16px; line-height: 1.95; }
.detail__body p { margin: 0 0 1em; }
.detail__body h2 {
  font-size: 17px;
  margin: 1.8em 0 .6em;
  padding-left: 10px;
  border-left: 4px solid var(--brand);
  line-height: 1.5;
}

.kv {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0;
}
.kv th, .kv td {
  border-bottom: 1px solid var(--rule);
  padding: 9px 12px 9px 0;
  text-align: left;
  vertical-align: top;
}
.kv th {
  width: 32%;
  font-weight: 700;
  color: var(--ink-sub);
  white-space: nowrap;
  padding-right: 16px;
}

.source-note {
  background: var(--panel);
  border-left: 4px solid var(--brand);
  padding: 12px 14px;
  font-size: 13px;
  color: #35404a;
  margin: 18px 0;
}
.source-note strong { color: var(--brand-ink); }

/* 未確認情報（ユーザー投稿）を公式情報と明確に分ける */
.unverified {
  background: #fffbe6;
  border-left: 4px solid #c98a00;
}
.unverified__tag {
  display: inline-block;
  background: #c98a00;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
}

.breadcrumb {
  max-width: 1040px;
  margin: 12px auto 0;
  padding: 0 var(--gutter);
  font-size: 12px;
  color: var(--ink-weak);
}
.breadcrumb a { color: var(--ink-sub); }

.empty {
  padding: 30px 4px;
  text-align: center;
  color: var(--ink-sub);
  font-size: 14px;
}

/* ============ フッタ ============ */
.site-foot {
  background: var(--foot-bg);
  border-top: 1px solid var(--head-border);
  color: var(--ink-sub);
  margin-top: 34px;
  padding: 22px var(--gutter) 34px;
  font-size: 12px;
}
.site-foot__inner { max-width: 1040px; margin: 0 auto; }
.site-foot a { color: var(--link); }
.site-foot a:visited { color: var(--link); }

/* ヘッダーと同じ並びを、列に分けて全部見えるようにする */
.foot-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 26px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--head-border);
}
.foot-nav__head {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  padding-left: 8px;
  border-left: 3px solid var(--brand);
  line-height: 1.4;
}
.foot-nav__col a {
  display: block;
  padding: 3.5px 0;
  font-size: 12.5px;
}
.site-foot .disclaimer { line-height: 1.9; }
.site-foot .disclaimer strong { color: var(--ink); }

@media (max-width: 700px) {
  .foot-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
}
@media (max-width: 380px) {
  .foot-nav { grid-template-columns: 1fr; }
}

/* ============ 準備中 ============ */
.coming {
  background: var(--panel);
  border-left: 4px solid var(--brand);
  padding: 40px 24px;
  text-align: center;
}
.coming h2 { font-size: 20px; margin: 0 0 10px; }
.coming p { color: var(--ink-sub); font-size: 14px; margin: 0 0 6px; }

/* ============ 狭い画面 ============ */
@media (max-width: 880px) {
  .wrap { grid-template-columns: 1fr; gap: 8px; }

  /* 狭い画面は余白を詰める */
  :root { --gutter: 16px; }

  /* ヘッダは1行に収める。説明文は畳んで高さを稼ぐ */
  .site-head__inner {
    padding: 8px var(--gutter);
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;   /* ボタンが混ざるので baseline では揃わない */
  }
  .site-logo { font-size: 16px; padding-left: 12px; letter-spacing: .03em; }
  .site-logo::before { width: 5px; height: 5px; margin-top: -2.5px; }
  .site-tagline { display: none; }
  .site-updated { margin-left: auto; font-size: 11px; width: auto; }
  .theme-toggle { margin-left: 2px; width: 28px; height: 28px; }
  .gnav__inner { padding: 0 var(--gutter); }
  .gnav a { padding: 7px 11px 9px; font-size: 12.5px; }
  .card__head::before { left: -9px; }
  aside .card { padding: 14px 14px 6px; }
  .detail__title { font-size: 21px; }
  .site-updated { margin-left: 0; width: 100%; }
}

/* ============ メインビジュアル ============ */
/*
 * 画面幅いっぱいに出す。地図は情報そのものなので、本文と同じ幅に
 * 押し込めると「いま日本で何が起きているか」が一目で入ってこない。
 */
.hero { background: #bdd2ff; position: relative; overflow: hidden; }
.hero__inner { max-width: none; margin: 0; position: relative; }

/*
 * 見出しは地図の上に置く小さなカードにする。
 * 以前は暗いグラデーションを斜めに敷いていたが、地図を大きく覆ってしまい、
 * 明るい配色にすると浮いた。地の色に依存しない独立したカードにする。
 */
.hero__overlay {
  position: absolute;
  left: 22px; top: 20px;
  z-index: 1100;   /* 2D表示のとき Leaflet の下に隠れないようにする */
  padding: 13px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 4px 18px var(--shadow);
  pointer-events: none;
}
.hero__lead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}
/* 更新され続けていることを示す小さな点 */
.hero__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(13, 110, 106, .55);
  animation: heroPulse 2.4s ease-out infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 110, 106, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(13, 110, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(13, 110, 106, 0); }
}

.hero__stats { display: flex; gap: 0; margin: 0; }
.hero__stats div {
  padding: 0 15px;
  border-left: 1px solid var(--rule);
  text-align: center;
}
.hero__stats div:first-child { padding-left: 0; border-left: 0; }
.hero__stats b {
  display: block;
  font-size: 23px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hero__stats span {
  display: block;
  font-size: 10.5px;
  color: var(--ink-sub);
  letter-spacing: .06em;
  margin-top: 1px;
}

@media (max-width: 880px) {
  /* 見出しカードは左上に小さく置く。右上は表示切替とアイコンレールが使う */
  .hero__overlay { left: 8px; top: 8px; right: auto; padding: 8px 10px 9px; }
  .hero__lead { font-size: 12px; margin-bottom: 6px; gap: 6px; }
  .hero__stats div { padding: 0 8px; }
  .hero__stats b { font-size: 17px; }
  .hero__stats span { font-size: 9.5px; }
}

/* ============ 地図ビュー（3D／2D切替） ============ */
.mapview { position: relative; width: 100%; height: var(--mv-h, 70vh); background: #bdd2ff; overflow: hidden; }
.mapview__layer {
  position: absolute;
  inset: 0;
  visibility: hidden;
}
.mapview__layer.is-active { visibility: visible; }
.mapview__loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #43617f; font-size: 13px;
}
.mapview__toggle {
  position: absolute;
  right: 76px; top: 16px;   /* 右端のアイコンレールと重ならない位置 */
  z-index: 1200;            /* Leaflet のコントロール（〜1000）より前 */
  display: flex;
  border: 1px solid rgba(10, 17, 23, .28);
  background: rgba(255, 255, 255, .9);
}
.mapview__toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #26323d;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
}
.mapview__toggle button + button { border-left: 1px solid rgba(10, 17, 23, .18); }
.mapview__toggle button.is-on { background: #1e262e; color: #fff; }
.mapview__hint {
  position: absolute;
  left: 32px; bottom: 14px;
  margin: 0;
  z-index: 1100;
  color: #3d566e;
  font-size: 12px;
  pointer-events: none;
  text-shadow: 0 1px 6px rgba(255, 255, 255, .8);
}

@media (max-width: 880px) {
  /* 画面の高さいっぱいに使う。ヘッダとナビの分だけ引く */
  .mapview { height: calc(100vh - 132px); min-height: 380px; }

  /* 表示切替は左下へ。上に置くと見出しカードとアイコンレールに挟まれて潰れる */
  .mapview__toggle { right: auto; left: 8px; top: auto; bottom: 30px; }
  .mapview__toggle button { padding: 5px 11px; font-size: 11.5px; }
  .mapview__hint { left: 8px; bottom: 8px; font-size: 10.5px; }
}

/* ============ 地図右端のアイコンレールとパネル ============ */
.mapdock {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  z-index: 1300;               /* Leaflet のコントロール（〜1000）より前 */
  display: flex;
  align-items: stretch;
  pointer-events: none;        /* 地図の操作を邪魔しない。子だけ有効にする */
}
.mapdock__rail {
  pointer-events: auto;
  width: 62px;
  /* 地図（明るい）の上に載るので、地の色は濃いまま。境界を締めて浮かせる */
  background: rgba(20, 27, 34, .96);
  box-shadow: -2px 0 10px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  gap: 0;
}
.mapdock__rail button {
  appearance: none;
  border: 0;
  background: transparent;
  /*
   * もとは #9fb0bd。濃い地に対して薄すぎ、線の細いアイコンが沈んでいた。
   * ほぼ白まで上げ、押されている項目だけを色で区別する。
   */
  color: #eef3f7;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.3;
  padding: 11px 2px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  transition: background .12s ease;
}
.mapdock__rail button:last-child { border-bottom: 0; }
/* 線の細いアイコンは、濃い地の上だと輪郭が消える。太らせて少し大きくする */
.mapdock__rail svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
}
.mapdock__rail button:hover { background: rgba(255, 255, 255, .12); }
.mapdock__rail button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.mapdock__rail button.is-on {
  color: #fff;
  background: var(--brand);
  border-left-color: #fff;
}
.mapdock__rail button.is-on svg { stroke-width: 2.2; }

/* パネルは閉じているとき右へ引っ込める。中身は DOM に残す */
.mapdock__panel {
  pointer-events: auto;
  width: 340px;
  max-width: 84vw;
  background: rgba(255, 255, 255, .97);
  border-left: 1px solid var(--rule);
  overflow-y: auto;
  margin-right: -341px;
  transition: margin-right .22s ease;
  padding: 16px 18px 26px;
}
.mapdock.is-open .mapdock__panel { margin-right: 0; }

.dockpane { display: none; }
.dockpane.is-active { display: block; }
.dockpane__head {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--rule-strong);
  font-size: 15px;
  font-weight: 700;
}
.dockpane__head span { font-size: 12px; color: var(--ink-sub); font-weight: 400; margin-left: 6px; }
.dockpane__empty { color: var(--ink-sub); font-size: 13px; padding: 16px 0; text-align: center; }
.dockpane__more { margin: 12px 0 0; font-size: 13px; text-align: right; }
.dockpane__lead { margin: 14px 0 6px; font-size: 13px; font-weight: 700; }
.dockpane__note { margin: 0 0 6px; font-size: 12.5px; color: var(--ink-sub); line-height: 1.75; }
.dockpane__warn { margin-top: 12px; padding: 8px 10px; background: var(--panel); border-left: 3px solid var(--brand); color: #35404a; }
.dockpane__sev { margin: 0 0 8px; display: flex; gap: 5px; flex-wrap: wrap; }

.docklist { list-style: none; margin: 0; padding: 0; }
.docklist li { border-bottom: 1px solid var(--rule); }
.docklist li:last-child { border-bottom: 0; }
.docklist a { display: flex; gap: 9px; padding: 9px 0; align-items: flex-start; color: var(--ink); }
.docklist a:visited { color: var(--ink); }
.docklist a:hover { text-decoration: none; }
.docklist a:hover .docklist__title { color: var(--brand-ink); text-decoration: underline; }
.docklist__sev {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  margin-top: 2px;
  white-space: nowrap;
}
.docklist__body { min-width: 0; }
.docklist__title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.docklist__meta { display: block; font-size: 11.5px; color: var(--ink-sub); margin-top: 2px; }

/* ============ 地図上の吹き出し ============ */
.maptip {
  position: absolute;
  z-index: 1400;
  width: 250px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 6px 22px rgba(10, 17, 23, .22);
  padding: 10px 12px 11px;
  pointer-events: auto;
}
.maptip__sev {
  display: inline-block;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
}
.maptip__title { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.maptip__meta  { margin: 0 0 8px; font-size: 11.5px; color: var(--ink-sub); }
.maptip__link  { font-size: 12.5px; }

@media (max-width: 880px) {
  .mapdock__rail { width: 46px; }
  .mapdock__rail button { font-size: 9.5px; padding: 8px 1px; gap: 3px; }
  .mapdock__rail svg { width: 17px; height: 17px; }
  /* 開いたら画面のほぼ全幅を使う。中途半端な幅だと一覧が読めない */
  .mapdock__panel { width: calc(100vw - 46px); max-width: none; margin-right: calc(-100vw + 46px); }
  .maptip { width: 210px; }
}

/* ============ 凡例 ============ */
.legend { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 0 0 8px; }
.legend th, .legend td {
  padding: 6px 6px 6px 0;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-sub);
}
.legend td strong { color: var(--ink); }
.legend th { width: 30px; }
.legend--sev th:first-child { width: 26px; }
.legend--sev tr:first-child th { font-size: 11px; color: var(--ink-weak); font-weight: 400; width: auto; }

/* 凡例の見本。地図上の見え方に寄せる */
.lg { display: inline-block; vertical-align: middle; }
.lg--sev  { width: 16px; height: 16px; }
.lg--col  { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
            border-bottom: 18px solid var(--sev3); }
.lg--dot  { width: 13px; height: 13px; border-radius: 50%; background: var(--sev3); }
.lg--fire { width: 13px; height: 13px; background: #14b8a6; transform: rotate(45deg); }
.lg--rain { width: 2px; height: 17px; background: #7cc0f0; margin-left: 5px;
            box-shadow: 5px -3px 0 #7cc0f0, -5px 3px 0 #7cc0f0; }
.lg--bolt { width: 3px; height: 17px; background: #cfe9ff; margin-left: 5px;
            box-shadow: 0 0 6px 2px rgba(190, 228, 255, .9); }

/* ============ テーマ切替 ============ */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--head-border);
  background: transparent;
  color: var(--head-dim);
  width: 30px; height: 30px;
  margin-left: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
.theme-toggle:hover { color: var(--head-ink); background: var(--head-hover); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* 画面がごく狭いときは日付を落として時刻だけ残す。
   ロゴとボタンを押し出さないことを優先する */
@media (max-width: 420px) {
  .site-updated__date { display: none; }
  .site-logo { font-size: 15px; }
}
@media (max-width: 340px) {
  .site-updated { display: none; }
}

/* ============ 狭い画面のメニュー ============ */
/* PCではナビを常時出すので、ボタンは表示しない */
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    appearance: none;
    border: 1px solid var(--head-border);
    background: transparent;
    width: 32px; height: 28px;
    margin-left: 4px;
    padding: 0 6px;
    cursor: pointer;
    flex: none;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    background: var(--head-ink);
    transition: transform .18s ease, opacity .18s ease;
  }
  /* 開いているあいだは×に変える */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* ナビは畳んでおき、ボタンで開く。地図の上に重ねる */
  .gnav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    z-index: 900;
    box-shadow: 0 8px 20px var(--shadow);
  }
  .gnav.is-open { display: block; }
  .gnav__inner {
    flex-direction: column;
    overflow: visible;
    padding: 4px 0;
    gap: 0;
  }
  .gnav a {
    padding: 11px 18px;
    font-size: 14px;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .gnav a:hover { border-bottom-color: transparent; }
  .gnav a[aria-current="page"] {
    border-bottom-color: transparent;
    border-left-color: var(--brand);
    background: var(--head-hover);
  }

  /* 縦並びになるので、余白を作る要素と重ね表示は無効にする */
  .gnav__spacer { display: none; }
  .gnav__more { position: static; }
  .gnav__more > summary {
    padding: 11px 18px;
    font-size: 14px;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .gnav__more > summary::after { right: 20px; }
  .gnav__more[open] > summary { border-left-color: var(--brand); background: var(--head-hover); }
  .gnav__list {
    position: static;
    border: 0;
    box-shadow: none;
    background: var(--panel);
    padding: 0;
  }
  .gnav__list a { padding: 10px 18px 10px 34px; font-size: 13.5px; }

  /* 畳んだ中でも埋もれないように、2つとも幅いっぱいのボタンにする */
  .gnav a.gnav__ugc,
  .gnav a.gnav__post {
    display: flex;
    justify-content: center;
    margin: 8px 14px 0;
    padding: 11px 14px;
    font-size: 14px;
    border-left: 0;
  }
  .gnav a.gnav__post { margin-bottom: 8px; padding: 12.5px 14px; }
  .gnav a.gnav__ugc[aria-current="page"] { border-left: 0; }

  /* ナビが畳まれたぶん、地図に使える高さが増える */
  .mapview { height: calc(100vh - 54px); }
}

/* ============ 2D地図の印 ============ */
/* 3Dの光の柱にあたる。発表がある都道府県に丸印を置き、雨や雷は記号で添える */
.m2d { display: flex; align-items: center; gap: 1px; white-space: nowrap; }
.m2d__dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(10, 17, 23, .35);
  display: block;
  flex: none;
}
.m2d__g {
  font-style: normal;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}
.m2d__g--rain { color: #1f7ec4; }
.m2d__g--bolt { color: #d99000; }

/* 吹き出しの深刻度バッジ */
.pop__sev {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  margin-bottom: 5px;
}
.leaflet-popup-content { font-size: 13px; line-height: 1.6; }

/* ============ フォーム ============ */
.form { margin-top: 18px; }
.form__row { margin-bottom: 18px; }
.form__label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.form__req {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: 1px;
}
.form__input {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 15px;   /* 16px未満だと iOS で拡大されるが、15pxは許容範囲 */
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
}
.form__input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
textarea.form__input { resize: vertical; }
.form__note { margin: 5px 0 0; font-size: 12px; color: var(--ink-sub); line-height: 1.7; }
.form__row--agree { font-size: 14px; }
.form__row--agree label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.form__submit {
  appearance: none;
  border: 0;
  background: var(--brand);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 34px;
  cursor: pointer;
  letter-spacing: .04em;
}
.form__submit:hover { background: var(--brand-ink); }

/* 迷惑投稿対策の隠しフィールド。人の目にも支援技術にも触れさせない */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============ 広告枠 ============ */
/* 本文と地続きに見えないよう、面で囲って明確に区切る */
.affbox { background: var(--panel); padding: 14px 16px 6px; }
.affbox__pr {
  background: var(--ink-sub);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  letter-spacing: .08em;
}
.affbox__note { margin: 0 0 10px; font-size: 11.5px; color: var(--ink-sub); line-height: 1.75; }
.afflist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 10px; }
.affitem { display: flex; gap: 12px; background: var(--paper); padding: 10px; align-items: flex-start; }
.affitem__img { flex: none; width: 90px; height: 90px; object-fit: contain; background: #fff; }
.affitem__body { min-width: 0; }
.affitem__name { margin: 0 0 4px; font-size: 13px; line-height: 1.6; }
.affitem__price { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.affitem__price span { font-size: 11px; font-weight: 400; color: var(--ink-sub); margin-left: 6px; }
.affitem__links { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.affitem__links a {
  font-size: 12px;
  border: 1px solid var(--rule-strong);
  padding: 3px 12px;
  color: var(--ink);
}
.affitem__links a:hover { background: var(--ink); color: #fff; text-decoration: none; }

/* ============ 利用者からの投稿（未確認） ============ */
/* 公式の発表と同じ色にすると、未確認の情報が同じ重みに見える。色も形も分ける */
.m2d__flag {
  display: block;
  width: 0; height: 0;
  border-left: 12px solid #c98a00;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
}
.maptip__sev--unverified,
.pop__sev--unverified {
  background: #c98a00;
  color: #fff;
}
.report-badge {
  display: inline-block;
  background: #c98a00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  letter-spacing: .06em;
}
.report-item {
  border-left: 4px solid #c98a00;
  background: #fffbe6;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.report-item__meta { font-size: 11.5px; color: var(--ink-sub); margin: 4px 0 0; }
.report-item__body { margin: 5px 0 0; font-size: 13.5px; line-height: 1.7; }

/* ============ 運営者向けの帯（?notrack=1 のときだけ出る） ============ */
.notrack-bar {
  background: #1f2d3a;
  color: #eef3f7;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 9px var(--gutter);
  text-align: center;
}
.notrack-bar a { color: #7fe0d2; }
.notrack-bar a:visited { color: #7fe0d2; }