@charset "UTF-8";



/*****************************************************************
***************************** SLIDER *****************************
******************************************************************/

#slideContainer
{
	position: sticky;
	width:100%;
	height: calc(100vh + min(10vh, 10vw));
	top:0;
	z-index: 0;
}

#attention
{
	position:absolute;
	bottom: 2rem;
	right: 2rem;
	z-index: 10;
	line-height: 1.3;
	font-size: .9em;
	max-width:calc(100% - 4rem);
}

#attention_l
{
	position:absolute;
	display:flex;
	align-items:center;
	justify-content: center;
	width: 100%;
	height:100%;
	top: 0;
	left: 0;
	padding: 2rem;
	font-family: 'Roboto-M', 'GG-M', sans-serif;
	font-weight: 550;
}

#attention_l .att_wrapp,
#attention .att_wrapp
{
	padding: .5em 1em 1em;
	background-color: rgba(255, 255, 255, 1);
	z-index: 10;
	line-height: 1.3;
	font-size: .9em;
	max-width: 1020px;
	width: 100%;
}

#attention_l .att_wrapp
{
	padding: 1em 1em 1.5em;
}

.attention
{
	overflow-y:auto;
}

.attention > div > div
{
	padding-top: .5em;
	padding-left: .8em;
}
.attention > div > div:before
{
	content:"";
	display:block;
	position:absolute;
	left: 0;
	top: .8em;
	width: .5em;
	height: .5em;
	background-color: rgb(180, 50, 50);
	border-radius: 50%;
}

.attention > div > div + div
{
	margin-top: .5em;
	border-top: 1px solid;
}

