@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&family=Zen+Old+Mincho&display=swap');

@charset "utf-8";

/* common
-------------------------------------------------------------*/


/* hall
-------------------------------------------------------------*/
div#contents.hall{
	padding-top:300px;
	background:url(../../hall/img/main.webp) no-repeat center top -40px / 100% auto;
}
div#contents.hall h1{
	width:100%;
	margin-top:calc(-1.3em - 30px);
	margin-bottom:0;
	padding:15px 30px;
	color:#fff;
	font-size:24px;
	border-left:none;
	background-color:rgba(0,0,0,0.8);
}
div#contents.hall p.outline{
	padding:15px 0 30px;
	background-color:#fff;
}
div#sukakinen_hall,
div#ensemble_hall{
	position:relative;
	margin-bottom:30px;
	padding-top:240px;
}
div#sukakinen_hall:before,
div#ensemble_hall:before{
	width:100%;
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	padding-top:240px;
	background-repeat:no-repeat;
	background-position:center top -40px;
	background-size:100% auto;
}
div#sukakinen_hall:before{
	background-image:url(../../hall/img/hall_suka.webp);
}
div#ensemble_hall:before{
	background-image:url(../../hall/img/hall_ensemble.webp);
}
div#sukakinen_hall h2,
div#ensemble_hall h2{
	width:100%;
	position:relative;
	margin:calc(-1.3em - 30px) 0 0;
	padding:15px 30px;
	font-family: "Zen Old Mincho";
	color:#fff;
	font-size:40px;
	background:none;
}
div#contents.hall h2 + a{
	width:52px;
	height:60px;
	position:absolute;
	top:170px;
	right:30px;
	display:block;
}
div#contents.hall ul.photo{
	backgroudn-color:#fff;
}
/* table_sp */
@media screen and (max-width:730px){
	div.table_sp{
		width:auto;
		overflow-x: hidden;
	}
	div.table_sp table{
		width:auto;
		min-width: 0;
	}
}
@media screen and (max-width:640px){
	div#contents.hall{
		background-size:auto 345px;
	}
	div#sukakinen_hall::before,
	div#ensemble_hall::before{
		background-size:auto 290px;
	}
	div#sukakinen_hall h2,
	div#ensemble_hall h2{
		padding: 15px;
		font-size:8vw;
	}
	div#contents.hall h2 + a{
		top:10px;
		right:10px;
	}
	div.table_sp{
		width:100%;
		overflow-x: scroll;
	}
	div.table_sp table{
		width:auto;
		min-width: 620px;
	}
}

/* photo
-------------------------------------------------------------*/
ul.photo {
	margin:10px auto;
}
ul.photo li{
	width:calc(20% - 8px);
	margin:0 10px 10px 0;
}
ul.photo li:nth-child(5n){
	margin-right:0;
}

/* user_guide
-------------------------------------------------------------*/
div#user_guide h2.ttl{
	margin:0;
	padding:15px;
	color:#fff;
	font-size:24px;
	background:#d63935;
}
div#user_guide h3.sttl{
	margin:30px auto 10px;
	padding:0;
	color:#d63935;
	font-size:18px;
	font-weight:bold;
	background-color:transparent;
}
div#user_guide h3.sttl:before{
	content:"◆";
}
div#user_guide table{
	margin:15px auto;
}
div#user_guide table tr:nth-child(2n+1){
	background-color:#fff3d1;
}
div#user_guide table tr th,
div#user_guide table tr td{
	padding:0.3em 1em;
	text-align:center;
	border:none;
}
div#user_guide table tr th{
	border-bottom:1px #ccc solid;
	background-color:#fff;
}

ul.data li{
	display: block;
	margin: 0 0 5px;
	width: 100%;
	padding-left: 15px;
	background:url(../img/arrow01.png) 0 9px no-repeat;
}