.slider-arrow {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 width: 48px;
 height: 48px;
 border: 0;
 background: none;
 cursor: pointer;
 z-index: 20;
 display: none;
}

.slider-arrow--left {
 left: 16px;
}

.slider-arrow--right {
 right: 16px;
}

.slider-arrow img {
 width: 90%;
 height: auto;
}

.slider-dots {
 position: absolute;
 left: 50%; /* 画面中央に基準 */
 bottom: 16px; /* 下からの位置はそのまま */
 transform: translateX(-50%); /* 中央に揃えるために半分戻す */
 display: flex;
 gap: 12px;
 list-style: none;
 padding: 0;
 margin: 0;
}

.slider-dots li {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #c0c0c0;
 opacity: 0.6;
 transition: opacity 0.3s;
}

.slider-dots li.active {
 background: #505050;
 opacity: 1;
}

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

/* ドラッグ中のカーソル */
.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.active {
 opacity: 1;
 /*  z-index: 5;
 top: -10px; */
}

.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;
}

/* .slide.active img {
 transform: scale(1.08);
} */

/* 中央スライド用：下からスライドイン */
@keyframes slideInFromBottom {
 from {
  transform: translateY(250px);
  opacity: 0;
 }

 to {
  transform: translateY(0);
  opacity: 1;
 }
}

/* 左右スライド用：上からスライドイン */
@keyframes slideInFromTop {
 from {
  transform: translateY(-250px);
  opacity: 0;
 }

 to {
  transform: translateY(0);
  opacity: 1;
 }
}

/* 初期表示時にだけ付与するクラス */
/* .hot-topics__slider .slide.init-center {
 animation: slideInFromBottom 0.8s ease-out forwards;
}

.hot-topics__slider .slide.init-side {
 animation: slideInFromTop 0.8s ease-out forwards;
} */

@media (max-width: 768px) {
 .slider-track {
  gap: 16px; /* スマホでは少し狭くしておく */
 }
 .slide {
  width: 100% !important; /* JS の幅計算を無効化 */
 }
 /* --- 1) スライド画像を横幅いっぱい、高さ自動に --- */
 .hot-topics__slider .slide img {
  width: 100% !important; /* 横幅100% */
  height: 50vw !important; /* 高さは自動 → アスペクト比を維持 */
  object-fit: cover; /* 余白部分ができても中央に */
 }
 /* スライド本体の固定高さを解除 */
 .hot-topics__slider .slide {
  height: auto !important;
 }
 .slider-dots {
  gap: 6px;
 }
 .slider-dots li {
  width: 8px;
  height: 8px;
 }
}