@charset "UTF-8";


/* lenis
  ------------------------------------------ */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}


/* 共通
  ------------------------------------------ */
.pc-only {
  @media (width >=768px) {
    display: inline;
  }

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

.sp-only {
  @media (width >=768px) {
    display: none;
  }

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

.otona-bigan {
  --c-bg: #FFF1E8;
  --c-orange: #e37438;
  --c-text: #4a3428;
  --font-mincho: "游明朝", "Yu Mincho", yumincho, "Hiragino Mincho Pro", serif;

  background-color: var(--c-bg);

  /*---------------------------------------
   kv
  ---------------------------------------*/
  .kv {
    text-align: center;
    position: relative;
    padding-block: min(8vw, 50px) min(6vw, 30px);

    @media (width < 768px) {
      padding-block: 0;
    }
  }

  /*---------------------------------------
   lead
  ---------------------------------------*/
  .lead {
    position: relative;
    color: #fff;
    background: var(--c-orange);
    padding-top: min(160px, 16vw);
    padding-inline: min(5vw, 30px);
    padding-bottom: min(80px, 12vw);
    overflow: hidden;

    &::before {
      position: absolute;
      top: -1px;
      left: 0;
      content: "";
      display: block;
      width: 100%;
      height: min(100px, 20vw);
      background: url(../img/wave.svg) no-repeat center top / 100% auto;
    }

    .lead__title {
      font-family: var(--font-mincho);
      font-size: min(32px, 5.6vw);
      font-weight: 600;
      text-align: center;
      line-height: 1.8;
      letter-spacing: .1em;
    }

    .lead__text {
      margin-top: min(5vw, 35px);
      font-size: min(20px, 4vw);
      font-weight: 700;
      line-height: 2;
      text-align: center;
    }

    .lead__flowers {
      li:nth-child(1) {
        position: absolute;
        left: 0;
        top: min(20px, 5vw);

        @media (width < 768px) {
          left: -5vw;
          top: 0;
        }

        img {
          max-width: 25vw;
        }
      }

      li:nth-child(2) {
        position: absolute;
        right: 0;
        top: 0;

        img {
          max-width: 25vw;
        }
      }

      li:nth-child(3) {
        position: absolute;
        right: min(30px, 5vw);
        bottom: max(-30px, -5vw);
        z-index: 1;

        @media (width < 768px) {
          right: -5vw;
        }

        img {
          max-width: 25vw;
        }
      }
    }

  }

  /*---------------------------------------
   worries
  ---------------------------------------*/
  .worries {
    position: relative;
    padding-bottom: min(79px, 9.9vw);

    .worries__inner {
      padding-top: min(12vw, 60px);
      padding-inline: min(5vw, 30px);
      background: #EBE1E1;
    }

    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      display: inline-block;
      width: 100%;
      height: min(80px, 10vw);
      background: #EBE1E1;
      clip-path: polygon(0 0, 100% 0%, 50% 100%);
    }

    .worries__title {
      font-family: var(--font-mincho);
      font-size: min(32px, 5.8vw);
      font-weight: 600;
      text-align: center;
      line-height: 1.8;
      letter-spacing: .1em;

      strong {
        color: var(--c-orange);
      }
    }

    .worries__main {
      margin-top: min(5vw, 20px);
      text-align: center;
    }
  }
}

/*---------------------------------------
   point-intro
  ---------------------------------------*/
.point-intro {
  padding-top: min(12vw, 90px);
  padding-inline: min(5vw, 30px);
  text-align: center;

  .point-intro__title {
    font-family: var(--font-mincho);
    font-size: min(32px, 5vw);
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: .1em;
  }

  .point-intro__main {
    margin-top: min(5vw, 30px);
  }

  .point-intro__orange {
    margin-top: min(5vw, 30px);
  }
}

/*---------------------------------------
   point common
  ---------------------------------------*/
.point {
  padding-inline: min(5vw, 30px);

  .point__inner {
    max-width: 970px;
    margin-inline: auto;
    background-color: white;
    padding-block: min(10vw, 60px);
    padding-inline: min(5vw, 30px);
    border-radius: 10px;
  }

  .point__head {
    text-align: center;

    .point__num {
      &::after {
        content: "";
        display: block;
        width: min(80px, 12vw);
        height: 2px;
        background: var(--c-text);
        margin-inline: auto;
        margin-top: min(15px, 5vw);
      }

      img {
        max-width: 40%;
      }
    }

    .point__title {
      margin-top: min(6vw, 40px);
      font-size: min(24px, 4.6vw);
      font-weight: 600;
      line-height: 1.6;

      strong {
        font-size: 120%;
        background: linear-gradient(transparent 60%, #EDA781 60%);
      }

      small {
        font-size: 60%;
      }

      span {
        font-size: 60%;
        display: block;
      }
    }
  }
}

/* point01 */
.point01 {
  margin-top: min(80px, 12vw);

  .point01__imgs {
    display: flex;
    justify-content: center;
    gap: min(8vw, 80px);
    margin-top: min(5vw, 30px);

    @media (width < 768px) {
      gap: min(3vw, 20px);
    }

    figure {
      text-align: center;
      width: min(242px, 42vw);
    }

    figcaption {
      margin-top: min(10px, 2vw);
      font-size: min(16px, 3.6vw);
      font-weight: 600;

      span {
        margin-left: .4em;
        font-size: .85em;
      }
    }
  }

  .point__cap {
    text-align: center;
    font-size: min(24px, 4.6vw);
    font-weight: 600;
    margin-top: min(5vw, 30px);
  }
}

/* point02 */
.point02 {
  margin-top: min(60px, 10vw);

  .point__main {
    margin-top: min(5vw, 10px);
    max-width: 95%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    align-items: center;
    column-gap: min(10vw, 40px);

    @media (width < 768px) {
      max-width: 100%;
      grid-template-columns: 1fr;
      row-gap: min(5vw, 30px);
      margin-top: 5vw;
    }

    figure {
      @media (width < 768px) {
        text-align: center;
        max-width: 50%;
        margin-inline: auto;
      }
    }

    .point__main--desc {
      font-size: min(22px, 4.6vw);
      font-weight: 600;
    }
  }

  .exam {
    margin-top: min(5vw, 30px);

    .exam__catch {
      display: flex;
      justify-content: center;

      span {
        display: inline-block;
        padding: min(10px, 2vw) min(20px, 4vw);
        color: #4AACAE;
        font-size: min(32px, 5.2vw);
        font-weight: 600;
        border: 2px solid #4AACAE;

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

    .exam__arrow {
      display: flex;
      justify-content: center;
      margin-top: min(5vw, 30px);
    }

    .arrow {
      position: relative;
      display: inline-block;
      width: min(62px, 12vw);
      height: min(33px, 6vw);

      &::before,
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: min(2px, 1vw);
        height: min(60px, 10vw);
        border-radius: 9999px;
        background-color: #000000;
        transform-origin: 50% 100%;
      }

      &::before {
        transform: rotate(60deg);
      }

      &::after {
        transform: rotate(-60deg);
      }
    }

    .exam__graph {
      margin-top: min(5vw, 30px);
      display: flex;
      justify-content: center;
    }
  }
}

/* point03 */
.point03 {
  margin-top: min(60px, 10vw);

  .point__main {
    max-width: 95%;
    margin-inline: auto;
    margin-top: min(5vw, 10px);
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    align-items: center;
    column-gap: min(10vw, 40px);

    @media (width < 768px) {
      max-width: 100%;
      grid-template-columns: 1fr;
      row-gap: min(5vw, 30px);
      margin-top: 5vw;
    }

    figure {
      @media (width < 768px) {
        text-align: center;
        max-width: 50%;
        margin-inline: auto;
      }
    }

    .point__main--desc {
      font-size: min(22px, 4.6vw);
      font-weight: 600;
    }
  }
}

/* point04 */
.point04 {
  margin-top: min(60px, 10vw);

  .point__plants {
    margin-top: min(5vw, 10px);

    ul {
      max-width: 85%;
      margin-inline: auto;
      margin-top: min(5vw, 20px);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: min(4vw, 20px) min(6vw, 30px);

      @media (width < 768px) {
        max-width: 90%;
        grid-template-columns: repeat(2, 1fr);
      }

      figure {
        text-align: center;
      }

      figcaption {
        margin-top: min(10px, 2vw);
        font-size: min(20px, 4.2vw);
        font-weight: 600;

        span {
          font-size: 50%;
          vertical-align: text-top;
        }
      }
    }

    .point__plants--note {
      max-width: 85%;
      margin-inline: auto;
      margin-top: min(5vw, 20px);
      font-size: min(12px, 3.2vw);
      text-align: right;
    }

    .point__plants--desc {
      text-align: center;
      font-size: min(24px, 4.6vw);
      font-weight: 600;
      margin-top: min(10vw, 60px);
    }
  }

  .exam {
    margin-top: min(10vw, 60px);

    .exam__catch {
      display: flex;
      justify-content: center;

      span {
        display: inline-block;
        padding: min(10px, 2vw) min(20px, 4vw);
        color: #4AACAE;
        font-size: min(32px, 5.2vw);
        font-weight: 600;
        border: 2px solid #4AACAE;

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

    .exam__arrow {
      display: flex;
      justify-content: center;
      margin-top: min(5vw, 30px);
    }

    .arrow {
      position: relative;
      display: inline-block;
      width: min(62px, 12vw);
      height: min(33px, 6vw);

      &::before,
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: min(2px, 1vw);
        height: min(60px, 10vw);
        border-radius: 9999px;
        background-color: #000000;
        transform-origin: 50% 100%;
      }

      &::before {
        transform: rotate(60deg);
      }

      &::after {
        transform: rotate(-60deg);
      }
    }

    .exam__graph {
      margin-top: min(5vw, 30px);
      display: flex;
      justify-content: center;
      gap: min(5vw, 20px);
      text-align: center;

      @media (width < 768px) {
        flex-direction: column;
        gap: min(5vw, 20px);
      }
    }
  }
}

/* point05 */
.point05 {
  margin-top: min(60px, 10vw);

  .point05__main {
    max-width: 95%;
    margin-inline: auto;
    margin-top: min(6vw, 30px);
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    column-gap: min(10vw, 40px);

    @media (width < 768px) {
      max-width: 100%;
      grid-template-columns: 1fr;
      row-gap: min(5vw, 30px);
    }

    .point05__main--img {
      @media (width < 768px) {
        text-align: center;
        max-width: 50%;
        margin-inline: auto;
      }
    }

    .point05__main--desc {
      font-size: min(20px, 4.2vw);
      font-weight: 600;
    }

    .point05__main--safe {
      margin-top: min(5vw, 20px);
      display: inline-block;
      padding: min(5px, 1vw) min(20px, 4vw);
      border: 1px solid currentColor;
    }

    ol {
      margin-top: min(5vw, 20px);

      li {
        list-style: decimal;
        letter-spacing: .1em;
        margin-left: 1.5em;
      }
    }
  }
}



/*---------------------------------------
   howto
  ---------------------------------------*/
.howto {
  margin-top: min(60px, 10vw);
  background: white url(../img/howto_bg.svg) no-repeat center top / 100% auto;
  padding-inline: min(5vw, 30px);
  padding-bottom: min(10vw, 30px);

  .howto__head {
    text-align: center;
    padding-top: min(16vw, 120px);

    .howto__title {
      &::after {
        content: "";
        display: block;
        width: min(80px, 12vw);
        height: 2px;
        background: var(--c-text);
        margin-inline: auto;
        margin-top: min(15px, 5vw);
      }

      img {
        max-width: 40%;
      }
    }

  }

  .howto__list {
    max-width: 830px;
    margin-inline: auto;
    margin-top: min(5vw, 30px);
  
    .howto__list--item {
      display: flex;
      justify-content: center;
      padding-block: min(6vw, 50px);
      align-items: center;
      gap: min(5vw, 36px);
      font-size: min(20px, 4.2vw);
      letter-spacing: .1em;
      font-weight: 600;
      line-height: 1.8;
    
      @media (width < 768px) {
        flex-direction: column;
      }

      figure {
        @media (width < 768px) {
          text-align: center;
          max-width: 50%;
          margin-inline: auto;
        }
      }
    
      em {
        font-style: normal;
        font-weight: 600;
        text-decoration: underline;
      }
    
      .howto__list--catch {
        margin-block: min(15px, 3vw);
        span {
          letter-spacing: .2em;
          display: inline-block;
          background-color: #FFCCB1;
          margin-block: min(3px, 1vw);
          padding-inline: min(5px, 1vw);
        }
      }
    }
    
    .howto__list--item:not(:last-child) {
      border-bottom: 2px dashed #FFCCB1;
    }
    
    .howto__list--item:nth-child(even) {
      flex-direction: row-reverse;
    
      @media (width < 768px) {
        flex-direction: column;
      }
    }
  }

}


/*---------------------------------------
   design
  ---------------------------------------*/
.design {
  padding-block: min(10vw, 80px);
  padding-inline: min(5vw, 30px);
  text-align: center;

  .design__title {
    display: inline-block;
    font-family: var(--font-mincho);
    font-size: min(32px, 5vw);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .2em;
    position: relative;
  
    &::before {
      content: "";
      display: block;
      background: url(../img/design_title_hana01.svg) no-repeat center center / contain;
      width: min(55px, 12vw);
      height: min(78px, 16vw);
      position: absolute;
      top: 50%;
      left: -60px;
      transform: translateY(-50%);
      @media (width < 768px) {
        left: -8vw;
      }
    }
  
    &::after {
      content: "";
      display: block;
      background: url(../img/design_title_hana02.svg) no-repeat center center / contain;
      width: min(50px, 12vw);
      height: min(84px, 16vw);
      position: absolute;
      top: 50%;
      right: -55px;
      transform: translateY(-50%);
      @media (width < 768px) {
        right: -8vw;
      }
    }
    span {
      font-size: 70%;
    }
  }
  
  .design__main {
    margin-top: min(7vw, 40px);
    text-align: center;
  }

  .design__text {
    margin-top: min(10vw, 60px);
    font-size: min(20px, 3.6vw);
    font-weight: 600;
    letter-spacing: .2em;
  }

}


/*---------------------------------------
   product
  ---------------------------------------*/
.product {
  max-width: 1000px;
  margin-inline: auto;
  background: white;  

  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: min(5vw, 40px);
  padding: min(5vw, 36px) min(6vw, 50px);

  @media (width < 768px) {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    margin-inline: min(5vw, 30px);
  }

  .product__img {
    text-align: center;

    @media (width < 768px) {
      max-width: 50%;
      margin-inline: auto;
    }
  }
  
  .product__info {
    font-weight: 500;

    .product__info--name {
      font-family: var(--font-mincho);
      font-size: min(28px, 6vw);
      letter-spacing: .2em;
      span {
        font-size: 70%;
        display: block;
      }
    }
    .product__info--sales {
      margin-top: min(20px, 4.2vw);
      font-size: min(18px, 4.4vw);
    }

    .product__info--tags {
      width: max-content;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: min(10px, 2vw);
      margin-top: min(5vw, 20px);
    
      @media (width < 768px) {
        justify-content: center;
      }
    
      li {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: min(6px, 3vw);
        padding: min(8px, 2vw) min(12px, 3vw);
        background: #EEEEEE;
        font-size: min(14px, 3.2vw);
        text-align: left;
        line-height: 1.4;
      }
    
      img {
        width: min(18px, 3.6vw);
        height: min(17px, 3.4vw);
      }
    }

    .product__info--btn {
      margin-top: min(7vw, 30px);

      a {
        font-weight: 600;
        display: grid;
        place-items: center;
        max-width: min(405px, 100%);
        padding-block: min(20px, 4vw);
        border: 1px solid #333333;
        background: #333333;
        color: white;
        font-size: min(18px, 4.2vw);
        letter-spacing: .1em;
        text-decoration: none;
        transition: background-color .3s ease, color .3s ease;

        @media (width < 768px) {
          margin-inline: auto;
        }
    
        @media (hover: hover) {
          &:hover {
            background-color: white;
            color: #333333;
          }
        }
      }
    }

  }


}


/*---------------------------------------
   series
  ---------------------------------------*/
.series {
  margin-top: min(12vw, 80px);
  max-width: 1000px;
  margin-inline: auto;
  padding-bottom: min(12vw, 80px);

  @media (width < 768px) {
    margin-inline: min(5vw, 30px);
  }

  .series__title {
    font-size: min(30px, 6vw);
    font-weight: 600;
    text-align: center;
    letter-spacing: .2em;
  }
  
  .series__list {
    margin-top: min(5vw, 30px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(3vw, 20px);

    @media (width < 768px) {
      grid-template-columns: 1fr;      margin-inline: auto;
    }

    li {
      background-color: white;
      padding-block: min(30px, 6vw);
      padding-inline: min(20px, 5vw);

      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 5;

      h3 {
        text-align: center;
        font-family: var(--font-mincho);
        font-size: min(24px, 5.2vw);
        font-weight: 600;
        letter-spacing: .1em;

        @media (width < 768px) {
          font-size: min(28px, 5.2vw);
        }
      }

      figure {
        text-align: center;
        display: grid;
        justify-items: center;
        align-items: end;
      }

      .series__list--tag {
        text-align: center;
        font-size: min(18px, 4vw);
        font-weight: 700;
        padding-inline: min(5px, 1vw);
        border-radius: 50px;
        padding-block: min(7px, 2vw);
        
      }

      &.series__list--bigansui {
        .series__list--tag {
          color: #5461A6;
          border: 1px solid #5461A6;
        }
      }
      &.series__list--otona {
        .series__list--tag {
          color: #E37438;
          border: 1px solid #E37438;
        }
      }
      &.series__list--mens {
        .series__list--tag {
          color: #1A1B7D;
          border: 1px solid #1A1B7D;
        }
      }

      .series__list--for {
        text-align: center;
        font-size: min(16px, 3.6vw);
        font-weight: 700;
      }

      .series__list--btn {
        a {
          font-weight: 600;
          display: grid;
          place-items: center;
          padding-block: min(15px, 3vw);
          border: 1px solid #333333;
          background: #333333;
          color: white;
          font-size: min(18px, 4.2vw);
          transition: background-color .3s ease, color .3s ease;

          @media (hover: hover) {
            &:hover {
              background-color: white;
              color: #333333;
            }
          }
        }
      }
    }
  }
}