@charset "UTF-8";

.lp_wrap .moist01 {
  background-color: #b69c8b;
  overflow: hidden;
}
.lp_wrap .moist01 .step {
  position: absolute;
  top: 6%;
  left: 37.334%;
  width: 25.333%;
}
.lp_wrap .moist01 .maru {
  position: absolute;
  top: 16.7%;
  right: 57.1%;
  width: 2.267%;
  animation: 1s moist01_maru ease-in-out alternate infinite;
}
@keyframes moist01_maru {
  to {
    opacity: 0;
  }
}
.lp_wrap .moist01 .head li {
  position: absolute;
}
.lp_wrap .moist01 .head li.trigger,
.lp_wrap .moist01 .head li.trigger ~ li {
  opacity: 0;
}
.lp_wrap .moist01 .head li.trigger.move,
.lp_wrap .moist01 .head li.trigger.move ~ li {
  opacity: 1;
}
.lp_wrap .moist01 .head li:nth-child(1) {
  top: 22.3%;
  left: 26.533%;
  width: 46.933%;
  transition: 0.6s;
}
.lp_wrap .moist01 .head li:nth-child(2) {
  top: 27.8%;
  left: 24.15%;
  width: 51.7%;
  transition: 0.6s 0.2s;
}
.lp_wrap .moist01 .head li:nth-child(3) {
  top: 36.8%;
  left: 14.067%;
  width: 71.867%;
  transition: 0.6s 0.4s;
}
.lp_wrap .moist01 .video01 {
  position: absolute;
  top: 44.5%;
  right: 50%;
  width: 43.867%;
  border-radius: min(1.7vw, 13px);
  overflow: hidden;
}
.lp_wrap .moist01 .video01.trigger {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(10%);
}
.lp_wrap .moist01 .video01.trigger.move {
  opacity: 1;
  transform: translateY(0%);
}
.lp_wrap .moist01 .video02 {
  position: absolute;
  top: 59%;
  left: 50%;
  width: 43.867%;
  border-radius: min(1.7vw, 13px);
  border: 1px solid #fff;
  overflow: hidden;
}
.lp_wrap .moist01 .video01.trigger ~ .video02 {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(-10%);
}
.lp_wrap .moist01 .video01.trigger.move ~ .video02 {
  opacity: 1;
  transform: translateY(0%);
}
.lp_wrap .moist01 .review li {
  position: absolute;
}
.lp_wrap .moist01 .review li:nth-child(1) {
  top: 41%;
  left: 41%;
  width: 56.267%;
}
.lp_wrap .moist01 .review li:nth-child(2) {
  top: 78%;
  left: 10%;
  width: 38.267%;
}
.lp_wrap .moist01 .video01.trigger ~ .review li:nth-child(1) {
  transition: 0.6s 0.2s;
  opacity: 0;
  transform-origin: left bottom;
  transform: scale(0);
}
.lp_wrap .moist01 .video01.trigger.move ~ .review li:nth-child(1) {
  opacity: 1;
  transform: scale(1);
}
.lp_wrap .moist01 .video01.trigger ~ .review li:nth-child(2) {
  transition: 0.6s 0.2s;
  opacity: 0;
  transform-origin: right top;
  transform: scale(0);
}
.lp_wrap .moist01 .video01.trigger.move ~ .review li:nth-child(2) {
  opacity: 1;
  transform: scale(1);
}
.lp_wrap .moist01 .comment {
  position: absolute;
  top: 95%;
  right: 3%;
  width: 45.2%;
}