@charset "UTF-8";

.topMv {
	width:100%;
	height:50vw;
	aspect-ratio:2;
	margin:0 auto;
	overflow:hidden;
}
@media (max-width:640px){
	.topMv{aspect-ratio:initial;}
}

.topMv .mv-image{
	width:100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	overflow:hidden;
	margin:0 auto 70px;
}
.image_left {
	width: calc(100% - 50vw);
	text-align:center;
}
.image_left img {
	width:50vw;
	height:50vw;
	ojject-fit:cover;
}
.topMv .mv-image .image-animation{
	display:flex;flex-wrap:wrap;
	width:50vw;
}
.topMv .mv-image .image-animation li{
	width:25vw;
	height:25vw;
	aspect-ratio:1;
	position:relative;
	background:#2a1600;
}
.topMv .mv-image .image-animation li div:before{
	content:"";width:95%;height:95%;display:block;position:absolute;z-index:-1
}
.topMv .mv-image .image-animation li div:after{content:"";
	width:100%;height:100%;display:block;opacity:.1;
	position:absolute;top:0;left:0;
}
.topMv .mv-image .image-animation li img{
	aspect-ratio:1;object-fit:cover;
	width:25vw;
	height:25vw;
}
@media (max-width:1024px){
	.topMv {
		height:100vh;
		max-height: calc(730px + 25vw);
	}
	.topMv .mv-image {
		display:block;
	}
	.image_left {
		width:100vw;
		height: calc(100vh - 25vw);
		max-height:730px;
		overflow:hidden;
		position:relative;
	}
	.image_left img {
		position:absolute;
		width:100%;
		height:auto;
		top:55%;
		left:0;
		transform: translateY(-50%);
	}
	.topMv .mv-image .image-animation {
		width:100vw;
		height:25vw;
	}
	
}
@media (max-width:768px){
	.topMv {
		min-height: calc(100vw + 370px);
	}
	.image_left {
		height: calc(100vh - 100vw);
		min-height:370px;
	}
	.topMv .mv-image .image-animation {
		height:100vw;
	}
	.topMv .mv-image .image-animation li {
		width:50vw;
		height:50vw;
	}
	.topMv .mv-image .image-animation li img {
		width:50vw;
		height:50vw;
	}
}
@media (max-width:480px){
	.topMv {
		height:90vh;
		max-height:90vh;
		min-height:160vw;
	}
	.image_left {
		height: calc(90vh - 100vw);
		max-height:calc(90vh - 100vw);
		min-height:60vw;
	}
	.image_left img {
		top:50%;
	}
}
@media (max-width:390px){
	.image_left img {
		top:50%;
		width:105%;
		left:50%;
		transform: translate(-50%, -50%);
	}
}
/*.topMv .mv-image .image-animation li.img01 div:before{
	background:url(//recruit.life-design.okinawa/wp-content/themes/LDR-NEW/css/../img/header_bg_orange.svg) no-repeat bottom left .3125rem;background-size:98%;top:0;left:.3125rem;
}
.topMv .mv-image .image-animation li.img02 div:before{
	background:url(//recruit.life-design.okinawa/wp-content/themes/LDR-NEW/css/../img/header_bg_yellow.svg) no-repeat bottom right .3125rem;background-size:98%;top:0;right:.3125rem;
}
.topMv .mv-image .image-animation li.img03 div:before{
	background:url(//recruit.life-design.okinawa/wp-content/themes/LDR-NEW/css/../img/header_bg_green.svg) no-repeatleft .3125rem;background-size:98%;top:.625rem;left:.3125rem;
}
.topMv .mv-image .image-animation li.img04 div:before{
	background:url(//recruit.life-design.okinawa/wp-content/themes/LDR-NEW/css/../img/header_bg_blue.svg) no-repeatright .3125rem;background-size:98%;top:.625rem;right:.3125rem;
}*/
.topMv .mv-image .image-animation li.js-animation{
	perspective:62.5rem;
}
.topMv .mv-image .image-animation li.js-animation div{
	position:absolute;width:100%;height:100%;top:0;left:0;backface-visibility:hidden;transform-style:preserve-3d;
}
.topMv .mv-image .image-animation li.js-animation .img-before{
	transform:rotateY(0deg);animation:none;z-index:2;
}
.topMv .mv-image .image-animation li.js-animation .img-after{
	transform:rotateY(180deg);animation:none;z-index:1;
}
.topMv .mv-image .image-animation li.js-animation.flipped .img-before{
	animation:rotate-to-back .5s cubic-bezier(.25,1,.5,1) forwards;z-index:1;
}
.topMv .mv-image .image-animation li.js-animation.flipped .img-after{
	animation:rotate-to-front .5s cubic-bezier(.25,1,.5,1) forwards;z-index:2;
}
.topMv .mv-image .image-animation li.js-animation:not(.flipped) .img-before{
	animation:rotate-to-front .5s cubic-bezier(.25,1,.5,1) forwards;z-index:2;
}
.topMv .mv-image .image-animation li.js-animation:not(.flipped) .img-after{
	animation:rotate-to-back .5s cubic-bezier(.25,1,.5,1) forwards;z-index:1;
}

@keyframes fade-in{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}
@-moz-keyframes fade-in{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}
@-webkit-keyframes fade-in{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}
@keyframes fadeInZoom{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeOutZoom{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
@keyframes rotate-to-back{0%{transform:rotateY(0deg)}70%{transform:rotateY(200deg)}100%{transform:rotateY(180deg)}}
@keyframes rotate-to-front{0%{transform:rotateY(180deg)}70%{transform:rotateY(380deg)}100%{transform:rotateY(360deg)}}