@charset "utf-8";

/*
******************************************************************
* MJP top.css
******************************************************************
*/
.animetion-stopped * {
	opacity: 1 !important;
	transform: scale(1) !important;
	transition: none !important;
	animation: none !important;
}
.animetion-stopped .contents-kv {
	height: 100vh;
}	
.animetion-stopped #footer {
	opacity: 1 !important;
	transform: translate(-50%,0) scale(1) !important;
	transition: none !important;
	animation: none !important;
}

/***key visual animetion***/

/**initialise**/

*[data-fv-anime],
*[data-fv-anime] * {
	backface-visibility: hidden;
}

.action-end *[data-fv-anime="1"],
.action-end *[data-fv-anime="2"],
.action-end *[data-fv-anime="3"],
.action-end *[data-fv-anime="last"] {
	transition: none !important;
}
/*kv-bg*/
*[data-fv-anime="1"] {
	transform: scale(1.5);
	transition: 2.0s ease-in 0.5s;
}
*[data-fv-anime="2"] {
	opacity: 0;
	transform: scale(2.5);
	transition: 0.7s ease-in 2.0s;
}
*[data-fv-anime="3"] {
	opacity: 0;
	transform: scale(2.0);
	transition: .2s ease-in 3.0s;
}
*[data-fv-anime="last"] {
	opacity: 0;
	transition: 1.0s ease-in-out 3.5s;
}
/**active**/
.action *[data-fv-anime="1"] {
	transform: scale(1);
}
.action *[data-fv-anime="2"] {
	opacity: 1;
	transform: scale(1);
}
.action *[data-fv-anime="3"] {
	opacity: 1;
	transform: scale(1);
}
.action *[data-fv-anime="last"] {
	opacity: 1;
}
.action .kv-star002[data-fv-anime="last"] {
	opacity: 0;
}

/**key loop animetion**/
.action-end *[data-anime-loop="fadeInOut"] {
	-webkit-animation: fadeInout 3.0s ease forwards infinite;
	animation: fadeInout 3.0s ease forwards infinite;
	animation-delay: 0s;
}
.action-end *[data-anime-loop="fadeInOut002"] {
	-webkit-animation: fadeInout002 3.0s ease forwards infinite;
	animation: fadeInout002 3.0s ease forwards infinite;
	animation-delay: 0s;
}
.action-end *[data-anime-loop="fadeInOut003"] {
	-webkit-animation: fadeInOut003 5.0s ease forwards infinite;
	animation: fadeInOut003 5.0s ease forwards infinite;
	animation-delay: 0s;
}
.action-end *[data-anime-loop="fadeInOut004"] {
	-webkit-animation: fadeInout004 5.0s ease forwards infinite;
	animation: fadeInout004 5.0s ease forwards infinite;
	animation-delay: 0s;
}
.action-end *[data-anime-loop="fadeInOutArrow"]:before {
	-webkit-animation: fadeInOutArrow 1.5s ease-out forwards infinite;
	animation: fadeInOutArrow 1.5s ease-out forwards infinite;
	animation-delay: 0s;
}
@keyframes fadeInout {
	from {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeInout002 {
	from {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes fadeInout003 {
	from {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeInout004 {
	from {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes fadeInOutArrow {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(10px);
		/*opacity: 1;*/
	}
}
/***menu animation***/

.js-target_modal.icon-animated {
	opacity: 0;
	z-index: -1;
}
.js-target_modal-close.icon-animated {
	opacity: 1;
	z-index: 200;
}


/***full site only animetion***/