/* LESS Document */

/*-----------------------------------------------------------
col
------------------------------------------------------------*/
.inner-1080{
	width: 1080px;
	margin-left: auto;
	margin-right: auto;
}
.inner-960{
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.inner-800{
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}
article{
	margin-bottom: 100px;
	overflow: hidden;
	
	p{
		font-size: 1.6rem;
		line-height: 2.0;
		margin-bottom: 20px;
	}
	img{
		margin-bottom: 20px;
	}
}
.col2{
	clear: both;
	overflow: hidden;

	section{
		float: left;
		width: 450px;
		height: auto;
		overflow: hidden;

		&:nth-child(2n){
			float: right;
		}
	}
	
	.badge-box{
		margin-top: -60px;
		
		.badge{
			z-index: 9999;
			position: relative;
			top: 60px;
		}
	}
}
.col3{
	clear: both;
	overflow: hidden;

	section{
		float: left;
		width: 300px;
		height: auto;
		margin-right: 30px;
		overflow: hidden;

		&:nth-child(3n){
			margin-right: 0;
		}
	}
}
.col4{
	clear: both;
	overflow: hidden;

	section{
		float: left;
		width: 225px;
		height: auto;
		margin-right: 20px;
		overflow: hidden;

		&:nth-child(4n){
			margin-right: 0;
		}
	}
}


/*-----------------------------------------------------------
global
------------------------------------------------------------*/
/* title */
.title-wrap-blue,
.title-wrap-deepblue,
.title-wrap-green,
.title-wrap-orange,
.title-wrap-pink{
	width: 100%;
	color: #fff;
	height: 280px;
	font-size: 4.8rem;
	overflow: hidden;
	font-weight: bold;
	text-align: center;
	
	img{
		width: auto;
		height: 80px;
		display: block;
		margin: 0 auto;
		padding-top: 50px;
	}
	h1{
	font-size: 4.8rem;
	}
	span{
		display: block;
		font-size: 1.4rem;
		font-weight: normal;
	}
}
.title-wrap-blue	{background: url(../images/bg-blue.jpg) repeat;}
.title-wrap-deepblue{background: url(../images/bg-deepblue.jpg) repeat;}
.title-wrap-green	{background: url(../images/bg-green.jpg) repeat;}
.title-wrap-orange	{background: url(../images/bg-orange.jpg) repeat;}
.title-wrap-pink	{background: url(../images/bg-pink.jpg) repeat;}
h2{
	color: #0064ae;
	font-size: 3.6rem;
	margin-bottom: 30px;
	padding-bottom: 30px;
	position: relative;
	text-align: center;
}
h2::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 4px solid #96d2ff;
	width : 120px;
	margin: 0 auto;
}
h3{
	color: #0064ae;
	font-size: 2.4rem;
	margin-bottom: 20px;
}
h4{
	color: #0064ae;
	font-size: 1.8rem;
	margin-bottom: 10px;
}	
strong{
	color: #e63c5a;
}

/* bt */
.read{
	text-align: right;
	
	a{
		color: #fff;
		font-size: 1.2rem;
		font-weight: bold;
		padding: 5px 20px;
		display: inline-block;
		background: #ff6e80;
		border-radius: 2px;
		
		&:hover{
			background: #e5415c;
		}
	}
}

/* table */
table{
	width: 100%;

	tr{
		text-align: left;
		font-size: 1.4rem;

		th{
			width: 160px;
			padding: 15px;
			background: #f9f9f9;
			border: 1px #ddd solid;
			box-sizing: border-box;
			vertical-align: middle;
			font-weight: normal;
		}
		td{
			padding: 15px;
			border: 1px #ddd solid;
			box-sizing: border-box;
			vertical-align: middle;
		}
	}
}


/*-----------------------------------------------------------
header
------------------------------------------------------------*/
header{
	min-width: 1175px;
	height: 100px;
	z-index: 9999;
	margin: 0 auto;
	position: relative;
	top: 0;

	#logo{
		float:left;

		img{
			margin-top: 20px;
			margin-left: 20px;
		}
		span{
			font-size: 1.2rem;
			margin-left: 5px;
		}
	}

	#header-tel{
		float: right;
		margin-top: 10px;
		margin-right: 10px;
	}
	#header-cv{
		float: right;
	}
}

#index-header{
	max-width: 1280px;
	height: 800px;
	margin: 0 auto;
	background: url(../images/fv-bg.jpg) 50% 0 no-repeat;
	background-size: cover;
	overflow: hidden;
}

#gm{
	clear: both;
	width: 100%;
	overflow: hidden;
	background: #0064ae;
	
	ul{
		width: 1080px;
		margin: 0 auto;
		
		li{
			float: left;
			width: 180px;
			height: 80px;
			font-size: 1.6rem;
			text-align: center;
			border-left: 1px #1680c1 solid;
			box-sizing: border-box;
			
			&:nth-child(4){
				display: none;
			}
			&:last-child{
				border-right: 1px #1680c1 solid;
			}
			&:hover{
				background: #1680c1;
			}

			a{
				color: #fff;
				display: block;
				padding: 15px 0;
			}
			img{
				height: 30px;
				display: block;
				margin: 0 auto;
				line-height: 0;
			}
		}
		#gm-elementary{border-bottom: 5px #ff8232 solid;}
		#gm-junior{border-bottom: 5px #00aaaa solid;}
		#gm-high{border-bottom: 5px #2e7def solid;}
		#gm-taiken{border-bottom: 5px #ff6e80 solid;}
	}
}

