﻿@charset "utf-8";

.lp_wrap .therefore .balloon {
  position: absolute;
  top: 4%;
  left: 30.467%;
  width: 39.067%;
}
.lp_wrap .therefore .balloon img {
  transition: 0.6s cubic-bezier(0.34, 1.56, 0.58, 1);
  transform-origin: center bottom;
  transform: scale(0);
  opacity: 0;
}
.lp_wrap .therefore .balloon.move img {
  transform: scale(1);
  opacity: 1;
}
.lp_wrap .therefore :is(.photo, .kinds, .head div, .arrow) {
  position: absolute;
}
.lp_wrap .therefore li:nth-child(1) .photo {
  top: 13%;
  right: 0%;
  width: 85.333%;
  transform: translateX(100%);
}
.lp_wrap .therefore li:nth-child(1) .kinds {
  top: 17%;
  left: 3.1%;
  width: 28.667%;
}
.lp_wrap .therefore li:nth-child(1) .head div:nth-child(1) {
  top: 19.8%;
  left: 3.1%;
  width: 46.267%;
}
.lp_wrap .therefore li:nth-child(1) .head div:nth-child(2) {
  top: 22.4%;
  left: 3.1%;
  width: 37.333%;
}
.lp_wrap .therefore li:nth-child(1) .arrow {
  top: 22.6%;
  left: -9%;
  width: 72.667%;
  transform: rotateZ(90deg);
}
.lp_wrap .therefore li:nth-child(2) .photo {
  top: 41%;
  left: 0%;
  width: 85.333%;
  transform: translateX(-100%);
}
.lp_wrap .therefore li:nth-child(2) .kinds {
  top: 44.5%;
  right: 3.1%;
  width: 40.667%;
}
.lp_wrap .therefore li:nth-child(2) .head div:nth-child(1) {
  top: 47.2%;
  right: 3.1%;
  width: 51.067%;
}
.lp_wrap .therefore li:nth-child(2) .head div:nth-child(2) {
  top: 49.8%;
  right: 3.1%;
  width: 37.333%;
}
.lp_wrap .therefore li:nth-child(2) .arrow {
  top: 50.4%;
  right: -9%;
  width: 72.667%;
  transform: rotateZ(-90deg);
}
.lp_wrap .therefore li:nth-child(3) .photo {
  top: 69%;
  right: 0%;
  width: 85.333%;
  transform: translateX(100%);
}
.lp_wrap .therefore li:nth-child(3) .kinds {
  top: 72.5%;
  left: 3.1%;
  width: 30.133%;
}
.lp_wrap .therefore li:nth-child(3) .head div:nth-child(1) {
  top: 75.2%;
  left: 3.1%;
  width: 33.6%;
}
.lp_wrap .therefore li:nth-child(3) .head div:nth-child(2) {
  top: 77.8%;
  left: 3.1%;
  width: 36.8%;
}
.lp_wrap .therefore li:nth-child(3) .arrow {
  top: 78.5%;
  left: -9%;
  width: 72.667%;
  transform: rotateZ(90deg);
}
.lp_wrap .therefore li .photo {
  transition: 0.8s;
}
.lp_wrap .therefore li .kinds {
  overflow: hidden;
}
.lp_wrap .therefore li .kinds img {
  transition: 0.6s 0.3s;
  transform: translateY(110%);
}
.lp_wrap .therefore li .head div:nth-child(1) {
  transition: 0.6s;
  clip-path: inset(0% 100% 0% 0%);
}
.lp_wrap .therefore li .head div:nth-child(2) {
  transition: 0.6s 0.1s;
  clip-path: inset(0% 100% 0% 0%);
}
.lp_wrap .therefore li .arrow {
  transition: 0.6s 0.2s;
  transform-origin: top center;
  opacity: 0;
}
.lp_wrap .therefore li .photo.move {
  transform: translateX(0%);
}
.lp_wrap .therefore li .photo.move ~ .kinds img {
  transform: translateY(0%);
}
.lp_wrap .therefore li .photo.move ~ .head div:nth-child(1),
.lp_wrap .therefore li .photo.move ~ .head div:nth-child(2) {
  clip-path: inset(0%);
}
.lp_wrap .therefore li .photo.move ~ .arrow {
  transform: rotateZ(0deg);
  opacity: 1;
}