@charset "UTF-8";

#header_link h2
{
	margin-right: 0;
}

#top
{
	width: 100%;
	max-width: calc(920px + 4rem);
	margin: 0rem auto;
	padding: 5rem 2rem 0rem 4rem;
	overflow: hidden;
}

#top .slide
{
	width: calc(100%);
	flex-grow: 1;
	aspect-ratio: 1200 / 800;
}

#top .slide .slideWrapper
{
	width:100%;
	height: 100%;
}

/**********************************************************************/
/***************************Curent Exhibition **************************/
/**********************************************************************/

#curent_exhi
{
	margin: 5rem auto;
	max-width: calc(1280px + 4rem);
	padding: 0rem 2rem 0rem 4rem;
}

.secTitle > h2
{
	font-size: clamp(1.1rem, 5vw, 1.2rem);
}

.curent_exhi + .curent_exhi
{
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid rgb(200, 200, 200);
}

.curent_exhi .venue
{
	display:flex;
	align-items:flex-end;
	justify-content: space-between;
	margin-top: 2rem;
	font-size: clamp(1.0rem, 1.75vw, 1.5rem);
}

.curent_exhi .venue ._figure
{
	width: calc(50% - 2rem);
}

.curent_exhi .venue .text
{
	width: calc(50% - 2rem);
}

.venue figure
{
	width: 100%;
	aspect-ratio: 1200 / 800;
	overflow: hidden;
	border: 1px solid rgb(240, 240, 240);
}
.venue figure img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

body:not(.touch) .venue ._figure:hover img
{
	transform: scale(1.05);
}

.venue h2
{
	font-size: 1.25em;
	line-height: 1.5;
}

.venue h2 > span
{
	display:block;
}

.venue h2 > span + span
{
	margin-top: .25em;
}

.venue h2 > span.sub_title,
.venue h2 > span.catch
{
	font-size: .75em;
}

.venue .date_status
{
	display: flex;
	flex-wrap:wrap;
	align-items:center;
	margin-bottom: .5em;
}

.venue .date
{
	margin-left: 1em;
	font-family: 'EG-M', serif;
	font-weight: 500;
}

.venue .status
{
	font-size: max(.9rem,.75em);
	font-family: 'Roboto-M', 'GG-M', sans-serif;
	font-weight: 550;
	color:rgb(255, 255, 255);
	background-color:rgb(46, 91, 48);
	padding: .5em 1em;
	line-height: 1;
	border-radius:1em;
}

.venue .status.open
{
	background-color:rgb(180, 50, 50);
}
.venue .status.exhi
{
	background-color: rgb(50, 50, 50);
}

.venue .desc
{
	font-family: 'Zen-B', serif;
	font-weight: 700;
	font-size: 1rem;
}

.venue .desc._b
{
	font-size: .75em;
	margin-top: .5em;
}

.venue .more_bt
{
	margin-top: 1em;
}


/**********************************************************************/
/*****************************Past Exhibition **************************/
/**********************************************************************/

#past
{
	background-image: url(https://ko.dougukan.jp/_img/bg.jpg);
	background-size:75%;
	background-position: 50%;
	padding: 5rem 0 0;
}

#header_link + #past
{
	background-image: none;
}

#past .secTitle
{
	display: flex;
}

.customSlector
{
	margin: .5em 0em .5em 2em;
	font-size: 1em;
}

.customSlector label
{
	display:flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin-bottom: .25rem;
	padding: .5rem 1rem;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgb(200, 200, 200);
	cursor: pointer;
	border-radius: 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}
.customSlector label:before
{
	content: "";
	position: absolute;
	width: .4em;
	height: .4em;
	
	top: 50%;
	right: 1em;
	display: block;
	margin-top: -.3em;
	
	border-color: rgb(0, 0, 0);
	border-style: solid;
	border-width: 0 1px 1px 0;
	
	transform: rotate( 45deg );
	-ms-transform: rotate( 45deg );
}

.customSlector label > p
{
	font-size: .9rem;
	line-height: 1;
	margin-right: 1rem;
}

.customSlector select
{
	display: block;
	position: absolute;
	z-index: 2;
	overflow: hidden;
	opacity: 0;
	width: 100%;
	height: 2rem;
	top: 0em;
	left: 0em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	background: transparent;
}
.customSlector select:focus
{
	outline: none;
}

::-ms-expand
{		/* select要素のデザインを無効にする（IE用） */
	display: none;
}

#past .past_wrapper
{
	display: flex;
	flex-wrap:wrap;
	margin: -1rem;
}

#past .venue
{
	width: calc(100% / 5 - 2rem);
	margin: 2rem 1rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgb(150, 150, 150);
}

#past .venue .text
{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	flex-grow: 1;
}

#past .venue h2
{
	font-family: 'Roboto-M', 'GG-M', sans-serif;
	font-weight: 550;
	font-size: 1rem;
}

#past .venue .date
{
	font-family: 'Roboto-M', 'GG-M', sans-serif;
	font-weight: 550;
	margin-left: 0;
}

#past .venue figure
{
	width: 100%;
	aspect-ratio: 300 / 424;
	overflow: hidden;
	margin-bottom: 1rem;
	border: 1px solid rgb(240, 240, 240);
}

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

@media screen and (max-width: 1200px)
{
	#past .venue
	{
		width: calc(100% / 4 - 2rem);
	}
}

@media screen and (max-width: 1020px)
{
	#past .venue
	{
		width: calc(100% / 3 - 2rem);
	}
}

@media screen and (max-width: 850px)
{
	#curent_exhi
	{
		padding: 0 2rem;
	}

	.curent_exhi .venue
	{
		flex-direction: column;
		align-items: center;
	}
	
	.curent_exhi .venue ._figure,
	.curent_exhi .venue .text
	{
		width: 100%;
	}
	
	.curent_exhi .venue .text
	{
		margin-top: 2rem;
	}
}

@media screen and (max-width: 820px)
{
	#past .venue
	{
		width: calc(100% / 2 - 2rem);
	}
}

@media screen and (max-width: 600px), (max-height: 600px)
{
	#top
	{
		padding: 5rem 0rem 0rem 0rem;
	}

	#past .secTitle
	{
		flex-direction:column;
		align-items:flex-start;
	}
	.customSlector
	{
		margin: 2em 0em .5em 0em;
	}
}