html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }

    .slider {
      height: 100vh;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      scroll-padding-top: 0px;
      -webkit-overflow-scrolling: touch;
    }

    .slide {
      height: 100vh;
      scroll-snap-align: start;
      flex-shrink: 0;
      position: relative;
    }

    .slide img,
    .slide video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* PC用 */
    @media (min-width: 768px) {
      .slide img,
      .slide video {
        width: auto;
        height: 100vh;
        object-fit: cover;
        margin: 0 auto;
      }
    }

/* CTA固定バナー（PC・スマホ共通） */
.cta {
  position: fixed;
  bottom: 0px;                /* 画面下からの距離 */
  left: 50%;                   /* 横中央 */
  transform: translateX(-50%); /* 中央寄せ */
  width: 100%;                 /* 横幅いっぱい */
  max-width: 810px;            /* 最大810pxまで */
  margin: 0 auto;
  z-index: 1000;

  animation: floatUpDown 3s ease-in-out infinite;
  will-change: transform;      /* モバイルでアニメーションを安定させる */
}

.cta img {
  display: block;
  width: 100%;                 /* CTA幅にフィット */
  height: auto;
}

/* ぷかぷかアニメーション */
@keyframes floatUpDown {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px); /* 上下の振れ幅。大きくしたい時は数値を増やす */
  }
}