@charset "UTF-8";

#footer
{
	background-color: rgb(240, 240, 240);
}
body:after
{
	background-color: rgb(240, 240, 240);
}

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// Media /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#media
{
	margin: 0 auto max(10vw, 10rem);
	max-width: 1200px;
	display:flex;
	justify-content: space-between;
	align-items:flex-start;
}

#page_menu
{
	width: 15rem;
	padding-left: 2rem;
	position: sticky;
	top: 2rem;
	
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#page_menu a + a
{
	margin-top: 1em;
}

#page_menu a.dir
{
	line-height: 1.5;
	cursor: pointer;
	align-items: flex-start;
}

#page_menu a.dir.now > .dir
{
	background-color: rgb(0, 0, 0);
}
#page_menu a.dir.now > .dir:after
{
	border-color: rgb(255, 255, 255);
}

#page_menu a.dir > p
{
	margin-left: .5em;
	margin-right: 0;
}

#page_menu a.dir > p > span:nth-of-type(1)
{
	transform:translateX(-.5em);
}

#main
{
	width: calc(100% - 15rem);
	padding-left: max(5vw, 2rem);
	padding-right: 2rem;
}

/**********************************************************************/
/******************************* Desc ********************************/
/**********************************************************************/

#main >section + section
{
	margin-top: max(5rem, 5vw);
}

#main h2
{
	display:flex;
	flex-wrap:wrap;
	font-size: clamp(1.3rem, 6vw, 1.7rem);
	margin-bottom: 1em;
	border-bottom: 1px solid;
}

.contents
{
	padding-top: max(2rem, 2vw);
}

#main .contents + .contents
{
	margin-top: max(2rem, 2vw);
	border-top: 1px solid rgb(220, 220, 220);
}

#main h3
{
	font-size: clamp(1.1rem, 2vw, 1.15rem);
	margin-bottom: 1em;
	margin-bottom: .5em;
}

.contents .desc
{
	font-size: .9em;
	margin-bottom: 1em;
}

.contents .list
{
	font-family: R-R, GG-R, sans-serif;
	font-size: .9em;
	color: rgb(75, 75, 75);
}

.contents .list table
{
	width: 100%;
}

.contents .list table td
{
	padding: .5em;
	line-height: 1.35;
}

.contents .list table td:nth-of-type(1)
{
	width: max(5vw,5rem);
	color: rgb(100, 100, 100);
}

.contents .list tr:nth-of-type(2n) td
{
	background-color: rgb(250, 250, 250);
}

.contents .list tr:nth-of-type(2n+1) td
{
	background-color: rgb(240, 240, 240);
}

.imgLink
{
	cursor:pointer;
}


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

@media screen and (max-width: 900px)
{
	#media
	{
		flex-direction: column;
	}
	#page_menu
	{
		width: 100%;
		flex-direction: row;
		justify-content: center;
		margin-left: -1em;
		flex-wrap: wrap;
		position: relative;
		margin-bottom: max(5rem, 5vw);
	}
	#page_menu a.dir
	{
		margin-top: 1em;
		margin-left: 1em;
	}
	#main
	{
		width: 100%;
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 600px)
{
	.contents .list table td
	{
		display:block;
	}
	.contents .list table td:nth-of-type(1)
	{
		width: 100%;
		padding-bottom: 0;
	}
}