/* タブメニュー */
.tab-menu {
    display: flex;
    justify-content: space-around;
    position: relative;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.tab-item {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 20px;
    position: relative;
    transition: color 0.3s ease;
}

.tab-item.active {
    color: #28A06C;
}

/* 下線アニメーション */
.tab-underline {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 33.33%;
    height: 3px;
    background-color: #28A06C;
    transition: all 0.3s ease;
}

/* タブコンテンツ */
.tab-panel {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.tab-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.tab-content .tab-panel ul {
    list-style: none;
}

.tab-content .tab-panel ul li::before {
    content: "•"; /* 点を表示 */
    color: black;
    font-size: 1em;
    margin-right: 8px;
}

/* Item4 用タブ（保育時間）のスタイル 修正版 */
.tab-container-info {
  margin-top: 80px;
  max-width: 1024px;
}

/* UL のデフォルト余白リセット */
.tab-menu-info {
  list-style: none;
  margin: 0;
  padding: 0 0 10px 0; /* 上下の余白は残す場合 */
  display: flex;
  justify-content: space-around;
  position: relative;
  /* ここで border-bottom を削除 */
  margin-bottom: 20px;
}

.tab-item-info {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 10px 20px;
  position: relative;
  transition: color 0.3s ease;
}

.tab-item-info.active {
  color: #28A06C;
}

.tab-underline-info {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #28A06C;
  transition: all 0.3s ease;
}

.tab-content-info .tab-panel-info {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tab-content-info .tab-panel-info.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ▼ 「保育時間」タブ内の大区分ごと（<div>）をカード風に ------- */
.tab-panel-info > div {
  margin-bottom: 20px;            /* 下にスペース */
  padding: 16px;                  /* カード内余白 */
  border-radius: 8px;            /* 角を丸める */
}

/* ▼ カード内で最初の<p>は見出し扱い ---------------------------- */
.tab-panel-info > div > p:first-child {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: bold;
  color: #28A06C;                 /* 例：テーマカラーで強調 */
  font-size: 18px;               /* 少し大きめに */
}

/* ▼ 通常の本文スタイル ----------------------------------------- */
.tab-panel-info p {
  margin: 4px 0;
  line-height: 1.6;
  color: #000;
}

/* ▼ ネストされた <div> を「詳細情報枠」として強調 -------------- */
.tab-panel-info > div > div {
  margin-top: 8px;
  border-radius: 4px;
}

/* ▼ ネスト枠内のテキスト（詳細項目） --------------------------- */
.tab-panel-info > div > div p {
  margin: 2px 0;
  font-size: 16px;
  color: #000;
  line-height: 1.5;
}

@media screen and (max-width: 1024px) {
  /* さらに見出しやタブなど大きめ文字を個別に調整 */
  .tab-item-info,
  .tab-item
  {
    font-size: 14px; /* 基準14pxに対して1rem = 14px */
    padding: 10px 0;
  }

  /* カード内なども適宜微調整 */
  .tab-panel-info > div {
    padding: 12px; /* 余白を少し減らしてコンパクトに */
  }

  .tab-panel-info > div > p:first-child {
    margin-bottom: 6px;
    font-size: 1rem; /* タイトル文字をやや小さめに */
  }

  .tab-panel-info > div > div p {
    font-size: 14px;
  }
}