/*=========================================
*Slider
===========================================*/
/* =========================================================
  slideArea / slideBox（slick: fade + zoom）
  - 高さを明示して「2枚目が消える」問題を回避
  - clampでレスポンシブ + 高さ上限（=画面いっぱいにならない）
========================================================= */

.slideArea{
  width: 100%;
}

/* slickを当てる要素 */
.slideArea .slideBox{
  width: 100%;
  /* ↓ 高さ：最小 / 可変(vw) / 最大（上限） */
  /* height: clamp(240px, 56.25vw, 724px); 56.25vw=16:9相当 */
	height: clamp(240px, calc(724px * 100vw / 1920px), 724px);;
  position: relative;
  overflow: hidden;  /* ズームのはみ出しを隠す */
  margin: 0;
  padding: 0;
  list-style: none;
	border-radius: 0 0 500px 500px;
}

/* slick生成要素も高さを揃える（fadeで0になりやすいのを防ぐ） */
.slideArea .slideBox .slick-list,
.slideArea .slideBox .slick-track,
.slideArea .slideBox .slick-slide{
  height: 100% !important;
}

/* スライド（li） */
.slideArea .slideBox > li{
  height: 100%;
}

/* 画像を枠いっぱいに（トリミングしてフィット） */
.slideArea .slideBox img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transform-origin: center;
  will-change: transform;
}

/* =========================================================
  ズーム演出（あなたの add-animation/remove-animation を使用）
  autoplaySpeed: 4000ms に合わせて 4s
========================================================= */
.slideArea .slideBox .slick-slide.add-animation img{
  animation: slideZoom 4s linear both;
}

.slideArea .slideBox .slick-slide.remove-animation img{
  animation: none;
  transform: scale(1);
}

@keyframes slideZoom{
  from { transform: scale(1); }
  to   { transform: scale(1.08); } /* 拡大率は好みで調整 */
}

/* 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce){
  .slideArea .slideBox .slick-slide.add-animation img{
    animation: none;
  }
}

/* =========================================================
  レスポンシブ（スマホは少し縦を確保、ただし上限あり）
========================================================= */
@media (max-width: 768px){
  .slideArea .slideBox{
    height: clamp(260px, 80vw, 520px);
  }
}


/*=========================================
*Category
===========================================*/
#selectCategory {
	margin: 0 0 100px;
}
.categoryList{
  list-style:none;
  margin:0 auto;
  padding:0;
	max-width: 1180px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:stretch;  /* 行内でliの高さを揃える */
}

.categoryList > li{
  flex: 1 1 auto;
	display: flex;
}

.categoryList > li > a{
  display:flex;
  flex-direction:column;
  gap:8px;              /* pとspanの間隔 */
  text-decoration:none;
	flex: 1;
	height: 100%;

  /* ここが重要：aが内容高さをちゃんと持つようにする */
  position: relative;
}

/* p：中身を中央寄せ（高さは内容に応じる） */
.categoryList > li > a > p{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
	 flex: 1 1 auto;         /* ★追加：余った高さをpが取る（画像エリアが揃う） */
  min-height: 0;          /* ★追加：潰れ/はみ出し対策 */
}

/* span：中身を中央寄せ（高さは内容に応じる） */
.categoryList > li > a > span{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
	flex: 0 0 auto;         /* ★追加：spanは内容高さ（一定領域にしたいなら下を使う） */
}

/* imgの暴れ防止 */
.categoryList > li > a > p img{
  display:block;
  max-width:100%;
  height:auto;
}

#informationArea {
	margin: 0 0 188px;
}

#informationArea section {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	/* 追加：カード間の隙間（最大80pxで可変） */
	--cardGap: clamp(16px, 4vw, 80px);
	gap: var(--cardGap);
}

#informationArea section div {
    background: #fff;
    border-radius: 20px;
    padding: 17px 25px 34px 25px;
    display: flex;
    flex-direction: column;

	/* 変更：カード内のgap 80pxは画像とズレやすいので無効化 */
	gap: 0;

	/* 変更：カード幅（隙間は最大80pxの可変に追従） */
	flex: 0 0 calc((100% - var(--cardGap)) / 2);

	/* 追加：dlやボタンがあるのでカードの高さ揃えに強くする */
	align-items: stretch;

	/* dt幅の基準（通常：日付表示用） */
	--dtW: 110px;
}

