@charset "UTF-8";

#title
{
/*	min-height: min(50vh, calc(100vw * 3 / 5));*/
/*	min-height: 50vh;*/
	position: sticky;
	top: 0;
	background-color: rgb(245,245,245);
}

#title figure
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#title figure > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

#title .title
{
	font-family:  'R-M', 'GG-M', 'YU Gothic UI', 'Hiragino Sans', sans-serif;
	font-weight: 500;
	
	padding: clamp(2rem, 4vw, 4rem) 0 clamp(5rem, 10vw, 10rem);
	display: flex;
	justify-content: flex-start;
}

#title .title > div
{
	padding: clamp(1.5rem, 3vw, 3rem) max(2rem, calc(50vw - 460px + 2rem));
	background-color:white;
	min-width: 50vw;
}

#title .title > div:before
{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width:0;
	height: max(50%, 5rem);
	background-image: url(../_img/project_bg.svg);
	background-repeat: repeat-x;
	background-size: contain;

	transition: width 1s ease .5s;
}

#title.end .title > div:before
{
	width: 100%;
}

#title .title h1
{
	display: flex;
	flex-direction:column;
	font-size: clamp(1.5rem, 4vw, 3rem);
	margin: .25em 0;
}

#title .title p.cat > a
{
	font-family:  'R-B', 'GG-B', sans-serif;
	font-weight: 700;
	font-size: clamp(.8rem, 1.2vw, 1.2rem);
	border-bottom-width: 0;
}

#title .title p.subtitle
{
	font-size: clamp(1rem, 1.6vw, 1.4rem);
}

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

#contents
{
	padding-bottom: 0;
/*	transform:translateY(0);*/
}

.wp-block-group > div
{
	margin: 0 auto;
	padding: clamp(2rem, 4vw, 4rem) 2rem;
	width: 100%;
/*	max-width: 1120px;*/
	max-width: 920px;
}

.wp-block-group:nth-of-type(2n + 1)
{
	background-color: rgb(255, 255, 255);
}

.wp-block-group:nth-of-type(2n)
{
	background-color: rgb(245, 245, 245);
}

.wp-block-group:nth-of-type(2n) .wp-block-table td
{
	background-color: rgb(245, 245, 245);
}

.wp-block-group:nth-of-type(2n) .wp-block-table tr:nth-of-type(1) td
{
	background-color: rgb(255, 255, 255);
}

/********************************************************/
/*********************** Buttons ************************/
/********************************************************/

.wp-block-group:nth-of-type(2n + 1) + #buttons
{
	background-color: rgb(245, 245, 245);
}

.wp-block-group:nth-of-type(2n) + #buttons
{
	background-color: rgb(255, 255, 255);
}

#buttons > div
{
	margin: 0 auto;
	padding: clamp(2rem, 4vw, 4rem) 2rem clamp(4rem, 8vw, 8rem);
	width: 100%;
	max-width: 1120px;
	
	display: flex;
	flex-direction: column;
	align-items: center;
}


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

#contents:has(>*:nth-child(2n):last-child) + #footer
{
	background-color: rgb(255, 255, 255);
}

#contents:has(>*:nth-child(2n):last-child) + #footer:before
{
	background-image: url(../_img/project_bg.svg);
}


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

@media screen and (orientation: portrait)
{
/*	#title
	{
		min-height: calc(100vh - 100px);
	}*/
}