/* =========================================
   HOT TOPICS
   ======================================= */
body {
 opacity: 1;
}
.hot-topics-list {
 padding-block: 60px 0;
 height: auto;
 overflow: hidden;
 text-align: left;
}
.hot-topics-list .container {
 max-width: unset;
 width: auto;
 margin: unset;
 padding: unset;
 margin-inline: 60px;
}
.notification-container {
 display: flex;
 align-items: flex-start;
 background: #f2f2f2;
 border-radius: 16px;
 padding: 24px;
 margin-bottom: 60px;
}
.notification-sidebar {
 display: flex;
 flex-direction: column;
 gap: 12px;
 min-width: 400px;
}
.notification-list-wrapper {
 flex: 1;
 padding-left: 24px;
 border-left: 1px solid #ccc;
}
.notification-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 16px;
}
.notification-header h3 {
 color: #00bfff;
 font-size: 1.4rem;
 margin: 0;
}
.notification-toggle {
 background: #fff;
 border: none;
 border-radius: 20px;
 color: #ff69b4;
 padding: 6px 12px;
 cursor: pointer;
 font-size: 0.9rem;
 width: 200px;
}
.notification-list {
 list-style: none;
 margin: 0;
 padding: 0;
}
.notification-list li {
 display: flex;
 margin-bottom: 12px;
}
.notice-date {
 width: 100px;
 color: #777;
 font-size: 0.9rem;
}
.notice-text {
 font-size: 0.9rem;
 color: #555;
 overflow-wrap: break-word;
 word-break: break-word;
 flex: 1;
}

.topics-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 24px;
 justify-content: space-between;
 margin-bottom: 40px;
}

.topic-item {
 width: calc((100% - 48px) / 3); /* 3列 */
}

.topic-image {
 width: 320px;
 height: 180px;
 border-radius: 8px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.topic-image-wrapper {
 width: calc(100vw / 3 - 60px); /* 横幅の1/3 */
 aspect-ratio: 16 / 9; /* 高さは16:9比率で自動計算 */
 overflow: hidden;
 border-radius: 8px;
 position: relative;
}

.topic-image-wrapper a {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 align-items: center;
}

.topic-media {
 width: 100%;
 height: 100%;
 object-fit: cover; /* 縦横比を保ちつつ枠いっぱいに */
 display: block;
 transition: all 0.4s ease;
}

/* 2) 画像は枠いっぱいに拡大させ、切り抜く */
.topic-image {
 width: 100%;
 height: 100%;
 object-fit: cover; /* はみ出し部分をクロップ */
 display: block;
}

a.topic-item-link {
 text-decoration: none;
}
.topic-caption {
 margin-top: 8px;
 font-size: 15px;
 color: #333;
 word-wrap: break-word; /* 古いプロパティ */
 overflow-wrap: break-word; /* 推奨される新しいプロパティ */
 white-space: normal; /* 折り返しを有効にする */
}

.topic-meta {
 margin-top: 4px;
 font-size: 0.9rem;
 color: #999;
}

.new-icon {
 width: 40px;
 height: auto;
 vertical-align: middle;
 margin-left: 4px;
}

/* ---------- more ボタン ---------- */
.more-btn-container {
 width: 100%;
 text-align: center; /* 親で中央寄せ */
 margin: 32px 0;
}

.more-btn {
 display: inline-flex; /* inline-flex にして中央寄せしやすく */
 flex-direction: row; /* 横並び */
 align-items: center; /* アイコンとテキストを縦中央揃え */
 background: none;
 border: none;
 cursor: pointer;
 gap: 8px; /* アイコンとテキストの間隔 */
 padding: 8px 16px; /* 必要に応じて余白調整 */
}

.more-btn img {
 width: 24px; /* お好みでサイズ */
 height: 24px;
 display: block;
}

.more-btn span {
 font-size: 1rem;
 color: #ff69b4; /* ボタン文字色 */
 white-space: nowrap;
}

.topic-media {
 display: block;
 width: 100%;
 height: auto; /* アスペクト比を保って自動調整 */
 object-fit: cover; /* はみ出し分をクロップ（動画にも有効） */
}

@media (min-width: 769px) {
 .topic-image-wrapper a:hover .topic-media {
  transform: scale(1.1);
 }
}

/* ---------- レスポンシブ (≤768px) ---------- */
@media (max-width: 768px) {
 .hot-topics {
  height: auto;
 }
 .hot-topics-list .container {
  margin-inline: 30px;
 }
 /* 通知エリアを縦並びに */
 .notification-container {
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  margin-bottom: 60px;
 }

 /* 見出し＋ボタンは横並び */
 .notification-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 項目同士のスペース */
  min-width: auto; /* PC用の min-width を解除 */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px; /* 下の線との隙間 */
 }

 .notification-toggle {
  width: auto; /* 固定幅をやめる */
  padding: 6px 12px; /* 高さ・左右の余白はそのまま */
  align-self: center; /* ボタン縦中央寄せ */
 }

 /* リスト部分はその下に */
 .notification-list-wrapper {
  /* PC用の左ボーダーを消して上に線を引き直す */
  border-left: none !important;
  border-top: 1px solid #ccc;
  padding: 12px 0 0 !important;
  margin: 0;
 }

 /* リスト項目は普通に縦積み */
 .notification-list li {
  display: flex;
  margin-bottom: 12px;
 }

 .topic-item {
  width: calc((100% - 24px) / 2);
 }

 .topic-image-wrapper {
  height: auto;
  width: 100%;
 }
}

@media (max-width: 600px) {
 #hot-topics-list {
  padding-block: 30px 0;
  overflow: visible;
 }
 .hot-topics-list .container {
  margin-inline: 20px;
 }
 .notification-container {
  padding: 18px;
  margin-bottom: 30px;
 }
 .topics-grid {
  margin-bottom: 30px;
 }
 .topic-item {
  width: 100%;
 }
 .topic-meta {
  margin-top: 10px;
 }
 .topic-caption {
  font-size: 14px;
 }
 .more-btn-container {
  margin: 15px 0;
 }
}