@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');
/* =============================================
   東京都花粉カレンダー専用CSS (D: Urban Dark)
   /css/pref-calendar.css
============================================= */

/* ---- リセット・変数 ---- */
.pref-page {
  --navy: #0a1628;
  --navy-mid: #112240;
  --navy-light: #1a3a5c;
  --blue: #1565c0;
  --blue-light: #2196f3;
  --cyan: #00b0ff;
  --white: #ffffff;
  --off-white: #f0f4ff;
  --text: #1a2f3a;
  --text-muted: #607d8b;
  --danger: #d32f2f;
  --warning: #f57c00;
  --success: #2e7d32;
  --border: rgba(255,255,255,.12);
  font-family: 'Noto Sans JP', sans-serif;
}

/* ---- MV：フルワイドダーク ---- */
.pref-mv {
  background: linear-gradient(160deg, #0a1628 0%, #112240 40%, #1a3a5c 100%);
  color: #fff;
  padding: 0 0 0;
  position: relative;
  overflow: hidden;
}
.pref-mv::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0,176,255,.15) 0%, transparent 70%);
  pointer-events: none;
}
.pref-mv-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px 10px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.pref-mv-cat {
  display: inline-block;
  background: rgba(0,176,255,.2);
  color: #00b0ff;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: .1em;
  border: 1px solid rgba(0,176,255,.4);
  margin-bottom: 16px;
}
.pref-mv-h1 {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 10px;
  letter-spacing: -0.03rem;
  color: #fff;
}
.pref-mv-h1 i{font-size:1.4rem;}
.pref-mv-h1 span {
  color: #00b0ff;
}
.pref-mv-sub {
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  line-height: 1.7;
  margin-bottom: 16px;
}
/* サマリーカード3枚 */
.pref-summary-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pref-summary-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  position: relative;
  min-height: 80px;
  padding-top: 32px; /* 上のアイコン＋ラベル分の余白 */
}
.pref-summary-card .ms-icon, .pref-summary-card .sc-label, .pref-summary-card .sc-value  {
  position: absolute;}
.pref-summary-card .ms-icon {
  top: 8px;
  left: 10px;
  font-size: 1rem;
  color: #00b0ff;
  margin: 0;
}
.pref-summary-card .sc-label {
  top: 10px;
  left: 30px; /* アイコン幅＋余白 */
  margin: 0;
  line-height: 1;
  font-size: .7rem;
  color: rgba(255,255,255,.6);
}
.pref-summary-card .sc-value {
  top: 30px;
  left: 10px;
  font-size: .8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px;
}


/* マップ側 */
.pref-mv-map {
  position: relative;
}
.pref-mv-map img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
  /*min-height: 320px;
  object-fit: cover;*/
  object-fit: contain;
}

/* ---- スティッキー目次ナビ ---- */
.pref-toc-bar {
  background: var(--navy);
  border-bottom: 1px solid rgba(0,176,255,.3);
  position: sticky;
  top: 0;
  z-index: 1;
}
.pref-toc-bar-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.pref-toc-bar-inner::-webkit-scrollbar { display: none; }
.pref-toc-bar a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 18px;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.08);
  transition: all .15s;
  text-decoration: none;
}
.pref-toc-bar a:hover {
  color: #00b0ff;
  background: rgba(0,176,255,.08);
}
.pref-toc-bar .ms-icon { font-size: .95rem; }


/* ---- メインレイアウト ---- */
.pref-main {
  background: #f4f7fb;
  padding: 10px 0 30px;
}
.pref-main-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- セクション共通 ---- */
.pref-section {
  background: #fff;
  border-radius: 16px;
  padding: 36px 40px;
  margin-bottom: 28px;
  box-shadow: 0 2px 16px rgba(10,22,40,.07);
  position: relative;
  overflow: hidden;
}
.pref-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--blue) 0%, var(--cyan) 100%);
}
.pref-section-h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8eef8;
}
.pref-section-h2 .ms-icon {
  color: var(--blue);
  font-size: 1.4rem;
  background: var(--off-white);
  padding: 6px;
  border-radius: 8px;
}
.pref-section-h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-light);
  margin: 28px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- ランキングブロック ---- */
