/* すみだ五彩の芸術祭✕すみだトリフォニーホール　特設サイト 詳細ページ　*/
@charset "utf-8";

section{
	max-width:1140px;
	margin:auto;
	h2{
		font-weight:bold;
		text-align:center;
		font-size:1.8rem;
		padding:1.5em 0;
		span{
			display:block;
			font-size:0.8rem;
			color:#ab811f;
		}
	}
}

body > section{
	margin-bottom:5em;
	max-width: 1140px;
}

article{
	border-radius:1em;
}

/* common */
.contents{
	width:85%;
	margin:auto;
}
.pc{
	display:block;
}
ul.disc{
	margin-left:1em;
	list-style:disc;
}
.button{
	transition:0.3s;
	&:hover{
		opacity:0.7;
	}
	span{
		background-color:#888;
	}
	a{
		background-color:#ab811f;
	}
	span,
	a{
		display:flex;
		align-items:center;
		justify-content:center;
		padding:1.5em 0;
		color:#fff;
		border-radius:4px;
		font-weight:bold;
	}
}
.youtube{
	iframe{
		width:100%;
		aspect-ratio:16/9;
	}
	p{
		text-align:center;
	}
}

/* header */
header{
	width:100%;
	aspect-ratio:1500/594;
	background:url(../img/main_visual.jpg) no-repeat center center / cover;
	position:relative;

	.gosai_logo{
		position:absolute;
		top:0;
		left:5%;
		background-color:#fff;
		box-shadow:0 0 3px rgba(0,0,0,0.1);
		width:18%;
		aspect-ratio:7/3;
		display:flex;
		align-items:center;
		justify-content:center;
		padding:10px 20px;
		border-radius:0 0 4px 4px;
	}
	.logo{
		position:absolute;
		top:32%;
		left:5%;
		width:40%;
	}
	.day{
		position:absolute;
		top:82%;
		left:5%;
		color:#fff;
		font-size:26px;
		font-weight:600;
	}

}



/* navi */
#navi{
	background-color:#000;
	position:relative;
}
#navi > section {
	display:flex;
	align-items:center;
	position:relative;
	height:6em;
	justify-content:center;
}
#navi nav{
	ul{
		display:flex;
		justify-content:center;
		align-items:center;
		gap:1px;
		background-color:#888;
		border-left:1px solid #888;
		border-right:1px solid #888;
		li {
			background-color:#000;
			a{
				display:flex;
				justify-content:center;
				align-items:center;
				font-weight:bold;
				color:#fff;
				padding:0 1em;
				line-height:1;
			}
			a::after {
				display:inline-block;
				width:0.4em;
				height:0.4em;
				margin-left:0.8em;
				content:'';
				border-right:2px solid #fff;
				border-bottom:2px solid #fff;
				transform:rotate(45deg);
			}
		}
	}
}
#navi .sns{
	position:absolute;
	right:0;
	display:flex;
	gap:1em;
	li a{
		display:block;
		width:2.5em;
		height:2.5em;
		background-color:#fff;
		padding:0.4em;
		border-radius:4px;
	}
}
#navi.fixed{
	position:fixed;
	top:0;
	left:0;
	right:0;
}



/* cm */
#cm{
	padding-top:5em;
	& > div{
		width:800px;
		margin:auto;
		aspect-ratio:80/45;
	}
	iframe{
		width:100%;
		height:100%;
	}
}



/* introduction */
#introduction{
	display:grid;
	gap:2em;
	grid-template-columns:1fr 30%;
	h1{
		font-size:120%;
		font-weight:bold;
	}
	p{
		line-height:2;
		margin:2em 0;
	}
}



