@charset "UTF-8";
/* CSS Document */
/* flowerArea */
/* h2Area */
.flowerArea .h2Area {
  background: linear-gradient(180deg, transparent 0%, transparent 70%, #feecea 70%, #feecea 100%);
  .sub_inner {
    padding: 100px 40px 70px;
    h2 {
      font-size: var(--font-lg-minus);
      font-family: var(--font-family-mincho);
      letter-spacing: var(--letter-spacing-wider);
      font-weight: var(--font-weight-semi-mid);
      }
    .txt {
      padding-top: 30px;
      p {
        font-size: var(--font-md);
        line-height: var(--line-height-lg);
      }
    }
    .img {
      margin-top: 70px;
      background-image: url("../img/flower/flower_img01.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      aspect-ratio: 1200 / 600;
    }
  }
}

/* itemArea */
.flowerArea .itemArea {
  background-color: #feecea;
  .sub_inner {
    padding: 0 40px 30px;
    text-align: center;
  }
}
.flowerArea .itemArea .sub_inner .item {
  padding-bottom: 70px;
  h3 {
    color: var(--color-secondary);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semi-mid);
    padding-bottom: 1.125rem;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      width: 50px;
      height: 2px;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #db4798;
    }
  }
}
.flowerArea .itemArea .sub_inner .item ul {
  padding-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
      width: calc(25% - 30px);
      background-color: #fff;
      border: 1px solid #e46d9d;
      padding: 30px 0;
    .f_icon {
      width: 90px;
      height: 90px;
      margin: 0 auto;
      background-color: #e46d9d;
      border-radius: 50%;
      position: relative;
      &::before {
        position: absolute;
        top: calc(50% - 30px);
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
      }
      &.f_icon01::before {
        content: url("../img/flower/f_icon01.svg");
      }
      &.f_icon02::before {
        content: url("../img/flower/f_icon02.svg");
      }
      &.f_icon03::before {
        content: url("../img/flower/f_icon03.svg");
      }
      &.f_icon04::before {
        content: url("../img/flower/f_icon04.svg");
      }
      &.f_icon05::before {
        content: url("../img/flower/f_icon05.svg");
      }
      &.f_icon06::before {
        content: url("../img/flower/f_icon06.svg");
      }
      &.f_icon07::before {
        content: url("../img/flower/f_icon07.svg");
      }
      &.f_icon08::before {
        content: url("../img/flower/f_icon08.svg");
      }
    }
    .txt {
      padding-top: 1.25rem;
      font-weight: var(--font-weight-semi-mid);
      font-size: var(--font-sm);
    }
  }
}
.flowerArea .itemArea .sub_inner .item01 {
  padding-bottom: 120px;
  }
.flowerArea .itemArea .sub_inner .item02 .txt01 {
  padding-top: 1.875rem;
}

/* itemArea02 */
.flowerArea {
  --health-indent: 5rem;
}
.flowerArea .itemArea02 .sub_inner {
  padding: 120px 40px;
  h3 {
    color: var(--color-secondary);
    line-height: var(--line-height-sm);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semi-mid);
    position: relative;
    padding-left: var(--health-indent);
    &::before {
      content: "";
      position: absolute;
      width: 50px;
      height: 2px;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      background-color: #db4798;
    }
  }
  p {
    padding-top: 2.5rem;
    line-height: var(--line-height-lg);
    font-size: var(--font-md);
  }
  .img {
    margin-top: 70px;
    background-image: url("../img/flower/flower_img01.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    aspect-ratio: 1200 / 360;
  }
}

/* itemArea03 */
.flowerArea .itemArea03 {
  background: linear-gradient(180deg, transparent 0%, transparent 40%, #feecea 40%, #feecea 100%);
  padding-bottom: 120px;
}
#slide01 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
#slide01 .splide__track {
  overflow: hidden;
}
#slide01 .splide__slide {
  max-width: 360px;
}

