@charset "utf-8";

@media screen and (max-width: 768px) {
	.SP{ display: block;}
	.PC{ display: none;}
	body{
		width: 100%;
		/*max-width: 100%;
		overflow-x: hidden;*/
		font-size:3.5vw;
	}
	#top{
		/*width: 100%;
		max-width: 100%;*/
		overflow-x: hidden;
	}

/*--header-------------------------------------------------------*/
#header{
	width: 100%;
	background:url("../img/header_bg.jpg") no-repeat center bottom;
	background-size: cover;
	position: relative;
}
#header #head{
	width: 95%;
	padding:15px 0;
	margin:0 auto;
}
	#header .desc{
		font-size:0.7em;
	}
#header #logo{
	float:left;
	width: 30%;
}
#header #head .hnav{
	float:right;
	width: 65%;
  	display: -webkit-flex;
  	display: flex;
 	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: flex-end;	
 	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 	align-items: center; /* 縦方向中央揃え */	
}
#header #head .hnav li{
	margin-left:2%;
	width: 42%;
}
#header #head .hnav li.hmail{
	width: 54%;
}
#header #head .hnav li.hmail a{
   display: block;
	width: 100%;
         background-image: -webkit-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: -moz-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: -o-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: linear-gradient(91deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
	padding:1em 0;
	text-align: center;
	color:#fff;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
	font-size:0.6em;
	line-height: 1.3em;
}
#header #head .hnav li.hmail a span{
	background: url("../img/icon_mail.png") no-repeat left center;
	background-size: 11px auto;
	padding-left:15px;
	font-weight: bold;
}
#header .wrap{ position: relative; padding-bottom:5vw;}
#header h2{
	padding:10vw 10vw 15vw;
	text-align: center;
}
#header .mainli{
  	display: -webkit-flex;
  	display: flex;
 	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: left;
	padding-left:0;
	width: 100%;
	margin-right:auto;
	padding-bottom:1em;
}
#header .mainli li{ margin-right:0.333%;; width: 33%;}
#header .maintxt{
	width: 100%;
	max-width: 758px;
	padding-left:0;
	text-align: left;
}
#header .maintxt h3{ padding-bottom:1em;}
#header .maintxt p{
	display: block;
	background:rgba(255,255,255,0.20);
	padding:1em 25% 1em 1em;
	color:#fff;
}
#header .pic{
	position: absolute;
	right:-5%;
	bottom:0;
	width: 30%;
}
#header .pic img{ width: 100%;}
/*--header end-------------------------------------------------------*/


/*--main content end-------------------------------------------------------*/
/*--footer-------------------------------------------------------*/

#copy{
	padding:5vw 0;
}

/*--footer end-------------------------------------------------------*/

.contact{
	background: url("../img/contact_bg.jpg") no-repeat center top;
	background-size: cover;
	text-align: center;
	color:#fff;
}
.contact .wrap{
	position: relative;
	padding:5vw 0;
	text-align: center;
}
.contact h2{
	font-weight: bold;
	display: inline-block;
	font-size:1.2em;
	line-height: 1.3em;
	background-image:url("../img/contact_ttl_l.png"), url("../img/contact_ttl_r.png");
	background-position: left bottom , right bottom;
	background-repeat: no-repeat, no-repeat;
	background-size: 13px auto, 13px auto;
	padding:0 0;
	margin: 0 0 1em;
}

