/* 吹き出しラベル（中央） */
.bubble-label {
  display: inline-block;
  background: #27ae60;
  color: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: 50px;
  font-size: 1.2rem;
  font-weight: bold;
  position: relative;
  margin-bottom: 1rem;
}
.bubble-label::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 30px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top-color: #27ae60;
}

/* 吹き出しラベル（左） */
.bubble2-label {
  display: block;
  background: #27ae60;
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: 50px;
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
  margin: 2rem 0 1rem 0; /* 左寄せ */
  width: fit-content; /* ラベル幅をテキストに合わせる */
}
.bubble2-label::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 30px; /* 三角形の位置を調整 */
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top-color: #27ae60;
}


/* テーブル */
.sdgs-table {
  margin: 2rem auto;
  border-spacing: 30px; /* セル間の余白 */
}
/* セルデザイン */
.sdgs-table td {
  background: #fff;
  border-radius: 12px;
  padding: 30px; /* 内側の余白 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 300px; /* セルの幅 */
}
/* 画像デザイン */
.sdgs-table td img {
  width: 200px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}
/* 施設名 */
.sdgs-table td p {
  margin-top: 8px;
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
}
 
.facility-container {
  display: flex;
  align-items: flex-start; /* 上端を揃える */
  gap: 30px; /* 画像とリストの間隔 */
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  max-width: 900px;
  margin: 1px auto;
}

.facility-container img {
  width: 250px;
  border-radius: 8px;
  flex-shrink: 0; /* 画像サイズを固定 */
}

.facility-details {
  flex: 1; /* 残りのスペースをリストに */
  text-align: left;
}

.facility-details h3 {
  margin-top: 0;
  font-size: 1.4rem;
  color: #27ae60;
  margin-bottom: 10px;
}

/* リストのカスタム黒丸 */
.facility-details ul {
  list-style: none; /* デフォルトの黒丸を消す */
  padding-left: 0;
  margin: 0;
}

/* リスト項目のレイアウト（左に円形バッジ） */
.facility-details li {
  position: relative;
  padding-left: 36px;    /* バッジ分の左余白 */
  margin-bottom: 12px;
  line-height: 1.6;
}

/* 共通のバッジ見た目 */
.facility-details li::before {
  content: "";              /* .goalX で番号を入れる */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #999;         /* フォールバック（goalXなしの時） */
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;       /* 2桁でも見やすい */
  line-height: 1;
  box-shadow: 0 0 0 2px #fff;
}

/* ===== SDGs公式カラー + 番号（li に goalX がある場合に確実にヒット） ===== */
.facility-details li.goal1::before  { background: #E5243B; content: "1";  } /* 貧困をなくそう */
.facility-details li.goal2::before  { background: #DDA63A; content: "2";  } /* 飢餓をゼロに */
.facility-details li.goal3::before  { background: #4C9F38; content: "3";  } /* 健康と福祉 */
.facility-details li.goal4::before  { background: #C5192D; content: "4";  } /* 教育 */
.facility-details li.goal5::before  { background: #FF3A21; content: "5";  } /* ジェンダー平等 */
.facility-details li.goal6::before  { background: #26BDE2; content: "6";  } /* 水と衛生 */
.facility-details li.goal7::before  { background: #FCC30B; content: "7";  } /* エネルギー */
.facility-details li.goal8::before  { background: #A21942; content: "8";  } /* 働きがい */
.facility-details li.goal9::before  { background: #FD6925; content: "9";  } /* 産業と技術革新 */
.facility-details li.goal10::before { background: #DD1367; content: "10"; } /* 不平等をなくそう */
.facility-details li.goal11::before { background: #FD9D24; content: "11"; } /* 住み続けられるまちづくり */
.facility-details li.goal12::before { background: #BF8B2E; content: "12"; } /* つくる責任つかう責任 */
.facility-details li.goal13::before { background: #3F7E44; content: "13"; } /* 気候変動対策 */
.facility-details li.goal14::before { background: #0A97D9; content: "14"; } /* 海の豊かさ */
.facility-details li.goal15::before { background: #56C02B; content: "15"; } /* 陸の豊かさ */
.facility-details li.goal16::before { background: #00689D; content: "16"; } /* 平和と公正 */
.facility-details li.goal17::before { background: #19486A; content: "17"; } /* パートナーシップ */



/* リスト内のリンク（施設詳細のULやテーブル内にも適用） */
.facility-details a,
.sdgs-table a,
a { /* 必要なら全体に適用。強すぎる場合は外してもOK */
  color: #27ae60;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ホバー・フォーカスで反応（視認性アップ） */
.facility-details a:hover,
.sdgs-table a:hover,
a:hover,
.facility-details a:focus,
.sdgs-table a:focus,
a:focus {
  color: #1f8f50; /* #27ae60 を少し濃く */
  text-decoration-thickness: 2px;
  outline: none;
}

/* キーボードフォーカスリングを明確に */
.facility-details a:focus-visible,
.sdgs-table a:focus-visible,
a:focus-visible {
  outline: 2px solid #66afe9;
  outline-offset: 2px;
}