@charset "UTF-8";

:root{
	--mv-ratio: 1.7778;
	--mv-pt: 128px;
	--mv-h: calc(100vw / var(--mv-ratio));
}
@media screen and (max-width: 900px){
	:root{
		--mv-pt: 52px;
	}
}

body{
	--mv-total: calc(var(--mv-pt) + var(--mv-h));
}
body.scrolled{
	--mv-pt: 52px;
	--mv-total: calc(52px + var(--mv-h));
}

#mv_outer{
	background: #fff !important;
}

#mv_outer #mv,
#mv_outer #mv.slide01{
	box-sizing: border-box !important;
	top: 0 !important;
	margin-top: 0 !important;
	padding-top: var(--mv-pt) !important;
	height: var(--mv-total) !important;
	min-height: 0 !important;
	max-height: none !important;
	background: #fff !important;
	transition: padding-top .3s ease, height .3s ease;
}

#mv_outer #mv::after{
	top: var(--mv-pt) !important;
	height: calc(100% - var(--mv-pt)) !important;
	transition: top .3s ease, height .3s ease;
}

#mv_outer #mv .mv_img li{
	background: #fff !important;
}

#mv_outer #mv .mv_img li img,
#mv_outer #mv .mv_img li.pos_ct img,
#mv_outer #mv .mv_img li.pos_c img,
#mv_outer #mv .mv_img li.pos_cb img{
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: 50% 50% !important;
}

@keyframes mvZoomUp{
	0%   { opacity: 0; transform: scale(1); }
	15%  { opacity: 1; }
	100% { opacity: 1; transform: scale(1.15); }
}
#mv_outer #mv .mv_img li.show img{
	animation-name: mvZoomUp !important;
	animation-timing-function: ease-out !important;
	animation-fill-mode: forwards !important;
	transform-origin: 50% 50% !important;
}

#mv_outer #mv .mv_text{
	top: var(--mv-pt) !important;
	bottom: 0 !important;
	height: auto !important;
	padding-top: 0 !important;
	transition: top .3s ease;
}

#mv_outer #mv .mv_arrow{
	top: calc(var(--mv-pt) + (var(--mv-h) / 2) - 25px) !important;
	margin-top: 0 !important;
	transition: top .3s ease;
}

body.index main{
	transform: translateY(var(--mv-total)) !important;
	transition: transform .3s ease;
}
body.index #mv_outer.edit_outer + main{
	transform: translateY(0) !important;
}

@media screen and (max-width: 100vh){
	#mv_outer #mv,
	#mv_outer #mv.slide01{
		top: 0 !important;
		padding-top: var(--mv-pt) !important;
		height: var(--mv-total) !important;
	}
	body.index main{
		transform: translateY(var(--mv-total)) !important;
	}
	body.index #mv_outer.edit_outer + main{
		transform: translateY(0) !important;
	}
}

body.mv-hold header#pattern2{
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

@media screen and (min-width: 901px){
	body.mv-hold.scrolled{
		--mv-pt: 128px;
		--mv-total: calc(128px + var(--mv-h));
	}
}