@charset "UTF-8";

.lp_wrap .cleansing3 {
  margin-top: -26%;
}
.lp_wrap .cleansing3 .bubble li {
  position: absolute;
}
.lp_wrap .cleansing3 .bubble li:nth-child(1) {
  top: 19.7%;
  left: 0%;
  width: 50.8%;
  animation: 2s cleansing3_bubble ease-in-out alternate infinite;
}
.lp_wrap .cleansing3 .bubble li:nth-child(2) {
  top: 32.4%;
  right: 0%;
  width: 50.133%;
  animation: 2s cleansing3_bubble -0.7s ease-in-out alternate infinite;
}
@keyframes cleansing3_bubble {
  from {
    transform: translateY(-5%);
  }
  to {
    transform: translateY(5%);
  }
}
.lp_wrap .cleansing3 .goods {
  position: absolute;
  top: 24.1%;
  left: 30.5%;
  width: 43.333%;
}
.lp_wrap .cleansing3 .head div {
  position: absolute;
}
.lp_wrap .cleansing3 .head div:nth-child(1) {
  top: 64.2%;
  left: 7%;
  width: 32.8%;
  transition: 0.6s;
}
.lp_wrap .cleansing3 .head div:nth-child(2) {
  top: 71.8%;
  left: 25.5%;
  width: 25.333%;
  transition: 0.6s 0.15s;
}
.lp_wrap .cleansing3 .head div:nth-child(3) {
  top: 81.6%;
  left: 18.2%;
  width: 28.267%;
  transition: 0.6s 0.3s;
}
.lp_wrap .cleansing3 .head div:nth-child(4) {
  top: 91.5%;
  left: 40%;
  width: 16.933%;
  transition: 0.6s 0.45s;
}
.lp_wrap .cleansing3 .head div.trigger,
.lp_wrap .cleansing3 .head div.trigger ~ div:nth-child(3) {
  transform: translateY(-10%) rotateZ(-10deg);
  opacity: 0;
}
.lp_wrap .cleansing3 .head div.trigger ~ div:nth-child(2),
.lp_wrap .cleansing3 .head div.trigger ~ div:nth-child(4) {
  transform: translateY(-10%) rotateZ(10deg);
  opacity: 0;
}
.lp_wrap .cleansing3 .head div.trigger.move,
.lp_wrap .cleansing3 .head div.trigger.move ~ div {
  transform: translateY(0%) rotateZ(0deg);
  opacity: 1;
}
.lp_wrap .cleansing3 .bubble2 {
  position: absolute;
  top: 85.6%;
  left: 60%;
  width: 37.467%;
}
.lp_wrap .cleansing3 .head:has(div.trigger) ~ .bubble2 {
  transition: 0.6s 0.6s;
  transform: translateY(10%);
  opacity: 0;
}
.lp_wrap .cleansing3 .head:has(div.trigger.move) ~ .bubble2 {
  transform: translateY(0%);
  opacity: 1;
}