@charset "UTF-8";
.lp-service {
  /* ----------------------------------------
  角質ケアは、健やかな肌への欠かせないステップ。
  ---------------------------------------- */
  /* ----------------------------------------
  角質リセットで、輝きクリア肌 体験。
  ---------------------------------------- */
  /* ----------------------------------------
  継続することで実感できる変化
  ---------------------------------------- */
}
.lp-service .service__content {
  border-bottom: 1px solid #E6E6E6;
}
@media screen and (min-width: 1024px) {
  .lp-service .service__content {
    padding-block: calc(clamp(0px, 5vw, 96px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__content {
    padding-block: calc(clamp(0px, 16vw, 163.68px) * 1);
  }
}
.lp-service .service__column {
  flex-shrink: 0;
}
.lp-service .service__top {
  background-image: linear-gradient(90deg, #f5fff7, #fcfffd 50%, #f5fff7);
}
@media screen and (min-width: 1024px) {
  .lp-service .service__top {
    display: flex;
    align-items: center;
    gap: calc(clamp(0px, 1.3020833333vw, 25px) * 1);
    padding: calc(clamp(0px, 6.7708333333vw, 130px) * 1) calc(clamp(0px, 4.53125vw, 87px) * 1);
    border-radius: calc(clamp(0px, 1.6666666667vw, 32px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__top {
    padding-block: calc(clamp(0px, 6.4vw, 65.472px) * 1) calc(clamp(0px, 4.8vw, 49.104px) * 1);
    padding-inline: calc(clamp(0px, 5.3333333333vw, 54.56px) * 1);
    border-radius: calc(clamp(0px, 8.5333333333vw, 87.296px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .lp-service .service__top ~ .service__bottom {
    margin-top: calc(clamp(0px, 2.5vw, 48px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__top ~ .service__bottom {
    margin-top: calc(clamp(0px, 6.4vw, 65.472px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__top__column__title {
    margin-right: calc(clamp(0px, 5.3333333333vw, 54.56px) * -1);
  }
}
.lp-service .service__bottom {
  display: grid;
  place-content: center;
  justify-content: flex-end;
}
@media screen and (min-width: 1024px) {
  .lp-service .service__bottom {
    height: calc(clamp(0px, 28.6458333333vw, 550px) * 1);
    padding-right: calc(clamp(0px, 8.3333333333vw, 160px) * 1);
    background: url(/media/export/cms2.0/lp/services-digital-awareness/260723/img/service__bottom__bg.png) no-repeat top/cover;
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__bottom__column {
    height: calc(clamp(0px, 121.6vw, 1243.968px) * 1);
    padding-block: calc(clamp(0px, 6.4vw, 65.472px) * 1);
    padding-inline: calc(clamp(0px, 5.3333333333vw, 54.56px) * 1);
    background: url(/media/export/cms2.0/lp/services-digital-awareness/260723/img/service__bottom__bg.sp.png) no-repeat top/cover;
  }
}
.lp-service .service__bottom__column__title .tag {
  display: inline-block;
  line-height: 1;
  border: 1px solid #1A1A1A;
  vertical-align: middle;
  transform: translateY(-8%);
}
@media screen and (min-width: 1024px) {
  .lp-service .service__bottom__column__title .tag {
    font-size: calc(clamp(0px, 1.09375vw, 21px) * 1);
    margin-right: calc(clamp(0px, 0.8333333333vw, 16px) * 1);
    padding: calc(clamp(0px, 0.3645833333vw, 7px) * 1) calc(clamp(0px, 0.8333333333vw, 16px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__bottom__column__title .tag {
    font-size: calc(clamp(0px, 3.4666666667vw, 35.464px) * 1);
    margin-right: calc(clamp(0px, 2.1333333333vw, 21.824px) * 1);
    padding: calc(clamp(0px, 0.8vw, 8.184px) * 1) calc(clamp(0px, 2.4vw, 24.552px) * 1);
  }
}
.lp-service .service__change {
  display: flex;
  line-height: 150%;
}
@media screen and (min-width: 1024px) {
  .lp-service .service__change {
    gap: calc(clamp(0px, 5.4166666667vw, 104px) * 1);
    margin-top: calc(clamp(0px, 1.6666666667vw, 32px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__change {
    gap: calc(clamp(0px, 8vw, 81.84px) * 1);
    margin-top: calc(clamp(0px, 4.2666666667vw, 43.648px) * 1);
  }
}
@media screen and (min-width: 1024px) {
  .lp-service .service__change__icon {
    width: calc(clamp(0px, 2.8125vw, 54px) * 1);
    margin-bottom: calc(clamp(0px, 0.8333333333vw, 16px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__change__icon {
    width: calc(clamp(0px, 8vw, 81.84px) * 1);
    margin-bottom: calc(clamp(0px, 2.1333333333vw, 21.824px) * 1);
  }
}
.lp-service .service__image {
  display: flex;
}
@media screen and (max-width: 1023px) {
  .lp-service .service__image {
    margin-top: calc(clamp(0px, 8.5333333333vw, 87.296px) * 1);
    margin-inline: calc(clamp(0px, 2.1333333333vw, 21.824px) * -1);
  }
}
.lp-service .service__image__item {
  text-align: center;
}
.lp-service .service__image__item:nth-child(1) .service__image__text {
  background-color: #ADDDB7;
}
.lp-service .service__image__item:nth-child(2) .service__image__text {
  background-color: #EAEAEA;
}
.lp-service .service__image__text {
  display: inline-block;
  border-radius: 200px;
}
@media screen and (min-width: 1024px) {
  .lp-service .service__image__text {
    padding: calc(clamp(0px, 0.3125vw, 6px) * 1) calc(clamp(0px, 1.40625vw, 27px) * 1);
    min-width: calc(clamp(0px, 17.96875vw, 345px) * 1);
    margin-bottom: calc(clamp(0px, 1.3541666667vw, 26px) * 1);
  }
}
@media screen and (max-width: 1023px) {
  .lp-service .service__image__text {
    line-height: 1;
    padding: calc(clamp(0px, 1.3333333333vw, 13.64px) * 1) calc(clamp(0px, 1.8666666667vw, 19.096px) * 1);
    font-size: calc(clamp(0px, 2.4vw, 24.552px) * 1);
    min-width: calc(clamp(0px, 36.8vw, 376.464px) * 1);
    margin-bottom: calc(clamp(0px, 2.9333333333vw, 30.008px) * 1);
  }
}