@charset "UTF-8";

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

#top .slide_text
{
	width: 100%;
	display:flex;
	align-items: flex-start;
}

#top .slide
{
	width: calc(100% - 20rem);
	flex-grow: 1;
	aspect-ratio: 3 / 2;
}

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

#top .text
{
	width: 20rem;
	display:flex;
	flex-direction:column;
	flex-grow: 0;
}

#top .text h1
{
	margin-bottom: 1.5em;
}

#cont_list
{
	font-size: clamp(1.2rem, 3vw, 1.5rem);
	display:flex;
	flex-direction:column;
	margin-right: 5rem;
}

body.en #top .slide
{
	width: calc(100% - 35rem);
}
body.en #top .text
{
	width: 35rem;
}

body:not(.ja) #cont_list
{
	font-size: clamp(1rem, 2vw, 1.2rem);
}

#cont_list ul
{
	list-style:none;
}

#cont_list li
{
	padding: .5rem 0;
	border-bottom: 1px solid rgb(150, 150, 150);
}

#cont_list a._dir
{
	font-family: 'Zen-B', serif;
	font-weight: 700;
	flex-wrap:nowrap;
}

#cont_list a._dir p
{
	display:flex;
}

#cont_list a._dir p,
#cont_list a._dir span
{
/*	white-space:nowrap;*/
}
#cont_list a._dir span.num
{
	margin-right: 1em;
}

#top .desc
{
	column-count: 2;
	column-gap: 4rem;
	column-rule: 1px solid rgb(200,200,200);
	margin: 3rem 0;
}

/**********************************************************************/
/***************************** Exhibition *******************************/
/**********************************************************************/

.exhi_cont
{
	overflow:hidden;
	padding: 3rem 0 3rem;
}

