@charset "utf-8";

/*●全ページ共通使用：ふわっと出てくるアニメーション
---------------------------------------------------------------------------*/
/*ふわっとさせたいところへ.animetionを指定するだけ
▲main.js使用
参考URL:https://theorthodoxworks.com/web-design/scrollanimation
*/
.animation {
}
.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*●全ページ共通使用：ページ上部のタイトル部分の動き
---------------------------------------------------------------------------*/
.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	
	animation-duration: 1s;	
	-webkit-animation-duration: 1s;	
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	visibility: visible !important;			
}
@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
}
@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}	
}