#informationArea section div h3 {
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	margin: 0 0 16px;
	color: #184C71;
}

/* dl：dt/ddを横並びにして、点線を「行全体」で途切れなく */
#informationArea section div dl {
	margin: 0 0 30px;

	display: flex;       /* 変更：float→flexで行を作る */
	flex-wrap: wrap;
	width: 100%;

	/* 追加：タイトル直下の点線 */
	border-top: 1px dotted #CECECE;
}

#informationArea section div.searchRanking dl,
#informationArea section div.accessRanking dl {
	margin: 0;
	--rankRowMin: clamp(52px, 5vw, 72px);
}

/* dt/dd 共通：上下paddingは指定通り10px、点線は両方に付けて連続に見せる */
#informationArea section div dl dt,
#informationArea section div dl dd {
	margin: 0;
	padding: 10px 0;                    /* ←指定通り */
	border-bottom: 1px dotted #CECECE;  /* 行の下に点線 */
	box-sizing: border-box;

	/* 既存float/clearの影響を完全に止める */
	float: none;
	clear: none;
}

/* dt：左カラム幅 */
#informationArea section div dl dt {
	flex: 0 0 var(--dtW);
	display: flex;
	align-items: center;
}

/* dd：右カラム（本文） */
#informationArea section div dl dd {
	flex: 1 1 calc(100% - var(--dtW));
	padding: 10px 0 10px 16px; /* 上下10pxは維持しつつ、横だけ間を作る */
	display: flex;          /* 追加 */
  align-items: center;    /* 追加：dtと同じく上下中央 */
}

/* お知らせ/活用事例：右端に > を付ける（画像の矢印） */
#informationArea section div.notice dl dd a,
#informationArea section div.caseStudy dl dd a {
	display: block;
	position: relative;
	padding-right: 26px; /* 矢印分の余白 */
	display: block;
  width: 100%;
}

#informationArea section div.notice dl dd a::after,
#informationArea section div.caseStudy dl dd a::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 7px;
	height: 12px;
	border-top: 4px solid #184C71;
	border-right: 4px solid #184C71;
	transform: translateY(-50%) rotate(45deg);
}

/* ランキングだけ：行の最低高さ（画像あり行の高さに揃える） */
#informationArea section div.searchRanking dl dt,
#informationArea section div.searchRanking dl dd,
#informationArea section div.accessRanking dl dt,
#informationArea section div.accessRanking dl dd{
  min-height: var(--rankRowMin);
}

#informationArea section div.searchRanking dl dt,
#informationArea section div.accessRanking dl dt {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
	font-size: 2rem;
  min-height: var(--rankRowMin); /* ←ここを差し替え */
}

#informationArea section div.searchRanking dl dd,
#informationArea section div.accessRanking dl dd{
  min-height: var(--rankRowMin); /* ←ここを統一 */
  display: flex;
  align-items: center;
}

#informationArea section div.searchRanking dl dt img,
#informationArea section div.accessRanking dl dt img{
  max-width: 100%;
  width: auto;
  display: block;
  margin: 0 auto;

  /* 画像は23〜39pxで可変。ただし行高（rankRowMin）から上下padding20pxを引いた範囲に収める */
  height: min(var(--rankIconH), calc(var(--rankRowMin) - 20px));
}

/* ボタン：カード下に配置（画像の位置に寄せる） */
#informationArea section div p {
	width: 220px;
	margin: 0 auto;

	/* 追加：常に下に寄せる */
	margin-top: auto;
}

#informationArea section div p a {
	display: flex;
	width: 100%;
	height: 50px;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: 1.8rem;
	color: #fff;
	background: #184C71;
	border-radius: 10px;
}

#informationArea section div p a:after {
	content: "";
	display: block;
	width: 7px;
	height: 12px;
	position: absolute;
	right: 12px;
	border-top: 4px solid #fff;
  border-right: 4px solid #fff;
  transform: rotate(45deg);
}