.exhi_cont:nth-child(2n + 1)
{
	background-image: url(https://ko.dougukan.jp/_img/bg.jpg);
	background-size:75%;
	background-position: 50%;
}

.exhi_cont .text_photo
{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	width: 100%;
	max-width: calc(1280px + 4rem);
	margin: 0rem auto 3rem;
	padding: 0rem 2rem 0rem 4rem;
}

.exhi_cont .text
{
	width: 30%;
	min-width: 20rem;
}

.exhi_cont .text_photo figure
{
	width: min(calc(70% - 5rem), calc(100% - 24rem));
}

.exhi_cont figure img
{
	width: 100%;
}

.exhi_cont .secTitle
{
	align-items: flex-start;
	margin-bottom: 3rem;
	flex-direction: column;
}

.exhi_cont .secTitle .num
{
	font-size: clamp(2rem, 5vw, 2.5rem);
	font-family: 'Zen-B', serif;
	font-weight: 700;
}

.exhi_cont .secTitle h3
{
	font-size: clamp(1.5rem, 4vw, 2rem);
	line-height: 1.3;
	padding-bottom: .5em;
}

body:not(.touch) .bannerLinear .photoWrapper
{
	cursor:pointer;
	-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) .bannerLinear .photoWrapper:hover
{
	transform: scale(1.05);
}

/**********************************************************************/
/****************************** YouTube *******************************/
/**********************************************************************/

.pkg
{
	display: inline-block;
	box-sizing:border-box;
	width: 100%;
	max-width: 20rem;
	margin-top: 2rem;
}

.modal-open
{
	cursor: pointer;
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 top: 0;
	 left: 0;
	z-index: 6;
	background-color: rgba(0, 0, 0, 0);

	-webkit-transition: background-color .2s ease;
	-moz-transition: background-color .2s ease;
	-ms-transition: background-color .2s ease;
	-o-transition: background-color .2s ease;
	transition: background-color .2s ease;
}
.modal-open:hover
{
	background-color: rgba(0, 0, 0, .3);
}

.modal-open:before
{
	content:"";
	display:block;
	position: absolute;
	width: 4rem;
	height: 3rem;
	background-color: rgba(50, 50, 50, .8);
	top:calc(50% - 1.5rem);
	left: calc(50% - 2rem);
	border-radius: 25%;
}
.modal-open:after
{
	content:"";
	display:block;
	position: absolute;
	width: 0;
	height: 0;
	top:calc(50% - .5rem);
	left: calc(50% - .4rem);
	border-style: solid;
	border-width: .5rem 0 .5rem 1rem;
	border-color: transparent transparent transparent rgb(255, 255, 255);
}

.vdo-body
{
	max-width: 100%;
	height: auto;
	padding-bottom: 56.25%;
	position: relative;
	overflow: hidden;
	background-size: 102%;
	background-position: 50% 50%;
}

.pkg .vdo-ttl
{
	margin-top:1.5rem;
	font-size: .8rem;
	-webkit-justify-content: center;
	justify-content: center;
}

.pkg .vdo-desc
{
	font-size: 1em;
	margin: 1rem auto 2.5rem;
	max-width: calc(900px - 6rem);
}

.pkg .vdo-base
{
	border: 1px solid rgba(0, 0, 0, .1);
}


.modal-vdo-body
{
	width: calc(100% - 4rem);
/*	width: 100%;*/
	height: auto;
	padding-bottom: 56.25%;
	position: relative;
	overflow: hidden;
}

.modal-vdo-body iframe
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


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

@media screen and (max-width: 1020px)
{
	body.en #top
	{
		padding: 0rem;
	}
	body.en #top .slide_text
	{
		flex-direction: column-reverse;
	}
	body.en #top .text,
	body.en #top .desc
	{
		width: 100%;
		padding: 0rem 2rem 0rem 4rem;
	}
	body.en #top .slide
	{
		width: 100%;
		margin-bottom: 2rem;
	}
	
	body.en .exhi_cont
	{
		padding-top:0;
	}
	body.en #cont_list
	{
		margin-right: 0;
	}
}

@media screen and (max-width: 900px)
{
	body:not(.en) #top
	{
		padding: 0rem;
	}
	body:not(.en) #top .slide_text
	{
		flex-direction: column-reverse;
	}
	body:not(.en) #top .text,
	body:not(.en) #top .desc
	{
		width: 100%;
		padding: 0rem 2rem 0rem 4rem;
	}
	body:not(.en) #top .slide
	{
		width: 100%;
		margin-bottom: 2rem;
	}

	body:not(.en) #cont_list
	{
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 -1rem 2rem;
	}
	body:not(.en) #cont_list ul
	{
		width: calc(50% - 2rem);
		margin: 0 1rem;
	}
	
	#top .desc
	{
		column-count: 1;
	}
	
	body .exhi_cont
	{
		padding-top:0;
	}
	
	.exhi_cont .text_photo
	{
		flex-direction: column-reverse;
		max-width: 100%;
		padding: 0;
	}
	
	.exhi_cont .text_photo figure
	{
		width: 100%;
	}
	
	.exhi_cont .text
	{
		width: 100%;
		padding: 0rem 2rem 0rem 4rem;
	}
}

@media screen and (max-width: 600px), (max-height: 600px)
{
	body:not(.en) #top .text,
	body:not(.en) #top .desc,
	body.en #top .text,
	body.en #top .desc
	{
		padding: 0rem 2rem;
	}
	
	body:not(.en) #cont_list
	{
		flex-direction: column;
		margin: 0 -1rem 2rem;
	}
	body:not(.en) #cont_list ul
	{
		width: calc(100% - 2rem);
		margin: 0 1rem;
	}
	
	.exhi_cont .text
	{
		padding: 0rem 2rem;
	}
	.pkg
	{
		max-width: 100%;
	}
}


/***** 言語ごとのCSS設定 ******/
/* 英語・フランス語 */
html:lang(en) #cont_list a._dir span.name,
html:lang(fr) #cont_list a._dir span.name {
	font-size: 88%;
	letter-spacing: 0;
	line-height: 1.45;
}
/* ドイツ語 */
html:lang(de) #cont_list a._dir span.name {
	font-size: 75%;
	letter-spacing: 0;
	line-height: 1.45;
}