@charset "UTF-8";

/* ===============================================
  * Foundation *
=============================================== */

.p-lp__article {

  /*
   * Variables - Color
   */


  /*
   * Variables - Font
   */

  /* Family */
  --ff-roboto: "Roboto";
  --ff-noto: "Noto Sans JP";
  --ff-century: "century-gothic";
  --ff-main: var(--ff-roboto), "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", var(--ff-noto), "メイリオ", "Meiryo", sans-serif;
  --ff-en: var(--ff-century), var(--ff-noto), sans-serif;

  /* Weight */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;


  /*
   * Variables - Block
   */

  --padding-horizontal: calc(25 * (100vw / 750));


  /*
   * Variables - svg
   */

  --arrow-prev-solid: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_204%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20204%22%20transform%3D%22translate(-7647.5%20-3668)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_81%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2081%22%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20transform%3D%22translate(7647.5%203668)%22%20fill%3D%22%23c7c3b9%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_325%22%20data-name%3D%22%E3%83%91%E3%82%B9%20325%22%20d%3D%22M7670.5%2C3694l-6-6%2C6-6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20fill-rule%3D%22evenodd%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  --arrow-next-solid: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_203%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20203%22%20transform%3D%22translate(-8247.5%20-3668)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_80%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%2080%22%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2220%22%20transform%3D%22translate(8247.5%203668)%22%20fill%3D%22%23c7c3b9%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_324%22%20data-name%3D%22%E3%83%91%E3%82%B9%20324%22%20d%3D%22M8264.5%2C3694l6-6-6-6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%20fill-rule%3D%22evenodd%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  --arrow-prev-transparent: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_352%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20352%22%20transform%3D%22translate(-2586.424%20-7296.368)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_163%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%20163%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20transform%3D%22translate(2586.424%207296.368)%22%20fill%3D%22%23a9aaaa%22%20opacity%3D%220.6%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_583%22%20data-name%3D%22%E3%83%91%E3%82%B9%20583%22%20d%3D%22M2604.424%2C7305.368l-6%2C6%2C6%2C6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  --arrow-next-transparent: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_351%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%20351%22%20transform%3D%22translate(-3526.424%20-7296.368)%22%3E%20%3Ccircle%20id%3D%22%E6%A5%95%E5%86%86%E5%BD%A2_162%22%20data-name%3D%22%E6%A5%95%E5%86%86%E5%BD%A2%20162%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2215%22%20transform%3D%22translate(3526.424%207296.368)%22%20fill%3D%22%23a9aaaa%22%20opacity%3D%220.6%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_582%22%20data-name%3D%22%E3%83%91%E3%82%B9%20582%22%20d%3D%22M3538.424%2C7317.368l6-6-6-6%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');


  /*
   * Settings
   */

  color: #000;
  font-family: var(--ff-main);
  font-feature-settings: "palt";
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: var(--fw-regular);
  letter-spacing: .075em;

  * {
    box-sizing: border-box;
  }
}

#Wrap {
  width: 100%;
}




/* ===============================================
  * Utility *
=============================================== */

.u-visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(0px 0px 99.9% 99.9%);
}

.u-hidden {
  display: none !important;
}

.u-hidden-md-up {
  @media (min-width: 768px) {
    display: none !important;
  }
}

.u-hidden-md-down {
  @media (max-width: 767px) {
    display: none !important;
  }
}


/* Animation */

.u-animation--fade-up {
  opacity: 0;
  translate: 0 5rem;

  transition: opacity 2000ms ease, translate 2000ms ease;

  &[data-intersect="intersected"] {
    opacity: 1;
    translate: 0 0;
  }
}




/* ===============================================
  * Layout *
=============================================== */

.l-lp__section {
  padding-block: calc(80 * (100vw / 750));

  @media (min-width: 768px) {
    padding-block: 8rem;
  }

  &[data-section-name="skin-care"],
  &[data-section-name="hair-care"] {
    background-color: #F3F1F0;
  }
}

.l-lp__section-inner {
  @media (max-width: 767px) {
    padding-inline: var(--padding-horizontal);
  }

  @media (min-width: 768px) {
    width: min(100%, 99.2rem);
    margin-inline: auto;
  }
}

.l-image__wrapper {
  img {
    width: 100%;
    height: auto;
  }
}




