@charset "utf-8";
/* CSS Document */

/*******************

LP style

********************/
html,
body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

/* content
--------------------------------------------------*/
.lpbox,
#lpfooter {
  font-size: 14px;
  font-size: 3.7333vw;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    "Mayryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: #303030;
  line-height: 1.5em;
}
@media screen and (min-width: 750px) {
  .lpbox,
  #lpfooter {
    font-size: 28px;
    max-width: 750px;
    margin: 0 auto;
  }
  .lpbox .step .step__tel a {
    font-size: 0.97em;
  }
}
.lpbox a,
#lpfooter a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}
.lpbox a:hover,
#lpfooter a:hover {
  text-decoration: underline;
}
.lpbox span,
#lpfooter span {
  font-size: inherit;
  font-weight: inherit;
}
.lpbox img,
#lpfooter img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
.lpbox img.img-t,
#lpfooter img.img-t {
  vertical-align: top;
}
/* cart css reset */

.lpbox header,
.lpbox h1,
.lpbox h2,
.lpbox h3,
.lpbox p,
.lpbox dl,
.lpbox dt,
.lpbox dd,
.lpbox div,
.lpbox section,
.lpbox span {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter footer,
#lpfooter div,
#lpfooter p {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
}
#lpfooter ul,
#lpfooter li,
.lpbox ul,
.lpbox li {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
/*----------------------------------------*/
.lpbox .cta__box {
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.lpbox .cta__btn {
  box-sizing: border-box;
  padding: 0 5%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/*---------------------------*/
.lpbox #fixbtn {
  position: fixed;
  bottom: -100%;
  left: 0;
  z-index: 999;
  width: 100%;
  overflow: hidden;
  -webkit-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.lpbox #fixbtn.fixbtn--visible {
  bottom: 0;
}
.lpbox #fixbtn .fixbtn__box {
  position: relative;
  bottom: 0;
  display: block;
  margin: 0 auto;
  position: relative;
  max-width: 750px;
}
.lpbox .fixbtn__item {
  margin: 0 auto;
  text-align: center;
}
.lpbox .fixbtn__item a {
  display: inline-block;
  width: 45%;
}
/*---------------------------*/
.lpbox #fv {
  position: relative;
}
.lpbox .fv__text {
  width: 14.65%;
  position: absolute;
  top: 6.5%;
  right: 30%;
}
.lpbox .fv__icon_01 {
  position: absolute;
  top: 48%;
  left: 30%;
  width: 32.15%;
}
.lpbox .fv__icon_02 {
  position: absolute;
  top: 53.9%;
  left: 59.4%;
  width: 32.15%;
}
@media screen and (max-width: 490px) {
  .lpbox .fv__icon_01 {
    top: 44%;
  }
  .lpbox .fv__icon_02 {
    top: 49.9%;
  }
}

.lpbox .advanced {
  position: relative;
}
.lpbox .advanced__img {
  position: absolute;
  top: 0;
  right: 4%;
  width: 49.3%;
}
.lpbox .advanced__ar {
  position: absolute;
  top: 5em;
  right: 3em;
  left: 0;
  margin: 0 auto;
  width: 10.3%;
}

.lpbox .check video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 88%;
}

.lpbox .step {
  position: relative;
}
.lpbox .step__tel a {
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  position: absolute;
  top: 19.8%;
  right: 20.5%;
  color: #5fb1c2;
  font-weight: bold;
  font-size: 0.9em;
  letter-spacing: -0.01em;
}

.lpbox .detailed__box {
  text-align: center;
  width: 92%;
  margin-bottom: 2em;
  position: relative;
}
.lpbox .detailed__box li {
  padding: 1% 1%;
  background: #fff;
  color: #484848;
}
.lpbox .detailed__box li:nth-child(odd) {
  background: #ffeff5;
  color: #ff6699;
}
.lpbox .detailed__box li:nth-child(even) {
  font-size: 0.8em;
}
.lpbox .detailed__box li:nth-of-type(4),
.lpbox .detailed__box li:nth-of-type(8),
.lpbox .detailed__box li:nth-of-type(10),
.lpbox .detailed__box li:nth-of-type(16) {
  text-align: justify;
}
.lpbox .detailed__box li:nth-of-type(16) span {
  display: block;
  text-align: right;
  font-size: 0.7em;
}

.lpbox .question dt {
  position: relative;
}
.lpbox .question dt:before {
  content: "";
  background: url(../img/ar.webp) no-repeat;
  background-position: 50% 50%;
  background-size: 100%;
  width: 1em;
  height: 1em;
  display: block;
  position: absolute;
  top: 50%;
  right: 9.5%;
  margin-top: -0.4em;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.lpbox .question dt.acd-open:before {
  content: "";
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*-------------------------------------------
footer
-----------------------------------------------*/

#lpfooter .catch {
  display: flex;
  align-items: center; /* 垂直中心 */
}
#lpfooter .catch:before {
  border-top: 0.2em solid #ffb8d0;
  content: "";
  width: 1em; /* 線の長さ */
}
#lpfooter .catch:before {
  margin-right: 1em; /* 文字の右隣 */
}

