@charset "utf-8";

.mainImage{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height:0;
	padding-top: 24.41%;
	background-image: url("../img/school/main.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
}

/* 共通 */
#school h3, #feature h3, #subject h3, #curriculum h3, #assist h3{
	position: relative;
	margin: 0 auto;
	color:#4187c7;
	font-weight: bold;
	font-size: .19rem;
	text-align: left;
	line-height: 1.8em;
	padding-bottom: 6%;
}
#feature h3, #subject h3{color:#ffffff;}

/* school */
#school{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	background-image: url("../img/common/bg.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #ffffff;
}
#school h2{
	position: relative;
	margin: 0 0 4% 0;
	width: 100%;
	height:0;
	padding-top: 8%;
	background-image: url("../img/school/ttl_school.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#school h4{
	position: relative;
	margin: 4% 0;
	width: 100%;
	height:0;
	padding-top: 35%;
	background-image: url("../img/school/school.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#school p{ position: relative; width: 96%; margin: 3% auto 0 auto; text-align: left;}
#school .rightBox{
	position: relative;
	margin: 6% auto;
}
#school .rightBox img{width: 80%;}
#school .rightBox p{
	position: relative;
	margin: 4% 0;
	width: 96%;
	height:0;
	padding-top: 28%;
	background-image: url("../img/school/chief.svg");
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

/* obog */
#obog{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
}
#obog .contentsImage{
	position: relative;
	margin: 0 auto;
	width: 100%;
	padding-top: 24.41%;
	background-image: url("../img/school/school01.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#obog .contentsImage div{
	position: relative;
	margin: -8% auto 0 auto;
	color: #4187c7;
	font-weight: bold;
	background-color: rgba(255,255,255,.8);
	width: 80%;
	padding: 3%;
}
#obog .contentsImage div h3{font-size: .20rem;}
#obog .contentsImage div p{
	position: relative;
	margin: 3% auto 0 auto;
	width: 80%;
	font-size: .14rem;
	text-align: left;
}

/* feature */
#feature{
	position: relative;
	margin: 0 auto;
	color: #ffffff;
	text-align: left;
	padding-top: 12%;
	background-image: url("../img/school/school_bg.jpg");
	background-size: 310% auto;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#feature .rightBox{position: relative;margin: 8% 0 0 auto; padding-bottom: 4%; width: 80%; }
#feature ul{
	position: relative;
	margin: auto;
}
#feature ul li{
	position: relative;
	margin: 2% auto;
}
#feature ul li .Box1{
	position: relative;
	margin: 0 auto;
	width: 100%;
	padding-top: 56%;
	background-image: url("../img/school/school_bg01.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#feature ul li:nth-child(2) .Box1{display: none;}
#feature ul li .Box1 div{
	position: absolute;
	top: 12%;
	left: 4%;
}
#feature ul li h4{
	position: relative;
	margin: 0 auto 8% auto;
	font-size: .20rem;
	font-weight: bold;
}
#feature ul li .Box1 h4{color: #4187c7;}
#feature ul li .Box2{
	position: relative;
	margin: 4% auto;
	padding: 8%;
	background-color: #266db5;
}

/* subject */
#subject{
	position: relative;
	margin: 0 auto;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#subject .contentsImage{
	position: relative;
	margin: 0 auto 8% auto;
	width: 100%;
	padding-top: 29.35%;
	background-image: url("../img/school/school03.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
	z-index: -1;
}
#subject .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	padding-top: 180%;
	background-color: #4187c7;
	z-index: -2;
}
#subject table{
	position: relative;
	margin: 0 auto;
	background-color: #ffffff;
	border-collapse: collapse;
	text-align: left;
}
#subject table thead tr{
	position: relative;
	margin: 0 auto;
	border-bottom: solid 1px #9bcbed;
}
#subject table tbody tr{
	position: relative;
	margin: 0 auto;
	border-bottom: dotted 1px #424242;
}
#subject table thead tr th:nth-child(1), #subject table thead tr th:nth-child(2), #subject table tbody tr td:nth-child(1), #subject table tbody tr td:nth-child(2){
	position: relative;
	margin: 0 auto;
	border-right: solid 1px #9bcbed;
}
#subject table th, #subject table td{padding: 0 2%;}
#subject table tbody tr td:nth-child(2){ text-align: center; width: 3em; }
#subject table td{vertical-align: middle;}

