.main-visual {
  position: relative;
  height: 100vh;
  margin-bottom: 24px;
  min-height: 420px;
  overflow: hidden;
  background: #000;
  opacity: 0;
  transition: opacity 1.5s ease-in-out; /* ← あなたの修正を維持 */
}
@supports (height: 100svh) {
  .main-visual {
    height: 100svh; /* 実際に見えている「小さいほうの viewport」の高さ */
  }
}

/* ロード完了後 */
.main-visual.is-ready {
  opacity: 1;
}

.main-visual .slider {
  position: relative;
  height: 100%;
}

/* スライド */
.main-visual .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.12); /* ← 初期値をズーム途中にしてカクつきを防止 */
  z-index: 0;
  will-change: opacity, transform;
  transition: opacity 1.2s ease-in-out,
    transform 10s cubic-bezier(0.3, 0, 0.3, 1);
}

/* 表示中スライド */
.main-visual .slide.is-active {
  opacity: 1;
  z-index: 1;
  transform: scale(1.28); /* ← ズーム量をキープ */
}

/* reduce-motion対応 */
@media (prefers-reduced-motion: reduce) {
  .main-visual,
  .main-visual .slide {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  right: 50%;
  bottom: 20%;
  writing-mode: vertical-rl;
  z-index: 9;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #000;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 2;
}
/* 線の背景色 */
.scroll::after {
  background-color: #ccc;
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}