.top {
  height: 100vh;
}
/* ブロック共通初期設定 */
.scroll-block {
}

.fade-block1 {
  opacity: 0;
  transition: all 1.5s;
		animation: ani-fin 0.8s ease-out both;
}
/* 画面に入った時の動き */
.fade-block1.blockIn {
 /* opacity: 1;*/
}


@keyframes ani-fin{
  0% {opacity: 0;}
  100% {opacity: 1;}
}


/* ----------パターン2：下からふわっと---------- */



/* 画面外 */
.fade-block2 {
transform: translateY(50px);opacity: 0;
}
/* 画面に入った時の動き */
.fade-block2.blockIn {
		animation: ani-scin 0.8s ease-out both;
  transition: all 1.5s;
}

@keyframes ani-scin{
  0% {transform: translateY(50px);opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}


.fade-block2.blockIn:nth-child(4n+1){
animation-delay:0s;
}

.fade-block2.blockIn:nth-child(4n+2){
animation-delay:0.2s;
}

.fade-block2.blockIn:nth-child(4n+3){
animation-delay:0.4s;
}

.fade-block2.blockIn:nth-child(4n+4){
animation-delay:0.6s;
}


@media screen and (max-width: 768px){
	
.fade-block2.blockIn:nth-child(2n+1){
animation-delay:0s;
}

.fade-block2.blockIn:nth-child(2n+2){
animation-delay:0.2s;
}


}




/* 画面外 */
.fade-works{
transform: translateY(50px);opacity: 0;
}
/* 画面に入った時の動き */
.fade-works.blockIn{
		animation: ani-scin 0.8s ease-out both;
  transition: all 1.5s;
}

/*@keyframes ani-scin{
  0% {transform: translateY(50px);opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}*/


.fade-works.blockIn:nth-child(2n+1){
animation-delay:0s;
}

.fade-works.blockIn:nth-child(2n+2){
animation-delay:0.2s;
}


@media screen and (max-width: 768px){
	
.fade-works.blockIn{
animation-delay:0s;
}



}



/**/