/* ===== lifeinfo ===== */

/* ----- カラー変数（カテゴリ別） ----- */
:root {
  --lifeinfo-park:    #007f78; /* 公園・スポーツ施設 */
  --lifeinfo-shop:    #b50066; /* 商業施設           */
  --lifeinfo-medical: #005292; /* 医療施設           */
  --lifeinfo-edu:     #bf7700; /* 教育施設           */
  --lifeinfo-public:  #6d5c1e; /* 公共施設           */
  --lifeinfo-finance: #750069; /* 金融機関           */
}

/* ----- セクション全体 ----- */
.lifeinfo {
  padding: 3% 0 0% 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

/* ----- ヘッダーバー ----- */
.lifeinfo__header {
  background-color: #b3afa8;
  padding: 1.2% 3%;
  margin-bottom: 4%;
}

.lifeinfo__heading {
  color: #f2ede8;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  letter-spacing: 0.15em;
  font-weight: 400;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

/* ----- インナー ----- */
.lifeinfo__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0%;
}

/* ----- カテゴリブロック（全幅：公園・商業） ----- */
.lifeinfo__block {
  margin-bottom: 4%;
}

/* ----- カテゴリタイトル（共通） ----- */
.lifeinfo__title {
  font-size: clamp(1.0rem, 1.6vw, 1.2rem);
  letter-spacing: 0.25em;
  font-weight: 400;
  margin-bottom: 1.8%;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
}

/* ----- タイトル色（カテゴリ別） ----- */
.lifeinfo__block--park    .lifeinfo__title { color: var(--lifeinfo-park);    }
.lifeinfo__block--shop    .lifeinfo__title { color: var(--lifeinfo-shop);    }
.lifeinfo__half--medical  .lifeinfo__title { color: var(--lifeinfo-medical); }
.lifeinfo__half--edu      .lifeinfo__title { color: var(--lifeinfo-edu);     }
.lifeinfo__half--public   .lifeinfo__title { color: var(--lifeinfo-public);  }
.lifeinfo__half--finance  .lifeinfo__title { color: var(--lifeinfo-finance); }

/* ----- 2カラムリスト（公園・商業） ----- */
.lifeinfo__2col {
  display: flex;
  gap: 0 4%;
}

.lifeinfo__2col .lifeinfo__list {
  flex: 1;
}

/* ----- リスト共通 ----- */
.lifeinfo__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ----- リストアイテム ----- */
.lifeinfo__item {
  display: flex;
  align-items: baseline;
  padding: 0.35% 0;
}

/* ----- 番号サークル（共通） ----- */
.lifeinfo__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.1rem, 1.4vw, 1.25rem);
  height: clamp(1.1rem, 1.4vw, 1.25rem);
  min-width: clamp(1.1rem, 1.4vw, 1.25rem);
  color: #fff;
  border-radius: 50%;
  font-size: clamp(0.55rem, 0.75vw, 0.68rem);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  flex-shrink: 0;
  margin-right: 0.6em;
  line-height: 1;
}

/* ----- 番号サークル色（カテゴリ別） ----- */
.lifeinfo__block--park    .lifeinfo__num { background-color: var(--lifeinfo-park);    }
.lifeinfo__block--shop    .lifeinfo__num { background-color: var(--lifeinfo-shop);    }
.lifeinfo__half--medical  .lifeinfo__num { background-color: var(--lifeinfo-medical); }
.lifeinfo__half--edu      .lifeinfo__num { background-color: var(--lifeinfo-edu);     }
.lifeinfo__half--public   .lifeinfo__num { background-color: var(--lifeinfo-public);  }
.lifeinfo__half--finance  .lifeinfo__num { background-color: var(--lifeinfo-finance); }

/* ----- 2桁（10）用 ----- */
.lifeinfo__num--dbl {
  font-size: clamp(0.45rem, 0.6vw, 0.55rem);
}

/* ----- 施設名 ----- */
.lifeinfo__name {
  font-size: clamp(0.75rem, 1.0vw, 0.875rem);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ----- ドットリーダー ----- */
.lifeinfo__dots {
  flex: 1;
  border-bottom: 1px dotted #b0aba4;
  margin: 0 0.5em 0.28em;
  min-width: 0.5em;
}

/* ----- 徒歩時間 ----- */
.lifeinfo__time {
  font-size: clamp(0.75rem, 1.0vw, 0.875rem);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ----- ツインレイアウト（医療|教育 / 公共|金融） ----- */
.lifeinfo__twin {
  display: flex;
  gap: 0 5%;
  margin-bottom: 4%;
  align-items: flex-start;
}

.lifeinfo__half {
  flex: 1;
}

/* ----- 注釈テキスト ----- */
.lifeinfo__note {
  font-size: clamp(0.65rem, 0.85vw, 0.75rem);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: #666;
  margin-top: 3%;
  letter-spacing: 0.02em;
}

/* ===== /lifeinfo ===== */