@import '../../node_modules/swiper/swiper-bundle.css';
@import '../../node_modules/swiper/modules/effect-fade.css';

#contents {
  height: calc(var(--vh, 100vh) - var(--global-margin));
  margin-bottom: 0;
  main {
    align-self: flex-end;
    padding-bottom: var(--global-margin);
    @media (max-width: 768px) {
      margin-top: auto;
      margin-bottom: 0;
      width: 100%;
    }
  }
}
.swiper-container {
  position: relative;
  overflow: hidden;

  /* 初期アニメーション用 */
  opacity: 0;
  transition: opacity var(--data-fade-duration, 3000ms) ease;
  &.is-visible {
    opacity: 1;
  }

  --global-nav-height: 94px;
  --slide-header-height: 58px;
  --slide-header-marbin-bottom: 30px;
  @media (max-width: 768px) {
    --slide-header-height: 41px;
    --slide-header-marbin-bottom: 25px;
  }

  .swiper-wrapper {
    transition-timing-function: ease-in-out !important;
  }

  .swiper-slide {
    width: 100%;
    header {
      color: #000;
      font-size: 19px;
      line-height: 1.4;
      margin-bottom: var(--slide-header-marbin-bottom);
      @media (max-width: 768px) {
        font-size: 17px;
        line-height: 21.74px;
        margin-left: var(--additional-margin);
        margin-right: var(--additional-margin);
      }
      h2 {
        font-size: inherit;
        font-weight: inherit;
      }
    }
    .imageWrap {
      width: 100%;
      &:has(.fix-aspect-ratio) {
        height: auto;
      }
      &:not(:has(.fix-aspect-ratio)) {
        height: calc(var(--vh, 100vh) - var(--global-nav-height) - var(--slide-header-height) - var(--slide-header-marbin-bottom) - var(--global-margin) * 3);
        @media (max-width: 768px) {
          height: calc(var(--vh, 100vh) - 247px - var(--global-margin) * 3);
        }
      }
      .imageWrapInner {
        width: 100%;
        height: 100%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: 50% 50%;
          pointer-events: none;
        }

        /* fix-aspect-ratioによるきりかえ */
        &.fix-aspect-ratio {
          height: auto;
          img {
            aspect-ratio: 3 / 4;
            height: auto;
          }
        }
      }

      /* show-sp-imageによるきりかえ */
      .sp {
        display: none;
      }
      &.show-sp-image {
        .sp {
          display: block;
        }
        .pc {
          display: none;
        }
      }
    }
  }

  .swiper-pagination {
    position: absolute;
    top: 26px;
    bottom: auto;
    text-align: right;
    color: #818181;
    font-family: Schema-Regular;
    font-size: 19px;
    @media (max-width: 768px) {
      top: 15px;
      font-size: 17px;
      transform: translateX(calc(var(--additional-margin) * -1));
    }
  }
}