@charset "utf-8";

/*
=========================================
  Top page
=========================================
*/

.main_visual{
	background:#f4f3e5;
}
.main_visual img{
	width:100%;
}
.main_visual p{
	padding:3rem 0;
	text-align:center;
	font-size:110%;
	line-height:2.3;
}
.main_visual strong{
	font-size:115%;
}
.main_visual strong.line{
	border-bottom: 1px solid #000;
}

@media screen and (max-width: 900px) {
.main_visual p{
	padding:2rem 5%;
	font-size:100%;
}
}
@media screen and (max-width: 600px) {
.main_visual p{
	line-height:1.6;
}
}

/*---------------------------------------
  #news
---------------------------------------*/
#news{
	padding: 5rem 0;
}

#news .title{
	background:#0062bd;
	width:160px;
	padding:20px;
	float:left;
	margin-right:30px;
}
#news h2{
	color:#fff;
	text-align:left;
	font-size:110%;
	letter-spacing:0.2rem;
	margin-bottom:3rem;
}
#news h2 strong{
	display:block;
	font-size:200%;
	letter-spacing:0.7rem;
}
#news .title a{
	background:#fff;
	border-radius:50px;
	padding:10px 5%;
	width:90%;
	display:block;
	text-align:center;
	color:#0062bd;
	transition: all 0.3s 0s ease;
}
#news .title a:hover{
	background:#fff55d;
}

@media screen and (max-width: 900px) {
#news .news_inner{
	clear:both;
}
#news h2 strong{
	font-size:180%;
	letter-spacing:0.5rem;
}
}	

#news dl{
	border-top:#ccc 1px solid;
	overflow:hidden;
}
#news dl:last-child{
	border-bottom:#ccc 1px solid;
}

#news dt{
	width:100px;
	padding:15px;
	float:left;
	font-family: 'Alatsi', sans-serif;
	letter-spacing: 0.1rem;
	text-align:center;
}
#news dd{
	background:#fff;
	padding:15px;
	margin-left:130px;
}
@media screen and (max-width: 900px) {
#news{
	padding: 3rem 0;
}	
#news .title{
	background:#0062bd;
	width:90%;
	padding:15px 5%;
	position:relative;
	margin:0;
}
#news .title a{
	position:absolute;
	bottom:15px;
	right:15px;
	width:100px;
}
#news h2{
	margin-bottom:0;
	padding-bottom: 0;
}
#news dt{
	width:100%;
	text-align:left;
	float:none;
	padding:10px 15px;
}
#news dd{
	width:94%;
	padding:0 3% 15px;
	margin-left:0;
}
}
@media screen and (max-width: 600px) {
#news{
	padding:2rem 0 1rem;
}	
}


/*---------------------------------------
  #point
---------------------------------------*/

#point{
	background:#d7ebff;
	padding: 5rem 0;
}

#point h2{
	color:#0062bd;
}

#point .box{
	width: 47%;
	margin: 0 1.5% 2.5rem 1.5%;
	background:#fff;
	border-radius: 10px;
	float:left;
}
#point .box img{
	width:80%;
	margin:-20px 10% 20px;
}
#point .box dl{
    padding: 10px 5%;
    width: 90%;
    min-height: 200px;
}
#point .box dt{
	font-size:130%;
	display:inline;
	font-weight:bold;
}
@media screen and (max-width: 1000px) {
#point .box dt{
	font-size:110%;
}
}
#point .box dd{
	padding-top:10px;
}





@media screen and (max-width: 900px) {
#point{
	padding-bottom: 0;
}
#point h2{
	padding-bottom:1rem;
}
#point h2 img{
	width:80%;
}
#point .line{
	margin-bottom:3rem;
}
#point .box{
	width: 96%;
	margin: 0 2% 4rem 2%;
	background:#fff;
	border-radius: 10px;
	float:left;
}
#point .box dl{
	min-height:100px;
	padding: 0 5% 20px;
}

}
@media screen and (max-width: 600px) {
#point{
	padding: 2rem 0;
}
#point .box{
	margin: 0 2% 2rem 2%;
}
}


/*---------------------------------------
  #plan
---------------------------------------*/

