/* ─────────────────────────────────
   AREA ページ (/area/) — cpriver
───────────────────────────────── */
.cprv-discovery {
  max-width: 1500px;
  margin: 0 auto;
  color: #18324E;
  font-family: var(--font-noto-sans-jp, 'Noto Sans JP'), sans-serif;
}
.cprv-discovery__hero {
  display: grid;
  grid-template-columns: 290px minmax(480px, 1fr) 320px;
  gap: 22px;
  align-items: start;
  padding: 32px 32px 28px;
  border-bottom: 1px solid #DCE6ED;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%);
}
.cprv-discovery__intro {
  padding-top: 12px;
}
.cprv-discovery__section-head span {
  color: #003C7E;
  font-size: clamp(9px, 0.9vw, 10px);
  font-weight: 800;
  letter-spacing: 0.16em;
}
.cprv-discovery__title {
  margin: 12px 0 14px;
  color: #003C7E;
  font-size: clamp(28px, 2.35vw, 36px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.45;
}
.cprv-discovery__lead {
  margin: 0;
  color: #526A80;
  font-size: clamp(11px, 0.9vw, 12px);
  line-height: 1.9;
  text-wrap: pretty;
}
.cprv-discovery__map {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 53% 52%, #E8F4FA, transparent 48%),
    linear-gradient(180deg, #F8FBFD, #EDF7FB);
}
.cprv-discovery__map #map {
  width: 100%;
}
.cprv-discovery__map #map svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
}
.cprv-discovery__map .geolonia-svg-map .prefecture {
  fill: #B8D3A9;
  stroke: #FFFFFF;
  stroke-width: 1.35;
  cursor: pointer;
  transition: fill 0.16s ease, filter 0.16s ease;
}
.cprv-discovery__map .geolonia-svg-map .prefecture:hover {
  fill: #003C7E;
  filter: drop-shadow(0 3px 5px rgba(7, 56, 121, 0.24));
}
.cprv-discovery__map .geolonia-svg-map .prefecture.is-linked-active {
  fill: #003C7E;
  filter: drop-shadow(0 3px 5px rgba(7, 56, 121, 0.24));
}
.cprv-discovery__region-panels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cprv-discovery__region-panel {
  position: absolute;
  width: 150px;
  height: auto;
  box-sizing: border-box;
  padding: 10px 10px 6px;
  border: 1px solid rgba(0, 60, 126, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 14px rgba(9, 40, 95, 0.08);
  pointer-events: auto;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cprv-discovery__region-panel.is-active {
  border-color: rgba(0, 60, 126, 0.55);
  box-shadow: 0 7px 18px rgba(9, 40, 95, 0.15);
}
.cprv-discovery__region-panel h2 {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 0 3px;
  color: #003C7E;
  font-size: clamp(9px, 0.9vw, 10px);
  font-weight: 800;
  line-height: 1.4;
}
/* トップ地図ピンと同じアイコンを見出し左に配置 */
.cprv-discovery__region-panel-pin {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.cprv-discovery__region-panel > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 3px;
}
.cprv-discovery__region-panel a {
  min-width: 0;
  color: #405b75;
  font-size: clamp(9px, 0.9vw, 10px);
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
}
.cprv-discovery__region-panel a:hover,
.cprv-discovery__region-panel a:focus-visible,
.cprv-discovery__region-panel a.is-active {
  color: #003C7E;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cprv-discovery__region-panel[data-region="hokkaido"] { top: 2%; right: 0; }
.cprv-discovery__region-panel[data-region="kanto"] { top: 35%; right: 0; }
.cprv-discovery__region-panel[data-region="chubu"] { right: 0; bottom: 7%; }
.cprv-discovery__region-panel[data-region="kinki"] { right: 27%; bottom: -1%; }
.cprv-discovery__region-panel[data-region="chugoku-shikoku"] { bottom: 4%; left: -172px; }
.cprv-discovery__region-panel[data-region="kyusyu"] { top: 43%; left: -172px; }
.cprv-discovery__pref-popup {
  position: absolute;
  z-index: 3;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
  border: 1px solid #003C7E;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 14px rgba(7, 56, 121, 0.16);
  color: #003C7E;
  white-space: nowrap;
  /* カーソルの右に表示し、ポインタは奪わない（県の切替を安定させる） */
  transform: translate(24px, -50%);
  pointer-events: none;
}
/* カーソル方向（左）を指す吹き出しのしっぽ。外枠(::before)＋白塗り(::after)の2枚重ね */
.cprv-discovery__pref-popup::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #003C7E;
  transform: translateY(-50%);
}
.cprv-discovery__pref-popup::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
  transform: translateY(-50%);
}
.cprv-discovery__pref-popup strong {
  color: #003C7E;
  font-size: clamp(12px, 0.9vw, 13px);
}
.cprv-discovery__pref-popup-meta {
  display: grid;
  justify-items: end;
  padding-left: 10px;
  border-left: 1px solid #DBE5ED;
}
.cprv-discovery__pref-popup-label {
  color: #6C8092;
  font-size: clamp(7px, 0.75vw, 8px);
  font-weight: 700;
}
.cprv-discovery__pref-popup-count {
  color: #003C7E;
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 700;
}
.cprv-discovery__featured {
  overflow: hidden;
  border: 1px solid #DCE6ED;
  border-radius: 11px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(22, 60, 88, 0.06);
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.26s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.cprv-discovery__featured--exiting {
  opacity: 0;
  transform: translateX(-24px);
}
.cprv-discovery__featured--entering {
  opacity: 0;
  transform: translateX(24px);
  transition: none;
}
.cprv-discovery__featured-label {
  padding: 13px 15px;
  color: #003C7E;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
}
.cprv-discovery__featured-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #EDF3F7;
}
.cprv-discovery__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.cprv-discovery__featured-image:hover img {
  transform: scale(1.025);
}
.cprv-discovery__featured-body {
  padding: 14px 15px 16px;
}
.cprv-discovery__location {
  color: #003C7E;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 700;
}
.cprv-discovery__featured-title {
  margin: 6px 0 9px;
  color: #18324E;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 800;
  line-height: 1.5;
}
.cprv-discovery__featured-note {
  display: -webkit-box;
  overflow: hidden;
  margin: 11px 0 0;
  color: #5F7284;
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.8;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.cprv-discovery__featured-cta {
  display: block;
  margin-top: 13px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #003C7E;
  color: #FFFFFF;
  font-size: clamp(13px, 1.1vw, 14px);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.cprv-discovery__featured-cta:hover {
  background: #003C7E;
}
.cprv-discovery__featured--empty {
  padding: 24px;
}
.cprv-discovery__projects {
  padding: 28px 32px 42px;
  background: #FBFDFE;
}
.cprv-discovery__section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cprv-discovery__section-title {
  margin: 4px 0 5%;
  color: #003C7E;
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 600;
}
.cprv-discovery__section-link {
  color: #003C7E;
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 700;
  text-decoration: none;
}
.cprv-discovery__project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.cprv-discovery__project-card {
  display: grid;
  grid-template-columns: 130px 1fr;
  overflow: hidden;
  border: 1px solid #DBE5ED;
  border-radius: 9px;
  background: #FFFFFF;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cprv-discovery__project-card:hover {
  box-shadow: 0 12px 24px rgba(18, 57, 87, 0.1);
  transform: translateY(-3px);
}
.cprv-discovery__project-image {
  display: block;
  overflow: hidden;
  background: #EDF3F7;
}
.cprv-discovery__project-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 116px;
  object-fit: cover;
}
.cprv-discovery__project-body {
  padding: 9px 11px;
}
.cprv-discovery__project-place {
  color: #003C7E;
  font-size: clamp(11px, 0.95vw, 12px);
  font-weight: 700;
}
.cprv-discovery__project-heading {
  margin: 3px 0 6px;
  line-height: 1.45;
}
.cprv-discovery__project-title {
  color: #18324E;
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 600;
  line-height: 1.45;
  text-decoration: none;
}
.cprv-discovery__project-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #EDF1F4;
  color: #6C8092;
  font-size: clamp(10px, 0.8vw, 11px);
}
.cprv-discovery__project-stat {
  white-space: nowrap;
}
.cprv-discovery__project-stat-label {
  margin-right: 4px;
}
.cprv-discovery__project-stat-value {
  color: #003C7E;
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 800;
}
.cprv-discovery__empty {
  padding: 24px;
  border: 1px dashed #CBD8E3;
  border-radius: 8px;
  color: #64788E;
  font-size: clamp(10px, 0.9vw, 11px);
  text-align: center;
}
@media (max-width: 1200px) {
  .cprv-discovery__hero {
    grid-template-columns: 230px minmax(440px, 1fr);
  }
  .cprv-discovery__project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .cprv-discovery__hero {
    grid-template-columns: 1fr;
    padding: 24px 18px;
  }
  .cprv-discovery__intro {
    padding-top: 0;
  }
  .cprv-discovery__map {
    min-height: auto;
  }
  .cprv-discovery__featured {
    display: grid;
    grid-template-columns: 220px 1fr;
  }
  .cprv-discovery__projects {
    padding: 24px 18px 36px;
  }
}
@media (max-width: 600px) {
  .cprv-discovery__hero {
    padding: 20px 12px;
  }
  .cprv-discovery__title {
    font-size: clamp(21px, 2.6vw, 27px);
  }
  .cprv-discovery__map #map svg {
    max-height: none;
  }
  .cprv-discovery__pref-popup {
    width: auto;
  }
  .cprv-discovery__featured {
    display: block;
  }
  .cprv-discovery__project-grid {
    grid-template-columns: 1fr;
  }
  .cprv-discovery__project-card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
  .cprv-discovery__project-card > a {
    height: 100%;
    aspect-ratio: auto;
  }
  .cprv-discovery__section-title {
    font-size: clamp(18px, 2vw, 20px);
  }
}