/* ランキングブロック：カードと表を横並び */
.pref-rank-block {
  display: grid;
  grid-template-columns: auto 2fr;
  gap: 32px;
  align-items: start;
}
/* ランキングカード：PC縦並び */
.pref-rank-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  border-radius: 16px;
  padding: 24px 28px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  position: relative;
  overflow: hidden;
  min-width: 220px;
}
.pref-rank-hero::after {
  content: '';
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0,176,255,.15) 0%, transparent 70%);
  pointer-events: none;
}
.pref-rank-hero-label {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  letter-spacing: .1em;
text-shadow: 0 0 1px rgba(79,214,255,.5), 0 2px 6px rgba(0,0,0,.35);
}

.pref-rank-hero-pref {/*junnisuuuji  #00b0ff*/
  font-size: 1.2rem;
  font-weight: 800;
  /*color: #00b0ff;*/
 /*color: #4fd6ff;*/
 color: #fff;
  letter-spacing: .05em;
text-shadow: 0 0 1px rgba(79,214,255,.5), 0 2px 6px rgba(0,0,0,.35);
}

.pref-rank-zen {
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .08em;
}
.pref-rank-num-wrap {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
}
.pref-rank-num {
  font-size: 7rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.05em;
  line-height: 1;
}
.pref-rank-i {
  font-size: 1.8rem;
  font-weight: 900;
  color: rgba(255,255,255,.85);
}
.pref-rank-badge {
  display: inline-block;
  background: var(--danger);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
}

/* 関東ランキングテーブル */
.pref-region-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.pref-region-table th {
  background: var(--navy);
  color: rgba(255,255,255,.8);
  padding: 10px 6px;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.pref-region-table td {
  padding: 10px 6px;
  border-bottom: 1px solid #eef2f8;
  vertical-align: middle;
}
.pref-region-table .rk-num {
  font-weight: 900;
  font-size: 1rem;
  text-align: center;
  width: 36px;
  color: #333;
}
.pref-region-table .rk-sub {
  font-size: .8rem;
  color: #aaa;
  text-align: center;
}
.pref-region-table .rk-name { font-weight: 700; }
.pref-region-table .rk-level { font-weight: 700; white-space: nowrap; }
.pref-region-table .row-current {
  background: #fff8e1;
}
.pref-region-table .row-current td { font-weight: 700; }
.rank-note {
  font-size: .75rem;
  color: #aaa;
  margin-bottom: 12px;
}

/* ===== エリア別カラーオーバーライド ===== */
/* 東海　中国 #0277bd */
.pref-page.tokai, .pref-page.chugoku {
  --navy: #0277bd;
  --navy-mid: #0288d1;
  --navy-light: #039be5;
}
/* 近畿エリア */
.pref-page.kinki {
  --navy: #0a1628;
  --navy-mid: #103258;
  --navy-light: #16406f;
}
/* 四国 東北 #00796b */
.pref-page.shikoku, .pref-page.tohoku {
  --navy: #00796b;
  --navy-mid: #00897b;
  --navy-light: #009688;
}
/* 北海道　北陸・甲信越 九州・沖縄#00695c */
.pref-page.hokkaido, .pref-page.hokuriku-koshinetsu, .pref-page.kyushu {
  --navy: #00695c;
  --navy-mid: #00796b;
  --navy-light: #00897b;
}


/* ---- 特徴テキスト ---- */
.pref-feature-box {
  background: var(--off-white);
  border-radius: 10px;
  padding: 20px 24px;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--text);
}
.pref-hl {
  background: linear-gradient(transparent 55%, rgba(0,176,255,.25) 55%);
  font-weight: 700;
  padding: 0 2px;
}

