/* CSS Document */
html{ height:100%;}
body{ background:#fff; height:100%; color:#7d8488; position:relative;}
a{ color:#7d8488;}
h1,h2,h3,p{ line-height:1.2em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
.wrap{ width:1192px; max-width:100%; margin:0 auto; position:relative;}
h1{ font-size:2.4em; line-height:1.4em; max-width:95%; margin:0 auto; padding:20px 0;}
h1 span{ font-size:0.5em; display:block; line-height:1.6em;}
p{ font-size:1.6em; line-height:1.6em;}
p,h1{ max-width:95%; margin:0 auto;}
.heart{ width:464px; max-width:40%; position:absolute; z-index:0; top:-70px; right:0;}

.waku{ background:#fff; border:none; vertical-align:top;}
.waku img{ vertical-align:bottom;}
.contents_wrap{ position:relative;}

/*トグルボタン*/
#top_header #navi_toggle{ position:absolute; z-index:10;}
#navi_toggle{ display:none; padding-top:60px; background:rgba(255,255,255,0.6); position:relative; z-index:1;}
#navi_toggle ul{ margin:0px 15px 0 0; }
#navi_toggle ul li{ text-align:right; padding:5px 0;}

#menubtn{
	width:40px;
	height:41px;
	display:none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
header ul.contact_btn{ width:200px; max-width:50%; margin:25px auto 20px 25px; position:absolute; top:0; left:0;}
header ul.contact_btn li{ display:inline-block;}
header ul.contact_btn li.tel{ max-width:65%;}
header ul.contact_btn li.mail{ max-width:32%;}
header .left_box{ width:340px; float:left;}
header .left_box h1.logo{ padding:20px 0 20px 30px; float:left; position:relative; z-index:2; }
header .left_box ul.contact_btn{ width:200px; max-width:100%; margin:15px auto 20px 120px; position:relative; }
header ul.nav { padding:45px 0 20px;}
header ul.nav li{ display:inline-block; margin:0 15px 5px 0; font-size:1.2em; line-height:1.4em;}
header { overflow:hidden; position:relative; z-index:9;}
header.top_header {z-index:0;}


/*フッター*/
#footer_wrap{ width:100%; background:#4472B0; color:#F1CCD3; padding:20px 0;}
footer{ width:980px; max-width:95%; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between; flex-wrap:wrap；}
footer .left_box{ width:270px; padding-right:30px; text-align:center; font-size:1.2em; line-height:1.2em;}
footer h1{ width:121px; padding:5px 0 10px;}
footer ul.contact_btn{ }
footer ul.contact_btn li.tel img{ width:100px;}
footer ul.contact_btn li.mail img{ width:50px;}
footer .right_box{ width:calc(100% - 270px);}
footer .right_box .jba_logo{ width:120px; margin:10px 0 0 auto;}
footer ul.nav{ padding:20px 0 0 0px; text-align:left;}
footer ul.nav li{ display:inline-block; margin-right:20px; font-size:1.2em; line-height:1.6em;}
footer ul.nav li a{ color:#F1CCD3;}

/*トップページ*/

#top_mainimage{ width:1192px; max-width:100%; margin:0 auto; position:relative;}
#top_mainimage img.mainimage{}
#top_mainimage img.logo{ max-width:27%; position:absolute; top:16%; left:18%;}
#top_mainimage img.jba_logo{ width:200px; max-width:100%;}
#top_mainimage .contact_btn_wrap { position:absolute; top:0; left:calc(28% - 100px); width:200px; max-width:30%; margin:25px 0 20px 0; text-align:left; }
header.top_header ul.contact_btn{ width:200px; max-width:100%; position:relative; text-align:center; margin:0;}




#top .sec1{ margin:-100px 0 0 0; position:relative; z-index:1;}
#top .sec1 .image1{ padding-right:200px; max-width:13%;}
#top .sec1 .image2{ padding-right:30px; max-width:20%;}

#top .sec2{ background:#4472B0; color:#F1CCD3; position:relative; margin-top:-60px;}
#top .sec2 .image3{ max-width:13%; position:absolute; top:0; left:23%;}
#top .sec2 .image4{ max-width:13%; position:absolute; bottom:5%; right:29%;}
#top .sec2 ul{ width:1100px; max-width:95%; margin:0 auto;}
#top .sec2 ul li{ width:214px; display:inline-block; margin:0 30px 30px 0;}
#top .sec2 ul li:nth-child(4),#top .sec2 ul li:nth-child(8){ margin:0 0 30px 0;}
#top .sec2 ul li img{
	width:169px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
	 padding:15px;
	 background:#fff;
}
#top .sec2 ul li a:hover img{width:176px;padding:10px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}

#top .sec3 ul{ margin:20px auto;}
#top .sec3 ul li{ display:inline-block; margin-right:20px; margin-bottom:10px;}
#top .sec3 ul li img.border{ border:1px solid #CCCCCC;}
#top .sec4{ background:#4472B0; color:#F1CCD3; position:relative;}
#top .sec4 .image5{ max-width:13%; position:absolute; top:2%; left:15%;}
#top .sec4 .image6{ max-width:15%; position:absolute; bottom:0; right:28%;}
#top .sec4 h1{ position:relative; width:350px; margin:0 auto;}
#top .sec4 h1 img{ position:absolute; right:50px; top:5px;}
#top .sec4 ul.riyuu1{ width:800px; margin:20px auto; max-width:95%;}
#top .sec4 ul.riyuu1 li{ display:inline-block; margin-right:10px; padding-left:22px; position:relative; margin-bottom:10px; font-size:1.5em; line-height:1.4em;}
#top .sec4 ul.riyuu1 li:before{ content:url(../images/top_icon1.png); padding-right:5px; position:absolute; left:0; top:1px;}
#top .sec4 ul.riyuu2 li{ width:310px; height:373px; margin-right:5px; background:url(../images/top_image5.png); background-size:cover; position:relative; display:inline-block; color:#333;}
#top .sec4 ul.riyuu2 li h2{ font-size:1.6em; line-height:1.4em; color:#ef8200; font-weight:bold; padding-bottom:8px;}
#top .sec4 ul.riyuu2 li p{ font-size:1.4em; line-height:1.2em; max-width:100%;}
#top .sec4 ul.riyuu2 li div{ width:210px; height:190px; margin:0 auto; text-align:center; position:absolute; bottom:25px; left:0; right:0;}

#top .sec5 h1{ width:400px; padding:20px 0 0 100px;  position:relative; margin:20px auto;}
#top .sec5 h1 img{ position:absolute; left:0; top:0;}
#top .sec5 ul { margin:30px auto;}
#top .sec5 ul li{ display:inline-block; margin-right:15px; margin-bottom:10px;}

/*その他のページ*/

#rinen .contents h1{ margin-top:-100px;}
#rinen .contents h2{ font-size:2em; line-height:1.4em; padding:0 0 7px 0;}
#rinen .contents p{ font-size:1.6em; line-height: 1.4em; padding:0 0 20px 0;}
#rinen .contents{ padding-bottom:100px;}

#price .contents_wrap{ background:#4472B0; color:#EFCEDA;}
#price .contents{ width:750px; margin:0 auto; max-width:95%;}
#price .contents h1{ margin:-100px auto 0; padding:0;}
#price .contents h2{ color:#EFCEDA; font-size:2em; line-height:1.2em; position:relative; text-align:left; padding-top:30px;}
#price .contents h2:before { content:url(../images/price_image1.png); position:absolute; width:36px; left:-46px; top:10px;}
#price .contents p{ max-width:100%; font-size:1.6em; line-height:1.4em; padding:5px 0 15px 0;}
#price .contents p.text1{ text-align:left; position:relative; z-index:1;}
#price .contents p.text2{ text-align:left; font-size:1.6em;}
#price .contents h3{ font-size:1.8em; line-height:1.2em; text-align:left; margin:0;}
#price .contents .img_box{ position:relative;}
#price .contents .image2{ position:absolute; right:-30px; top:0;}
#price .contents p.other_course{ background:#FFFFCC; color:#111; padding:15px; font-size:1.8em;}


#price th,#price td{ color:#666; font-size:1.6em; line-height:1.4em; border-bottom:1px solid #e85282; border-right:1px solid #e85282; padding:13px 5px;}
#price th{ background:#fdede4; font-weight:normal;}
#price td{ background:#fff;}
#price th.class{ background:#f8f398;}
#price table{ width:100%; table-layout:fixed; box-sizing: border-box; border:2px solid #e85282; margin:5px auto;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
  border-spacing: 0;
  border-collapse: separate;
  
  }
#price table tr:last-child td ,#price table tr:last-child th {
  border-bottom: none;
}

#price table tr th:last-child ,#price table tr td:last-child {
  border-right: none;
}

#off .contents{ padding:60px 0 100px;}
#off p{ width:780px; max-width:90%; margin:0 auto 10px; text-indent:-1em; text-align:left; padding-left:60px;}

#setumeikai .contents_wrap{ padding:20px 0 80px;}
#setumeikai .contents{ width:900px; max-width:95%; margin:0 auto; position:relative;}
#setumeikai .contents img.image1{ position:absolute; left:0; top:100px; z-index:-1;}
#setumeikai .contents h1{ padding:0;}
#setumeikai .contents dl{ width:440px; max-width:100%; margin:0px auto 20px;}
#setumeikai .contents dl dt{ font-size:2em; line-height:1.2em; padding:17px 0 3px; font-weight:bold;}
#setumeikai .contents dl dd{ font-size:1.6em; line-height:1.4em; border-bottom:1px solid #bfbfbf; padding:3px 0 20px;}

#outline .sec1{ background:#4472B0; color:#EFCEDA;}
#outline .contents dl { width:700px; max-width:100%; margin:0 auto; position:relative; padding-bottom:30px;}
#outline .contents dl dt,#outline .contents dl dd{ font-size:1.6em; line-height:1.6em; text-align:left;}
#outline .contents dl dt{ padding:10px 0 10px 30px; width:90px; float:left;}
#outline .contents dl dd{  padding:10px 0 10px 130px; border-bottom:1px solid #bfbfbf;}
#outline .contents dl dd:last-child,#outline .contents dl dd.image1{ border:none;}
#outline .contents dl dd.image1{ position:absolute; left:-75px; bottom:-10px; margin:0; padding:0;}
#outline .contents .sec2{ width:640px; max-width:95%; margin:10px auto 60px;}
#outline .contents .sec2 h2{ width:200px; font-size:2em; line-height:1.6em; padding:0 10px; position:relative; margin:20px 0 10px;}
#outline .contents .sec2 h2:before, #outline .contents .sec2 h2:after {
	content: '';
	width: 8px;
	height: 100%;
	position: absolute;
}