/* information */
#information{
	article{
		background-color:#fcfbf2;
	}
	dl{
		display:grid;
		grid-template-columns:max-content 1fr;
	}
	dd{
		padding:2em 0;
		line-height:2;
	}
	dt{
		padding:2em 4em 2em 0;
		line-height:2;
	}
	dt:not(:last-of-type),dd:not(:last-of-type){
		border-bottom:1px solid rgba(0,0,0,0.1);
	}
	.price{
		display:flex;
		flex-wrap:wrap;
		gap:2em;
		.button{
			width:16em;
			line-height:1;
		}
	}
	.small{
		font-size:85%;
	}
}



/* auditon */
#audition{
	article{
		border:1px solid rgba(0,0,0,0.16);
		margin-top:1.5em;
		padding-bottom:1.5em;
	}
	article.check{
		border:none;
		margin-top:4em;
		padding:1.5em 0;
		background-color:#f7f7f7;
	}
	h3{
		font-size:1.5rem;
		text-align:center;
		font-weight:bold;
		padding:1.5em 0;
	}
	dd{
		margin-bottom:2.5em;
	}
	dt{
		display:flex;
		gap:0.5em;
		align-items:center;
		font-weight:bold;
		font-size:1.2rem;
		height:1.5em;
		margin-bottom:1em;
		border-bottom:1px solid rgba(0,0,0,0.16);
	}
	dt::before{
		display:inline-block;
		content:'';
		width:0.5em;
		height:100%;
		border-radius:4px;
		background-color:#004e9b;
	}
	p,li{
		line-height:2;
	}
	ul{
		margin-top:1em;
		margin-bottom:1em;
	}
	.small{
		font-size:85%;
	}
	h4{
		font-weight:bold;
		margin:2em 0 0.25em;
	}
	h4::before{
		content:'◆';
	}
	.sample{
		margin-top:1.5em;
		ul{
			display:grid;
			grid-template-columns:repeat(3,1fr);
			gap:1em;
		}
	}
	ul.about18{
		margin-top:0;
		margin-left:3.5em;
		list-style:disc;
	}
	#apply{
		text-align:center;
		padding:1.5em 0;
		.button{
			width:50%;
			margin:auto;
		}
	}
}



/* movie */
#movie{
	ul{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:2em;
	}
}


/* **************************************** 1140px ******************************************* */
@media screen and (max-width: 1140px) {

section{
	margin:0 2em;
}

}

/* **************************************** sp ******************************************* */

@media screen and (max-width: 740px) {

section{
	margin:0 1em;
}

body > section{
	margin-bottom:2.5em;
}

/* common */
.contents{
	width:90%;
}
.pc{
	display:none;
}

header{
	aspect-ratio:75/37;
	background:url(../img/main_visual_sp.jpg) no-repeat 100% center / cover;
	.gosai_logo{
		display:none;
		width:45%;
	}
	.logo{
		position:absolute;
		top:20%;
		left:5%;
		width:52%;
	}
	.day{
		position:absolute;
		top:74%;
		left:5%;
		font-size:12px;
	}
}

#navi{
	font-size:2.5vw;
}
#navi > section{
	justify-content:left;
}
#navi .sns{
	/*top:-3.5em;*/
}

/* cm */
#cm{
	padding-top:2em;
	& > div{
		width:100%;
	}
}

/* introduction */
#introduction{
	grid-template-columns:1fr;
	h1{
		font-size:100%;
	}
	p{
		line-height:2;
		margin:2em 0;
	}
}

/* information */
#information{
	dl{
		display:block;
	}
	dd{
		padding:0 0 1em 0;
	}
	dt{
		padding:1em 0 0 0;
		font-weight:bold;
	}
	dt:not(:last-of-type){
		border-bottom:none;
	}
	.price{
		gap:1em;
		flex-direction:column;
		.button{
			width:50%;
		}
	}
}

/* audition */
#audition{
	.sample{
		ul{
			display:grid;
			grid-template-columns:1fr;
			gap:1em;
		}
	}
	#apply{
		padding:1.5em 0;
		.button{
			width:90%;
			margin:auto;
		}
	}
}

/* movie */
#movie{
	ul{
		grid-template-columns:1fr;
	}
}

}