/* 添付デザインに寄せた地図中心レイアウト */
.cprv-discovery {
  width: calc(100% - 92px);
  max-width: 1340px;
  margin-right: auto;
  margin-left: auto;
  background: #fff;
}
.cprv-discovery__hero {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  padding: 14px 20px 10px;
  border-bottom: 0;
  background:
    radial-gradient(circle at 48% 45%, rgba(221, 241, 251, 0.75), transparent 38%),
    linear-gradient(180deg, #fff 0%, #f7fbfd 100%);
}
.cprv-discovery__explorer {
  position: relative;
  min-width: 0;
  min-height: 525px;
}
.cprv-discovery__intro {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 300px;
  padding: 20px 10px 0 16px;
}
.cprv-discovery__title {
  margin: 0 0 14px;
  color: #003C7E;
  font-size: clamp(30px, 2.4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
}
.cprv-discovery__title span {
  display: block;
  font-weight: 800;
  white-space: nowrap;
}
/* 「自治体から選ぶ」の上に置く小見出し (同色・20px) */
.cprv-discovery__title-pre {
  font-size: clamp(13px, 1.15vw, 15px);
  letter-spacing: 0;
  padding-left: 4px;
}
.cprv-discovery__lead {
  max-width: none;
  color: #334d6c;
  font-size: clamp(11px, 0.85vw, 13px);
  line-height: 1.85;
  white-space: nowrap;
}
.cprv-discovery__map {
  position: absolute;
  top: 0;
  left: 19%;
  right: auto;
  width: 62%;
  min-height: 525px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  transform: none;
}
.cprv-discovery__map #map {
  position: static;
  left: auto;
  width: 100%;
}
.cprv-discovery__map #map svg {
  max-height: 525px;
  transform: none;
}
.cprv-discovery__map .geolonia-svg-map .prefecture {
  fill: #b7d2aa;
  stroke-width: 1.15;
}
/* #map を同心円リングより前面へ */
.cprv-discovery__map #map {
  position: relative;
  z-index: 1;
}
/* 同心円の装飾 (トップページ地図と同様) */
.cprv-discovery__map-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cprv-discovery__map-rings .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 幅基準で高さを揃えて正円にする (コンテナが非正方形でも歪まない) */
  aspect-ratio: 1 / 1;
  height: auto;
  border: 1px dashed rgba(75, 175, 200, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: map-ring-ripple 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}