#lpfooter .footer__link {
  background: url(../img/footer_bg.webp) no-repeat bottom center;
  background-size: 100%;
  text-align: left;
  padding-top: 4em;
  padding-bottom: 1em;
}
#lpfooter .footer__link li {
  width: 80%;
  font-size: 1em;
  margin-bottom: 0.8em;
}
#lpfooter #copy {
  text-align: center;
  font-size: 0.64em;
  line-height: 1.5em;
  color: #fff;
  background-color: #ff6699;
  box-sizing: border-box;
  padding: 1em 0;
}

.lpbox .slide-in {
  overflow: hidden;
  display: inline-block;
}

.lpbox .slide-in_inner {
  display: inline-block;
}
/* 上下のアニメーション*/
.lpbox .upAnime {
  opacity: 0; /* 事前に透過0 にして消しておく*/
}

.lpbox .slideAnimeDownUp {
  animation-name: slideTextY100;
  animation-delay: 1s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextY100 {
  from {
    transform: translateY(100%); /* 要素を上の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateY(0); /* 要素を元の位置に移動*/
    opacity: 1;
  }
}
.lpbox .slideAnimeUpDown {
  animation-name: slideTextY-100;
  animation-delay: 1s;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextY-100 {
  from {
    transform: translateY(-100%); /* 要素を下の枠外に移動*/
    opacity: 0;
  }
  to {
    transform: translateY(0); /* 要素を元の位置に移動*/
    opacity: 1;
  }
}

/* ヘッダー
------------------------- */
.header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 0 0 15px;
}
.header__inner {
  max-width: 750px;
  width: 100%;
  min-width: 320px;
  display: flex;
  align-items: center;
}
.header p {
  margin: 0;
  padding: 0 5px 0 0;
}
.header_text {
  color: #484848;
  font-weight: bold;
  font-size: 14px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    "Mayryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.header_text .small {
  font-weight: normal;
  font-size: 11px;
}
/* 文字の上に点 */
.header_text .dots {
  background-image: radial-gradient(
    circle at center,
    #484848 20%,
    transparent 20%
  );
  background-position: top right;
  background-repeat: repeat-x;
  background-size: 1em 0.3em;
  padding-top: 0.2em;
}
.logo {
  width: 195px;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.logo img {
  width: 150px;
  height: auto;
}
.logo-sub {
  color: #ff4d94;
  font-size: 11px;
  transform: scale(0.8);
}

/* メインビジュアル
------------------------- */
.mv {
  position: relative;
}
.mv-img--second {
  position: relative;
  top: -1px;
}
.lpbox #fv {
  position: relative;
}
.fv__text {
  width: 14.65%;
  position: absolute;
  top: 9s.5%;
  right: 30%;
}
.fv__icon_01 {
  position: absolute;
  top: 37%;
  left: 30%;
  width: 32.15%;
}
.fv__icon_02 {
  position: absolute;
  top: 40.9%;
  left: 59.4%;
  width: 32.15%;
}

/* FV プラン・価格
--------------------------------- */
.lpbox .fv-plan__title {
  color: #535353;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.5;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  text-align: right;
  margin: 20px 30px 15px 0;
  line-height: 1;
}
.lpbox .fv-plan-box {
  position: relative;
  border: 1px solid #5fb0c2;
}
.lpbox .fv-plan-box::before {
  position: absolute;
  bottom: 100px;
  left: 2%;
  background: url(../img/mv_machine.webp) no-repeat bottom center;
  background-size: 100%;
  width: 83px;
  height: 146px;
  padding-top: 4em;
  padding-bottom: 1em;
  content: "";
}

@media screen and (min-width: 400px) {
  .lpbox .fv-plan-box::before {
    width: 120px;
  }
}
@media screen and (min-width: 450px) {
  .lpbox .fv-plan-box::before {
    width: 130px;
  }
}
@media screen and (min-width: 500px) {
  .lpbox .fv-plan-box::before {
    width: 140px;
  }
}
@media screen and (min-width: 750px) {
  .lpbox .fv-plan-box::before {
    width: 160px;
  }
}
.lpbox .fv-plan-box__head {
  height: 30px;
  background: #5fb0c2;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  text-align: right;
  padding-right: 20px;
}
.lpbox .fv-plan-box__inner {
  display: flex;
  justify-content: space-between;
  height: 100px;
}
.lpbox .fv-plan-box__inner .arrow {
  position: relative;
  flex-basis: 60%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 10px 5px;
  background: rgb(218, 250, 244);
  background: linear-gradient(
    90deg,
    rgba(218, 250, 244, 1) 13%,
    rgba(211, 231, 249, 1) 58%,
    rgba(203, 244, 253, 1) 100%
  );
  margin: 0;
  padding: 0 5px;
}
.lpbox .fv-plan-box__inner .arrow::before {
  position: absolute;
  top: 0;
  right: -19px;
  border-top: solid 50px transparent;
  border-bottom: solid 50px transparent;
  border-left: solid 20px rgba(203, 244, 253, 1);
  content: "";
}
.lpbox .fv-plan-box__inner .label {
  padding: 0 10px;
  border-radius: 20px;
  background: #fff;
  color: #6dacb2;
  font-weight: 600;
  font-size: 12px;
  display: inline;
  margin: 0;
}
.lpbox .fv-plan-box .price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  color: #f3516e;
  font-weight: bold;
}
.lpbox .fv-plan-box .tax-included {
  font-size: 28px;
}
.lpbox .fv-plan-box .plan-price {
  display: flex;
  align-items: center;
}
.lpbox .fv-plan-box .unit {
  display: flex;
  align-items: center;
  line-height: 1.2;
  flex-direction: column;
}
.lpbox .fv-plan-box .tax {
  font-weight: normal;
  font-size: 11px;
}
.lpbox .fv-plan-box .yen {
  font-size: 16px;
}
.lpbox .mv .notes {
  font-size: 11px;
  text-align: right;
}
@media screen and (max-width: 350px) {
  .lpbox .fv-plan-box__head {
    font-size: 14px;
  }
  .lpbox .fv-plan__title {
    font-size: 20px;
  }
}
@media screen and (min-width: 700px) {
  .lpbox .fv-plan-box__inner .arrow {
    flex-basis: 46%;
  }
}
@media screen and (min-width: 750px) {
  .lpbox,
  #lpfooter {
    font-size: 28px;
    max-width: 750px;
    margin: 0 auto;
  }
  .lpbox .step .step__tel a {
    font-size: 0.97em;
  }
}