/* curriculum */
#curriculum{
	position: relative;
	margin: 0 auto;
	padding-top: 8%;
	padding-bottom: 10%;
	background-color: rgba(65,135,199,.03);
}
#curriculum .contentsImage{
	position: relative;
	margin: 0 auto 8% auto;
	width: 100%;
	padding-top: 29.35%;
	background-image: url("../img/school/school04.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 0;
}
#curriculum dl {
	position: relative;
	width:100%;
	margin-bottom: 4%;
	background-color: #ffffff;
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	overflow: hidden;
	justify-content: space-between;
	text-align: left;
}
#curriculum dt {
	width:24%;
	padding: 0 2%;
	border-bottom: dotted 1px #424242;
}
#curriculum dd{
	padding: 0 2%;
	border-bottom: dotted 1px #424242;
	width: 68% ;
}
#curriculum dd:after{
  display: block;
  content: "";
  clear: both;
}
#curriculum dt p, #curriculum dd p{ padding: 4% 0;}
#curriculum dd p a{ display: inline;}

/* assist */
#assist{
	position: relative;
	margin: 0 auto 8% auto;
	padding-top: 8%;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
	color: #444344;
	text-align: left;
}
#assist p{
	position: relative;
	margin: 0 auto;
	width: 90%;
	font-weight: bold;
}
#assist p.attention{
	position: relative;
	margin: 8% auto;
	width: 90%;
	font-weight: normal;
	color: #4187c7;
}
#assist ul{
	position: relative;
	margin: 4% auto;
	width: 90%;
	font-size: .14rem;
	background-color: #ffffff;
}
#assist ul li{
	position: relative;
	margin: auto;
	padding: 2% 2% 2% 2em;
	text-indent: -2em;
}
#assist ul li:before{
	position: relative;
	content: '●　';
}
a.btn{
	position: relative;
	margin: 6% auto;
	padding: 1em;
	width: 60%;
	border: solid 3px #4187c7;
	background-color: #ffffff;
	background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, rgba(64,127,185,1) 50%) !important;
	background-position: 0 0;
	background-size: 200% auto;
	transition: all 0.16s ease-out;
	display: block;
	color: #4187c7;
	font-weight: bold;
	font-size: .18rem;
	text-align: center;
}
.bosyu {
	width:97%;
	text-align: left;
	line-height: 40px;
}
.bosyu ul{
		margin: 20px auto;
		width: 100%;
		font-size: .18rem;
	}
	.bosyu ul li{
		padding: 0 0 15px 2em;
		text-indent: -2em;
	}
	.bosyu a {
		color: #4187c7;
	}
