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

.slide-track {
  display: flex;
  animation: scroll 22.5s linear infinite;
  animation-play-state: running;
}

.slide {
  flex-shrink: 0;
}

.slide video {
  display: block;
  width: 300px;
  height: 200px;
  object-fit: cover;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-900px); /* 300px × 5 */
  }
}

/* ↑↑ ここまでで閉じカッコが必要！ */
.film-top,
.film-bottom {
  position: absolute;
  width: 2100px; /* スライドの横幅合計 */
  height: 20px;
  z-index: 2; /* 動画の上に重ねる */
  animation: scroll 22.5s linear infinite;
  object-fit: cover;
}

.film-top {
  top: -30px; /* .sliderの上に表示 */
}


.film-bottom {
  bottom: -30px; /* .sliderの下に表示 */
}
.bou-image {
  width: 25px; /* 必要に応じてサイズを調整 */
  height: 200px;
  object-fit: cover;
  margin-left: 0px;
}