/* =======================================================
*
* 	Template Style 
*
* ======================================================= */



@media screen and (max-width: 1280px) {
.head-cover .skids_charactor {width:32%;z-index:9;position:absolute;right:-20px;top:68vh;}	
}

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

.sp_only {display:block;}

.contentnav #logo {float:left;width:220px;margin-top:18px;}	

h2 {font-family: 'Suez One', serif;font-size:50px;z-index:9;position:absolute;}
h3 {font-family: 'Suez One', serif;font-size:42px;z-index:9;position:absolute;color:#BBC0CF;}	

.head-cover .skids_charactor {width:35%;z-index:9;position:absolute;right:-20px;top:72vh;}	
.head-cover .informationbox {width:60%;z-index:9;position:absolute;left:3%;top:75vh;}
.head-cover .informationbox .shadowbox {margin:50px 0 0;min-height:160px;}


#aboutskids {padding:6em 0 7em;}
#aboutskids .about_img02 {margin:110px 0 0;}
#aboutskids img.overlap01 {width:85%;}
#aboutskids .col-xs-12 .about_txtbox {float:right;width:90%;overflow:hidden;margin:20px 0 0;}
#aboutskids .col-xs-12 .about_txtbox h2 {margin:-30px 0 0 300px;}
#aboutskids .col-xs-12 .about_txtbox div {padding:25px 40px 15px;margin:20px 60px 20px 30px;text-align: left;}


#lesson {background:url(images/lesson_bg.png) repeat-y top center;background-size:180%;padding:0 0 20px !important;}
#lesson .try_txt {text-align:right;}
#lesson .try_txt img {width:38%;margin:-30px 0 0;}

#lesson h2 {padding:0 !important;margin:-50px 0 0 !important;}
#lesson #class .col-xs-5 {width:85% !important;}
#lesson #class .col-xs-5 h3 {margin:0 0 0 50px;}
#lesson #class .col-xs-5 p {margin:80px 0 0 50px;}
#lesson #class .col-xs-5 dl {margin:20px 0 0 50px;}
#lesson #class .col-xs-5 dl dt {font-weight:700;color:#000;font-size:18px;}
#lesson #class .col-xs-7 {width:75%;float:right;}
#lesson #class .col-xs-7 img {width:100%;margin:60px 0 0 20px;}
#lesson #class .view_class {margin:40px 0 0 !important;}

#lesson #timetable {margin-top:-40px;}
#lesson #timetable .col-xs-6 h3 {margin:10px 0 0 140px;}
#lesson #timetable .col-xs-6 table {margin:80px 0 0 0;width:100%;}

#lesson #space {margin-top:10px;}
#lesson #space .col-xs-5 {width:80%;}
#lesson #space .col-xs-5 h3 {margin:0;}
#lesson #space .col-xs-5 dl {margin:80px 0 0 ;}
#lesson #space .col-xs-5 dl dt {font-weight:700;color:#000;font-size:16px;line-height:1.4em;margin-bottom:10px;}
#lesson #space .col-xs-5 dl dd {margin:0 0 10px;}
#lesson #space .col-xs-9 {margin:-30px 0 0;}
#lesson #space .col-xs-9 img {margin:0 0 0 80px;width:90%;}
#lesson #space .col-xs-3 {margin:30px 0 0;}
#lesson #space .col-xs-3 .poolparklogo {width:80%;}


#instructor #instructor01 .col-xs-7 {margin:80px -50px 0 0;text-align:right;}
#instructor #instructor01 .col-xs-6 {margin:-20px -100px 0 -30px;text-align:right;}
#instructor #instructor01 .col-xs-6 h2 {position: relative;margin:30px 0 0 80px !important;}
#instructor #instructor01 .col-xs-6 p {margin:-20px 0 0 80px;}
#instructor #instructor01 .col-xs-5 {text-align:right;} 
#instructor #instructor02 img {width:100%;}
#instructor #instructor02 .col-xs-6 {margin:0 -140px 0 0;text-align:right;}
#instructor #instructor02 .col-xs-6 img {margin:0 0 0 120px;}
#instructor #instructor02 .col-xs-5 {text-align:right;margin:130px 0 0 150px;} 
#instructor #instructor02 .col-xs-5 img {position: relative;}


#charge {background:url(images/charge_bg.png) no-repeat top center;background-size: cover;padding:0 0 50px !important;}
#charge img {width:100%;}
#charge #charge02 {margin-top:100px ;}
#charge .col-xs-12 {margin-top:50px;}
#charge .col-xs-12 .enter_info {float:right;width:100%;}
#charge .col-xs-12 .enter_info div {padding: 30px 40px 30px;}
#charge .col-xs-12 .enter_info div ul {padding:0;margin:0;}
#charge .col-xs-12 .enter_info h4 {background:#000;padding:10px 30px;margin:-30px 0 20px 20px;color:#FFF;font-weight:700;z-index:9;position:absolute;display:inline-block;}


#access {margin:0;}
#access img {width:100%;}
#access .col-xs-4 {margin:80px 0 0 -60px;}
#access .col-xs-4 h2 {margin:10px 0 0 15px;}
#access .col-xs-4 .access_info div {margin:60px 0 0;padding: 30px 20px 20px;width:100%;}
#map_poolpark {margin: 0 auto;width:100%;height:300px;}
#map_poolpark img {max-width: none;}


}




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