/* SP：1カラム */
@media (max-width: 800px) {
	#informationArea section div {
		flex: 1 1 100%;
	}
}

/* =========================
   Visualization
   ========================= */

#Visualization{
	margin: 0 0 100px;
}

/* 2列×2行（SPは1列） */
#Visualization .vizGrid{
  max-width: 1180px;
  margin: clamp(30px, 6vw, 70px) auto 0;
  padding-inline: clamp(16px, 3vw, 40px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 10vw, 130px);
  row-gap: clamp(32px, 7vw, 80px);
}

/* カード */
#Visualization .vizCard{
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* 見出し */
#Visualization .vizHeading{
  margin: 0 0 12px;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  font-weight: 700;
  color: #184C71;
}

/* 説明文（※ flex-growはJS揃えの邪魔になるので付けない） */
#Visualization .vizDesc{
  margin: 0 auto 18px;
  max-width: 520px;
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.7;
  color: #222;
}

/* ボタン */
#Visualization .vizBtn{
  width: min(420px, 100%);
  margin: 0 auto;

  display: flex;
  align-items: center;
  gap: 14px;

  padding: 14px 52px 14px 18px;
  background: #184C71;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  box-sizing: border-box;
  position: relative;
}

#Visualization .vizBtn__icon{
  flex: 0 0 auto;
  width: clamp(44px, 6vw, 74px);
  max-width: 100%;
  height: auto;
  display: block;
}

#Visualization .vizBtn__text{
  margin: 0;
  flex: 1 1 auto;
  text-align: center;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

/* 右矢印 */
#Visualization .vizBtn::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 14px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* フォーカス（任意） */
#Visualization .vizBtn:focus-visible{
  outline: 3px solid #cc8b00;
  outline-offset: 3px;
}

/* SP：1列（※SPは高さ揃えを無効にする運用が一般的） */
@media (max-width: 800px){
  #Visualization .vizGrid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: clamp(28px, 6vw, 48px);
  }
  #Visualization .vizBtn{
    width: 100%;
  }
}

/* =========================
   About
   ========================= */

	 #about h2 + div {
		text-align: center;
		font-weight: bold;
		font-size: 1.8rem;
		margin: 0 0 30px;
		color: #184C71;
	 }

	 /*== Map ===============================*/
/* =========================================================
  District Map + Table (No JS)
  - Hover sync uses :has()
  - Breakpoint: 800px
========================================================= */

:root{
  --c-no: #11334C;
  --c-name: #184C71;
  --c-nameHover: #32678D;

  --c-value: #FFFFFF;
  --c-valueHover: #FFEEB4;

  --c-map: #98B87D;
  --c-spot: #187FC3;
  --c-mapHover: #EDCF6E;

  --c-head: #6FB06E;
}

.districtStats{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 800px){
  .districtStats{
    flex-direction: column;
    gap: 18px;
  }
}

.districtStats__map,
.districtStats__tableWrap{
  flex: 1 1 0;
  min-width: 0;
}

/* ---- Map ---- */
.districtStats__map{
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsukubaMap{
  width: 100%;
  height: auto;
  max-width: 316px; /* 可変しつつ、PCで大きくなりすぎないように */
  display: block;
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .2))
}

.tsukubaMap .area{
  transition: fill .18s ease;
  cursor: pointer;
}

/* .tsukubaMap g {
	filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .2))
} */

/* ---- Table ---- */
.districtTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
}

.districtTable thead th{
  padding: 14px 10px;
  font-size: 1.8rem;
  font-weight: 700;
}

.districtTable__headBlank{
  background: transparent;
}

.districtTable__head{
  background: var(--c-head);
  color: #fff;
  text-align: center;
}

.districtTable__head--birth{
  border-top-left-radius: 16px;
}

.districtTable__head--age{
  border-top-right-radius: 16px;
}

.districtTable tbody td,
.districtTable tbody th{
  /* border-top: 1px dotted rgba(255,255,255,.5); */
	border-top: 1px dotted #CECECE;
	vertical-align: middle;
}

.districtTable__row:first-child td,
.districtTable__row:first-child th{
  border-top: 0;
}

