/*-------------------------------------------
inviewでフェードイン
-------------------------------------------*/
.fadeIn {
    opacity: 0;
}
.fadeIn.is-show {
    opacity: 1;
    transition: opacity 1.2s;
}
.fadeInFast {
	opacity: 0;
}
.fadeInFast.is-show {
    opacity: 1;
    transition: opacity 0.5s;
}

.fadeInLate {
	opacity: 0;
}
.fadeInLate.is-show {
    animation: fadeInLate 1.7s forwards;
}
@keyframes fadeInLate {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 0;
	
	}
	100% {
		opacity: 1;
	}
}

/*-------------------------------------------
inviewで左からスライド
-------------------------------------------*/

.slide-from-left.is-show{/*←-----------------------------JQのaddClassで付けるクラス名*/
	animation: slide-left 0.8s ease-out 0s 1 forwards;/*「slide」というアニメーション名（好きな名前） */
}
@keyframes slide-left {/*←-------------------上で名付けた付けたアニメーション名*/
	0% {
	  transform: translateX(-50%);/*←----欄外に一度セットして*/
	}
	100% {
	  opacity: 1;/*←---------------------見えるようにする*/
	  transform: translateX(0);/*←-------欄外から元の位置に戻る*/
	}
}


/*-------------------------------------------
inviewで右からスライド
-------------------------------------------*/

.slide-from-right.is-show{/*←-----------------------------JQのaddClassで付けるクラス名*/
	animation: slide-right 0.8s ease-out 0s 1 forwards;/*「slide」というアニメーション名（好きな名前） */
}
@keyframes slide-right {/*←-------------------上で名付けた付けたアニメーション名*/
	0% {
	  transform: translateX(50%);/*←----欄外に一度セットして*/
	}
	100% {
	  opacity: 1;/*←---------------------見えるようにする*/
	  transform: translateX(0);/*←-------欄外から元の位置に戻る*/
	}
}