/*Button------------------*/
/**/
.bt-arrow-under:hover {

}
	.bt-arrow-under:hover::after {
		animation: btanim 0.4s ease-in-out;
		content: url("/share/im_yamada/ui/arrow-gr.svg");
	}
@media only screen and (min-width:641px) {
	.bt-arrow-under.bt-c:hover {
		color: #fff;
		background-color: rgba(215,215,215,0.6);
	}
		.bt-arrow-under.bt-c:hover::after {
			content: url("/share/im_yamada/ui/arrow-wh.svg");
		}
}
@keyframes btanim {
	0% {
		transform: translate(-70%, 0);
		opacity: 0;
	}
	100% {
		transform: translate(-50%, 0);
		opacity: 1;
	}
}
/**/
.bt:hover::after {
	animation: btanim2 0.5s ease-in-out;
}
@keyframes btanim2 {
	0% {
		transform: translate(-70%, -45%);
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		transform: translate(0, -45%);
		opacity: 1;
	}
}
/**/
.btgroup .bt:hover::after {
	animation: btanim3 0.5s ease-in-out;
}
@keyframes btanim3 {
	0% {
		transform: translate(-70%, -30%);
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		transform: translate(0, -30%);
		opacity: 1;
	}
}
/**/
.category-only-title .articles a:hover::after {
	animation: btanim5 0.4s ease-in-out;
}
@keyframes btanim5 {
	0% {
		transform: translate(-70%, 0.7em);
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		transform: translate(0, 0.7em);
		opacity: 1;
	}
}

/*SITEMENU------------------*/
#sitemenu {
	animation: menusanime 0.65s ease forwards;
}
#sitemenu[data-opend="true"] {
	
}
@keyframes menusanime {
	0% {
		opacity: 0;
		transform: translate(-30%, 0);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/*TOP------------------*/

/*Slide animation: slideanim*/
.motionParent[data-motionclass="slideanim"] > * {
	opacity: 0.0;
}
.motion.slideanim {
	opacity: 0.0;
	transform: translate(0, 3em);
}
.motion.slideanim[data-isvisible="true"] {
	opacity: 1.0;
	transform: translate(0, 0);
}
@media only screen and (max-width:640px) {
	#recruit_sec03 .motion.slideanim {
		transform: translate(0, 0);
	}
}

/*Title animation: titleanim*/
.motionParent[data-motionclass="titleanim"] > * {
	opacity: 0.0;
}
.motion.titleanim {
	opacity: 0.0;
	transform: translate(-3em, 0);
}
.motion.titleanim[data-isvisible="true"] {
	opacity: 1.0;
	transform: translate(0, 0);
}

/*Image*/ 
.imrotate img {
	opacity: 1.0;
	transition: all 0.4s;
}
.imrotate:hover img {
	opacity: 0.2;
}