#bc{
	clear: both;
	color: #555;
	width: 1080px;
	font-size: 1.2rem;
	margin: 10px auto 50px auto;
}


/*-----------------------------------------------------------
content
------------------------------------------------------------*/
/* index */
#index-course{
	margin-top: -40px;
}

/* school */
#school-info{
	float: right;
	width: 640px;
}

/* elementary */
.syuuichi{
	margin-left: 10px;
	position: relative;
	top: 10px;
}

/* recruit */
#entry-bt{
	width: 600px;
	margin: 50px auto 0 auto;
	text-align: center;
	
	a{
		color: #ffffff;
		display: block;
		padding: 20px 0;
		font-size: 2.4rem;
		background: #0064ae;
		border-radius: 3px;
		
		&:hover{
			background: #e63c5a;
		}
	}
}

/* taiken */
#taiken{
	background: #fff8fa;
}
.nagare{
	
	tr{
		border: 1px #0064ae solid;
		box-sizing: border-box;
		
		th{
			color: #fff;
			font-size: 2.4rem;
			text-align: center;
			background: #0064ae;
			border: 0;
		}
		td{
			border: 0;
			vertical-align: top;
		}
	}
}
.nagare-arrow{
	margin-left: 65px;
}

/* price */
.price{
	margin-bottom: 70px;
	
	th,td{
		text-align: center;
	}
	.atention{
		width: 300px;
		font-size: 1.4rem;
		text-align: left;
	}
}
#gchild,#elementary{
	
	th{
		color: #fff;
		background: #ff8232;
	}
}
#junior{
	
	th{
		color: #fff;
		background: #00aaaa;
	}
}
#high{
	
	th{
		color: #fff;
		background: #1464b4;
	}
}

/* voice */
.voice-list{
	clear: both;
	overflow: hidden;
}
.voice-list li{
	float: left;
	width: 300px;
	margin-right: 30px;
	margin-bottom: 20px;
}
.voice-list li:nth-child(3n){
	margin-right: 0;
}
.voice-list li a:hover{
	text-decoration: none;
}
.example-image{
	width: 100%;
	height: auto;
	margin-bottom: 5px;
	border: 1px #ddd solid;
	box-sizing: border-box;
}


/*-----------------------------------------------------------
contact
------------------------------------------------------------*/
#contact{
	table{
		width: 100%;
		margin-bottom: 20px;

		tr{

			th{
				padding: 20px;
				width: 200px;
				text-align: left;
				font-weight: normal;
				vertical-align: middle;
				background: #f5f5f5;
				box-sizing: border-box;
				border: 1px #ddd solid;
			}
			td{
				padding: 20px;
				vertical-align: middle;
				box-sizing: border-box;
				border: 1px #ddd solid;
				background: #fff;
			}
		}
	}

	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="number"],
	input[type="tel"],
	select,
	textarea{
		padding: 10px;
		border: 2px #ddd solid;
		box-sizing: border-box;
		border-radius: 4px;
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		-o-appearance: none;
		appearance: none;
	}
	
	select{
		margin-right: 10px;
	}

	#privacy{
		width: 100%;
		padding: 20px;
		font-size: 2.0rem;
		border: 1px #ddd solid;
		box-sizing: border-box;

		.roll{
			width: 100%;
			height: 240px;
			padding: 20px;
			margin-top: 20px;
			font-size: 1.4rem;
			border: 1px #ddd solid;
			box-sizing: border-box;
			overflow: scroll;
		}
	}
}


/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
#cv{
	width: 960px;
	height: 220px;
	margin: 0 auto 50px auto;
	position: relative;
	background: url(../images/cv-bg.jpg) no-repeat;
	
	img{
		position: absolute;
		top: 115px;
		left: 430px;
	}
}
#footer-bn{
	margin-bottom: 30px;
}
footer{
	width: 100%;
	padding: 50px 0;
	overflow: hidden;
	background: #0064ae;
	
	#footer-logo{
		float: left;
		width: 260px;
		margin-top: 40px;
		margin-right: 100px;
		text-align: center;
		
		img{
			display: block;
			margin-bottom:5px;
		}
		span{
			color: #fff;
			font-size: 1.2rem;
			display: inline-block;
		}
	}
	
	.footer-nav{
		float: left;
		color: #fff;
		width: 200px;
		font-size: 1.2rem;
		
		ul{
			margin-bottom: 10px;
			
			.footer-nav-title{
				font-size: 1.4rem;

				&::before{
					content: "→";
					margin-right: 5px;
				}
			}
			a{
				color: #fff;
			}
		}
	}
}

address{
	color: #999;
	padding: 20px 0;
	font-size: 1.2rem;
	text-align: center;
	font-style: normal;
}

#page-top{
	z-index: 9999;
	position: fixed;
	bottom: 30px;
	right: 0;
	font-size: 1.4rem;

	a{
		color: #fff;
		width: 80px;
		display: block;
		padding: 15px 0;
		text-align: center;
		background: #0064ae;
		border: 1px #fff solid;
		box-sizing: border-box;

		&:hover{
			background: #e63c5a;
			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			-ms-transition: all 0.2s;
			-o-transition: all 0.2s;
			transition: all 0.2s;
		}
	}
}