/* ===============================================
  * Components *
=============================================== */

/* セクションの見出し */

.c-lp__text--section-heading {
  display: grid;
  justify-items: center;
  row-gap: calc(13 * (100vw / 750));

  font-family: var(--ff-en);
  font-size: calc(46 * (100vw / 750));
  font-weight: var(--fw-regular);
  letter-spacing: .075em;
  line-height: normal;

  @media (min-width: 768px) {
    row-gap: .95rem;

    font-size: 3.6rem;
  }

  & > small {
    font-family: var(--ff-main);
    font-size: calc(22 * (100vw / 750));

    @media (min-width: 768px) {
      font-size: 1.3rem;
    }
  }

  .c-lp__text--section-heading-sub {
    font-size: calc(30 * (100vw / 750));

    @media (min-width: 768px) {
      font-size: 2.6rem;
    }
  }
}

.c-lp__text--section-heading-related {
  font-size: calc(36 * (100vw / 750));
  font-weight: var(--fw-regular);
  letter-spacing: .075em;

  @media (min-width: 768px) {
    font-size: 2.2rem;
  }
}


/* 注釈文 */

.c-lp__text--annotation {
  font-size: calc(20 * (100vw / 750));
  letter-spacing: .075em;
  line-height: 1.5;

  @media (min-width: 768px) {
    font-size: 1rem;
  }
}


/* スライダー */

.c-swiper {
  --swiper-button-size: calc(40 * (100vw / 750));

  position: relative;

  @media (min-width: 768px) {
    --swiper-button-size: 3rem;
  }

  .swiper {
    display: grid;

    width: 100%;

    overflow: hidden;
  }

  .swiper-wrapper {
    min-width: 0;
  }

  [class*="swiper-button-"] {
    width: var(--swiper-button-size);
    height: var(--swiper-button-size);
    background-size: contain;
  }

  .swiper-button-prev {
    left: 0;

    background-image: var(--arrow-prev-solid);
  }

  .swiper-button-next {
    right: 0;

    background-image: var(--arrow-next-solid);
  }

  .swiper-pagination {
    --pagination-size: calc(10 * (100vw / 750));

    position: initial;

    display: flex;
    justify-content: center;
    column-gap: calc(25 * (100vw / 750));

    margin-top: calc(18 * (100vw / 750));

    @media (min-width: 768px) {
      --pagination-size: .5rem;

      column-gap: 1rem;

      margin-top: .8rem;
    }
  }

  .swiper-pagination-bullet {
    width: var(--pagination-size);
    height: var(--pagination-size);
    background-color: transparent;
    border: solid 1px #92908C;
    border-radius: 50%;
    opacity: 1;

    &.swiper-pagination-bullet-active {
      background-color: #92908C;
    }
  }
}


/* 商品情報 */

.c-product-information__container {
  display: grid;
  row-gap: calc(40 * (100vw / 750));

  width: 100%;

  @media (min-width: 768px) {
    row-gap: 2.5rem;
  }
}

.c-product-information__content-container {
  @media (max-width: 767px) {
    --transition-duration: 200ms;
  }

  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3.2rem;
  }
}

