@charset "UTF-8";
/*******************************
topmv
*******************************/
/*******************************
zbox
*******************************/
.box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 600px;
  perspective-origin: 50% 150%;
}

.z {
  position: absolute;
  top: 12%;
  right: 4%;
  width: 80%;
  height: 90%;
  mix-blend-mode: screen;
  transform: translate(0, 0) rotateY(0) translateZ(0);
}

.z img {
  width: 100%;
  height: auto;
}

.large .z {
  font-size: 300px;
}

/* .label {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 8px;
  border-radius: 4px;
} */
/* zfadein01--------------------------------- */

@keyframes zfadein01 {
  0% {
    transform: translate(28px, 16px) rotateY(4deg) rotateX(-6deg);
    opacity: 0;
  }

  10% {
    transform: translate(26px, 15px) rotateY(4deg) rotateX(-6deg);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0) rotateY(0deg) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes zfadein02 {
  0% {
    transform: translate(-28px, -16px) rotateY(4deg) rotateX(-6deg);
    opacity: 0;
  }

  10% {
    transform: translate(-26px, -15px) rotateY(4deg) rotateX(-6deg);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0) rotateY(0deg) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes zfadein03 {
  0% {
    transform: translate(-6px, -20px) rotateY(4deg) rotateX(-6deg);
    opacity: 0;
  }

  10% {
    transform: translate(-5px, -18px) rotateY(4deg) rotateX(-6deg);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0) rotateY(0deg) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes zfadein04 {
  0% {
    transform: translate(6px, 20px) rotateY(4deg) rotateX(-6deg);
    opacity: 0;
  }

  10% {
    transform: translate(5px, 18px) rotateY(4deg) rotateX(-6deg);
    opacity: 1;
  }

  100% {
    transform: translate(0, 0) rotateY(0deg) rotateX(0deg);
    opacity: 1;
  }
}
/* ーーーーーーーーーーーーーーーーーー */
@keyframes glitch {
  0%,
  100% {
    transform: translate(0, 0);
  }

  1% {
    transform: translate(-4px, 1px);
  }

  2% {
    transform: translate(6px, -1px);
  }

  3% {
    transform: translate(-1px, 4px);
  }

  4% {
    transform: translate(4px, -4px);
  }

  5% {
    transform: translate(1px, 1px);
  }
}

.pattern06 .item01.fadein.on {
  animation: zfadein013s ease-in-out forwards,
    glitch 3.5s steps(3, end) infinite 4.1s;
}

.pattern06 .item02.fadein.on {
  animation: zfadein02 3s ease-in-out forwards 0.1s,
    glitch 3.5s steps(3, end) infinite 4.2s;
}

.pattern06 .item03.fadein.on {
  animation: zfadein03 3s ease-in-out forwards 0.2s,
    glitch 3.5s steps(3, end) infinite 4.3s;
}

.pattern06 .item04.fadein.on {
  animation: zfadein04 3s ease-in-out forwards 0.3s,
    glitch 3.5s steps(3, end) infinite 4.4s;
}

.pattern06 .item05.fadein.on {
  animation: zfadein013s ease-in-out forwards 0.4s,
    glitch 3.5s steps(3, end) infinite 4.5s;
}

.pattern06 .item06.fadein.on {
  animation: zfadein02 3s ease-in-out forwards 0.5s,
    glitch 3.5s steps(3, end) infinite 4.6s;
}

.pattern06 .item07.fadein.on {
  animation: zfadein03 3s ease-in-out forwards 0.6s,
    glitch 3.5s steps(3, end) infinite 4.7s;
}

.pattern06 .item08.fadein.on {
  animation: zfadein04 3s ease-in-out forwards 0.7s,
    glitch 3.5s steps(3, end) infinite 4.8s;
}

.pattern06 .item09.fadein.on {
  animation: zfadein013s ease-in-out forwards 0.8s,
    glitch 3.5s steps(3, end) infinite 4.9s;
}

.pattern06 .item10.fadein.on {
  animation: zfadein02 3s ease-in-out forwards 0.9s,
    glitch 3.5s steps(3, end) infinite 5s;
}

.pattern06 .item11.fadein.on {
  animation: zfadein03 3s ease-in-out forwards 1s,
    glitch 3.5s steps(3, end) infinite 5.1s;
}

@keyframes blur {
  0% {
    filter: blur(0);
  }

  70% {
    filter: blur(3px);
  }

  100% {
    filter: blur(0);
  }
}

.blur_ani {
  animation: blur 5.375s ease-in-out forwards;
}