@charset "utf-8";

.mv {
	position: relative;
	width: 100%;
	height: 70vw;
	min-height: 70vw;
	margin: 0 auto;
	overflow: hidden;
}
.mv_pic {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 70vw;
	min-height: 70vw;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index:10;
	opacity: 0;
	-webkit-animation: gallery 28s 0s infinite;
	animation: gallery2 28s 0s infinite;
}

.mv__inner {
	opacity: 0;
}
.ready .mv__inner {
	opacity: 1;
	transition: all 1s ease;
}

@supports (-webkit-touch-callout: none) {
	.mv_pic {
		min-height: -webkit-fill-available;
	}
}

.ready .mv_pic:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.ready .mv_pic:nth-of-type(2) {
	-webkit-animation-delay: 7s;
	animation-delay: 7s;
}
.ready .mv_pic:nth-of-type(3) {
	-webkit-animation-delay: 14s;
	animation-delay: 14s;
}
.ready .mv_pic:nth-of-type(4) {
	-webkit-animation-delay: 21s;
	animation-delay: 21s;
}

@keyframes gallery2 {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 1;
	}
	25% {
		opacity: 1;
	}
	40% {
		opacity: 0;
		z-index:9;
	}
    100% {
/*		transform: scale(1.1);	*/
	   	opacity: 0
    }
}

@media screen and (max-width: 519px) {

	.cooking_01 {
		background-image: url("../img/mv_01.jpg");
/*		background-position: -100px center;	*/
	}
	.cooking_02 {
		background-image: url("../img/mv_02.jpg");
	}
	.cooking_03 {
		background-image: url("../img/mv_03.jpg");
/*		background-position: -130px center;	*/
	}
	.cooking_04 {
		background-image: url("../img/mv_04.jpg");
	}

}


@media screen and (min-width: 520px) {


}


@media screen and (min-width: 960px) {

/*	.topicpath {
		display: none;
	}
*/
	.mv {
		width: 150vh;
		max-width: 100%;
		height: 75vh;
		min-height: 0;
		max-height: 1000px;
		margin-top: 3rem;
	}
	.mv_pic {
		width: 150vh;
		max-width: 100%;
		height: 75vh;
		min-height: 0;
		max-height: 1000px;
	}

	.cooking_01 {
		background-image: url("../img/mv_01.jpg");
	}
	.cooking_02 {
		background-image: url("../img/mv_02.jpg");
	}
	.cooking_03 {
		background-image: url("../img/mv_03.jpg");
	}
	.cooking_04 {
		background-image: url("../img/mv_04.jpg");
	}

}

@media screen and (min-width: 2000px) {

	.mv {
		max-width: 2000px;
	}
	.mv_pic {
		max-width: 2000px;
	}

}