.sectionbox {position: relative;padding: 3em 0 0;clear: both;}

	
.nav-toggle {display: block;}
.contentnav {padding: 0;}
.contentnav_inner {width:96%;margin:0 auto;overflow:hidden;}
.contentnav #logo {float:left;width:200px;}

.contentnav .mainmenu {display: none;}
.contentnav .mainmenu ul {display:block;}
.contentnav .sns ul {display:none;}

.head-cover {height: 68vh;margin: 65px auto 0;}
.head-cover .skids_charactor {width:45%;z-index:9;position:absolute;right:-5px;top:45vh;}
.head-cover .informationbox {width:100%;z-index:9;position:absolute;left:0;top:65vh;}
.head-cover .informationbox h2 {margin:15px 0 0!important;}
.head-cover .informationbox .shadowbox {margin:40px 0 0;min-height:40px;}
.head-cover .informationbox ul {overflow: hidden;margin:20px 20px;padding:0;list-style:none;}
.head-cover .informationbox ul li {margin:0 0 5px;}
.head-cover .informationbox ul li span {display:inline-block;margin:0 8px 0 0;font-family: 'Suez One', serif;}


h2 {font-size:28px;z-index:9;position:absolute;}
h3 {font-size:24px;z-index:9;position:absolute;color:#BBC0CF;}

#aboutskids {padding:10.5em 0 7em;}
#aboutskids img {width:100%;}
#aboutskids .about_img02 {margin:40px 0 0;width:100%;}
#aboutskids img.overlap01 {width:55%;}
#aboutskids .col-xs-5 {width:85%;}
#aboutskids .col-xs-7 img {margin:-70px 0 0 150px;}
#aboutskids .col-xs-12 {width:100%;}
#aboutskids .col-xs-12 .about_txtbox {float:none;width:100%;overflow:hidden;margin:-20px 0 0;}
#aboutskids .col-xs-12 .about_txtbox h2 {margin:0;}
#aboutskids .col-xs-12 .about_txtbox div {padding:20px 20px 10px;margin:30px 10px 10px;text-align: left;}



#lesson {background:url(images/lesson_bg.png) repeat-y top center;background-size:450% auto;}
#lesson .try_txt {text-align:right;width:100%;}
#lesson .try_txt img {width:45%;margin:-30px 0 0;}

#lesson h2 {padding:0 !important;margin:-30px 0 0 !important;}
#lesson #class .col-xs-5, #lesson #class col-xs-9 {width:100% !important;}
#lesson #class .col-xs-5 h3 {margin:0 0 0 10px;}
#lesson #class .col-xs-5 p {margin:40px 0 0 10px;}
#lesson #class .col-xs-5 dl {margin:20px 0 0 10px;}
#lesson #class .col-xs-5 dl dt {font-weight:700;color:#000;font-size:18px;}
#lesson #class .col-xs-5 dl dd {margin:0 0 10px;}
#lesson #class .col-xs-7 img {width:100%;margin:40px 0 0 30px;}
.view_class {margin:40px 0 0 !important;}
.view_class a {background-image:none;background-color: #1a1a1a;background-size:auto;padding:15px;color:#FFF;text-decoration:none;font-weight:700;}
.view_class a:hover {background-color:#555;}

#lesson #timetable {margin-top:0;}
#lesson #timetable img {width:100%;margin:0;}
#lesson #timetable .col-xs-5 {width:50%;margin:-50px 0 0;}
#lesson #timetable .col-xs-6 {width:100%}
#lesson #timetable .col-xs-6 h3 {margin:10px 0 0 0;}
#lesson #timetable .col-xs-6 table {margin:40px 0 0 0;width:100%;}


#lesson #space {margin-top:10px;}
#lesson #space .col-xs-5 {width:100%;padding-bottom:30px;}
#lesson #space .col-xs-5 h3 {margin:0;}
#lesson #space .col-xs-5 dl {margin:60px 0 0 ;}
#lesson #space .col-xs-5 dl dt {font-weight:700;color:#000;font-size:14px;line-height:1.4em;margin-bottom:10px;}
#lesson #space .col-xs-5 dl dd {margin:0 0 10px;}
#lesson #space .col-xs-7 {margin:10px 0 0;}
#lesson #space .col-xs-7,#lesson #space .col-xs-9,#lesson #space .col-xs-3 {width:100%;}
#lesson #space .col-xs-9 {margin:10px 0 0;}
#lesson #space .col-xs-9 img {margin:0;width:100%;}
#lesson #space .col-xs-3 {margin:10px 0 0;}
#lesson #space .col-xs-3 .poolparklogo {width:25%; float:left;}
#lesson #space .col-xs-3 dl dd {width:70%;float:right;}




#instructor #instructor01 img {margin:0 !important;width:100%;}
#instructor #instructor01 p {margin:0 0 8px !important;}

#instructor #instructor01 .col-xs-7 {width:50%;float:right;margin:90px 0 0 0;text-align:left;}
#instructor #instructor01 .col-xs-4 {width:100%;}
#instructor #instructor01 .col-xs-4 {margin:0px;text-align:left;}
#instructor #instructor01 .col-xs-4 h2 {position: relative;margin:-340px 0 0 0 !important;padding:0;}
#instructor #instructor01 .col-xs-4 p {margin:0 0 20px !important;}
#instructor #instructor01 .col-xs-5 {width:50%;float:left;text-align:left;margin:90px 0 0 0;}

#instructor #instructor02 img {width:100%;margin:0;}
#instructor #instructor02 p {margin:0 0 8px !important;}
#instructor #instructor02 .col-xs-6 {width:50%;margin:0;float:right;}
#instructor #instructor02 .col-xs-6 img {margin:0;width:100%;}
#instructor #instructor02 .col-xs-5 {width:50%;float:left;text-align:left;margin:0;} 
#instructor #instructor02 .col-xs-5 img {width:100%;position: relative;}


#charge {background:url(images/charge_bg.png) no-repeat top center;background-size: cover;padding:0 0 50px !important;margin:50px 0 0;}
#charge img {width:100%;}
#charge #charge01 .col-xs-6 {width:100%;text-align:right !important;} 
#charge #charge01 .col-xs-6 h2 {margin:-30px 0 0;}
#charge #charge02 {margin-top:50px;}
#charge #charge02 .col-xs-5, #charge #charge02 .col-xs-7 {width:100%;} 
#charge .col-xs-12 {margin-top:50px;}
#charge .col-xs-12 .enter_info {float:right;width:100%;}
#charge .col-xs-12 .enter_info div {padding: 30px 40px 30px;}
#charge .col-xs-12 .enter_info div ul {padding:0;margin:0;}
#charge .col-xs-12 .enter_info h4 {background:#000;padding:10px 30px;margin:-30px 0 20px 20px;color:#FFF;font-weight:700;z-index:9;position:absolute;display:inline-block;}

#access {margin:0;}
#access img {width:100%;}
#access .col-xs-4, #access .col-xs-8 {width:100%;}
#access .col-xs-4 {margin:10px 0 0 0;}
#access .col-xs-4 h2 {margin:10px 0 0 0;}
#access .col-xs-4 .access_info div {margin:60px 0 0;padding:20px;width:100%;}
#map_poolpark {margin: 0 auto;width:100%;height:200px;}
#map_poolpark img {max-width: none;}


#contact {margin:0 0 80px;}
#contact .col-xs-10 {width:100%;} 
#contact a {background:url(images/btn_arrow.png) no-repeat right center #1a1a1a; background-size:30px auto;padding:20px 45px 20px 20px;color:#FFF;text-decoration:none;font-weight:700;margin:0;font-size:12px;}
#contact a span {display:none;}
#contact a:hover {background-color:#555;}



#page-container {margin:70px 0 0;overflow:hidden;}

#contactform {background:url(images/lesson_bg.png) repeat-y top center;background-size:450% auto;padding:20px 0 !important;}
#contactform .col-xs-5 {margin:0;width:100%;}
#contactform .col-xs-5 h2 {}
#contactform .col-xs-5 p {margin:50px 0 0 0;}
#contactform .col-xs-7 {margin:80px 0 0;width:100%;}
#contactform .col-xs-7 h3 {text-align:right;width:90% !important;}
#contactform .col-xs-7 h3 img {width:50%;margin:-80px 0 0;}
#contactform .col-xs-7 .shadowbox {padding:50px 20px 20px;}
#contactform .col-xs-7 .shadowbox ul {overflow:hidden;padding:0;margin:0;} 
#contactform .col-xs-7 .shadowbox ul li {list-style:none;line-height:1.5em;margin:0 0 15px 0;padding:0 0 15px 0;border-bottom:solid 1px #ccc;}
#contactform .col-xs-7 .shadowbox ul li span {font-weight:700;color:#1a1a1a;}
#contactform input[type=text],
#contactform input[type=email], 
#contactform input[type=textarea],
#contactform input[type=select],
#contactform textarea {border:solid 1px #ccc;border-radius:4px;padding:8px 15px;width:90%;}
#contactform select {border:solid 1px #ccc;border-radius:4px;padding:10px 25px;}
input[type="button"],
input[type="reset"],
input[type="submit"] {border: none;border-radius:4px;background: #000;color: rgba(255, 255, 255, 1);cursor: pointer;font-size:16px;padding:8px 15px;}



#infopage {background:url(images/lesson_bg.png) repeat-y top center;background-size:450% auto;padding:20px 0 !important;}
#infopage .col-xs-5 {margin:0;width:100%;}
#infopage .col-xs-5 h2 {margin:20px 0 0;}
#infopage .col-xs-5 p {margin:;}
#infopage .col-xs-7 {margin:80px 0 0 0;width:100%;}
#infopage .col-xs-7 h3 {0 0;}
#infopage .col-xs-7 .shadowbox {padding:20px 20px 20px;}
#infopage .col-xs-7 .data {margin:40px 0 0;font-family: 'Suez One', serif;font-size:18px;}
#infopage .col-xs-7 .meta {border-top:solid 1px #CCC;overflow:hidden;padding:10px 0 0;}
#infopage .col-xs-7 .meta ul {overflow:hidden;padding:0;list-style:none;}
#infopage .col-xs-7 .meta ul li {float:left;margin:0 20px 0 0;}
#infopage .col-xs-7 .meta ul li a {text-decoration:none;background:#1a1a1a;padding:15px 30px;color:#FFF;text-decoration:none;font-weight:700;}
#infopage .col-xs-7 .meta ul li a:hover {text-decoration:none;background:#666;}





#footer {padding: 3em 15px;text-align:center;}
#footer .col-xs-6 {width:100%;}
#footer .col-xs-6 img {width:75%;float:none;margin:0 auto;}
#footer .col-xs-6 {text-align:center !important;} 

#footer .f_sns {width:200px;margin:20px auto 0;display:block;}
#footer .f_sns ul {overflow:hidden;}
#footer .f_sns ul li {float:left;width:28px;display:block;margin:0 8px;}
#footer .f_sns ul li a {width:28px;opacity:0.6;}
#footer .f_sns ul li a img {width:100%;}
#footer .f_sns ul li a:hover {opacity:0.4;}

#footer_fixbanner {display:inline-block;position:fixed;z-index:200;bottom:0;right:0;width:100%;height:auto;padding:0;background-color: rgba(0,0,0,0.4);}
#footer_fixbanner div {width:98%;padding:0;margin:6px auto 0;list-style:none;}
#footer_fixbanner div img {width:100%;}

#side_fixbanner {display:none;}




}