/*=================================================
 * CSS for PC
 * ================================================= */

body{
	background: url(/img/all/pc_bg.jpg) no-repeat top center #000 fixed;
	background-size: cover;
}

.topimg{
	font-size: 0;
	line-height: 0;
	text-align: center;
	margin: 0 0 50px 0;
}


/** sys **/

.sys{
	width: 1000px;
	height: auto;
	color: #fff;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	margin: 0 auto 20px auto;
	padding: 190px 170px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.sys h3{
	margin: 0 0 30px 0;
}
.course3{	background: url(img/course3.png) no-repeat top center; background-size: 100% 100%;}
.course2{	background: url(img/course2.png) no-repeat top center; background-size: 100% 100%;}
.course1{	background: url(img/course1.png) no-repeat top center; background-size: 100% 100%; margin-bottom: 40px;}
.course3 h3{	color: #ff9f42;}
.course2 h3{	color: #cecece;}
.course1 h3{
	color: #000000;
	text-shadow: 0 0 3px #fff , 0 0 3px #fff , 0 0 3px #fff , 0 0 3px #fff , 0 0 3px #fff , 0 0 3px #fff , 0 0 3px #fff , 0 0 3px #fff;
}

.course3 h3 span{
	color: #ff9f42;
	background: -webkit-linear-gradient(top, #ff9f42 30%, #ffd570 50%, #ff9f42 70%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}

.course2 h3 span{
	color: #cccccc;
	background: -webkit-linear-gradient(top, #cccccc 30%, #ffffff 50%, #cccccc 70%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

}

.course1 h3 span{
	color: #000000;
}

.sys h3 span{
	display: block;
	font-family: "FontA";
	font-size: 36px;
	line-height: 40px;
}
.sys h3 em{
	display: block;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
}

.sys .txt{
	width: 100%;
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 30px 0;
}

.sys div{
	width: 100%;
}
.sys div p{
	display: block;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 30px;
	margin: 0 0 20px 0;
}
.sys div p:last-of-type{	margin-bottom: 0;}


/** other **/

#other{
	text-align: left;
	color: #fff;
	padding: 60px 0;
	background: url(../img/all/stone_bg.png) no-repeat top center;
	background-size: cover;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#other h3{	margin: 0 0 40px 0;}

.boxtxt{}
.boxtxt p{
	position: relative;
	font-size: 14px;
	line-height: 20px;
	margin: 0 0 5px 0;
	padding: 0 0 0 16px;
}
.boxtxt p.none{	padding-left: 0;}
.boxtxt p span{
	color: #ff0000;
	position: absolute;
	top: 0;
	left: 0;
}
.boxtxt p:last-of-type{	margin-bottom: 0;}


/** op **/

#credit, #op, #fee{
	width: 1100px;
	margin: 0 auto 50px auto;
}
#credit > span, #op > span, #fee > span{
	display: block;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 30px;
	margin: 0 0 30px 0;
}
#credit > span{
	font-size: 18px;
	line-height: 20px;
}
#fee > span{
	display: inline-block;
	vertical-align: top;
	margin-right: 50px;
}
#fee > span:last-of-type{	margin-right: 0;}


#credit a{
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 180px;
	height: 40px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: #fff;
	-webkit-transition	: 0.2s ease-in-out;
	-moz-transition	: 0.2s ease-in-out;
	-o-transition	: 0.2s ease-in-out;
	transition		: 0.2s ease-in-out;
	border: 1px solid currentColor;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#credit a:hover{
	text-decoration: none;
	color: #000;
	background: #fff;
}


#op ul{
	font-size: 0;
	line-height: 0;
	margin: 0 0 30px 0;
}
#op li{
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: calc(100% / 3);
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 0 0 0 24px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#op li span{
	font-size: 12px;
	color: #c09475;
	position: absolute;
	top: 3px;
	left: 2px;
}


/** area **/

