.image-slider {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slider-wrap {
  width: 300px; /* スライダーの幅を正方形に */
  height: 200px; /* スライダーの高さを正方形に */
  overflow: hidden; /* 親要素の外に出る部分を隠す */
  position: relative;
}


.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 正方形に収めつつ、縦横比を維持 */
  opacity: 0;
  animation: fade 9s infinite;
}



@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }  /* 10%でフェードイン完了 */
  45% { opacity: 1; }  /* 45%まで表示維持 */
  55% { opacity: 0; }  /* 55%でフェードアウト開始 */
  100% { opacity: 0; }  /* 完全に透明な状態を短縮 */
}