@charset "UTF-8";

.lp_wrap .cleansing2 {
  margin-top: -13%;
}
.lp_wrap .cleansing2 .image {
  position: absolute;
  top: 9%;
  left: 13.334%;
  width: 73.333%;
}
.lp_wrap .cleansing2 .image .overlay {
  position: absolute;
  inset: 0%;
}
@property --cleansing2_image {
  syntax: "<number>";
  inherits: false;
  initial-value: -0.3;
}
.lp_wrap .cleansing2 .image.trigger img {
  --cleansing2_image: -0.3;
  transition: --cleansing2_image 1.4s;
}
.lp_wrap .cleansing2 .image.trigger.move img {
  --cleansing2_image: 1.4;
}
.lp_wrap .cleansing2 .image.trigger .base {
  -webkit-mask: radial-gradient(circle at 0% 0%, #000000 calc(var(--cleansing2_image) * 100%), transparent calc(var(--cleansing2_image) * 100% + 30%));
  mask: radial-gradient(circle at 0% 0%, #000000 calc(var(--cleansing2_image) * 100%), transparent calc(var(--cleansing2_image) * 100% + 30%));
}
.lp_wrap .cleansing2 .image.trigger .overlay {
  filter: brightness(200%);
  -webkit-mask: radial-gradient(circle at 0% 0%, transparent calc(var(--cleansing2_image) * 100% - 30%), #000000 calc(var(--cleansing2_image) * 100%), transparent calc(var(--cleansing2_image) * 100% + 30%));
  mask: radial-gradient(circle at 0% 0%, transparent calc(var(--cleansing2_image) * 100% - 30%), #000000 calc(var(--cleansing2_image) * 100%), transparent calc(var(--cleansing2_image) * 100% + 30%));
}
.lp_wrap .cleansing2 .on1 {
  position: absolute;
  top: 6.2%;
  left: 3.4%;
  width: 90.933%;
}
.lp_wrap .cleansing2 .circle {
  position: absolute;
  top: 6.5%;
  left: 39.7%;
  width: 20.8%;
  animation: 10s cleansing2_circle linear infinite;
}
@keyframes cleansing2_circle {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(-359deg);
  }
}
.lp_wrap .cleansing2 .head2 div {
  position: absolute;
}
.lp_wrap .cleansing2 .head2 div:nth-child(1) {
  top: 5.3%;
  left: 76.8%;
  width: 18.933%;
  transition: 0.6s 0.4s;
}
.lp_wrap .cleansing2 .head2 div:nth-child(2) {
  top: 7.2%;
  left: 6.7%;
  width: 12%;
  transition: 0.6s 0.6s;
}
.lp_wrap .cleansing2 .image.trigger ~ .head2 div {
  transform: translateY(10%);
  opacity: 0;
}
.lp_wrap .cleansing2 .image.trigger.move ~ .head2 div {
  transform: translateY(0%);
  opacity: 1;
}
.lp_wrap .cleansing2 .on2 li {
  position: absolute;
}
.lp_wrap .cleansing2 .on2 li:nth-child(1) {
  top: 42.1%;
  left: 6.6%;
  width: 89.333%;
}
.lp_wrap .cleansing2 .on2 li:nth-child(2) {
  top: 67.4%;
  left: 6.6%;
  width: 89.333%;
}
.lp_wrap .cleansing2 .on2 li.trigger {
  transition: 0.6s;
  transform: translateY(10%);
  opacity: 0;
}
.lp_wrap .cleansing2 .on2 li.trigger.move {
  transform: translateY(0%);
  opacity: 1;
}