.districtTable__no{
  width: 70px;
  background: var(--c-no);
  text-align: center;
  padding: 10px 8px;
}

.districtTable__badge{
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    /* border: 2px solid rgba(255, 255, 255, .85); */
    color: #11334C;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    background: #fff;
}

.districtTable__name{
  background: var(--c-name);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 10px 14px;
  white-space: nowrap;
}

.districtTable__value{
  background: var(--c-value);
  text-align: center;
  padding: 10px 12px;
  font-size: 3.0rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color .18s ease;
  white-space: nowrap;
}

.districtTable__value i {
	transform: scale(1);
	transition: transform .18s ease;
	transform-origin: left center;
	display: inline-block;
}

.districtTable__unit{
  font-size: 0.8em;
  font-weight: 800;
}

.districtTable__row{
  cursor: pointer;
}

.radiusTop {
	border-radius: 16px 0 0 0;
}

.districtTable__note{
  margin: 10px 0 0;
  font-size: 1.4rem;
  text-align: right;
  color: #333;
}

/* ---------------------------------------------------------
  Hover Sync (No JS)
  - 1〜8: 地図 ↔ テーブル 連動
  - 9(市域全体): テーブルのみ
--------------------------------------------------------- */

/* 1 */
.districtStats:has(.districtTable__row[data-id="1"]:hover, .tsukubaMap .area[data-id="1"]:hover) .districtTable__row[data-id="1"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="1"]:hover, .tsukubaMap .area[data-id="1"]:hover) .districtTable__row[data-id="1"] .districtTable__value{ background: var(--c-valueHover); }
.districtStats:has(.districtTable__row[data-id="1"]:hover, .tsukubaMap .area[data-id="1"]:hover) .districtTable__row[data-id="1"] .districtTable__value i{transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="1"]:hover, .tsukubaMap .area[data-id="1"]:hover) .tsukubaMap .area[data-id="1"]{ fill: var(--c-mapHover); }

/* 2 */
.districtStats:has(.districtTable__row[data-id="2"]:hover, .tsukubaMap .area[data-id="2"]:hover) .districtTable__row[data-id="2"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="2"]:hover, .tsukubaMap .area[data-id="2"]:hover) .districtTable__row[data-id="2"] .districtTable__value{ background: var(--c-valueHover); }
.districtStats:has(.districtTable__row[data-id="2"]:hover, .tsukubaMap .area[data-id="2"]:hover) .districtTable__row[data-id="2"] .districtTable__value i{ transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="2"]:hover, .tsukubaMap .area[data-id="2"]:hover) .tsukubaMap .area[data-id="2"]{ fill: var(--c-mapHover); }

/* 3 */
.districtStats:has(.districtTable__row[data-id="3"]:hover, .tsukubaMap .area[data-id="3"]:hover) .districtTable__row[data-id="3"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="3"]:hover, .tsukubaMap .area[data-id="3"]:hover) .districtTable__row[data-id="3"] .districtTable__value{ background: var(--c-valueHover); }
.districtStats:has(.districtTable__row[data-id="3"]:hover, .tsukubaMap .area[data-id="3"]:hover) .districtTable__row[data-id="3"] .districtTable__value i{transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="3"]:hover, .tsukubaMap .area[data-id="3"]:hover) .tsukubaMap .area[data-id="3"]{ fill: var(--c-mapHover); }

/* 4 (研究学園：青い円) */
.districtStats:has(.districtTable__row[data-id="4"]:hover, .tsukubaMap .area[data-id="4"]:hover) .districtTable__row[data-id="4"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="4"]:hover, .tsukubaMap .area[data-id="4"]:hover) .districtTable__row[data-id="4"] .districtTable__value{ background: var(--c-valueHover);}
.districtStats:has(.districtTable__row[data-id="4"]:hover, .tsukubaMap .area[data-id="4"]:hover) .districtTable__row[data-id="4"] .districtTable__value i{transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="4"]:hover, .tsukubaMap .area[data-id="4"]:hover) .tsukubaMap .area[data-id="4"]{ fill: var(--c-mapHover); }

