@charset "UTF-8";

#selector
{
	top: -50vh;
}

.menu #selector
{
	top: 0;
}

.max_page_width
{
	max-width: 1120px;
}

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// TOP /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#top
{
	position:sticky;
	top: 0;
}

#top h1
{
	display: none;
}

#top .pattern
{
	position: absolute;
	width: 100%;
	height: 100%;
}

#top .pattern + .pattern
{
	overflow: hidden;
	mask-image: url(../_img/mask_copy.svg);
	mask-size: min(80vw, 50rem);
	mask-mode: alpha;
	mask-repeat: no-repeat;
	mask-position: 50% 50%;
}

#top .pattern > div
{
	height: calc(100% / 1 / 3);
	background-size: cover;
	background-repeat: repeat-x;
}

#top .pattern:nth-of-type(1) > div
{
	background-image: url(../_img/bg_2.svg);
}
#top .pattern:nth-of-type(2) > div
{
	background-image: url(../_img/bg_1.svg);
}

#top .pattern > div:nth-of-type(1),
#top .pattern > div:nth-of-type(3)
{
	animation: movbg_r 120s linear infinite;
}

#top .pattern > div:nth-of-type(2)
{
	animation: movbg_l 120s linear infinite;
}

@keyframes movbg_r
{
	0%
	{
		background-position: 0% 0%;
	} 
	100%
	{
		background-position: -2934px 0%;
	} 
}

@keyframes movbg_l
{
	0%
	{
		background-position: 0% 0%;
	} 
	100%
	{
		background-position: 2934px 0%;
	} 
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////// Contents /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#contents
{
	background-color: rgb(245, 245, 245);
	padding-bottom: clamp(4rem, 8vw, 8rem);
}

#contents h2 > a
{
	border-bottom-width: 0;
}

#contents > section
{
	padding-top: clamp(2rem, 4vw, 4rem);
}

#contents > section > div
{
	display: flex;
	flex-wrap:wrap;
	margin: 0 clamp(-1rem, -1vw, -.5rem);
}

#contents > section > h2
{
	font-family:  'R-M', 'GG-M', 'YU Gothic UI', 'Hiragino Sans', sans-serif;
	font-weight: 500;
}

/********************************************************/
/*********************** Navigate ***********************/
/********************************************************/

#navigate h2.subtitle,
#navigate a.tile
{
	width: calc(25% - clamp(1rem, 2vw, 2rem));
}

#navigate a.tile
{
	aspect-ratio: 1 / 1;
}

#navigate h2.subtitle
{
	font-size: clamp(1em, 5vw, 1.5em);
	margin: clamp(.5rem, 1vw, 1rem);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	max-height: 5em;
}

/********************************************************/
/************************* News *************************/
/********************************************************/

#news .cont
{
	margin: clamp(1rem, 2vw, 2rem) 0 0;
}

/********************************************************/
/************************ Footer *************************/
/********************************************************/

#allWrapper:after
{
	background-color: rgb(255, 255, 255);
}

#footer
{
	background-color: rgb(255, 255, 255);
}

#footer:before
{
	background-image: url(../_img/project_bg.svg);
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 850px)
{
	#navigate h2.subtitle,
	#navigate a.tile
	{
		width: calc(50% - clamp(1rem, 2vw, 2rem));
	}
	#navigate a.tile
	{
		aspect-ratio: 5 / 3;
	}
}

@media screen and (max-width: 350px)
{
	#navigate h2.subtitle,
	#navigate a.tile
	{
		width: calc(100% - clamp(1rem, 2vw, 2rem));
	}
	#navigate a.tile
	{
		aspect-ratio: 5 / 3;
	}
	
	#navigate h2.subtitle
	{
		font-size: 1.5em;
	}
}

@media (orientation: portrait)
{
	#top .pattern + .pattern
	{
		mask-image: url(../_img/mask_copy_v.svg);
		mask-size: min(calc(65vh * 200 / 450), 50rem);
	}
}