/* フローティングバナー--------------------------------------- */
.lp_wrap .float {
  position: fixed;
  bottom: 0;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  max-width: 600px;
  display: none;
}

/* offer--------------------------------------- */
/* 石鹸ボタン */
.lp_wrap .offer_lifeplus .btn-soap {
  position: absolute;
  inset: 82.2% 0 auto;
  margin: auto;
  width: 72.5%;
}

/* CTAボタン */
.lp_wrap .offer_lifeplus .btn {
  position: absolute;
  inset: 91.9% 0 auto;
  margin: auto;
  width: 95%;
}

/* ミニCTA--------------------------------------- */
.lp_wrap .mini-cta {
  padding: 60px 30px;
}

.lp_wrap .mini-cta img {
  border-radius: 16px;
}

@media (max-width: 750px) {
  .lp_wrap .mini-cta {
    padding: 30px 15px;
  }
}

/* fv--------------------------------------- */
.lp_wrap .fv .text .js-animate {
  opacity: 0.1;
  transition: opacity 2s ease, transform 2s ease;
  transition-delay: var(--delay, 0s);
  width: 25.3%;
  filter: drop-shadow(0.3rem 0.3rem 1rem #e5f7f8);
}

.lp_wrap .fv .text .js-animate:nth-child(1) {
  top: 17.9%;
  right: 5%;
}

.lp_wrap .fv .text .js-animate:nth-child(2) {
  top: 32.9%;
  left: 5%;
}

/* 5冠達成--------------------------------------- */
/* No1 */
.lp_wrap .five-crown .no1 .js-animate {
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease;
  transition-delay: var(--delay, 0s);
  width: 13.2%;
  right: 11.2%;
}

.lp_wrap .five-crown .no1 .js-animate:nth-child(1) {
  bottom: 41.7%;
}

.lp_wrap .five-crown .no1 .js-animate:nth-child(2) {
  bottom: 32.8%;
}

.lp_wrap .five-crown .no1 .js-animate:nth-child(3) {
  bottom: 24.1%;
}

/* 冠 */
.lp_wrap .five-crown .crown {
  position: absolute;
  width: 82.4%;
  top: 27.9%;
  left: 50%;
  transform: translateX(-50%);
}

.lp_wrap .five-crown .crown .shine-wrap {
  background-color: transparent;
}

.lp_wrap .five-crown .crown .shine-wrap .shine-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.lp_wrap .five-crown .crown .shine-wrap .shine-mask {
  position: absolute;
  inset: 0;

  -webkit-mask-image: var(--fv-crown-mask);
  mask-image: var(--fv-crown-mask);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;
}

.lp_wrap .five-crown .crown .shine-wrap .shine-mask .shine-hikari {
  position: absolute;
  top: -10%;
  left: -40%;
  width: 40%;
  padding-top: 22%;

  background-image: radial-gradient(circle,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0.35) 35%,
      rgba(255, 255, 255, 0.1) 55%,
      rgba(255, 255, 255, 0) 70%);

  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 75%);
  mask-image: radial-gradient(circle, #000 55%, transparent 75%);

  transform: skewX(25deg);
  filter: blur(6px);

  animation: crown_shine_kirari 2s linear infinite;
}

