@charset "UTF-8";


/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// TOP /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#top
{
	width: 100%;
	height: 100%;
	position:sticky;
	top: 0;
}

#top > div
{
	position:absolute;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
}

#top_1,
#top_2,
#top_3,
#top_4
{
	mix-blend-mode: multiply;
}

#top_bg
{
	right: 25%;
	height: 100%;
	aspect-ratio: 2021 / 3356;
	background-image: url(../_img/teaser/top.webp);
}

#top_1
{
	aspect-ratio:450 / 810;
	width: min(30%, calc(72vh * 450 / 810));
	top: 5%;
	right: 5%;
	background-image: url(../_img/teaser/top_l_1.svg);

	transition-delay: .75s;
}

#top_2
{
	aspect-ratio:575 / 90;
	width: min(25%, calc(8vh * 575 / 90));
	bottom: 5%;
	right: 5%;
	background-image: url(../_img/teaser/top_l_2.svg);
	
	transition-delay: 1.25s;
}

#top_3
{
	aspect-ratio:480 / 610;
	width: min(30%, calc(60vh * 480 / 610));
	top: 5%;
	left: max(calc(100vh * 195 / 955 + 5%), 23%);
	background-image: url(../_img/teaser/top_l_3.svg);
	
	transition-delay: 1.25s;
}

#top_4
{
	aspect-ratio:195 / 955;
	height: 90%;
	top: 5%;
	left: 2rem;
	background-image: url(../_img/teaser/top_l_4.svg);
	
	transition-delay: 2s;
}


/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// 開催概要 //////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#overview
{
	padding-top: max(3rem, 5vw);
	padding-bottom: max(3rem, 5vw);
}

#overview .title
{
	font-size: clamp(1.5rem, 5vw, 3rem);
	margin-bottom: 1em;
}

#overview .title h1
{
	font-size: 1em;
}

#overview .title p
{
	font-size: .8em;
}

#overview .copy
{
	font-size: clamp(1rem, 2vw, 1.5rem);
	margin-bottom: 2em;
}

#overview .copy > div + div
{
	margin-top: .5em;
}

#overview p
{
	display: flex;
	flex-wrap: wrap;
}

#overview p span
{
	white-space: nowrap;
}

#overview p span:nth-of-type(1)
{
	font-size: .9em;
}

#overview p span:nth-of-type(1):after
{
	content: "｜";
}

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

#news
{
	padding: 0 1rem;
}

#news .sec_title
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#news .sec_title > a
{
	font-size: .8rem;
	padding: .25em 1em;
}

#news > div
{
	padding-top: 2rem;
	padding-bottom: 2rem;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: rgb(255, 255, 255);
	border-radius: .5em;
}

#news .cont
{
	width:calc(100% - max(10vw, 7rem));
}

#news table
{
	width: 100%;
}

#news .cont a.news
{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap:wrap;
	
	-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
{
	padding: .5em 0;
}

#news tr + tr td
{
	border-top: 1px solid rgb(240, 240, 240);
}
#news .cont .date
{
	font-size: .9em;
	margin-right: 1em;
	transform: translateY(.2em);
	white-space: nowrap;
}

#news .cont .date span:nth-of-type(1):after
{
	content:"|";
	padding: 0 .5em;
}

#news .cont .title
{
	font-size: 1rem;
	flex-grow: 1;
	display:flex;
	justify-content: space-between;
	align-items:flex-end;
	flex-wrap:nowrap;
}

#news .cont .news .title:after
{
	font-family: f-icons;
	font-weight: 400;
	font-size: 1.1em;
	content: "\f198";
	transform: translateX(-.5em);
	transition: all .3s ease;
	margin-left: 1em;
}

body:not(.touch) #news .cont a.news:hover .title:after
{
	transform: translateX(0);
}

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// 公募内容 //////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#koubo
{
	padding-top: max(3rem, 5vw);
	padding-bottom: max(3rem, 5vw);
}

#koubo figure
{
	width: 100%;
	height: calc(100vw * 2 / 5);
}

#koubo figure img
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 100%;
}

#koubo figure h2
{
	display: inline-block;
	font-size: clamp(1.2rem, 3vw, 2rem);
	padding: .5em 1em;
	top: 1em;
	background-color: rgb(255, 255, 255);
}

#koubo .copy
{
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin-top: -1vw;
}

#koubo .copy > div
{
	writing-mode: tb;
	font-size: clamp(1.2rem, 5vw, 1.7rem);
	margin-bottom: 2em;
}

#koubo .copy h2
{
	transform: translateY(-1em);
	font-size: 2em;
}

#koubo .copy p._1 + p._1,
#koubo .copy p._3
{
	margin-right: .5em;
}

#koubo .copy p._2,
#koubo .copy p._3
{
	transform: translateY(1em);
}