#plan{
	background:url(../img/plan_bg.jpg) repeat;
	padding: 6rem 0;
	position:relative;
}
#plan h2,
#environment h2{
	background: #0062bd;
	font-size:180%;
	letter-spacing:0.1em;
	font-weight:bold;
	padding:1rem 5%;
	color:#fff;
	display:block;
	width:300px;
	margin:0 auto;
	-webkit-transform: skew(-20deg);
	transform: skew(-20deg);
}

#plan .box_l,#plan .box_r{
	border:5px solid #0062bd;
	border-radius:10px;
	margin-top: 3rem;
	background:#fff;
	overflow:hidden;
}
#plan .box_r img{
	width:48%;
	float:left;
}
#plan .box_l img{
	width:48%;
	float:right;
}
#plan .box_r dl{
	width:44%;
	float:right;
	margin:0 4%;
}
#plan .box_l dl{
	width:44%;
	float:right;
	margin:0 4%;
}
@media screen and (max-width: 900px) {
#plan .box_l,#plan .box_r{
	margin-top: 2rem;
}
#plan .box_r img,#plan .box_l img{
	width:100%;
	float:none;
}
#plan .box_r dl,#plan .box_l dl{
	width:92%;
	float:none;
	margin:0 4% 1rem;
}
}
@media screen and (max-width: 600px) {
#plan .box_l,#plan .box_r{
	margin-top: 1.5rem;
}
}
#plan dt{
	border-bottom:2px solid #0062bd;
	padding:3rem 0 0.8rem;
	font-weight:bold;
	color:#0062bd;
	font-size:150%;
	margin-bottom: 1.5rem;
}
#plan dd{
	line-height:2;
}
@media screen and (max-width: 1050px) {
#plan dt{
	padding:2rem 0 0.5rem;
	font-size:130%;
	margin-bottom: 1rem;
	padding-top: 1rem;
}
#plan dd{
	line-height: 1.8;
}
#plan h3{
	height:65px;
}
}
#plan .box img{
	display:block;
}
#plan .box p{
	padding:1rem 5%;
	min-height:150px;
}
@media screen and (max-width: 930px) {
#plan .box p{
	min-height:180px;
}
}
@media screen and (max-width: 900px) {
#plan{
	padding: 2rem 0 3rem;
}
#plan h2,
#environment h2{
	padding:1rem 5%;
	width:90%;
	margin: auto;
	font-size: 140%;
	max-width: 300px;
}
#plan .box{
	float:none;
	width:95%;
	margin:1.5rem 2% 0 2%;
}
#plan .box p{
	min-height:100px;
}
#plan h3{
	height:auto;
	font-size:120%;
	padding:1rem 3%;
}
}

@media screen and (max-width: 600px) {
#plan{
	padding: 2rem 0;
}
#plan h2,
#environment h2{
	padding:0.6rem 5%;
	font-size: 120%;
	max-width: 230px;
}
}


/*---------------------------------------
  #environment
---------------------------------------*/

#environment{
	background:url(../img/kankyou_bg.jpg) no-repeat #f4f3e5;
	padding: 6rem 0;
}

#environment .box{
	margin: 3rem 0 0;
	background:#fff;
	overflow:hidden;
}
#environment img{
	width:38%;
	float:right;
}
#environment dl{
	width: 52%;
	float:left;
	padding: 4rem 5%;
}
#environment dt{
	font-size:150%;
	color:#0062bd;
	font-weight:bold;
	display:inline;
	background:linear-gradient(transparent 60%, #fcff00 60%);
}
#environment dd{
	line-height:2;
	margin-top:2rem;
}

@media screen and (max-width: 1050px) {
#environment dl{
	padding: 3rem 5% 0;
}
#environment dt{
	font-size:130%;
}
#environment dd{
	line-height:1.8;
	margin-top:1rem;
}
}

@media screen and (max-width: 900px) {
#environment{
	padding: 3rem 0;
	background-size:50%;
}
#environment .box{
	margin-top:2rem;
}
#environment img{
	width:100%;
	float:none;
}
#environment dl{
	padding: 1.5rem 5%;
	width:90%;
}
}
@media screen and (max-width: 600px) {
#environment .box{
	margin-top:1.5rem;
}
#environment{
	background-size:70%;
	padding: 3rem 0 2rem;
}
}

/*---------------------------------------
  #teacher
---------------------------------------*/

