@charset "UTF-8";

@media screen and (min-width: 1500px) {
  .top-message .box-01 p strong{ font-size: 2.8rem;}
}
@media screen and (min-width: 901px) {
  #contact,
  .top-info,
  .lesson_box,
  .director_box{ padding-left: 25px; padding-right: 25px;}
  .top-info{ padding-top: 90px; padding-bottom: 90px;}
  .lessen_box,
  .director_box{ padding-top: 65px; padding-bottom: 65px;}
  #contact h2,
  .top-info h2,
  .lessen_box h2,
  .director_box h2{ margin-bottom: 70px;}
  .top-message .box-01 p{ margin-bottom: 40px;}
  .mw_wp_form_input form p.txt{ margin-top: 135px;}
  .form_tmp dl{ margin-top: 135px; margin-bottom: 80px;}
  .btnBox a{ font-size: 26vw;}
  .lesson_box p.fs01{ font-size: 26px;}
  .lesson_box p.fs01{ margin-bottom: 30px;}
  ul.list01 > li{ margin-bottom: 70px;}  
}
@media screen and (max-width: 1204px) {
  .preson img{ width: 20vw;}
  .person_intro h3 small{ display: block; }
  .person_intro h3{line-height: 1.2em;}
  .top-message .box-01 p strong{ font-size: 2.8rem;}
  .top-message .box-01 p strong br.showBr{ display: block;}
}
@media screen and (max-width: 900px) {
  a[href^="tel:"]{ pointer-events: auto;}
  .showSP{ display: block!important;}
  .noneSP{ display: none!important;}
  .btnBox{ display: block;}
  .btnBox a{ 
    border-radius: 60px;
    height: auto;
    font-size: 3.4vw;
  }
  .btnBox a.btn-icon::after{
    right: 17px;
    width: 1vw;
    max-width: 10px;
    height: 1vw;
    max-width: 10px;
  } 
  .btnBox a.btn-long{ width: 80%; height: auto; font-size: 3.4vw; padding: 13px;}
  .show-menu{ overflow: hidden; height: 100%;}
  .sec-title-t01 span{ margin-top: 1.5em!important; font-size: 2.6vw;}

  /***----- contents ------***/
  body{ background-color: transparent; padding:0;}
  main{padding-bottom: 0;}
  .wrap{ padding: 0; background-color: transparent; border-radius: 0;}
  .snsBtn{ display: none;}
  /**------- footer ---------*/
  .footer-inbox{ 
    display: block;
    padding: 75px 0 80px;
    width: 54vw;
    max-width: 400px;
  }
  footer .copyrigiht{
    position: static;
    width: 100%;
    background-color: #beaf9b;
    padding: 15px;
    box-sizing: border-box;
    font-size: 1.6rem;
  }
  footer p.addresss{ font-size: 1.2rem;}

  /** contact **/
  #contact{ padding: 55px 3vw 65px;}
  #contact h2{ margin-bottom: 9vw;}
  #contact h2 > img{ max-width: 280px; width: 37vw;}
  .mw_wp_form_input form p.txt{ margin-top: 18vw; padding-left: 0;}
  .form_inbox{ padding: 30px 25px 65px; }
  .form_tmp dl{ display: block; margin-top: 18vw; margin-bottom: 10vw;}
  .kind_contact.complate .contents-box p, 
  .kind_reserve.reserve_complate .contents-box p{ margin-bottom: 45px; font-size: 1.4rem; padding-top: 35px;}
  .kind_reserve .artice-list-wrap,
  .kind_contact .artice-list-wrap{ padding-top: 8.6vw;}
  .form_tmp form{ padding-top: 10vw;}
  .form_tmp .artice-list-wrap .article-list-box{ padding: 4vw 4vw 10vw; box-sizing: border-box;}
  .form_tmp dl > dt{ width: 100%; padding-bottom: 20px; margin-bottom: 0; border-bottom: none;}
  .form_tmp dl > dd{
    width: 100%;
    padding: 0 0px 20px 5px;
    margin-bottom: 25px;
    font-size: 15px;
  }
  .form_tmp dl > dt > span{ position: static; margin-left: 20px; height: 27px; padding: 1px}
  .form_tmp dl > dd > span{ display: block;}
  .form_tmp dl > dd > span.mwform-radio-field{ margin-bottom: 0.5em;}
  .form_tmp dl > dd >span.mwform-tel-field input{ width: 29%;}
  .mw_wp_form .horizontal-item + .horizontal-item{ margin-left: 0!important;}
  .form_tmp .subBtn, .form_tmp .backBtn{ width: 90%; font-size: 16px;}
  .form_tmp .subBtn::after{ right: 18px;}
  .form_tmp .backBtn::after{ left: 18px;}
  .form_tmp .subBtn::after,
  .form_tmp .backBtn::after{ width: 6px; height: 6px;}
  .form_tmp .subBtn{ background:linear-gradient(-90deg, #737474 40px, #fff 40px); padding-right: 40px;}
  .form_tmp .backBtn{ background: linear-gradient(90deg, #737474 40px, #fff 40px); padding-left: 40px; margin-bottom: 20px;}
  .form_tmp input[type="text"],
  .form_tmp input[type="email"],
  .form_tmp textarea{ padding: 5px;}

  /** info **/
  .top-info{ padding: 9vw 3vw 18vw; box-sizing: border-box;}
  .top-info h2{ margin-bottom: 9vw;}
  .top-info h2 img{ max-width: 480px; width: 64vw; height: auto;}
  .article-list li{ padding: 0 10px 10px; margin-top: 5vw;}
  .article-list li a{ display: block;}
  .article-list li a .article-info{ width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .article-list li a .article-info > span{ font-size: 3vw;/*2.2rem*/}
  .article-list li .cat{ 
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 185px;
    min-width: 90px;
    width: 24vw;
    max-height: 48px;
    height: 6vw;
    font-size: 3vw;
    border-radius: 40px;
    padding: 0;
    vertical-align: middle;
    margin-left: 4vw;
  }
  .article-list li .title{ width: 100%; margin-left: 0; font-size: 3vw; margin-top: 9px;}
  .top-info .btnBox{ margin-top: 12vw;}

  /** lesson **/
  .lesson_box{ padding: 7vw 3vw 7vw;}
  .lesson_box h2{ margin-bottom: 10vw;}
  .lesson_box h2 img{ max-width: 250px; width: 33vw;}
  .lesson_box p.fs01{
    font-size: 4vw;
    padding: 13px 1em 13px 1em;
    line-height: 1.4em;
    margin-bottom: 4vw;
  }

  /** director **/
  .director_box{ padding: 8vw 3vw;}
  .director_box h2{ margin-bottom: 9vw}
  .director_box h2 img{ max-width: 305px; width: 40vw;}
  ul.list01{ display: block;}
  ul.list01 li{ width: 100%;}
  .preson > img{ max-width: 315px; width: 42vw;}
  .person_intro h3{ font-size: 4.6vw;}
  .person_intro h3 small{ font-size: 3.4vw;}
  .person_intro h3 + p{ font-size: 3.2vw;}
  .person_intro p.person_intro_fs01{ font-size: 2.6vw;}
  .katagaki_intro li{ font-size: 2.6vw;}
  .katagaki_intro{ padding: 20px;}
  .list01 > li,
  ul.list01 > li:nth-last-child(2){ margin-bottom: 9vw;}

  .top-vision h2 + p > br{ display: none;}
  /** message **/
  .top-message .box-01 p.sp-txtL{ text-align: left;}
  .top-message h2 img{ width: 43vw; height: auto; max-width: 321px;}
  .top-message{ padding-top: 14vw;}
  .top-message::before{ width: 100%;}
  .top-message .box-01{ display: block;}
  .top-message .box-01 .titlebox{ margin-right: 0; padding: 0 3vw; width: 100%; box-sizing: border-box;}
  .top-message .concept-img-box{ width: 100%; padding-left: 20px; box-sizing: border-box;}
  .top-message .box-01 p{ font-size: 2.6vw; text-align: center; margin: 9vw 0 35px;}
  .top-message .box-01 p strong{ font-size: 6.2vw;}
  _::-webkit-full-page-media, _:future, :root .top-message .box-01 p span{
    transform: translateX(0.5em);
    display: inline-block;    
  }

  /**--- top--------**/
  #mv{ 
    width: 95vw;
    height: 100%;
    margin-top: 15px;
  }
  #mv::before{ width: 80vw; height: 466px;}
  .mv_text{ max-width: 535px; width: 71vw;}
  .artice-list-wrap{ padding-left: 3vw; padding-right: 3vw;}  
  header.is-fixed .h-Btn{ right: 10px;}
  header nav{ width: 80%;}
  
  /**--- page ----*/
  .page-mv{ margin-bottom: 5.6vw; margin-top: 15px;}
  .artice-list-wrap .article-list-box{ padding: 4vw 4vw 10vw; box-sizing: border-box;}
  h3.title-s01{ writing-mode: horizontal-tb; min-height: 100%; font-size: 6.6vw; padding-top: 0;}
  
  /***---- single ---***/
  .single article{ width: 95vw; padding: 0;}
  .single article .title-box{padding-left: 10px; padding-right: 10px;}
  .single article .contents{ padding-left: 10px; padding-right: 10px;}
  .single article .title-box h2{ line-height: 1.4em; font-size: 2rem;}
  .single article .cat{ min-width: 90px; font-size: 1.4rem; height: auto; padding: 3px 10px;}
  .prev-next-btn-box > li a{ min-width: auto; padding: 0 5px; font-size: 1.2rem;}
  
}
@media screen and (max-width: 680px) {
  header{ width: 98%;}
  header h1 a img{ max-width: 430px; width: 63vw;}
  #mv::before{ height: 320px; top: 53%;}
  .top-message .box-01 p strong{ font-size: 2.2rem; line-height: 1.4em;}
  .top-message .box-01 p{ font-size: 1.4rem; }
  .top-vision h2 + p{ font-size: 1.6rem;}
  
}
@media screen and (max-width: 480px) {
  .sp_btn{ height: 65px; width: 70px;}
  .sp_btn p{ font-size: 1.6rem;}
  main{ padding-top: 18vw;}

}