/* 全体センター。中身は“最長行の幅”で中央に見せる */
.text-grid {
  text-align: center;
  padding: 40px 20px;
  font-family: inherit;
}

/* 最長行にフィットする“器”。これを中央に置く */
.text-grid-inner {
  display: inline-block;  /* shrink-to-fit → 最長行幅に収まる */
  text-align: left;       /* 中の文字は左揃え */
}

/* 各行：左に pref（県名ボックス）、右に本文。本文は折り返し可 */
.text-grid-inner p {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;             /* pref と本文のすきま */
  margin: 1em 0;          /* 各行の上下余白 */
  line-height: 1.8;
}

/* タイトル行（＜対応エリア＞）だけは通常ブロック＋中央＆少し大きく太字 */
.text-grid-inner p:first-child {
  display: block;         /* ← flexを解除 */
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); /* 少しだけ大きく */
  letter-spacing: 0.02em;
  margin-bottom: 1.2em;
}

/* 行頭の県名バッジ（背景つきの四角） */
.text-grid-inner .pref {
  flex: none;             /* 県名ボックスは縮めない */
  display: inline-block;
  padding: 0.45em 1.0em;  /* ←天地左右の余白を広めに */
  background: #dcebd3;    /* お好みで変更可 */
  border: none;
  border-radius: 0.35em;  /* 角丸。pill風にしたければ 9999px も可 */
  font-weight: normal;    /* 他と同じ太さ */
  line-height: 1.2;
  white-space: nowrap;    /* 県名で改行しない */
}

/* SP版（780px以下） */
@media screen and (max-width: 780px) {
  .text-grid-inner p {
    display: block;        /* 横並びを解除して縦並びに */
    text-align: left;    /* 全体を中央寄せ */
    font-size: 14px;       /* SP版は14px固定 */
    line-height: 1.6;      /* 読みやすく少し詰める */
  }

  .text-grid-inner .pref {
    display: block;        /* バッジを1行占有させる */
    margin: 0 auto 0.5em;  /* 中央寄せ＋下に余白 */
    text-align: center;
  }
}