@charset "utf-8";
/* CSS Document */

#contentsBlock{
	overflow: hidden;
}

.mainVisual_area{
	position: relative;
	width: 100%;
	margin: 0 auto;
}
	.mainVisual_area .main_ttl{
		width: 100%;
		color: #fff;
		font-weight: 500;
		font-size: 5.8rem;
		/*font-size: 3.0225vw;*/
		text-shadow:2px 1px 7px #a0a2a1,2px -1px 1px #a0a2a1;
		position: absolute;
		z-index: 99;
		top: 65%;
		left: 50%;
		-webkit-transform: translate(-50%, -65%);
		transform: translate(-50%, -65%);
}

.lead_txt span.lead_main{
	font-size: 3.2rem;
	font-weight: bold;
	display: block;
	color: #289ecf;
}

.lead_txt{
	font-size: 1.8rem;
	margin: 60px auto 0px;
	line-height: 1.8;
}

.pcStyle_img{
	display: block;
}

.spStyle_img{
	display: none;
}


@media screen and (max-width: 930px) {
	#content{
		width: 90%;
		margin: 0 auto;
	}
	
	.tblStyle02{
		width: 100%;
	}
	
	#map_area{
		width: 100%;
		height: 300px;
	}
	
	.lead_txt span.lead_main{
		line-height: 1.5;
	}

}

@media screen and (max-width: 680px) {
	.pcStyle_img{
		display: none;
	}
	
	.spStyle_img{
		display: block;
	}

}

@media screen and (max-width: 479px) {
	.lead_txt span.lead_main{
		line-height: 1.5;
		font-size: 2.2rem;
	}

}


/*--------------------------------------------*/
/*募集職種*/
/*--------------------------------------------*/
.sec01{
	margin: 60px auto 40px;
}

.sec01 h2{
	font-weight: normal;
	padding-right: 26px;
	line-height: 1;
}

.service_txt01{
	font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, MS PGothic,arial,"Hiragino Kaku Gothic Pro", sans-serif;
	text-align: center;
	margin: 20px 0 0 0;
}

.box01{
	width: 100%;
	margin: 35px 0 60px;
}

.service_box1{
	float: left;
	font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, MS PGothic,arial,"Hiragino Kaku Gothic Pro", sans-serif;
	width: 33.3333%;
	height: 640px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

	.job_box01_img::after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		background: url(../img/job_img_01.jpg) no-repeat center top;
		background-size: auto auto;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-ms-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}

	.job_box01_img:hover:after {
		opacity: .8;
		-moz-transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}

	.job_box02_img::after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		background: url(../img/job_img_02.jpg) no-repeat center top;
		background-size: auto auto;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-ms-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}

	.job_box02_img:hover:after {
		opacity: .8;
		-moz-transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}
	
	.job_box03_img::after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		background: url(../img/job_img_03.jpg) no-repeat center top;
		background-size: auto auto;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		-ms-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}

	.job_box03_img:hover:after {
		opacity: .8;
		-moz-transform: scale(1.05);
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}


.box01 a{
	display: block;
}

.job_box01{
	width: 72.9%;
	background: rgba(231,189,55,0.9);
	color: #fff;
	padding: 27px 30px;
	margin: 298px auto 0;
	position: relative;
	z-index: 1;
}
	.service_box1 a:hover{
		text-decoration: none;
		-moz-transform: scale(1.2);
		-webkit-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
	}
	
.job_box02{
	width: 72.9%;
	background: rgba(40,158,207,0.9);
	color: #fff;
	padding: 27px 30px;
	margin: 298px auto 0;
	position: relative;
	z-index: 1;
}

.job_box03{
	width: 72.9%;
	background: rgba(224,117,158,0.9);
	color: #fff;
	padding: 27px 30px;
	margin: 298px auto 0;
	position: relative;
	z-index: 1;
}

.job_box01 span,
.job_box02 span,
.job_box03 span{
	display: block;
}

	/*かぎかっこ*/
	.job_box01:before, .job_box01:after,
	.job_box01 span:before, .job_box01 span:after,

	.job_box02:before, .job_box02:after,
	.job_box02 span:before, .job_box02 span:after,

	.job_box03:before, .job_box03:after,
	.job_box03 span:before, .job_box03 span:after{
		content:'';
		width: 20px;
		height: 20px;
		position: absolute;
		display: inline-block;
	}
	
			.job_box01:before,
			.job_box02:before,
			.job_box03:before{
				border-left: solid 1px #fff;
				border-top: solid 1px #fff;
				top:10px;
				left: 10px;
			}
			
			.job_box01:after,
			.job_box02:after,
			.job_box03:after{
				border-right: solid 1px #fff;
				border-top: solid 1px #fff;
				top:10px;
				right: 10px;
			}

			.job_box01 span:before,
			.job_box02 span:before,
			.job_box03 span:before{
				border-left: solid 1px #fff;
				border-bottom: solid 1px #fff;
				bottom:10px;
				left: 10px;
			}
			
			.job_box01 span:after,
			.job_box02 span:after,
			.job_box03 span:after{
				border-right: solid 1px #fff;
				border-bottom: solid 1px #fff;
				bottom:10px;
				right: 10px;
			}


