/* スライドショーの基本設定 */
.slideshow-wrapper {
  margin: 0;
  padding: 0;
  width: 100vw; /* 画面幅いっぱい */
  overflow-x: hidden; /* 横スクロールを防ぐ */
}

/* スライドコンテナ */
.slideshow-container {
  display: flex;
  flex-direction: column; /* スライドを縦に並べる */
  overflow: hidden;
  width: 100%;
}

/* スライドトラック */
.slideshow-track {
  display: flex;
  width: max-content; /* 画像サイズに応じた幅 */
}

/* スライドリスト */
.slideshow-list {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  width: max-content; /* 画像の全体幅 */
}

/* トップのスライド用 */
.slideshow-list--left {
  animation: slideshow-scroll-left 80s linear infinite;
  width: max-content; /* コンテンツ幅を最大に */
  position: absolute;
  left: 0; /* 左端からスタート */
}

/* ボトムのスライド用 */
.slideshow-list--right {
  animation: slideshow-scroll-right 80s linear infinite;
  width: max-content;
  position: absolute;
  right: 0; /* 右端からスタート */
}

/* スライドアイテム */
.slideshow-item {
  width: 450px;
  height: 300px;
  flex-shrink: 0; /* 縮まないように */
  display: block; /* 画像を正しく表示 */
  filter: grayscale(100%); /* 白黒フィルター */
}

/* 画像のスタイル */
.slideshow-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* アニメーション定義 */
@keyframes slideshow-scroll-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slideshow-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  .slideshow-item {
    width: auto; /* 画像のサイズに合わせる */
    max-width: 250px; /* 最大幅を縮小 */
    height: auto; /* 高さも自動調整 */
  }
}

@media (max-width: 480px) {
  .slideshow-item {
    width: auto;
    max-width: 150px; /* スマホではさらに小さく */
    height: auto;
  }
}