/* ---- スポットカード ---- */
.spots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.spot-card {
  border-radius: 12px;
  padding: 16px 14px;
  border: 1px solid;
  transition: transform .15s, box-shadow .15s;
}
.spot-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.spot-danger {
  background: #fff0f3;
  border-color: #f48fb1;
}
.spot-river {
  background: #e8f4fe;
  border-color: #90caf9;
}
.spot-safe {
  background: #f1f8f1;
  border-color: #a5d6a7;
}
.spot-ms-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 8px;
}
.spot-danger .spot-ms-icon { color: #e53935; }
.spot-river .spot-ms-icon { color: #1565c0; }
.spot-safe .spot-ms-icon { color: #2e7d32; }
.spot-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a2f3a;
  margin-bottom: 4px;
  line-height: 1.3;
}
.spot-area {
  font-size: .72rem;
  color: #888;
  margin-bottom: 4px;
}
.spot-pollen {
  font-size: .75rem;
  font-weight: 600;
  color: #e53935;
}
.spot-period {
  font-size: .72rem;
  color: #888;
}
.spot-reason {
  font-size: .78rem;
  color: #555;
  line-height: 1.6;
}
.pref-spot-badge {
  display: inline-block;
  background: var(--off-white);
  color: var(--navy-light);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 1.0em;
  border: 1px solid #bbdefb;
}

/* ---- テーブル共通 ---- */
.pref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.pref-table th {
  background: var(--navy);
  color: rgba(255,255,255,.85);
  padding: 10px 6px;
  text-align: left;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: top;
}
.pref-table td {
  padding: 10px 6px;
  border-bottom: 1px solid #eef2f8;
  vertical-align: middle;
  line-height: 1.5;
}
.pref-table .row-current { background: #fff8e1; }
.pref-table .row-current td { font-weight: 700; }
.pref-table .lv-5, .pref-region-table .lv-5 { color: var(--danger); font-weight: 700; }
.pref-table .lv-4, .pref-region-table .lv-4 { color: var(--warning); font-weight: 700; }
.pref-table .lv-3, .pref-region-table .lv-3 { color: #f9a825; font-weight: 700; }
.pref-table .lv-2, .pref-region-table .lv-2 { color: #388e3c; font-weight: 700; }
.pref-table .lv-1, .pref-region-table .lv-1 { color: #1976d2; font-weight: 700; }

/* ---- クリニック ---- */
.clinic-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
.clinic-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: #fff;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: background .15s;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}
.clinic-btn:hover { background: var(--navy-light); }
.clinic-btn .ms-icon { color: #00b0ff; font-size: 1.2rem; }

/* noticeブロック：薄い緑 */
.notice {
  background: #f1f8f1;
  border-left: 3px solid #2e7d32;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .88rem;
  color: #333;
  line-height: 1.7;
}
.notice b{color: #2e7d32;}
/* 対策リスト：市販薬が効かない→薄い緑 */
.taisaku-warn {
  background: #f1f8f1 !important;
  border-left: 3px solid #2e7d32 !important;
}

/* ---- FAQ ---- */
.pref-faq-item {
  border: 1px solid #e8eef8;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.pref-faq-item summary {
  padding: 16px 20px;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  background: #f8faff;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
}
.pref-faq-item summary::before {
  content: 'Q';
  background: var(--blue);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
.pref-faq-item[open] summary { background: var(--off-white); }
.pref-faq-item > p {
  padding: 16px 20px;
  font-size: .9rem;
  line-height: 1.8;
  color: #444;
  border-top: 1px solid #e8eef8;
}

/* ---- 地域リンク ---- */
.pref-region-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pref-region-link {
  display: inline-block;
  background: var(--off-white);
  color: var(--blue);
  font-size: .82rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid #bbdefb;
  text-decoration: none;
  transition: all .15s;
}
.pref-region-link:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.pref-back-link {
  font-size: .82rem;
  color: var(--text-muted);
  margin-top: 10px;
  display: inline-block;
}

/* ---- SP対応 ---- */
@media(max-width:900px) {
  .pref-mv-inner {
    grid-template-columns: 1fr;
    padding: 25px 14px 0;
    gap: 16px;
  }
  .pref-summary-cards { grid-template-columns: repeat(3,1fr);}
  .kafun-info-event { margin-bottom: 0; }
  .pref-mv-map img {margin-bottom: 10px;}
  .pref-rank-block { grid-template-columns: 1fr; }
  .pref-rank-hero {
   position: relative;
   min-height: 120px;
  }
  .pref-rank-hero-label, .pref-rank-hero-pref,.pref-rank-zen,.pref-rank-num, .pref-rank-i,.pref-rank-badge {
  position: absolute;}
  .pref-rank-hero-label {top:10%;left:10%;font-size: 0.8rem;}
  .pref-rank-hero-pref {top: 25%;left:10%; font-size: 2rem;}
  .pref-rank-zen {top:25%;left:60%;}
  .pref-rank-num{top:18%;left:67%;font-size: 4.5rem;}
  .pref-rank-i{top:62%;left:80%;font-size: 1rem;}
  .pref-rank-badge{top:40%;left:40%;}

  .pref-section { padding: 24px 18px; }
  .spots-grid { grid-template-columns: repeat(3,1fr); gap: 10px; }
  .pref-toc-bar a { padding: 10px 12px; font-size: .7rem; }
  .pref-main-inner { padding: 0 12px; }

 .clinic-btns { grid-template-columns: 1fr; }
}
/* スポットセクション末尾マップ（赤枠部分のみ固定表示） */
/*.pref-spot-map-wrap {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1400 / 850;
}*/
.pref-spot-map-img {
 /* display: block;
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  top: -2%;/*MAPの表示開始位置指定。上端*/
  border-radius: 12px;
}
#calendar,#spots,#data,#local-food{scroll-margin-top:90px;}

#calendar .sp-only{color:#2EA8D5}

@media(max-width:680px) {
  .pref-mv-h1 {
  font-size:clamp(1.5rem, 1.6rem, 2.2rem);letter-spacing: -0.03rem;}
  .pref-mv-h1 i{font-size:1rem;}
  .pref-summary-card .ms-icon{font-size: .9rem;}
  .pref-summary-card .sc-label{font-size: .8rem;}
  .pref-summary-card .sc-value{font-size: .7rem;}

  .pref-rank-hero-label {top:10%;left:10%;font-size: 0.8rem;}
  .pref-rank-hero-pref {top: 30%;left:10%; font-size: 1.2rem;}
  .pref-rank-zen {top:10%;left:50%;}
  .pref-rank-num{top:29%;left:55%;font-size: 3.9rem!important;}
  .pref-rank-i{top:64%;left:80.5%;font-size: 0.9rem!important;}
  .pref-rank-badge{top:65%;left:10%;}

  .pref-section-h2 {font-size: 1.2rem; letter-spacing: -0.02rem;}
  .spots-grid { grid-template-columns: repeat(2,1fr); gap: 6px; }
.pref-spot-badge {
  padding: 2px;
  font-size: 0.9em;
}
.pref-table th {
  padding: 8px 6px;
  font-size: .7rem;
  letter-spacing: -0.002rem;
}
  .clinic-btns { grid-template-columns: 1fr; }
  .clinic-btn { width: 100%; white-space: normal; }
}

/* ---- 対策リスト ---- */
.taisaku-list {
  margin: 16px 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.taisaku-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: #f8faff;
  border-radius: 8px;
  border-left: 3px solid #1565c0;
}
.taisaku-item.taisaku-warn {
  background: #f1f8f1 !important;
  border-left-color: #2e7d32 !important;
}
.taisaku-icon {
  color: #1565c0;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.taisaku-icon--green { color: #2e7d32; }

/* ---- クリニックボタン chevron ---- */
.clinic-chevron {
  margin-left: auto;
  font-size: 1rem;
}

/* ---- スポットh3アイコン ---- */
.spot-h3-icon {
  font-size: 1.1em;
  vertical-align: middle;
}
.spot-h3-icon--danger { color: #e53935; }
.spot-h3-icon--safe   { color: #2e7d32; }

/* ---- テーブルスクロール ---- */
.table-scroll { overflow-x: auto; }

/* ---- 共通インフォグラフィック画像（imgタグ・4点座標固定） ---- */
.kafun-info-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 16px;
  position: relative;
}
/* ブロック1：気象条件 Y=0〜382 / 1498x382 → aspect-ratio固定 */
.kafun-info-weather {
  aspect-ratio: 1498 / 382;
}
/* ブロック2：食べ物 Y=383〜707 / 1498x324 */
.kafun-info-food {
  aspect-ratio: 1498 / 324;
}
/* ブロック3：生活イベント Y=708〜1050 / 1498x342 */
.kafun-info-event {
  aspect-ratio: 1498 / 342;
}
.kafun-info-wrap img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 0;
  display: block;
}
/* 各ブロックのtop位置：コンテナ幅基準（cqw）で比率固定 */
.kafun-info-weather img { top: 0; }
.kafun-info-food    img { top: calc(-376 / 1498 * 100cqw); }
.kafun-info-event   img { top: calc(-708 / 1498 * 100cqw); }
.kafun-info-wrap { container-type: inline-size; }

/* ---- 花粉症データセクション ---- */
.pref-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.pref-data-card {
  background: var(--off-white);
  border-radius: 10px;
  padding: 20px;
}
.pref-data-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: .05em;
}
.pref-data-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.pref-data-big {
  font-size: 3rem;
  font-weight: 900;
  color: var(--danger);
  line-height: 1;
}
.pref-data-sub {
  font-size: .82rem;
  color: #555;
  margin-bottom: 8px;
  line-height: 1.6;
}
.pref-data-source {
  font-size: .72rem;
  color: #aaa;
}

/* 棒グラフ */
.pref-bar-wrap { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.pref-bar-row { display: flex; align-items: center; gap: 8px; }
.pref-bar-name { font-size: .78rem; font-weight: 700; width: 36px; flex-shrink: 0; color: #555; }
.pref-bar-bg { flex: 1; background: #e0e0e0; border-radius: 4px; height: 14px; overflow: hidden; }
.pref-bar-fill { height: 100%; border-radius: 4px; transition: width .4s; }
.pref-bar-sugi { background: #4caf50; }
.pref-bar-hinoki { background: #ff9800; }
.pref-bar-total-fill { background: linear-gradient(90deg, #4caf50 55%, #ff9800 55%); }
.pref-bar-val { font-size: .78rem; font-weight: 700; color: #333; white-space: nowrap; }

/* ---- 旅行先カード ---- */
.travel-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0;
}
.travel-card {
  background: var(--off-white);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #bbdefb;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "rank icon"
    "dest dest"
    "reason reason";
  gap: 4px 8px;
}
.travel-rank{
  grid-area: rank;
  justify-self: start;
  align-self: center;
  font-size: .72rem;
  font-weight: 900;
  color: var(--blue);
  background: #fff;
  border: 1px solid #bbdefb;
  border-radius: 20px;
  padding: 2px 8px;
  line-height: 1;
}
.travel-icon{
  grid-area: icon;
  justify-self: end;
  align-self: center;
  font-size: 1.3rem;
  color: var(--blue);
  line-height: 1;
}
.travel-dest{
  grid-area: dest;
  font-size: .95rem;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.3;
}
.travel-reason{
  grid-area: reason;
  font-size: .75rem;
  color: #666;
  line-height: 1.5;
}

/* ---- 地域リンク3層 ---- */
.pref-region-sublabel {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .08em;
  margin: 12px 0 6px;
}
.pref-region-link--top {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.pref-region-link--top:hover {
  background: var(--navy-light);
  border-color: var(--navy-light);
}
.pref-region-link--current {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  pointer-events: none;
}

/* SP対応 */
@media(max-width:900px) {
  .pref-data-grid { grid-template-columns: 1fr; }
}

/* ---- 気候テーブル ---- */
.climate-table-wrap { overflow-x: auto; margin: 16px 0; }
.climate-table .row-highlight { background: #fff8f0; }
.climate-danger { color: var(--danger); font-weight: 700; }
.climate-warn { color: var(--warning); font-weight: 700; }
.climate-note {
  background: var(--off-white);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .82rem;
  color: #555;
  line-height: 1.7;
  margin-top: 12px;
}

/* ---- 地元食材カード ---- */
.local-food-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0;
}
.local-food-card {
  background: var(--off-white);
  border-radius: 10px;
  padding: 16px;
  border-left: 3px solid #4caf50;
}
.local-food-name {
  font-size: 1rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 4px;
}
.local-food-area {
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.local-food-effect {
  font-size: .82rem;
  color: #555;
  line-height: 1.6;
}

/* ---- 舌下免疫療法 ---- */
.sublingual-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0;
}
.sublingual-card {
  border-radius: 10px;
  padding: 16px;
}
.sublingual-card--info  { background: #e3f2fd; border-left: 3px solid #1565c0; }
.sublingual-card--data  { background: #f3e5f5; border-left: 3px solid #7b1fa2; }
.sublingual-card--merit { background: #e8f5e9; border-left: 3px solid #2e7d32; }
.sublingual-title {
  font-size: .85rem;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 10px;
}
.sublingual-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sublingual-list li {
  font-size: .80rem;
  color: #444;
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.sublingual-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 900;
}

/* SP対応 */
@media(max-width:900px) {
  .local-food-grid { grid-template-columns: 1fr 1fr; }
  .sublingual-grid { grid-template-columns: 1fr; }
}
@media(max-width:680px) {
.pref-rank-i {font-size: 1.7rem;}
  .travel-cards { grid-template-columns: 1fr; }
  .local-food-grid { grid-template-columns: 1fr; }
}

/* ---- MVマップ上のテキスト重ね ---- */
.pref-mv-map {
  position: relative;
}
.pref-mv-map-title-wrap,.pref-mv-map-title,.pref-mv-map-sub {
  position: absolute;}
.pref-mv-map-title-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 27.5%;
  pointer-events: none;
}
.pref-mv-map-title {
  top: 6%;
  left: 2%;
  font-size: 8cqw;
  font-weight: 900;
  color: #1a3a7c;
  letter-spacing: .05em;
  line-height: 1;
}
.pref-mv-map-sub {
  top: 20%;
  right: 4%;
  font-size:3.5cqw;
  color: #2a4a8c;
  font-weight:700;
  letter-spacing:.08em;
}
.pref-mv-map-title,.pref-mv-map-sub {text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
}
.pref-mv-map { container-type: inline-size; }


.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* ===== スティッキーナビ 横はみ出し修正（append-only） ===== */
/* 項目を圧縮させず自然幅を維持 → inner の overflow-x:auto による横スクロールを有効化（PC/スマホ共通） */
.pref-toc-bar a { flex-shrink: 0; }

/* ===== スティッキーナビ 4項目を幅一杯に均等配置（append-only / 上の flex-shrink を上書き） ===== */
/* flex:1 で各項目が伸びて等幅化（1100px のバー幅を均等に埋める）。justify-content:center で中身を中央寄せ */
.pref-toc-bar a { flex: 1; justify-content: center; }












/* ==========================================
   花粉マップ（都道府県MV）
========================================== */

/* 右カラム */
.pref-mv-right{
  /*min-width:550px;*/
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}

/* マップ本体 */
.pollen-map{
  position:relative;
  width:520px;
  max-width:100%;
  aspect-ratio:1536 / 1024;
  border-radius:12px;
  overflow:hidden;
}
.map-title{
  fill:#1a3a7c;
  font-size:100px;
  font-weight:900;
  stroke-width:8px;
  paint-order:stroke;
  text-anchor:start;
}
.map-subtitle{
  fill:#2a4a8c;
  font-size:42px;
  font-weight:900;
  stroke-width:6px;
  paint-order:stroke;
}
.map-title,.map-subtitle{
text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
}
.map-silhouette{
  fill:#85bf43;
  stroke:#fff;
  stroke-width:6;
}
.map-base{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  border-radius:12px;
filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 4px 10px rgba(0,0,0,.12));
}

.map-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
  overflow:visible;
}

/* 半透明花粉ゾーン */
.zone{
  opacity:.23;
  filter:blur(24px);
}
.zone-core{
  opacity:.6;
  filter:blur(25px);
}
.zone-red{fill:#d50000;}
.zone-orange{fill:#ff9800;}

/* エリア見出し */
.area-title rect{
  fill:rgba(0,0,0,.45);
  rx:40;
}

.area-title text{
  fill:#fff;
  font-size:42px;
  font-weight:900;
  text-anchor:middle;
  dominant-baseline:middle;
}

/* 飛散レベル */
.level{
  fill:#fff;
  font-size:120px;
  font-weight:900;
  text-anchor:middle;
  dominant-baseline:middle;
}

/* スポット文字 */
.spot-text{
  fill:#d50000;
  font-size:60px;
  font-weight:900;
  stroke:#fff;
  stroke-width:14px;
  paint-order:stroke;
  text-anchor:middle;
  dominant-baseline:middle;
}

/* リーダー線 */
.leader-line{
  stroke:#fff;
  stroke-width:6px;
  fill:none;
}

/* 下部ラベル */
.map-legend{
  position: absolute;
  bottom:3%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
  width:100%;
  max-width: 620px;
}

.map-legend > span{
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
  flex-shrink:0;
}
/* スポット文字 */
.spot-text{
  fill:#d50000;
  font-size:60px;
  font-weight:900;
  stroke:#fff;
  stroke-width:14px;
  paint-order:stroke;
  dominant-baseline:middle;
  text-anchor:start;
}

/* ！バッジ */
.spot-badge-circle{
  fill:#d50000;
  stroke:#fff;
  stroke-width:2px;
}

.spot-badge-text{
  fill:#fff;
  font-size:36px;
  font-weight:900;
  text-anchor:middle;
  dominant-baseline:middle;
}


.legend-red{
  background:#d50000;
  color:#fff;
}

.legend-orange{
  background:#e6b400;
  color:#fff;
}

.legend-yellow{
  background:#e6b400;
  color:#fff;
}

.legend-spot{
  background:#fff;
  color:#111;
  border:2px solid #e6e6e6;
}
.spot-icon{
  display:inline-flex; 
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  background:#d50000;
  color:#fff;
  border-radius:50%;
  flex-shrink:0;
  margin-right:10px;
  line-height:1;
}

/* SP */
@media (max-width:900px){

  .pref-mv-right{
    width:100%;
    margin-top:24px;
  }

  .pollen-map{
    width:100%;
  }

  .map-legend{
    width:100%;
    gap:6px;
    bottom:2%;
  }

  .map-legend > span{
    height:24px;
    padding:0 8px;
    font-size:12px;
  }

  .spot-icon{
    width:16px;
    height:16px;
    margin-right:4px;
    font-size:10px;
  }

}
/* SP */
@media (max-width:680px){
.map-legend{
    gap:4px;
    bottom:1%;
    flex-wrap:nowrap;
  }
/* スポット文字 */
.spot-text{
  font-size:75px;
}
/* ！バッジ！ */
.spot-badge-text{
  font-size:50px;
}
  .map-legend > span{
    height:18px;
    padding:0 5px;
    font-size:9px;
  }

  .spot-icon{
   width:12px;
    height:12px;
    margin-right:3px;
    font-size:10px;
  }

}

/*****************
東京以降新MAP

********************/
.pollen-map img{
  max-width:none;
  display:block;
  border-radius:0;
  box-shadow:none;
}

.map-bg,
.map-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.map-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.map-base{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  object-fit:contain;
}

.map-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}


/* ===== 環境省 花粉多発エリア (append-only) ===== */
.envgov-source{font-size:.78rem;color:#888;margin:4px 0 14px;}
.envgov-intro{background:#f5fbf7;border-left:5px solid #145A32;border-radius:0 8px 8px 0;padding:16px 20px;margin:16px 0;font-size:.9rem;line-height:1.85;color:#1a3d28;}
.envgov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0;}
.envgov-card{background:#fff;border:1px solid #a9dfbf;border-radius:10px;padding:16px 18px;}
.envgov-card h3{margin:0 0 10px;font-size:1rem;font-weight:900;color:#145A32;border-bottom:2px solid #e8f5ec;padding-bottom:8px;}
.envgov-spots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.envgov-spot{background:#f5fbf7;border:1px solid #c8e6c9;border-radius:999px;padding:4px 11px;font-size:.8rem;color:#1a3d28;font-weight:600;}
.envgov-note{font-size:.8rem;line-height:1.7;color:#5a6a4a;background:#fffdf3;border:1px dashed #e0c36a;border-radius:6px;padding:8px 11px;}
@media(max-width:900px){.envgov-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.envgov-grid{grid-template-columns:1fr;}}