.contact .btn{
	position: relative;
	z-index: 2;
	width: 100%;
	margin:0 auto 5vw;
}
.contact .btn a{
    display: block;
    background-image: url(../img/btn_arrow.png), -webkit-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: url(../img/btn_arrow.png), -moz-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: url(../img/btn_arrow.png), -o-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: url(../img/btn_arrow.png), linear-gradient(91deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
	background-position: 95% center;
	background-repeat: no-repeat;
	background-size: 9px auto, auto;
    font-weight: bold;
    font-size: 1.1em;
    line-height: 1.2em;
    color: #fff;
    text-decoration: none;
    padding: 1.5em 0.5em;
    border-radius: 12px;
    border-bottom: solid 4px #B9243A;
}
.contact .btn a span{
	font-weight: bold;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.20);
	background: url("../img/icon_mail2.png") no-repeat left center;
	background-size: 18px auto;
	padding-left:25px;
}
.contact p{
	font-size:0.8em;
	padding-bottom:15px;
}
.contact .tel{
	text-align: center;
	position: relative;
	display: block;
	width: 70%;
	margin:0 auto;
}
.contact .tel p{ font-weight:bold; font-size:0.9em;}
.contact .tel .batch{
	position: absolute;
	right:-25%;
	top:-0;
	width: 20%;
}
.contact .pic{
	z-index: 1;
	position: absolute;
	left:-5%;
	bottom:0;
	width: 20%;
}

#about{
	padding:5vw 0;
	position: relative;
}
#about .wrap{
	background: url("../img/about_bg.png") no-repeat center 30vw;
	background-size: 80% auto;
	min-height: 40vw;
}
#about .txt{
	width: 100%;
	padding:0 0 5vw;
}
#about .txt .attl{
	margin-left:-10px;
	padding-bottom:0.3em;
	width: 50%;
}
#about h2{
	font-size:1.6em;
	font-weight: bold;
	line-height: 1.8em;
	padding-bottom:1em;
}
#about h2 em{
	color:#267EC6;
	font-size:1.3em;
}
#about .txt p{ font-size:1em; line-height: 2em;}

#about .pic{
	position: relative;
	right:0;
	top:0;
	width: 100%;
}

.ttlEn{
	padding-bottom:0.5em;
	font-size:1.2em;
	text-align: center;
}
.ttl{
	font-weight: bold;
	font-size:2em;
	line-height: 1.3em;
	padding-bottom:1em;
	text-align: center;
}

#reason{
	background: url("../img/reason_bg.png") no-repeat left 20vw;
	background-size: 85vw 100%;
	
}
#reason ol{
  	display: -webkit-flex;
  	display: flex;
 	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: space-around;
	padding:1em 0;
}
#reason ol li{
	position: relative;
	width: 100%;
	background: #fff;
	padding:0 5vw 2em;
	box-shadow: 3px 4px 5px rgba(0,0,0,0.20);
	margin-bottom:2em;
}
#reason ol li .num{
	text-align: center;
	font-family: 'Questrial', sans-serif;
	position: absolute;
	color:#fff;
	font-weight: bold;
	font-size:3em;
	top:-10px;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform: translateX(-50%);	
	z-index: 999;
}
#reason ol li h3{
	position: relative;
	background: url("../img/reason_bg2.png") no-repeat center top;
	background-size: cover;
	color:#fff;
	font-weight: bold;
	margin:0 -5vw 1em;
	padding:1em 0 0.5em;
	font-size:1.8em;
	font-weight: bold;
	height: auto;
	line-height: 1.3em;
	text-align: center;
}
#reason ol li h3 span{
	display: inline-block;
	max-width: 100%;
	text-align: left;
	font-weight: bold;
	/*position: absolute;
  left: 50%;
  transform:translateX(-50%);
  -webkit- transform: translateX(-50%);		*/
}
#reason ol li h3 span em{
	color:#FFFF4C;
}
#reason ol li:nth-child(1) h3 span{
	background: url("../img/reason1.png") no-repeat left center;
	background-size: auto 40px;
	padding-left:50px;
}
#reason ol li:nth-child(2) h3 span{
	background: url("../img/reason2.png") no-repeat left center;
	background-size: auto 40px;
	padding-left:50px;
}
#reason ol li:nth-child(3) h3 span{
	background: url("../img/reason3.png") no-repeat left center;
	background-size: auto 40px;
	padding-left:50px;
}
#reason ol li:nth-child(4) h3 span{
	background: url("../img/reason4.png") no-repeat left center;
	background-size: auto 40px;
	padding-left:50px;
}
#reason ol li p{
	font-size:1.1em;
	line-height: 1.7em;
	padding-bottom:15px;
}

