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

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/

/* title
**********************************************************************/
section h2 span{ display:block; font-size:1rem; color:#aeaeae; font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo, Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-style:normal; }

/* slider
**********************************************************************/
.slider{background-size:cover; width:100%; height:208px; position:relative;}


/* concept
**********************************************************************/
.concept{ padding:25px 0; background:url(../img/bg_gallery.jpg);  background-size: contain;}
.concept .wrap{ padding:25px 27px 0 27px;}
.concept .wrap div{ margin:0 0 30px; overflow:hidden; }
.concept .wrap div h3{ font-size:19px; font-weight:bold; line-height:1.3; letter-spacing:1px; }
.concept .wrap div p{ margin:16px 0 0; line-height:1.7; }

/* info
**********************************************************************/
.info{ background:rgba(255,255,255,0.5); padding:25px 27px 40px; }
.info dl{ max-width:750px; margin:0 auto; font-size:0.92rem; }
.info dl dt{ margin:15px 0 0; padding:15px 0 0; border-top:1px solid #eee; }
.info dl dt:first-child{ margin:0; border-top:none; }
.info dl dt span{ display:block; margin:0 0 0.3rem; color:#48d1cc; }
.info dl dt a{ 
	margin-left: 10px;
	margin-top: 5px;
	background:#48d1cc; font-style:normal; font-weight:normal; line-height:1.3; padding:4px 10px 4px 10px; color:#FFFFFF;  
    -webkit-border-radius: 8px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 8px;   /* Firefox用 */
	border-radius: 8px;        /* CSS3草案 */  }


/* about
**********************************************************************/
.about{ background:rgba(214,255,255,0.9); background-size:cover; text-align:center; }
.about a{ display:block; padding:27px 20px 43px; color:#000; }
.about a h2{ margin:0 0 20px;}
.about a h2 span{ color:rgba(120,120,120,0.9);}
.about a p{ max-width:500px; margin:0 auto 30px auto; font-size:0.93rem; line-height:1.7 }
.about a .bottun{ border-color:#000;}
.about a:hover{ background:rgba(140,200,180,0.7); color:#fff; }
.about a:hover .button{ border-color:#fff;}

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

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

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





/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
	
	
  /* slider
  **********************************************************************/
  .slider{ height:420px; }

  /* concept
  **********************************************************************/
  .concept{ padding:60px 0 40px; }
  
  .concept .wrap{ padding:40px 27px 0 27px; }

  .concept .wrap div{margin:0;}
  .concept .wrap div h3{font-size:34px; letter-spacing:2px; text-align:center; }
  .concept .wrap div h3 span{ display:block; }
  .concept .wrap div p{ margin:40px 120px 0 130px; font-size:1.1rem }
 
  
    /* info
  **********************************************************************/
  .info{ padding:40px 20px 50px;}
  .info dl dt{ margin:20px 0 0; padding:20px 0 0; }
	
  
  
  
  
  
  /* common parts
  **********************************************************************/
  .about a{ padding:40px 20px 60px; }
  .about a p{ margin:0 auto 60px auto; }
  
  
}



/*************************************************************************************************************************
* 1024px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:1024px){

  .wrap{ width:1024px; margin:0 auto; }
  
  
    /* slider
  **********************************************************************/
  .slider{ height:550px; }
  

  /* common hover
  **********************************************************************/  
  section > a{ transition:background 0.3s linear, color 0.3s linear; }
  section > a h2 span{ transition:color 0.3s linear; }
  
  section > a:hover{ background:rgba(96,144,0,0.8); color:#fff; }
  section > a:hover h2 span{ color:#fff; }
  
  
    /* concept
  **********************************************************************/
  .concept{ padding:70px 0 70px; }
  .concept .wrap{ padding:40px 0 40px 0; }
  .concept .wrap img{ width:35%; padding:40px 0 40px 0;overflow:auto; float:right; }
  .concept .wrap div{ margin:30px 0 0; overflow:auto; float:left; }
  .concept .wrap div h3{ width:auto; letter-spacing:4px; }
  .concept .wrap div h3{ text-align:left; }
  .concept .wrap div p{ margin:30px 0 0; }
  
  
  /* info
  **********************************************************************/
  .info dl dt span{ display:inline-block; width:130px; margin:0; }
  .info dl dd{ margin:5px 0 0 130px; }
  .info dl dd a:hover{ text-decoration:underline; }

 /* about
**********************************************************************/
.about{ background:rgba(214,255,255,0.9); background-size:cover; text-align:center; width:50%; float:left; }
.about a{ display:block; padding:27px 20px 43px; color:#000; }
.about a h2{ margin:0 0 20px;}
.about a h2 span{ color:rgba(120,120,120,0.9);}
.about a p{ max-width:500px; margin:0 auto 30px auto; font-size:0.93rem; line-height:1.7 }
.about a .bottun{ border-color:#000;}
.about a:hover{ background:rgba(140,200,180,0.7); color:#fff; }
.about a:hover .bottun{ border-color:#fff;}
  .about a p span{ display:block; }


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

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

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