/*======================================

	林建設工業
	先輩社員の声CSS

=======================================*/

/* 共通 */
#pankuzu{
	margin-bottom: 0;
}

h2.page_title{
	color: #000;
	padding-top: 90px; /* pankuzuのmarginの代わり */
}
h2.page_title > .sub_title{
	margin-top: 8px;
}
h2.page_title .mk{
	font-size: 90%;
	color: #fff;
	margin-left: 20px;
	padding: 2px 15px;
	vertical-align: 0.05em;
}

/*======================================
	voice
=======================================*/

.sp_img{
	display: none;
}

.voice_wrap{
	position: relative;
	overflow: hidden;
}

#recruit_voice > .voice_wrap{
	margin-bottom: 120px;
}

#recruit_voice a.btn_01{
	padding: 20px 0;
	background-position: top 18px right 10px;
}

.voice_list li:not(:last-child){
	margin-bottom: 50px;
}
.voice_list li:first-child{
	margin-bottom: 35px;
}
.voice_list .title{
	font-size: 130%;
	font-weight: bold;
	position: relative;
	/* padding-left: 50px; */
	margin-bottom: 15px;
}
.voice_list .txt{
	font-size: 100%;
}

.voice_wrap h3{
	padding-top: 60px;
	margin-bottom: 80px;
}
.voice_wrap.format2 h3{
	text-align: right;
}


/* 背景 */
.voice01 .voice_wrap.format1::before,
.voice02 .voice_wrap.format1::before{
	content: '';
	position: absolute;
	top: 140px;
	left: 0;
	width: 120%;
	height: 40%;
	margin: 3% -10% 0;
	background: #fffcdb;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	z-index: -1
}

.voice01 .voice_wrap.format2::before,
.voice02 .voice_wrap.format2::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 40%;
	margin: 3% -10% 0;
	background: #fffcdb;
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
	z-index: -1
}





/* txt_area1 */
.format1 .txt_area1,
.format2 .txt_area1{
	position: relative;
	min-height: 485px;
}
.format1 .txt_area1 > .info,
.format2 .txt_area1 > .info{
	max-width: 100%;
	width: calc(100% - 400px);
}
.format1 .txt_area1 > .img,
.format2 .txt_area1 > .img{
	position: absolute;
	right: 0;
	bottom: 0;
}
.format1 img.hukidasi_img,
.format2 img.hukidasi_img{
	position: absolute;
	left: -200px;
	top: 15%;
}


.format2 .txt_area1 > .info{
	float: right;
	margin-top: 10px;
}
.format2 .txt_area1 > .img{
	left: 0;
	right: inherit;
}
.format2 img.hukidasi_img{
	right: -200px;
	left: initial;
	left: auto;
}

/* txt_area2 */
.txt_area2 .info{
	max-width: 660px;
	width: 60%;
}
.txt_area2 .img{
	max-width: 400px;
	width: 36.5%;
}

.txt_area2 .info.l_data,
.txt_area2 .img.l_data{
	float: left;
	margin-right: 3.5%;
}
.txt_area2 .info.r_data,
.txt_area2 .img.r_data{
	float: right;
}



/* 色違い */
.voice01 h2.page_title{
	background: url(../img/recruit_voice/bk_img.png);
	background-repeat: repeat-x;
	background-position-y: 15px;
}
.voice02 h2.page_title{
	background: url(../img/recruit_voice2/bk_img.png);
	background-repeat: repeat-x;
	background-position-y: 15px;
}

.voice01 h2.page_title .mk,
.voice02 .btn_01{
	background-color: #f0831e;
}
.voice01 .voice_list .title{
	color: #f0831e;
}
.voice02 h2.page_title .mk,
.voice01 .btn_01{
	background-color: #38a1db;
}
.voice02 .voice_list .title{
	color: #38a1db;
}
/* .voice01 .voice_list .title::before{
	content: url(../img/recruit_voice/icon.png);
}
.voice02 .voice_list .title::before{
	content: url(../img/recruit_voice2/icon.png);
} */


@media screen and (max-width:900px) {
	.sp_img{ display: block; }
	.pc_img{ display: none; }
	.format1 .txt_area1 > .img,
	.format2 .txt_area1 > .img{
		position: relative;
		width: 48%;
	}
	.format1 .txt_area1 > .info,
	.format2 .txt_area1 > .info{
		width: 50%;
		margin-top: 50px;
	}
	
	.format1 .txt_area1 > .img{
		float: right;
	}
	.format1 .txt_area1 > .info{
		float: left;
	}
	.format2 .txt_area1 > .img{
		float: left;
	}
	.format2 .txt_area1 > .info{
		float: right;
	}
	
}

@media screen and (max-width:650px) {
	.voice_list .txt{
		font-size: 100%;
	}
	.format1 .txt_area1 > .img,
	.format2 .txt_area1 > .img{
		float: none;
		width: 100%;
		margin: 0;
	}
	.sp_img {
		margin: 0 auto;
	}
	
	.format1 .txt_area1 > .info,
	.format2 .txt_area1 > .info {
		float: none;
		width: 100%;
	}
	
	.txt_area2 .info{
		width: 100%;
	}
	.txt_area2 .img{
		width: 100%;
		margin: 20px auto 0 auto !important;
	}

	.txt_area2 .info.l_data,
	.txt_area2 .img.l_data{
		float: none;
		margin-right: 0;
	}
	.txt_area2 .info.r_data,
	.txt_area2 .img.r_data{
		float: none;
	}
	
	.voice01 .voice_wrap.format1::before,
	.voice02 .voice_wrap.format1::before,
	.voice01 .voice_wrap.format2::before,
	.voice02 .voice_wrap.format2::before{
		height: 350px !important;
	}
	.voice01 .voice_wrap.format2::before,
	.voice02 .voice_wrap.format2::before{
		top: 100px !important;
	}
}