/*----------------------------------------
header
----------------------------------------*/

.fixed{
	position: fixed;
	z-index: 999;
}
.head_bg{
	background: #fff;
}
.ptpar{
	padding-top: 14.5%;
}
.ppar2{
	padding: 2% 0;
}
.plpar3{
	padding: 0 0 0 3%;
}
.plpar5{
	padding: 0 0 0 5%;
}
.par87{
	width:87%;
}
.pbpar5{
	padding-bottom: 5%;
}
.ptpar5{
	padding-top: 5%;
}
.ptpar7{
	padding-top: 7%;
}
.logo-up{
	position: relative;
	top:-10%;
}
@media screen and (max-width:650px) {
	.sp-ptpar15{
		padding-top: 15%;
	}
	.sp-par20{
		width:20%;
	}
	.sp-par15{
		width:15%;
	}
	.sp-mrpar3{
		margin-right:3%;
	}
}

header{
  margin:auto;
  padding: 0 0;
  text-align: center;
  margin-bottom: 20px;
}
header .logo{
}
header .flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
header .btn{
  display: flex;
  align-items: center;
}
header .btn .tel{
  margin-right: 20px;
}
/*----------------------------------------
共通
----------------------------------------*/
*{
	margin:0;
	padding:0;
	word-break: break-all;
	vertical-align:middle;
	font-size:1em;
	box-sizing:border-box;
}
td,th,p{
	color:#555555;
}
a{
	text-decoration:none;
}
a:hover,a img:hover{ 
	opacity:0.75;
}
.col a{
	color:#008cff;
}
img{
	max-width: 100%;
	height:auto;
	border:none;
	vertical-align: middle;
}
html {
	font-family:  "游ゴシック", YuGothic, Verdana, Helvetica, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif, "Takao Pゴシック", "TakaoPGothic", sans;
}
body{
	min-width:900px;/*背景が消えるバグ防止*/
	background-color:#FFF;
}
li{list-style: none;}
.width{
	width:100%;
  max-width:900px;
	margin:auto;
}
.bold{font-weight: bold;}
.fl{
	float:left !important;
}
.fr{
	float:right !important;
}
.cf:after{
	clear:both;
}
.cf{
	overflow:hidden;
}
.title{
	background-color:#0074C5;
}
.w100{
	width:100%;
}
.h100{
	height:100%;
}
.red{
	color:red;
}
.white{
	color:white;
}
.blue{
	color:#0074D2;
}
.bold{
	font-weight:bold;
}
h3{
	font-size:25px;
}
h4{
	font-size:20px;
}
sup {
	font-size: 75%;
	vertical-align: top;
	position: relative;
	top: -0.1em;
}
.block{
	display:block;
}
.inline-block{
	display:inline-block;
}
.center{
	text-align:center;
}
.left{
	text-align:left;
}
.right{
	text-align:right;
}
.mt5{
	margin-top:5px !important;
}
.mt10{
	margin-top:10px !important;
}
.mt15{
	margin-top:15px !important;
}
.mt20{
	margin-top:20px !important;
}
.mt30{
	margin-top:30px;
}

.mb5{
	margin-bottom:5px !important;
}
.mb10{
	margin-bottom:10px !important;
}
.mb15{
	margin-bottom:15px !important;
}
.mb20{
	margin-bottom:20px !important;
}
.mb30{
	margin-bottom:30px;
}
.mb50{
	margin-bottom:50px;
}
.mb70{
	margin-bottom:70px;
}
@media screen and (max-width:650px){
	.sp-mt15 {
		margin-top:15px;
	}
	.sp-mb15 {
		margin-bottom:15px;
	}
}
.pt5{
	padding-top:5px !important;
}
.pt10{
	padding-top:10px !important;
}
.pt15{
	padding-top:15px !important;
}
.pt20{
	padding-top:20px !important;
}
.pt30{
	padding-top:30px !important;
}
.pt40{
	padding-top:40px !important;
}
.pt130{
	padding-top:130px !important;
}
.pb5{
	padding-bottom:5px !important;
}
.pb10{
	padding-bottom:10px !important;
}
.pb15{
	padding-bottom:15px !important;
}
.pb20{
	padding-bottom:20px !important;
}
.pb30{
	padding-bottom:30px !important;
}
.pb40{
	padding-bottom:40px !important;
}
.pl5{
	padding-left:5px;
}
.pl10{
	padding-left:10px;
}
.pl20{
	padding-left:20px !important;
}
.pr5{
	padding-right:5px !important;
}
.pr10{
	padding-right:10px !important;
}
.pr20{
	padding-right:20px !important;
}
.p5{
	padding:5px !important;
}
.p10{
	padding:10px !important;
}
.p15{
	padding:15px !important;
}
.p20{
	padding:20px !important;
}
.p30{
	padding:30px !important;
}
.vtop{
	vertical-align:top;
}
.vbottom{
	vertical-align:bottom;
}
.vmiddle{
	vertical-align:middle;
}
.radius5{
	border-radius:5px;
}
.radius10{
	border-radius:10px;
}
.ta-c{text-align: center;}

