@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
}

.teiki {
  --teiki-width: 960px;
  width: min(var(--teiki-width), 100%);
  margin-inline: auto;
  font-family: var(--module-font-sans);
  margin-block: 0 50px;
  background-color: var(--module-color-light);
  overflow-x: clip;

  @media (width <= 768px) {
    margin-block: 10px 40px;
  }

  * {
    box-sizing: border-box;
  }

  .normal_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(318px, 100%);
    height: 64px;
    padding: 5px;
    color: var(--module-color-black);
    background-color: var(--module-color-white);
    border: 1px solid;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    transition: opacity 0.3s ease;
    text-decoration: none;

    &::after {
      content: "";
      display: inline-block;
      width: 23px;
      aspect-ratio: 1 / 1;
      background: url(../../images/icon_tell_black.svg) no-repeat center center / contain;
    }

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .teiki__title {
    visibility: hidden;
    position: absolute;
  }

  .teiki-inner {
    padding-inline: 20px;

    @media (width <= 768px) {
      padding-inline: 25px;
    }
  }

  .mv {
    position: relative;

    .mv__back {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: var(--teiki-width);
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .mv__content {
      width: min(329px, 100%);
      margin-inline: auto;
      position: relative;
      z-index: 1;
      padding-block: 60px 30px;
    }

    .mv__logo {
      width: 100%;

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

    .mv__title {
      width: 100%;
      font-size: 37px;
      font-weight: 700;
      letter-spacing: 0.17em;
      text-align: center;
      color: #ffffff;

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

    .mv__box {
      margin-block-start: 23px;
      background-color: #ffffff;
      border-radius: 4px;
      padding: 23px 29px;
    }

    .mv__text {
      font-size: 18px;
      line-height: 1.61;

      strong {
        font-weight: 700;
        color: var(--module-color-primary);
      }
    }

    .mv__img {
      position: absolute;
      bottom: 0;
      right: -45px;
      width: 150px;
      z-index: 2;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .benefits {
    padding-block: 56px 53px;

    .benefits__contents {
      display: grid;
      gap: 63px;
    }

    .benefits__subTitle {
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .benefits__title {
      font-size: 40px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-align: center;
      margin-block-start: 5px;

      strong {
        font-size: 46px;
        color: var(--module-color-primary);
      }
    }

    .benefits__list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;

      @media (width <= 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 16px;
      }
    }

    .benefits__item {
      min-height: 136px;
      position: relative;
      background: #ffffff;
      border-radius: 4px;
      box-shadow: 0 4px 4px 0px color-mix(in srgb, var(--module-color-black) 25%, transparent);
      border: 2px solid var(--module-color-primary);
      padding: 24px 5px 12px;

      a {
        text-decoration: none;
        color: initial;
        display: block;
        transition: opacity 0.3s ease;
      }

      @media (any-hover: hover) {
        &:hover {
          a {
            opacity: 0.7;
          }
        }
      }
    }

    .benefits__point-img {
      margin: 0;
      width: 79px;
      aspect-ratio: 79 / 64;
      margin-inline: auto;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .benefits__point-number {
      width: 35px;
      aspect-ratio: 1 / 1;
      background-color: var(--module-color-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 29px;
      font-family: var(--module-font-inter);
      font-weight: 600;
      color: #ffffff;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .benefits__point-textWrap {
      margin-block-start: 6px;
    }

    .benefits__point-subText {
      font-size: 13px;
      font-weight: 500;
      line-height: 1.13;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .benefits__point-text {
      font-size: 17px;
      font-weight: 500;
      text-align: center;
      color: #000000;
      margin-block-start: 5px;
    }
  }

  .pointBlock {
    background: var(--module-color-primary);
    padding-block: 26px;

    .pointBlock__contents {
      display: grid;
      gap: 50px;

      @media (width <= 768px) {
        gap: 30px;
      }
    }
  }

  #benefits-point-1,
  #benefits-point-2,
  #benefits-point-3,
  #benefits-point-4,
  #products-kuro,
  #products-hairoil,
  #products-shampoo {
    scroll-margin-top: calc(var(--module-header-height));
  }

  .pointSec {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 0px #6e050c;
    padding: 40px 25px 50px;

    @media (width <= 768px) {
      padding: 38px 25px 24px;
    }

    .pointSec__number {
      display: grid;
      place-items: center;
      width: 60px;
      aspect-ratio: 1 / 1;
      margin-inline: auto;
      background-color: var(--module-color-primary);
      border-radius: 50%;
      font-size: 36px;
      font-family: var(--module-font-inter);
      font-weight: 600;
      color: #ffffff;

      @media (width <= 768px) {
        width: 36px;
        font-size: 24px;
      }
    }

    .pointSec__head {
      margin-block-start: 18px;
    }

    .pointSec__title {
      font-size: 32px;
      font-family: "Noto Sans JP";
      font-weight: 400;
      line-height: normal;
      letter-spacing: 0.01em;
      text-align: center;
      color: #000000;

      strong {
        color: var(--module-color-primary);
        font-weight: 500;
      }

      small {
        display: block;
        font-size: 19px;
        font-family: var(--module-font-sans);
        font-weight: 500;
      }

      span {
        display: inline-block;
      }
    }

    .pointSec__imgWrap {
      margin-block-start: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: fit-content;
      margin-inline: auto;

      &.pointSec__imgWrap--1 {
        height: 82px;

        @media (width <= 768px) {
          gap: 20px;
        }
      }

      &.pointSec__imgWrap--2 {
        height: 89px;

        @media (width <= 768px) {
          height: 98px;
        }
      }

      &.pointSec__imgWrap--3 {
        grid-template-columns: repeat(2, 1fr);
        height: 90px;
      }

      &.pointSec__imgWrap--4 {
        height: 105px;
      }
    }

    .pointSec__img {
      display: block;
      width: fit-content;
      height: inherit;

      img {
        display: block;
        width: 100%;
        height: inherit;
        object-fit: contain;
      }
    }

    .pointSec__desc {
      margin-block-start: 32px;
    }

    .pointSec__text {
      font-size: 16px;
      line-height: 1.75;
      letter-spacing: 0.02em;
      text-align: center;

      @media (width <= 768px) {
        text-align: left;
      }

      & + & {
        margin-block-start: 8px;
      }

      strong {
        font-size: 18px;
        font-weight: 700;
      }

      span {
        color: var(--module-color-primary);
      }

      a {
        font-weight: 700;
        text-decoration: underline;
        color: initial;
        transition: opacity 0.3s ease;

        @media (any-hover: hover) {
          &:hover {
            opacity: 0.7;
          }
        }
      }

      mark {
        background: linear-gradient(
          to bottom,
          transparent 65%,
          color-mix(in srgb, #ecd085 63%, transparent) 65%
        );
        padding-block: 2px;
        color: var(--module-color-primary);
        font-weight: 700;
      }
    }

    .pointSec__small {
      display: block;
      font-size: 14px;
      font-family: var(--module-font-inter);
      line-height: 1.83;
      text-align: center;
      
      @media (width <= 768px) {
        text-align: left;
      }
    }

    .pointSec__text + .pointSec__small {
      margin-block-start: 19px;

      @media (width <= 768px) {
        margin-block-start: 14px;
      }
    }

    .pointSec__btnWrap {
      margin-block-start: 20px;
      display: flex;
      justify-content: center;
    }

    .pointSec__block {
      margin-block-start: 36px;

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

      @media (width <= 768px) {
        margin-block-start: 28px;
      }
    }

    .pointSec__block-2 {
      margin-block-start: 20px;
      width: min(550px, 100%);
      margin-inline: auto;

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

      @media (width <= 768px) {
        margin-block-start: 20px;
      }
    }

    .pointSec__block-small {
      display: block;
      font-size: 14px;
      line-height: 1.92;
      margin-block-start: 14px;
      
      @media (width <= 768px) {
        margin-block-start: 8px;
      }
    }

    .pointSec__tag {
      margin-block-start: 50px;
      background-color: var(--module-color-primary);
      border-radius: 23px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #ffffff;
      width: min(322px, 100%);
      min-height: 37px;
      display: grid;
      place-items: center;
      padding: 5px 15px;
      margin-inline: auto;
    }

    .pointSec__contact {
      --border-color: #c0c0c0;
      margin-block-start: 30px;
      display: grid;
      grid-template-columns: 45% 1fr;
      border-radius: 4px;
      border: 1px solid var(--border-color);
      width: min(380px, 100%);
      margin-inline: auto;

      dt,
      dd {
        padding: 4px 10px;
        display: flex;
        align-items: center;
        min-height: 36px;

        @media (width <= 768px) {
          padding: 10px;
        }
      }

      dt {
        justify-content: center;
        font-size: 15px;
        background-color: #dddddd;

        &:nth-child(n + 2 of dt) {
          border-top: 1px solid var(--border-color);
        }

        @media (width <= 768px) {
          font-size: 15px;
          text-align: center;
          line-height: 1.5;
          padding: 10px 5px;
        }
      }
      dd {
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 15px;
        border-left: 1px solid var(--border-color);

        &:nth-child(n + 2 of dd) {
          border-top: 1px solid var(--border-color);
        }
        
        @media (width <= 768px) {
          font-size: 14px;
          padding: 10px 15px;
        }
      }

      a {
        display: flex;
        align-items: center;
        gap: 3px;
        color: initial;
        text-decoration: none;
        transition: opacity 0.3s ease;

        @media (width <= 768px) {
          flex-direction: column;
          gap: 10px;
        }

        @media (any-hover: hover) {
          &:hover {
            opacity: 0.7;
          }
        }
      }

      img {
        @media (width <= 768px) {
          width: 34px;
          height: 34px;
        }
      }
    }
  }

  .products {
    padding-block-start: 100px;

    @media (width <= 768px) {
      padding-block-start: 50px;
    }

    .products__title {
      font-size: 36px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0.04em;
      text-align: center;
    }

    .products__links {
      margin-block-start: 50px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: min(600px, 100%);
      margin-inline: auto;
    }

    .products__link {
      padding-block-end: 50px;
      position: relative;
      text-decoration: none;
      color: initial;
      transition: opacity 0.3s ease;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        aspect-ratio: 1 / 1;
        background: url("../images/teiki/icon_circle_link.svg") no-repeat center
          center / contain;
      }

      img {
        display: block;
        width: 115px;
        height: auto;
        margin-inline: auto;

        @media (width <= 768px) {
          width: 84px;
        }
      }

      p {
        font-size: 16px;
        font-family: var(--module-font-inter);
        font-weight: 700;
        text-align: center;
        color: var(--module-color-black);
        line-height: 1.5;
        margin-block-start: 10px;
      }

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    .products_contents {
      margin-block-start: 55px;
      display: grid;
      gap: 25px;

      @media (width <= 768px) {
        gap: 30px;
        margin-block-start: 40px;
      }
    }
  }

  .productsItem {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 0px #d9d9d9;
    padding: 28px 25px 35px;
    min-width: 0;

    .productsItem__head {
      display: grid;
      grid-template-columns: 100px 1fr;
      align-items: center;
      gap: 25px;
      width: min(420px, 100%);
      margin-inline: auto;
    }

    .productsItem__img {
      display: block;
      width: 100%;
      height: auto;
    }

    .productsItem__info {
      display: grid;
      gap: 10px;
    }

    .productsItem__title {
      font-size: 24px;
      font-family: var(--module-font-inter);
      font-weight: 500;
      line-height: 1.21;
    }

    .productsItem__tag {
      display: grid;
      place-items: center;
      font-size: 16px;
      font-family: var(--module-font-inter);
      border: 1px solid var(--module-color-primary);
      min-width: 191px;
      width: fit-content;
      height: 30px;
      padding: 2px 5px;
      line-height: 1;

      strong {
        font-weight: 700;
      }

      @media (width <= 768px) {
        font-size: 14px;
        min-width: initial;
        width: 100%;
        max-width: 190px;
      }
    }

    .productsItem__mid {
      margin-block-start: 30px;
      min-width: 0;
    }

    .productsItem__midTitle {
      font-size: 15px;
      font-family: var(--module-font-inter);
      font-weight: 700;
      line-height: 1.33;
      border-radius: 53px;
      border: 1px solid;
      width: min(183px, 100%);
      margin-inline: auto;
      padding: 7px 10px;
      text-align: center;
    }

    .productsItem__flow-img {
      display: block;
      margin-block-start: 14px;
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;

      img {
        display: block;
        min-width: 599px;
        width: 599px;
        height: auto;
      }
    }

    .productsItem__desc {
      margin-block-start: 20px;
      width: fit-content;
      margin-inline: auto;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;

      @media (width <= 768px) {
        display: block;
      }
    }

    .productsItem__price-old {
      font-family: var(--module-font-inter);
      display: flex;
      align-items: center;
      width: fit-content;
      position: relative;

      span:nth-child(1) {
        font-size: 13px;
      }
      span:nth-child(2) {
        font-size: 17px;
      }
      span:nth-child(3) {
        font-size: 12px;
      }

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background-color: var(--module-color-black);
      }
    }

    .productsItem__price-wrap {
      margin-block-start: 20px;
    }

    .productsItem__price-tag {
      font-size: 15px;
    }

    .productsItem__price-new {
      margin-block-start: 10px;
      display: flex;
      align-items: center;
      gap: 10px;

      .tag {
        display: grid;
        place-items: center;
        font-size: 18px;
        font-family: var(--module-font-inter);
        font-weight: 700;
        color: #ffffff;
        background: linear-gradient(180deg, #e6d085 0%, #c49e58 100%);
        min-width: 90px;
        min-height: 34px;
      }

      .price {
        font-family: var(--module-font-inter);
        font-weight: 600;
        font-size: 34px;

        small {
          font-size: 16px;
        }
      }
    }

    .productsItem__btn-wrap {
      margin-block-start: 17px;
      flex-shrink: 0;
    }
  }

  .buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 259px;
    height: 64px;
    padding: 5px;
    color: var(--module-color-white);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.38;
    text-align: center;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    position: relative;
    background: linear-gradient(180deg, #e3202c 0%, #c1333c 100%);
    text-decoration: none;
    box-shadow: 2px 2px 8px 0px color-mix(in srgb, var(--module-color-black) 25%, transparent);

    @media (width <= 768px) {
      width: 100%;
    }

    &::after {
      content: "";
      display: inline-block;
      width: 12px;
      aspect-ratio: 20 / 25;
      background: currentColor;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
    }

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .contact {
    margin-block-start: 200px;
    background-color: var(--module-color-primary);
    padding-block: 40px 50px;

    @media (width <= 768px) {
      margin-block-start: 70px;
    }

    .contact__wrap {
      width: min(377px, 100%);
      margin-inline: auto;
    }

    .contact__title {
      font-size: 36px;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0.04em;
      text-align: center;
      color: #ffffff;
    }

    .contact__contents {
      margin-block-start: 40px;
      background: var(--module-color-white);
      border-radius: 10px;
      padding: 28px 15px;
    }

    .contact__tel {
      display: block;
      font-size: 35px;
      font-family: var(--module-font-inter);
      font-weight: 500;
      line-height: 1.14;
      text-align: center;
      color: #000000;
      text-decoration: none;
      transition: opacity 0.3s ease;

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    .contact__time-wrap {
      margin-block-start: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .contact__time {
      font-size: 12px;
      font-family: var(--module-font-inter);
      text-align: left;
      color: #000000;
      width: fit-content;
      padding: 5px 10px;
      border: 1px solid;
    }

    .contact__time-text {
      font-size: 15px;
      font-family: var(--module-font-inter);
    }
  }

  .faq {
    margin-block-start: 114px;

    @media (width <= 768px) {
      margin-block-start: 74px;
    }

    .faq__title {
      font-size: 36px;
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1.4;
      text-align: center;

      small {
        display: block;
        font-size: 22px;
        font-family: var(--module-font-inter);
        font-weight: 500;
        line-height: 1.73;
        text-align: center;
      }
    }

    .faq__body {
      margin-block-start: 77px;

      @media (width <= 768px) {
        margin-block-start: 40px;
      }
    }
  }

  .faqItem {
    border-top: 1px solid;
    padding-block: 20px;

    .faqItem__summary {
      display: grid;
      grid-template-columns: 36px 1fr;
      align-items: center;
      gap: 34px;
      cursor: pointer;
      transition: opacity 0.3s ease;
      position: relative;

      &::-webkit-details-marker {
        display: none;
      }

      @media (any-hover: hover) {
        &:hover {
          opacity: 0.7;
        }
      }
    }

    .faqItem__summary::before,
    .faqItem__summary::after {
      content: "";
      display: block;
      width: 20px;
      height: 1px;
      background: currentColor;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      right: 40px;
      transform-origin: center center;
      transition: transform 0.3s ease;

      @media (max-width: 768px) {
        width: 14px;
        height: 2px;
        right: 30px;
      }
    }
    .faqItem__summary::before {
      transform: translate(0%, -50%) rotate(90deg);
    }
    .faqItem__summary::after {
      transform: translate(0%, -50%) rotate(0deg);
    }

    &[open] .faqItem__summary::before {
      transform: translate(0%, -50%) rotate(0deg);
    }

    .faqItem__summary::marker,
    .faqItem__summary::-webkit-details-marker {
      display: none;
    }

    .faqItem__q-icon,
    .faqItem__a-icon {
      display: grid;
      place-items: center;
      font-size: 20px;
      font-family: var(--module-font-inter);
      font-weight: 500;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
    }
    
    .faqItem__q-icon {
      background: var(--module-color-white);
      color: var(--module-color-primary);
    }

    .faqItem__a-icon {
      background: var(--module-color-primary);
      color: var(--module-color-white);
    }

    .faqItem__q-text {
      font-size: 16px;
      font-family: var(--module-font-inter);
      font-weight: 500;
      line-height: 1.69;

      @media (width <= 768px) {
        font-size: 15px;
      }
    }

    .faqItem__body {
      padding-block-start: 12px;
      overflow: hidden;
    }

    .faqItem__a-contents {
      display: grid;
      grid-template-columns: 36px 1fr;
      align-items: flex-start;
      gap: 31px;
    }

    .faqItem__a-main {
      display: grid;
      gap: 17px;
      margin-block-start: 10px;
    }

    .faqItem__a-title {
      padding-inline: 4px;
      font-size: 16px;
      font-family: var(--module-font-inter);
      font-weight: 500;
      line-height: 1.31;

      @media (width <= 768px) {
        font-size: 15px;
      }
    }

    .faqItem__a-text {
      font-size: 16px;
      font-family: var(--module-font-inter);
      font-weight: 400;
      line-height: 1.44;

      @media (width <= 768px) {
        font-size: 15px;
      }
    }
  }
}