/* ▼0. 念のため強制的に全ての左線を除去 */
.custom-topics-news,
.custom-topics-news .topics-column,
.custom-topics-news > div:first-child {
  border-left: none !important; /* 左側の境界線を強制的に削除 */
}

/* ▼1. 全体レイアウト */
.custom-topics-news.yht_topix_panel-layout {
  display: flex; /* トピックスとお知らせを横並びにする */
  justify-content: space-between; /* 子要素の間にスペースを均等に設ける */
  align-items: flex-start; /* 子要素の上端を揃える */
  gap: 8px; /* カラム間の隙間 */
  max-width: 1100px; /* 最大幅を1100pxに制限 */
  margin: 50px auto; /* 上下50px、左右は中央寄せ */
  padding: 0 15px; /* 左右に15pxの内側余白 */
  box-sizing: border-box; /* paddingとborderを含めてサイズを計算 */
  position: relative; /* 子要素のabsolute配置の基準にするため */
}

/* ▼2. トピックス（左） */
.custom-topics-news .topics-column {
  width: 50%; /* 横幅を50%に設定 */
  box-sizing: border-box; /* paddingとborderを含めてサイズ計算 */
  padding-left: 0 !important; /* 左パディングを強制的に無効化 */
  margin-left: 0 !important; /* 左マージンも強制的に無効化 */
  position: relative; /* 子要素の配置のために基準を設定 */
}

/* ▼3. お知らせ（右） */
.custom-topics-news .news-column {
  width: 50%; /* 横幅を45%に設定（トピックスより少し小さい） */
  box-sizing: border-box; /* サイズの計算方式を統一 */
  padding-left: 20px; /* 左側に余白を確保 */
  position: relative; /* relativeで子要素に基準を与える */
}

/* ▼4. セクション見出し */
.section-label {
  font-size: 1.3em; /* 見出しの文字サイズ */
  font-weight: normal; /* 太字にする */
  margin-bottom: 15px; /* 下に余白を作る */
}

/* ▼5. 画像3:2レイアウト */
.yht_topix_panel-img-wrapper,
.news-img-box {
  position: relative; /* 内部要素の配置基準にする */
  overflow: hidden; /* はみ出た部分を隠す */
  aspect-ratio: 3 / 2; /* 画像のアスペクト比を3:2に固定 */
}
.yht_topix_panel-img-wrapper img,
.news-img-box img {
  width: 100%; /* 横幅を常に100%に広げる */
  height: 100%; /* 高さも100%（aspect-ratioで維持） */
  object-fit: cover; /* 画像の比率を維持しつつ、枠に収める */
  transition: transform 0.6s ease; /* ホバー時の変化を滑らかに */
  display: block; /* 画像の下に隙間ができないようにする */
}
.yht_topix_panel-img-wrapper:hover img,
.news-img-box:hover img {
  transform: scale(1.05); /* ホバー時に拡大ズーム */
}

/* ▼6. トピックステキスト */
.yht_topix_panel-slide-text {
  font-size: 0.85em; /* 少し小さめの文字サイズ */
  font-weight: bold; /* 強調（太字） */
  margin-top: 10px; /* 上部に余白を追加 */
  color: #000; /* 文字色を黒に設定 */
  text-align: left; /* 左寄せ */
}
.yht_topix_panel-slide-description {
  font-size: 0.75em; /* 説明文は小さめに */
  color: #444; /* グレー系の文字色で読みやすく */
  line-height: 1.6; /* 行間をやや広めに */
  margin-bottom: 20px; /* 下部余白を多めに取る */
}

/* ▼7. お知らせテキスト */
.news-date {
  font-size: 0.65em; /* 小さめの文字サイズで日付を表示 */
  color: #666; /* 薄めのグレー色 */
  margin-top: 10px; /* 上部余白 */
  text-align: left; /* 左寄せ */
}
.news-title {
  font-size: 0.75em; /* タイトルの文字サイズ */
  font-weight: normal; /* 通常の太さ */
  padding: 5px 0 0; /* 上部に余白を少し */
  line-height: 1.6; /* 行間を広めに */
  color: #000; /* 文字色を黒に */
  text-align: left; /* 左揃え */
}