#reason ol li table{
	border-top:solid 1px #DDDDDD;
	border-left:solid 1px #DDDDDD;
	width:100%;	
	font-size:1.1em;
}
	
#reason ol li dl{
	background: #F1F3F5;
	padding:15px 20px;
	font-size:1.1em;
}

#works{
	background: url("../img/works_bg.png") no-repeat right top;
	background-size: 37vw 1080px;
	padding:10vw 0;
}
.slidewrap{
	overflow: hidden;
	position: relative;
}
.slider{
	width: 100%;
position: relative;
  /*left: 8.5vw; /* (100vw - SlideWidth) / 2 */
  overflow: visible !important;	
	
}
.slider .slide{
	/*width: 80vw !important;*/
	padding-bottom:5vw;
}
.slider .slide ul{
  	display: -webkit-flex;
  	display: flex;
 	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: space-between;	
	width: 95%;
	margin:0 auto;
}
.slider .slide ul li{
	width: 48.5%;
}
.slider .slide ul li:nth-child(2){ padding-top:1em;}
.slider .slide ul li p{
	padding:0 0.5em;
	font-size:0.8em;
	line-height: 1.4em;
}
.slider .slide ul li .pic{ padding:0;}
.slider .slide ul li .catch{
	font-size:2em;
	font-family: 'Questrial', sans-serif;
	font-weight: bold;
	color:#555;
	margin-top:-5vw;
	padding-bottom:0.5em;
}
.slider .slide ul li:nth-child(2) .catch{
	color:#1F5288;
}
.slider .slide ul li img{ width:100%;}
	
.slide-arrow{
	position:absolute;
	top:17%;
	z-index:999;
	width:8vw;
}
.prev-arrow{
	left:10%;
}
.next-arrow{
	right:10%;
}
.slick-dots li{
	width:10px;
	height:10px;
	margin:0 7px;
	background:#ccc;
	border-radius:30px;
}	
/*--slide
/* 装飾 */ 
.bx-controls-direction,.bx-pager {text-align: center;height: auto;} 

.bx-controls-direction a,.bx-pager-item {display: inline-block;} 
.bx-pager-item a{
	display: block;
	height: 8px;
	width: 8px;
	text-indent: -9999px;
	background: #ccc;
	border-radius: 10px;
	margin: 10px 5px 0;
} .bx-pager-item a.active {background: #1F5288;} 
.bx-wrapper{ height:auto; }
.bx-controls-direction{
	position: absolute;
	width: 85vw;
	margin:0 auto;
	top:10%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);		
}
.bx-controls-direction a{text-decoration: none; color: #555; padding:0 5px;} 
.bx-controls {z-index: 100;width: 100%;} 
.bx-controls-direction{   }
.bx-controls-direction .bx-prev{ position:absolute;left:0; width: 10vw; }
.bx-controls-direction .bx-next{ position:absolute; right:0; width: 10vw;  }

#faq{
	padding:10vw 0 5vw;

}
#faq dl{
	margin:0 auto 2em;
	padding:1.5em;
	box-shadow: 5px 5px 10px #ccc;
}
#faq dl dt{
	background: url("../img/faq_q.png") no-repeat left top;
	background-size: 16px auto;
	padding:0 0 10px 25px;
	font-size:1.5em;
}
#faq dl dd{
	padding-top:15px;
	font-size:1em;
}

.gallery{
	width: 100%;
	padding:10vw 0;
}
.gallery img{ width:100%;}

#company{
	padding:0 0 10vw;
}
#company .wrap{
	background: url("../img/company_bg.png") no-repeat center 20vw;
	background-size: 90% auto;
  	display: -webkit-flex;
  	display: flex;
 	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: space-between;	
}
#company .txt{
	width:100%;
}
#company .txt .attl{ margin-left:-10px; width: 50%; padding-bottom:15px;}
#company .txt h2{
	font-size:2em;
	line-height: 1.3em;
	color:#131304;
	font-weight: bold;
}