@media screen and (max-width:980px){
	.pc-only{
		display:none !important;
	}
	.sp-only{
		display:block !important;
	}
	.sp-only.col-wrapp{
		display:table !important;
	}
	.sp-only.col{
		display:table-cell !important;
	}
	.sp_hide,.sp_tb_hide{
		display:none !important;
	}
	.pc_hide{
		display:block !important;
	}
	.pc_tb_hide{
		display:table !important;
	}
	html{
		overflow-x : hidden;
		overflow-y : auto;
	}
	body{
		min-width:0;
		overflow-x : hidden;
		overflow-y : auto;
	}
	.width{
		width:100% !important;
	}
	h3{
		font-size:20px;
	}
	h4{
		font-size:15px;
	}
  img{
    width: 100%;
  }
  .inner{
    padding: 0 2%;
  }
}

/*===============================================
contents
===============================================*/
.mv{
  margin: 0 auto 8%;
}
.script{
  margin-bottom:10%;
}
.script p{
  font-size: 24px;
  color: #00b9ef;
  margin: 4% auto;
  font-weight: bold;
  line-height: 1.8;
}

.ulYellow{
  background-image: linear-gradient(0deg, #ffde00 0%, #ffde00 35%, #ffffff 35%, #ffffff 100%);
  background-size: contain;
}

.bnrBlc{
  margin: 4% auto 12%;
}
.bnrBlc a{
  display: block;
}
.bnrBlc a:hover{
  cursor: pointer;
}
.bnrBlc .bnr{
  margin-bottom: 3%;
}
.bnrBlc .p-name{
  font-size: 22px;
  color: #333;
  font-weight: bold;
  margin-bottom: .5em;
}
.bnrBlc p{
  font-size: 18px;
  color: #333;
  line-height: 1.8;
}
.light_blue{
  color: #00b9ef;
}
.bnrBlc p .ulYellow{
  font-weight: bold;
  color: #00b9ef;
  background-image: linear-gradient(0deg, #ffde00 0%, #ffde00 30%, #ffffff 30%, #ffffff 100%);
  background-size: contain;
}
.bnrBlc p.note{
  text-indent: -1em;
  margin-left: 1em;
  font-size: 14px;
}
footer{
  margin: 15% auto 0;
  background: #ee1e23;
  padding: 15px 0;
  
}
footer p{
  color: #fff;
  font-size: 12px;
  text-align: center;
}


@media screen and (max-width:980px){
  .script p{
    font-size: 18px;
    line-height: 1.6;
  }
  .bnrBlc .p-name{
    font-size: 20px;
  }
  .bnrBlc p{
    font-size: 16px;
    line-height: 1.6;
  }
  .bnrBlc p.note{
    font-size: 12px;
  }
}
@media screen and (max-width:950px){
   .mv {
        margin: 0 -4% 10%;
    }
}

@media screen and (max-width:767px){
    .script p{
        margin: 6% auto;
    }
    .ulYellow,.bnrBlc p .ulYellow{
        padding-bottom: 2px;
    }
    .bnrBlc .bnr{
        margin-bottom: 5%;
    }
    .script{
        margin: 12% auto 16%;
    }
    .bnrBlc{
        margin: 8% auto 20%;
    }
    .inner{
        padding: 0 4%;
    }
    footer p{
        font-size: 11px;
    }
}

/* =========================================================
IE,EDGE
========================================================= */
/* IE */
@media all and (-ms-high-contrast: none) {
    .logo{
        height: 50px;
    }  
}
/* EDGE */


/* =========================================================
Slider
========================================================= */
.slider-nav figure{
  padding: 10px;
}


#wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#slider{
  width: 100%;
  margin:0 auto 30px;
}
.slide-item{
  font-size: 13px;
}
.slide-item img{
    width: 100%;
  margin-bottom: 5px;
}
#thumbnail-list{
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap:nowrap;
  justify-content: center;
}
.thumbnail-item{
  flex: 0 1 20%;
  margin-bottom: 10px;
  box-sizing: border-box;
  position:relative;
  margin: 0 10px;
}
.thumbnail-item:after{
  content:'';
  background-color: rgba(0,0,0,0.5);
  position:absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: .3s opacity linear;
}
.thumbnail-item.thumbnail-current:after{
  opacity: 0;
}
.thumbnail-item img{
  width: 100%;
  margin: 0 auto;
}
.thumbnail-item:hover{
  cursor: pointer;
}

