/* LESS Document */

/*-----------------------------------------------------------
layout
/*----------------------------------------------------------*/
body{
	max-width:640px;
	margin:0 auto;
}
.wrap{
	width:100%;
	height:auto;
	overflow:hidden;
}
.inner{
	max-width:640px;
	height:auto;
	padding:0 10px;
	overflow:hidden;
}
main{
	article{
		clear:both;
		display:block;
		overflow:hidden;
	}
}
/*----------------------------------------------------------*/

/*-----------------------------------------------------------
class
/*----------------------------------------------------------*/
/* title */
h2{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 30px;
	
	.dice{
		color: #ffffff;
		font-size: 14px;
		width: 60px;
		height: 30px;
		text-align: center;
		background: url(../images/icon-dise.png) no-repeat;
		background-size: 60px 30px;
		margin: 0 auto;
		padding-top: 3px;
	}
}
h3{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 10px;
}
h4{
	padding:10px;
	color:#ffffff;
	font-size:20px;
	background:#1e8de0;
	border-radius:3px;
}

/* table */
table{
	width:100%;
	font-size:14px;
	text-align:left;
	font-weight:normal;
	overflow:hidden;
	
	tr{
		width:100%;
		
		th{
			width:100%;
			padding:10px;
			display:block;
			vertical-align:middle;
			box-sizing:border-box;
			border:1px #ddd solid;
			background:#f5f5f5;
		}
		td{
			padding:10px;
			display:block;
			vertical-align:middle;
			box-sizing:border-box;
			border:1px #ddd solid;
			background:#ffffff;
		}
	}
}

/* acd */
#acd-menu{
	dt{
		color:#fff;
		width:100%;
		padding:15px;
	}
	dd{
		ul{
			background:#333;
			margin-bottom:0;
			
			li{
				clear:both;
				overflow:hidden;
				border-top:1px #555 solid;
					
				&:before{
					content:">";
					float:left;
					color:#17ccbe;
					position:relative;
					top:15px;
					margin-left:15px;
					margin-right:10px;
				}
			}
		}
	}
}

/* res */
.res-center,.res-left,.res-right{text-align:center;}
/*----------------------------------------------------------*/

/*-----------------------------------------------------------
header
------------------------------------------------------------*/
header{
	width:100%;
	height:70px;
	overflow:hidden;
	background:#ffffff;
	/*position:fixed;*/
	top:0;
	left:0;
	z-index:9999;
	
	#header-bt{
		width:140px;
		
		a{
			width:70px;
			float:left;
		}
	}
}

.over_menu_wrap{
	display: none;
	background: #ffe;
	text-align: center;
	
	ul{
		li{
			margin: 10px 0;
		}
	}
	
	.close{
		display: inline-block;
		padding: 5px 20px;
		background: #1591ed;
		border-radius: 5px;
		font-size: .8em;
		color: #fff;
	}
}
/*----------------------------------------------------------*/

/*-----------------------------------------------------------
main
------------------------------------------------------------*/
#top-image{
	width:320px;
	height:270px;
	background: url(../sp/images/top-image.jpg) 50% 0 no-repeat;
	background-size:100% auto;
	
	a img:hover{
		opacity: 1;
		filter: alpha(opacity=100);
		-ms-filter: "alpha(opacity=100)";
	}
	
	#top-image-bt1{
		position:relative;
		top:115px;
		left:125px;
	}
	
	#top-image-bt2{
		position:relative;
		top:77px;
		left:95px;
		z-index:99;
	}
	
	#top-image-bt3{
		position:relative;
		top:80px;
		left:93px;
	}
}
#anc-top{
	/*margin-top:-70px;
	padding-top:140px;*/
}
#anc-miryoku,
#anc-miryoku2,
#anc-miryoku3,
#anc-form{
	margin-top:-70px;
	padding-top:70px;
}
#trophy{
	color: #f4a025;
}
#certificate{
	color: #f48cac;
}
#badge{
	color: #5ec0fc;
}
#check-li{
	overflow: hidden;
	margin-bottom: 10px;
}
#check-li li{
	max-width: 100%;
	padding: 10px;
	margin: 0 10px 10px 10px;
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background: #29ba8b;
}
#course{
	background-repeat:no-repeat;
	background-position:center bottom;
	background-image:url(../images/course-bg.png);
}
#price{
	width:100%;
	
	h2{
		position:relative;
		top:-30px;
	}
}
#school{
	ul{
		li{
			float:left;
			width:48%;
			height:300px;
			margin-right:3%;
			margin-bottom:20px;
			background:#ffffff;
			border-bottom:3px #1591ed solid;
			font-size:14px;
			
			&:nth-child(2n){
				margin-right:0px;
			}
			a{
				
				&:hover{
					text-decoration:none;
				}
			}
			p{
				padding:5px;
			}
		}
	}
}