/* 先進的な光治療
--------------------------------- */
.lpbox .advanced {
  background-color: #ffeef4;
}
.lpbox .advanced-case {
  position: relative;
}
.lpbox .advanced-case__img {
  position: absolute;
  top: 17%;
  right: 4%;
  width: 49.3%;
}
.lpbox .advanced__ar {
  position: absolute;
  top: 7.5em;
  right: 3em;
  left: 0;
  margin: 0 auto;
  width: 10.3%;
}
.lpbox .advance-case__text {
  display: block;
  margin: auto;
  color: #474747;
  font-size: 12px;
  text-align: justify;
  padding: 15px;
  line-height: 1.4;
}
.lpbox .advanced .notes {
  color: #474747;
  font-size: 12px;
  text-align: right;
  padding: 0 15px 15px 0;
}
@media screen and (min-width: 750px) {
  .lpbox .advance-case__text {
    font-size: 14px;
  }
}

/* シミ治療を手掛けるのは
--------------------------------- */
.lpbox .info {
  position: relative;
}
.lpbox .info-box {
  position: relative;
  width: 92%;
  margin: 100px auto 0;
  padding: 5px;
  border: 2px solid;
  border-image: linear-gradient(to bottom, #35d2f5 0%, #76f3d3 100%) 1;
  text-decoration: none;
  color: #474747;
}
.lpbox .info-box__inner {
  padding: 5px;
  background-image: linear-gradient(135deg, #dceefa 10%, #e3fef7 100%);
  padding-bottom: 400px;
}
.lpbox .info-box__inner h2 {
  padding-bottom: 20px;
}
.lpbox .info .balloon {
  position: relative;
  padding: 5px 15px;
  background-color: #ff669a;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  line-height: 1.5;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  width: 75%;
  font-size: 24px;
  text-align: center;
  margin: -55px 0 20px;
  left: 50%;
  transform: translate(-50%);
}
/* 大きい丸 */
.lpbox .info .balloon::before {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ff669a;
  bottom: -5px;
  width: 15px;
  height: 15px;
  left: 50%;
  transform: translateX(-50%);
}
/* 小さい丸 */
.lpbox .info .balloon::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  background-color: #ff669a;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  width: 5px;
  height: 5px;
}
.lpbox .info h2 {
  font-weight: bold;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  text-align: center;
  line-height: 1.5;
}
.lpbox .title-top {
  color: #494546;
  font-size: 20px;
}
.lpbox .title-top .large {
  font-size: 28px;
}
.lpbox .title-bottom {
  padding: 5px 10px;
  background-color: #fff;
  color: #ff649a;
  font-size: 35px;
}
.lpbox .info-box {
  position: relative;
}
.lpbox .info-box__text {
  padding: 20px 10px;
}
.lpbox .info-box__text .text {
  border-bottom: 0.5px solid #707676;
  padding-bottom: 2px;
  display: inline;
  color: #707676;
  font-size: 14px;
  line-height: 2;
  text-align: justify;
  font-size: 16px;
}
.lpbox .doctor-wrap {
  position: absolute;
  bottom: 2%;
  right: 0;
}
.lpbox .doctor {
  display: flex;
  align-items: flex-start;
  position: relative;
  border: 5px solid #f692b4;
  background-color: #ff669a;
  color: #fff;
  font-weight: 600;
  width: 91%;
  right: -15px;
}
.lpbox .doctor__left {
  position: relative;
  top: -20px;
  width: 113px;
  height: auto;
}
.lpbox .doctor__right {
  padding: 15px 0 10px 15px;
}
.lpbox .doctor__right .text {
  font-size: 20px;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
}
.lpbox .doctor__right .name {
  margin-top: 15px;
  padding-top: 5px;
  border-top: 1px solid #fff;
}
.lpbox .doctor__text {
  background-color: #fff;
  font-size: 16px;
  position: relative;
  top: -15px;
  left: -15px;
  padding: 15px;
  line-height: 2;
  text-align: justify;
  width: 91%;
}
.lpbox .doctor__text .strong {
  color: #e98cab;
  position: relative;
  z-index: 1;
  font-weight: bold;
}
.lpbox .doctor__text .strong::before {
  display: inline-block;
  opacity: 0.75;
  position: absolute;
  bottom: 3px;
  z-index: -1;
  width: 100%;
  height: 10px;
  background-color: #fbeaf0;
  content: "";
}
@media screen and (min-width: 470px) {
  .lpbox .info .balloon {
    width: 75%;
    margin: -36px 0 20px;
  }
}
@media screen and (min-width: 600px) {
  .lpbox .info .balloon {
    font-size: 30px;
  }
  .lpbox .title-top {
    font-size: 24px;
  }
  .lpbox .title-top .large {
    font-size: 40px;
  }
}

/* 肌悩み
------------------------- */

/* 先進型美白治療器
------------------------- */

/* 先進型シミ・くすみ治療を動画で!
--------------------------------- */

/* フォトシルクプラスで
/* 今あるシミ・くすみを根本から改善!
------------------------- */
.lpbox .mechanism {
  position: relative;
}
.lpbox .mechanism__text {
  background-color: #ff669a;
}
.lpbox .mechanism__text .text {
  background-color: #fff;
  color: #494949;
  width: 92%;
  padding: 15px;
}
.lpbox .mechanism .note {
  color: #494949;
  font-size: 14px;
  text-align: justify;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 97%,
    #ddd 97%,
    #ddd 100%
  );
  background-size: 100% 2em;
  line-height: 2;
}
.lpbox .mechanism .notes {
  padding-bottom: 10px;
  font-size: 11px;
  text-align: right;
  background-color: #fff;
  color: #494949;
  width: 92%;
}
.lpbox .improvement-case {
  position: relative;
}
.lpbox .improvement__icon_01 {
  position: absolute;
  top: 12%;
  right: 2%;
  width: 31.45%;
}
.lpbox .improvement__icon_02 {
  position: absolute;
  top: 0;
  left: 2%;
  width: 34.2%;
}
.lpbox .improvement__img_01 {
  position: absolute;
  top: 17%;
  right: 4%;
  width: 49.3%;
}
.lpbox .improvement__ar {
  position: absolute;
  top: 7.5em;
  right: 3em;
  left: 0;
  margin: 0 auto;
  width: 10.3%;
}
.lpbox .check {
  position: relative;
}
.lpbox .improvement-case__text {
  display: block;
  margin: auto;
  color: #474747;
  font-size: 14px;
  text-align: justify;
  padding: 15px;
  line-height: 1.4;
}
.lpbox .improvement-case .notes {
  color: #474747;
  font-size: 12px;
  text-align: right;
  padding: 0 15px 15px 0;
}

