@charset "UTF-8";

.lp_wrap .gijikakuso .point {
  position: absolute;
  top: 6.6%;
  left: 12.5%;
  width: 29.1%;
  overflow: hidden;
}
.lp_wrap .gijikakuso .point.trigger img{
  transition: 0.6s;
  transform: translateX(-100%);
}
.lp_wrap .gijikakuso .point.trigger.move img{
  transform: translateX(0%);
}
.lp_wrap .gijikakuso .shigeki li {
  position: absolute;
}
.lp_wrap .gijikakuso .shigeki li.trigger{
  opacity: 0;
  transition: 0.6s 0.6s ease;
}
.lp_wrap .gijikakuso .shigeki li.trigger ~ li {
  clip-path: inset(0% 100% 0% 0%);
}
.lp_wrap .gijikakuso .shigeki li:nth-child(2) {
  transition: 0.6s 0.9s ease;
}
.lp_wrap .gijikakuso .shigeki li:nth-child(3) {
  transition: 0.6s 1.2s ease;
}
.lp_wrap .gijikakuso .shigeki li:nth-child(4) {
  transition: 0.6s 1.5s ease;
}
.lp_wrap .gijikakuso .shigeki li.trigger.move{
  opacity: 1;
}
.lp_wrap .gijikakuso .shigeki li.trigger.move ~ li {
  clip-path: inset(0% 0% 0% 0%);
}
.lp_wrap .gijikakuso .shigeki li:nth-child(1) {
  top: 37.5%;
  left: 25%;
  width: 68.667%;
}
.lp_wrap .gijikakuso .shigeki li:nth-child(2) {
  top: 42.5%;
  left: 36.8%;
  width: 21.067%;
}
.lp_wrap .gijikakuso .shigeki li:nth-child(3) {
  top: 42.5%;
  left: 49%;
  width: 21.2%;
}
.lp_wrap .gijikakuso .shigeki li:nth-child(4) {
  top: 42.5%;
  left: 61.5%;
  width: 21.067%;
}
.lp_wrap .gijikakuso .veil {
  position: absolute;
  top: 47%;
  left: 2.5%;
  width: 90.533%;
}
.lp_wrap .gijikakuso .veil.trigger {
  opacity: 0;
  transform: translateY(-50%);
  transition: 0.6s 0.0s ease;
}
.lp_wrap .gijikakuso .veil.trigger.move {
  opacity: 1;
  transform: translateY(0%);
}
.lp_wrap .gijikakuso .circle li {
  position: absolute;
}
.lp_wrap .gijikakuso .circle li.trigger,
.lp_wrap .gijikakuso .circle li.trigger ~ li {
  opacity: 0;
  transition: 0.6s 2.4s;
}
.lp_wrap .gijikakuso .circle li.trigger.move,
.lp_wrap .gijikakuso .circle li.trigger.move ~ li {
  opacity: 1;
}
.lp_wrap .gijikakuso .circle li.trigger ~ li {
  animation: gijikakuso-circle 3.0s 0.0s linear infinite;
}
@keyframes gijikakuso-circle{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}
.lp_wrap .gijikakuso .circle li:nth-child(1) {
  top: 56.5%;
  left: 45%;
  width: 25.867%;
}
.lp_wrap .gijikakuso .circle li:nth-child(2) {
  top: 54.5%;
  left: 42%;
  width: 31.6%;
}