#company .tbl{
	width: 100%;
	padding:5vw 0;
}
#company .tbl table{
	width: 100%;
	font-size:1em;
}
#company .tbl table th{
	width: 40%;
	padding:1em 1em;
	font-weight: bold;
	border-bottom:solid 1px #CCCCCC;
}
#company .tbl table td{
	padding:10px 0;
	border-bottom:solid 1px #CCCCCC;
}

.contact2{
	background: url("../img/form_bg.jpg") no-repeat center top;
	background-size: cover;
	padding:0;
}
.contact2 .wrap{
	
	padding:5vw 0;
}
.contact2 .pic{
	position: absolute;
	right:-10%;
	bottom:0;
	z-index: 1;
	width: 35%;
}
.contact2 h2{
	text-align: center;
	padding-bottom:1em;
}
.contact2 .txt{
	width: 80%;
	text-align: center;
	position: relative;
	z-index: 4;
}
.contact2 ul{
  	display: -webkit-flex;
  	display: flex;
 	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	justify-content: space-between;	
	padding-bottom:1em;
}
.contact2 ul li{
	width:  24%;
}

#form{
	padding:10vw 0;
}

#form .ftel{
	padding:1em;
	text-align: center;
	border:solid 2px #1F5288;
	border-radius: 10px;
	color:#1F5289;
	font-size:1em;
	line-height: 1.4em;
	margin:0 0 5vw;
}
#form .ftel p em{
	font-weight: bold;
	font-size:1.2em;
}
#form .ftel .tel{
	font-size:1.8em;
	font-weight: bold;
	padding:5vw 0;
}
#form .ftel .tel a{
	text-decoration: none;
	background: url("../img/tel2.png") no-repeat left center;
	background-size: 18px auto;
	padding-left:25px;
	color:#1F5289;
}
#form .mes{
	text-align: center;
	font-size:0.8em;
	line-height: 1.7em;
	padding-bottom:2em;
}

#form dl dt{
	font-weight: bold;
	font-size:1.2em;
	padding-bottom:10px;
}


#form dl dd{
	padding-bottom:2em;
}
#form dl dd input{
	width: 100%;
	height: 40px;
	border:solid 1px #DDDDDD;
	font-size:1.2em;
	border-radius: 5px;
	padding-left:10px;
}
#form dl dd textarea{
	width: 100%;
	height: 120px;
	border:solid 1px #DDDDDD;
	font-size:1.2em;
	border-radius: 5px;
	padding:10px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}


#form .submit{
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 800px;
	margin:0 auto 50px;
}
#form .submit input{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;	
    display: block;
	width: 90%;
	margin:0 auto;
    background-image: url(../img/btn_arrow.png), -webkit-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: url(../img/btn_arrow.png), -moz-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: url(../img/btn_arrow.png), -o-linear-gradient(359deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
    background-image: url(../img/btn_arrow.png), linear-gradient(91deg,rgba(248,75,153,1.00) 0%,rgba(247,75,89,1.00) 100%);
	background-position: 95% center;
	background-repeat: no-repeat;
	background-size: 9px auto, auto;
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.2em;
    color: #fff;
	border:none;
    text-decoration: none;
    padding: 1em;
    border-radius: 6px;
    border-bottom: solid 4px #B9243A;
	text-shadow: 3px 3px 4px rgba(0,0,0,0.17);
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}	
	

#voice{
	padding:10vw 0;
}
#voice .box{
	border:solid 5px #1F5288;
	padding:1em;
}
#voice .box .flex{	
}
#voice .box .flex .pic{
	width:100%;
	padding-bottom:1em;
}
#voice .box .flex .txt{
	width:100%;
}
#voice .box .flex .txt h3{
	font-weight:bold;
	font-size:1.4em;
}
#voice .box .flex .txt .name{
	font-size:1.1em;
	line-height:1.6em;
}
#voice .box .flex .txt .name em{
	font-size:1.2em;
	font-weight:bold;
}
#voice .box h4{
	background:#1F5288;
	color:#fff;
	font-size:1.2em;
	padding:0.7em 1em;
	margin-bottom:1em;
	margin-top:1em;
}
#voice .box p{
	font-size:1em;
	line-height:1.8em;
	padding-bottom:30px;
}	
}