/* シミ･くすみ以外の肌トラブル治療もお任せ!
--------------------------------- */
.lpbox .skin-trouble__content {
  background: rgb(231, 239, 250);
  background: linear-gradient(
    100deg,
    rgba(231, 239, 250, 1) 0%,
    rgba(234, 254, 248, 1) 50%,
    rgba(223, 251, 255, 1) 100%
  );
}
.lpbox .skin-trouble-box {
  margin: 0 17px 20px;
  background-color: #fff;
}
.lpbox .skin-trouble-box .head {
  background-size: 100%;
  width: 100%;
  height: 62px;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
}
.lpbox .skin-trouble-box .head-bg01 {
  background: url(../img/skin_trouble_title_bg01.webp) no-repeat center;
  background-size: 100%;
}
.lpbox .skin-trouble-box .head-bg02 {
  background: url(../img/skin_trouble_title_bg02.webp) no-repeat center;
  background-size: 100%;
}
.lpbox .skin-trouble-box .head-bg03 {
  background: url(../img/skin_trouble_title_bg03.webp) no-repeat center;
  background-size: 100%;
}
.lpbox .skin-trouble-box .inner {
  background-color: #fff;
  padding: 15px;
}
.lpbox .skin-trouble-box .notes {
  color: #474747;
  font-size: 12px;
  text-align: right;
  padding-top: 5px;
}
.lpbox .skin-trouble-box .sub-head {
  background-color: #ffeff5;
  color: #ff6699;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  padding: 15px 5px;
}
.lpbox .skin-trouble-box .text-box {
  background-color: #fff;
  padding: 15px;
}
.lpbox .skin-trouble-box .text {
  padding-bottom: 2px;
  color: #494949;
  font-size: 14px;
  text-align: justify;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 97%,
    #ddd 97%,
    #ddd 100%
  );
  background-size: 100% 2em;
  line-height: 2;
}
.lpbox .trouble-case__text {
  display: block;
  margin: auto;
  color: #474747;
  font-size: 14px;
  text-align: justify;
  padding: 15px;
}
.lpbox .trouble {
  position: relative;
}
.lpbox .trouble__img {
  position: absolute;
  top: 17%;
  right: 7%;
  width: 45.3%;
}
.lpbox .trouble__ar {
  position: absolute;
  top: 7.5em;
  right: 3em;
  left: 0;
  margin: 0 auto;
  width: 10.3%;
}

