@charset "utf-8";
/* CSS Document */

#wrap											{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; width:100%; height:100%; }
.header											{ position:absolute; top:3.13em; left:0; padding:0 8.75em; width:100%; background:none }
.header	h1										{ width:295px; height:45px; background:url(/resource/museum/images/img_logo.png) no-repeat 50% 50% / cover; }
.intro_wrap										{ width:100%; height:100svh; overflow:hidden; position:relative;}
.intro_wrap .intro_box							{ position:absolute; top:0; width:62.5%; height:100%; display:inline-block; transition:cubic-bezier(0.77, 0.02, 0.18, 1) 0.4s; }
.intro_wrap .intro_box:nth-of-type(1)			{ left:0; z-index:0; }
.intro_wrap .intro_box:nth-of-type(2)			{ left:33.333%; z-index:1; }
.intro_wrap .intro_box:nth-of-type(3)			{ left:66.666%; z-index:2; }
.intro_wrap .intro_box .bg	 					{ position:absolute; width:100%; height:0; left:0; bottom:0; background-image:url(/resource/museum/images/bg_visual.png); background-repeat:no-repeat; background-position:50% 50%; mask-repeat:no-repeat;
													background-size:cover; -webkit-mask-image:url(/resource/museum/images/bg_visual.png); mask-image:url(/resource/museum/images/bg_visual.png); z-index:3; transition:height ease .5s; mask-size:cover; mask-position:50% 50%; }
.intro_wrap .intro_box.active .bg				{ height:100%; }
.intro_wrap .intro_box .img						{ position:absolute; width:100%; height:100vh; top:0; overflow:hidden; min-height:350px; -webkit-filter:grayscale(100%) brightness(50%); filter:grayscale(100%) brightness(50%); filter:grayscale(100%);
 													filter:gray; -webkit-filter: grayscale(1); }
.intro_wrap .intro_box .img::before				{ position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,.7); content:''; z-index:2; }
.intro_wrap .intro_box .img img,
.intro_wrap .intro_box .bg img					{ position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); 
													-moz-transform:translate(-50%,-50%); object-fit:cover; -o-object-fit:cover; z-index:1; transition:all ease .5s;}
.intro_wrap .intro_box .tit						{ position:absolute; width:53.333%; top:50%; text-align:center; font-size:2.19em; color:var(--color-white); z-index:3; transform:translateY(-50%); transition:all 0.4s ease; font-weight:bold; }
.intro_wrap .intro_box.active .tit				{ margin-top:-3.13em; opacity:0; transition:all 0.2s ease;}
.intro_wrap .intro_box .cont					{ width:100%; position:absolute; top:1%; left:0; opacity:0; transition:all 0.2s ease; z-index:5; padding:8.75em; color:var(--color-white) }
.intro_wrap .intro_box .cont dl					{ display:flex; flex-flow:column; gap:10px;}
.intro_wrap .intro_box .cont dl>dt				{ font-size:2.5em; font-weight:bold; }
.intro_wrap .intro_box .cont dl>dd				{ font-size:1.25em; font-weight:600; }
.intro_wrap .intro_box .cont .more				{ position:relative; display:flex; width:2.5em; height:2.5em; border-radius:100%; border:1px solid var(--color-white); margin-top:3.75em; transition:all ease .3s;}
.intro_wrap .intro_box .cont .more::before		{ position:absolute; width:100%; height:100%; left:0; top:0; content:''; background:url(/resource/www/images/main/icon_readmore.svg) no-repeat 50% 50% / 15px 9px; filter:invert(1);}
.intro_wrap .intro_box .cont .more:hover		{ background:var(--color-white); animation:iconShow 0.7s ease-in-out 1 forwards; }
.intro_wrap .intro_box .cont .more:hover::before{filter:initial;}
.intro_wrap .intro_box.active .cont				{ top:3%; opacity:1; transition:all 0.2s ease; }