#teacher{
	padding: 3rem 0 6rem;
	overflow:hidden;
	background:url(../img/teacher_bg.jpg) no-repeat right top;
}
@media screen and (max-width: 1050px) {
#teacher{
	background:url(../img/teacher_bg.jpg) no-repeat left bottom;
}
}
@media screen and (max-width: 900px) {
#teacher{
	background:none;
}
}
#teacher h2{
	color:#0062bd;
	padding: 4rem 0 1rem 0;
}
#teacher img{
	float:left;
	width:40%;
}
#teacher .right_box{
	float:right;
	width: 55%;
	border-top:1px solid #333;
}
#teacher dl{
	background:#e7f3ff;
	border-bottom:1px solid #333;
	line-height:2;
}
#teacher dt{
	width:150px;
	text-align:center;
	float:left;
	padding:15px 0;
}
#teacher dd{
	margin-left:150px;
	background:#fff;
	padding:15px 20px;
}

@media screen and (max-width: 900px) {
#teacher{
	padding: 2rem 0;
}
#teacher h2{
	padding: 2.5rem 0 1rem 0;
}
#teacher img{
	width:100%;
	max-width: 400px;
	margin: 0 auto;
	display: block;
	float: none;
}
#teacher .right_box{
	width: 100%;
}
#teacher dt{
	width:90%;
	text-align:left;
	float:none;
	padding:10px 5%;
}
#teacher dd{
	margin-left:0;
	background:#fff;
	width:90%;
	padding:10px 5% 15px;
}
}
@media screen and (max-width: 600px) {
#teacher{
	padding: 0 0 2rem;
}
#teacher h3{
	margin-bottom:0;
}
}


/*---------------------------------------
  #couse
---------------------------------------*/

#couse{
	padding: 6rem 0;
	background: #f4f3e5;
}
#couse h2{
	color:#328c64;
}
#couse .inner section{
	background: #fff;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
}
@media screen and (max-width: 600px) {
#couse .inner section{
	padding-bottom: 1rem;
	margin-bottom: 2rem;
}
}
#couse .j_h_school h4,
#couse .h_school h4,
#couse .university h4{
	color:#fff;
	text-align:center;
	padding: 15px 10px;
}

#couse .j_h_school h4,
#couse .j_h_school h5:before{
	background: #328c64;
}
#couse .h_school h4,
#couse .h_school h5:before{
	background: #0062bd;
}
#couse .university h4,
#couse .university h5:before{
	background: #9c3949;
}

#couse h5{
	font-size: 160%;
	position: relative;
	display: inline-block;
	padding-left: 40px;
}
#couse .j_h_school h5{
	color:#328c64;
}
#couse .h_school h5{
	color:#0062bd;
}
#couse .university h5{
	color:#9c3949;
}

#couse h5:before{
  content: '';
  position: absolute;
  top: 32%;
  display: inline-block;
  width: 25px;
  height: 7px;
}

#couse h5:before {
  left:0;
}


#couse p{
	padding-top:1rem;
	clear: both;
}
@media screen and (max-width: 900px) {
#couse h5{
	font-size: 120%;
}
#couse p:last-child{
	text-align:right;
}
}
#couse table{
	border-top:#c2bda7 solid 1px;
	border-left:#c2bda7 solid 1px;
	margin-top:1rem;
}
#couse td,#couse th{
	border-bottom:#c2bda7 solid 1px;
	border-right:#c2bda7 solid 1px;
}
#couse p strong{
	text-decoration:underline;
}
#couse th{
	background:#fffcd3;
	padding:10px;
	text-align:center;
	font-size:120%;
}
#couse td{
	padding:10px;
	text-align:center;
	font-size:120%;
}
@media screen and (max-width: 900px) {
#couse th,#couse td{
	padding:5px;
	font-size:100%;
}
}
#couse td img{
	display:block;
	margin:5px auto;
}
#couse ul{
	margin-top:1.5rem;
}
#couse ul li{
	margin-top:0.2rem;
	font-size:80%;
}


#couse .money{
	padding: 3rem 5% 0;
}

#couse .left{
	width:70%;
	float:left;
}

#couse .right{
	width:25%;
	float:right;
	background:url(../img/plus.jpg) no-repeat left;
	padding-left:5%;
}
#couse .right th{
	background:#ece7de;
}


