@charset "UTF-8";
/*==================================================
 COMMON CSS
==================================================*/


.drawer-open .drawer-navbar-header {
  position: fixed;
  }

.drawer-open header {
 position: static;
  }

.drawer-open main {
  margin-top: -60px;

  }

.hLogo {
  display: none;
  }


.gNavWrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  }

.gNav {
  margin: 0 auto;
  float: right;
  }
  .gNav li {
     float: left;
     text-align: center;
     padding: 10px 0 0 0;
     font-family: "ヒラギノ明朝 Pro W3","ＭＳ Ｐ明朝","細明朝体", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
     }
  .gNav li a {
    color: #FFFFFF;
	display: block;
    padding: 13px 20px 0 20px;
    box-sizing: border-box;
    }
  .gNav li a:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    }

.gNav li a img {
  width: 100%;
  }

.gNav li.gNav01 {
  position: absolute;
  left: 0;
  padding: 0 0 0 10px;
  width: 190px;
  font-weight: bold;
  }
  .gNav li.gNav01 a {
    padding: 10px 0 0 0;
  }


  .gNav li.gNav-tel {
    width: 200px;
    font-size: 12px;
	line-height: 100%;
    paddng: 0;
    text-align: left;
    margin-left: 20px;
    }
  .gNav li.gNav-tel a {
    text-decoration: none;
    padding: 0;
    font-weight: normal;
  }

  .gNav li.gNav-mail img {
    width: 25px;
    margin-right: 5px;
    }



@media (max-width: 1000px) {

  .gNav li.gNav-tel {
    margin-left: 0px;
  }

  .gNav li.gNavi01 {
    width: 120px;
  }

  .gNav li a { padding: 10px 10px 0 10px; }


  .gNav li.gNav-mail span {
     display: none;
    }
}

@media (max-width: 800px) {





.gNav li.gNav01 {
  width: 100px;
  }
  .gNav li.gNav01 a {
    padding: 15px 0 0 0;
  }
  .gNav li.gNav-mail img {
    margin-right: 0;
  }

  .gNav li.gNav-tel span {
    display: none;
  }

  .gNav li.gNav-tel {
    padding: 5px 0 0 0;
  }

  .gNav li.gNav-mail {
    padding: 5px 0 0 0;
  }

}


.hNav01-sp {
  display: none;
  }


@media (max-width: 640px) {

.hNav01-sp {
  display: block;
  z-index: 105;
  position: relative;
  padding: 0 50px 0 10px;
  }
  .hNav01-sp li {
  float: right;
  margin-left: 12px;
  }
  .hNav01-sp li:last-child {
  margin-left: 0px;
  }

  .hNav01-sp li img {
    width: 27px;
  }

  .hNav01-sp li.hNav01-sp01 {
    width: 142px;
    float: left;
    margin-left: 0;
  }
  .hNav01-sp li.hNav01-sp01 img {
    width: 100%;
  }




.hLogo {
  display: block;
  float: left;
  width: 142px;
  z-index: 105;
  position: relative;
  padding: 0 0 0 10px;
  }
  .hLogo img { width: 100%; }

 .gNav {
   width: 100%;
   padding-top: 50px;
  border-top: 1px solid #96E0FB;
   }
 .gNav li {
  width: 100%;
  font-size: 1.4em;
  border-bottom: 1px solid #96E0FB;
  }
  .gNav li:last-child {
  border-bottom: none;
  }
 .gNav01 { display: none; }
 .gNav li a {
   padding: 13px 0;
 }


 .gNav li a img {
   width: 80px;
 }

  .gNav li.gNav-tel {
    margin: 30px 0 0 0;
    text-align: center;
	width: 100%;
  }
  .gNav li.gNav-tel img {
    width: 200px;
  }

  .gNav li.gNav-tel span {
    display: block;
  }
  .gNav li.gNav-mail span {
     display: block;
    }
}

.swipeList01 {
  width: 100%;
  }
  .swipeList01 li {
    width: 18%;
    float: left;
    padding-right: 2.5%;
    padding-bottom: 2.5%;
    }
  .swipeList01 li a img {
    width: 100%;
  }
  .swipeList01 li a:hover img {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    }
  .swipeList01 li:nth-child(5n) { padding-right: 0%;}