#area{
	width: 1100px;
	margin: 0 auto 60px auto;
}
#area dl{
	display: table;
	width: 100%;
	font-size: 0;
	line-height: 0;
	margin: 0 0 20px 0;
}
#area dl:last-of-type{	margin-bottom: 50px;}
#area dt,
#area dd{
	display: table-cell;
	vertical-align: middle;
	font-size: 16px;
	line-height: 20px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#area dt{
	width: 120px;
	color: #c09475;
}


/** notes **/

#notes{
	width: 1100px;
	margin: 0 auto;
}
#notes ul{
	margin: 0 0 50px 0;
}
#notes li{
	position: relative;
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 20px 0;
	padding: 0 0 0 28px;
}
#notes li:last-of-type{	margin-bottom: 0;}
#notes li span{
	font-size: 15px;
	color: #c09475;
	position: absolute;
	top: 3px;
	left: 6px;
}


/*=================================================
 * CSS for SP
 * ================================================= */

@media screen and (max-width: 650px) {
	body:before{
		background: url(/img/all/sp_bg.jpg) no-repeat top center;
		background-size: cover;
	}
	.topimg{
		margin: 0 0 30px 0;
	}
	.topimg img{
		width: 100%;
		height: auto;
	}

	/** sys **/
	.sys{
		width: 500px;
		height: auto;
		margin: 0 auto 10px auto;
		min-height: 600px;
		padding: 120px 120px;
	}
	.sys h3{
		margin: 0 0 20px 0;
	}
	.course3{	background: url(img/sp_course3.png) no-repeat top center; background-size: 100% 100%;}
	.course2{	background: url(img/sp_course2.png) no-repeat top center; background-size: 100% 100%;}
	.course1{	background: url(img/sp_course1.png) no-repeat top center; margin-bottom: 40px; background-size: 100% 100%;}
	.sys h3 span{
		font-size: 36px;
		line-height: 40px;
	}
	.sys h3 em{
		font-size: 14px;
		line-height: 18px;
	}
	.sys .txt{
		font-size: 14px;
		line-height: 20px;
		margin: 0 0 30px 0;
	}
	.sys div p{
		font-size: 26px;
		line-height: 30px;
		margin: 0 0 20px 0;
	}


	/** other **/
	#other{
		padding: 20px 10px 30px 10px;
		background: url(../img/all/stone_bg.png) no-repeat top center;
		background-size: cover;
	}
	#other h3{	margin: 0 0 20px 0;}
	.boxtxt p{
		font-size: 13px;
	}

	/** op **/
	#credit, #op, #fee{
		width: auto;
		margin: 0 0 40px 0;
	}
	#credit > span,#op > span, #fee > span{
		font-size: 20px;
		line-height: 24px;
		margin: 0 0 0 0;
	}
	#credit > span{
		font-size: 14px;
		line-height: 20px;
		margin-bottom : 20px;
	}
	#fee > span{
		margin-right: 20px;
	}
	#op ul{
		margin: 0 0 20px 0;
	}
	#op li{
		width: 100%;
		font-size: 14px;
		line-height: 20px;
		margin: 0 0 10px 0;
		padding: 0 0 0 22px;
	}
	#op li:last-of-type{	margin-bottom: 0;}
	#op li span{
		left: 0;
	}

	/** area **/
	#area{
		width: auto;
		margin: 0 0 40px 0;
	}
	#area dl{
		margin: 0 0 10px 0;
	}
	#area dl:last-of-type{	margin-bottom: 20px;}
	#area dt,
	#area dd{	font-size: 14px;}
	#area dt{	width: 70px;}

	/** notes **/
	#notes{
		width: auto;
		margin: 0;
	}
	#notes ul{
		margin: 0 0 20px 0;
	}
	#notes li{
		position: relative;
		font-size: 14px;
		line-height: 20px;
		margin: 0 0 10px 0;
		padding: 0 0 0 22px;
	}
	#notes li:last-of-type{	margin-bottom: 0;}
	#notes li span{
		font-size: 15px;
		color: #c09475;
		position: absolute;
		top: 3px;
		left: 0;
	}
}