.cprv-discovery__map-rings .ring-1 { width: 28%; animation-delay: 0s; }
.cprv-discovery__map-rings .ring-2 { width: 44%; animation-delay: 0.9s; }
.cprv-discovery__map-rings .ring-3 { width: 60%; animation-delay: 1.8s; }
.cprv-discovery__map-rings .ring-4 {
  width: 76%;
  border-color: rgba(75, 175, 200, 0.18);
  animation-delay: 2.7s;
}
@media (prefers-reduced-motion: reduce) {
  .cprv-discovery__map-rings .ring { animation: none; opacity: 1; }
}
.cprv-discovery__region-panels {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}
.cprv-discovery__region-panel {
  position: absolute;
  width: 146px;
}
.cprv-discovery__region-panel[data-region="chugoku-shikoku"] {
  top: 43%;
  right: 80%;
  left: auto;
  /* 基本定義の bottom: 4% を打ち消す (top と両指定で高さが伸びるため) */
  bottom: auto;
}
.cprv-discovery__region-panel[data-region="kyusyu"] {
  top: 72%;
  right: 80%;
  left: auto;
}
.cprv-discovery__region-panel[data-region="hokkaido"] {
  top: 31%;
  right: auto;
  left: 67%;
}
.cprv-discovery__region-panel[data-region="kanto"] {
  top: 58%;
  right: auto;
  left: 67%;
}
.cprv-discovery__region-panel[data-region="chubu"] {
  right: auto;
  bottom: 46%;
  left: 29%;
}
.cprv-discovery__region-panel[data-region="kinki"] {
  z-index: 2;
  right: 37%;
  bottom: 0;
}
.cprv-discovery__pref-popup {
  grid-auto-flow: column;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 6px 11px;
  border: 1px solid #003C7E;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(9, 40, 95, 0.18);
  /* カーソルの右に表示し、ポインタは奪わない（県の切替を安定させる） */
  transform: translate(24px, -50%);
  pointer-events: none;
}
/* カーソル方向（左）を指す吹き出しのしっぽ。外枠(::before)＋白塗り(::after)の2枚重ね */
.cprv-discovery__pref-popup::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #003C7E;
  transform: translateY(-50%);
}
.cprv-discovery__pref-popup::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
  transform: translateY(-50%);
}
.cprv-discovery__pref-popup strong {
  font-size: clamp(12px, 0.9vw, 13px);
  white-space: nowrap;
}
.cprv-discovery__pref-popup-meta {
  display: grid;
  justify-items: end;
  padding-left: 10px;
  border-left: 1px solid #dce5ed;
  white-space: nowrap;
}
.cprv-discovery__pref-popup-label {
  font-size: clamp(7px, 0.75vw, 8px);
  white-space: nowrap;
}
.cprv-discovery__pref-popup-count {
  font-size: clamp(12px, 1.15vw, 14px);
  white-space: nowrap;
}
.cprv-discovery__featured {
  align-self: stretch;
  border-radius: 8px;
  box-shadow: none;
}
.cprv-discovery__featured-label {
  padding: 12px 13px;
  border-bottom: 1px solid #e0e7ee;
  font-size: clamp(13px, 1.2vw, 16px);
}
.cprv-discovery__featured-image {
  margin: 10px 11px 0;
  border-radius: 6px;
  /* プロジェクト画像の原寸は 3:2 (960x640)。横長比だと上下がトリミングされるため合わせる */
  aspect-ratio: 3 / 2;
}
.cprv-discovery__featured-body {
  padding: 10px 13px 12px;
}
.cprv-discovery__featured-title {
  margin: 5px 0 8px;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 800;
  line-height: 1.45;
}
.cprv-discovery__featured-note {
  margin-top: 9px;
  font-size: clamp(12px, 1vw, 14px);
  -webkit-line-clamp: 2;
}
.cprv-discovery__featured-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #e0e7ee;
  border-radius: 8px;
  background: #fbfdff;
}
.cprv-discovery__featured-stat-label {
  color: #718297;
  font-size: clamp(10px, 0.9vw, 12px);
}
.cprv-discovery__featured-stat-value {
  margin: 2px 0 0;
  color: #003C7E;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 800;
}
.cprv-discovery__featured-cta {
  margin-top: 9px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #003C7E;
}
.cprv-discovery__projects {
  margin: 0 20px 18px;
  padding: 30px 34px 32px;
  border: 1px solid #dce5ed;
  border-radius: 8px;
  background: #fff;
}
/* トップページの「注目の自治体・プロジェクト」では白背景・枠線を出さない */
.cprv-discovery__projects--plain {
  background: transparent;
  border: none;
  border-radius: 0;
}
.cprv-discovery__section-head {
  margin-bottom: 10px;
}
.cprv-discovery__section-title {
  font-size: clamp(18px, 1.8vw, 20px);
  font-weight: 600;
  margin-bottom: 5%;
}
.cprv-discovery__project-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
@media (max-width: 1250px) {
  .cprv-discovery {
    width: calc(100% - 76px);
    margin-right: auto;
    margin-left: auto;
  }
  .cprv-discovery__hero {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
  .cprv-discovery__project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cprv-discovery__region-panel {
    padding: 6px 7px 7px;
  }
  .cprv-discovery__region-panel h2 {
    font-size: clamp(8px, 0.75vw, 9px);
  }
  .cprv-discovery__region-panel a {
    font-size: clamp(9px, 0.9vw, 10px);
  }
  .cprv-discovery__explorer {
    min-height: 0;
  }
  .cprv-discovery__intro {
    position: static;
    width: auto;
  }
  .cprv-discovery__map {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: auto;
  }
  .cprv-discovery__region-panels {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    pointer-events: auto;
  }
  .cprv-discovery__region-panel,
  .cprv-discovery__region-panel[data-region] {
    position: static;
    width: 150px;
  }
}
@media (max-width: 1000px) {
  .cprv-discovery__hero {
    grid-template-columns: 1fr;
  }
  .cprv-discovery__explorer {
    display: block;
    min-height: 0;
  }
  .cprv-discovery__intro {
    position: static;
    width: auto;
  }
  .cprv-discovery__map {
    position: relative;
    inset: auto;
    min-height: auto;
    transform: none;
  }
  .cprv-discovery__map #map {
    position: static;
    left: auto;
    width: 100%;
  }
  .cprv-discovery__map #map svg {
    max-height: 525px;
    transform: none;
  }
  .cprv-discovery__featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 250px 1fr;
  }
  .cprv-discovery__featured-label {
    grid-column: 1 / -1;
  }
  .cprv-discovery__project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cprv-discovery__region-panels {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 150px);
    justify-content: center;
    gap: 7px;
    margin-top: 8px;
    pointer-events: auto;
  }
  .cprv-discovery__region-panel,
  .cprv-discovery__region-panel[data-region] {
    position: static;
    width: 150px;
  }
}
@media (max-width: 760px) {
  .cprv-discovery {
    width: 100%;
    margin-right: 0;
  }
  .cprv-discovery__hero {
    grid-template-columns: 1fr;
    padding: 14px 8px 10px;
  }
  .cprv-discovery__intro {
    padding: 8px 4px 0;
  }
  .cprv-discovery__lead {
    white-space: normal;
  }
  .cprv-discovery__map {
    min-height: auto;
    transform: none;
  }
  /* 都道府県ホバーで切り替わる「◯◯県の注目プロジェクト」は
     タッチ端末では切り替え手段が無く場所だけ取るので SP では出さない（トップのみ） */
  .cprv-discovery__featured {
    grid-column: auto;
    display: block;
  }
  .cprv-discovery--top .cprv-discovery__featured {
    display: none;
  }
  .cprv-discovery__projects {
    margin: 0 6px 14px;
    padding: 12px 10px;
  }
  /* 「注目の自治体・プロジェクト」は 2 列。カード内も 1 段小さくする */
  .cprv-discovery__project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cprv-discovery__project-body { padding: 7px 8px; }
  .cprv-discovery__project-place { font-size: 11px; }
  .cprv-discovery__project-heading { margin: 2px 0 4px; }
  .cprv-discovery__project-title { font-size: 13px; line-height: 1.4; }
  .cprv-discovery__project-stats {
    gap: 2px 8px;
    margin-top: 6px;
    padding-top: 5px;
    font-size: 10px;
  }
  .cprv-discovery__project-stat-value { font-size: 11px; }
  /* 地域カード: 2 列のまま画面幅いっぱいに広げ、余白を削って文字とタップ領域を稼ぐ。
     150px 固定だと 336px 幅の画面で両脇が 15px ずつ死んでいた。 */
  .cprv-discovery__region-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
  }
  .cprv-discovery__region-panel,
  .cprv-discovery__region-panel[data-region] {
    width: auto;
    padding: 8px 8px 6px;
  }
  .cprv-discovery__region-panel h2 {
    gap: 4px;
    margin-bottom: 4px;
    font-size: 13px;
  }
  .cprv-discovery__region-panel-pin { width: 14px; height: 14px; }
  /* 県名は 13px にすると 3 列では「鹿児島県」等 4 文字が収まらないので 2 列へ */
  .cprv-discovery__region-panel > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px 4px;
  }
  .cprv-discovery__region-panel a {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0 2px;
    font-size: 13px;
  }
}

/* 旧 /area/ 用の oem-base/assets/css/area.css が @media(max-width:960px) で
   #map { display: none } にしているため、トップの都道府県マップまで SP で消える。
   ID セレクタ(1,0,0)なのでクラス2つ(1,1,0)で上書きしてトップだけ表示を戻す。 */
@media (max-width: 960px) {
  .cprv-discovery--top .cprv-discovery__map #map { display: block; }
}

/* トップページでは cprv-discovery を全幅表示（中央寄せ・最大幅の制約を解除）。
   全ブレークポイントの width 指定より後に置いて上書きする。 */
.cprv-discovery--top {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.cprv-area {
  max-width: 1340px;
  margin: 0 auto;
  padding: 24px 32px 64px;
  font-family: var(--font-inter, 'Inter'), var(--font-noto-sans-jp, 'Noto Sans JP'), sans-serif;
  color: #1F2937;
  background:
    radial-gradient(1200px 320px at 100% 0%, rgba(37, 99, 235, 0.06), transparent 60%),
    radial-gradient(900px 260px at 0% 0%, rgba(37, 99, 235, 0.05), transparent 60%);
}
.cprv-area__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: end;
  margin-bottom: 28px;
}
.cprv-area__title {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  color: #0B2D7A;
}
.cprv-area__lead {
  font-size: clamp(13px, 1.2vw, 14px);
  color: #4B5563;
  line-height: 1.7;
  margin: 0;
}
/* /lg/ トップの目的説明テキスト（ヘッダー直下） */
.cprv-area__intro {
  background: #F0F5FF;
  border: 1px solid #DBE5F5;
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 28px;
}
.cprv-area__intro p {
  margin: 0 0 10px;
  font-size: clamp(13px, 0.6vw + 0.55rem, 14px);
  color: #324155;
  line-height: 1.9;
}
.cprv-area__intro p:last-child {
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .cprv-area__intro {
    padding: 16px 16px;
  }
}
.cprv-area__search-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 18px 22px;
  min-width: 320px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}
