@charset "UTF-8";

.op0{
	opacity: 0;
}

.popup{
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.fadeup{
  animation: fadeup 0.6s 1 forwards;
}
 
@keyframes fadeup {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  80%, 100% {
    opacity: 1;
  }
}


.fadeIn{
  animation: fadeIn 0.6s 1 forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  80%, 100% {
    opacity: 1;
  }
}

@keyframes zoom02 {
   0% {
      transform: scale(1.5);
     opacity: 0;
   }
   100% {
      transform: scale(1);
     opacity: 1;
   }
}

@keyframes zoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(1.25);
   }
}

.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  left: 40px;
  bottom:0;
    /*全体の高さ*/
  height:180px;
  z-index: 10;
}

.scrolldown1 span {
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  font-size: 16px;
  letter-spacing: 0.2em;
  transform: rotate(-180deg);
  font-weight: normal;
}

/* 線の描写 */
.scrolldown1::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 40px;
    /*線の形状*/
  width: 1px;
  height: 60px;
  background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
  left: 13px;
}


/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:130px;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:180px;
    opacity: 0;
  }
}