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

.swiper-container {
  padding-top: 102px;
  padding-bottom: 57px;
  position: relative;
  overflow: hidden;
  @media (max-width: 768px) {
    padding-top: 21px;
    padding-bottom: 21px;
  }
  &:not(.swiper-initialized) {
    /* SP版でswiperが無効化されている時のスタイル */
    .swiper-wrapper {
      display: flex;
      flex-direction: column;
      gap: var(--global-margin);
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    top: 2px;
    transition: opacity 0.2s;
    @media (max-width: 768px) {
      display: none;
    }
    &:hover {
      opacity: 0.6;
    }
    &:after {
      width: 27px;
      height: 22px;
    }
  }
  .swiper-button-prev {
    left: auto;
    right: 51px;
    &:after {
      content: url(../image/works/arrow-left.svg);
    }
  }
  .swiper-button-next {
    right: 2px;
    &:after {
      content: url(../image/works/arrow-right.svg);
    }
  }
  .swiper-slide {
    width: 100%;
    aspect-ratio: 3 /2;
    &:has(.portrait) {
      @media (max-width: 768px) {
        aspect-ratio: 1 / 1;
      }
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      &.portrait {
        object-fit: contain;
      }
    }
  }
  .swiper-pagination {
    text-align: right;
    font-size: 12px;
    @media (max-width: 768px) {
      display: none;
    }
  }
}

#contents {
  @media (max-width: 768px) {
    gap: 52px;
  }
  .pageTitle {
    margin-top: 8px;
    margin-bottom: 38px;
  }
  article {
    position: relative;
    header {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 18px;
      line-height: 1.6;
      font-weight: normal;
      @media (max-width: 768px) {
        font-size: 15px;
        margin-left: var(--additional-margin);
        margin-right: var(--additional-margin);
        position: relative;
        top: auto;
        left: auto;
      }
      h1, h2 {
        display: inline;
        font-size: inherit;
        font-weight: inherit;
      }
    }
    .cols_3 {
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
      .text {
        grid-column: 1 / 3;
        line-height: 2.15;
        @media (max-width: 768px) {
          margin-left: var(--additional-margin);
          margin-right: var(--additional-margin);
        }
        .body-text + .spec {
          margin-top: 100px;
          @media (max-width: 768px) {
            margin-top: 50px;
          }
        }
      }
    }
  }
}