.cprv-area__search-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.1vw, 13px);
  color: #4B5563;
  margin-bottom: 10px;
}
.cprv-area__search-card-label svg { color: #2563EB; }
.cprv-area__search-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: #2563EB;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 10px;
  transition: background 0.2s;
}
.cprv-area__search-card-cta:hover { background: #1E4ED8; }

.cprv-area__tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  background: #F1F5F9;
  border-radius: 14px;
  padding: 6px;
  margin-bottom: 24px;
}
.cprv-area__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 12px 8px;
  border-radius: 10px;
  font-size: clamp(12px, 1.15vw, 14px);
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.cprv-area__tab:hover { background: rgba(255, 255, 255, 0.7); }
.cprv-area__tab.is-active {
  background: #2563EB;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
.cprv-area__tab.is-active .cprv-area__tab-icon { color: #fff; }
.cprv-area__tab-icon { display: inline-flex; align-items: center; }

.cprv-area__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
.cprv-area__map {
  background:
    radial-gradient(ellipse at 50% 0%, #f1f7fc 0%, transparent 60%),
    linear-gradient(180deg, #eaf3fb 0%, #d6e8f5 100%);
  border: 1px solid #cfe0ef;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(15, 76, 129, 0.08);
}
.cprv-area__map-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #EFF6FF;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  color: #1E3A8A;
}
.cprv-area__map-hint svg { color: #2563EB; flex-shrink: 0; margin-top: 2px; }
.cprv-area__map-hint strong { display: block; font-size: clamp(13px, 1.15vw, 14px); font-weight: 700; margin-bottom: 2px; }
.cprv-area__map-hint p { margin: 0; font-size: clamp(11px, 1vw, 12px); color: #475569; line-height: 1.5; }
.cprv-area__map-canvas {
  position: relative;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cprv-area__map-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cprv-area__map-rings .ring {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1 / 1;
  height: auto;
  border: 1px dashed rgba(75, 175, 200, 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: map-ring-ripple 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}
.cprv-area__map-rings .ring-1 { width: 28%; animation-delay: 0s; }
.cprv-area__map-rings .ring-2 { width: 44%; animation-delay: 0.9s; }
.cprv-area__map-rings .ring-3 { width: 60%; animation-delay: 1.8s; }
.cprv-area__map-rings .ring-4 {
  width: 76%;
  border-color: rgba(75, 175, 200, 0.18);
  animation-delay: 2.7s;
}
.cprv-area__map-canvas #map {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
}
.cprv-area__map-canvas #map svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 720px;
}
/* /lg/ の都道府県地図を /area/(cprv-discovery__map) と同じ配色に統一
   （SVG 既定の黄緑をやめ、セージ緑 + 紺ホバーに） */
.cprv-area__map .geolonia-svg-map .prefecture {
  fill: #b7d2aa;
  stroke: #FFFFFF;
  stroke-width: 1.15;
  cursor: pointer;
  transition: fill 0.16s ease, filter 0.16s ease;
}
.cprv-area__map .geolonia-svg-map .prefecture:hover,
.cprv-area__map .geolonia-svg-map .prefecture.is-linked-active {
  fill: #003C7E;
  filter: drop-shadow(0 3px 5px rgba(7, 56, 121, 0.24));
}
/* ホバー時の県名ツールチップ（/area/ と同様。件数は出さない） */
.cprv-area__map-figure {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* 県地図モーダル（/lg/）: 日本地図クリックで、新フォーマット県地図(PrefectureSvgMap)を
   画面中央のポップアップで大きく表示する。背景クリック / ✕ / Esc で閉じる。 */
.cprv-area__modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  animation: cprvAreaModalFade 0.16s ease;
}
@keyframes cprvAreaModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cprv-area__modal-panel {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 24px 60px rgba(0, 54, 120, 0.28);
}
.cprv-area__modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cprv-area__modal-head strong {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  color: var(--colorLightBase);
}
.cprv-area__modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid #E5E7EB;
  border-radius: 50%;
  background: #fff;
  color: #475569;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cprv-area__modal-close:hover { background: var(--colorLightBase); color: #fff; }
.cprv-area__modal-body {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #cfe0ef;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 0%, #f1f7fc 0%, transparent 60%),
    linear-gradient(180deg, #eaf3fb 0%, #d6e8f5 100%);
  padding: 10px;
}
.cprv-area__modal-body > svg,
/* 地図の上に重ねる要素（リング装飾・県CTA）は対象外。
   ここで position:relative / z-index:1 を当てると、CTA が本文の流れに戻って
   左へ動き、重なり順も地図に負けてクリックできなくなる。 */
.cprv-area__modal-body > div:not(.cprv-area__map-rings):not(.cprv-area__modal-pref-cta-wrap) {
  position: relative;
  z-index: 1;
}
/* 位置指定はラッパー側。popup を a の外に出すため（a の中だと隠れる） */
.cprv-area__modal-pref-cta-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}
/* ホバー popup。地図と同じ見た目だが、カーソル追従ではなくボタンの真下に出し、
   しっぽはボタン側（上）を左寄りで指す。 */
.cprv-area__modal-pref-cta-wrap .cprv-area__modal-pref-popup {
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  bottom: auto;
  transform: none;
}
.cprv-area__modal-pref-cta-wrap .cprv-area__modal-pref-popup::before {
  top: -8px;
  bottom: auto;
  right: auto;
  left: 22px;
  border-top: 0;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #003c7e;
  border-left: 8px solid transparent;
  transform: none;
}
.cprv-area__modal-pref-cta-wrap .cprv-area__modal-pref-popup::after {
  top: -7px;
  bottom: auto;
  right: auto;
  left: 23px;
  border-top: 0;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  border-left: 7px solid transparent;
  transform: none;
}
/* /area/{県}/ の地図上 CTA（県自体のプロジェクト一覧）のホバー popup。
   モーダル内 CTA と同じく、ボタンの真下に出してしっぽは上（ボタン側）を指す。 */
.prefecture-map-container__pref-cta-wrap {
  position: relative;
  z-index: 5;
}
.prefecture-map-container__pref-cta-wrap .prefecture-map-container__pref-popup {
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  bottom: auto;
  transform: none;
}
.prefecture-map-container__pref-cta-wrap .prefecture-map-container__pref-popup::before {
  top: -8px;
  bottom: auto;
  right: auto;
  left: 22px;
  border-top: 0;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #003c7e;
  border-left: 8px solid transparent;
  transform: none;
}
.prefecture-map-container__pref-cta-wrap .prefecture-map-container__pref-popup::after {
  top: -7px;
  bottom: auto;
  right: auto;
  left: 23px;
  border-top: 0;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  border-left: 7px solid transparent;
  transform: none;
}
.cprv-area__modal-pref-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(13, 27, 58, 0.06);
  padding: 12px 14px;
  max-width: 200px;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.cprv-area__modal-pref-cta:hover {
  background: #f1f7fc;
  box-shadow: 0 4px 14px rgba(13, 27, 58, 0.12);
}
.cprv-area__modal-pref-cta-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cprv-area__modal-pref-cta-title {
  font-size: clamp(12px, 0.9vw, 13px);
  font-weight: 700;
  color: #003c7e;
  margin: 0;
}
.cprv-area__modal-pref-cta-sub {
  font-size: clamp(10px, 0.9vw, 11px);
  color: #5b6677;
  line-height: 1.5;
  margin: 0;
}
.cprv-area__modal-pref-cta-arrow {
  font-weight: 700;
  color: #003c7e;
  flex-shrink: 0;
}
.cprv-area__modal-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  color: var(--colorLightBase);
  text-decoration: none;
}
.cprv-area__modal-link:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .cprv-area__map-rings .ring { animation: none; opacity: 1; }
}
.cprv-area__pref-popup {
  position: absolute;
  z-index: 3;
  padding: 6px 11px;
  border: 1px solid #003C7E;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 14px rgba(7, 56, 121, 0.16);
  color: #003C7E;
  white-space: nowrap;
  /* カーソルの右に表示し、ポインタは奪わない */
  transform: translate(24px, -50%);
  pointer-events: none;
}
.cprv-area__pref-popup::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #003C7E;
  transform: translateY(-50%);
}
.cprv-area__pref-popup::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #FFFFFF;
  transform: translateY(-50%);
}
.cprv-area__pref-popup strong { color: #003C7E; font-size: clamp(12px, 1vw, 13px); font-weight: 700; }
/* 県地図モーダルの自治体吹き出し用。県名のみの日本地図 popup に人口・面積行を足す。 */

.cprv-area__regions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
}
.cprv-area__card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s, transform 0.2s;
  scroll-margin-top: 120px; /* sticky header 分のオフセット */
}
.cprv-area__card:hover {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.cprv-area__card-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.cprv-area__card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.cprv-area__card-title {
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 700;
  margin: 0;
  color: #0F172A;
}
.cprv-area__card-count {
  font-size: clamp(11px, 1vw, 12px);
  color: #64748B;
  white-space: nowrap;
}
.cprv-area__card-chevron { color: #94A3B8; }
.cprv-area__card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cprv-area__chip {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  color: #334155;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.cprv-area__chip:hover {
  background: #DBEAFE;
  color: #1D4ED8;
}

.cprv-area__citysearch {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.cprv-area__citysearch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: #0F172A;
  font-size: clamp(13px, 1.2vw, 15px);
}
.cprv-area__citysearch-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #EFF6FF;
  color: #2563EB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cprv-area__citysearch-help {
  font-size: clamp(11px, 1vw, 12px);
  color: #64748B;
  margin: 0;
}
.cprv-area__citysearch-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cprv-area__select,
.cprv-area__input {
  height: 40px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 0 12px;
  font-size: clamp(13px, 1.15vw, 14px);
  color: #0F172A;
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cprv-area__select:focus,
.cprv-area__input:focus {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.cprv-area__select { min-width: 180px; }
.cprv-area__input { min-width: 220px; }
.cprv-area__search-btn {
  height: 40px;
  width: 44px;
  border: 0;
  border-radius: 8px;
  background: #2563EB;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.cprv-area__search-btn:hover { background: #1E4ED8; }

@media (max-width: 1100px) {
  .cprv-area__grid { grid-template-columns: 1fr; }
  .cprv-area__tabs { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .cprv-area { padding: 16px 16px 48px; }
  .cprv-area__head { grid-template-columns: 1fr; align-items: stretch; }
  .cprv-area__search-card { min-width: 0; }
  .cprv-area__tabs { grid-template-columns: repeat(2, 1fr); }
  .cprv-area__regions { grid-template-columns: 1fr; }
  .cprv-area__citysearch { grid-template-columns: 1fr; }
  .cprv-area__citysearch-row { flex-wrap: wrap; }
  .cprv-area__select, .cprv-area__input { flex: 1 1 auto; min-width: 0; }
}

/* =========================================================================
   トップページ「データ訴求」セクション (DataInsightsSection)
   左コピー + 右に横スクロールカルーセル。/lg/ のグラフ表現を踏襲。
   ビューポート進入で各チャートがアニメーション。
   ========================================================================= */
.data-insights {
  --di-teal: #1a8c8d;
  --di-teal-soft: rgba(26, 140, 141, 0.12);
  --di-blue-soft: #9ec3ff;
  --di-pink: #e7a3a3;
  --di-line: #e3e9f1;
  --di-grid: #eef2f7;
  --di-muted: #5b6677;
  --di-ink: #18324E;
  position: relative;
  overflow: hidden;
  padding: 96px 0 104px;
  background-color: #eef4fb;
  background-image: url('/tenants/cpriver/assets/img/common/stats-bg.avif');
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 背景は .data-insights の background-image (stats-bg.png) に統一。旧CSS装飾は撤去。 */

/* 上下の区切り: 滑らかな白い曲線（隣接セクションへなめらかに繋ぐ） */
.data-insights::before,
.data-insights::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.data-insights::before {
  top: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V42 C1080,2 360,90 0,46 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.data-insights::after {
  bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,90 H1440 V48 C1080,88 360,0 0,44 Z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* レイアウト: 左コピー + 右カルーセル。左は中央コンテナに揃え、右は画面端までブリード */
.data-insights__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-left: max(20px, calc((100vw - 1180px) / 2));
  /* 進入アニメーション */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}
.data-insights.is-in .data-insights__inner { opacity: 1; transform: none; }

/* 左カラム */
.data-insights__copy { min-width: 0; }
.data-insights__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(11px, 0.9vw, 12px); font-weight: 800; letter-spacing: 0.12em;
  color: var(--di-teal); margin: 0 0 12px;
}
.data-insights__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--di-teal); border-radius: 2px; }
.data-insights__title {
  font-size: clamp(26px, 2.7vw, 40px); font-weight: 800; line-height: 1.38;
  margin: 0 0 14px; color: var(--di-ink);
}
.data-insights__title-em { color: var(--di-ink); font-style: normal; font-weight: 800; }
.data-insights__lead { font-size: clamp(12.5px, 1.15vw, 14.5px); line-height: 1.9; color: var(--di-muted); margin: 0 0 20px; }
.data-insights__bullets { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.data-insights__bullets li { display: flex; align-items: center; gap: 11px; font-size: clamp(11.5px, 1.15vw, 13.5px); font-weight: 600; color: var(--di-ink); }
.data-insights__bullets svg { color: var(--di-teal); flex: 0 0 auto; }
.data-insights__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 28px; background: var(--colorLightBase); color: #fff;
  border-radius: 999px; font-weight: 800; font-size: clamp(12px, 1.15vw, 14px); text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 60, 126, 0.22);
  transition: transform .15s, box-shadow .15s;
}
.data-insights__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 60, 126, 0.3); color: #fff; }

/* 右カラム: カルーセル */
.data-insights__carousel { min-width: 0; }
.data-insights__scroller {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 24px 16px 4px;
  scrollbar-width: none;
}
.data-insights__scroller::-webkit-scrollbar { display: none; }

/* カード */
.di-card {
  flex: 0 0 clamp(290px, 30vw, 366px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--di-line); border-radius: 16px;
  padding: 18px; box-shadow: 0 16px 42px rgba(11, 45, 122, 0.08);
}
.di-card__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; margin-bottom: 14px; }
.di-card__badge {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 6px 14px rgba(11, 45, 122, 0.18);
}
.di-card__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.di-card__title { font-size: clamp(15px, 1.4vw, 18px); font-weight: 800; color: var(--di-ink); line-height: 1.2; }
.di-card__sub { font-size: clamp(10.5px, 0.9vw, 11.5px); color: var(--di-muted); line-height: 1.3; }
.di-card__detail {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--di-line); background: #fff;
  font-size: clamp(10.5px, 0.9vw, 11.5px); font-weight: 700; color: var(--di-muted); text-decoration: none;
  transition: color .15s, border-color .15s;
}
.di-card__detail:hover { color: var(--di-teal); border-color: var(--di-teal); }
.di-card__chart { padding: 4px 2px; }

