@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;
}

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

.resp { display: none;}

@media screen and (max-width: 1170px) {

.resp { display: inline;}
header { }
header .col-l { padding-left: 10px; padding-top: 10px; }

}

@media screen and (max-width: 1070px) {
.gnav { height: 100px;  }
}

@media screen and (max-width: 890px) {
header .col-l { margin-bottom: 20px; }
header .col-r { float: left; }
}

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

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%;}


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

.ttl { text-align: center; padding-top: 12%; margin-bottom: 6%;}
.ttl .en { font-size: 45px; }
.ttl .jp { font-size: 16px; }

.linkbtn {font-size: 16px; padding-left: 20px; height: 60px; width: 100%; margin: 0 auto; }

.camp { margin-top: 8%; padding-bottom: 12%;}
.areablock a { padding-bottom: 12%; display: block;}

.widecontact { box-sizing: border-box; padding-top: 6%; width: 100%; height: auto; 
background: url(../img/common/contactbg.png) center center / cover no-repeat; }
.widecontact .inner { padding-bottom: 3%;}
.widecontact .midashi { text-align: center; font-style: oblique; border-bottom: 1px solid #fff; padding-bottom: 10px; }
.widecontact .midashi span { font-size: 18px; color: #fff; padding-bottom: 5px; border-bottom: none; }
.widecontact .arrow { text-align: center; margin-top: -12px; margin-bottom: 2%; }
.widecontact .img { margin-bottom: 20px;}

.widecontact .midashi02 { width: auto; box-sizing: border-box; height: 30px; line-height: 30px; margin-bottom: 2%; background: #fff; font-size: 16px; color: #008099; }

footer { padding: 4% 0; }
footer .footmenu { width: 100%; margin-bottom: 3%; display: block; justify-content: center; }
footer .footmenu li { text-align: left; margin-bottom: 2%; }
footer .footmenu li:after { content: "";}
footer .footmenu li:before { content: "|";}
footer .footmenu li a { padding: 0 15px;  }
footer .pagetop { right: 4%; bottom: 4%; }
footer .midashi.txc { text-align: left;}
footer .copy {text-align: left; }



.tume { letter-spacing: normal !important; letter-spacing: -0.05em !important;}


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

#gnav.sp-show{ height:auto;}

.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; }


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

.index { }
.index .section { padding-bottom: 6%;}
.index .section.section04 a,
.index .section.section05 a { display: block; padding-bottom: 12%;}

.index .section01 { }
ul.service { margin-bottom: 6%; }
ul.service li.wrap { width: 50%; float: left; }
ul.service li.wrap img { width: 100%;}
ul.service li.wrap .txt { background: #fff; padding:10px; }
ul.service li.wrap .txt .bikou { line-height: 1em; padding-top: 5px;}
ul.service li.wrap .txt .sp-show { font-size: 0.9em; color: #fff; background: #B52136; padding: 3px 6px; margin-bottom: 5px; }
ul.service li.wrap .txt .indprice span { font-size: 28px; }
ul.service li.wrap02 .txt { background: #eaeaea; }
	
.index .section02 {}
.index .section02 .ttl .en { line-height: 50px; margin-bottom: 20px; }
.index .help { }
.index .help li { width: 100%; height: auto;}
.index .help .txt { float: left; padding: 6% 0 0 6%; } 
.index .help .txt .midashi { line-height: 32px; font-size: 30px; color: #008099; margin-bottom: 10%; }
.index .help .txt .bikou { font-size: 14px; padding-bottom: 6%; }
.index .help .img { float: right; box-sizing: border-box; width: 45%; padding: 3%; padding-left: none; }

.index .helptunagi { text-align: center; }
.index .helptunagi .en { line-height: 1.2em; font-size: 25px; margin-bottom: 6%; }
.index .helptunagi .arrow { width: 100%;height: auto; position: inherit;   border: none; }
.index .helptunagi .arrow p { width:100%; color: #fff; position: inherit; color: #008099; font-weight: bold; }

.index .section03 {}
.index .reason { margin-left: -15px; padding-left: 2%; }
.index .reason li { float: left; box-sizing: border-box; width:100%; height: auto; background: #fff;  }
.index .reason .img { text-align: center; margin: 5% 0 4%; }
.index .reason .img img { width: 18%;}
.index .reason .midashi { text-align: center; color: #008099; font-size: 18px; font-weight: bold; margin-bottom: 5%; }
.index .reason .txjus { width: 90%; margin: 0 auto 6%; }

.index .section04 { }
.index .section04 .midashi { font-weight: bold; }
.index .section04 .sp-midashi01 { color: #008099; padding: 8% 4%; }
.index .flow { margin-bottom: 6%; }
.index .flow li { position: relative;  float: none; width: 100%; border-bottom: 1px solid #008099; background: #f5f5f5; box-sizing: border-box;  height: auto; padding: 3% 0;  }
.index .flow li:last-child { border-bottom: none;}
.index .flow li .en { font-size: 25px; float: left; text-align: left; padding: 0; margin-left: 4%; }
.index .flow li .midashi02 { background: none; color: #008099; font-size: 18px; padding-top: 3px;  text-align: left; padding-left: 12%;  }
.index .flow li .arrow { position: absolute; width: 8px; font-size: 16px; z-index: 9999; bottom: -15px; left: 49%; color: #008099; background: #f5f5f5; }

.index .section06 {}
.index .voice { margin-left: -1%; }
.index .voice li { float: left; margin-left: 1%; box-sizing: border-box; width: 49%; margin-bottom: 5px; height: auto; }
.index .voice li .col-l { float: left; width: 100%; }
.index .voice li .col-l .midashi { width: 100%; font-size: 20px; text-align: center; color: #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%); }
.index .voice li .col-r { float: left; box-sizing: border-box; width: 100%; height: 320px; padding: 6%; }
.index .voice li .col-r .midashi { font-weight: bold; color: #008099; font-size: 16px; margin-bottom: 6%; }
.index .voice li .col-r .txt {  }

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

.kasou { }
.kasou .ttlarea { width: 100%; height: 150px; background:url(../img/sp/common/ttlbg.png) no-repeat left center; }
.kasou .ttlarea .en { font-size: 45px; line-height: 1em; margin-bottom: 5%; }
.kasou .ttlarea .jp { font-size: 16px;}
.kasou .contents { background: #f5f5f5; padding-top: 6%; }
.kasou .midashi-big { margin: 0 auto 6%; font-size: 24px; width: auto; height: auto; line-height: 1.2em; padding: 4%; }


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

.service { }
.navi { border-bottom: 1px solid #008099; margin-bottom: 6%; }
.navi tr { border-right: 1px solid #008099; }
.navi td { position: relative; float: left; box-sizing: border-box; width:  50%; border: 1px solid #008099; border-bottom: none; border-right: none; background: #fff; height: 40px; }
.navi td a { padding-left: 10px; display: block; color: #008099; line-height: 40px; }
.navi td i { position: absolute; right: 10px; top: 10px; }
.navi td span { display: inline;}

.service .serlist { margin-left: -10px; margin-bottom: 6%; }
.service .serlist .serbox { float: left; width: 48%; height: auto; margin: 0; margin-left: 2%; margin-bottom: 2%;  }
.service .serlist .serbox .img { float: none; position: relative; width: 100%; }
.service .serlist .serbox .img .poabtxt { width: 100%; text-align: center; color: #fff; font-weight: bold; font-size: 25px; position: absolute; top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari用 */
  transform: translate(-50%, -50%); }
.service .serlist .serbox .txt { background: #fff; width: 100%; height: 100%; }
.service .serlist .serbox .txt ul { padding: 6%;}
.service .serlist .serbox .txt li { display: inline;}
.service .serlist .serbox .txt li:after { content: "／"; }
.service .serlist .serbox .txt li:last-child:after {content: none;  }

#ser01 .txt, #ser02 .txt { min-height: 160px; }
#ser03 .txt, #ser04 .txt { min-height: 180px; }
#ser05 .txt, #ser06 .txt { min-height: 200px; }
#ser07 .txt, #ser08 .txt { min-height: 220px; }
#ser09 .txt ,#ser10 .txt { min-height: 180px; }
#ser11 .txt, #ser12 .txt { min-height: 140px; }


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

.price { }

.price .camp { margin-top: -2%; padding-bottom: 6%;}

.price .prilist { padding-bottom: 12%; }
.price .pribox { float: left; width: 50%; }
.price .pribox .img { position: relative; }
	.price .pribox .poabtxt { width: 100%; font-size: 20px; line-height: 1.2em; }
  .price .pribox .poabtxt span { display: block; margin-top: -3px; font-size: 12px; }
.price .pribox .midashi { text-align: center; padding: 0; }
.price .pribox .txtarea { background: #fff; padding: 6%; }
.price .pribox .txtarea .bikou { text-align:center; margin-bottom: 5px; font-weight: normal;}
	.price .pribox .txtarea .tokka { }
	.price .pribox .txtarea .tokka .jp { width: 100%; height: 25px; margin-bottom: 3%;  }
	.price .pribox .txtarea .tokka .en { letter-spacing: 0; color: #B52136; font-size: 18px; padding-left: 0; text-align: center; }
	.price .pribox .txtarea .tokka .en span { font-size: 30px; }
	



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

.flolist { width: 100%; margin-bottom: 6%; }
.flolist tr { }
.flolist td { position: relative; box-sizing: border-box; padding-top: 20px;}
  .flolist td:after { position: absolute; bottom: -2px; left: 0; z-index: 2; content: ''; width: 100%; height: 1px; background-color: #fff; }

.flolist td.midashi { width: 30%; }
.flolist td.midashi04 { padding-bottom: 10px; }
	.flolist td.midashi .mid-in  { width: 100%; }
	.flolist td.midashi div .en  { font-size: 30px; }
	.flolist td.midashi div .jp  { font-size: 15px; margin-bottom: 10px;}
	.flolist td.midashi .arrow { position: absolute; left: 50%; bottom: -8px; z-index: 999; }
	
	
.flolist td.ill { width: 15%; }
.flolist td.ill p { width: 80%; padding: 0; padding-left: 10%; }
  
.flolist td.box { padding: 0; width: 100%;  }
.flolist td.box .wrap { padding: 6%; }
.flolist td.box:after { border-bottom: 1px solid #eee; }
.flolist td.box { padding: 2% 0; }
.flolist td.box01 { height: auto;  }
.flolist td.box02 { height: auto; }
.flolist td.box03 { height: auto; }

.flolist .sp-muryo { width: 40px; height: 30px; line-height: 30px; color: #fff; border: 1px solid #fff;}


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

.area {}
.area .bg-w { padding-top: 8%;}

.areabox { width: 100%; margin: 0 auto 6%; }
.areabox .col-l { width: auto;}
.areabox .col-l .midashi { background: #008099; box-sizing: border-box; margin-bottom: 10px; padding-left: 10px; color: #fff; font-size: 16px; line-height: 35px; height: 35px; }
.areabox .col-l .txt { margin-bottom: 20px;}
.areabox .col-r {  width: 80%; margin: 0 auto;}
.areabox a { color:#008099; text-decoration: underline; font-weight: bold;  }
.areabox a:hover { text-decoration: none; }
.areabox .col-l .midashi a { display: block; color: #fff; text-decoration: none; position: relative; font-weight: normal; }
.areabox .col-l .midashi a i { position: absolute; right: 10px; top: 10px; }

.area .tihou { margin-bottom: 6%;}
.area .tihou .col-l { width: 100%; }
.area .tihou .col-r { width: 100%; }
.area .tihou .col-l .midashi-big { font-size: 20px; height: 30px; line-height: 30px; }
.area .tihou .col-r dl { }
.area .tihou .col-r dt { font-size: 18px;}
.area .tihou .col-r dt .line { margin: 5px 0 20px;  }
.area .tihou .col-r dt .line p { width: 20%; }
.area .tihou .col-r dd { margin-bottom: 4%; }

.area.detail { }
.area.detail .bg-w { padding: 6%; margin-bottom: 4%;}
.area.detail .ttl { padding-top: 0;}
.catch { text-align: center; font-size: 20px; font-family: 'Noto Sans Japanese', serif; font-style: oblique; font-weight: bold; margin-bottom: 6%; }

.area.detail .bg-w .linettl { font-size: 20px; }
.area.detail .bg-w .linettl .line {  margin: 5px 0 20px; }
.area.detail .bg-w .linettl .line p {width: 20%; }
.area.detail .bg-w ul { }
.area.detail .bg-w ul li { margin-bottom: 6%;}
.area.detail .bg-w ul li:oast-child { margin-bottom: 0;}

.area.detail .plicetb { width: 100%; }
.area.detail tr { }
.area.detail td { display: block; float: left; margin: 0; padding: 0; }
.area.detail td.name { width: 50%; border-bottom: none; }
.area.detail td.plice { text-align: right; width: 50%; border-bottom: none;}
.area.detail td.arrow { clear: left; width: 10%;}
.area.detail td.red { width: 55%; }
.area.detail td.pri { text-align: right; width: 35%; }
.area.detail td.arrow,
.area.detail td.red,
.area.detail td.pri { padding-bottom: 3%; margin-bottom: 3%;}



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

.faq { }
.faq .navi {  }
.faq .navi td { width: 100%; }

.faq .faqlist { }
.faq .faqlist .faqbox { margin-bottom: 6%; }
.faq .faqlist .faqbox .col-l { width: 100%; height: 30px; }
.faq .faqlist .faqbox .col-l .midashi-big { position: relative; font-size: 20px; height: 30px; margin-bottom: 4%;  }
.faq .faqlist .faqbox .col-l .midashi-big p { width: 100%; height: 30px; }
.faq .faqlist .faqbox .col-r { width: 100%; margin-top: 35px; }
.faq .faqlist .faqbox .col-r .bg-w { margin-bottom: 5px; padding: 6%; }
.faq .faqlist .faqbox .col-r dl { }
.faq .faqlist .faqbox .col-r dl .en { float: left; font-size: 30px; width: 30px; }
.faq .faqlist .faqbox .col-r dl .jp { width: auto; padding-left: 40px; line-height: 1.8em;  }
.faq .faqlist .faqbox .col-r dt.que { margin-bottom: 20px;  }
.faq .faqlist .faqbox .col-r dt.que .en { color: #008099;}
.faq .faqlist .faqbox .col-r dt.que .jp {  font-size: 16px; line-height: 1.6em;}




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

.company { }
.company .comlist { width: 100%; }
.company .comlist td { display: block; width: auto; }
.company .comlist .midashi { font-size: 14px; width: auto; background: #EAEAEA; padding: 4% 6%; }
.company .comlist .txt { padding: 6%; line-height: 1.6em; }


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

.privacy { }
.privacy .privdl { }
.privacy .privdl dt { display: block; float: none; padding-top: 4%;font-size: 16px;}
.privacy .privdl dd { display: block; float: none; padding: 4% 0; padding-left: 0; line-height: 1.6em; border-bottom: 1px dotted #000;  }


}