@charset "UTF-8";
/* ================================================================================
commmon
================================================================================ */
@media print, screen
{

body::after
{
	z-index: 1;
	position: fixed;
	top: 0;	left: 0;

	content: "";
	display: block;
	width: 100%;	height: 100vh;
	background: url("../image/page-mdw/background.webp") no-repeat top center/cover;
}
main
{
	opacity: 0;
	padding: 0 0 calc(100 * var(--v));

	transition: 1s ease-in-out 1s;
}
body.loaded main{	opacity: 1;	}

main,
footer
{
	z-index: 2;
	position: relative;
}
footer p{	color: var(--Ctheme1) !important;	}
footer .snses svg,
footer .logo svg
{	--C1: var(--Ctheme1);	}

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

body::after{	background: url("../image/page-mdw/background_sp.webp") no-repeat center calc(-150 * var(--v))/cover;	}
main{	padding: calc(360 * var(--v)) 0 calc(100 * var(--v));	}

}

/* ================================================================================
title
================================================================================ */
@media print, screen
{

#title > .inner
{
	display: flex;	justify-content: center;	align-items: center;

	height: 100dvh;
	max-width: calc(750 * var(--v));
	min-height: calc(600 * var(--v));
	margin: 0 auto;
	background: var(--Ctheme2);
}
#title h2{	width: fit-content;	}
#title .text_MDW
{
	--C1: var(--Ctheme1);
	width: calc(273 * var(--v));	aspect-ratio: 273/412;
	transform: translateX(5%);
}

#title .arrow
{
	position: absolute;
	bottom: calc(40 * var(--v));	left: 50%;

	width: calc(25 * var(--v));	aspect-ratio: 25/12;
	margin: 0 auto;
	background: var(--Ctheme1);
	clip-path: polygon(0 0,50% 100%, 100% 0, 90% 0, 50% 80%, 10% 0);

	transform: translate(-50%, 0);
}

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

#title > .inner
{
	height: calc(100dvh - 360 * var(--v));
	max-width: calc(600 * var(--v));
	min-height: calc(800 * var(--v));
	padding: calc(120 * var(--v)) 0;
}
#title h2{	margin: 0 auto calc(50 * var(--v));	}
#title .text_MDW{	width: calc(380 * var(--v));	}
#title .arrow{	width: calc(50 * var(--v));	}

}


/* ================================================================================
detail
================================================================================ */
@media print, screen
{

#detail > .inner
{
	max-width: calc(750 * var(--v));
	padding: calc(200 * var(--v)) var(--pageP) calc(60 * var(--v));
	margin: -1px auto 0;
	background: var(--Ctheme2);
}
#detail .texts
{
	max-width: calc(600 * var(--v));
	margin: 0 auto;
}
#detail h2{	margin: 0 auto calc(35 * var(--v));	}
#detail h2 span > span
{
	display: block;

	color: var(--Ctheme1);
	font-size: var(--fzv32);
	line-height: 1.5;
	letter-spacing: 0.05em;
}
#detail p span > span
{
	display: block;

	color: var(--Ctheme1);
	font-size: var(--fzv18);
	line-height: 2;
	letter-spacing: 0.05em;
}
#detail hr
{
	margin: calc(40 * var(--v)) 0;
	background: var(--Ctheme1);
}
#detail .MAP
{
	display: block;
	width: 100%;	height: calc(310 * var(--v));
}

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

#detail > .inner
{
	max-width: calc(600 * var(--v));
	padding: calc(280 * var(--v)) 0 calc(180 * var(--v));
}
#detail .texts{	max-width: calc(480 * var(--v));	}
#detail h2{	margin: 0 auto calc(50 * var(--v));	}
#detail h2 span > span{	font-size: var(--fzv26);	}
#detail p span > span{	font-size: var(--fzv15);	}

}


/* ================================================================================
MAP
================================================================================ */
@media print, screen
{

#MAP > .inner
{
	max-width: calc(750 * var(--v));
	margin: -1px auto 0;
	background: var(--Ctheme2);
}
#MAP iframe
{
	display: block;
	width: 100%;	height: calc(310 * var(--v));
	filter: grayscale(1);
}

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

#MAP > .inner{	max-width: calc(600 * var(--v));	}

}














/* ======================================== end ======================================== */