@media all and (max-width:1768px) {
	.intro_wrap .intro_box .tit					{ font-size:2.09em; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:2.4em; }
	.intro_wrap .intro_box .cont dl>dd			{ font-size:1.15em; }
	.intro_wrap .intro_box .cont .more			{ margin-top:3.5em; }
}
@media all and (max-width:1668px) {
	.header										{ padding:0 8em; }
	.header	h1									{ width:275px; height:42px; }
	.intro_wrap .intro_box .cont				{ padding:8em; }
	.intro_wrap .intro_box .tit					{ font-size:1.99em; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:2.2em; }
	.intro_wrap .intro_box .cont dl>dd			{ font-size:1.05em; }
	.intro_wrap .intro_box .cont .more			{ margin-top:3em; }
}
@media all and (max-width:1568px) {
	.header										{ padding:0 7em; top:2.75em; }
	.header	h1									{ width:275px; height:42px; }
	.intro_wrap .intro_box .cont				{ padding:7em; }
	.intro_wrap .intro_box .tit					{ font-size:1.89em; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:2em; }
	.intro_wrap .intro_box .cont .more			{ margin-top:2.75em; }
	.intro_wrap .intro_box.active .cont			{ top:4%; }
}
@media all and (max-width:1468px) {
	.header										{ padding:0 6em; top:2.5em; }
	.header	h1									{ width:249px; height:38px; }
	.intro_wrap .intro_box .cont				{ padding:6em; }
	.intro_wrap .intro_box .tit					{ font-size:1.69em; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:1.9em; }
	.intro_wrap .intro_box .cont .more			{ margin-top:2.5em; }
}
@media all and (max-width:1368px) {
	.header										{ padding:0 4em; top:2em; }
	.header	h1									{ width:229.5px; height:35px; }
	.intro_wrap .intro_box .cont				{ padding:4em; }
	.intro_wrap .intro_box .tit					{ font-size:1.4em; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:1.8em; }
	.intro_wrap .intro_box .cont .more			{ margin-top:2em; }
	.intro_wrap .intro_box.active .cont			{ top:10%; }
}
@media all and (max-width:1024px) {
	.header										{ padding:0 2em; top:2em; }
	.header	h1									{ width:197px; height:30px; }
	.intro_wrap .intro_box .cont				{ padding:2em; }
	.intro_wrap .intro_box .tit					{ font-size:1.2rem; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:1.4rem; }
	.intro_wrap .intro_box.active .cont			{ top:12%; }
}
@media all and (max-width:968px) {
	.intro_wrap .intro_box .tit					{ font-size:1.167rem; }
}
@media all and (max-width:868px) {
	#wrap										{ height:inherit; }
	.intro_wrap									{ height:inherit; overflow:inherit; display:flex; flex-flow:column;}
	.intro_wrap .intro_box						{ position:relative; left:inherit !important; top:inherit; width:100%; height:0; padding-top:86.666%; overflow:hidden }
	.intro_wrap .intro_box .tit					{ display:none; }
	.intro_wrap .intro_box .cont				{ opacity:1; top:5em; }
	.intro_wrap .intro_box.active .cont			{ top:5em; }
	.intro_wrap .intro_box .bg					{ height:100%; }
	.intro_wrap .intro_box:nth-of-type(2) .cont,				
	.intro_wrap .intro_box:nth-of-type(3) .cont,
	.intro_wrap .intro_box:nth-of-type(2).active .cont,				
	.intro_wrap .intro_box:nth-of-type(3).active .cont	{ top:2em; }
}
@media all and (max-width:568px) {
	.intro_wrap .intro_box						{ padding-top:106.666%; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:1.3rem; }
}
@media all and (max-width:368px) {
	.intro_wrap .intro_box						{ padding-top:126.666%; }
	.intro_wrap .intro_box .cont dl>dt			{ font-size:1.267rem; }
}
@media all and (max-width:320px) {
	.intro_wrap .intro_box						{ padding-top:166.666%; }
}