.hero__slideshow {
  display: block;
  position: relative;
  width: 100vw;
  height: 120vh;
  transform: rotate(-10deg);
}

.hero__slideshow--sp {
  display: block;
  position: relative;
  width: 100vw;
  height: 0;
  transform: rotate(-24deg);
}

.hero__slideshow1 {
  position: absolute;
  left: 50vw;
  top: 50%;
  transform: translateY(-50%);
  width: 20vw;
  height: 120vh;
  overflow: hidden;
  z-index: 3;
  opacity: 1;
}

.hero__slideshow2 {
  position: absolute;
  left: 71vw;
  top: 50%;
  transform: translateY(-50%);
  width: 20vw;
  height: 120vh;
  overflow: hidden;
  z-index: 3;
  opacity: 1;
}

.hero__slideshow3 {
  position: absolute;
  left: 92vw;
  top: 50%;
  transform: translateY(-50%);
  width: 20vw;
  height: 120vh;
  overflow: hidden;
  z-index: 3;
  opacity: 1;
}

.hero__slideshow-track {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: slideVertical 25s linear infinite;
}

.hero__slideshow-track-reverse {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  animation: slideReverse 25s linear infinite;
}

.hero__slideshow-image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
  transition: transform 0.3s ease;
}

.hero__slideshow-image:hover {
  transform: scale(1.05);
}

@keyframes slideVertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes slideReverse {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

/* PC表示（幅 768px 以上のとき） */
@media (min-width: 768px) {
  .hero__slideshow {
    display: block;
  }
  .hero__slideshow--sp {
    display: none;
  }
}

/* スマホ表示（幅 767px 以下のとき） */
@media (max-width: 767px) {
  .hero__slideshow {
    display: none;
  }
  .hero__slideshow--sp {
    display: block;
    transform: rotate(-24deg);
  }

  .hero__slideshow-image {
    width: 100%; /* 画像は枠にフィット */
    height: auto;
    box-shadow: none;
    border-radius: 0.25rem; /* モバイルでは軽めに角丸 */
  }

  .hero__slideshow1,
  .hero__slideshow2,
  .hero__slideshow3 {
    width: 25vw; /* 少し大きめにして見やすく */
    height: 200vh;
    opacity: 1;
  }

  .hero__slideshow1 {
    left: 15vw; /* 左端から配置 */
  }
  .hero__slideshow2 {
    left: 41vw; /* 適度な間隔で次を配置 */
  }
  .hero__slideshow3 {
    left: 68vw; /* 3つ目も均等配置 */
  }

  .hero__slideshow-track {
    gap: 0.2rem;
    animation: slideVertical 45s linear infinite;
  }

  .hero__slideshow-track-reverse {
    gap: 0.2rem;
    animation: slideReverse 45s linear infinite;
  }
}