.anime-box {
  height: 100vh;
  background: linear-gradient(0.25turn, #5c7696, #0e1422);
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 500px;
}
.anime-box .blue1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.anime-box .blue2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.line {
  animation: anim 1s forwards;
  height: 100vw;
  position: absolute;
  width: 100%;
  height: auto;
}

.line1 {
  top: 16.66%;
  left: -150%;
  transform: translate(0, -16.66%);
  animation: anim 1s forwards;
  animation-delay: 0s;
}

.line2 {
  top: 33.32%;
  left: -150%;
  transform: translate(0, -33.32%);
  animation: anim 1s forwards;
  animation-delay: 0.2s;
}

.line3 {
  top: 50%;
  left: -150%;
  transform: translate(0, 0%);
  animation: anim 1s forwards;
  animation-delay: 0.4s;
}

.line4 {
  top: 66.64%;
  left: -150%;
  transform: translate(0, -49.98%);
  animation: anim 1s forwards;
  animation-delay: 0.3s;
}

.line5 {
  top: 83.3%;
  left: -150%;
  transform: translate(0, -66.64%);
  animation: anim 1s forwards;
  animation-delay: 0.24s;
}

.star-box {
  position: relative;
}

.star {
  position: absolute;
  width: 15%;
  top: 50%;
  right: -9%;
  transform: translate(0%, -50%);
}

.star3 {
  width: 20%;
}

.five-a {
  font-size: max(20vmin, 60px);
  color: white;
  position: absolute;
  top: 50%;
  left: -60%;
  top: 50%;
  left: 3%;
  transform: translate(0%, -50%);
  font-weight: 800;
  font-family: Impact !important;
  letter-spacing: 0.1em;
}
.five-a span {
  font-size: max(27vmin, 80px);
}
.five-a .title-01 {
  animation: anim2 1s ease forwards;
  animation-delay: 1.2s;
  transform: translate(-500%, 0%);
  text-shadow: 0.01em 0.01em 0.2em rgba(255, 255, 255, 0.4), -0.01em -0.01em 0.2em rgba(255, 255, 255, 0.4);
}
.five-a .title-02 {
  margin-left: 30%;
  margin-top: -15%;
  animation-delay: 3.5s;
  animation: anim2 1s ease forwards;
  animation-delay: 0.8s;
  transform: translate(-500%, 0%);
  text-shadow: 0.01em 0.01em 0.2em rgba(255, 255, 255, 0.4), -0.01em -0.01em 0.2em rgba(255, 255, 255, 0.4);
}
.five-a .title-03 {
  display: block;
  margin-left: 65%;
  margin-top: -40%;
  animation: anim2 1s ease forwards;
  animation-delay: 0.4s;
  transform: translate(-500%, 0%);
  text-shadow: 0.01em 0.01em 0.2em rgba(255, 255, 255, 0.4), -0.01em -0.01em 0.2em rgba(255, 255, 255, 0.4);
}

@keyframes anim {
  0% {
    transform: translate(-150%, 0%);
  }
  /*
  50% {
      transform: translate(750%, -50%);
  }*/
  100% {
    transform: translate(250%, 0%);
  }
}
@keyframes anim2 {
  0% {
    transform: translate(-500%, 0%);
  }
  /*
  50% {
      transform: translate(750%, -50%);
  }*/
  100% {
    transform: translate(0%, 0%);
  }
}/*# sourceMappingURL=opening.css.map */