.att_wrapp .close
{
	cursor:pointer;
	position:absolute;
	top: -1rem;
	right: -1rem;
	width: 2rem;
	aspect-ratio: 1 / 1;
	background-color: rgb(50, 50, 50);
	border-radius: 50%;
	border: 5px solid rgb(50, 50, 50);

	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
body:not(.touch) .att_wrapp .close:hover
{
	background-color: rgb(100, 100, 100);
	border-color: rgb(100, 100, 100);
}

.att_wrapp .close:after,
.att_wrapp .close:before
{
	content:"";
	display:block;
	position:absolute;
	top:calc(50% - .5px);
	left:0;
	width: 100%;
	height:1px;
	transform-origin:center;
	background-color:rgb(255, 255, 255);
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.att_wrapp .close:after
{
	transform:rotate(45deg);
}
.att_wrapp .close:before
{
	transform:rotate(135deg);
}

/*.att_cl .att_wrapp .close:after
{
	transform:rotate(0deg);
}
.att_cl .att_wrapp .close:before
{
	transform:rotate(90deg);
}

.att_cl .attention
{
	overflow:hidden;
	width: 0;
	height: 0;
	padding: 0;
}

#attention_l.att_cl .att_wrapp,
#attention.att_cl .att_wrapp
{
	overflow:visible;
	width: 0;
	height: 0;
	padding: 0;
	
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

#attention_l.att_cl .att_wrapp
{
	position:absolute;
	right: 2rem;
	bottom: 10rem;
}

.att_cl .att_wrapp .close
{
	background-color: rgb(180, 50, 50);
	border: 5px solid rgb(180, 50, 50);
}
*/

#attention_l.att_cl ,
#attention.att_cl
{
	display: none;
}

/*****************************************************************
*************************** EXHIBITION ***************************
******************************************************************/

#exhibitions
{
	width: 100%;
	background-image: url(https://ko.dougukan.jp/_img/bg.jpg);
	background-size:75%;
	background-position: 50%;
	
	font-family: 'Zen-R', serif;
	font-weight: 400;
	
	z-index: 1;
}

#exhibitions .secTitle_wrapper
{
	display:flex;
	margin: 0 auto;
	max-width: calc(1500px + 4rem);
	justify-content:space-between;
	
	padding: 5rem 2rem 0rem 4rem;
}

#exhibitions .secTitle
{
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 3rem;
}

#exhi_dir
{
	margin-top: 2rem;
	margin-bottom: -1rem;
	font-family: 'EG-M', serif;
	font-weight: 500;
}

#exhibitions > .container
{
	display:flex;
	align-items:flex-end;
	justify-content: space-between;
	
	width: 100%;
	max-width: calc(1500px + 4rem);
	padding: 0rem 2rem 5rem 4rem;
	margin: 0 auto;
}

#exhibitions > .container .text
{
	width: calc(50% - 2rem);
}
#ex_img
{
	width: calc(50% - 2rem);
	aspect-ratio: 1200 / 800;
	overflow:hidden;
}

#ex_banner
{
	width: 100%;
	height: 100%;
}

#ex_banner .dragger
{
	cursor:pointer;
}

#sumi
{
	width: 100%;
	max-width: 350px;
	aspect-ratio: 600/250;
}

#ex_venue
{
	width: 100%;
	overflow:hidden;
}

#ex_venue > div
{
	display:flex;
	flex-wrap:nowrap;
	align-items:flex-end;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.venue
{
	font-size: clamp(1.0rem, 1.75vw, 1.5rem);
}

.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;
}

/*****************************************************************
****************************** NEWS *****************************
******************************************************************/

#news
{
	width: 100%;
	background-color: rgb(255, 255, 255);
	padding: 5rem 2rem 0rem 4rem;
	z-index:1;
}

#news > div
{
	margin: 0 auto;
	width: 100%;
	max-width: 1500px;
}

#news td
{
	position:relative;
	border-bottom: 1px solid rgba(50, 50, 50, 1);
	padding: 1rem 0rem 1rem 1rem;
	font-size: 1rem;
}

#news td > a
{
	font-family: "R-M", "GG-M", sans-serif;
	font-weight: 550;
	display:flex;
	flex-wrap:nowrap;
	justify-content: space-between;
	border-bottom-width: 0px;
	text-decoration:none;
	color: rgb(50, 50, 50);
}
#news td > a span.dir
{
	width: 1.5rem;
	margin-left: 1rem;
	flex-shrink: 0;
	display:flex;
	align-items:center;
	transform:translateX(-.5rem);
	
	transition-delay: 3s;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
#news td > a span.dir:after,
#news td > a span.dir:before
{
	content:"";
	display:block;
}

#news td > a span.dir:before
{
	width:100%;
	height:1px;
	background-color: rgb(50, 50, 50);
}

#news td > a span.dir:after
{
	background-size:cover;
	background-position:50%;
	width:12px;
	aspect-ratio: 9 / 12;
	background-image:url(https://ko.dougukan.jp/_img/anchor.svg);
}

body:not(.touch) #news td > a:hover span.dir
{
	transform:translateX(0rem);
}

#news td div.cont
{
	display:flex;
	align-items: flex-start;
	line-height: 1.5;
/*	flex-wrap:wrap;*/
}

#news td span.tag
{
	font-size: .9em;
	font-family: 'GG-M', sans-serif;
	font-weight: 550;
	line-height: 1;
	display: inline-block;
	padding: .25em 1em;
	margin-right: 1em;
	background-color: rgb(50, 50, 50);
	color: rgb(255, 255, 255);
	border-radius: 1em;
	white-space:nowrap;
	transform: translateY(.2em);
}

#news td span.tag._imp{background-color: rgb(138, 51, 50);}
#news td span.tag._exhi{background-color: rgb(65, 91, 54);}
#news td span.tag._evt{background-color: rgb(194, 114, 59);}
#news td span.tag._info{background-color: rgb(68, 78, 143);}
#news td span.tag._other{background-color: rgb(100, 100, 100);}

#news td:first-child
{
	padding: 1rem 0rem;
	font-size: .9em;
	border-bottom-color: rgba(50, 50, 50, 1);
}

#news td + td:after,
#news_all:after
{
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:-1px;
	height:1px;
	width: 100%;
	border-bottom-color: rgba(50, 50, 50, 1);
	transform:scaleX(0);
	transform-origin: top left;
	
	-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) #news table tr td + td:hover:after,
body:not(.touch) #news_all:hover:after
{
	transform:scaleX(100%);
}

#news_all
{
	cursor:pointer;
	font-family: optima;
	font-weight: 400;
	color:rgb(50, 50, 50);
	display: inline-block;
	margin-top: 2rem;
	padding-right:2rem;
	border-bottom:1px solid rgb(210, 210, 210);
}

#news .news_wrapper
{
	display:flex;
}

#kanna
{
	width: 20%;
	min-width: 280px;
	aspect-ratio: 380/400;
	margin-left: 4rem;
	transform:translateY(-100px);
}

/*****************************************************************
************************** PHOTO SLIDER **************************
******************************************************************/

#photos
{
	position:sticky;
	top:0;
	width: 100%;
	background-color: rgb(255, 255, 255);
	padding: 10rem 0 20rem;
}

#slide_linear
{
	width: 100%;
	overflow: hidden;
}

/*****************************************************************
***************************** TOPICS *****************************
******************************************************************/

#topics
{
	position:sticky;
	top:0;
	width: 100%;
	background-color: rgb(255, 255, 255);
}

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

#topics .secTitle_wrapper
{
	display:flex;
	margin: 0 auto;
	max-width: calc(1500px + 4rem);
	padding: 0 2rem 0 4rem;
	justify-content:space-between;
}

#topics .secTitle_wrapper > div
{
	display:flex;
}

#topics .secTitle_wrapper > div:first-child
{
	flex-grow: 1;
}

#topics .secTitle
{
	flex-direction: column;
}

#topisc .page_dir
{
	margin-bottom: 3rem;
}

#evnt_wrapper
{
	width: 100%;
	display: flex;
	justify-content:flex-start;
	overflow: hidden;
}

#evnt_wrapper > div
{
	display: flex;
	justify-content:center;
	flex-wrap:nowrap;
	flex-grow: 1;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

#evnt_wrapper .evnt
{
	display: flex;
	flex-direction: column;
	background-color:rgb(255, 255, 255);
	width: 300px;
	margin: 20px;
}

#evnt_wrapper .evnt figure
{
	width: 100%;
	aspect-ratio: 500 / 330;
	overflow: hidden;
}

#evnt_wrapper .evnt figure img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

body:not(.touch) #evnt_wrapper .evnt .fig:hover figure img
{
	transform: scale(1.1);
}

#evnt_wrapper .evnt .info
{
	display:block;
	padding: 1rem;
	flex-grow:1;
	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

body:not(.touch) #evnt_wrapper .evnt .info:hover
{
	background-color: rgb(240, 240, 240);
}

#evnt_wrapper .evnt .status
{
	display:flex;
	flex-wrap:wrap;
	font-size: .9rem;
	font-family: 'GG-M', sans-serif;
	font-weight: 550;
	margin: -.25em;
}
#evnt_wrapper .evnt .status span
{
	line-height: 1;
	display: inline-block;
	padding: .25em 1em;
	margin: .25em;
	background-color:rgb(180, 50, 50);
	color: rgb(255, 255, 255);
	border-radius: 1em;
	white-space:nowrap;
	transform: translateY(.25em);
}

#evnt_wrapper .evnt .info .date
{
	margin: .5em 0;
}

#evnt_wrapper .evnt .info .date + p
{
	font-family: "R-M", "GG-M", sans-serif;
	font-weight: 550;
	font-size: 1rem;
	line-height: 1.5;
}

#noko
{
	width: 100%;
	max-width: 350px;
	aspect-ratio: 600/400;
	margin-bottom: 2rem;
	margin-left: 4rem;
}


/*****************************************************************
*************************** INFORMATION **************************
******************************************************************/

#information
{
	width: 100%;
	background-color: rgb(255, 255, 255);
	padding: 5rem 2rem 5rem 4rem;
}
#information .main
{
	max-width: 1500px;
	margin: 0 auto;
}

#information .content,
#information .content > div > div
{
	display:flex;
}

#information .text
{
	margin-right: 2rem;
}

#information h4
{
	font-family: 'GG-M', sans-serif;
	font-weight: 550;
	margin-bottom: .5em;
}
#information .text h4
{
	border-bottom: 1px solid;
	padding-bottom: .25em;
}

#information .text p + h4
{
	margin-top: 1em;
}

#information .text > p
{
	font-size: .9em;
}
#information .text > p,
#information .text > p >span
{
/*	white-space:nowrap;*/
	display:block;
}

#information .map
{
	flex-grow: 1;
}
#information .map iframe
{
	width: 100%;
	aspect-ratio: 2 / 1;
}

#sashi
{
	width: 100%;
	max-width: 225px;
	aspect-ratio: 300 / 480;
	margin-top: 2rem;
}

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

@media screen and (max-width: 980px)
{
	#information .content
	{
		flex-direction: column;
	}
	#information .content > div:first-child
	{
		display:flex;
		margin-bottom: 3rem;
		justify-content: space-between;
	}
	#sashi
	{
		margin-top: -8rem;
	}
}

@media screen and (max-width: 850px)
{
	#exhibitions .secTitle_wrapper > div:first-child,
	#topics .secTitle_wrapper > div:first-child
	{
		flex-direction: column;
		align-items: flex-start;
	}

	#sumi
	{
		margin-bottom: 2rem;
		margin-right: auto;
		margin-left: auto;
		width: calc(100% - 4rem);
	}
	#exhibitions .secTitle_wrapper
	{
		flex-direction:column-reverse;
	}

	#exhibitions > .container
	{
		flex-direction:column;
		align-items: center;
	}
	
	#exhibitions > .container .text,
	#ex_img
	{
		width: 100%;
		max-width: 650px;
	}

	.venue .desc._b
	{
		font-size: 1rem;
	}
	
	#exhibitions > .container .text
	{
		margin-top: 2rem;
	}
	
	#ex_venue > div
	{
		align-items:flex-start;
	}
	
	
	#news .news_wrapper
	{
		flex-direction:column;
		align-items: center;
	}
	#news td div.cont
	{
		flex-direction:column;
	}
	#news td span.tag
	{
		display:block;
	}
	
	#kanna
	{
		width: calc(100% - 4rem);
		min-width: auto;
		max-width: 300px;
		margin-top: 3rem;
		margin-right: auto;
		margin-left: auto;
		transform:translateY(0);
	}

	#topics .main .text
	{
		width: 100%;
		max-width: 650px;
		margin-right: 0rem;
	}
	
	#news td > a._a div.cont
	{
		align-items: flex-start;
		flex-direction: column;
	}
	#news td > a._a
	{
		padding-left: 0;
	}
	#news td span.tag
	{
		white-space:normal;
		margin-right: 0;
		margin-bottom: .5em;
	}

	#news td
	{
		display: block;
	}
	#news td:first-child
	{
		border-bottom-width: 0;
		padding-bottom: 0;
	}
	#news td:nth-child(2)
	{
		border-top-width: 0;
		padding-top: .5em;
		padding-left: 0;
	}
}

@media screen and (max-width: 750px)
{
	#information .content > div > div
	{
		flex-direction:column;
	}
	#information .text + .text
	{
		margin-top: 1rem;
	}
	#sashi
	{
		margin-top: -5rem;
		width: calc(100% - 4rem);
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (max-width: 600px), (max-height: 600px)
{
	#attention
	{
		bottom: 5rem;
	}
	
	#news td > div
	{
		flex-direction:column;
	}
	#news td div > span
	{
		margin-bottom: 1em;
	}
	
	#noko
	{
		margin-right: auto;
		margin-left: auto;
		width: calc(100% - 4rem);
	}
	
	#exhibitions .secTitle_wrapper
	{
		padding: 5rem 2rem 0rem 2rem;
	}
	#exhibitions > .container
	{
		padding: 0rem 2rem 5rem 2rem
	}
	
	#news
	{
		padding:5rem 2rem 0rem 2rem;
	}
	
	#topics .secTitle_wrapper
	{
		padding: 0 2rem;
	}
	#topics .main
	{
		padding:5rem 0rem 5rem 0rem;
	}

	#information
	{
		padding: 5rem 2rem 5rem 2rem;
	}
}

@media screen and (max-width: 500px)
{
	#evnt_wrapper > div
	{
		display: flex;
		flex-direction: column;
		flex-wrap:nowrap;
		flex-grow: 1;
		width: 100%;
	}
	
	#evnt_wrapper .evnt
	{
		width: calc(100% - 4rem);
		margin: 2rem;
	}
	
	#information .content > div:first-child
	{
		flex-direction:column-reverse;
	}
	#information .text
	{
		margin-right: 0;
	}
	#kanna
	{
		height: 30vh;
		width: auto;
	}
	#sashi
	{
		margin-top: 0rem;
		margin-bottom: 2rem;
		width:auto;
		height: 30vh;
	}
	
}