@charset "utf-8";
/*====================
1.基本
2.教室紹介
3.施設詳細
4.運営ポリシー
5.お問い合わせフォーム
6.フッター開催教室
7.margin/padding指定
====================*/
html{font-size: 62.5%;}
body {
font-family: 'Noto Sans Japanese', sans-serif; font-size:14px; font-size:1.4rem; color: #444; line-height: 1.7;
		}

.wrap{width: 100%; margin: 0 auto; box-sizing:border-box; -moz-box-sizing: border-box; position: relative;}
.content {width: 100%; max-width: 1002px; margin: 0 auto; padding:0 3.9%;  box-sizing:border-box; -moz-box-sizing: border-box; position: relative;}
.content2 {width: 100%; max-width: 1002px; margin: 0 auto; box-sizing:border-box; -moz-box-sizing: border-box; position: relative;}
a:hover{text-decoration: none;}

/*clearfix*/

.cf:after {
display:block;
clear:both;
height:0px;
visibility:hidden;
content:".";
}

/*link*/
a { color:#444; text-decoration:underline;}
a:visited { color:#444; text-decoration:underline;}
a:hover{}

/*header*/

.header_top{
	position: relative;
	display: table;
	width: 100%;
	margin:1.5% auto;
}
h1 {display: table-cell; vertical-align: top; top:0;  }
.m_logo{
	display: table-cell;
	vertical-align: top;
	top:0;
	right: 0;
	text-align: right;
}
.slide img{ width: 100%; max-width: 1002px; margin-top:2%; }

/*gnav*/

.gnav { width: 100%; display: table; table-layout:fixed; font-size: 1.6rem; position: relative; z-index: 200; font-size: 1.4rem; position: relative;}
.gnav>li{ display: table-cell; vertical-align: middle; width: 16.5%; color: #fff; text-align: center; height: 42px; position: relative; border-right:dotted 1px #0099ff; cursor: pointer}
.gnav li p { height:100%; padding-top:7px; box-sizing:border-box;}
.gnav>li:last-child { border-right: none;}
.gnav>li:hover { color: #55bff1; background-color: #fff; }
.gnav>li a {display: block; width: 100%; height: 100%; color: #fff; padding-top:14px; box-sizing:border-box; text-decoration: none; line-height: 1;}
.gnav > li:hover > a { color: #fff; background-color: #55bff1;}/*←ここ重要*/


@media screen and (min-width: 641px){
.gnav { display: table!important;}
.gnav li:hover ul{display: block!important;}
.gnav ul{display: none!important;}
}

/*入れ子のリスト*/
.gnav li ul {border:1px solid #55bff1; position: absolute; top: 100%; left:0; display:none; box-sizing:border-box; width: 100%;}
.gnav li ul li a {display: block ;color: #0099ff; width: 100%; height: 100%; padding:10px; text-align: left; border-bottom:1px dotted #55bff1; box-sizing:border-box; background-color: #fff; position: relative;}
.gnav li:hover ul li { overflow: visible; background-color: #e0fafe; color: #0099ff; height:100%;}
.gnav li ul li a:hover {background-color: #e0fafe; color: #0099ff;}
.gnav>li:hover ul {display: block; width: 100%;}

#nav
{
	width:100%;
	background:#55bff1;
    /* container */
}
    #nav > a
    {
        display: none;
    }
    #nav li
    {
        position: relative;
    }


#toggle{ 
 display: none;
}

.gnav > a
    {
        display: none;
    }
.gnav li
    {
        position: relative;
    }
/*mediaここまで*/

/*お問い合わせ*/
.bg_blue a{ background: #55bff1; width: 100%; padding: 3% 0; text-align: center; color: #fff; display:block; box-sizing:border-box; }
.bg_blue a:hover{ background: #6CF;;}
.bg_blue p {max-width:1002px; margin: 0 auto;}
.bg_blue p span {font-size: 2.7rem;}
.inq { display: table; margin: 0 auto;}
.inq { color: #fff;}
.inq { color: #fff;}
.inq { color: #0099ff;}
.inq p {width:100%; text-align:center; box-sizing:border-box; font-size: 2.3rem; }
.inq p img { margin-left:2%;}

/*footer*/
#footer{ width:100%;
		 max-width:1002px;
         clear:both;
		 margin:0 auto;
		 padding: 3% 7%; 
		 clear:both;
		 box-sizing:border-box;
		}
#footer h2 {
		text-align: center;
		display: block;
		font-size: 2.4rem;
		width: 100%;
		}

.footer_list {
	display: table;
	table-layout:fixed;
	width:100%;
	position: relative;
	margin-top: 3%;
	line-height: 1.8;
	}


.footer_list .shisetsu_list { display: table-cell;
		 vertical-align: top;
		}

.footer_list .shisetsu_list li { margin-top: 2%;}

.footer_list .shisetsu_list span { font-weight: bold; font-size: 1.6rem;}

#footer_space { clear:both; }
#f_link { margin: 0 auto; text-align: center; font-size: 1.3rem; }
#f_link li{ display: inline;}
#f_link li a { color: #333; text-decoration: underline;}
#f_link li a:hover { color: #55bff1;}
/*.footbar{ 
		  margin:0 auto;
		  padding:15px 0;
          width:1002px;
		  clear:both;
		  font-size:12px;
		  color:#fff;
		  line-height:1.5;
		  text-align:center;
	   }
.footbar ul {}
.footbar ul li { display:inline; padding:0 5px; }
.footbar p { text-align: center; margin-top:15px; font-size:10px;}	   
.footbar a {color:#fff; text-decoration:none;}
.footbar a:hover {color:#fff; text-decoration:underline;}
*/

#copyrigtht { width: 100%; height:5%; padding:0.9% auto; box-sizing:border-box; background-color: #0A9A00; color: #fff; font-size: 1rem; text-align: center;}

/*====================
2.教室紹介
====================*/
.bg_rightblue {background: #e0fafe; padding:0 0 3% 0; z-index: 1; }
h2 { font-size: 3.2rem; color: #333; text-align: center; }
.shisetsu_name{ margin: 3.5% auto;}
.main_catch { font-size: 2.4rem; text-align: center; margin: 3.5% auto;}
h3.list_title { font-size: 2.0rem; margin: 3% auto 1% auto; padding-bottom: 0.5%;}

h3.soccer{border-bottom: double 4px #29a930;}
h3.sal{border-bottom: double 4px#3c69de;}
h3.cheer{border-bottom: double 4px#b54aaa;}
h3.harappa{border-bottom: double 4px#019798;}
h3.tabletennis{border-bottom: double 4px#af4039;}
h3.bkball {border-bottom: double 4px #7029a9;}
h3.bad {border-bottom: double 4px #ff99ff;}

h3.school_shisetsu { font-size:2.4rem; margin-bottom: 3%; text-align: center; }
.school_list { text-align: center;}
.school_list li{ display: inline;}
.school_list li a { color: #333; text-decoration: underline;}
.school_list li a:hover { color: #55bff1;}

.bg_soccer { background-color:#ccff99; }
.bg_sal { background-color:#ccccff;}
.bg_cheer { background-color:#FEC6C5;}
.bg_harappa { background-color:#a9e4e5;}
.bg_tabletennis { background-color:#FEEFC0;}
.bg_bkball { background-color:#e5caf3;}
.bg_bad { background-color:#ffccfb;}

.line_soccer {border-top:solid 1px #67cb33;}
.line_sal {border-top:solid 1px #638ce6;}
.line_cheer { border-top:solid 1px #b54aaa;}
.line_harappar { border-top:solid 1px #019798;}
.line_tabletennis { border-top:solid 1px #FF9900; }
.line_bkball { border-top:solid 1px #7029a9; }
.line_bad { border-top:solid 1px #ff99ff; }

.table_sch {border:1px solid #aaa; border-collapse: collapse; margin:0 auto;}
.table_sch 	th { background-color:#efefef;}
.table_sch td { background-color:#fff;}
.table_sch 	th,.table_sch td { border-bottom:1px solid #aaa; border-right: 1px solid #aaa; padding:1%; box-sizing:border-box; text-align: center;}
.sp_table { visibility: hidden; font-size:1px; line-height:0;}
/*新着情報*/
.info { width: 924px; margin:4% auto; padding:2%; box-sizing:border-box; background:#efefef;}
.info h3 { text-align:center; font-size:2.4rem; margin-bottom: 1%;}
.info ul { margin-bottom:2%;}
.info li { border-bottom: dotted 1px #aaa; padding: 1.2% 0;}
.info li span { padding-left:1.5%;}
.info li a:visited { color: 333;}

.arrowFR{
  position:relative;
  top:0;
  left:0;
  padding-left:18px;
}
.arrowFR:before{
  content: "";
  position: absolute;
  top: 15px;
  left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #0099ff;
}

/*コーチ紹介*/
.coach_box { display:block;}
.coach_prof{ display:table; float:left; width:50%; margin-bottom:3%;}
.coach_prof div, .coach_prof p{ display:table-cell; vertical-align:top;}
.coach_prof div { width:34.3%; max-width:168px;}
.coach_prof p { padding:0 2%; box-sizing:border-box;}
.coach_prof div img { width:164px;}

.cf:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

.midashi { font-size:1.8rem; margin-top:2%; border-bottom:1px dotted #999;}
	
/*アクセス*/
.access { width: 100%; display: table;}
.access p{display: table-cell; vertical-align: top; padding-left:2%;}
.access .map { width: 51%; height: 400px; display: table-cell; vertical-align: top;}
.map iframe { width: 100%; height:100%;}

ul.u_dot li{ border-bottom:dotted 1px #aaa; padding-bottom:0.5%;}
/*====================
4.運営ポリシー
====================*/

span.list_title { font-size: 2.0rem; margin: 3% auto 1% auto; padding-bottom: 0.2%; display:block;}

/*====================
5.お問い合わせフォーム

====================*/
input {
color: #444444;
}
#inq_form li { display:table; position:relative; padding:2% 0; border-bottom:dashed 1px #aaa; width:100%;}
#inq_form li div{ display:table-cell; text-align:left; vertical-align:middle;}
#inq_form li div.ttl { width:20%;}
.inq_care li { list-style:outside; list-style-type:circle; margin-left:2em;}
.tel_no input{ width:10%;}
textarea { width: 430px; height: 10em; line-height: 1.5;}
.submit { text-align:center;}
.submit > input {
    -moz-appearance: none;
    background: rgb(170,170,170) repeat scroll 0 0;
    border: 2px solid #8a8a8a;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size:1.5rem;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 10px;
    padding: 0.4em 0;
    text-align: center;
    transition: all 0.2s ease 0s;
    width: 15%;
}

.submit > input:hover { opacity:0.7;}

.submit > input[type="submit"] {
    background: rgba(85, 191, 241, 1) repeat scroll 0 0;
    border-color: #0099ff;
}

.linedot { border-top: dotted 1px #aaa;}
/*====================
6.フッター開催教室
====================*/

.menubar{ height:28px;
          width:100%;
		  clear:both;
	   } 	   
.footer-list{
	   margin:0 auto;
	   padding:26px 13px;
	   text-align:left;
	   width:100%;
	   max-width: 1024px;
	   box-sizing:border-box;
	  /* background-image:url(../../images/htdocs/mfp_header_line.gif);
	   background-repeat:repeat-x;*/
	   background-position:top;
	   clear:both;
	   font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif;
	   }
.footer.footer_space{
	   background-color:#eaeafc;
}

/*====================
7.margin/padding指定
====================*/
.mt50 { margin-top: 5%!important;}
.mb50 { margin-bottom: 5%!important;}
.mt30 { margin-top: 3%!important;}
.mt20 { margin-top: 2%!important;}
.mb20 { margin-bottom: 2%!important;}
.pt50 { padding-top: 5%!important;}
.pt30 { padding-top: 3%!important;}
.pb30 { padding-bottom: 3%!important;}
.pl10 { padding-left:1%;}
.pr10 { padding-right:1%;}
.harappa_txt { width:60%;}
.w75 { width:75%;}
.w70 { width:70%!important;}

.txt_left { text-align:left!important;}
.txt_center { text-align:center!important;}
.t_red { color:#F00; font-style:normal;}


/*====================
sp
====================*/
@media screen and (min-width: 641px) and (max-width: 800x){
	.gnav { font-size: 1.2rem;}
}

@media screen and (max-width: 640px){
	
.no_sp{display: none!important;}
.wrap{padding: 0;}
.top_logo{}
.top_logo img { width:72%;}
.m_logo img { width: 72%;}
.slide img{ width: 100%; margin-top:0;}
.gnav li ul li {overflow: visible; display: block; width: 100%; height: auto;}


/*gnavスマホ*/
.gnav{
    display: none; }

.gnav li ul { display:none; width:100%;}
.gnav li {display:block; width:100%; color: #0099ff; background:#fff; border-bottom:dotted 1px #0099ff; padding:1%; box-sizing:border-box; position: relative; height: auto;}
	.gnav li>p{
    display: block;
    padding: 10px 0 ;
    line-height: 1;
  }
  .gnav>li>a{
    padding: 10px 0 ;
    line-height: 1;
  }

/*入れ子メニュー*/

#nav
    { position: relative;}
 
    /* first level */
 
    #nav > ul
    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #nav:target > ul
        {
            display: block;
        }
        #nav > ul > li
        {
            width: 100%;
            float: none;
        }
 
    /* second level */
 
   .gnav li ul { position:static;}
   .gnav li:hover ul{display:none; position: relative;}

  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background: #55bff1;
	}
  #toggle a{
    box-sizing:border-box;
    display: block;
    position: relative;
    padding: 12px 0 10px;
    border-bottom: 1px solid #444;
    color: #fff;
    text-align: center;
    text-decoration: none;
	}
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
	}
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #55bff1;
	 }
  #toggle a:before{
    margin-top: -6px;
	}
  #toggle a:after{
    margin-top: 2px;
	}
	
/*お知らせ*/

.info { width:98%;}

/*====================
2.教室紹介
====================*/
.table_sch { width:100%;}
.sp_table { visibility:visible; font-size:1.2rem; line-height:1.4;}
.t_scroll { overflow: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;}
.t_scroll table {min-width:640px; }
.t_scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
.t_scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
.t_scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}
.t_scroll_link{padding: 0px!important;}
.t_scroll_link li{
	width: 100%;
	margin: 0;
	float: none;
	margin-bottom: 5px;
	}

.school_link li a img{display: none;}
.school_link li a{padding:0.5em; color: #fff; text-decoration: none; box-sizing:border-box; transition:all .2s ease 0s; position: relative;}
.school_link li a:hover{opacity: .7;}
.school_link li a img{margin-bottom: 0.5em;}

/*.school_link li a:after{content: ""; display: block; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; right: 10px; top: 50%; margin-top: -4px; trabsform-origin:right center; transform:rotate(45deg);}
*/

.school_link li ul.sp_list li a{ display: block; margin: 0; padding:0; width: 100%; color: #0099ff; background: #fff; border-bottom: dotted 1px #0099ff;}

.harappa_txt { width:100%!important;}
/*コーチ紹介*/

.bg_rightblue {padding:0 0 5% 0; margin-top:0;}
.coach_prof { display:block; float:none; width:100%;}
.coach_prof p { padding-left:2%;}

/*アクセス*/
.access { display:block; height: auto; }
.access p{display: block; margin-top:2%;}
.access .map { width: 100%; display: block; height: 200px;}

/*お問い合わせ*/
.bg_blue { clear:both;}
.bg_blue a p { max-width:1002px; margin: 0 auto; padding: 5%;}

/*foot*/
#footer {width: 100%; text-align: center;}
#footer .footer_list {width: 100%; text-align: center; display: block;}
#footer .footer_list .shisetsu_list {width: 100%; text-align: center; display: block;}
ul.u_dot li{ border:none;}
#footer h2 { font-size: 2.0rem;}
/*====================
5.お問い合わせフォームsp

====================*/
#inq_form { display:block; width:98%; margin:0 auto;}
#inq_form li {display:block; width:100%;}
#inq_form li div{display:block; width:100%; padding-top:1.5%;}
#inq_form li div.ttl { width:100%;}

textarea {
	width: 100%;
	height: 10em;
	line-height: 1.5em;
}

.submit > input {
    -moz-appearance: none;
    background: rgb(170,170,170) repeat scroll 0 0;
    border: 1px solid #8a8a8a;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size:1.3rem;
    font-weight: bold;
    letter-spacing:0.5%;
    margin: 0 10px;
    padding: 0.4em 0;
    text-align: center;
    transition: all 0.2s ease 0s;
    width: 30%;
}
}

@media screen and (max-width: 400px){
.coach_prof { ext-align:center;}
.coach_prof p { padding-left:0; display:block;}

h2 { font-size:2.5rem;}
h3.school_shisetsu { font-size:2.0rem;}
h3.list_title {font-size:1.8rem;}
.info h3 { font-size:2.2rem;}
.main_catch { font-size:2.2rem;}
  /*#inq_form li span { display:block; padding-top:1.5%;}*/
  .school_link li{
      width: 48%;
      margin: 0.99%;
      float: left;}

.bg_blue a p { font-size: 1.6rem; max-width:1002px; margin: 0 auto; padding: 5%;}
.bg_blue p span {font-size: 1.8rem;}

#inq_form .name li span { display:block;}

.w70 { width:100%!important;}
}