.blc_goo{
  margin: 20% auto;
}
.blc_service{
  margin: 20% auto 10%;
}
.fontL{
  font-size: 22px;
}
.text{
  margin: 20px 0;
}
.btn_goo{
  margin-top: 60px;
}

.reason-wrap{
  margin: 10% auto;
}
.reason-flex{
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
}
.reason-flex .img{
  width: 43%;
  padding-left: 20px;
}
.reason-flex .txt{
  width: 57%;
}
.reason-flex .txt h3{
  margin-bottom: 10px;
}
.btns-contact{
  display: flex;
  justify-content: center;
  margin: 30px auto 20px;
}
.btns-contact div{
  padding: 0 10px;
}
.pc{display: block;margin: auto;}
.sp{display: none;}
@media screen and (max-width:767px){
  .sp{display: block;margin: auto;}
  .pc{display: none;}
  .reason-flex{
    flex-direction: column;
  }
 .reason-flex .img{
   width: 100%;
   padding-left: 0;
   margin-top: 30px;
  }
  .reason-flex .txt{
    width: 100%;
  }
}


.blc_comapany{
  margin: 20% auto 5%;
}
.ttl_red{font-size: 30px; color: #ee1e23;}
.companyinfo{overflow: hidden;margin: 50px auto;}
.companyinfo dt{float: left; font-weight: bold;position: relative;padding-left: 36px;margin-bottom: 3em;}
.companyinfo dt:before{
  content: "";
  width: 26px;
  height: 26px;
  position: absolute;
  top:0;
  left: 0;
}
.companyinfo dt.ic_com:before{
  background: url(../images/icon_company.png) no-repeat;
  background-size: contain;
}
.companyinfo dt.ic_tel:before{
  background: url(../images/ico_tel.png) no-repeat;
  background-size: contain;
}
.companyinfo dt.ic_fax:before{
  background: url(../images/ico_fax.png) no-repeat;
  background-size: contain;
}
.companyinfo dt.ic_clock:before{
  background: url(../images/ico_clock.png) no-repeat;
  background-size: contain;
}
.companyinfo dt.ic_day:before{
  background: url(../images/ico_day.png) no-repeat;
  background-size: contain;
}
.companyinfo dt.ic_place:before{
  background: url(../images/ico_place.png) no-repeat;
  background-size: contain;
}
.companyinfo dt.ic_human:before{
  background: url(../images/ico_human.png) no-repeat;
  background-size: contain;
}
.companyinfo dt.ic_work:before{
  background: url(../images/icon_naiyou.png) no-repeat;
  background-size: contain;
}

.companyinfo dd{margin-left: 8em; margin-bottom: 3em;}

.company-flex{
  display: flex;
}
.company-flex .info{width: 55%;}
.company-flex .map{width: 45%;margin-top: 50px}

@media screen and (max-width:767px){
  .companyinfo dd,.companyinfo dt{margin-bottom: 2em;}
  .btns-contact{ flex-direction: column; margin-top: 15px;}
  .btns-contact div{margin: 6px auto;}
  .thumbnail-item{margin: 0 5px;}
  header .logo{width: 65vw;padding: 0 20px 0 10px;}
  header .btn{width: 35vw;}
  header .btn .tel{margin-right: 0;}
  .btn_goo{margin-top: 25px;}
  .ttl_red{font-size: 24px;}
  .blc_comapany{margin-bottom: 15%}
  .company-flex{ flex-direction: column;  }
  .company-flex .info{width: 100%;}
  .company-flex .map{width: 100%;margin-top: 10px;}
  .companyinfo{margin-top: 10px;margin-bottom: 20px;}
  .btns-contact div{padding: 0 5px;}
  .company-flex{margin-top: 30px;}
}