/* 5 */
.districtStats:has(.districtTable__row[data-id="5"]:hover, .tsukubaMap .area[data-id="5"]:hover) .districtTable__row[data-id="5"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="5"]:hover, .tsukubaMap .area[data-id="5"]:hover) .districtTable__row[data-id="5"] .districtTable__value{ background: var(--c-valueHover); }
.districtStats:has(.districtTable__row[data-id="5"]:hover, .tsukubaMap .area[data-id="5"]:hover) .districtTable__row[data-id="5"] .districtTable__value i{transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="5"]:hover, .tsukubaMap .area[data-id="5"]:hover) .tsukubaMap .area[data-id="5"]{ fill: var(--c-mapHover); }

/* 6 (TX沿線：青い楕円) */
.districtStats:has(.districtTable__row[data-id="6"]:hover, .tsukubaMap .area[data-id="6"]:hover) .districtTable__row[data-id="6"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="6"]:hover, .tsukubaMap .area[data-id="6"]:hover) .districtTable__row[data-id="6"] .districtTable__value{ background: var(--c-valueHover); }
.districtStats:has(.districtTable__row[data-id="6"]:hover, .tsukubaMap .area[data-id="6"]:hover) .districtTable__row[data-id="6"] .districtTable__value i{transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="6"]:hover, .tsukubaMap .area[data-id="6"]:hover) .tsukubaMap .area[data-id="6"]{ fill: var(--c-mapHover); }

/* 7 */
.districtStats:has(.districtTable__row[data-id="7"]:hover, .tsukubaMap .area[data-id="7"]:hover) .districtTable__row[data-id="7"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="7"]:hover, .tsukubaMap .area[data-id="7"]:hover) .districtTable__row[data-id="7"] .districtTable__value{ background: var(--c-valueHover); }
.districtStats:has(.districtTable__row[data-id="7"]:hover, .tsukubaMap .area[data-id="7"]:hover) .districtTable__row[data-id="7"] .districtTable__value i{transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="7"]:hover, .tsukubaMap .area[data-id="7"]:hover) .tsukubaMap .area[data-id="7"]{ fill: var(--c-mapHover); }

/* 8 */
.districtStats:has(.districtTable__row[data-id="8"]:hover, .tsukubaMap .area[data-id="8"]:hover) .districtTable__row[data-id="8"] .districtTable__name{ background: var(--c-nameHover); }
.districtStats:has(.districtTable__row[data-id="8"]:hover, .tsukubaMap .area[data-id="8"]:hover) .districtTable__row[data-id="8"] .districtTable__value{ background: var(--c-valueHover); }
.districtStats:has(.districtTable__row[data-id="8"]:hover, .tsukubaMap .area[data-id="8"]:hover) .districtTable__row[data-id="8"] .districtTable__value i{transform: scale(1.15); }
.districtStats:has(.districtTable__row[data-id="8"]:hover, .tsukubaMap .area[data-id="8"]:hover) .tsukubaMap .area[data-id="8"]{ fill: var(--c-mapHover); }

/* 9（市域全体）：テーブルのみ（地図は変えない） */
.districtTable__row[data-id="9"]:hover .districtTable__name{ background: var(--c-nameHover); }
.districtTable__row[data-id="9"]:hover .districtTable__value{ background: var(--c-valueHover); }
.districtTable__row[data-id="9"]:hover .districtTable__value i{transform: scale(1.15); }

/* ---------------------------------------------------------
  課題の特徴
--------------------------------------------------------- */

#features {
	margin: 0 0 80px;
}

#features .featuresBox {
	max-width: 800px;
	background: #fff;
	border-radius: 20px;
	padding: 10px 80px;
	margin: 0 auto;
}

#features .featuresBox .featuresTit {
	  text-align: center;
    font-size: 2.4rem;
    color: #184C71;
    font-weight: bold;
    margin: 0 0 20px;
}

#features ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3つ横並び */
  gap: 0; /* 等間隔は列幅で担保（必要なら余白はli側で調整） */
  margin: 0;
  padding: 0;
  list-style: none;
}

#features ul > li{
  display: grid;                 /* divとpの高さを揃えやすくする */
  grid-template-rows: 1fr auto;  /* div領域を揃え、pは下に */
  justify-items: center;         /* 中央寄せ（必要なら削除） */
  align-items: start;
}