@media screen and (max-width: 549px) {
	.sys{
		width: 90%;
		height: auto;
		min-height: 500px;
		padding: 110px 110px;
	}
	.sys h3{
		margin: 0 0 15px 0;
	}
	.course3{	background: url(img/sp_course3.png) no-repeat top center; background-size: 100% 100%;}
	.course2{	background: url(img/sp_course2.png) no-repeat top center; background-size: 100% 100%;}
	.course1{	background: url(img/sp_course1.png) no-repeat top center; margin-bottom: 30px; background-size: 100% 100%;}
	.sys h3 span{
		font-size: 30px;
		line-height: 35px;
	}
	.sys h3 em{
		font-size: 13px;
		line-height: 16px;
	}
	.sys .txt{
		font-size: 13px;
		line-height: 18px;
		margin: 0 0 20px 0;
	}
	.sys div p{
		font-size: 20px;
		line-height: 24px;
		margin: 0 0 10px 0;
	}
}

@media screen and (max-width: 449px) {
	.sys{
		width: 90%;
		height: auto;
		min-height: 450px;
		padding: 90px 90px;
	}
	.sys h3{
		margin: 0 0 15px 0;
	}
	.course3{	background: url(img/sp_course3.png) no-repeat top center; background-size: 100% 100%;}
	.course2{	background: url(img/sp_course2.png) no-repeat top center; background-size: 100% 100%;}
	.course1{	background: url(img/sp_course1.png) no-repeat top center; margin-bottom: 30px; background-size: 100% 100%;}
	.sys h3 span{
		font-size: 28px;
		line-height: 32px;
	}
	.sys h3 em{
		font-size: 13px;
		line-height: 16px;
	}
	.sys .txt{
		font-size: 13px;
		line-height: 18px;
		margin: 0 0 10px 0;
	}
	.sys div p{
		font-size: 18px;
		line-height: 22px;
		margin: 0 0 10px 0;
	}
}

@media screen and (max-width: 390px) {
	.sys{
		width: 90%;
		height: auto;
		min-height: 400px;
		padding: 80px 80px;
	}
	.sys h3{
		margin: 0 0 15px 0;
	}
	.course3{	background: url(img/sp_course3.png) no-repeat top center; background-size: 100% 100%;}
	.course2{	background: url(img/sp_course2.png) no-repeat top center; background-size: 100% 100%;}
	.course1{	background: url(img/sp_course1.png) no-repeat top center; margin-bottom: 30px; background-size: 100% 100%;}
	.sys h3 span{
		font-size: 26px;
		line-height: 30px;
	}
	.sys h3 em{
		font-size: 12px;
		line-height: 16px;
	}
	.sys .txt{
		font-size: 11px;
		line-height: 16px;
		margin: 0 0 10px 0;
	}
	.sys div p{
		font-size: 17px;
		line-height: 20px;
		margin: 0 0 10px 0;
	}
}

@media screen and (max-width: 360px) {
	.sys{
		width: 90%;
		height: auto;
		min-height: 350px;
		padding: 70px 70px;
	}
	.sys h3{
		margin: 0 0 15px 0;
	}
	.course3{	background: url(img/sp_course3.png) no-repeat top center; background-size: 100% 100%;}
	.course2{	background: url(img/sp_course2.png) no-repeat top center; background-size: 100% 100%;}
	.course1{	background: url(img/sp_course1.png) no-repeat top center; margin-bottom: 30px; background-size: 100% 100%;}
	.sys h3 span{
		font-size: 22px;
		line-height: 25px;
	}
	.sys h3 em{
		font-size: 11px;
		line-height: 14px;
	}
	.sys .txt{
		font-size: 10px;
		line-height: 14px;
		margin: 0 0 10px 0;
	}
	.sys div p{
		font-size: 13px;
		line-height: 15px;
		margin: 0 0 10px 0;
	}
}