/* HOT TOPICS */
.hot-topics {
 overflow: visible;
}

.section-title-hot {
}

.view-more-hot {
}

.hot-topics__slider {
 margin-top: 20px;
 position: relative;
 height: auto;
 padding-bottom: 60px; /* ドットのぶん余白を確保 */
}

.hot-topics__item {
 flex: 0 0 auto;
 width: 280px;

 text-align: center;
}

.hot-topics__item img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
}

.hot-topics__caption {
 margin-top: 12px;
 font-size: 24px;
 color: #717171;
 text-decoration: none;
}

.caption {
 text-decoration: none;
 position: relative;
 margin: 10px 0 0;
 padding: 16px 24px; /* 左の縦線ぶんの余白 */
 font-size: 15px;
 font-weight: 500;
 line-height: 1.4;
 color: #000;
 text-align: left;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 border-left: 2px solid #bfbfbf;
}

/* captionのリンク下線を確実に無効化 */
.slide a .caption {
 text-decoration: none !important;
 color: inherit;
 white-space: nowrap; /* 改行をしない */
 overflow: hidden; /* はみ出した部分を非表示 */
 text-overflow: ellipsis; /* はみ出した部分を「…」で省略表示 */
 display: block; /* text-overflowを効かせるために必要 */
 color: #000000;
}
.slide a .caption::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 height: 3px; /* 太さ調整 */
 background: linear-gradient(90deg, #bfbfbf 0%, #bfbfbf 92%, #ffd400 92%, #ffd400 100%);
}
.slide a .caption::after {
 content: "";
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 height: 3px;
 z-index: 0;
 transform: scaleX(0);
 transform-origin: right top;
 transition: 0.6s ease-out transform;
 background: #ffd400;
}

/* または全リンクに適用 */
.slide a {
 text-decoration: none !important;
}

.slide-media {
 object-position: center;
 object-fit: cover;
}

/* 横並び＆アニメート */
.slider-track {
 display: flex;
 gap: 10px; /* スライド間の隙間を消す */
 transition: transform 0.6s ease;
 height: auto;
}

/* ドラッグ中のカーソル */
.slider-track:active {
 cursor: grabbing;
}

/* 各スライド */
.slide {
 position: relative;
 overflow: hidden; /* 拡大分をマスク */
 opacity: 0.25;
 transition: opacity 0.6s ease;
 height: auto;
}

.slide::before {
 /* 画像だけマスクするための擬似要素 */
 content: none;
 position: absolute;
 inset: 0;
 background: #000;
 opacity: 0; /* 見えないマスク */
 pointer-events: none;
}

.slide a {
 display: block;
 position: relative;
}

.slide a .image {
 display: block;
 overflow: hidden;
 position: relative;
}

.slide img {
 width: 100%;
 height: calc(100vh - var(--header-height) - 30vh);
 height: auto;
 aspect-ratio: 16 / 9;
 object-fit: cover;
 position: relative;
 transition: all 0.4s ease;
}

/* .hot-topics__slider .slide.active img {
 transform: none !important;
}

.hot-topics__slider .slide.active {
 top: 0 !important;
} */

@media (min-width: 769px) {
 .slide a:hover img {
  transform: scale(1.1);
 }
 .slide a:hover .caption::after {
  transform-origin: left top;
  transform: scaleX(1);
 }
}

/* ─────────  PC 用 (769px 以上)  ───────── */
@media (min-width: 601px) {
 /* 画像・動画共通 */
 .slide-media {
  width: 100%;
  height: 100%; /* ★高さも 100% に固定 */
  object-fit: contain; /* 枠内に全体を収める（レターボックス） */
  object-position: center;
  background: #000; /* 余白を目立たせたくなければ任意色で */
 }

 /* もし画像は cover のまま切り抜きたい → 動画だけ切替 */
 /* .slide-video { object-fit: contain; } */
}

@media (max-width: 768px) {
 .hot-topics {
  padding-top: 140px;
 }
}

@media (max-width: 600px) {
 .hot-topics {
  margin-top: 0;
  height: auto;
  margin-bottom: 10px;
  padding-top: 80px;
 }
 .hot-topics__slider {
  margin-top: 0;
  padding-bottom: 40px;
 }
 .hot-topics__header .view-more-hot {
  font-size: 1rem; /* お好みで調整（例：16px相当） */
  top: 120px;
 }
 .caption {
  margin: 10px 0 0;
  padding: 12px 15px;
  font-size: min(14px, 3.73vw);
  border-left: 2px solid #bfbfbf;
 }
 .slide a .caption::before {
  height: 2px;
 }
 .slide a .caption::after {
  content: none;
 }

 .hot-topics__header {
  position: relative;
 }

 .section-title-hot {
 }

 .slide-media {
  width: 80%;
  height: auto;
  max-height: 250px;
  object-fit: cover;
 }

 .view-more-hot {
 }

 .slider-arrow {
  display: none;
 }

 .slide {
  height: auto; /* ← これが一番重要 */
  opacity: 1; /* お好みで */
  top: 0;
 }

 /* 画像/動画の高さも固定を解除 */
 .slide img,
 .slide video,
 .slide-media {
  width: 100%;
  height: 200px;
  max-height: none; /* 250px制限も外したい場合 */
 }

 .slide-img {
  height: 200px;
 }

 /* 横の余白を少しだけに */
 .slider-track {
  gap: 16px;
 }
}