@media (max-width: 640px) {

  .swipeList01 li {
    width: 32%;
    padding-right: 2%;
    padding-bottom: 2%;
    }
  .swipeList01 li:nth-child(5n) { padding-right: 2%;}
  .swipeList01 li:nth-child(3n) { padding-right: 0%;}


}



.commonTtl01 {
   font-family: "ヒラギノ明朝 Pro W3","ＭＳ Ｐ明朝", "細明朝体";
   font-size: 1.4em;
   color: #3F2B1E;
   font-weight: bold;
  }

.commonTtl02 {
  }
@media (max-width: 640px) {
.commonTtl02 {
  width: 100%;
  }
  .commonTtl02 img {
    width: 100%;
  }

}

.commonTtl03 {
  font-weight: bold;
  font-size: 1.6em;
  }


.txt01 {
  color: #3F2B1E;
  font-family: "メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  }
@media (max-width: 640px) {
.txt01 {
  text-align: left;
  }
}



.txt02 {
  color: #3F2B1E;
  font-family: "ヒラギノ明朝 Pro W3","ＭＳ Ｐ明朝", "細明朝体";
  }



.contBox01 {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  }

.maxW1200 {
  max-width: 1200px;
  margin-right: auto;
  margin-left:  auto;
  }

.maxW1400 {
  max-width: 1400px;
  margin-right: auto;
  margin-left:  auto;
  }


.caseList01 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  }
  .caseList01 li {
    width: 48.5%;
    margin-bottom: 3%;

    }
  .caseList01 li img {
    width: 100%;
  }

@media (min-width: 641px) {

.toPlanBox01 {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;

  }

  .toPlanBox01-R {
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
  }

}
.toPlanBox01 {
  background: #FFFFFF;
  }

  .toPlanBox01 img {
    width: 50%;
  }
  .toPlanBox01 .toPlanBox01-01 {
    width: 50%;
    padding: 2% 2%;
    box-sizing: border-box;
	text-align: left;
  }
  .toPlanBox01-01 h3 {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  .toPlanBox01-01 p {
    line-height: 160%;
    margin-bottom: 10px;
  }

.toPlanLink01 {
  background: #AAE6FB url(../img/common/toPlanIcon01.gif) no-repeat 95% 50%;
  color: #FFFFFF;
  font-weight: bold;
  width: 170px;
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 10px 0;
  }

@media (max-width: 1000px) {
  .toPlanBox01-01 p {
    font-size: 0.8em;
  }
}


@media (max-width: 640px) {
  .toPlanBox01 {
    display: block;
    width: 95%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
   }
  .toPlanBox01 img {
    width: 100%;
   }
  .toPlanBox01 .toPlanBox01-01 {
    width: 100%;
  }
  .toPlanBox01-01 p {
    font-size: 1.0em;
  }
}

.mImgBox01Wrap {
  background: #EEECE3;
  width: 100%;
  overflow: hidden;
  }
.mImgBox01 {
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  }
  .mImgBox01 img {
    width: 100%;
  }


.mTtl01 {
  padding: 50px 0;
  font-family: "ヒラギノ明朝 Pro W3","ＭＳ Ｐ明朝", "細明朝体","ＭＳ Ｐゴシック";
  font-size: 1.5em;
  line-height: 100%;
  font-weight: bold;
  color: #3F2B1E;
  }
  .mTtl01 span {
    font-family: "メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 0.6em;
    font-weight: normal;
  }


.txt03 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  padding: 30px 0 0 0;
}


/*上線*/
.txt03:before {
  content: '';
  position: absolute;
  left: 50%;
  top: -15px;/*線の上下位置*/
  display: inline-block;
  width: 100px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #594533;/*線の色*/
  border-radius: 2px;/*線の丸み*/
}


.txt04 {
  font-size: 1.2em;
  font-family: "メイリオ","ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
  }


  .onlineBox {
    text-align: center;
    overflow: hidden;
    margin-bottom: 5%;
    margin-top: 5%;
    }
    .onlineBox img {
      width: 90%;
      max-width: 800px;
      }
    .onlineBox a:hover img {
      opacity: 0.7;
      }