.main-visual {
  position: relative;
  margin-bottom: 32px;
  width: 100%;

  @media (max-width: 567px) {
    height: 60svh;
  }

  .main-visual__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;

    img {
      display: block;
      height: auto;
      width: 100%;
    }
  }

  .main-visual__img {
    display: block;
    height: auto;
    width: 100%;

    @media (min-width: 568px) {
      max-height: 90svh;
      object-fit: cover;
    }
  }

  .splide__slide picture {
    display: block;
    width: 100%;
    height: 100%;

    .main-visual__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .main-visual__splide {
    height: 100%;
  }

  .splide__track {
    height: 100%;
  }

  /* waveより手前に表示 */
  .splide__pagination {
    position: absolute;
    bottom: 24px;
    z-index: 10;
  }

  .splide__pagination__page {
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    opacity: 1;
    transform: none;
    transition:
      background 0.3s ease,
      border-color 0.3s ease;
  }

  .splide__pagination__page.is-active {
    background: #ccc;
    border-color: transparent;
    transform: none;
  }

  .splide__arrow {
    z-index: 10;
  }
}