/* ▼8. お知らせ：2列グリッド＋画像間の中央縦線 */
.news-grid {
  display: grid; /* グリッドレイアウトを使用 */
  grid-template-columns: 1fr 1fr; /* 2列構成（均等割） */
  gap: 20px; /* グリッド間の余白 */
  position: relative; /* 擬似要素（縦線）設置のため */
  align-items: start; /* 上揃え */
}
.news-grid::before {
  content: ""; /* 縦線を表示するための空コンテンツ */
  position: absolute; /* 親を基準に絶対配置 */
  top: 0; /* 上から開始 */
  bottom: 0; /* 下まで伸ばす */
  left: 50%; /* グリッドの中央に配置 */
  transform: translateX(-50%); /* 中央揃えのための微調整 */
  width: 1px; /* 線の太さ */
  background-color: #ccc; /* 線の色（薄グレー） */
  z-index: 1; /* 他の要素より前面に */
  pointer-events: none; /* この線では操作できないようにする */
}
.news-grid > div {
  display: flex; /* 子要素を縦並びに */
  flex-direction: column;
  justify-content: flex-start; /* 上から配置 */
}

/* ▼9. ページネーター（YHT_TOPIX_PANEL風） */
.yht_topix_panel-meta-overlay {
  position: absolute; /* 親要素を基準に絶対配置 */
  top: 0px; /* 上に配置 */
  left: 0px; /* 左端に配置 */
  background: black; /* 背景色を黒に */
  color: white; /* 文字色を白に */
  display: flex; /* 中の要素を横並びに */
  align-items: center; /* 垂直中央揃え */
  padding: 5px 10px; /* 内側の余白 */
  z-index: 10; /* 他の要素より前面に出す */
}
.yht_topix_panel-date {
  margin-right: 10px; /* 日付とボタンの間の余白 */
  font-size: 14px; /* 日付の文字サイズ */
}
.yht_topix_panel-page {
  background: #333; /* 背景は暗めのグレー */
  color: white; /* 文字色は白 */
  border: none; /* 枠線なし */
  margin-left: 5px; /* ページボタンの間隔 */
  padding: 5px 10px; /* ボタン内の余白 */
  cursor: pointer; /* カーソルをポインターに */
}
.yht_topix_panel-page.active {
  background: #C0E4DA; /* 現在のページは水色系でハイライト */
}

/* ▼10. スライダー制御（フェード切り替え） */
.yht_topix_panel-slider-wrapper {
  position: relative; /* スライドを重ねるための基準 */
}
.yht_topix_panel-slide {
  display: none; /* 初期状態では非表示 */
}
.yht_topix_panel-slide.active {
  display: block; /* アクティブなスライドだけ表示 */
  animation: fadeIn 0.5s ease-in-out; /* フェードインアニメーションを適用 */
}
@keyframes fadeIn {
  from { opacity: 0; } /* 最初は透明 */
  to   { opacity: 1; } /* 徐々に表示 */
}

/* ▼11. モバイル対応（縦線非表示） */
@media screen and (max-width: 768px) {
  .custom-topics-news.yht_topix_panel-layout {
    flex-direction: column; /* スマホでは縦並びに切り替え */
    padding: 0 10px; /* 横幅の余白を狭める */
  }
  .custom-topics-news .topics-column,
  .custom-topics-news .news-column {
    width: 100%; /* 幅を100%にして1列表示に対応 */
    max-width: 100%;
    padding-left: 0; /* 左パディングを解除 */
  }
  .news-grid {
    grid-template-columns: 1fr; /* グリッドを1列に変更 */
  }
  .news-grid::before {
    display: none; /* 中央の縦線を非表示 */
  }
}

/* ▼12. トピックス・お知らせのリンク共通設定 */
.yht_topix_panel-slide-link {
  display: block; /* ブロック要素として扱う */
  text-decoration: none; /* 下線を消す */
  color: inherit; /* 親の文字色を継承 */
}
.news-item a {
  display: block; /* ブロックとして拡大 */
  text-decoration: none; /* 下線なし */
  color: inherit; /* 親の文字色を継承 */
}

/* ▼13. お知らせ欄の左線を完全に削除 */
.custom-topics-news .news-column {
  border-left: none !important; /* 強制的に左線を削除 */
}

/* ▼14. ページ番号（ボタン）を大きく四角に調整 */
.yht_topix_panel-page {
  background: #333; /* 通常時の背景：グレー */
  color: #fff; /* 白文字 */
  border: none; /* 枠なし */
  padding: 10px 14px 10px; /* 大きめのパディングでボタンを広く */
  font-size: 0.7em; /* 少し大きめの文字サイズ */
  font-weight: bold; /* 太字で視認性アップ */
  cursor: pointer; /* ポインター表示 */
  transition: background 0.3s; /* 背景色がなめらかに変化 */
}
/* PCだけカラム間の余白を広げる おすすめの記事と新着情報のカラムとの間（8px → 24px） */
@media (min-width: 769px) {
  .custom-topics-news.yht_topix_panel-layout {
    gap: 30px !important;
  }
}