.service_box1 h3{
	color: #fff;
	font-size: 3.6rem;
}
	.service_box1 h3 span{
		color: #fff;
		font-size: 1.4rem;
		display: block;
		font-weight:normal;
		margin-bottom: 10px;
	}
	
	.details_morebtn{
		width: 190px;
		background: #fff;
		margin: 20px auto 0;
			padding: 5px 20px;
			color: #e7bd37;
			display: block;
	}

		.details_morebtn.btn_b{
			color: #289ecf;
		}

		.details_morebtn.btn_p{
			color: #e0759e;
		}


@media screen and (max-width: 1312px) {
	.service_box1 h3{
		font-size: 2.6rem;
		line-height: 1.4;
	}
	
	.mainVisual_area .main_ttl{
		font-size: 5.2rem;
	}
	
	.sec01 h2{
		padding-right: 0;
		font-size: 2.6rem;
	}
}


@media screen and (max-width: 930px) {
	.cate_navi{
		display: none !important;
	}
	
	.mainVisual_area .main_ttl{
		font-size: 4.2rem;
	}

}


@media screen and (max-width: 1100px) {
	.sec01{
		margin: 20px auto 0px;
	}

	.box01{
		margin: 30px 0 0 0;
		overflow: hidden;
	}
	
	.service_txt01{
		font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, MS PGothic,arial,"Hiragino Kaku Gothic Pro", sans-serif;
		text-align: left;
		margin: 20px 0 0 0;
	}
	
	.service_box1{
		float: left;
		font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, MS PGothic,arial,"Hiragino Kaku Gothic Pro", sans-serif;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		margin: 0px 0 30px 0;
	}
	
	
	.sp_service{
		float: left;
		width: 45%;
		padding: 30px 0;
	}
	.sp_servicetxt{
		float:right;
		width: 50%;
		text-align: left;
	}
	
	.box1_ttl {
		font-size: 20px;
		font-weight: bold;
		padding: 0px 0 5px;
	}
	
		.box1_ttl br{
			display: none;
		}
	
	.job_box01,
	.job_box02,
	.job_box03{
		width: 83%;
		padding: 15px;
	}
	
	.service_box1 h3 {
		color: #fff;
		font-size: 2.4rem;
	}

}


@media screen and (max-width: 767px) {
	.lead_txt{
		margin-top: 20px;
		padding: 0 10px;
		text-align: left;
	}
	
	.sec01{
		margin: 20px auto 0px;
	}

	.box01{
		margin: 30px 0 0 0;
		overflow: hidden;
	}
	
	.service_txt01{
		font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, MS PGothic,arial,"Hiragino Kaku Gothic Pro", sans-serif;
		text-align: left;
		margin: 20px 0 0 0;
	}
	
	.service_box1{
		float: left;
		font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, MS PGothic,arial,"Hiragino Kaku Gothic Pro", sans-serif;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		margin: 0px 0 30px 0;
	}
	
	
	.sp_service{
		float: left;
		width: 45%;
		padding: 30px 0;
	}
	.sp_servicetxt{
		float:right;
		width: 50%;
		text-align: left;
	}
	
	.box1_ttl {
		font-size: 20px;
		font-weight: bold;
		padding: 0px 0 5px;
	}
	
		.box1_ttl br{
			display: none;
		}
	
	.job_box01,
	.job_box02,
	.job_box03{
		width: 100%;
		padding: 15px;
	}
	
	.service_box1 h3 {
		color: #fff;
		font-size: 2.4rem;
	}
	
	.mainVisual_area .main_ttl{
		font-size: 2.2rem;
	}


}

@media screen and (max-width: 479px) {
	.mainVisual_area .main_ttl{
		font-size: 1.6rem;
	}

}

@media screen and (max-width: 320px) {
	.mainVisual_area .main_ttl{
		font-size: 1.3rem;
	}

	.service_box1 h3{
		font-size: 1.8rem;
		line-height: 1.4;
	}
	
	.job_box01 p, .job_box02 p, .job_box03 p{
		font-size: 1.2rem;
	}
	
	.job_box01,
	.job_box02,
	.job_box03{
		margin-top: 240px;
	}
}