@media screen and (max-width: 900px) {
#couse .money{
	padding: 3rem 5% 0;
}
#couse .left{
	width:100%;
	float:none;
}
#couse .right{
	width:33.33%;
	padding-left: 50px;

}
}
@media screen and (max-width: 600px) {
#couse p{
	padding-top:0.5rem;
}
#couse table{
	margin-top:0.5rem;
}
#couse .money{
	padding: 1.5rem 5% 0;
}
#couse .right{
	width:66.66%;
	padding-left: 50px;

}
}

#couse .money table th{
	width:16%;
}


#couse .high_school h3{
	background:#328c64;
	color:#fff;
	text-align:center;
	padding:10px;
}




@media screen and (max-width: 900px) {
#couse{
	padding: 3rem 0;
}
}

@media screen and (max-width: 600px) {
#couse{
	padding: 2rem 0 1rem;
}
}


/*---------------------------------------
  #acsess
---------------------------------------*/

#acsess{
	padding:6rem 0;
}


#acsess .map_img{
	width: 30%;
	margin:0 5%;
	float:left;
	max-width: 400px;
}
#acsess h2{
	color:#0062bd;
}
#acsess h4{
	font-size:140%;
	padding:1.5rem 0 1rem;
}
#acsess p{
	padding-bottom:1rem;
}
#acsess .box{
	margin-left: 40%;
}
#acsess iframe{
	margin-top:2rem;
	border:1px solid #ccc !important;
}

#acsess .place{
	overflow:hidden;
	clear: both;
	padding: 2rem 0;
	max-width: 1060px;
	margin: 0 auto;
}
#acsess .place .right{
	float:right;
	width:49%;
}
#acsess .place .left{
	float:left;
	width:49%;
}



@media screen and (max-width: 900px) {
#acsess{
	padding:4rem 0;
	text-align:center;
}
#acsess .map_img{
	max-width:350px;
	width:100%;
	margin:0 auto;
	float:none;
}
#acsess .box{
	margin-left:0;
	text-align:left;
}
#acsess iframe{
	height:300px;
}
}
@media screen and (max-width: 600px) {
#acsess{
	padding:2rem 0;
}
#acsess p{
	line-height:1.5;
}
#acsess .place{
	padding:0;
}
#acsess .place .right{
	float:none;
	width:100%;
}
#acsess .place .left{
	float:none;
	width:100%;
	margin-bottom:1rem;
}
}


/*---------------------------------------
  #contact
---------------------------------------*/

#contact{
	background: #f0f3f5;
	padding:5rem 0;
}
#contact h2{
	color:#0062bd;
}

#contact .contact_inner{
	border-bottom:#666 1px solid;
}

#contact dl{
	border-top:#666 1px solid;
	overflow:hidden;
	background:#d5eaff;
}
#contact dt span{
	color:#ba0000;
	width:60px;
	display:block;
	float:left;
	font-size:85%;
}
#contact dt{
	width:250px;
	padding: 20px 10px;
	float:left;
}
#contact dd{
	padding:20px 10px;
	margin-left:270px;
	background:#fff;
}


#privacypolicy {
    font-size: 12px;
    overflow: scroll;
    width: 90%;
    height: 200px;
    margin: 2rem auto;
    background-color: #fff;
    padding: 2rem 5% 0 5%;
}
#privacypolicy h3{
	font-size:1.2rem;
	margin-bottom:0.5rem;
}
#privacypolicy h4{
	font-size:1rem;
}
#privacypolicy p{
	margin-bottom:1.5rem;
}


.submit {
	text-align:center;
}
.submit p{
	text-align:center;
	padding-bottom:1rem;
}
.submit .doui{
	font-weight:bold;
}