/* 数値タイル */
.di-card__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.di-stat {
  background: #f4f8fb; border: 1px solid var(--di-line); border-radius: 10px;
  padding: 11px 8px; text-align: center; opacity: 0; transform: translateY(8px);
}
.di-card__stats.is-anim .di-stat { animation: diStatIn .5s ease forwards; }
@keyframes diStatIn { to { opacity: 1; transform: none; } }
.di-stat__num { font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; color: var(--colorLightBase); line-height: 1; }
.di-stat__num small { font-size: clamp(11px, 0.9vw, 12px); font-weight: 700; margin-left: 2px; }
.di-stat__label { font-size: clamp(9.5px, 0.9vw, 10.5px); color: var(--di-muted); margin-top: 6px; }

/* バー伸長アニメーション */
@keyframes diGrowX { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }

/* 横棒グラフ */
.di-bars { display: flex; flex-direction: column; gap: 10px; }
.di-bar__row { display: grid; grid-template-columns: minmax(86px, 104px) 1fr 46px; align-items: center; gap: 9px; }
.di-bar__label { font-size: clamp(10px, 0.9vw, 11px); line-height: 1.25; color: var(--di-muted); font-weight: 600; }
.di-bar__track { position: relative; height: 11px; background: var(--di-grid); border-radius: 999px; overflow: hidden; }
.di-bar__fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--di-teal); border-radius: 999px; transform: scaleX(0); transform-origin: left; }
.di-bar__fill.is-anim { animation: diGrowX .85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.di-bar__val { font-size: clamp(10.5px, 0.9vw, 11.5px); font-weight: 800; color: var(--di-ink); text-align: right; }

/* 人口ピラミッド */
.di-pyr { display: flex; flex-direction: column; gap: 4px; }
.di-pyr__row { display: grid; grid-template-columns: 1fr 46px 1fr; align-items: center; gap: 6px; }
.di-pyr__side { display: flex; align-items: center; height: 11px; }
.di-pyr__side--l { justify-content: flex-end; }
.di-pyr__bar { height: 9px; border-radius: 3px; transform: scaleX(0); }
.di-pyr__bar--m { background: var(--di-blue-soft); transform-origin: right; }
.di-pyr__bar--f { background: var(--di-pink); transform-origin: left; }
.di-pyr__bar.is-anim { animation: diGrowX .85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.di-pyr__age { font-size: clamp(8px, 0.75vw, 9px); color: var(--di-muted); text-align: center; }
.di-legend { display: flex; gap: 16px; justify-content: center; font-size: clamp(10px, 0.9vw, 11px); color: var(--di-muted); margin-top: 10px; }
.di-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.di-legend__m { background: var(--di-blue-soft); }
.di-legend__f { background: var(--di-pink); }

/* 円（ドーナツ）グラフ */
.di-donut-wrap { display: flex; align-items: center; gap: 18px; padding: 10px 4px; }
.di-donut { width: 124px; height: 124px; border-radius: 50%; position: relative; flex: 0 0 auto; transform-origin: center; }
.di-donut::after { content: ""; position: absolute; inset: 21px; background: #fff; border-radius: 50%; }
.di-donut.is-anim { animation: diDonutIn .8s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes diDonutIn { from { transform: scale(.55) rotate(-22deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
.di-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.di-donut__center b { font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; color: var(--colorLightBase); line-height: 1; }
.di-donut__center span { font-size: clamp(9px, 0.9vw, 10px); color: var(--di-muted); margin-top: 3px; }
.di-donut__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.di-donut__li { display: flex; align-items: center; gap: 8px; font-size: clamp(11.5px, 0.9vw, 12.5px); font-weight: 600; color: var(--di-ink); }
.di-donut__li i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.di-donut__li b { margin-left: auto; font-weight: 800; color: var(--colorLightBase); }
.di-donut__legend.is-anim .di-donut__li { opacity: 0; transform: translateX(8px); animation: diLegendIn .5s ease forwards; }
@keyframes diLegendIn { to { opacity: 1; transform: none; } }

/* 折れ線グラフ（Y軸ラベル付き） */
.di-line { padding: 2px 0; }
.di-line__svg { width: 100%; height: auto; display: block; overflow: visible; }
.di-line__grid { stroke: var(--di-grid); stroke-width: 1; }
.di-line__unit { fill: #93a0ad; font-size: clamp(8px, 0.75vw, 9px); }
.di-line__ytick { fill: #93a0ad; font-size: clamp(8px, 0.75vw, 9px); }
.di-line__xtick { fill: var(--di-muted); font-size: clamp(9px, 0.9vw, 10px); }
.di-line__area { fill: var(--di-teal-soft); opacity: 0; }
.di-line__area.is-anim { animation: diFadeIn .8s ease .35s forwards; }
.di-line__path {
  fill: none; stroke: var(--di-teal); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
}
.di-line__path.is-anim { animation: diLineDraw 1.15s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes diLineDraw { to { stroke-dashoffset: 0; } }
.di-line__dot { fill: #fff; stroke: var(--di-teal); stroke-width: 2.6; opacity: 0; }
.di-line__dot.is-anim { animation: diFadeIn .4s ease both; }
@keyframes diFadeIn { to { opacity: 1; } }

/* カルーセル操作 (←・プログレス・→) */
.data-insights__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.data-insights__nav {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--di-line); color: var(--di-ink); cursor: pointer;
  box-shadow: 0 4px 12px rgba(11, 45, 122, 0.08);
  transition: border-color .15s, color .15s, transform .15s, opacity .15s;
}
.data-insights__nav:hover:not(:disabled) { border-color: var(--colorLightBase); color: var(--colorLightBase); transform: translateY(-1px); }
.data-insights__nav:disabled { opacity: .38; cursor: default; box-shadow: none; }
.data-insights__track { position: relative; width: min(240px, 42%); height: 5px; border-radius: 999px; background: #d7e1ec; }
.data-insights__thumb { position: absolute; top: 0; height: 100%; border-radius: 999px; background: var(--colorLightBase); transition: left .15s ease; }
.data-insights__hint { text-align: center; font-size: clamp(11px, 0.9vw, 12px); color: var(--di-muted); margin: 12px 0 0; }
.data-insights__disclaimer { text-align: center; font-size: clamp(9.5px, 0.9vw, 10.5px); color: #93a0ad; margin: 6px 0 0; }

/* レスポンシブ */
@media (max-width: 980px) {
  .data-insights__inner { grid-template-columns: 1fr; gap: 26px; padding-left: 20px; padding-right: 20px; }
  .data-insights__scroller { padding-right: 20px; }
}
@media (max-width: 600px) {
  .data-insights { padding: 48px 0 56px; }
  .di-card { flex-basis: 82vw; }
  .di-bar__row { grid-template-columns: minmax(74px, 92px) 1fr 44px; }
  /* CTA は inline-flex なので auto margin が効かない。flex + fit-content にして中央へ */
  .data-insights__cta {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .data-insights__inner { transition: none; opacity: 1; transform: none; }
  .di-bar__fill, .di-pyr__bar { transform: scaleX(1); }
  .di-bar__fill.is-anim, .di-pyr__bar.is-anim, .di-card__stats.is-anim .di-stat,
  .di-donut.is-anim, .di-donut__legend.is-anim .di-donut__li,
  .di-line__area.is-anim, .di-line__path.is-anim, .di-line__dot.is-anim { animation: none; }
  .di-stat, .di-donut__li, .di-line__area, .di-line__dot { opacity: 1; transform: none; }
  .di-line__path { stroke-dashoffset: 0; }
}

/* =========================================================================
   「自治体から選ぶ」(cprv-discovery__hero) 視野進入時の登場演出（案B: 地図フォーカス）
   見出し → 地図(ズーム+ぼかし解除) → 地域パネル(時差) の順に登場。リングは常時リップル。
   ========================================================================= */
/* 進入前は非表示（is-revealed 付与までのフラッシュ防止） */
.cprv-discovery__hero:not(.is-revealed) .cprv-discovery__intro,
.cprv-discovery__hero:not(.is-revealed) .cprv-discovery__map,
.cprv-discovery__hero:not(.is-revealed) .cprv-discovery__region-panel,
.cprv-discovery__hero:not(.is-revealed) .cprv-discovery__featured {
  opacity: 0;
}
/* 見出し */
.cprv-discovery__hero.is-revealed .cprv-discovery__intro {
  animation: cprvHeroFadeUp .6s cubic-bezier(0.16, 1, 0.3, 1) .05s both;
}
/* 地図: 少し小さい+ぼかし → くっきりズームイン */
.cprv-discovery__hero.is-revealed .cprv-discovery__map {
  animation: cprvHeroMapIn .85s cubic-bezier(0.16, 1, 0.3, 1) .22s both;
}
/* 地域パネル: 時差でポップイン（ピンが順に登場するイメージ） */
.cprv-discovery__hero.is-revealed .cprv-discovery__region-panel {
  animation: cprvHeroPanelIn .55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cprv-discovery__hero.is-revealed .cprv-discovery__region-panel:nth-of-type(1) { animation-delay: .55s; }
.cprv-discovery__hero.is-revealed .cprv-discovery__region-panel:nth-of-type(2) { animation-delay: .66s; }
.cprv-discovery__hero.is-revealed .cprv-discovery__region-panel:nth-of-type(3) { animation-delay: .77s; }
.cprv-discovery__hero.is-revealed .cprv-discovery__region-panel:nth-of-type(4) { animation-delay: .88s; }
.cprv-discovery__hero.is-revealed .cprv-discovery__region-panel:nth-of-type(5) { animation-delay: .99s; }
.cprv-discovery__hero.is-revealed .cprv-discovery__region-panel:nth-of-type(6) { animation-delay: 1.10s; }
/* 特集カードは基底 transition でフェードイン（回転アニメと競合しないよう :not 解除のみ） */
@keyframes cprvHeroFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cprvHeroMapIn { from { opacity: 0; transform: scale(.92); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes cprvHeroPanelIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cprv-discovery__hero:not(.is-revealed) .cprv-discovery__intro,
  .cprv-discovery__hero:not(.is-revealed) .cprv-discovery__map,
  .cprv-discovery__hero:not(.is-revealed) .cprv-discovery__region-panel,
  .cprv-discovery__hero:not(.is-revealed) .cprv-discovery__featured { opacity: 1; }
  .cprv-discovery__hero.is-revealed .cprv-discovery__intro,
  .cprv-discovery__hero.is-revealed .cprv-discovery__map,
  .cprv-discovery__hero.is-revealed .cprv-discovery__region-panel { animation: none; }
}

/* =========================================================================
   トップ「注目の自治体・プロジェクト」カードを縦型 3:2 画像に（トリミング軽減）
   ※ --plain はトップ専用クラス。/area/ の横型カードには影響しない。
   ========================================================================= */
.cprv-discovery__projects--plain .cprv-discovery__project-card {
  grid-template-columns: 1fr;
}
.cprv-discovery__projects--plain .cprv-discovery__project-image {
  aspect-ratio: 3 / 2;
  width: 100%;
}
.cprv-discovery__projects--plain .cprv-discovery__project-image img {
  min-height: 0;
}

/* ============================================================
   /lg FV データブロックのサブタイトル（DataInsightsSection 上書き用）
   ============================================================ */
.data-insights__subtitle {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--di-teal, #1a8c8d);
  margin: 0 0 18px;
}

/* ============================================================
   /lg データ比較エリア（スキャフォールド・近日公開）
   モックの3ブロック目。比較機能は未実装のため枠のみ設置。
   ============================================================ */
.lg-compare {
  max-width: 1340px;
  margin: 0 auto;
  padding: clamp(8px, 1.5vw, 24px) 32px clamp(48px, 6vw, 72px);
}
.lg-compare__inner {
  background: #f4f8fd;
  border: 1px solid #e3ecf7;
  border-radius: 20px;
  padding: clamp(28px, 3.4vw, 52px) clamp(20px, 3vw, 48px);
}
.lg-compare__head {
  text-align: center;
  margin-bottom: clamp(22px, 2.6vw, 38px);
}
.lg-compare__title {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.4;
  color: #18324e;
  margin: 0 0 10px;
}
.lg-compare__lead {
  font-size: clamp(12.5px, 1.2vw, 15px);
  line-height: 1.8;
  color: #5b6677;
  margin: 0;
}
.lg-compare__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}
.lg-compare__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 32px) clamp(14px, 1.6vw, 22px);
  background: #fff;
  border: 1px solid #e3ecf7;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 54, 120, 0.06);
  text-align: center;
}
.lg-compare__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--colorLightBase, #2f6fd0);
  padding: 3px 9px;
  border-radius: 999px;
}
.lg-compare__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 5.4vw, 66px);
  height: clamp(52px, 5.4vw, 66px);
  border-radius: 50%;
  background: #e8f1fb;
  color: var(--colorDarkBase, #003678);
}
.lg-compare__card-title {
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 800;
  color: #18324e;
  line-height: 1.4;
}
.lg-compare__card-note {
  display: block;
  font-size: clamp(10px, 0.85vw, 11.5px);
  font-weight: 600;
  color: #5b6677;
  margin-top: 2px;
}
.lg-compare__card-desc {
  font-size: clamp(11.5px, 1.05vw, 13px);
  line-height: 1.7;
  color: #5b6677;
}
@media (max-width: 900px) {
  .lg-compare__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .lg-compare {
    padding: 8px 16px 40px;
  }
}
@media (max-width: 480px) {
  .lg-compare__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   /lg FV データブロック（LgDataHero・モックの5枚カードグリッド）
   ============================================================ */
.lg-datahero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 72px) 0 clamp(60px, 6vw, 88px);
  background: linear-gradient(180deg, #eef4fb 0%, #f6f9fd 68%, #fff 100%);
}
.lg-datahero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: clamp(120px, 15vw, 220px);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.72) 58%, #fff 100%);
}
/* 背景装飾（コンステレーション線）: コンテンツの下・非対話 */
.lg-datahero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lg-datahero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 356px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 32px;
}
/* 左: コピー */
.lg-datahero__copy { min-width: 0; }
.lg-datahero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: clamp(11px, 0.9vw, 12px); font-weight: 800; letter-spacing: 0.12em;
  color: #1a8c8d; margin: 0 0 12px;
}
.lg-datahero__eyebrow::before { content: ""; width: 22px; height: 2px; background: #1a8c8d; border-radius: 2px; }
.lg-datahero__title {
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.3;
  color: #18324e; margin: 0 0 8px;
}
.lg-datahero__subtitle {
  font-size: clamp(15px, 1.6vw, 20px); font-weight: 700; line-height: 1.5;
  color: #1a8c8d; margin: 0 0 16px;
}
.lg-datahero__lead {
  font-size: clamp(12.5px, 1.15vw, 14.5px); line-height: 1.9; color: #5b6677; margin: 0 0 18px;
  text-wrap: pretty;
}
.lg-datahero__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.lg-datahero__bullets li { display: flex; align-items: center; gap: 10px; font-size: clamp(12px, 1.1vw, 14px); font-weight: 600; color: #18324e; }
.lg-datahero__bullets svg { color: #1a8c8d; flex: 0 0 auto; }
/* 右: 5枚カードグリッド（上段3・下段2） */
.lg-datahero__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 18px);
}
.lg-dhcard--wide2 { grid-column: span 2; }
.lg-dhcard--wide3 { grid-column: span 3; }
.lg-dhcard {
  background: #fff; border: 1px solid #e3ecf7; border-radius: 14px;
  padding: clamp(14px, 1.4vw, 18px);
  box-shadow: 0 6px 18px rgba(0, 54, 120, 0.05);
  display: flex; flex-direction: column; gap: 10px;
}
.lg-dhcard__head { display: flex; align-items: center; gap: 8px; }
.lg-dhcard__icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; color: #fff; flex: 0 0 auto;
}
.lg-dhcard__icon--blue { background: #2f6fd0; }
.lg-dhcard__icon--indigo { background: #3b5bb5; }
.lg-dhcard__icon--teal { background: #1a8c8d; }
.lg-dhcard__icon--rose { background: #d96a86; }
.lg-dhcard__icon--gold { background: #e0a43a; }
.lg-dhcard__title { font-size: clamp(12px, 1.1vw, 13.5px); font-weight: 800; color: #18324e; line-height: 1.3; }
.lg-dhcard__title small { font-weight: 600; color: #8592a3; font-size: 0.82em; }
.lg-dhcard__figline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px; margin: 0; }
.lg-dhcard__num { font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; color: #18324e; line-height: 1.05; white-space: nowrap; }
.lg-dhcard__unit { font-size: clamp(11px, 1vw, 13px); font-weight: 700; color: #18324e; }
.lg-dhcard__year { font-size: clamp(10px, 0.85vw, 11px); color: #8592a3; margin-left: 2px; }
.lg-dhcard__foot { font-size: clamp(10.5px, 0.95vw, 12px); color: #5b6677; margin: 0; }
.lg-dhcard__foot b { color: #18324e; }
.lg-dhcard__foot b.is-up { color: #1a8c8d; }

/* チャート（大きめ・軸ラベル/グリッド/グラデーション付き） */
.lg-dhcard__chart { width: 100%; margin-top: 2px; }
.lg-chart { display: block; width: 100%; height: auto; overflow: visible; }
.lg-chart__ylab { fill: #9aa7b8; font-size: 8.5px; font-weight: 600; }
.lg-chart__xlab { fill: #8592a3; font-size: 8.5px; font-weight: 600; }

/* 教育: ドーナツ＋凡例 */
.lg-dhcard__donutrow { display: flex; align-items: center; gap: 14px; }
.lg-donut { width: clamp(60px, 6.4vw, 78px); height: clamp(60px, 6.4vw, 78px); flex: 0 0 auto; }
.lg-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.lg-legend__item { display: flex; align-items: center; gap: 7px; font-size: clamp(10.5px, 0.95vw, 12px); color: #5b6677; }
.lg-legend__dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.lg-legend__value { color: #18324e; font-weight: 800; margin-left: auto; white-space: nowrap; }

/* 福祉・医療: 左スタッツ＋大ドーナツ ／ 寄付: 左スタッツ＋チャート */
.lg-dhcard__split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.lg-dhcard__split-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lg-dhcard__chart--split { width: clamp(150px, 17vw, 240px); margin-top: 0; }
.lg-dhcard__donutbig { position: relative; width: clamp(98px, 10.5vw, 122px); flex: 0 0 auto; }
.lg-dhcard__donutbig svg { width: 100%; height: auto; display: block; }
.lg-dhcard__donutbig-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.2; }
.lg-dhcard__donutbig-center small { font-size: clamp(8.5px, 0.8vw, 10px); color: #8592a3; }
.lg-dhcard__donutbig-center b { font-size: clamp(14px, 1.5vw, 18px); font-weight: 800; color: #18324e; }
.lg-dhcard__donutbig-center b i { font-size: 0.6em; font-style: normal; font-weight: 700; margin-left: 1px; }

/* --- FVチャートの入場アニメ（トップページ流。reduced-motion時は静止） --- */
@media (prefers-reduced-motion: no-preference) {
  /* 折れ線: 左から描画 */
  .lg-chart__line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lgLineDraw 1.15s 0.1s cubic-bezier(0.45, 0, 0.15, 1) forwards; }
  @keyframes lgLineDraw { to { stroke-dashoffset: 0; } }
  /* 面塗り・マーカーは線の後にフェード */
  .lg-chart__area { opacity: 0; animation: lgFade 0.7s 0.7s ease forwards; }
  .lg-chart__dot { opacity: 0; animation: lgFade 0.35s ease forwards; }
  /* 棒: 下から伸びる */
  .lg-chart__bar { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; animation: lgBarGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  @keyframes lgBarGrow { to { transform: scaleY(1); } }
  /* ドーナツ: 拡大＋回転で登場 */
  .lg-donut, .lg-dhcard__donutbig svg { transform-origin: center; animation: lgDonutIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes lgDonutIn { from { transform: scale(0.6) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
  /* 教育の凡例: 順にフェードイン */
  .lg-legend__item { opacity: 0; transform: translateX(8px); animation: lgLegendIn 0.45s ease forwards; }
  .lg-legend__item:nth-child(1) { animation-delay: 0.5s; }
  .lg-legend__item:nth-child(2) { animation-delay: 0.62s; }
  .lg-legend__item:nth-child(3) { animation-delay: 0.74s; }
  @keyframes lgLegendIn { to { opacity: 1; transform: none; } }
  @keyframes lgFade { to { opacity: 1; } }
}

.lg-datahero__note {
  position: relative; z-index: 1;
  max-width: 1340px; margin: clamp(14px, 1.6vw, 22px) auto 0; padding: 0 32px;
  font-size: clamp(10px, 0.85vw, 11.5px); color: #8592a3; text-align: right;
}
@media (max-width: 1024px) {
  .lg-datahero__inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .lg-datahero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-dhcard--wide2, .lg-dhcard--wide3 { grid-column: span 1; }
}
@media (max-width: 768px) {
  .lg-datahero__inner, .lg-datahero__note { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 560px) {
  .lg-datahero__grid { grid-template-columns: 1fr; }
}

/* /lg 最下部の解説（旧イントロ）を中央コンテナで包む */
.lg-intro-outer {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 32px clamp(40px, 6vw, 72px);
}
@media (max-width: 768px) {
  .lg-intro-outer { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   /lg スクロール誘導（マウス型・FVと地図ブロックの間）
   ============================================================ */
.lg-scrollcue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 1.8vw, 26px);
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  justify-content: center;
}
.lg-scrollcue__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 68px;
  height: 68px;
  background: #fff;
  border: 1px solid rgba(47, 111, 208, 0.14);
  border-radius: 50%;
  box-shadow: 0 16px 36px rgba(24, 50, 78, 0.16), 0 4px 12px rgba(47, 111, 208, 0.12);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lg-scrollcue__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(24, 50, 78, 0.18), 0 6px 16px rgba(47, 111, 208, 0.14);
}
.lg-scrollcue__mouse {
  position: relative;
  width: 19px;
  height: 31px;
  border: 2px solid #2f6fd0;
  border-radius: 16px;
  opacity: 0.95;
}
.lg-scrollcue__wheel {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 6px;
  margin-left: -2px;
  background: #2f6fd0;
  border-radius: 2px;
}
.lg-scrollcue__label {
  color: #2f6fd0;
  font-weight: 800;
  font-size: 8px;
  letter-spacing: 0.12em;
}
@media (prefers-reduced-motion: no-preference) {
  .lg-scrollcue__link { animation: lgScrollCueDrop 1.8s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
  .lg-scrollcue__wheel { animation: lgScrollWheel 1.5s ease-in-out infinite; }
  @keyframes lgScrollCueDrop {
    0%, 100% { transform: translateY(0); }
    52% { transform: translateY(10px); }
  }
  @keyframes lgScrollWheel {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(8px); opacity: 0; }
    100% { opacity: 0; }
  }
}
/* アンカージャンプ時、上部に余白を確保（sticky ヘッダー対策） */
.lg-map-anchor { scroll-margin-top: 90px; }

/* =========================================================================
   SP: 入力欄フォーカス時の自動ズーム対策
   iOS Safari は font-size が 16px 未満の入力欄にフォーカスするとページを
   拡大し、そのまま戻らない（＝「画面が近づいて使いづらい」）。
   SP では入力系の文字サイズを 16px 以上に揃えて発生させない。
   チェックボックス/ラジオ/ボタンはズーム対象外なので触らない。
   ※ 各クラスの元定義（content.css / trend.css / lg.css / header.css /
     legal-search.css および本ファイル内）より後に置いて上書きする。
   ========================================================================= */
@media (max-width: 768px) {
  .cprv-area__input,
  .cprv-area__select {
    font-size: 16px;
  }
}