#outline .contents .sec2 h2:before {
	border-left: double 3px #7d8488;
	border-top: solid 1px #7d8488;
	border-bottom: solid 1px #7d8488;
	top: 0;
	left: 0;
}

#outline .contents .sec2 h2:after {
	border-right: double 3px #7d8488;
	border-top: solid 1px #7d8488;
	border-bottom: solid 1px #7d8488;
	top: 0;
	right: 0;
}

#outline .contents .sec2 p{ max-width:100%; text-align:left; font-size:1.6em; line-height:1.4em;}
#outline .contents .sec2 p.text2{ font-size:1.6em; padding-top:5px;}
#outline .contents .sec2 p.text2 span{ font-size:1.4em;}


/*グーぐるマップ*/
.gmap {
position: relative;
padding-bottom: 60%;
height: 0;
overflow: hidden;
width:640px;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#privacy .contents{ width:700px; margin:0 auto; max-width:95%; padding:50px 0 100px; position:relative;}
#privacy .contents p,#privacy .contents ul{ font-size:1.4em; line-height:1.4em; padding:5px 0; margin:0 auto 10px; text-align:left; max-width:98%;}
#privacy .contents li{ text-indent:-1.5em; padding-left:1.5em;}
#privacy .contents p.text1{ font-size:1.4em; line-height:1.6em;}
#privacy .contents p.text2{ margin:0 auto; padding-bottom:0;}
#privacy .contents h2{ font-size:1.6em; line-height:1.4em; text-align:left;}
#privacy .contents img.image1{ position:absolute; right:40px; bottom:0; z-index:-1;}

#goseikon .contents{ width:650px; max-width:95%; margin:-100px auto 50px; position:relative;}
#goseikon .contents section{ padding:15px 0 15px 70px; position:relative;}
#goseikon .contents .sec0{ padding:0;}
#goseikon .contents img.icon{ position:absolute; left:0; top:0;}
#goseikon .contents h2{ font-size:2em; line-height:1.4em; text-align:left; margin-bottom:5px;}
#goseikon .contents p{ font-size:1.6em; max-width:100%; padding:0; margin:0; line-height:1.4em; text-align:left;}
#goseikon .contents h3{ font-size:1.8em; line-height:1.4em; text-align:left; margin:15px 0 3px; }
#goseikon .contents ul{ margin-left:55px; text-align:left;}
#goseikon .contents ul li{ font-size:1.4em; line-height:1.4em;}
#goseikon .contents ul li:before{ content:"○"; padding-right:5px;}

#contact .contents{ width:800px; margin:0 auto 0px; max-width:95%; position:relative; padding-bottom:40px;}
#contact .contents ul.other_contact{ max-width:90%; margin:0 auto;}
#contact .contents ul.other_contact li{ display:inline-block;}


#contact .contents h2.title2{ padding:15px 0 0; border-top:1px solid #666;}
#contact .contents p{ font-size:1.6em; padding:5px 0;}
#contact .contents p.text2{ font-size:1.6em; line-height:1.4em; padding:0 0 5px;}
#contact .contents .image1{ position:absolute; left:-30px; bottom:50px; z-index:-1;}
#contact .thanks p{ text-align:left;}
#contact .thanks h1{ font-size:2em;}
#membership .contents ul{ margin:40px auto;}
#membership .contents ul li{ border:1px solid #CCCCCC; display:inline-block;}


/*1020以下 */
@media screen and (max-width: 1020px){
header ul.nav{text-align:left;}
header ul.nav li{  margin-right:10px; }

.heart{ top:-40px;}
#price .contents h2:before { position:relative; width:36px; left:0; top:10px;}

}


/*960以下
 */
@media screen and (max-width: 960px){
#top .sec1{ margin:-50px 0 0 0;}
#off p{ padding-left:5%;}

#top .sec2 ul li{ max-width:20%; margin:0 5% 5% 0;}
#top .sec2 ul li:nth-child(4),#top .sec2 ul li:nth-child(8){ margin:0 0 5% 0;}
#top .sec2 ul li img{ width:94%; padding:3%;}
#top .sec2 ul li a:hover img{ width:100%; padding:0; }
#price .contents .image2{ position:absolute; right:0px; top:0;}

}


/*800以下
 */
@media screen and (max-width: 800px){

#top .sec2 .image4{bottom:0px;}


}





/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
#menubtn{ display:block;}
header ul.nav,header .left_box ul.contact_btn{ display:none;}
header #navi_toggle ul.contact_btn{ width:160px; max-width:100%; margin:0px 0 20px auto; text-align:right; position:relative; }

header .left_box{ width:190px; float:left;}
header .left_box h1.logo{ padding:10px 0 0px 10px; float:none; text-align:left; }

header ul.contact_btn{ width:200px; margin:5px auto 5px 0;}

#top_mainimage .contact_btn_wrap { margin:10px 0px 20px 0px;}

.heart{ top:-20px;}

footer .left_box{ margin:0 auto;}
footer ul.nav{ padding:20px 20px 0 20px; }
footer{  display:block; }
footer .right_box{ width:100%;}
footer .right_box .jba_logo{ margin:20px auto;}


#top .sec1 .image1{ padding-right:50px;}

#top .sec2{  margin-top:-10px;}
#top .sec4 .image6{ max-width:20%; right:10%;}
#top .sec4 .image5{ max-width:13%; top:0; left:10%;}

#price .contents h1{ margin:-20px auto 0; padding:0;}
#price .contents h1 img{ width:110px;}

#privacy .contents img.image1{ right:0px; bottom:0;}
#goseikon .contents{  margin:-60px auto 50px; }
#goseikon .contents ul{ margin-left:25px; }
#goseikon .contents p{ font-size:1.4em; }

#outline .contents dl dt,#outline .contents dl dd{ font-size:1.4em;}
#outline .contents .sec2 h2{font-size:1.8em;}

#outline .contents .sec2 p{font-size:1.4em;}
#outline .contents .sec2 p.text2{ font-size:1.4em;}
#outline .contents .sec2 p.text2 span{ font-size:1.2em;}

#price .contents h2{ font-size:1.6em; }
#price .contents p{ font-size:1.4em; }
#price .contents p.text2{ font-size:1.3em;}
#price .contents h3{ font-size:1.6em; }
#price th,#price td{ font-size:1.3em;}
@media screen and (max-width: 560px){



@media screen and (max-width: 600px){

#top_mainimage img.jba_logo{ width:200px; max-width:70%;}
#top_mainimage .contact_btn_wrap {  max-width:40%; left:10%; text-align:center;}
header.top_header ul.contact_btn{ width:150px; max-width:100%; margin:0 auto;}
header.top_header ul.contact_btn li{ max-width:100%;}
}

/*560以下 */
@media screen and (max-width: 560px){
br.nosp{ display:none;}
h1{ font-size:2em; line-height:1.2em; padding:20px 0 10px;}
h1 span{ font-size:0.7em; display:block; line-height:1.4em;}
p{ line-height:1.6em;}


#top .sec2 ul li{ max-width:22%; margin:0 2% 2% 0;}
#top .sec2 ul li:nth-child(4),#top .sec2 ul li:nth-child(8){ margin:0 0 2% 0;}

#top .sec5 h1{ max-width:95%; padding:0 0 0 0;  position:relative; margin:10px auto;}
#top .sec5 h1 img{ position:relative; display:block; margin-top:-10px;}
#top .sec5 ul { max-width:90%; margin:20px auto;}
#top .sec5 ul li{ display:block; margin:5px auto;}



#off .contents{ padding:30px 0 40px;}

#outline .contents dl dd.image1{ position:absolute; left:0px; bottom:-30px;}
#outline .contents dl{ padding-bottom:40px;}
#outline .contents dl dt{ padding:10px 0 10px 10px; width:50px;}
#outline .contents dl dd{  padding:10px 0 10px 70px;}

#privacy .contents{  padding:20px 0 110px;}

#goseikon .contents section{ padding:10px 0 10px 55px;}
#goseikon .contents img.icon{ width:48px;}

#contact .contents ul.other_contact li{ max-width:70%; }


#off .contents h1 img{ width:225px}
#setumeikai .contents h1 img{ width:186px}
#outline .contents .sec1 h1 img{ width:126px;}
#outline .contents .sec2 h1 img{ width:180px;}
#privacy .contents h1 img{ width:306px;}
#goseikon .contents h1 img{ width:240px;}
#contact .contents h1 img{ width:183px;}


}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
#top .sec4 ul.riyuu1{ width:250px; max-width:80%; text-align:left; }
#contact .contents img.contact_s_title1{ width:240px}

.gmap {
padding-bottom: 70%;
}


}