@charset "UTF-8";

.topMv {
	width:100%;
	height:50vw;
	/*aspect-ratio:2;*/
	margin:0 auto;
}


.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);
	height:50vw;
	text-align:center;
	background:url(../item/main_left_bg.jpg) no-repeat;
	background-size:cover;
	background-position:right bottom;
	position:relative;
}
.image_left img {
	/*width:50vw;
	height:50vw;
	ojject-fit:cover;*/
	position:absolute;
	top:53%;
	left:50%;
	transform: translate(-50%, -50%);
	width:70%;
}
.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:#000;
}
.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;
}
.image_left img {
	aspect-ratio:629 / 404;
}
@media (max-width:1600px){
	.topMv {
		height:65vw;
	}
	.topMv .mv-image {
		display:block;
	}
	.image_left {
		width:100vw;
		height:40vw;
		background-position:center;
	}
	.topMv .mv-image .image-animation {
		width:100vw;
	}
	.topMv .mv-image .image-animation li {
		width:25vw;
		height:25vw;
	}
	.topMv .mv-image .image-animation li img {
		width:25vw;
		height:25vw;
	}
	.image_left img {
		max-width:650px;
		width:40%;
	}
}
@media (max-width:1240px){
	.topMv {
		height:75vw;
	}
	.image_left {
		height:50vw;
	}
	.image_left img {
		max-width:450px;
		width:70%;
	}
}
@media (max-width:768px){
	.topMv {
		height:175vw;
	}
	.image_left {
		height:75vw;
	}
	.image_left img {
		width:80%;
	}
	.topMv .mv-image .image-animation {
	}
	.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;
		min-height:calc(100vw + 310px);
	}
	.image_left {
		height: calc(90vh - 100vw);
		min-height:310px;
	}
	.image_left img {
		top:58%;
	}*/
}

/*.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;/*speed0.5s→5sに変更*/
}

@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)}}*/

/*上書き部分*/
@keyframes rotate-to-back{0%{transform:rotateY(0deg)}10%{transform:rotateY(180deg)}100%{transform:rotateY(180deg)}}
@keyframes rotate-to-front{0%{transform:rotateY(180deg)}10%{transform:rotateY(360deg)}100%{transform:rotateY(360deg)}}