/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* 共通 */
	#school h3, #feature h3, #subject h3, #curriculum h3, #assist h3{padding-bottom: 50px;margin: 0 0 0 20px;font-size: .24rem;}
	.leftBox, .rightBox{
		position: relative;
		margin: 0 ;
		display: inline-block;
		width: 480px;
		vertical-align: top;
	}
	.rightBox{margin: 0 0 0 25px;}
	
	/* school */
	#school .contents-inner{
		margin: 0 auto;
		padding-top: 60px;
		background-image: url("../img/common/bg.jpg");
		background-size: 729px auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#school{padding-top: 0;margin: 0 auto 90px auto;background-image: none;}
	#school h2{
		margin: 0 0 30px 20px;
		width: 590px;
		padding-top: 33px;
		background-size: contain;
	}
	#school h4{
		margin: 40px 0 60px 20px;
		width: 430px;
		padding-top: 144px;
		background-size: contain;
	}
	#school p{ width: 454px; margin: 0 0 0 20px; line-height: 1.857em;}
	#school .rightBox{margin: 60px auto 0 auto; text-align: right;}
	#school .rightBox img{width: 415px;}
	#school .rightBox p{
		margin: 20px 0 0 auto;
		width: 205px;
		padding-top: 98px;
		background-size: contain;
	}

	/* obog */
	#obog{padding-top: 0;}
	#obog .contentsImage div{
		position: absolute;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		margin: auto;
		width: 438px;
		padding: 20px 0;
	}
	#obog .contentsImage div h3{font-size: .24rem;}
	#obog .contentsImage div p{
		margin: 15px auto 0 auto;
		width: 280px;
		font-size: .16rem;
	}

	/* feature */
	#feature{
		padding-top: 0;
		background-image: none;
		margin: 0 auto 100px auto;
	}
	#feature .contents-inner{
		margin: 0 auto;
		width: 1024px;
		background-image: url("../img/school/school_bg.jpg");
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	#feature .leftBox{margin: 150px 0 0 19px; }
	#feature .rightBox{margin: 120px 0 40px 0; padding-bottom: 0; width: 486px; }
	#feature ul li{
		margin: 20px auto;
		background-image: url("../img/school/school_bg02.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: 0 0;
		min-height: 260px;
		letter-spacing: -.4em;
	}
	#feature ul li:nth-child(2){background-image: url("../img/school/school_bg03.png");}
	#feature ul li:nth-child(2) .Box1{display: block;}
	#feature ul li .Box1{
		margin: 0 !important;
		display: inline-block;
		width: 465px;
		padding-top: 0;
		background-image: none;
		letter-spacing: normal;
		vertical-align: top;

	}
	#feature ul li .Box1 div{
		position: relative;
		margin: 30px 0 0 20px;
	}
	#feature ul li h4{
		margin: 0 auto 20px auto;
		font-size: .24rem;
		line-height: 1.9em;
	}
	#feature ul li .Box2{
		position: relative;
		display: inline-block;
		width: 400px;
		margin: 40px 0 0 30px;
		padding: 0;
		background-color: transparent;
		letter-spacing: normal;
		vertical-align: top;
		font-weight: bold;
		line-height: 1.688em;

	}

	/* subject */
	#subject .bg{padding-top: 1088px;}
	#subject table{width: 800px;}
	#subject table th, #subject table td{padding: 25px;}
	#subject table tbody tr td:nth-child(2){ width: 210px; }
	#subject table tbody tr td:nth-child(2){ width: 70px; }

	/* curriculum */
	#curriculum{
		padding-top: 110px;
		padding-bottom: 240px;
	}
	#curriculum dl {
		width:800px;
		margin-bottom: 0;
		margin-left: auto;
		margin-right: auto;
	}
	#curriculum dt {
		width:200px;
		padding: 30px;
	}
	#curriculum dd{
		padding:30px;
		width: 480px ;
	}
	#curriculum dt p, #curriculum dd p{ padding: 0;}
	#curriculum dd p span{ display: inline;}

	/* assist */
	#assist{
		margin: 0 auto 60px auto;
		padding-top: 60px;
	}
	#assist p{width: 455px;}
	#assist p.attention{
		margin: 60px auto 40px auto;
		width: 455px;
	}
	#assist ul{
		margin: 0 auto;
		width: 455px;
		font-size: .12rem;
	}
	#assist ul li{
		padding: 0 0 15px 2em;
		text-indent: -2em;
	}

	a.btn{
		margin: 45px auto;
		padding: 0;
		width: 455px;
		line-height: 50px;
	}
	a.btn:hover{color: #ffffff;}
	
	.bosyu {
	width:80%;
		margin: 0 auto;
		text-align: left;
		line-height: 40px;
		font-size: .18rem;
}
	.bosyu ul{
		margin: 20px auto;
		width: 100%;
		font-size: .18rem;
	}
	.bosyu ul li{
		padding: 0 0 15px 2em;
		text-indent: -2em;
	}
	.bosyu a {
		color: #4187c7;
	}
}