@charset "UTF-8";
/* CSS Document */

/*******
* reset
********/
html{ height:100%; overflow-y:scroll; -webkit-overflow-scrolling: touch }
body{ height:100%; margin:0; padding:0; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; word-break:break-all; -webkit-text-size-adjust:100%; }
img{ width:100%; max-width:100%; height:auto; border:0; font-size:0; line-height:0; vertical-align:bottom; }
form{ margin:0; padding:0; }
p{ margin:0; padding:0;line-height: 180%; }
a, a:hover{ text-decoration:none; outline:none; }
h1, h2, h3, h4, h5, h6{ margin:0; padding:0; font-size:0; line-height:0; }
ul, dl, dt, dd{ margin:0; padding:0; }
li, ol{ margin:0; padding:0; list-style:none; }
table{ border:0; border-collapse:collapse; border-spacing:0; }
caption, th{ text-align:left; }
.clear{ clear:both; margin:0; padding:0; font-size:0; line-height:0; }
sup{ font-size:60%; }
header, nav, article, aside, section, footer{ display:block; }
*{ box-sizing:border-box; }


/*************
SP 640px以下
**************/
html{ font-size:15px; }


/*************
 header
*************/
header{ background:rgba(255, 255, 255, 0.88); width:100%; height:60px; padding:8px 0 0; position:fixed; top:0; left:0; z-index:100; }
header h1{ width:260px; margin:0 auto;}
header > a{ display:block; width:48px; height:60px; padding:19px 0 0 18px; position:absolute; top:0; left:0; line-height:0; }
header > a img{ width:18px;}
header > div{ display:none; background:rgba(72,209,204,0.95); width:100%; height:100%; position:fixed; top:60px; left:0; }
header > div nav{ padding:60px 0 0; position:fixed; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
header > div nav ul.menu li a{ display:block; width:100%; font-family:"Anton",sans-serif; font-size:1.84rem; color:#fff; text-align:center; } 
header > div nav ul.menu li a span{ display:block; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size:0.84rem; font-style:normal; color:rgba(255,255,255,0.7); }

header > div nav ul.sns{ display:table; margin:0 auto; overflow:hidden;}
header > div nav ul.sns li{ background:rgba(115,170,0,0.5); width:34px; height:34px; margin:0 8px; float:left; border-radius:50%; }
header > div > a{ width:40px; height:40px; position:fixed; right:0; bottom:0; }
header > div > a img{ width:25px; }


/*************
 content
**************/
.content{ padding:48px 0 0; font-size:13px; }
.content .wrap{padding:0 20px 30px 20px; }


/*************
 title
**************/
section h2{ font-family:"Anton",sans-serif; font-size:30px; font-style:normal; font-weight:normal; line-height:1.3; text-align:center; }
section h2 span{ display:block; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size:1rem; font-style:normal; color:#48d1cc; }

.content h2{ padding:35px 0 30px; color:#fff; }
.content h2 span{ color:rgba(255,255,255,0.6); }
.content h3{ margin:40px 0 28px; padding:0 0 12px; border-bottom:2px solid #afeeee; font-family:"Anton",sans-serif; font-size:23px; font-style:normal; font-weight:normal; line-height:1.8; }
.content h3 span{ display:block; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-size:12px; font-style:normal; color:rgba(0,0,0,0.4); }

/*************
 button
**************/
.button{ width:220px; margin:0 auto !important; padding:15px 0; border:2px solid #000; font-style:0.87rem; font-weight:bold; line-height:1; letter-spacing:1px; text-align:center; }


/*************
 about
**************/
#about.content .wrap img{ float:left; width:35%; padding:0 20px 50px 0;}
#about.content h2{ background:url("../img/main_about.jpg") no-repeat center; background-size:cover; }


/*************
 lesson
**************/
#lesson.content h2{ background:url("../img/bg_lesson.jpg") no-repeat center; background-size:cover; }
#lesson.content h2 span{ color:rgba(0,0,0,0.6); }
#lesson .title{background:#48d1cc; font-style:normal; font-weight:normal; line-height:1.3; margin:20px 0 10px 0; padding:5px 0 5px 10px; color:#FFFFFF;  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
	border-radius: 10px;        /* CSS3草案 */    }
#lesson .catch{ padding:20px 0 0 0; font-weight:bold;}
#lesson.content .wrap img{ float:right; width:40%; padding:10px 10px;}
#lesson.content .wrap #class{width:60%;}
.class{ padding:34px 20px 0; }
.class > dl{ border:#ededed 1px solid; }
.class > dl > dt, .companyInfo > dl > dd{ padding:16px; border-top:1px #ededed solid; }
.class > dl dt{ background:#fcfcfc; }
.class > dl dt:first-child{ border-top:none; }
.class > dl dd a{ color:#646464; text-decoration:underline; transition:color 0.3s linear; }
.class > dl dd span{ display:block; }
.class > dl > dd dl{ overflow:hidden; }
.class > dl > dd dl dt{ width:7rem; float:left; clear:both; }
.class > dl > dd dl dd{ float:left; }
#lesson table{margin:30px auto;}
#lesson table td{
	border:solid 1px #ccc;
	padding:13px 0 10px 0;
	line-height:130%;
	text-align:center;
	vertical-align:top;
}
#lesson table th{
	border:solid 1px #ccc;
	background-color:#afeeee;
	color:#666;
	width:16.5%;
	text-align:center;
}

/*************
 gallery
**************/
#gallery.content h2{ background:url("../img/main_uc.jpg") no-repeat center; background-size:cover; }

.pic-gallery ul {
	padding: 30px 0;
	margin: 0;
    justify-content: center;
  }

 .pic-gallery li {
	 padding: 0 20px 20px 0;
    list-style: none;
	 float:left;
	 width:33%;
  }

.pic-gallery li:nth-child(3n) {
    padding: 0 0 20px 0;
	 list-style: none;
	 float:left;
	 width:31.7%;
  }
.pic-gallery img{width:100%}


/*************
 uc
**************/
#uc.content .wrap img{ float:left; width:50%; padding:10px 10px;}
#uc.content h2{ background:url("../img/main_uc.jpg") no-repeat center; background-size:cover; padding:150px 0 150px 0;}


/*************
 form
**************/
#form.content .wrap img{ float:left; width:50%; padding:10px 10px;}
#form.content h2{ background:url("../img/main_form.jpg") no-repeat center; background-size:cover; }

/*************
 contact
**************/
.contact{ background:url("../img/bg_contact.jpg") no-repeat center; background-size:cover; text-align:center; width:100%; margin-top:60px;}
.contact a{ display: block; padding:27px 20px 43px; color:#000; }
.contact a h2{ margin:0 0 20px;}
.contact a h2 span{ color:rgba(120,120,120,0.9);}
.contact a p{ max-width:500px; margin:0 auto 30px auto; font-size:0.93rem; line-height:1.7 }
.contact a .button{ border-color:#fff;}
.contact a:hover{ background:rgba(140,200,180,0.4); color:#fff; }
.contact a:hover .bottun{ border-color:#fff;}
.contact a p span{ display:block; }



/*************
 footer
**************/
footer{ width:100%; height:60px; position: relative; background:#fff; }
footer a{ display:block; width:50px; position: absolute; bottom:5px; right:5px; transition:bottom 0.3s linear; }
footer p{ font-size:0.66rem; line-height:55px; text-align:center; }


/**************
Tab* 641px以上
***************/
@media print, screen and (min-width:641px){

  /*************
   header
  **************/
  header{ height:60px; padding:5px 0 0; }
  header h1{ width:260px;}
  header > a{ width:60px; height:60px; padding:22px 0 0 21px; }
  header > a img{ width:18px }
  header > div{ top:60px; }
  header > div nav{ padding:60px 0 0; }
  header > div nav ul.menu li a{ font-size:2.2rem; } 
  header > div nav ul.menu li a span{ font-size:1rem; }
  header > div nav ul.sns li{ width:42px; height:42px; margin:0 12px; }
  
  
  /*************
   content
  **************/
  .content{ padding:60px 0 0; font-size:1rem; }
  .content .wrap{padding:0 40px 30px 40px;}
  
  /*************
   title
  **************/
  section h2{ font-size:50px; }
  .content h2{ padding:50px 0 45px; }
  .content h3{ padding:0; font-size:32px; border-bottom:2px solid #afeeee;}
  .content h3 span{ display:inline; margin:0 0 0 25px; font-size:13px; }
  
  /*************
   lesson
  **************/
  .class{ padding:50px 20px 0; }
  .class > dl{ background:#fcfcfc; width:100%; overflow:hidden; }
  .class > dl > dt{ width:26%; float:left; }
  .class > dl > dt:first-child+dd{ border-top:none; }
  .class > dl > dd{ background:#fff; width:74%; float:left; border-left:1px #ededed solid; }
 
  /*************
 gallery
	**************/
.pic-gallery ul {
	padding: 30px 0;
	margin: 0;
    justify-content: center;
  }

.pic-gallery  li {
	 padding: 0 20px 20px 0;
    list-style: none;
	 float:left;
	 width:33%;
  }

.pic-gallery li:nth-child(3n) {
    padding: 0 0 20px 0;
	 list-style: none;
	 float:left;
	 width:31.7%;
  }
	
#gallery.content h2{ background:url("../img/main_uc.jpg") no-repeat center; background-size:cover; }

	/*************
   uc
  **************/
  #uc.content h2{ background:url("../img/main_uc.jpg") no-repeat center; background-size:cover; padding:150px 0 150px 0;}
  
  /*************
   button
  **************/
  .button{ width:300px; padding:18px 0; }
  
  
  /*************
   footer
  **************/
  footer{ height:60px; }
  footer p{ line-height:60px; }
  
  
}



/*****************
 1023 x 470以内
******************/
@media print, screen and (max-width:1023px) and (max-height:470px){
  header > div nav{ width:100%; }
  header > div nav ul.menu li a { width:50%; float:left; }
}



/***************
PC 1024px以上
****************/
@media print, screen and (min-width:1024px){

  /*************
   header
  **************/
  header{ height:90px; overflow:hidden; transition:height 0.2s linear;}
  header h1{ width:300px; margin:0 0 0 -512px; position:absolute; top:20px; left:50%; transition:width 0.2s linear,top 0.2s linear; }
  header > a{ display:none; }
  header > div{ display:block !important; background:none; width:612px; margin:0 0 0 -100px; height:auto; position:absolute; top:0; left:50%; }
  header > div nav{ padding:0; position:static; -webkit-transform:none; transform:none; overflow:hidden; }
  
  header > div nav ul.menu{ width:420px; margin:38px 0 0; float:left; overflow:hidden; transition:margin 0.2s linear; }
  header > div nav ul.menu li a{ display:block; width:auto; margin:0 45px 0 0; padding: 0 0 12px 0 !important; border-bottom:2px solid rgba(72,209,204,0); float:left; font-size:18px; color:#000; transition:border-bottom 0.3s linear; } 
  header > div nav ul.menu li:first-child a{ display:none; }
  header > div nav ul.menu li:last-child a{ margin:0; }
  #about-us header > div nav ul.menu li:nth-child(3) a, #recruit header > div nav ul.menu li:nth-child(4) a, #contact header > div nav ul.menu li:nth-child(5) a{ border-bottom:2px solid rgba(72,209,204,0.88); }
  header > div nav ul.menu li:hover a{ border-bottom:2px solid rgba(72,209,204,0.88); }
  header > div nav ul.menu li a span{ display:none; }
  
  header > div nav ul.sns{ display:table; margin:32px 0 0; padding:0 !important; float:right; transition:margin 0.2s linear; }
  header > div nav ul.sns li{ background:#aeaeae; width:34px; height:34px; margin:0; transition:background 0.3s linear, width 0.2s linear, height 0.2s linear; }
  header > div nav ul.sns li:nth-child(2){ margin:0 20px; }
  header > div nav ul.sns li:nth-child(1):hover{ background:#48d1cc; }
  header > div nav ul.sns li:nth-child(2):hover{ background:#48d1cc; }
  header > div nav ul.sns li:nth-child(3):hover{ background:#48d1cc; }
  
  header > div > a{ display:none; }
  
  
  /*************
   content
  **************/
  .content{ padding:100px 0 0; margin:0 auto;  }
  .content .wrap{padding:0 70px 30px 70px;}
  #about.content .wrap img{ float:left; width:30%; padding:0 10px;}
  
  /*************
   button
  **************/
  .button{ transition:background 0.3s linear, border 0.3s linear, color 0.3s linear; }
  section > a:hover .bottun{ border-color:transparent !important; color:rgba(38,167,225,1); }
  
  
  /*************
   lesson
  **************/
  .class{ width:1024px; margin:0 auto; padding:60px 0 0; }
  .class > dl dd a:hover{ color:#88bf15; text-decoration:none; }
	
	
   /*************
 gallery
**************/
.pic-gallery ul {
	padding: 30px 0;
	margin: 0;
    justify-content: center;
  }

.pic-gallery  li {
	 padding: 0 20px 20px 0;
    list-style: none;
	 float:left;
	 width:33%;
  }

.pic-gallery li:nth-child(3n) {
    padding: 0 0 20px 0;
	 list-style: none;
	 float:left;
	 width:31.7%;
  }
#gallery.content h2{ background:url("../img/main_uc.jpg") no-repeat center; background-size:cover; } 
  
  /*************
   uc
  **************/
  #uc.content h2{ background:url("../img/main_uc.jpg") no-repeat center; background-size:cover; padding:150px 0 150px 0;}
  
   /*************
    footer
  ***************/
  footer{ height:80px; }
  footer p{ line-height:60px;}
  footer a{ width:60px; transition:bottom 0.3s linear, opacity 0.3s linear; bottom:10px; position: absolute; }
  footer a:hover{ opacity:0.6;}
  
}