.c-product-information__toggle-tab-button-container {
  --spacer-between-button-tab: calc(20 * (100vw / 750));
  --border-radius: calc(40 * (100vw / 750));

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: calc(20 * (100vw / 750));

  .c-product-information__content-wrapper {
    --rank-icon-size: calc(100 * (100vw / 750));

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: calc(var(--rank-icon-size) / 2);
    padding: calc(70 * (100vw / 750)) calc(14 * (100vw / 750)) calc(30 * (100vw / 750));
    background-color: var(--color-rank, #EAE8E5);
    border: none;
    border-radius: var(--border-radius);

    transition: border-radius var(--transition-duration) linear;

    &::before {
      top: calc(var(--rank-icon-size) / 2 * -1);
    }

    &::after {
      content: "";

      width: auto;
      height: calc(10 * (100vw / 750));
      aspect-ratio: 30 / 10;
      margin-top: calc(20 * (100vw / 750));
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231.109%22%20height%3D%2212.034%22%20viewBox%3D%220%200%2031.109%2012.034%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_323%22%20data-name%3D%22%E3%83%91%E3%82%B9%20323%22%20d%3D%22M8132.5%2C4629l15%2C10%2C15-10%22%20transform%3D%22translate(-8131.945%20-4628.168)%22%20fill%3D%22none%22%20stroke%3D%22%2392908c%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-size: contain;
    }

    &[data-button-state="active"] {
      border-radius: calc(40 * (100vw / 750)) calc(40 * (100vw / 750)) 0 0;
    }
  }

  .c-product-information__liquid-decoration-wrapper {
    --liquid-decoration-size: calc(41 * (100vw / 750));

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: var(--spacer-between-button-tab);
    background-color: var(--color-rank, #EAE8E5);
    border-radius: 0 0 var(--border-radius) var(--border-radius);

    opacity: 0;
    transition:
      border-radius var(--transition-duration) linear,
      translate var(--transition-duration) linear;

    &::before,
    &::after {
      position: absolute;
      bottom: 2px;

      width: var(--liquid-decoration-size);
      aspect-ratio: 1;
      background-image: url(../imgs/liquid-decoration.png);
      background-repeat: no-repeat;
      background-size: contain;

      scale: 0 1;

      transition: scale calc(var(--transition-duration) / 2) linear var(--transition-duration);
      transform-origin: left top;
    }

    [data-rank="2"] & {
      &::after {
        content: "";

        right: calc(var(--liquid-decoration-size) * -1);
      }
    }

    [data-rank="3"] & {
      &::before {
        content: "";

        left: calc(var(--liquid-decoration-size) * 0);

        transform: rotateY(180deg);
      }
    }

    [data-button-state="active"] & {
      border-radius: 0;

      opacity: 1;
      translate: 0 var(--spacer-between-button-tab);

      &::before,
      &::after {
        scale: 1 1;
      }
    }
  }

  .c-product-information__image-wrapper {
    align-content: flex-start;
    row-gap: calc(18 * (100vw / 750));

    height: 100%;
    padding-block: calc(40 * (100vw / 750)) calc(30 * (100vw / 750));
    background-color: rgba(255, 255, 255, .5);
    border-radius: calc(30 * (100vw / 750));

    .l-image__wrapper {
      [data-award] & {
        &::before {
          top: calc(13 * (100vw / 750));
          left: calc(-19 * (100vw / 750));

          width: calc(108 * (100vw / 750));
        }
      }
    }
  }

  .c-product-information__text--category {
    font-size: calc(22 * (100vw / 750));
  }

  .c-product-information__text--description {
    font-size: calc(26 * (100vw / 750));
    font-feature-settings: "palt";
    line-height: calc(45.5 / 26);
  }
}

.c-product-information__content-wrapper {
  --rank-icon-size: calc(120 * (100vw / 750));

  position: relative;

  padding-top: calc(var(--rank-icon-size) / 2);

  @media (min-width: 768px) {
    --rank-icon-size: 7rem;
  }

  &::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    width: var(--rank-icon-size);
    aspect-ratio: 1;
    margin-inline: auto;
    background-image: var(--rank-image);
    background-repeat: no-repeat;
    background-size: contain;
  }

  &[data-rank="1"] {
    --rank-image: url(../imgs/rank-1.svg);

    @media (min-width: 768px) {
      --rank-icon-size: 8rem;
    }
  }

  &[data-rank="2"] {
    --rank-image: url(../imgs/rank-2.svg);
  }

  &[data-rank="3"] {
    --rank-image: url(../imgs/rank-3.svg);
  }

  @media (max-width: 767px) {
    &[data-panel-state] {
      padding-top: var(--spacer-between-button-tab, 2rem);

      &::before {
        content: none;
      }

      .c-product-information__detail-wrapper {
        opacity: 0;

        transition: opacity calc(var(--transition-duration) * 1.5) ease calc(var(--transition-duration) * 1);
      }

      .c-product-information__button--product-link {
        --arrow-size: calc(6.09 * (100vw / 750));

        width: calc(280 * (100vw / 750));
        padding: calc(10 * (100vw / 750)) calc(14 * (100vw / 390));

        font-size: calc(21 * (100vw / 750));
      }
    }

    &[data-panel-state="active"] {
      .c-product-information__detail-wrapper {
        opacity: 1;
      }

      &[data-rank="2"] {
        .c-product-information__content-inner {
          border-top-left-radius: 0;
        }
      }

      &[data-rank="3"] {
        .c-product-information__content-inner {
          border-top-right-radius: 0;
        }
      }
    }

    &[data-panel-state="inactive"] {
      height: 0;
      padding: 0;
      opacity: 0;
      pointer-events: none;
    }
  }
}

.c-product-information__content-inner {
  display: grid;
  row-gap: calc(44 * (100vw / 750));

  padding: calc(45 * (100vw / 750)) calc(50 * (100vw / 750)) calc(60 * (100vw / 750));
  background-color: var(--color-rank, #EAE8E5);
  border-radius: calc(40 * (100vw / 750));

  @media (max-width: 767px) {
    transition: border-radius var(--transition-duration) linear;

    [data-rank="1"] & {
      padding: calc((var(--rank-icon-size) / 2) + calc(30 * (100vw / 750))) calc(50 * (100vw / 750)) calc(60 * (100vw / 750));
    }
  }

  @media (min-width: 768px) {
    align-content: flex-start;
    row-gap: 3rem;

    padding: 5.5rem 5rem 4rem;
    height: 100%;
    border-radius: 2rem;

    [data-rank="1"] & {
      grid-template-columns: 40rem 1fr;
      align-items: center;
      column-gap: 7.5rem;

      padding: calc((var(--rank-icon-size) / 2) + 3rem) 6rem 5rem;
    }
  }
}

.c-product-information__image-wrapper {
  display: grid;
  row-gap: calc(20 * (100vw / 750));
  justify-items: center;

  padding: calc(50 * (100vw / 750)) 0 calc(30 * (100vw / 750));
  background-color: rgba(255, 255, 255, .5);
  border-radius: calc(30 * (100vw / 750));

  @media (min-width: 768px) {
    row-gap: 2rem;

    padding: 3rem 0;
    border-radius: 2rem;
  }

  .l-image__wrapper {
    width: calc(100% - ((30 * (100vw / 750)) * 2));
    margin-inline: auto;

    @media (min-width: 768px) {
      width: calc(100% - (8rem * 2));
    }

    [data-rank="1"] & {
      width: calc(100% - ((75 * (100vw / 750)) * 2));

      @media (min-width: 768px) {
        width: calc(100% - (6rem * 2));
      }
    }

    [data-award] & {
      position: relative;

      &::before {
        content: "";

        position: absolute;
        top: calc(20 * (100vw / 750));
        left: calc(-45 * (100vw / 750));
        z-index: 2;

        width: calc(190 * (100vw / 750));
        aspect-ratio: 1;
        background-image: url(../imgs/award.svg);
        background-repeat: no-repeat;
        background-size: contain;

        pointer-events: none;
      }

      @media (min-width: 768px) {
        &::before {
          top: 1.2rem;
          left: -5rem;

          width: 11.4rem;
        }
      }

      [data-rank="1"] & {
        &::before {
          top: calc(20 * (100vw / 750));
          left: calc(-45 * (100vw / 750));

          width: calc(190 * (100vw / 750));
        }

        @media (min-width: 768px) {
          &::before {
            top: 1.5rem;
            left: -3.2rem;

            width: 12.5rem;
          }
        }
      }
    }
  }
}

.c-product-information__text--category {
  --color: #A9AAAA;

  display: grid;
  place-content: center;

  width: fit-content;
  padding: calc(7 * (100vw / 750)) calc(15 * (100vw / 750));
  border: solid 1px var(--color);

  color: var(--color);
  font-size: calc(26 * (100vw / 750));
  letter-spacing: .075em;
  line-height: 1;

  @media (min-width: 768px) {
    padding: .4rem 1rem;

    font-size: 1.6rem;
  }
}

.c-product-information__text--description {
  color: #000;
  font-size: calc(28 * (100vw / 750));
  letter-spacing: .075em;
  line-height: 2;
  text-align: center;

  @media (min-width: 768px) {
    font-size: 1.6rem;
  }
}

.c-product-information__detail-wrapper {
  display: grid;
  row-gap: calc(55 * (100vw / 750));

  @media (min-width: 768px) {
    row-gap: 3.5rem;
  }
}

.c-product-information__summary-container {
  display: grid;

  text-align: center;
}

.c-product-information__text--product-name {
  margin-bottom: calc(2 * (100vw / 750));

  font-size: calc(30 * (100vw / 750));
  font-weight: var(--fw-bold);
  letter-spacing: .075em;
  line-height: calc(52.5 / 30);

  @media (min-width: 768px) {
    margin-bottom: .35rem;

    font-size: 1.8rem;
  }
}

.c-product-information__text--product-price {
  margin-bottom: calc(22 * (100vw / 750));

  font-family: var(--ff-en);
  font-size: calc(22 * (100vw / 750));
  letter-spacing: .075em;
  line-height: calc(38.5 / 22);

  @media (min-width: 768px) {
    margin-bottom: 1.6rem;

    font-size: 1.4rem;
  }

  & > small {
    font-size: calc(20 * (100vw / 750));

    @media (min-width: 768px) {
      font-size: 1rem;
    }
  }
}

.c-product-information__button--product-link {
  --arrow-size: calc(7.17 * (100vw / 390));

  display: grid;
  grid-template-columns: var(--arrow-size) 1fr var(--arrow-size);
  align-items: center;

  width: calc(410 * (100vw / 750));
  margin-inline: auto;
  padding: calc(18 * (100vw / 750)) calc(28 * (100vw / 750));
  background-color: #303030;

  color: #fff;
  font-size: calc(26 * (100vw / 750));
  letter-spacing: .075em;
  line-height: 1;

  @media (min-width: 768px) {
    --arrow-size: .406rem;

    width: 22rem;
    padding: .8rem 1.5rem;

    font-size: 1.4rem;
  }

  &::before,
  &::after {
    content: "";
  }

  &::after {
    width: var(--arrow-size);
    aspect-ratio: 5.58 / 11.16;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%227.171%22%20height%3D%2212.221%22%20viewBox%3D%220%200%207.171%2012.221%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_326%22%20data-name%3D%22%E3%83%91%E3%82%B9%20326%22%20d%3D%22M8138.62%2C3394.58l5.58-5.58-5.58-5.58%22%20transform%3D%22translate(-8138.09%20-3382.89)%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%221.5%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.c-product-information__review-wrapper {
  display: grid;

  padding-inline: calc(22 * (100vw / 750));

  @media (min-width: 768px) {
    padding-inline: 0;

    &::after {
      content: "";

      width: 100%;
      height: 1px;
      margin-top: 3rem;
      background-color: #92908C;
    }
  }
}

.c-product-information__text--review-title {
  position: relative;

  display: grid;
  place-content: center;

  margin-bottom: calc(37.8 * (100vw / 750));

  @media (min-width: 768px) {
    margin-bottom: 1.9rem;
  }

  &::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 1px;
    margin-block: auto;
    background-color: #92908C;
  }

  & > span {
    position: relative;
    z-index: 2;

    padding-inline: calc(23 * (100vw / 750));
    background-color: var(--color-rank, #EAE8E5);

    font-family: var(--ff-en);
    font-size: calc(33 * (100vw / 750));
    letter-spacing: .075em;
    line-height: 1;

    @media (min-width: 768px) {
      padding-inline: 1.6rem;

      font-size: 2rem;
    }
  }
}

.c-product-information__review-container {
  --swiper-button-size: calc(36 * (100vw / 750));

  position: relative;

  @media (min-width: 768px) {
    --swiper-button-size: 2.5rem;
  }

  .swiper-button-prev {
    left: calc(var(--swiper-button-size) * -1.25);

    @media (min-width: 768px) {
      left: 0;
    }
  }

  .swiper-button-next {
    right: calc(var(--swiper-button-size) * -1.25);

    @media (min-width: 768px) {
      right: 0;
    }
  }
}

.c-product-information__text--review {
  padding-inline: calc(10 * (100vw / 750));

  text-align: justify;

  @media (min-width: 768px) {
    padding-inline: 4rem;
  }

  & > span {
    font-size: calc(24 * (100vw / 750));
    letter-spacing: .1em;
    line-height: 2;

    @media (min-width: 768px) {
      font-size: 1.3rem;
    }

    & > b {
      background: linear-gradient(transparent 50%, #D0CCC4 50%);

      font-weight: var(--fw-regular);
    }
  }
}


/* リンクボタン - VIEW ALL */

.c-lp__button--view-all {
  display: grid;
  place-content: center;

  width: calc(620 * (100vw / 750));
  margin-inline: auto;
  padding-block: calc(19 * (100vw / 750));
  background-color: #787878;

  color: #fff;
  font-family: var(--ff-en);
  font-size: calc(34 * (100vw / 750));
  letter-spacing: .075em;
  line-height: calc(40.5 / 34);

  @media (min-width: 768px) {
    width: 54.5rem;
    padding-block: 1.3rem;

    font-size: 2.8rem;
  }
}


/* ナビゲーション */

.c-navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;

  width: 100%;
  background-color: #E4E0D7;

  opacity: 0;
  translate: 0 150%;

  transition: opacity 350ms ease, translate 500ms ease;

  &[data-state-visibility="visible"] {
    opacity: 1;
    translate: 0 0;
  }
}

.c-navigation__inner {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: calc(24 * (100vw / 750)) calc(42 * (100vw / 750));

  @media (min-width: 768px) {
    max-width: 52.5rem;
    margin-inline: auto;
    padding: 1.8rem 0;
  }
}

.c-navigation__separator {
  width: 1px;
  height: calc(60 * (100vw / 750));
  margin-inline: calc(30 * (100vw / 750));
  background-color: #666;

  @media (min-width: 768px) {
    height: 4rem;
    margin-inline: 4rem;
  }
}

.c-navigation__button--anchor {
  display: grid;
  justify-items: center;
  row-gap: calc(12 * (100vw / 750));

  @media (min-width: 768px) {
    row-gap: .8rem;
  }

  & > small {
    font-size: calc(20 * (100vw / 750));
    letter-spacing: .075em;
    line-height: 1;

    @media (min-width: 768px) {
      font-size: 1.2rem;
    }
  }

  & > span {
    font-family: var(--ff-en);
    font-size: calc(24 * (100vw / 750));
    letter-spacing: .075em;
    line-height: 1;

    @media (min-width: 768px) {
      font-size: 1.5rem;
    }
  }
}



/* ===============================================
  * Project *
=============================================== */

/*
 * Section - MV
 */


.swiper-button-prev::before,
.swiper-button-next::before,
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}


[data-section-name="mv"] {
  padding-block: calc(30 * (100vw / 750)) calc(120 * (100vw / 750));

  @media (min-width: 768px) {
    padding-block: 5rem 8rem;
  }

  .l-lp__section-inner {
    width: 100%;
    overflow: hidden;

    @media (max-width: 767px) {
      padding-inline: 0;
    }
  }

  .mv-carousel__wrapper {
    .swiper-wrapper {
      transition-timing-function: linear !important;
    }

    .swiper-slide {
      width: auto;
      height: calc(500 * (100vw / 750));

      @media (min-width: 768px) {
        height: 37rem;
      }

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

  .mv-heading__wrapper {
    --row-gap: calc(30 * (100vw / 750));
    --decoration-width: calc(131 * (100vw / 750));
    --decoration-height: calc(231 * (100vw / 750));

    position: relative;
    z-index: 2;

    display: grid;
    row-gap: var(--row-gap);
    justify-items: center;

    width: fit-content;
    margin-top: calc(-95 * (100vw / 750));
    margin-inline: auto;

    @media (min-width: 768px) {
      --row-gap: 2rem;
      --decoration-width: 8.76rem;
      --decoration-height: 15.1rem;

      margin-top: -9.5rem;
    }

    &::before,
    &::after {
      content: "";

      position: absolute;
      bottom: 0;

      width: var(--decoration-width);
      aspect-ratio: 131 / 231;
      background-repeat: no-repeat;
      background-size: contain;
    }

    &::before {
      left: calc((var(--decoration-width) + 1rem) * -1);
      background-image: url(../imgs/mv-decoration-left.svg);

      @media (min-width: 768px) {
        left: calc((var(--decoration-width) + 3rem) * -1);
      }
    }

    &::after {
      right: calc((var(--decoration-width) + 1rem) * -1);
      background-image: url(../imgs/mv-decoration-right.svg);

      @media (min-width: 768px) {
        right: calc((var(--decoration-width) + 3rem) * -1);
      }
    }

    .l-image__wrapper {
      width: calc(135 * (100vw / 750));

      @media (min-width: 768px) {
        width: 9rem;
      }
    }

    .mv-heading__text-container {
      display: grid;
      row-gap: var(--row-gap);

      text-align: center;
    }

    .mv-text--heading-title {
      font-family: var(--ff-en);
      font-size: calc(40 * (100vw / 750));
      font-weight: var(--fw-regular);
      line-height: 1;
      letter-spacing: .075em;

      @media (min-width: 768px) {
        font-size: 3rem;
      }
    }

    .mv-text--heading-paragraph {
      font-size: calc(26 * (100vw / 750));
      line-height: calc(45 / 26);
      letter-spacing: .075em;

      @media (min-width: 768px) {
        font-size: 1.5rem;
        line-height: calc(30 / 15);
      }
    }
  }

  .mv-horizontal-rule {
    width: 100%;
    height: 2px;
    margin-block: calc(80 * (100vw / 750));
    background-color: #CCC0A2;
    border: none;

    @media (min-width: 768px) {
      margin-block: 5rem;
    }
  }

  .mv-description__wrapper {
    display: grid;
    row-gap: calc(80 * (100vw / 750));

    padding-inline: calc(50 * (100vw / 750));

    @media (min-width: 768px) {
      row-gap: 5rem;

      max-width: 73rem;
      margin-inline: auto;
      padding-inline: 0;
    }
  }

  .mv-description-text__container {
    display: grid;
    row-gap: calc(30 * (100vw / 750));

    text-align: center;

    @media (min-width: 768px) {
      row-gap: 2rem;
    }
  }

  .mv-text--description-paragraph {
    font-size: calc(24 * (100vw / 750));
    letter-spacing: .1em;
    line-height: calc(48 / 24);

    @media (min-width: 768px) {
      font-size: 1.3rem;
    }
  }

  .mv-anchor-button__container {
    display: grid;
    row-gap: calc(20 * (100vw / 750));

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
      column-gap: 2rem;
    }
  }

  .mv-button--anchor {
    display: grid;
    justify-items: center;

    width: 100%;
    padding-block: calc(30 * (100vw / 750));
    background-color: #EAE8E5;

    @media (min-width: 768px) {
      padding-block: 2rem;
    }

    & > small {
      margin-bottom: calc(10 * (100vw / 750));

      font-size: calc(22 * (100vw / 750));
      letter-spacing: .075em;
      line-height: 1;

      @media (min-width: 768px) {
        margin-bottom: .7rem;

        font-size: 1.3rem;
      }
    }

    & > span {
      margin-bottom: calc(20 * (100vw / 750));

      font-family: var(--ff-en);
      font-size: calc(30 * (100vw / 750));
      line-height: 1;

      @media (min-width: 768px) {
        margin-bottom: 1.35rem;

        font-size: 1.8rem;
      }
    }

    &::after {
      content: "";

      width: calc(30 * (100vw / 750));
      aspect-ratio: 30 / 9;
      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2231.029%22%20height%3D%2211.024%22%20viewBox%3D%220%200%2031.029%2011.024%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_319%22%20data-name%3D%22%E3%83%91%E3%82%B9%20319%22%20d%3D%22M7952.5%2C1656l15%2C9%2C15-9%22%20transform%3D%22translate(-7951.985%20-1655.142)%22%20fill%3D%22none%22%20stroke%3D%22%238b8b8b%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat;
      background-size: contain;
    }

    @media (min-width: 768px) {
      &::after {
        width: 2rem;
      }
    }
  }
}


/*
 * Section - SKIN, BODY, HAIR CARE
 */

[data-section-name="skin-care"],
[data-section-name="body-care"],
[data-section-name="hair-care"] {
  .l-lp__section-inner {
    display: grid;
    justify-items: center;
  }

  .c-lp__text--section-heading {
    margin-bottom: calc(36 * (100vw / 750));

    @media (min-width: 768px) {
      margin-bottom: 3.7rem;
    }
  }

  .c-lp__text--annotation {
    margin-top: calc(30 * (100vw / 750));

    text-align: center;

    @media (min-width: 768px) {
      width: 100%;
      margin-top: 1.5rem;
      padding-inline: 4.2rem;

      text-align: left;
    }
  }
}


/*
 * Section - BODY CARE
 */

[data-section-name="body-care"] {
  --color-rank: #F6F5F3;

  .c-product-information__image-wrapper {
    background-color: rgba(255, 255, 255, .8);
  }

  .c-product-information__liquid-decoration-wrapper {
    &::before,
    &::after {
      background-image: url(../imgs/liquid-decoration-gray.png);
    }
  }

  .c-product-information__text--review {
    & > span {
      & > b {
        background: linear-gradient(transparent 50%, #DDDBD5 50%);
      }
    }
  }
}


/*
 * Section - bottom
 */

[data-section-name="bottom"] {
  padding-bottom: calc(150 * (100vw / 750));

  @media (min-width: 768px) {
    padding-bottom: 14rem;
  }

  .l-lp__section-inner {
    display: grid;
    row-gap: calc(140 * (100vw / 750));
    justify-items: center;

    @media (max-width: 767px) {
      padding-inline: 0;
    }

    @media (min-width: 768px) {
      row-gap: 10rem;
    }
  }

  .c-related-products__wrapper {
    --box-shadow-height: 10px;

    display: grid;
    justify-items: center;
    row-gap: calc((50 * (100vw / 750)) - var(--box-shadow-height));

    @media (min-width: 768px) {
      row-gap: calc(6rem - var(--box-shadow-height));
    }
  }

  .c-related-products__slider {
    @media (min-width: 768px) {
      padding-inline: calc(2.6rem - var(--box-shadow-height));
    }

    [class*="swiper-button"] {
      @media (max-width: 767px) {
        display: none;
      }
    }

    .swiper-button-prev {
      left: calc((var(--swiper-button-size) / 2 * -1) + var(--box-shadow-height));

      background-image: var(--arrow-prev-transparent);

      @media (min-width: 768px) {
        left: 1.2rem;
      }
    }

    .swiper-button-next {
      right: calc((var(--swiper-button-size) / 2 * -1) + var(--box-shadow-height));

      background-image: var(--arrow-next-transparent);

      @media (min-width: 768px) {
        right: 1.2rem;
      }
    }

    .swiper-pagination {
      --pagination-size: calc(16 * (100vw / 750));

      column-gap: calc(25 * (100vw / 750));

      margin-top: calc((50 * (100vw / 750)) - var(--box-shadow-height));

      @media (min-width: 768px) {
        --pagination-size: .8rem;

        column-gap: 1rem;

        margin-top: calc(4rem - var(--box-shadow-height));
      }
    }
  }

  .c-related-products__content-wrapper {
    padding: var(--box-shadow-height);
  }

  .c-related-products__content-inner {
    display: grid;
    align-content: flex-start;
    justify-items: center;

    height: 100%;
    padding: calc(50 * (100vw / 750)) calc(20 * (100vw / 750));
    border-radius: 20px;
    box-shadow: 0px 0px var(--box-shadow-height) rgba(0, 0, 0, 0.1);

    @media (min-width: 768px) {
      padding: 2.3rem 1rem;
    }
  }

  .c-related-products__text--category {
    display: grid;
    place-content: center;

    margin-bottom: calc(30 * (100vw / 750));
    padding: calc(7 * (100vw / 750)) calc(30 * (100vw / 750));
    border: solid 1px #A9AAAA;

    color: #A9AAAA;
    font-size: calc(22 * (100vw / 750));
    letter-spacing: .075em;
    line-height: 1;

    @media (min-width: 768px) {
      margin-bottom: 2rem;
      padding: .2rem 1rem;

      font-size: 1.2rem;
    }
  }

  .c-related-products__image-wrapper {
    margin-bottom: calc(40 * (100vw / 750));

    @media (min-width: 768px) {
      margin-bottom: 2rem;
    }
  }

  .c-related-products__text--product-name {
    margin-bottom: calc(30 * (100vw / 750));

    font-size: calc(24 * (100vw / 750));
    letter-spacing: .075em;
    line-height: calc(42 / 24);
    text-align: center;

    @media (min-width: 768px) {
      margin-bottom: 1.3rem;

      font-size: 1.4rem;
      line-height: calc(24 / 14);
    }
  }

  .c-related-products__text--product-price {
    font-family: var(--ff-en);
    font-size: calc(22 * (100vw / 750));
    letter-spacing: .075em;
    line-height: normal;
    text-align: center;

    @media (min-width: 768px) {
      font-size: 1.2rem;
    }

    & > small {
      font-size: calc(20 * (100vw / 750));

      @media (min-width: 768px) {
        font-size: 1rem;
      }
    }
  }
}