@media screen and (min-width: 600px) {
  .lpbox .skin-trouble-box {
    margin: 0 30px 20px;
  }
  .lpbox .skin-trouble-box .inner {
    padding: 30px;
  }
  .lpbox .skin-trouble-box .text-box {
    padding: 30px;
  }
  .lpbox .skin-trouble-box .head {
    height: 115px;
  }
}

/* サポート体制
--------------------------------- */
.lpbox .support-box {
  position: relative;
  width: 92%;
  margin: 40px auto 0;
  padding: 5px;
  border: 2px solid;
  border-image: linear-gradient(to bottom, #35d2f5 0%, #76f3d3 100%) 1;
  text-decoration: none;
  color: #474747;
}
.lpbox .support-box::before {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translate(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  content: "";
}
.lpbox .support-box::after {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translate(-50%);
  width: 35px;
  height: 35px;
  background: url(../img/support_icon.webp) no-repeat center;
  background-size: 100%;
  content: "";
}
.support-box__title {
  position: absolute;
  top: 30px;
  left: -10px;
  right: -10px;
}
.lpbox .support-box .head {
  position: relative;
  height: 155px;
  background-color: #ffeff5;
  z-index: -1;
}
.lpbox .support-box .head {
  position: relative;
  height: 155px;
  background-color: #ffeff5;
  z-index: -1;
}
.lpbox .support-box .head-num {
  position: absolute;
  color: #ffeff5;
  font-weight: bold;
  font-size: 40px;
  bottom: -12px;
  z-index: 12;
  transform: translate(-50%);
  left: 50%;
  mix-blend-mode: color-dodge;
}
.lpbox .support-box .head--v2 {
  position: relative;
  height: 30px;
  background-color: #ffeff5;
  z-index: -1;
}
.lpbox .support-box .head--v2 .head-num {
  position: absolute;
  color: #ffeff5;
  font-weight: bold;
  font-size: 40px;
  bottom: -12px;
  z-index: 12;
  transform: translate(-50%);
  left: 50%;
  mix-blend-mode: color-dodge;
}
.lpbox .support-box h3 {
  position: relative;
  padding: 25px 0 10px;
  color: #484848;
  font-size: 18px;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  text-align: center;
}
.lpbox .support-box h3 .marker {
  background-image: linear-gradient(90deg, #eefbfb, #edf4fb, #e7fafe);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  padding: 0 0.2em 0 0.2em;
}
.lpbox .support-box h3 .strong {
  color: #ff6699;
  font-size: 24px;
}
.lpbox .support-box h3 .small {
  font-size: 18px;
}
.lpbox .support-box h3 .large {
  font-size: 30px;
  letter-spacing: 0.04em;
}
.lpbox .support-box__parts {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lpbox .support-box .notes {
  font-size: 11px;
  text-align: right;
}
.lpbox .support-box__band {
  padding: 2px;
  background-color: #e8f9fd;
  color: #484848;
  font-size: 16px;
  text-align: center;
  margin: 10px 20px 15px;
  padding: 10px;
}
.lpbox .support-box__band .strong {
  color: #5fb1c2;
  font-weight: 600;
}
.lpbox .support-box .support-box__img {
  margin: 0;
  padding: 0 15px;
  width: 60%;
}
.lpbox .support-box .support-box__label {
  display: block;
  flex-basis: 55%;
  margin: 0;
}
.lpbox .support-box__text {
  display: block;
  margin: auto;
  color: #474747;
  font-size: 16px;
  text-align: justify;
  padding: 15px;
}
.lpbox .support-box__text .note {
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 97%,
    #ddd 97%,
    #ddd 100%
  );
  background-size: 100% 2em;
  line-height: 2;
}
.lpbox .support-box__text .strong {
  color: #ff6699;
  position: relative;
  z-index: 1;
  font-weight: bold;
  background: linear-gradient(transparent 30%, #ffe8f0 90%);
}
.lpbox .support-box__text .notes {
  font-size: 11px;
  text-align: left;
  padding: 15px 0 20px;
}
.support-box_subtitle {
  color: #484848;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
}
.lpbox .support-box__doctor {
  background-color: #e8f9fd;
}
.lpbox .support-box__doctor .arrow {
  position: relative;
  top: -20px;
  width: 80px;
  height: 34px;
  background-color: #ff6699;
  color: #fff;
  font-size: 20px;
  text-align: center;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  content: "";
  padding: 10px 0;
}
.lpbox .support-box__doctor .arrow::after {
  position: absolute;
  bottom: -56px;
  left: 50%;
  transform: translateX(-50%);
  border: 42px solid transparent;
  border-top: 15px solid #ff6699;
  content: "";
}
.lpbox .support-box__doctor .lead {
  color: #5eb1c2;
  font-size: 26px;
  text-align: center;
  margin-top: 30px;
  line-height: 1.4;
}
.lpbox .support-box__doctor .lead .marker {
  background: linear-gradient(transparent 30%, #fff 90%);
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
}
.lpbox .support-box .decoration {
  height: 30px;
  background-color: #ffeff5;
}
@media screen and (min-width: 420px) {
  .lpbox .support-box .head {
    height: 200px;
  }
}
@media screen and (min-width: 550px) {
  .lpbox .support-box__doctor .arrow {
    height: 40px;
    padding: 0;
  }
  .lpbox .support-box .head {
    height: 260px;
  }
}

/* 当日の施術の流れ
--------------------------------- */
.lpbox .flow-img {
  width: 100%;
}
.lpbox .step-box__head {
  position: relative;
  background-color: #ff6699;
  color: #fff;
  height: 60px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
.lpbox .step-num {
  line-height: 1.2;
  font-weight: 600;
  top: 15px;
  text-align: center;
  padding: 13px 2px;
  font-size: 17px;
}
.lpbox .step-box {
  position: relative;
  margin-bottom: 20px;
}
.lpbox .step-box .circle {
  position: absolute;
  top: -5px;
  width: 70px;
  height: 70px;
  border: 3px solid #ffd1e0;
  border-radius: 50%;
  background-color: #fff;
  color: #ff6699;
  z-index: 10;
}
.lpbox .step-box--left .circle {
  left: 20px;
}
.lpbox .step-box--right .circle {
  left: 18px;
}
.lpbox .step-box--left .step-box__head {
  left: 0;
  padding-left: 75px;
}
.lpbox .step-box--right .step-box__head {
  right: 0;
  padding-left: 75px;
}
.lpbox .step-box--left {
  margin-right: 35px;
}
.lpbox .step-box--right {
  margin-left: 45px;
}
.lpbox .step-box--left .step-box__head::after {
  position: absolute;
  top: 18px;
  right: -38px;
  width: 60px;
  height: 20px;
  background: url(../img/flow_arrow_01.webp) no-repeat center;
  background-size: 100%;
  content: "";
}
.lpbox .step-box--right .step-box__head::after {
  position: absolute;
  top: 18px;
  left: -44px;
  width: 60px;
  height: 20px;
  background: url(../img/flow_arrow_02.webp) no-repeat center;
  background-size: 100%;
  content: "";
}
.lpbox .step-box__body {
  position: relative;
  display: flex;
  background-color: #ffeff5;
  padding: 15px 20px;
}
.lpbox .step-box__body .notes {
  color: #ff6699;
  font-weight: 600;
  font-size: 11px;
}
.lpbox .step-box__body .strong {
  color: #ff6699;
  font-weight: 600;
}
.lpbox .step-box .step-box__text {
  line-height: 1.8;
  font-size: 16px;
}
.lpbox .step-box--left .step-box__text {
  width: 62%;
  margin: 0;
}
.lpbox .step-box--right .step-box__text {
  width: 64%;
  margin: 0;
}
.lpbox .step-box--left .step-box__img,
.lpbox .step-box--right .step-box__img {
  position: relative;
}
.lpbox .step-box--left .step-box__img img {
  position: absolute;
  width: 169px;
  height: auto;
  left: -60px;
}

.lpbox .step-box--right.step02 .step-box__img img,
.lpbox .step-box--right.step04 .step-box__img img {
  position: absolute;
  width: 150px;
  height: auto;
  left: -117px;
  border: 1px solid;
  border-image: linear-gradient(to bottom, #35d2f5 0%, #76f3d3 100%) 1;
  border-left: 0;
  padding: 5px 5px 5px 0;
}
.lpbox .step-box--left.step03 .step-box__img img {
  position: absolute;
  width: 140px;
  height: auto;
  left: -30px;
}
.lpbox .step-box--left.step05 .step-box__img img {
  position: absolute;
  width: 155px;
  height: auto;
  left: -51px;
  border: 1px solid;
  border-image: linear-gradient(to bottom, #35d2f5 0%, #76f3d3 100%) 1;
  border-right: 0;
  padding: 5px 0 5px 5px;
}
@media screen and (min-width: 550px) {
  .lpbox .step-box {
    margin-bottom: 70px;
  }
}

/* アフターケアもお任せ
--------------------------------- */
.lpbox .aftercare {
  padding: 20px 15px;
}
.lpbox .aftercare-box {
  position: relative;
  border: 1px solid #ff6699;
}
.lpbox .aftercare-title {
  position: relative;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  height: 60px;
  text-align: center;
  line-height: 1.5;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  font-size: 18px;
  color: #484747;
}
.lpbox .aftercare-title .small {
  font-size: 20px;
  background-color: #fff;
  padding: 0 20px;
}
.lpbox .aftercare-title .strong {
  font-size: 34px;
  color: #ff6699;
}
.lpbox .aftercare-title .marker {
  background-image: linear-gradient(90deg, #eefbfb, #edf4fb, #e7fafe);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  padding: 0 0.2em 0 0.2em;
}
.lpbox .aftercare-box__inner {
  position: relative;
}
.lpbox .aftercare-box__img img {
  padding: 20px 0 10px 12px;
}
.lpbox .aftercare-box__text {
  padding: 0 12px;
  color: #484747;
}
.lpbox .aftercare-box__text p {
  line-height: 1.8;
  text-align: justify;
}
.lpbox .aftercare-box__text .strong {
  color: #ff6699;
  position: relative;
  z-index: 1;
  font-weight: bold;
  background: linear-gradient(transparent 30%, #ffe8f0 90%);
}
.lpbox .aftercare-box__text .notes {
  font-size: 11px;
  padding: 20px 0 10px;
  text-indent: -1em;
  padding-left: 1em;
}

/* 料金表
--------------------------------- */
.lpbox .price-list {
  position: relative;
  background-color: #ffeff5;
}
.lpbox .price-list__head {
  position: relative;
  padding: 0 10px 20px;
  width: 100%;
}
.lpbox .price-list__head .notes {
  padding-top: 5px;
  font-size: 11px;
  text-indent: -1em;
  padding-left: 1em;
}
.lpbox .price-list-box {
  margin: 10px;
}
.lpbox .price-list-box.price-list-box--first {
  border: 1px solid #60b1c3;
  border-bottom: 0;
}
.lpbox .price-list-box.price-list-box--second {
  border: 1px solid #60b1c3;
  border-top: 0;
}
.lpbox .price-list-box__head {
  position: relative;
  background: #60b1c3;
  color: #fff;
  text-align: center;
  font-size: 24px;
  height: 55px;
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 70px;
  z-index: 1;
  justify-content: center;
}
.lpbox .price-list-box__head::before {
  position: absolute;
  top: -15px;
  left: -11px;
  width: 80px;
  height: 85px;
  background: url(../img/price_list_icon.webp) no-repeat center;
  background-size: cover;
  content: "";
  z-index: 10;
}
.lpbox .price-list-box__head p {
  line-height: 0.7;
  margin: 0;
}
.lpbox .price-list-box__head .small {
  font-size: 11px;
  letter-spacing: -0.08em;
}
.lpbox .price-list-box__body .items {
  padding: 20px 0 15px;
}
.lpbox .price-list-box__body .items {
  display: flex;
}
.lpbox .price-list-box__body .arrow {
  margin: 0;
}
.lpbox .initial-price-img {
  width: 120px;
  height: auto;
  margin: 0;
}
.lpbox .price-list-box__body {
  background-color: #fff;
}
.lpbox .price-list-box__body .initial-price {
  color: #f24061;
  font-weight: 700;
  display: flex;
  align-items: center;
  font-size: 60px;
}
.lpbox .price-list-box__body .price {
  transform: scale(0.8, 1);
}
.lpbox .price-list-box__body .initial-price .unit {
  font-weight: initial;
  font-size: 12px;
  line-height: 1.2;
}
.lpbox .price-list-box__body .initial-price .large {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: center;
}
.lpbox .price-list-box__body .notes {
  font-size: 11px;
  text-align: right;
}
.lpbox .second-price-info {
  color: #fc6497;
  font-weight: 600;
  font-size: 16px;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN",
    "Yu Mincho", "MS PMincho", serif;
  text-align: center;
}
.lpbox .second-price-info .large {
  font-size: 24px;
}
@media screen and (min-width: 600px) {
  .lpbox .price-list__head {
    padding: 0 30px 20px;
  }
  .lpbox .price-list-box {
    margin: 15px 30px;
  }
  .lpbox .price-list-box__head {
    padding: 0 30px 20px;
    height: 85px;
    padding: 0;
    font-size: 30px;
  }
  .lpbox .price-list-box__head::before {
    left: -31px;
    width: 110px;
    height: 115px;
  }
  .lpbox .price-list-box__head .small {
    font-size: 15px;
  }
  .lpbox .second-price-info {
    font-size: 24px;
  }
  .lpbox .second-price-info .large {
    font-size: 40px;
  }
}
.lpbox .price-list-box--second .second-price {
  color: #484848;
  font-weight: 700;
  display: flex;
  align-items: center;
  font-size: 30px;
}
.lpbox .price-list-box--second .price-list-box__body .items {
  align-items: center;
}
.lpbox .price-list-box--second .times {
  color: #484848;
  font-weight: 700;
  display: flex;
  align-items: center;
  font-size: 16px;
}
.lpbox .price-list-box__body .second-price .unit {
  font-weight: initial;
  font-size: 11px;
  line-height: 1.2;
}
.lpbox .price-list-box__body .second-price .large {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: center;
}
.lpbox .second-price-img {
  width: 174px;
  height: auto;
  margin: 0;
}
.lpbox .price-list .balloon {
  position: relative;
  height: 80px;
  background: #ff669a;
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.04em;
}
.lpbox .price-list .balloon::after {
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  border-color: rgba(0, 153, 255, 0);
  border-top-width: 10px;
  border-bottom-width: 25px;
  border-left-width: 14px;
  border-right-width: 14px;
  margin-left: -10px;
  border-bottom-color: #ff669a;
  bottom: 97%;
  left: 50%;
}
.lpbox .price-list .balloon .small {
  font-weight: 600;
  font-size: 16px;
}
.lpbox .price-list .balloon .large {
  font-weight: 600;
  font-size: 24px;
}
.lpbox .total-price {
  padding: 10px;
}
.lpbox .total-price__text {
  color: #484747;
  font-size: 16px;
  line-height: 1.4;
}
.lpbox .total-price__img {
  display: block;
  margin: 10px auto;
}
.lpbox .total-price__img img {
  width: 100%;
}
.lpbox .course {
  margin: 15px auto 20px;
  color: #484747;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}
.lpbox .course .strong {
  display: inline;
  background: #fff;
  color: #484747;
  font-size: 16px;
}
@media screen and (min-width: 470px) {
  .lpbox .initial-price-img {
    width: 170px;
  }
  .lpbox .second-price-img {
    width: 250px;
  }
}
@media screen and (min-width: 600px) {
  .lpbox .total-price {
    padding: 10px 30px;
  }
  .lpbox .initial-price-img {
    width: 200px;
  }
  .lpbox .second-price-img {
    width: 300px;
  }
  .lpbox .price-list-box__body .initial-price {
    font-size: 70px;
  }
  .lpbox .price-list-box--second .second-price {
    font-size: 50px;
  }
  .lpbox .price-list-box__body .initial-price .large {
    font-size: 30px;
  }
}

@media screen and (max-width: 392px) {
  .header {
    padding: 0px 0 0 5px;
  }
  .header_text {
    font-size: 11px;
    letter-spacing: -0.04em;
  }
  .logo {
    width: 197px;
    height: auto;
  }
  .logo img {
    width: 120px;
    height: auto;
  }
}
@media screen and (max-width: 360px) {
  .header {
    padding: 0px 0 0 5px;
  }
  .logo {
    width: 190px;
    height: auto;
  }
  .logo-sub {
    font-size: 10px;
  }
}
@media screen and (max-width: 1000px) {
  .image-container {
    width: 500px;
    max-width: 500px;
  }
}
