@charset "UTF-8";

.lp_wrap .sokode .photo li {
  position: absolute;
  top: 5.73%;
  right: 0;
  width: 89.333%;
}
.lp_wrap .sokode .photo li:nth-child(1) {
  animation: 3s sokode_photo1 linear infinite;
}
.lp_wrap .sokode .photo li:nth-child(2) {
  animation: 3s sokode_photo2 linear infinite;
}
.lp_wrap .sokode .photo li:nth-child(3) {
  animation: 3s sokode_photo3 linear infinite;
}
@keyframes sokode_photo1 {
  0%, 30% {
    opacity: 1;
  }
  33.3%, 100% {
    opacity: 0;
  }
}
@keyframes sokode_photo2 {
  0%, 15%, 66.7%, 100% {
    opacity: 0;
  }
  33.3%, 60% {
    opacity: 1;
  }
}
@keyframes sokode_photo3 {
  0%, 45% {
    opacity: 0;
  }
  66.6%, 100% {
    opacity: 1;
  }
}
.lp_wrap .sokode .cover {
  position: absolute;
  top: 6.85%;
  left: 17.9%;
  width: 16%;
}
.lp_wrap .sokode .head {
  position: absolute;
  top: 7.3%;
  left: 4.3%;
  width: 12.267%;
}
.lp_wrap .sokode .head.trigger {
  transition: 0.8s;
  clip-path: inset(0 0 100% 0)
}
.lp_wrap .sokode .head.trigger.move {
  clip-path: inset(0)
}
.lp_wrap .sokode .catch {
  position: absolute;
  top: 26%;
  left: 5.7%;
  width: 88.8%;
}
.lp_wrap .sokode .catch.trigger {
  transition: 0.6s;
  transform: translateY(20%);
  opacity: 0;
}
.lp_wrap .sokode .catch.trigger.move {
  transform: translateY(0);
  opacity: 1;
}
.lp_wrap .sokode .mask li {
  position: absolute;
  transition: 0.6s;
  transform: translateY(-20%);
  opacity: 0;
}
.lp_wrap .sokode .mask li:nth-child(1) {
  top: 41.4%;
  left: 19.2%;
  width: 54.533%;
}
.lp_wrap .sokode .mask li:nth-child(2) {
  top: 42%;
  left: 21.5%;
  width: 48.267%;
}
.lp_wrap .sokode .mask li.trigger.move,
.lp_wrap .sokode .mask li.trigger.move ~ li {
  transform: translateY(0);
  opacity: 1;
}
.lp_wrap .sokode .mask li:nth-child(1) img {
  animation: sokode_mask 2.5s infinite;
}
@keyframes sokode_mask {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(4deg, 4deg);
  }
  10% {
    transform: skew(-3deg, -3deg);
  }
  15% {
    transform: skew(2deg, 2deg);
  }
  20% {
    transform: skew(-1deg, -1deg);
  }
  25% {
    transform: skew(0.5deg, 0.5deg);
  }
  30% {
    transform: skew(-0.3deg, -0.3deg);
  }
  35% {
    transform: skew(0.1deg, 0.1deg);
  }
}
.lp_wrap .sokode .item li {
  position: absolute;
  transform: translateY(20%);
  opacity: 0;
}
.lp_wrap .sokode .item li:nth-child(1) {
  top: 57.3%;
  left: 5.7%;
  width: 28%;
  transition: 0.6s;
}
.lp_wrap .sokode .item li:nth-child(2) {
  top: 57.33%;
  left: 36%;
  width: 27.867%;
  transition: 0.6s 0.3s;
}
.lp_wrap .sokode .item li:nth-child(3) {
  top: 57.4%;
  left: 65.7%;
  width: 28.667%;
  transition: 0.6s 0.6s;
}
.lp_wrap .sokode .item li.trigger.move,
.lp_wrap .sokode .item li.trigger.move ~ li {
  transform: translateY(0);
  opacity: 1;
}
.lp_wrap .sokode .copy1 {
  position: absolute;
  top: 69.15%;
  left: 0%;
  width: 96.133%;
}
.lp_wrap .sokode .copy1.trigger {
  transition: 0.8s;
  clip-path: inset(0 100% 0 0);
}
.lp_wrap .sokode .copy1.trigger.move {
  clip-path: inset(0);
}
.lp_wrap .sokode .copy2 {
  position: absolute;
  top: 88.8%;
  left: 0%;
  width: 100%;
}
.lp_wrap .sokode .copy2.trigger {
  transition: 1s;
  clip-path: inset(0 100% 0 0);
}
.lp_wrap .sokode .copy2.trigger.move {
  clip-path: inset(0);
}