@charset "UTF-8";
/*
* main.css
*
*/



/* 
/* contact section
/* =================================================================== */

#contact{
width:100%;
margin:0 auto;
text-align:center;
padding:2em 0 3em 0;
overflow:hidden;
position:relative;
}

#contact .ctcnmtxt{
padding:1em 0;
text-align:center;
font-size:0.9em;
}

#contact .ctcimpact{
padding:1em 0 0 0;
text-align:center;
font-size:1.6em;
font-weight:bold;
}

#formtrans{
max-width:1000px;
width:90%;
margin:1em auto 2em auto;
list-style:none;
}

#formtrans li{
width:30%;
margin:0 8px;
display:inline-block;
font-size:1.1em;
font-weight:bold;
padding:1.5em 0 1.43em 1.5em;
background:#E2E2E2;
position:relative;
color:#92AAB3;
line-height:1;
}

#formtrans li.transnow{
background:#2A8CC4;
color:#FFFFFF;
font-size:1.3em;
padding:1.16em 0 1.16em 0.5em;
line-height:1;
}

#formtrans li.transnow:after{
border-left: 15px solid #2A8CC4 !important;
}

#formtrans li.transnm:after{
content:'';
display:block;
position:absolute;
box-sizing:border-box;
right:-15px;
top:0;
border-top: 34px solid transparent;
border-bottom:34px solid transparent;
border-left: 15px solid #E2E2E2;
}

#formtrans li.transst:before{
content:'';
display:block;
position:absolute;
box-sizing:border-box;
left:0;
top:0;
border-top: 34px solid transparent;
border-bottom:34px solid transparent;
border-left: 15px solid #FFFFFF;

}

#contact .formsection{
background:#f2f2f2;
border-radius:10px;
padding:2em 0;
max-width:800px;
margin:2em auto;
}

#contact .formsection:first-of-type{
margin-top:1em;
}

#contact .formsection h4{
font-size:1.2em;
padding-bottom:1em;
line-height:1.4;
}

#contact .formsection h4 .smt{
font-size:80%;
}

#contact .formsection .atten{
width:90%;
margin:0 auto;
text-align:left;
text-indent:-1em;
padding-left:1em;
font-size:90%;
}

#contact .fmb{
padding-left:0.2em;
}

#contact .appformBox textarea{
	height:100px;
}

#contact .appformBox .prap{
width:30%;
float:left;
clear:left;
padding:0.5em 0;
text-align:right;
}

#contact.confirm .appformBox .prap{
width:30%;
float:left;
clear:left;
padding:0.5em 0;
text-align:right;

}

#contact .appformBox .prapd{
width:60%;
float:left;
vertical-align:middle;
padding:0.3em 1em;
}

#contact .formsection .onlm{
  margin-bottom:1em;
} 


#contact .appformBox.howknoww{
text-align:center;
}

#contact .appformBox .syokusyu-b{
display:flex;
flex-wrap: wrap;
}

#contact .appformBox .syokusyu-b li{
width:calc(100% / 3);
}

#contact .appformBox .course-b{
display:flex;
flex-wrap: wrap;
}

#contact .appformBox .course-b li{
width:calc(100% / 2);
}

#contact .appformBox #schedcl{
padding:1em 2em;
}

#contact .appformBox li{
padding:0.3em 0;
}

#contact .appformBox .howknow li .hkad{
font-size:80%;
}

#contact.confirm .appformBox .prapd{
width:60%;
float:left;
vertical-align:middle;
padding:0.5em 1em;

}


#contact .appformBox .prapd select{
color: #556063;
}

#contact .banchi{
  display:none;
  color: #b41418;
  font-size:0.9em;
}

#contact .privacy .appformBox{
	width:60%;
}

#contact.confirm .privacy .appformBox{
  text-align:center;
}

#contact .privacy .pri-tx{
  padding-bottom:0.5em;
}

#contact .privacy input{
}

#privacyp{
	background:#FFFFFF;
	width:80%;
	margin:0 auto;
	padding:2em 3em;
}

#privacyp h2{
	font-size:1.1em;
}

#privacyp p{
	padding:1em 0;
}

#privacyp ol{
	padding:0.3em 1em;
}

#privacyp ol dt{
	font-weight:bold;
}

#privacyp ol dd{
	padding:0 0 1em 1em;
}

.btbackcamp{
text-align:center;
color:#000000;
font-size:1em;
font-weight:bold;
margin:2em 0;
}

.btbackcamp input{
display:inline-block;
padding:1em 0;
width:30%;
max-width:400px;
background:#FFFFFF;
color:#000000;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity:1;
border:3px solid #333333;
}

.btbackcamp input:hover{
background:#333333;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
opacity:0.9;
color:#FFFFFF;
border:3px solid #333333;
}


@media only screen and (max-width:900px) {
#contact .appformbutton{
width:80%;
margin:0 auto;
padding:0;
}
}

@media only screen and (max-width:768px) {
#formtrans li{
padding:1.7em 0 1.7em 1.5em;
}
#formtrans li.transnow{
padding:1.39em 0 1.39em 0.5em;
}
}

@media only screen and (max-width:620px) {
#contact .appformBox .prap{
font-size:90%;
}
#contact .privacy .appformBox{
  width:80%;
  font-size:0.9em;
}

#contact .formsection h4{
font-size:1.1em;
padding-bottom:1em;
line-height:1.4;
}



}

@media only screen and (max-width:535px) {
#contact .ctcnmtxt{
width:90%;
margin:0 auto;
}

#formtrans{
width:100%;
}

#formtrans li{
width:28%;
margin:0 8px;
font-size:0.9em;
padding:1.32em 0 1.32em 1.5em;
}

#formtrans li.transnow{
font-size:1em;
padding:1.1em 0 1.1em 0.5em;
}


#formtrans li.transnm:after{
border-top: 23px solid transparent;
border-bottom:23px solid transparent;
border-left: 15px solid #E2E2E2;
}

#formtrans li.transst:before{

border-top: 23px solid transparent;
border-bottom:23px solid transparent;
border-left: 15px solid #FFFFFF;

}

#contact .formsection{
background:#f2f2f2;
border-radius:0;
padding:2em 1em;
max-width:800px;
margin:1em auto;
}

#contact .appformBox .prap{
width:100%;
float:none;
clear:none;
padding:0.5em 0;
text-align:left;
}

#contact.confirm .appformBox .prap{
width:100%;
float:none;
clear:none;
padding:0.5em 0;
text-align:left;

}

#contact .appformBox .prapd{
width:100%;
float:none;
vertical-align:middle;
padding:0.3em 0;
}

#contact.confirm .appformBox .prapd{
width:100%;
float:none;
vertical-align:middle;
padding:0.3em 0;

}
.btbackcamp input{
width:50%;
}


}