/* <div> の高さを全て揃える（画像枠を同じ高さに） */
#features ul > li > div{
  height: 120px;                 /* 好みで調整 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* imgは枠内に収める */
#features ul > li > div > img{
  max-height: 100%;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
}

/* <p> の高さを全て揃える */
#features ul > li > p{
  margin: 12px 0 0;
  min-height: 3.2em;             /* 2行想定（必要に応じて調整） */
  line-height: 1.6;
  text-align: center;            /* 必要なら削除 */
}

@media (max-width: 800px){
  /* liを縦並び（1列） */
  #features ul{
    grid-template-columns: 1fr;
    row-gap: 16px; /* 必要なら調整 */
  }

  /* li内は div と p を横並び＋上下中央 */
  #features ul > li{
    grid-template-rows: none;
    grid-template-columns: auto 1fr; /* 左：画像枠 右：テキスト */
    column-gap: 16px;                /* 必要なら調整 */
    align-items: center;             /* ★上下中央 */
    justify-items: start;
  }

  /* 画像枠（高さは維持しつつ、横並び用に幅を持たせる） */
  #features ul > li > div{
    height: 80px;    /* 必要なら調整（全liで揃う） */
    width: 80px;     /* 必要なら調整 */
    flex: 0 0 auto;
  }

  /* pは中央揃えのまま＋上下中央 */
  #features ul > li > p{
    margin: 0;                 /* 横並びなので上余白は消す */
    min-height: 0;             /* 縦並び時の固定を解除 */
    text-align: center;        /* 指示通り「今と同じ」 */
    display: flex;
    align-items: center;       /* ★上下中央（p内の文字） */
    justify-content: center;   /* ★左右中央（p内の文字） */
  }
}

/* ---------------------------------------------------------
  各種データ情報
--------------------------------------------------------- */

#dataArea {
	margin: 0 0 100px;
}

.dataBox {
	margin: 0 0 60px;
}

/* タイトル（アイコン＋見出し） */
.dataBoxTit {
	    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
		margin: 0 0 20px;

}

.dataBoxTit p{
    font-size: 2.4rem;
    font-weight: bold;
    color: #184C71;
}
/* .dataBox.population .dataBoxTit {
	    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

}
.dataBox.population .dataBoxTit p {
    font-size: 2.4rem;
    font-weight: bold;
    color: #184C71;
}

.dataBox.population .dataBoxTit img{
	max-width: 142px;
  height: auto;
  display: block;
} */

/* 人口 */
.dataBOx.population{
  padding: 36px 24px 32px;
  text-align: center;
  max-width: 1100px;             /* 任意：中央寄せしたい場合 */
  margin: 0 auto;                /* 任意 */
}



.dataBox.population li > p {
    margin: 0;
    font-size: 6.4rem;
    font-weight: bold;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
}

/* 数値2カラム */
.dataBox.population ul{
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 90px;              /* 2つの間隔 */
  justify-content: center;
  align-items: start;            /* 数値行の高さを揃える */
}

