@charset "UTF-8";


/* HACK
==========================================================*/

.sp-hide{ display: block;}
.sp-show{ display:none;}
.break-word {word-wrap: break-word;}
.navInner { display: none;}

/* OVERWRITE
==========================================================*/

@media screen and (max-width: 648px) {
	
.sp-hide{ display: none;}
.sp-show{ display:inline-block;}
.sp-br-none br{display: none;}
#gnav.sp-show{ height:auto;}

img{ max-width:100%; height:auto;}

.col-l{ float: none; width: auto;}
.col-r{ float: none; width: auto; }
.inner { width: auto !important; padding: 0 3%;}

/* gnav
==========================================================*/

header { height: 50px; box-sizing: border-box;}
.gnav { height: auto; }
.gnav ul { }
.gnav li { width: 100%; float: none; border-left: none; }
.gnav li.last { border-right: npne; }
.gnav li:hover { background:rgba(255,255,255,0.2); }
.gnav li a { border-left: none; line-height: 50px; text-align: left; display: block; font-size: 14px;  padding-left: 15px; background: #0071BC;}
.gnav li.last a { border-right:none; }
    
.sp-header { height: 50px; line-height: 50px; padding-left: 10px; width: 100%; position: fixed !important; top: 0; left: 0; z-index: 99999; background: #0071BC; box-sizing: border-box; }
.sp-logo img { width: 220px !important; height: auto; vertical-align: middle;}

/* menu */
#menu { padding-top: 50px; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; z-index: 9999; overflow: scroll !important; box-sizing: border-box; display: none; background: #0071BC;}
.navInner { padding: 5px 15px; width: 50px; height: 50px; left: calc(100% - 50px); top: 0;  position: fixed; display: block; cursor: pointer; box-sizing: border-box; }
.menu-trigger { width: 20px; height: 16px; line-height: inherit; cursor: pointer; position: relative; display: inline-block; transition: all .4s; box-sizing: border-box; }
.menu-trigger.active { margin-left: 0; }
.menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; position: absolute; left: 0; width: 100%; height: 2px; background-color:  #fff !important;; }
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: calc(50% - 1px); }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger:not(.active):hover span:nth-of-type(1) { top: 2px; }
.menu-trigger:not(.active):hover span:nth-of-type(3) { bottom: 2px; }
.menu-trigger.active span:nth-of-type(1) { transform: translateY(7px) rotate(-45deg); }
.menu-trigger.active span:nth-of-type(2) { display: none; }   
.menu-trigger.active span:nth-of-type(3) { transform: translateY(-7px) rotate(45deg); }
.menu-trigger.active span{ background: #fff !important; }
.menu-trigger.active p{ color: #fff !important; } 

/* common
==========================================================*/

.blog { overflow-x: hidden;}
.section01,.section02,.section03,.section04,section05 { margin: 0 !important; padding: 0 !important;}

.section { width: auto; padding: 7% 0 3%  !important; }

.foottel { padding-bottom: 3%;}
.foottel .txc {  padding: 7% 0 3%;}
footer { padding: 7% 0 3%; }
footer .link { margin-bottom: 3%; line-height: 2em;}
footer .col-r { float: right; margin-bottom: 3%;}
footer .copy { clear: none; padding-top: 3%;  text-align: left !important; }
.mainttl { padding: 0 3%;}
    
.inner1100 {width: calc(100% - 40px); margin: 0 auto;}
.footprice { padding: 30px 0; background: #F4F4F4; font-size: 13px; }
.footprice .inner {}
.footpricettl { font-size: 20px; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid  #0071BC; color: #0071BC;}
.footpricettlsub { margin-bottom: 20px;}
.footprice .flex { display: block; }
.footprice-l { margin-bottom: 30px;}
.footpricemid { margin-bottom: 10px; font-weight: bold;}
.footpriceimg {}
.footpriceimg img { height: 40px; width: auto;}
.footpricetxtmid { margin: 20px 0 10px; padding: 5px; font-size: 13px;  background: #fff;}
.footpricetxt { font-size: 12px;}
.footpricetxt a { text-decoration: underline;}
.footpricetxt a:hover { text-decoration: none;}
.footprice-r { width: 100%; margin-left: 0;}


/* index
==========================================================*/

.index {}
.index .mainimg { }
.index .mainimg .img img { width: 100%; height: auto;}
.index .mainimg .poab { position: static; width: auto; height: auto; background: #CAE2F2; padding-top: 5%;}

.tel.sp-show { padding: 3%; background: #fff; }

.section01 .inner { padding: 0;}
.index .section01 ul li { float: left; width: 48%; height: auto; margin: 0 0 2% 2%; padding-bottom: 3%;}

.index .section02 { width: auto; }
.index .section03 .last { border-bottom: none;}

.index .section04 ul { margin-left: 0; }
.index .section04 ul li { width: 90%; height: auto; margin: 0 0 5% 5%;  }
.index .section01 ul li .txt { padding-bottom: 5%;}


.index .section05 .col-l { margin-bottom: 5%;}


/* kasou
==========================================================*/

.kasou { }
.kasou .mainimg { }
.kasou .mainimg .mainttl { font-size: 20px; }
.kasou .mainimg .pagettl { bottom: -30%; } 
.kasou .mainimg .pagettl .txt  { top: 45%; left: 5%; font-size: 25px; text-align: center; } 

.kasou .side { position: static; width: 90%; margin: 10% 0 10% 5%; }
.kasou .sectionouter { width: auto; } 

.kasou .section {  }
.kasou .catch { margin-bottom: 6%; }
.kasou .camp { margin: 10% 0 5%; height: auto; background: url(../images/common/camp-bg.png) repeat;}

.kasou .sectionouter { margin-bottom: 0; } 


/* servise
==========================================================*/

.kasou.servise {}
.kasou.servise .section01 { padding-top: 70px !important; }
.kasou.servise .section01 .col-l,
.kasou.servise .section01 .col-r { background: #fff; width: auto; height: auto; padding: 70px 5% 5%; margin-bottom: 20%; }
.kasou.servise .section01 .poab { top: -50px; left: 120px;}

.kasou.servise .nami {}
.kasou.servise .camp { position: static; margin-top: -60px;}
.kasou .sectionouter.sectionouter02 { margin-top: 0; padding-top: 0;}
.kasou.servise .bg-g { padding: 5% 0;}

.kasou.servise .section02 { height: auto; margin-bottom: 60px;}
.kasou.servise .section02 .col-l { width: 90%; margin-left: 5%; }
.kasou.servise .section02 .col-r { padding: 5%; width: auto; }
.kasou.servise .section02 .ttl { font-size: 20px; }
.kasou.servise .section02 .priceouter .txt { font-size: 0.95em;}
.kasou.servise .section02 .priceouter .price span { font-size: 2.5em; }


/* flow
==========================================================*/

.kasou.flow {}
.kasou.flow .catch { color: #E9600E; padding-left: 0; font-size: 20px; }
.kasou.flow .catch span { font-size: 20px;}
.kasou.flow .section01 { margin-bottom: 60px; }
.kasou.flow .section01 .ico { margin-right: 0; text-align: center; margin-bottom: 5%; }
.kasou.flow .section01 .ico img { width: 25%; }
.flowlist { font-weight: bold; font-size: 15px;}
.flowlist li { height: auto; padding: 5% 0; }
.flowlist li .col-l { float: left; padding-left: 2%;}
.flowlist li .txt { line-height: 1.5em; padding: 0 3% 0 50px;}
.flowlist img { padding: 0; line-height: none;}



/* faq
==========================================================*/

.kasou.faq {}
.kasou.faq .ttl { font-size: 20px;}
.kasou.faq .faqnav { width: auto; }
.kasou.faq .faqnav ul { margin-left: -3%;}
.kasou.faq .faqnav li { width: 30%; height: 35%; margin-left: 3%; margin-bottom: 3%; }
.kasou.faq .faqnav li a { display: block; box-sizing: border-box; width: 100%; height: 100%; padding-top: 25%; border-radius: 50%; }
.kasou.faq .side { margin-top: -10%;}
dl.faq {}
dl.faq dt { font-size: 18px; line-height: 1.6em; }
dl.faq dd { line-height: 1.5em; padding-left: 0; padding-bottom: 5%; border-bottom: 1px dotted #666; margin-bottom: 5%;}


/* company
==========================================================*/

.kasou.company {}
.kasou.company table { width: auto; margin-bottom: 0; }
.kasou.company table tr { border-bottom: 2px solid #fff; }
.kasou.company table th { width: 100%; display: block; box-sizing: border-box; padding: 3% 5%; }
.kasou.company table td { width: 99%; display: block; box-sizing: border-box; line-height: 1.6em; padding: 5%; }

.privacy { margin-bottom: 0;}
.privacy dd { line-height: 1.6em;}


/* area
==========================================================*/
.blog {}
.kasou.area {}
.kasou.area a { line-height: 2.5em;}
.kasou.area .section {  margin-bottom: 5% !important; padding: 5% !important; }

.kasou.area.detail { }
.kasou.area.detail .catch br { display: none;}
.kasou.area.detail .section01 {}
.kasou.area.detail .section01 .col-l { float: left; width: 45%; margin-right: 5%;}
.kasou.area.detail .ttl { padding-top: 10%;}
.kasou.area.detail .bg-g .ttl { font-size: 20px; }
.kasou.area.detail .bg-g.kotei { }
.kasou.area.detail .bg-g.kotei .txjus { text-align: left; }
.kasou.area.detail .bg-g.kotei .txjus br { display: none;}
.kasou.area.detail .bg-g.kotei dt { line-height: 1.5em;}
.kasou.area.detail .bg-g.kotei dd { text-align: left;  line-height: 1.5em; margin-bottom: 10%;}


}