input[type=checkbox] {
display: none; /* checkboxを非表示にする */
}
.gakunen_label,.doui_label  {
position: relative; /* ボックスの位置を指定する */
padding: 0 0 0 42px; /* ボックス内側の余白を指定する */
}
.gakunen_label:hover:after,
.doui_label:hover:after  {
border-color: #0062bd; /* ボックスの境界線を実線で指定する */
}
.gakunen_label:after, .gakunen_label:before,
.doui_label:after, .doui_label:before{
position: absolute; /* ボックスの位置を指定する */
content: ""; /* ボックスのコンテンツ */
display: block; /* ブロックレベル要素化する */
top: 50%; /* 上部から配置の基準位置を決める */
}
.gakunen_label:after {
left: 15px; /* 左から配置の基準位置を決める */
margin-top: -10px; /* チェック枠の位置 */
width: 15px; /* ボックスの横幅を指定する */
height: 15px; /* ボックスの高さを指定する */
border: 2px solid #e4e4e4; /* ボックスの境界線を実線で指定する */
}
.gakunen_label:before,.doui_label:before {
left: 21px; /* 左から配置の基準位置を決める */
margin-top: -7px; /* チェックマークの位置 */
width: 5px; /* ボックスの横幅を指定する */
height: 9px; /* ボックスの高さを指定する */
border-right: 3px solid #0062bd; /* 境界線（右）のスタイルを指定する */
border-bottom: 3px solid #0062bd; /* 境界線（下）のスタイルを指定する */
transform: rotate(45deg); /* 要素を回転させる */
opacity: 0; /* 要素を透過指定する */
}
input[type=checkbox]:checked + .gakunen_label:before ,
input[type=checkbox]:checked + .doui_label:before{
opacity: 1; /* 要素を表示する */
}

.doui_label:after {
left: 15px; /* 左から配置の基準位置を決める */
margin-top: -10px; /* チェック枠の位置 */
width: 15px; /* ボックスの横幅を指定する */
height: 15px; /* ボックスの高さを指定する */
border: 2px solid #000; /* ボックスの境界線を実線で指定する */
}





dd input{
	border:#e4e4e4 2px solid;
	padding:6px 1%;
	width:98%;
}
dd input[type="text"]:focus{
  border: 2px solid #0062bd;
  outline: 0;
}
dd input[type="checkbox"]:focus{
  background: #0062bd;
}
textarea:focus {
  border: 2px solid #0062bd;
  outline: none;

}
textarea{
	border:#e4e4e4 2px solid;
	padding:6px 10px;
	width:90%;

}
.button {
  display       : inline-block;
  font-size:1rem;
  text-align    : center;
  cursor        : pointer;
  padding: 1.5rem 5%;
  background    : #0062bd;
  color         : #ffffff;
  line-height   : 1em;
  transition    : .3s;
  border:0;
  margin-top:2rem;
  border-radius: 50px;
}
.button:hover {
	background:#004a8e;
}

@media screen and (max-width: 900px) {
#contact{
	padding:3rem 0;
}
#contact dt{
	width:90%;
	padding:10px 5%;
	float:none;
}
#contact dd{
	padding:10px 5%;
	margin-left:0;
	width:90%;
}
.button {
  margin-top:1rem;
}
#privacypolicy h3{
	font-size:1rem;
}
}

@media screen and (max-width: 600px) {
#contact{
	padding:2rem 0;
}
.button {
  padding: 1rem 10%;
  margin-top: 0;
}
}

/*---------------------------------------
  #footer
---------------------------------------*/


#footer{
	overflow:hidden;
	padding: 3rem 0 2rem;
}
#footer h2{
	padding-bottom:1rem;
	letter-spacing:0.3rem;
}
#footer h2 span{
	font-size:50%;
}
#footer p{
	text-align:center;
}
#footer .tel a{
	font-size:250%;
	font-family: 'Alatsi', sans-serif;
	vertical-align: -5px;
	padding:0 10px;
}
#footer .f_navi{
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	text-align:center;	
	margin:1rem 0 2rem; 
}

#footer ul{
	display:inline-block;
	overflow:hidden;
}
#footer ul li{
	padding:1rem 20px 0.5rem;
	font-size:110%;
	float:left;
}
#footer small{
	color: #ccc;
	text-align:center;
	display:block;
}


@media screen and (max-width: 900px) {
#footer .tel a{
	font-size:200%;
}
#footer .f_navi{
	display:none;
}
#footer .tel span{
	display:block;
	margin:-10px 0 1rem;
}
}
@media screen and (max-width: 600px) {
#footer{
	overflow:hidden;
	padding: 2rem 0;
}
}



#thanks{
	margin-top:15rem;
}
#thanks p{
	text-align:center;
	padding:0 5% 10rem;
	width:90%;
}


@media screen and (max-width: 900px) {
#thanks{
	margin-top:8rem;
}
#thanks p{
	padding:0 5% 5rem;
	text-align:left;
}
}