@charset "UTF-8";

.lp_wrap .shampoo {
  margin-top: -21%;
}
.lp_wrap .shampoo .comment li {
  position: absolute;
  left: 4%;
  width: 84.667%;
}
.lp_wrap .shampoo .comment li:nth-child(1) {
  top: 14.4%;
  transition: 0.6s;
}
.lp_wrap .shampoo .comment li:nth-child(2) {
  top: 23.7%;
  transition: 0.6s 0.2s;
}
.lp_wrap .shampoo .comment li.trigger,
.lp_wrap .shampoo .comment li.trigger ~ li {
  transform: translateY(20%);
  opacity: 0;
}
.lp_wrap .shampoo .comment li.trigger.move,
.lp_wrap .shampoo .comment li.trigger.move ~ li {
  transform: translateY(0%);
  opacity: 1;
}
.lp_wrap .shampoo .on {
  position: absolute;
  top: 66.6%;
  left: 7.934%;
  width: 84.133%;
}
.lp_wrap .shampoo .on.trigger {
  transition: 0.6s;
  transform: translateY(10%);
  opacity: 0;
}
.lp_wrap .shampoo .on.trigger.move {
  transform: translateY(0%);
  opacity: 1;
}
.lp_wrap .shampoo .head div {
  position: absolute;
}
.lp_wrap .shampoo .head div:nth-child(1) {
  top: 77.3%;
  left: 13.3%;
  width: 24%;
  transition: 0.6s 0.4s cubic-bezier(0.5, 2.01, 0.64, 0.99);
}
.lp_wrap .shampoo .head div:nth-child(2) {
  top: 78%;
  left: 35.7%;
  width: 19.2%;
  transition: 0.6s 0.55s cubic-bezier(0.5, 2.01, 0.64, 0.99);
}
.lp_wrap .shampoo .head div:nth-child(3) {
  top: 77.9%;
  left: 55.8%;
  width: 19.466%;
  transition: 0.6s 0.7s cubic-bezier(0.5, 2.01, 0.64, 0.99);
}
.lp_wrap .shampoo .head div:nth-child(4) {
  top: 78%;
  left: 75.6%;
  width: 9.6%;
  transition: 0.6s 0.85s cubic-bezier(0.5, 2.01, 0.64, 0.99);
}
.lp_wrap .shampoo .on.trigger ~ .head div {
  transform: scale(0);
  opacity: 0;
}
.lp_wrap .shampoo .on.trigger.move ~ .head div {
  transform: scale(1);
  opacity: 1;
}