/* 共通 */

#side-episode .section-title {
  margin-bottom: 40px;
  font-size: clamp(24px, calc((46 / 1440) * 100vw), 46px);
  letter-spacing: 0.1em;
  text-align: center;

  @media screen and (min-width: 768px) {
    margin-bottom: 64px;
  }
}

/* 紹介セクション */

#side-episode .introduction {
  background-image: url(/wp-content/themes/musashino-distillery/asset/image/bg-red-pc.png);
  background-position: right;
  padding-top: min(calc((80 / 375) * 100vw), 104px);
  padding-bottom: min(calc((80 / 375) * 100vw), 104px);
  margin: 0 auto;

  .text-wrapper {
    text-align: center;
    position: relative;

    .en-title {
      font-size: clamp(14px, calc((18 / 1440) * 100vw), 18px);
      color: #d8a47c;
      display: block;
      margin-bottom: 16px;
      letter-spacing: 0.1em;

      @media screen and (min-width: 768px) {
        margin-bottom: 32px;
      }
    }
  }

  .text-wrapper::after {
    content: "";
    display: block;
    background-image: url(/wp-content/themes/musashino-distillery/asset/image/new-craft-gin.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 320px;
    height: 100%;
    aspect-ratio: 480 / 104;
    position: absolute;
    top: 104%;
    left: 58%;
    transform: translate(-50%, -50%);
    z-index: -1;

    @media screen and (min-width: 1000px) {
      width: 480px;
    }
  }
}

.feature {
  margin-top: 64px;

  @media screen and (min-width: 1000px) {
    display: flex;
    column-gap: 160px;
    margin-top: 160px;
  }

  .feature-image {
    max-width: 548px;
    margin: 0 auto 40px;

    @media screen and (min-width: 768px) {
      width: min(calc((548 / 1440) * 100vw), 548px);
      max-width: unset;
      margin-bottom: 0;
      flex-shrink: 0;
    }
    img {
      width: 100%;
    }
  }

  .feature-content {
    padding-left: 80px;

    @media screen and (min-width: 1000px) {
      padding-left: 0;
    }

    li {
      margin-bottom: 48px;

      @media screen and (min-width: 768px) {
        margin-bottom: 80px;
      }

      .feature-title {
        font-size: clamp(20px, calc((30 / 1440) * 100vw), 30px);
        letter-spacing: 0.1em;
        margin-bottom: 16px;
        position: relative;

        @media screen and (min-width: 768px) {
          margin-bottom: 24px;
        }
      }

      .feature-title::before {
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 56px;
        height: 56px;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: -48px;

        @media screen and (min-width: 1000px) {
          width: 72px;
          height: 72px;
          left: -56px;
        }
      }

      .title01::before {
        background-image: url(/wp-content/themes/musashino-distillery/asset/image/side-episode-01.svg);
      }

      .title02::before {
        background-image: url(/wp-content/themes/musashino-distillery/asset/image/side-episode-02.svg);
      }

      .title03::before {
        background-image: url(/wp-content/themes/musashino-distillery/asset/image/side-episode-03.svg);
      }

      .feature-text {
        line-height: 2;
        text-align: justify;
      }

      .feature-text {
        font-size: clamp(14px, calc((16 / 1440) * 100vw), 16px);
        letter-spacing: 0.1em;
      }
    }

    li:last-child {
      margin-bottom: 0;
    }
  }
}

/* 製品セクション */

#side-episode .image-wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;

  @media screen and (min-width: 768px) {
    width: min(calc((480 / 1440) * 100vw), 480px);
    max-width: unset;
    margin: 0;
    flex-shrink: 0;
    margin-bottom: 40px;
  }
  img {
    width: 100%;
  }
}

#side-episode .c-image-text {
  padding-bottom: min(calc((80 / 375) * 100vw), 64px);

  .inner {
    column-gap: 64px;

    .sub-title {
      font-size: clamp(16px, calc((20 / 1440) * 100vw), 20px);
      letter-spacing: 0.1em;
    }

    .title {
      font-size: clamp(18px, calc((32 / 1440) * 100vw), 32px);
      letter-spacing: 0.1em;
      margin-bottom: 16px;

      @media screen and (min-width: 768px) {
        margin-bottom: 32px;
      }
    }

    .text {
      font-size: clamp(14px, calc((16 / 1440) * 100vw), 16px);
      letter-spacing: 0.1em;
      text-align: justify;
    }
  }
}

#side-episode .c-button-wrapper {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  column-gap: 24px;
  row-gap: 24px;

  @media screen and (min-width: 768px) {
    flex-direction: row;
  }
}

/* 購入情報 */

.information-banner {
  padding-top: min(calc((40 / 375) * 100vw), 40px);
  padding-bottom: min(calc((40 / 375) * 100vw), 40px);

  @media screen and (min-width: 768px) {
    padding-top: min(calc((80 / 1440) * 100vw), 80px);
    padding-bottom: min(calc((80 / 1440) * 100vw), 80px);
  }

  .inner {
    padding: 32px 24px;
    background-color: #282828;
    text-align: center;
    margin-bottom: 24px;

    @media screen and (min-width: 768px) {
      max-width: 900px;
      padding-top: 48px;
      padding-bottom: 48px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 32px;
    }
  }

  .title {
    margin-bottom: 24px;
    font-size: clamp(22px, calc((36 / 1440) * 100vw), 36px);
    letter-spacing: 0.1em;

    @media screen and (min-width: 768px) {
      margin-bottom: 32px;
    }
  }

  .text {
    margin-bottom: 24px;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-align: left;

    @media screen and (min-width: 768px) {
      margin-bottom: 32px;
      text-align: center;
    }
  }

  .c-button {
    margin-left: auto;
    margin-right: auto;
    width: min(calc((272 / 375) * 100vw), 320px);
  }

  .contact {
    margin-bottom: 0;
    text-align: center;
    letter-spacing: 0.1em;
  }

  .link {
    text-decoration: underline;
  }
}