@keyframes crown_shine_kirari {
  0% {
    left: -50%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  35% {
    left: 75%;
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    left: 75%;
    opacity: 0;
  }
}

/* 驚きの使用感--------------------------------------- */
.lp_wrap .inspection .movie {
  position: absolute;
  top: 31%;
  width: 100%;
  overflow: hidden;
}

/* 光老化--------------------------------------- */
/* No1 */
.lp_wrap .photoaging .text .js-animate {
  opacity: 0;
  top: 1.6%;
  transform: translateY(-250px);
}

.lp_wrap .photoaging .text .js-animate:nth-child(1) {
  width: 19.3%;
  left: 15.5%;
}

.lp_wrap .photoaging .text .js-animate:nth-child(2) {
  width: 19.3%;
  left: 40.4%;
}

.lp_wrap .photoaging .text .js-animate:nth-child(3) {
  width: 19.4%;
  right: 15.5%;
}

.lp_wrap .photoaging .text .js-animate.is-show {
  animation: dropBounce 1s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes dropBounce {
  0% {
    transform: translateY(-250px);
    opacity: 0;
  }

  60% {
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    transform: translateY(-22px);
  }

  88% {
    transform: translateY(0);
  }

  95% {
    transform: translateY(-6px);
  }

  100% {
    transform: translateY(0);
    opacity: 1
  }
}

/* 吹き出し */
.lp_wrap .photoaging .bubble .js-animate {
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease;
  transition-delay: var(--delay, 0s);
}

.lp_wrap .photoaging .bubble .js-animate:nth-child(1) {
  width: 65.4%;
  bottom: 28%;
  left: 9.4%;
}

.lp_wrap .photoaging .bubble .js-animate:nth-child(2) {
  width: 47.8%;
  bottom: 26.2%;
  left: 3.5%;
}

.lp_wrap .photoaging .bubble .js-animate:nth-child(3) {
  width: 60.2%;
  bottom: 25.4%;
  right: 1.6%;
}

.lp_wrap .photoaging .bubble .js-animate:nth-child(4) {
  width: 75%;
  bottom: 24%;
  left: 5.6%;
}

.lp_wrap .photoaging .bubble .js-animate:nth-child(5) {
  width: 63.7%;
  bottom: 22.3%;
  right: 4.6%;
}

.lp_wrap .photoaging .bubble .js-animate:nth-child(6) {
  width: 63.6%;
  bottom: 20.8%;
  left: 5.8%;
}

/* チェック */
.lp_wrap .photoaging .check .js-animate {
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease;
  transition-delay: var(--delay, 0s);
  left: 10%;
  width: 5%;
}

.lp_wrap .photoaging .check .js-animate:nth-child(1) {
  top: 16.3%;
}

.lp_wrap .photoaging .check .js-animate:nth-child(2) {
  top: 21.1%;
}

.lp_wrap .photoaging .check .js-animate:nth-child(3) {
  top: 25.9%;
}

.lp_wrap .photoaging .check .js-animate:nth-child(4) {
  top: 30.7%;
}

.lp_wrap .photoaging .check .js-animate:nth-child(5) {
  top: 35.5%;
}

/* 動画 */
.lp_wrap .photoaging .video .front {
  position: absolute;
  width: 100%;
  inset: 0 0 auto;
  z-index: 1;
}

.lp_wrap .photoaging .video .movie {
  position: absolute;
  bottom: 19.3%;
  left: 4.667%;
  width: 90.667%;
  overflow: hidden;
}

/* メインコンテンツ--------------------------------------- */
/* 動画 */
.lp_wrap .main .texture .movie {
  position: absolute;
  top: 15.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 89.3%;
  overflow: hidden;
  border-radius: min(6vw, 20px);
}

/* チェック */
.lp_wrap .main .check .js-animate {
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease;
  transition-delay: var(--delay, 0s);
  left: 17.8%;
  width: 5.7%;
}

.lp_wrap .main .check .js-animate:nth-child(1) {
  bottom: 6.43%;
}

.lp_wrap .main .check .js-animate:nth-child(2) {
  bottom: 5.44%;
}

.lp_wrap .main .check .js-animate:nth-child(3) {
  bottom: 3.96%;
}

.lp_wrap .main .check .js-animate:nth-child(4) {
  bottom: 2.52%;
}

/* メインコンテンツ--------------------------------------- */
.lp_wrap .instagram .movie1 {
  position: absolute;
  top: 33%;
  left: 4.8%;
  width: 40.8%;
  z-index: 1;
  border-radius: min(6vw, 40px);
  overflow: hidden;
}

.lp_wrap .instagram .movie2 {
  position: absolute;
  top: 71.5%;
  left: 4.7%;
  width: 40.8%;
  z-index: 1;
  border-radius: min(6vw, 40px);
  overflow: hidden;
}

.lp_wrap .instagram .movie3 {
  position: absolute;
  top: 22.3%;
  left: 53.6%;
  width: 40.8%;
  z-index: 1;
  border-radius: min(6vw, 40px);
  overflow: hidden;
}

.lp_wrap .instagram .movie4 {
  position: absolute;
  top: 60.8%;
  left: 53.6%;
  width: 40.8%;
  z-index: 1;
  border-radius: min(6vw, 40px);
  overflow: hidden;
}

/* 使用者スライド--------------------------------------- */
.lp_wrap .user_slide,
.lp_wrap .user_slide_reverse {
  width: 150%;
  height: 150%;
}

/* 満足度--------------------------------------- */
.lp_wrap .satisfaction .circle .js-animate {
  width: 88.6%;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 1 / 1;
}

.lp_wrap .satisfaction .circle .js-animate svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.lp_wrap .satisfaction .circle .js-animate svg circle {
  /* 表示するパーセンテージ */
  --circle-percent: 96;
  /* 線の太さ */
  --circle-stroke-width: 46.2;
  fill: transparent;
  stroke: #51AABE;
  stroke-width: var(--circle-stroke-width);
  stroke-dasharray: calc(2 * 3.1416 * 190);
  stroke-dashoffset: calc(2 * 3.1416 * 190);
  transition: stroke-dashoffset 1.6s ease-in-out;
}

.lp_wrap .satisfaction .circle .js-animate.is-show svg circle {
  stroke-dashoffset: calc((2 * 3.1416 * 190) * (1 - var(--circle-percent) / 100));
}

/* 3つの理由--------------------------------------- */
.lp_wrap .reason3-point1 .movie {
  position: absolute;
  top: 138%;
  left: 15%;
  width: 70%;
  z-index: 1;
}

.lp_wrap .reason3-point1-2 .movie {
  position: absolute;
  top: -28.8%;
  left: 4.2%;
  width: 44%;
  overflow: hidden;
  border-radius: min(6vw, 20px);
}

.lp_wrap .reason3-point1-2 .movie2 {
  position: absolute;
  top: -28.8%;
  left: 51.9%;
  width: 44%;
  overflow: hidden;
  border-radius: min(6vw, 20px);
}

.lp_wrap .reason3-point2 .movie {
  position: absolute;
  top: 71.95%;
  left: 10%;
  width: 80%;
  overflow: hidden;
  border-radius: min(6vw, 40px);
}

.lp_wrap .reason3-point2-2 .movie {
  position: absolute;
  top: 18.1%;
  left: 4.666%;
  width: 90.667%;
  overflow: hidden;
  border-radius: min(6vw, 20px);
}

.lp_wrap .reason3-point2-2 .fk1 {
  position: absolute;
  top: 65.7%;
  left: 14%;
  width: 32%;
  z-index: 0;
}

.lp_wrap .reason3-point2-2 .fk2 {
  position: absolute;
  top: 65.7%;
  left: 54%;
  width: 32%;
  z-index: 0;
}

/* 紫外線対策--------------------------------------- */
.lp_wrap .uvcare .case .js-animate {
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease;
  transition-delay: var(--delay, 0s);
}

.lp_wrap .uvcare .case .js-animate:nth-child(1) {
  width: 25.3%;
  top: 33.5%;
  right: 19%;
}

.lp_wrap .uvcare .case .js-animate:nth-child(2) {
  width: 44.9%;
  top: 48%;
  left: 10%;
}

.lp_wrap .uvcare .case .js-animate:nth-child(3) {
  width: 25.3%;
  top: 59.6%;
  right: 24.9%;
}

.lp_wrap .uvcare .case .js-animate:nth-child(4) {
  width: 32.6%;
  top: 69.6%;
  left: 13.4%;
}

.lp_wrap .uvcare .case .js-animate:nth-child(5) {
  width: 40.6%;
  top: 77.2%;
  right: 6.8%;
}

/* FAQ--------------------------------------- */
.lp_wrap .faq {
  background: #ddf3f4;
}

.lp_wrap .faq dl {
  padding: 0% 6% 10%;
}

.lp_wrap .faq dl dt {
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.lp_wrap .faq dl dt:nth-of-type(n + 2) {
  margin-top: 4%;
}

.lp_wrap .faq dl dt::before {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 4%;
  width: 6.25%;
  height: 100%;
  background: url('/lp_media/lp/mn-ssuv/008/faq_icon_minus.webp') center center / contain no-repeat;
  transition: 0.4s;
  opacity: 0;
}

.lp_wrap .faq dl dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 4%;
  width: 6.25%;
  height: 100%;
  background: url('/lp_media/lp/mn-ssuv/008/faq_icon_plus.webp') center center / contain no-repeat;
  transition: 0.4s;
  opacity: 1;
}

.lp_wrap .faq dl dt.open::before {
  opacity: 1;
}

.lp_wrap .faq dl dt.open::after {
  opacity: 0;
}

.lp_wrap .faq dl dd {
  display: none;
  position: relative;
}