@media screen and (max-width: 1000px) {
/* flowerArea */
/* h2Area */
  .flowerArea .h2Area .sub_inner {
    padding: 56px 6vw 46px;
    h2 {
      font-size: clamp(1.313rem, 1.107rem + 1.03vw, 1.75rem);
    }
    .txt {
      padding-top: 26px;
      p {
        font-size: var(--font-base);
      }
    }
    .img {
      margin-top: 56px;
    }
  }

/* itemArea */
  .flowerArea .itemArea .sub_inner {
    padding: 0 6vw 16px;
    .item {
      padding-bottom: 50px;
      h3 {
        font-size: var(--font-md-plus);
        padding-bottom: 1rem;
      &::before {
          width: 30px;
        }
      }
    }
  }
  .flowerArea .itemArea .sub_inner .item ul {
    padding-top: 36px;
    li {
      width: calc(25% - 10px);
      .f_icon {
        width: 80px;
        height: 80px;
        &::before {
          top: calc(50% - 25px);
          width: 50px;
        }
      }
      .txt {
        padding-top: 1.25rem;
        font-weight: var(--font-weight-semi-mid);
        font-size: clamp(0.5rem, -0.618rem + 2.98vw, 0.813rem);
      }
    }
  }
  .flowerArea .itemArea .sub_inner .item01 {
    padding-bottom: 100px;
  }
  .flowerArea .itemArea .sub_inner .item02 .txt01 {
    padding-top: 1.625rem;
  }

/* itemArea02 */
  .flowerArea .itemArea02 .sub_inner {
    padding: 80px 6vw;
    h3 {
      line-height: inherit;
      font-size: var(--font-md-plus);
    }
    p {
      font-size: var(--font-base);
    }
  }

/* itemArea03 */
  .flowerArea .itemArea03 {
    padding-bottom: 100px;
  }
}

@media screen and (max-width: 768px) {
/* flowerArea */
/* itemArea */
  .flowerArea .itemArea .sub_inner .item {
    padding-bottom: 46px;
    &.item02 {
      padding-top: 16px;
    }
  }
.flowerArea .itemArea .sub_inner .item ul li {
  width: calc(25% - 6px);
  padding-top: 20px;
  padding-bottom: 20px;
  .f_icon {
    width: 60px;
    height: 60px;
    &::before {
      top: calc(50% - 20px);
      width: 40px;
    }
  }
}

/* itemArea02 */
  .flowerArea .itemArea02 .sub_inner .img {
    margin-top: 50px;
    aspect-ratio: 1000 / 400;
  }

/* itemArea03 */
  #slide01 .splide__slide {
    max-width: 280px;
  }
}

@media screen and (max-width: 600px) {
/* flowerArea */
/* h2Area */
  .flowerArea .h2Area .sub_inner {
    padding-top: 42px;
    .txt {
      padding-top: 20px;
    }
    .img {
      margin-top: 40px;
      aspect-ratio: 980 / 600;
    }
  }

/* itemArea */
  .flowerArea .itemArea .sub_inner .item ul {
    padding-top: 12px;
    max-width: 380px;
    margin: 0 auto;
    li {
      width: calc(50% - 12px);
      margin-top: 24px;
      .f_icon {
        width: 80px;
        height: 80px;
        &::before {
          top: calc(50% - 25px);
          width: 50px;
        }
      }
    .txt {
        font-size: var(--font-xs);
        padding-top: 1.125rem;
      }
    }
  }

/* itemArea02 */
  .flowerArea {
    --health-indent: 2rem;
  }
  .flowerArea .itemArea02 .sub_inner {
      padding-top: 56px;
      padding-bottom: 56px;
      h3 {
        padding-left: var(--health-indent);
        &::before {
          width: 20px;
        }
      }
      p {
        padding-top: 1.875rem;
      }
    }

/* itemArea03 */
  .flowerArea .itemArea03 {
    padding-bottom: 70px;
  }
}

@media screen and (max-width: 480px) {
/* flowerArea */
/* itemArea */
  .flowerArea .itemArea .sub_inner .item h3 .none {
      display: none;
  }
  .flowerArea .itemArea .sub_inner .item ul {
    padding-top: 22px;
    li {
      width: calc(50% - 4px);
      margin-top: 8px;
      .f_icon {
        width: 76px;
        height: 76px;
        &::before {
          top: calc(50% - 23px);
          width: 46px;
        }
      }
    }
  }
}