@charset "utf-8";


article.topics-wrapper {
  --header-height: 75px;
  padding-top: var(--header-height);
  overflow: hidden;
  @media (width < 768px) {
    --header-height: 48px;
    margin-block-end: 0;
  }

  * {
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
  }

  br {
    &.hide-pc {
      @media (width >= 768px) {
        display: none;
      }
    }
    &.hide-sp {
      @media (width < 768px) {
        display: none;
      }
    }
  }

  .bold {
    font-weight: 700;
  }

  .inner {
    margin-inline: auto;
    max-width: 800px;
    @media (width < 768px) {
      max-width: calc(100% - 4rem);
    }
  }
  
  .topics-mv-slider {
    .swiper-wrapper {
      transition-timing-function: linear;
    }
    .swiper-slide {
      width: fit-content;
      img {
        height: 460px;
        width: auto;
        @media (width < 768px) {
          height: 168px;
        }
      }
    }
  }
  
  .topics-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .5rem;
    margin-block-start: 7rem;
    margin-block-end: 3.2rem;
    @media (width < 768px) {
      margin-block-start: 3.6rem;
      margin-block-end: 4.8rem;
    }
    time {
      font-size: 1.6rem;
    }
    h1 {
      font-size: 2.4rem;
      font-weight: 700;
    }
  }

  .topics-body {
    padding-block-end: 8rem;
    font-size: 1.6rem;
    line-height: calc(30/16);
    @media (width < 768px) {
      padding-block-end: 6rem;
    }

    > :first-child {
      margin-block-start: 0;
    }

    > :last-child {
      margin-block-end: 0;
    }

    p {
      margin-block: 1lh;
    }

  }


  .caption-slider {
    --swiper-pagination-bullet-horizontal-gap: 5px;
    position: relative;
    margin-block: 6rem;
    overflow: hidden;
    @media (width < 768px) {
      margin-block: 3rem;
    }
    figure {
      position: relative;
      figcaption {
        position: absolute;
        left: 1em;
        bottom: 1em;
        padding: .8rem;
        background-color: color-mix(in srgb, #fff 90%, transparent);
        line-height: calc(28/16);
        @media (width < 768px) {
          position: relative;
          left: 0;
          bottom: 0;
          margin-block-start: -5.5rem;
          margin-inline: 1.2rem;
          font-size: 1.4rem;
          line-height: calc(24/14);
        }
      }
    }
    .swiper-slide {
      img {
        width: 100%;
        height: auto;
      }
    }
    .swiper-pagination {
      position: relative;
      bottom: 0;
      margin-block-start: 3.2rem;
      font-size: 0;
      @media (width < 768px) {
        margin-block-start: 2.8rem;
      }
    }
  }

  .product-info {
    margin-block: 6rem;
    @media (width < 768px) {
      margin-block: 3rem;
    }
    h4 {
      margin-block-end: 1rem;
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      @media (width < 768px) {
        margin-block-end: 1.6rem;
      }
    }
  }
  .product-info__row {
    display: flex;
    gap: 5.6rem;
    @media (width < 768px) {
      gap: 2.8rem;
      flex-direction: column;
    }
  }
  .product-info__image {
    @media (width >= 768px) {
      flex: 0 0 27rem;
    }
    @media (width < 768px) {
      text-align: center;
      margin-inline: 3.2rem;
    }
  }
  .product-info__text {
    display: flex;
    flex-direction: column;
    /* gap: 1rem; */
    flex-grow: 1;
    letter-spacing: 0.1em;
  }
  .product-info__name {
    font-weight: 700;
    margin-block-end: 1rem;
    @media (width < 768px) {
      margin-block-end: 2.4rem;
    }
  }
  .product-info__button {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #b4b4b4;
    padding: 1rem 2rem;
    font-size: 1.5rem;
    line-height: calc(24/15);
    min-height: 7.5rem;
    margin-block-start: auto;
    @media (width < 768px) {
      padding: 1.2rem;
    }
  }


  .topics-aside {
    background-color: #f5f5f5;
    padding-block: 7rem 7rem;
    @media (width < 768px) {
      padding-block: 4.5rem;
    }

    .inner {
      > :first-child {
        margin-block-start: 0;
      }
      > :last-child {
        margin-block-end: 0;
      }
    }

    h2 {
      margin-block: 4.2rem;
      font-size: 2.4rem;
      font-weight: 700;
      @media (width < 768px) {
        margin-block: 4rem;
        font-size: 2rem;
      }
    }

    h3 {
      margin-block: 2.8rem;
      padding-block-end: 1.4rem;
      border-bottom: 1px solid;
      font-size: 1.6rem;
      font-weight: 700;
      @media (width < 768px) {
        margin-block: 2rem;
        font-size: 1.4rem;
      }
    }

    p {
      margin-block: 1lh;
    }
    
  }
}