/*田中 亮成 メインアニメーションCSS（アニメーションのみの設定に限る）　Ver.1.0.0 */

#staff-main .recruit-moving-h2 {
	position: absolute;
	bottom: 160px;
	right: 0;
	animation-name: staff-name-frame;
	animation-fill-mode: forwards;
	animation-duration: 1.3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	animation-delay: 1.6s;
	animation-direction: normal;
	opacity: 0;
	z-index: 2;
}
	@keyframes staff-name-frame {
		0% {
			opacity: 0;
		}
		20% {
			opacity: 0.75;
		}
		70% {
			opacity: 1;
			right: 13%;
		}
		90% {
			opacity: 1;
			right: 11.8%;
		}
		95% {
			opacity: 1;
			right: 12.2%;
		}
		100% {
			opacity: 1;
			right: 12.5%;
		}
	}
#staff-main .recruit-moving-career {
	position: absolute;
	top: 200px;
	left: 0;
	animation-name: staff-career-mv;
	animation-fill-mode: forwards;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-delay: 0.5s;
	animation-direction: normal;
	opacity: 0;
	z-index: 3;
}
	@keyframes staff-career-mv {
		0% {
			opacity: 0;
		}
		20% {
			opacity: 0.75;
		}
		70% {
			opacity: 1;
			left: 13%;
		}
		90% {
			opacity: 1;
			left: 11.8%;
		}
		95% {
			opacity: 1;
			left: 12.2%;
		}
		100% {
			opacity: 1;
			left: 12.5%;
		}
	}
#staff-main .recruit-moving-work {
	position: absolute;
	top: 234px;
	left: 5%;
	animation-name: staff-work-mv;
	animation-fill-mode: forwards;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-delay: 1.0s;
	animation-direction: normal;
	opacity: 0;
	z-index: 3;
}
	@keyframes staff-work-mv {
		0% {
			opacity: 0;
		}
		20% {
			opacity: 0.75;
		}
		70% {
			opacity: 1;
			left: 16%;
		}
		90% {
			opacity: 1;
			left: 14.8%;
		}
		95% {
			opacity: 1;
			left: 15.2%;
		}
		100% {
			opacity: 1;
			left: 15.5%;
		}
	}




/*=================================
タブレット設定（768px〜1024px）
=================================*/
@media only screen and (max-width: 1024px) {

	#staff-main .recruit-moving-h2 {
		bottom: 100px;
		animation-duration: 0.7s;
	}
		@keyframes staff-name-frame {
			0% {
				opacity: 0;
			}
			20% {
				opacity: 0.75;
			}
			70% {
				opacity: 1;
				right: 8%;
			}
			90% {
				opacity: 1;
				right: 6.8%;
			}
			95% {
				opacity: 1;
				right: 7.2%;
			}
			100% {
				opacity: 1;
				right: 7.5%;
			}
		}
	#staff-main .recruit-moving-career {
		top: 180px;
	}
		@keyframes staff-career-mv {
			0% {
				opacity: 0;
			}
			20% {
				opacity: 0.75;
			}
			70% {
				opacity: 1;
				left: 10%;
			}
			90% {
				opacity: 1;
				left: 8.8%;
			}
			95% {
				opacity: 1;
				left: 9.2%;
			}
			100% {
				opacity: 1;
				left: 9.5%;
			}
		}
	#staff-main .recruit-moving-work {
		top: 210px;
	}
		@keyframes staff-work-mv {
			0% {
				opacity: 0;
			}
			20% {
				opacity: 0.75;
			}
			70% {
				opacity: 1;
				left: 13%;
			}
			90% {
				opacity: 1;
				left: 11.8%;
			}
			95% {
				opacity: 1;
				left: 12.2%;
			}
			100% {
				opacity: 1;
				left: 12.5%;
			}
		}
	

}


/*=================================
スマホ設定（〜767px）
=================================*/
@media only screen and (max-width: 767px) {

	#staff-main .recruit-moving-h2 {
		bottom: 18px;
		animation-duration: 0.5s;
	}
	#staff-main .recruit-moving-career {
		top: 30px;
	}
		@keyframes staff-career-mv {
			0% {
				opacity: 0;
			}
			20% {
				opacity: 0.75;
			}
			70% {
				opacity: 1;
				left: 6%;
			}
			90% {
				opacity: 1;
				left: 4.8%;
			}
			95% {
				opacity: 1;
				left: 5.2%;
			}
			100% {
				opacity: 1;
				left: 5.5%;
			}
		}
	#staff-main .recruit-moving-work {
		top: 50px;
	}
		@keyframes staff-work-mv {
			0% {
				opacity: 0;
			}
			20% {
				opacity: 0.75;
			}
			70% {
				opacity: 1;
				left: 9%;
			}
			90% {
				opacity: 1;
				left: 7.8%;
			}
			95% {
				opacity: 1;
				left: 8.2%;
			}
			100% {
				opacity: 1;
				left: 8.5%;
			}
		}

}