@charset "UTF-8";
/* common
------------------------------------------------*/
#title_area {
	margin-bottom: 30px;
}
#footer {
	margin-top: 30px;
}
/* localnav
------------------------------------------------*/
#main ul.localnav {
	display: flex;
	flex-wrap: wrap;
}
#main ul.localnav li {
	width: 32%;
	margin: 0 2% 2% 0;
}
#main ul.localnav li:nth-child(3n) {
	margin: 0 0 2%;
}
#main ul.localnav li a {
	display: block;
	position: relative;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 10px 0;
	box-sizing: border-box;
	text-align: center;
	font-size: 20px;
}
#main ul.localnav li a:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 8px;
	height: 8px;
	border: 2px solid;
	border-color: transparent transparent #999 #999;
	margin: -5px 0 0;
	transform: rotate(-135deg);
}
#main ul.localnav li a:hover {
	background: #f9f9f9;
}
@media screen and (max-width:767px) {
	#main ul.localnav {
		display: none;
		position: relative;
		top: -6px;
	}
	#main ul.localnav li {
		width: 100%;
		border-top: 1px solid #ccc;
		margin: 0 !important;
	}
	#main ul.localnav li a {
		border: 0;
		background: #f2f2f2;
		padding: 5px;
	}
	.localnav-trigger,
	.localnav-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.localnav-trigger {
		cursor: pointer;
		position: relative;
		top: 0;
		right: 0;
		z-index: 1002;
		background: #f2f2f2;
		width: 100%;
		height: 40px;
	}
	.localnav-trigger span {
		position: absolute;
		left: 50%;
		width: 20px;
		height: 1px;
		background: #333;
		border-radius: 3px;
		margin: 0 0 0 -10px;
	}
	.localnav-trigger span:nth-of-type(1) {
		top: 12px;
	}
	.localnav-trigger span:nth-of-type(2) {
		top: 19px;
	}
	.localnav-trigger span:nth-of-type(3) {
		bottom: 12px;
	}
	.localnav-trigger.close span:nth-of-type(1) {
		transform: translateY(20px) rotate(-45deg);
		top: 0;
	}
	.localnav-trigger.close span:nth-of-type(2) {
		opacity: 0;
	}
	.localnav-trigger.close span:nth-of-type(3) {
		transform: translateY(-20px) rotate(45deg);
		bottom: -1px;
	}
}
/* main
------------------------------------------------*/
#main h1 {
	margin: 0.5em 0;
	font-size: 30px;
	font-weight: bold;
}
#main h2 {
	border-bottom: 2px solid #fff;
	margin: 10px 0;
	padding: 0 0 5px;
	font-size: 30px;
	font-weight: bold;
}
#main h3 {
	background: #666;
	margin: 10px 0;
	padding: 5px;
	font-size: 24px;
	font-weight: bold;
}
#main h4 {
	border-left: 5px solid #e2873b;
	margin: 10px 0;
	padding: 0 0 0 10px;
	font-size: 22px;
	font-weight: bold;
}
#main h5 {
	margin: 10px 0;
	font-size: 19px;
	font-weight: bold;
}
#main h6 {
	margin: 10px 0;
	font-weight: bold;
}
#main .flex {
	display: flex;
	flex-wrap: wrap;
}
#main table {
	width: 100%;
	margin: 0 auto 10px;
	border-collapse: collapse;
	border: solid 1px #ccc;
}
#main table th,
#main table td {
	border: solid 1px #ccc;
	padding: 7px;
}
#main table th {
	background: #666;
	text-align: center;
}
@media screen and (max-width:767px) {
	#main h1 {
		font-size: 22px;
	}
	#main h2 {
			font-size: 20px;
	}
	#main h3 {
			font-size: 18px;
	}
	#main h4 {
			font-size: 16px;
	}
	#main h5 {
		font-size: 15px;
	}
	#main table th,
	#main table td {
		padding: 5px;
		font-size: 14px;
	}
}
/* player, graduate, instruction, leader
------------------------------------------------*/
#main .player .box,
#main .graduate .box,
#main .instruction .box,
#main .leader .box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 49%;
	margin: 0 2% 2% 0;
}
#main .player .box:nth-child(2n),
#main .graduate .box:nth-child(2n),
#main .instruction .box:nth-child(2n),
#main .leader .box:nth-child(2n) {
	margin: 0 0 2%;
}
#main .player .box div,
#main .graduate .box div,
#main .instruction .box div,
#main .leader .box div {
	width: calc(100% - 150px);
}
#main .player .wide .box div {
	width: calc(100% - 210px);
}
#main .player .box p,
#main .graduate .box p {
	margin: 0;
	font-size: 18px;
}
#main .player .box p + dl,
#main .graduate .box p + dl {
	margin: 5px 0 0;
}
#main .player .box h3,
#main .graduate .box h3,
#main .instruction .box h3,
#main .leader .box h3 {
	background: none;
	margin: 0 0 5px;
	padding: 0;
	font-size: 22px;
}
#main .player .box dt,
#main .graduate .box dt,
#main .instruction .box dt,
#main .leader .box dt {
	float: left;
	width: 4em;
	padding: 0 0 3px;
}
#main .player .box dt span,
#main .graduate .box dt span {
	padding-right: 1em;
}
#main .player .box dt:after,
#main .graduate .box dt:after,
#main .instruction .box dt:after,
#main .leader .box dt:after {
	content: "：";
}
#main .player .box dt span.size2,
#main .graduate .box dt span.size2,
#main .instruction .box dt span.size2,
#main .leader .box dt span.size2 {
	margin: 0 3em 0 0;
}
#main .player .box dt span.size3,
#main .graduate .box dt span.size3,
#main .instruction .box dt span.size3,
#main .leader .box dt span.size3 {
	letter-spacing: 1em;
}
#main .player .box dd,
#main .graduate .box dd,
#main .instruction .box dd,
#main .leader .box dd {
	margin: 0;
	padding: 0 0 3px 4em;
}
#main .player #graduate {
	cursor: pointer;
	border: none;
}
#main .player #graduate {
	position: relative;
	width: 340px;
	border: 1px solid #e5e5e5;
	border-radius: 5px;
	margin: 30px auto;
	padding: 15px 0;
	box-sizing: border-box;
	text-align: center;
	font-size: 20px;
}
#main .player #graduate:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	width: 8px;
	height: 8px;
	border: 2px solid;
	border-color: transparent transparent #999 #999;
	margin: -5px 0 0;
	transform: rotate(-135deg);
}
#main .player #graduate + div {
	display: none;
}

@media screen and (max-width:767px) {
	#main .player .box,
	#main .graduate .box,
	#main .instruction .box,
	#main .leader .box {
		width: 100%;
		margin: 0 0 20px !important;
	}
	#main .player .box p,
	#main .graduate .box p {
		font-size: 16px;
	}
}
@media screen and (max-width:480px) {
	#main .player .box,
	#main .graduate .box,
	#main .instruction .box,
	#main .leader .box {
		display: block;
	}
	#main .player .box div,
	#main .graduate .box div,
	#main .instruction .box div,
	#main .leader .box div,
	#main .player .wide .box div {
		width: 100%;
		margin: 5px 0 20px !important;
	}
}
/* schedule
------------------------------------------------*/
#main .schedule .calendar {
	margin: 30px auto 0;
	width: 70%;
}
@media screen and (max-width:1120px) {
	#main .schedule .calendar .wrap_box {
		position: relative;
		height: 0;
		padding-top: 125%;
	}
	#main .schedule .calendar .wrap_box iframe,
	#main .schedule .calendar .wrap_box object,
	#main .schedule .calendar .wrap_box embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
@media screen and (max-width:767px) {
	#main .schedule .calendar {
		width: 100%;
	}
}