@charset "UTF-8";
/* CSS Document */
/* healthArea */
/* h2Area */
.healthArea .h2Area .sub_inner {
  padding: 100px 40px;
  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);
    }
  }
}

/* itemArea */
.healthArea .itemArea {
  .sub_inner {
    padding: 100px 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
}
.healthArea .itemArea .sub_inner .left {
  width: calc(62% - 30px);
  h3 {
    color: var(--color-secondary);
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semi-mid);
    border-bottom: 2px solid #db4798;
    padding-bottom: 0.5rem;
    span {
      font-size: var(--font-md-minus);
    }
  }
  .txt01 {
    padding-top: 1.875rem;
  }
  ul {
    padding-top: 1rem;
    li {
      margin: 0.5rem 0;
      padding-left: 1.625rem;
      font-weight: var(--font-weight-semi-mid);
      color: var(--color-secondary);
      font-size: var(--font-md-minus);
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 1.25rem;
        height: 1.25rem;
        background: url("../img/sub/check.svg") no-repeat center / contain;
      }
    }
  }
  .txt02 {
    padding-top: 1rem;
  }
}
.healthArea .itemArea .sub_inner .right {
  width: calc(38% - 30px);
  .img {
    background-position: center center;
    background-repeat: no-repeat;
    aspect-ratio: 600 / 800;
    background-size: cover;
  }
}
.healthArea .item01 {
  background-color: #feecea;
  .sub_inner .right .img {
    background-image: url("../img/health/healt_img01.webp");
  }
}
.healthArea .item02 {
  .sub_inner {
    flex-direction: row-reverse;
    .right .img {
    background-image: url("../img/health/healt_img02.webp");
    }
  }
}

/* health_bgArea */
.health_bgArea {
  background-image:
  linear-gradient(
    rgba(237,234,229,0.6),
    rgba(237,234,229,0.6)
  ),
  url("../img/health/healt_bg.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 26%;
  background-attachment: fixed;
  margin-bottom: 120px;
  height: 380px;
}

/* itemArea02 */
.healthArea {
  --health-indent: 5rem;
}
.healthArea .itemArea02 {
  background-color: #feecea;
  .sub_inner {
    padding: 100px 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 {
      span {
        display: block;
        &.txt01 {
          color: var(--color-secondary);
          font-size: var(--font-md-plus);
          padding: 2.5rem 0 2.5rem var(--health-indent);
          line-height: var(--line-height-lg);
          font-weight: var(--font-weight-semi-mid);
        }
        &.txt02 {
          line-height: var(--line-height-lg);
          font-size: var(--font-md);
        }
      }
    }
  }
}

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

/* itemArea */
  .healthArea .itemArea {
    .sub_inner {
      padding: 66px 6vw;
    }
  }
.healthArea .itemArea .sub_inner .left {
    width: calc(64% - 10px);
    h3 {
        font-size: var(--font-md-plus);
        span {
          font-size: var(--font-md);
        }
      }
    ul li {
      margin: 0.375rem 0;
      font-size: var(--font-base);
      &::before {
        width: 16px;
      }
    }
    .txt01 {
      padding-top: 1.625rem;
    }
  }
  .healthArea .itemArea .sub_inner .right {
    width: calc(36% - 10px);
  }

/* health_bgArea */
.health_bgArea {
  height: 270px;
  background-attachment: scroll;
  margin-bottom: 100px;
}

/* itemArea02 */
.healthArea .itemArea02 .sub_inner {
  padding: 66px 6vw;
    h3 {
      line-height: inherit;
      font-size: var( --font-md-plus);
    }
    p {
      span {
        display: block;
        &.txt01 {
          padding-top: 2rem;
          padding-bottom: 2rem;
        }
        &.txt02 {
          line-height: var(--line-height-lg);
          font-size: var(--font-base);
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
/* healthArea */
/* h2Area */
  .healthArea .h2Area .sub_inner h2 span {
    display: none;
  }

/* itemArea */
  .healthArea .itemArea .sub_inner {
    flex-direction: column-reverse;
  }
  .healthArea .itemArea .sub_inner .left {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 40px;
    h3 {
      font-size: clamp(1.25rem, 0.982rem + 1.34vw, 1.625rem);
    }
    ul li {
      font-size: var(--font-base);
    }
  }
  .healthArea .itemArea .sub_inner .right {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    .img {
      aspect-ratio: 768 / 500;
    }
  }
  .healthArea .item01 .sub_inner .right .img {
    background-image: url("../img/health/healt_img01_sp.webp");
  }
  .healthArea .item02 .sub_inner .right .img {
    background-image: url("../img/health/healt_img02_sp.webp");
  }

/* itemArea02 */
  .healthArea .itemArea02 .sub_inner p span.txt01 {
    font-size: var(--font-md);
  }
}

@media screen and (max-width: 600px) {
/* healthArea */
/* h2Area */
  .healthArea .h2Area .sub_inner {
    padding-top: 42px;
    padding-bottom: 48px;
    .txt {
      padding-top: 20px;
    }
  }

/* itemArea */
  .healthArea .itemArea .sub_inner {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .healthArea .itemArea .sub_inner .left {
    padding-top: 30px;
  }

/* itemArea02 */
  .healthArea {
    --health-indent: 2rem;
  }
  .healthArea .itemArea02 .sub_inner {
    padding-top: 56px;
    padding-bottom: 56px;
    h3 {
      padding-left: var(--health-indent);
      &::before {
        width: 20px;
      }
    }
    p span {
    &.txt01 {
        font-size: clamp(0.938rem, 0.866rem + 0.36vw, 1rem);
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-weight: var(--font-weight-mid);
      }
    }
  }

/* health_bgArea */
  .health_bgArea {
    height: 220px;
    margin-bottom: 70px;
  }
}

@media screen and (max-width: 400px) {
/* healthArea */
/* itemArea02 */
  .healthArea .itemArea02 .sub_inner p span.txt01 {
    padding-left: 0;
  }
}