#koubo .body,
#koubo .link
{
	font-size: clamp(1.1rem, 3vw, 1.5rem);
}

#koubo .body
{
	margin-bottom: 2em;
}

#koubo .link
{
	padding: 1em;
	background-color: rgb(255, 255, 255);
	border-radius: .5em;
}

#koubo .link table
{
	margin-bottom: 1em;
}

#koubo .link tr td:nth-of-type(1)
{
	padding-right: 1em;
	font-size: .9em;
}


/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// 開催目的 //////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#purpose
{
	padding-top: max(3rem, 5vw);
	padding-bottom: max(3rem, 5vw);
	font-size: clamp(1.1rem, 3vw, 1.3rem);
}

#purpose .sec + .sec
{
	margin-top: 1em;
}

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// 南飛騨 ////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#minamihida-artdiscovery
{
	padding-top: max(3rem, 5vw);
	padding-bottom: max(3rem, 5vw);
	font-size: clamp(1.1rem, 3vw, 1.3rem);
}

#minamihida-artdiscovery .minamihida_logo
{
	width: 100%;
	max-width: 20rem;
}
#minamihida-artdiscovery .minamihida_logo > img
{
	width: 100%;
	height: auto;
	margin-bottom: 1em;
}

#minamihida-artdiscovery .link
{
	width: 100%;
	max-width: 20rem;
	margin-bottom: 2em;
}

#minamihida-artdiscovery .overview p
{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

#minamihida-artdiscovery .overview p + p
{
	margin-top: .5em;
}

#minamihida-artdiscovery .overview p span:nth-of-type(1)
{
	font-size: max(.8em, .9rem);
	white-space: nowrap;
}

#minamihida-artdiscovery .overview p span:nth-of-type(1):after
{
	content: "｜";
}

#minamihida-artdiscovery h3
{
	margin-bottom: 1em;
}

#minamihida-artdiscovery h3 .credit
{
	margin-left: 2em;
	font-size: max(.5em, .8rem);
}

#minamihida-artdiscovery .photo_wrapper
{
	padding: max(4rem, 4vw) 0 max(2rem, 3vw);
}

#minamihida-artdiscovery .photo_wrapper + .photo_wrapper
{
	padding-top: 0;
}

#minamihida-artdiscovery .photo
{
	display: flex;
	flex-wrap: wrap;
	margin: -1rem;
}

#minamihida-artdiscovery .photo figure
{
	width: calc(100% / 3 - 2rem);
	margin: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#minamihida-artdiscovery .photo figure img
{
	width: 100%;
	height: auto;
}

#minamihida-artdiscovery figcaption
{
	margin-top: 1em;
	font-size: max(.5em, .8rem);
}


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

@media screen and (orientation: portrait)
{
	#top_bg
	{
		top: 20%;
		left: 0;
		height:65%;
	}
	
	#top_1
	{
		aspect-ratio:810 / 450;
		width: min(75%, calc(30vh * 810 / 450));
		top: 5%;
		left: 2rem;
		right: auto;
		background-image: url(../_img/teaser/top_p_1.svg);
	}
	
	#top_2
	{
		aspect-ratio:85 / 585;
		width: min(25%, calc(30vh * 85 / 585));
		top: 5%;
		left: auto;
		right: 2rem;
		background-image: url(../_img/teaser/top_p_2.svg);
	}
	
	#top_3
	{
		aspect-ratio:480 / 610;
		width: min(50%, calc(35vh * 480 / 610));
		top: 40vh;
		left: auto;
		right: 2rem;
	}
	
	#top_4
	{
		aspect-ratio: none;
		height: min(15vh, calc(90vw * 205 / 955));
		width:100%;
		left: 0;
		top: auto;
		bottom: 2rem;
		background-image: url(../_img/teaser/top_p_4.svg);
	}
}

@media screen and (max-width: 900px)
{
	#news > div
	{
		flex-direction: column;
		align-items: flex-start;
	}
	#news .sec_title
	{
		flex-direction:row;
		flex-wrap: wrap;
		margin-bottom: 1rem;
	}
	
	#news .sec_title > h2
	{
		margin-right: 1em;
	}
	
	#news .cont
	{
		width:100%;
	}
	
	#minamihida-artdiscovery .photo figure
	{
		width: calc(100% / 2 - 2rem);
	}
}

@media screen and (max-width: 650px)
{
	#news td
	{
		display: block;
		width: 100%;
		border
		padding: .5em 0;
	}

	#news tr + tr td
	{
		border-top-width: 0px;
	}
	
	#news td:nth-of-type(1)
	{
		border-top: 1px solid rgb(240, 240, 240);
		padding-bottom: 0;
	}
	#news td:nth-of-type(2)
	{
		padding-bottom: .5em;
	}

	#minamihida-artdiscovery .photo figure
	{
		width: calc(100% / 1 - 2rem);
	}
}