@charset "UTF-8";
/* CSS Document */

/*
  Animation
-------------------------------------------------------------------------*/
.anm{
  opacity:0;
}

/* フェードイン */
@keyframes anmFedIn{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

/* フェードインアップ */
@keyframes anmFedInUp{
  0%{
    opacity: 0;
    transform: translate(0, 40px);
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}

/* フェードインダウン */
@keyframes anmFedInDn{
  0%{
    opacity: 0;
    transform: translate(0, -40px);
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}

/* フェードインレフト */
@keyframes anmFedInLt{
  0%{
    opacity: 0;
    transform: translate(-40px, 0);
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}

/* フェードインライト */
@keyframes anmFedInRt{
  0%{
    opacity: 0;
    transform: translate(40px, 0);
  }
  100%{
    opacity: 1;
    transform: translate(0);
  }
}


/* トップページ */
#wrapper .top .kitasplogo{
  opacity:0;
  animation:anmFedInDn 0.8s ease 2.8s forwards;
}
.kvWrapperIn .txtArea .tit{
  opacity:0;
  animation:anmFedInLt 1.5s ease 1.0s forwards;
}
.kvWrapperIn .txtArea .txt{
  opacity:0;
  animation:anmFedInUp 0.8s ease 2.0s forwards;
}
.kvWrapperIn .txtArea .txt .scroll{
  opacity:0;
  animation:anmFedIn 1.0s ease 2.8s forwards;
}


/* 共通アニメーション  */
#wrapper{
  opacity:0;
  animation:anmFedIn 0.8s ease 0.5s forwards;
}
#wrapper .kitasplogo{
  opacity:0;
  animation:anmFedIn 0.6s ease 0.6s forwards;
}

/* フェードイン */
.anmFedIn_01.anmStart{
  opacity:0;
  animation:anmFedIn 0.6s ease 0.4s forwards;
}
.anmFedIn_02.anmStart{
  opacity:0;
  animation:anmFedIn 0.6s ease 0.6s forwards;
}
.anmFedIn_03.anmStart{
  opacity:0;
  animation:anmFedIn 0.6s ease 0.8s forwards;
}

/* フェードインアップ */
.anmFedInUp_01.anmStart{
  opacity:0;
  animation:anmFedInUp 0.6s ease 0.4s forwards;
}
.anmFedInUp_02.anmStart{
  opacity:0;
  animation:anmFedInUp 0.6s ease 0.6s forwards;
}
.anmFedInUp_03.anmStart{
  opacity:0;
  animation:anmFedInUp 0.6s ease 0.8s forwards;
}
.anmFedInUp_04.anmStart{
  opacity:0;
  animation:anmFedInUp 0.6s ease 1.0s forwards;
}
.anmFedInUp_05.anmStart{
  opacity:0;
  animation:anmFedInUp 0.6s ease 1.2s forwards;
}
.anmFedInUp_06.anmStart{
  opacity:0;
  animation:anmFedInUp 0.6s ease 1.4s forwards;
}
@media screen and (max-width:812px){
  .anmFedInUp_02.anmStart,
  .anmFedInUp_03.anmStart,
  .anmFedInUp_04.anmStart,
  .anmFedInUp_05.anmStart,
  .anmFedInUp_06.anmStart{
    opacity:0;
    animation:anmFedInUp 0.6s ease 0.4s forwards;
  }
}


/* フェードインレフト */
.anmFedInLt_01.anmStart{
  opacity:0;
  animation:anmFedInLt 0.6s ease 0.4s forwards;
}
.anmFedInLt_02.anmStart{
  opacity:0;
  animation:anmFedInLt 0.6s ease 0.6s forwards;
}
.anmFedInLt_03.anmStart{
  opacity:0;
  animation:anmFedInLt 0.6s ease 0.8s forwards;
}
@media screen and (max-width:812px){
  .anmFedInLt_02.anmStart,
  .anmFedInLt_03.anmStart{
    opacity:0;
    animation:anmFedInUp 0.6s ease 0.4s forwards;
  }
}


/* フェードインライト */
.anmFedInRt_01.anmStart{
  opacity:0;
  animation:anmFedInRt 0.6s ease 0.4s forwards;
}
.anmFedInRt_02.anmStart{
  opacity:0;
  animation:anmFedInRt 0.6s ease 0.6s forwards;
}
.anmFedInRt_03.anmStart{
  opacity:0;
  animation:anmFedInRt 0.6s ease 0.8s forwards;
}
@media screen and (max-width:812px){
  .anmFedInRt_01.anmStart,
  .anmFedInRt_02.anmStart,
  .anmFedInRt_03.anmStart{
    opacity:0;
    animation:anmFedInUp 0.6s ease 0.4s forwards;
  }
}



/* スクロールアップ */
@keyframes scrollUp{
  0%{
    width: 0;
  }
  70%{
    width: 300px;
  }
  100%{
    width: 300px;
  }
}
/* スクロールフェードイン */
@keyframes scrollfadeIn{
  0%{
    opacity:0;
    transform: translate(0, -150%);
  }
  100%{
    opacity:1;
    transform: translate(0);
  }
}

/*　scroll animation*/
.scroll span:nth-child(1){
  animation: scrollfadeIn 0.6s linear 0.4s forwards;
}
.scroll span:nth-child(2){
  animation: scrollfadeIn 0.6s linear 0.6s forwards;
}
.scroll span:nth-child(3){
  animation: scrollfadeIn 0.6s linear 0.8s forwards;
}
.scroll span:nth-child(4){
  animation: scrollfadeIn 0.6s linear 1.0s forwards;
}
.scroll span:nth-child(5){
  animation: scrollfadeIn 0.6s linear 1.2s forwards;
}
.scroll span:nth-child(6){
  animation: scrollfadeIn 0.6s linear 1.4s forwards;
}