/* 各ブロック */
.dataBox.population li{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* メイン数値 */
.dataBox.population li > p{
  margin: 0;
  font-size: 72px;               /* 大きな数字 */
  font-weight: 800;
  line-height: 1;
  color: #000;

  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

/* 単位（人 / 世帯） */
.dataBox.population li > p > span {
    font-size: 2.4rem;
    font-weight: bold;
}

/* 注記（令和6年10月1日現在） */
.dataBox.population li > span {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #000;
    line-height: 1.2;
}

/*-- 国際研究都市 -----*/
/* ========= academyCity ========= */

.dataBox.academyCity{
  /* 背景の緑は不要とのことなので指定しない */
  padding: 3.2rem 2.4rem 3.6rem;
  text-align: center;
}

/* タイトル（アイコン＋見出し） */
/* .dataBox.academyCity .dataBoxTit{
  display: grid;
  place-items: center;
  row-gap: 1.0rem;
  margin-bottom: 2.4rem;
}

.dataBox.academyCity .dataBoxTit img{
  width: 12rem;
  height: auto;
  display: block;
}

.dataBox.academyCity .dataBoxTit p{
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  color: #1f4f5f;
  letter-spacing: .02em;
} */

/* 5項目：上段3 / 下段2（右下は空き） */
.dataBox.academyCity ul{
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: 6.0rem;
  row-gap: 3.2rem;
  justify-content: center;
  align-items: start;
}

/* 1項目：丸ラベル＋数値 */
.dataBox.academyCity li{
  display: flex;
  align-items: center;     /* 丸と数値を上下中央 */
  gap: 1.6rem;
}

/* 丸ラベル（1つ目の p） */
.dataBox.academyCity li > p:first-child{
  margin: 0;

  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: #fff;

  display: flex;
  align-items: center;     /* ラベル文字上下中央 */
  justify-content: center; /* ラベル文字左右中央 */
  text-align: center;

  font-size: 1.8rem;       /* 指定 */
  font-weight: 700;
  line-height: 1.15;
}

/* 数値（2つ目の p） */
.dataBox.academyCity li > p:nth-child(2){
  margin: 0;

  font-size: 6.4rem;       /* 指定 */
  font-weight: 800;
  line-height: 1;

  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  white-space: nowrap;
  color: #000;
}

/* 単位（人） */
.dataBox.academyCity li > p:nth-child(2) > span{
  font-size: 2.4rem;       /* 指定 */
  font-weight: 700;
}


.dataBox.basicData {
	  padding: 3.2rem 2.4rem 3.6rem;
    text-align: center;
}

/* .dataBox.basicData .dataBoxTit {
	display: grid;
    place-items: center;
    row-gap: 1.0rem;
    margin-bottom: 2.4rem;
}

.dataBox.basicData .dataBoxTit img {
	width: 13.2rem;
    height: auto;
    display: block;
}

.dataBox.academyCity .dataBoxTit p {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1f4f5f;
    letter-spacing: .02em;
} */

/* =========================
   dataCont
   ========================= */
.dataCont {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* カード */
.dataCont > li {
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* タイトル */
.dataContTit {
  width: 100%;
  font-size: 2.4rem;
  color: #184C71;
  font-weight: bold;
  line-height: 1.2;
  padding-bottom: 12px;
  position: relative;
}

/* タイトル下の区切り線 */
.dataContTit::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
  margin-top: 12px;
}

/* タイトル内の補足（指定厳守） */
.dataContTit span {
  font-size: 1.4rem;
  color: #184C71;
  font-weight: bold;
  margin-left: 0.6rem;
}

/* 数値エリア */
.dataContINfo {
  width: 100%;
  padding-top: 14px;
}

/* 数値（指定厳守：colorは指定しない） */
.dataContNume {
  font-size: 5rem;
  font-weight: bold;
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

/* 単位（指定厳守：colorは指定しない） */
.dataContNume span {
  font-size: 2rem;
  font-weight: bold;
  margin-left: 0.4rem;
  vertical-align: baseline;
  white-space: nowrap;
}

/* 参照（指定厳守：color/weightは指定しない） */
.dataContRefere {
  font-size: 1.4rem;
  line-height: 1.4;
  margin: 0;
}

/* =========================
   Responsive（<= 800pxで2列）
   ========================= */
@media (max-width: 800px) {
  .dataCont {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .dataCont > li {
    padding: 18px 14px 14px;
    border-radius: 16px;
  }
}

/* =========================================================
  LINK 参考サイト
========================================================= */

#linkList .linkBox {
    max-width: 968px;
    margin: 0 auto;
}

#linkList .linkBox ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2%;
}

#linkList .linkBox ul li {
	height: 50px;
	width: calc(calc(100% / 3) - 2%);
}

#linkList .linkBox ul li a {
	display: flex;
	position: relative;
	background: #184C71;
	color: #fff;
	font-size: 1.8rem;
	height: 100%;
	width: 100%;
	border-radius: 10px;
	align-items: center;
	justify-content: center;
}

#linkList .linkBox ul li a::after {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background: url(/wp-content/themes/tsukubaai/img/top/icon-link.svg) center center no-repeat;
	right: 8px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	position: absolute;
}