.arrow-anm {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  50% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

#start_box, #start_box-sp {
  -webkit-transform-origin: 695px 120px;
          transform-origin: 695px 120px;
  opacity: 0;
}

#start_box.show, #circle1.show, .show#circle1-sp, #circle2.show, .show#circle2-sp, #circle3.show, .show#circle3-sp, #circle4.show, .show#circle4-sp, #end_box.show, .show#end_box-sp, #start_box-sp.show {
  -webkit-animation-name: bouncedelay;
          animation-name: bouncedelay;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: none;
          animation-iteration-count: none;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
  opacity: 1;
}

#circle1, #circle1-sp {
  opacity: 0;
  -webkit-transform-origin: 695px 209px;
          transform-origin: 695px 209px;
}

#circle1.show, .show#circle1-sp {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

#circle1-sp {
  -webkit-transform-origin: 695px 280px;
          transform-origin: 695px 280px;
}

#circle2, #circle2-sp {
  -webkit-transform-origin: 695px 409px;
          transform-origin: 695px 409px;
  opacity: 0;
}

#circle2.show, .show#circle2-sp {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}

#circle2-sp {
  -webkit-transform-origin: 695px 720px;
          transform-origin: 695px 720px;
}

#circle3, #circle3-sp {
  -webkit-transform-origin: 695px 609px;
          transform-origin: 695px 609px;
  opacity: 0;
}

#circle3.show, .show#circle3-sp {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

#circle3-sp {
  -webkit-transform-origin: 695px 1200px;
          transform-origin: 695px 1200px;
}

#circle4, #circle4-sp {
  -webkit-transform-origin: 695px 809px;
          transform-origin: 695px 809px;
  opacity: 0;
}

#circle4.show, .show#circle4-sp {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}

#circle4-sp {
  -webkit-transform-origin: 695px 1700px;
          transform-origin: 695px 1700px;
}

#end_box, #end_box-sp {
  -webkit-transform-origin: 695px 944px;
          transform-origin: 695px 944px;
  opacity: 0;
}

#end_box.show, .show#end_box-sp {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

#end_box-sp {
  -webkit-transform-origin: 695px 2000px;
          transform-origin: 695px 2000px;
}

#end_box-sp.show {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}

@-webkit-keyframes bouncedelay {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes bouncedelay {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

#line, #line-sp {
  opacity: 0;
  -webkit-transform-origin: 695px 9px;
          transform-origin: 695px 9px;
}

#line.show, #line-sp.show {
  -webkit-animation-name: line;
          animation-name: line;
  -webkit-animation-duration: 1.7s;
          animation-duration: 1.7s;
  -webkit-animation-iteration-count: none;
          animation-iteration-count: none;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  opacity: 1;
}

@-webkit-keyframes line {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes line {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

.phase01 {
  opacity: 0;
}

.phase01.show {
  -webkit-animation-name: fade-in1;
          animation-name: fade-in1;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: none;
          animation-iteration-count: none;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  opacity: 1;
}

.phase02 {
  opacity: 0;
}

.phase02.show {
  -webkit-animation-name: fade-in2;
          animation-name: fade-in2;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: none;
          animation-iteration-count: none;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  opacity: 1;
}

.phase03 {
  opacity: 0;
}

.phase03.show {
  -webkit-animation-name: fade-in3;
          animation-name: fade-in3;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: none;
          animation-iteration-count: none;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
  opacity: 1;
}

.phase04 {
  opacity: 0;
}

.phase04.show {
  -webkit-animation-name: fade-in4;
          animation-name: fade-in4;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: none;
          animation-iteration-count: none;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
  opacity: 1;
}

@-webkit-keyframes fade-in1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-45%, 20%);
            transform: translate(-45%, 20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-55%, 20%);
            transform: translate(-55%, 20%);
  }
}

@keyframes fade-in1 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-45%, 20%);
            transform: translate(-45%, 20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-55%, 20%);
            transform: translate(-55%, 20%);
  }
}

@-webkit-keyframes fade-in2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(50%, -30%);
            transform: translate(50%, -30%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(60%, -30%);
            transform: translate(60%, -30%);
  }
}

@keyframes fade-in2 {
  0% {
    opacity: 0;
    -webkit-transform: translate(50%, -30%);
            transform: translate(50%, -30%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(60%, -30%);
            transform: translate(60%, -30%);
  }
}

@-webkit-keyframes fade-in3 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-45%, -80%);
            transform: translate(-45%, -80%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-55%, -80%);
            transform: translate(-55%, -80%);
  }
}

@keyframes fade-in3 {
  0% {
    opacity: 0;
    -webkit-transform: translate(-45%, -80%);
            transform: translate(-45%, -80%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-55%, -80%);
            transform: translate(-55%, -80%);
  }
}

@-webkit-keyframes fade-in4 {
  0% {
    opacity: 0;
    -webkit-transform: translate(50%, -145%);
            transform: translate(50%, -145%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(60%, -145%);
            transform: translate(60%, -145%);
  }
}

@keyframes fade-in4 {
  0% {
    opacity: 0;
    -webkit-transform: translate(50%, -145%);
            transform: translate(50%, -145%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(60%, -145%);
            transform: translate(60%, -145%);
  }
}
/*# sourceMappingURL=animation.css.map */