/*----------------------------------------------------------*/

/*-----------------------------------------------------------
▼　アコーディオンのcss　▼
------------------------------------------------------------*/

.acd dt {
	position:relative;
	cursor:pointer;
	max-width: 100%;
	color: #333;
	background: #fff;
	padding: 0px 45px 0px 20px;
	
}
/*▼*/
.acd dt::before {
	content:'\25BC';
	color:#ffa100;
	position:absolute;
	font-size:28px;
	top:35%;
	right:20px;
	line-height: 1;
}
/*▲*/
.acd .open::before {
	content:'\25B2';
	color:#ffa100;
	position:absolute;
	font-size:28px;
	top:35%;
	right:20px;
	line-height: 1;
}
.acd dd{
	padding: 20px;
	margin: 0;
	background:#eee;
}

/*-----------------------------------------------------------
▲　アコーディオンのcss　▲
------------------------------------------------------------*/

/*-----------------------------------------------------------
form
------------------------------------------------------------*/
#form{
	form{
		input[type="text"],
		input[type="password"],
		input[type="search"],
		input[type="tel"],
		input[type="url"],
		input[type="email"],
		input[type="nomber"],
		input[type="date"],
		select,
		textarea{
		-webkit-appearance:none;
		-moz-appearance:none;
		-ms-appearance:none;
		-o-appearance:none;
		appearance:none;
		}
		dt{
			padding:10px 0 0 10px;
		}
		dd{
			padding:10px;
			border-bottom:1px #ddd solid;
			box-sizing: border-box;
			
			img{
				float:right;
				z-index:100;
				position:relative;
				margin:-32px 10px 0 0;
			}
		}
		.form-in dd input,
		.form-in dd ol li select{
			width: 100%;
			height: 50px;
			padding:0 5px;
			font-size:18px;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			border:2px #ddd solid;
		}
		.form-in dd textarea{
			width: 100%;
			padding:10px 5px;
			font-size:18px;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			border:2px #ddd solid;
		}
		.radio-bt input {
			display: none;
		}
		.radio-bt label{
			display: table-cell !important;
			cursor: pointer;
			padding: 15px 10px !important;
			border-top:1px #ddd solid;
			border-bottom:1px #ddd solid;
			border-left:1px #ddd solid;
			background: linear-gradient(#fff, #ddd);
			font-size: 12px;
			text-align: center;
			vertical-align:middle;
			border-radius: 0 !important;
		}
		.radio-bt1 label{
			width: 10% !important;
		}
		.radio-bt2 label{
			width: 10% !important;
		}
		.radio-bt3 label{
			width: 20% !important;
		}
		.radio-bt label:first-of-type{
			border-radius: 5px 0 0 5px !important;
		}
		.radio-bt label:last-of-type{
			border-right:1px #ddd solid;
			border-radius: 0 5px 5px 0 !important;
		}
		.radio-bt input[type="radio"]:checked + .switch-on {
			background: #a1b91d !important;
			color: #fff !important;
		}
		.radio-bt input[type="radio"]:checked + .switch-off {
			background: #e67168 !important;
			color: #fff !important;
		}
		.check-bt label{
			padding:20px 10px !important;
			border:1px #ddd solid !important;
		}
		#privacy{
			margin:10px;
			
			.roll{
				font-size:14px;
				height:180px;
				padding:5px;
				margin-top:5px;
				overflow:scroll;
				border:1px #ddd solid;
				box-sizing:border-box;
			}
		}
	}
}
/*----------------------------------------------------------*/

/*-----------------------------------------------------------
footer
------------------------------------------------------------*/
#page-top{
	z-index:100;
	position:fixed;
	bottom:20px;
	right:20px;
	font-size:12px;
	
	a{
		color:#fff;
		width:80px;
		display:block;
		padding:10px 0;
		text-align:center;
		border-radius:5px;
		/*background:#7bd7ff;*/
		background:#FF7800;
		text-decoration: none;
	}
}
/*----------------------------------------------------------*/