@charset "UTF-8";


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

.sp-hide{ display: block;}
.sp-show{ display:none;}
#gnav.sp-show{ height:0; overflow:hidden;}

.break-word {word-wrap: break-word;}

#sp-headerInner{ display:none;}
.sp_nav { display:none; }

.slickmenuTop {
    display:block;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

.show1060 { display: none;}


/* OVERWRITE
==========================================================*/
@media screen and (max-width: 1270px) {
	header .col-l.sp-hide { width: 180px; }	
	header .col-l.sp-hide img { width: 180px; }	
	header .yellow .arrow { display: none;}
	header .yellow .txt { letter-spacing: normal; margin-left: 5px; }
	.gnav {  }
	.gnav li {  width: 130px; margin-left: 15px; margin-bottom: -30px; }
	.gnav li a { width: 130px; padding-top: 20px; }
	.gnav .en { width: 130px; }
	.gnav .jp { width: 130px; }
}

@media screen and (max-width: 1060px) {
	.show1060 { display: block;}
	header .yellow .txt { font-size: 14px; text-align: center; line-height: 1.4em; padding-top: 12px; padding-left: 5px; }
	header .yellow .tel img { width: 280px;}
	header .col-l.sp-hide { width: 160px; }	
	.gnav li {  width: 110px; }
	.gnav li a { width: 110px; }
	.gnav .en { width: 110px; }
	.gnav .jp { width: 110px; }
	.gnav .en { letter-spacing: 1px; }
	.gnav .jp { letter-spacing: normal;}
	
}


@media screen and (min-width: 649px) {
#sp_menu { display: none;}
}

@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
==========================================================*/

.js #menu { display:none; }
.js .slicknav_menu { display:block; }

.gnav { height: auto; }
.sp-header { margin-top: 0;}
.index .sp-header { margin-top: 0; }
.sp-logo img { max-height: 40px; }


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

.ttl{ width: auto; margin-bottom: 10%; text-align: center; }
.ttl .en {  font-size: 50px; letter-spacing: 0.1em;}
.ttl .jp { font-size: 16px;}

.serlist { width: 100%; margin-bottom: 0; }
.serlist li.wrap { float: left; width: 100%; margin-bottom: 0; text-align: center; } 
.overtxt { width: 100%; font-size: 40px; text-align: center; }
.overtxt.jp { font-size: 30px;}
.obj { bottom: 0; right: 0; }
.serlist li.wrap .midashi { margin: 20px 0;}
.serlist li.wrap .midashi span { font-size: 24px; font-weight: bold; background: linear-gradient(transparent 75%, #ff0 0%); }
.serlist li.wrap .camp { width: 100%; }
.serlist li.wrap .camp li{ width: 100%; }
.serlist li.wrap .camp li.txt { margin-bottom: 3%; text-align: center;}
.serlist li.wrap .camp li.txt span { }
.pritxt {  } 
.serlist li.wrap .camp li.pritxt span { }

.linkbtn { width: 100%; height: 160px !important; }
.linkbtn .linktxt .en { font-size: 30px;}

.camp { margin-bottom: 6%;}


.widecontact { width: 100%; box-sizing: border-box; height: auto; background:url(../img/common/contactbg.png) repeat; border-top: 1px solid #000; border-bottom: 1px solid #000;}
.widecontact .clearfix { padding: 3%;}
.widecontact .col-l { width: 100%;}
.widecontact .midashi { height: auto; line-height: 1.4em; font-size: 16px; margin-bottom: 6%; padding: 4%;}
.widecontact .img { margin-bottom: 6%; }
.widecontact .col-r { width: 100%; margin: 0 auto; }
.widecontact .col-r ul { margin: 0; }
.widecontact .col-r li {font-size: 16px; float: left; margin-left: 2%; border-radius: 0; background: #fff; width: 48%; height: auto; line-height: 1.2em; padding: 3% 0;  }

.areabtn { box-sizing: border-box; height: auto; padding: 6%; margin-bottom: 12%;}
.kasou .areabtn { height: auto;} 
.areabtn a { display: block; width: 100%; height: auto;}
.areabtn .col-l { width: 100%; }
.areabtn .col-l .midashi { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.areabtn .col-l .txt { margin-bottom: 4%;}
.areabtn .col-r {}
.areabtn .ttlarea { text-align: center; margin-bottom: 4%; }
.areabtn .ttlarea .en { margin: 0 auto; font-size: 40px; width: 50%; }
.areabtn .ttlarea .en:after { content: ''; display: block; width: 100%; height: 10px; background: #ff0; margin-top: -30px; margin-bottom: 20px;}
.areabtn .ttlarea .jp { font-size: 16px;}

footer { padding: 8% 0;}
.footmenu { display: block; margin: 6% 0; }
.footmenu li { }
.footmenu li a { padding: 0 10px;}
.footmenu li:before { content: "|"; }
.footmenu li:after { content: ""; }
.pagetop { width: 20%; right: 0; bottom: 0; }
footer .txc { text-align: left; }




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

.slider-pro { margin: 0 !important;}
.index {}
.index .ttl { padding: 8% 0;}
.index .ttl .en:after  { margin-top: -40px; margin-bottom: 35px;}
.index .section { margin-bottom: 15%;}
.index .section01 .ttl { width: 100%;  }
.index .section01 .ttl .en:after  { border: none;}
.index .section01 .wrap-l { margin-top: 0;}
.index .section02 .reason { margin-left: 0; }
.index .section02 .reason li { width: 100%; margin: 0; margin-bottom: 8%;}
.index .section02 .reason li .col-l { width: 30%; margin: 0 auto 4%; } 
.index .section02 .reason li .col-r { width: 100%;} 
.index .section02 .reason li .col-r .midashi { font-size: 24px; text-align: center; margin-bottom: 4%;}
.index .section03 {}
.index .section03 .flow { margin-bottom: 3%; margin-left: 0; }
.index .section03 .flow li { box-sizing: border-box; float: none; min-width: 50%; height: auto; background: none; margin: 0; margin-bottom: 3%;}
.index .section03 .flow li:last-child { background: none;}
.index .section03 .flow li .no { float: left; font-size: 20px; width: 40px; height: 40px; border-radius: 50%; line-height: 40px; text-align: center;  }


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

.kasou { }
.kasou .pagettl { width: 90%; margin: 8% auto; text-align: center; position: relative; z-index: 9999; }
.kasou .pagettl .en { width: 90%; margin: 0 auto; font-size: 55px; width: 100%; font-family: 'Poppins', sans-serif; }
.kasou .pagettl .en:after { content: ''; display: block; width: 90%; height: 20px; background: #ff0; margin: -40px auto 15px;}
.kasou .pagettl .jp { font-weight: bold; font-size: 16px; font-family: 'Noto Sans Japanese', serif; }
.kasou .catch { position: relative; z-index: 9999; box-sizing: border-box; width: 100%; height: auto; font-family: 'Noto Sans Japanese', serif; border: 1px solid  #000; border-left: none; border-right: none; }
.kasou .catch p { font-weight: 700; line-height: 1.4em; text-align: center; font-size: 20px; font-style: oblique; padding: 4% 0; }

.kasou .section { padding: 8% 0 12%; }



/* price
==========================================================*/

.price { }

.price .serlist li.wrap { margin-bottom: 0;} 
.price .serlist .overtxt { }
.price .serlist .overtxt p { }
.price .serlist .overtxt:hover { background: none;}
.price .serlist li.wrap .camp { text-align: center; height: auto; padding: 6%; margin-left: 0; background: #ff0;  }
.price .serlist li.wrap .camp li { width: 100%; margin-left: 0;}
.price .serlist li.wrap .camp li.txt { }
.price .serlist li.wrap .camp li.txt span { font-weight: bold; }


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

.flow { }
.flow .flolist { margin: 0; }
.flow .flolist li.wrap { float: left; width: 100%; margin-bottom: 8%; margin-left: 0; height: auto !important; position: relative; }
.flow .flolist li.wrap div.img { width: 25%; margin: 0 auto 4%; }
.flow .flolist li.wrap .midwrap { width: 100%; padding-bottom: 5px; margin-bottom: 15px; }
.flow .flolist li.wrap .midwrap .midashi { width: 100%; font-size: 20px; }
.flow .flolist li.wrap .muryo.sp-show { position: absolute; top: 0; right: 0; width: 55px; height: 30px; line-height: 30px; background: #ff0; font-weight: bold; text-align: center; }
.flow .flolist li.wrap p { text-align: center; margin-bottom: 20px; }


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

.faq { }

.faqlist {width: 100%; }
.faqlist .maru { float: left; width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
.faqlist p { padding-left: 60px; }
.faqlist dt { margin-bottom: 6%; }
.faqlist dt p { line-height: 1.6em; font-size: 18px; }
.faqlist dd { border-bottom: 1px solid #000; margin-bottom: 8%; padding-bottom: 8%;}
.faqlist dd:last-child { padding: 0; margin: 0; border: none;}
.faqlist dd p { line-height: 1.6em; }
.faqlist p.txjus { text-align: left;}


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

.company { }
.company .comtb { border-bottom: 1px solid #000; }
.company .comtb td { display: block; padding: 3%; border-bottom: none; line-height: 1.6em; }
.company .comtb td.midashi { width: 100%; background: #f5f5f5; }




/* privacy
==========================================================*/

.privacy { }
.privacy .pridl { width: 100%; }
.privacy .pridl dt { font-size: 18px; margin-bottom: 4%;}
.privacy .pridl dd { padding-bottom: 6%; margin-bottom: 4%; line-height: 1.6em;}


/* area
==========================================================*/

.area { }

.area .areabtn { position: relative; z-index: 9999; border: none; height: auto; margin-bottom: 0; }
.area .areabtn a { display: inline; text-decoration: underline;}
.area .areabtn a:hover { text-decoration: none;}

.area .tihou { width: 100%; margin:0 auto 6%; }
.area .tihou .midashi { font-size: 18px; margin-bottom: 4%;  }
.area .tihou dl { }
.area .tihou dt { font-size: 18px; }
.area .tihou dt .line { margin: 5px 0 15px;  }
.area .tihou dt .line p { width: 20%; }
.area .tihou dd { margin-bottom: 8%; line-height: 1.6em; }

.area.detail { }
.area.detail .subcatch { font-size: 20px; margin-bottom: 8%;}
.area.detail .serlist { margin-bottom: 8%;}
.area.detail .serlist .midashi { }
.area.detail .bbox { box-sizing: border-box; width: 100%; border: 1px solid #000; margin-bottom: 4%; padding: 6%; line-height: 1.6em; }
.area.detail .bbox .midashi { font-size: 18px; height: 40px; line-height: 40px; width: 100%; background: #ff0; margin-bottom: 6%; }
.area.detail .bbox li { margin-bottom: 4%; }

.area.detail .plicetb { width: 100%; }
.area.detail tr { }
.area.detail td {  display: block; padding: 0; border-bottom: 1px dotted #000; }
.area.detail td.name { width: 100%; border-bottom: none; }
.area.detail td.plice { width: 100%; border-bottom: none; }
.area.detail td.arrow { float: left; width: 6%;}
.area.detail td.red { float: left; width: 50%; color: red; }

.area.detail td.arrow,
.area.detail td.red,
.area.detail td.pri { padding-bottom: 4%; margin-bottom: 4%;}

.area.detail tr:last-child td.arrow,
.area.detail tr:last-child td.red,
.area.detail tr:last-child td.pri { padding-bottom: 0; margin-bottom: 0;}

}