@charset "UTF-8";
/* ▼▼▼ 採用情報
=====================================*/
.title_wrap h1.title {
	background: url(../img/recruit/title_bg_pc.jpg) no-repeat center center/cover;
	}
/* タイトル */
.sub_title.Oswald {
	font-size: 50px;
	font-weight: normal;
}
.sub_title.Oswald span{
	display: block;
	margin-top: 10px;
	font-size: 20px;
	text-align: center;
}
img {
  pointer-events: none;
}
.more a.btn {
	border: 1px solid #003E8E;
}

/* 採用に関するお問い合わせ */
#r_contact {
	padding: 40px 20px;
}
	#r_contact .container{
		border-top: 1px solid #CCC;
		border-bottom: 1px solid #CCC;
		padding: 40px 0;
	}
	#r_contact .container h2,
	#r_contact .container p {
		text-align: center;
	}
	#r_contact .container p {
		font-weight: 500;
	}
	#r_contact .container p a{
		color: #333;
	}


/* ▼▼▼ 採用TOP
=====================================*/
.top #wrapper {
	background: #F4F4F4;
	max-height: 49em;
}
/* メイン */
.top #sec01 h2{
	text-align: center;
	}
	p.read {
		margin-bottom: 40px;
		text-align: center;
	}
	.top #sec01 ul {
		display: flex;
	}
	.top #sec01 ul li{
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 300px;
		margin-right: 2px;
		background: url(../img/recruit/top/job_bg.jpg)no-repeat top center/cover;
	}
	.top #sec01 ul li:last-child{
		margin-right: 0;
		background: url(../img/recruit/top/talk_bg.jpg)no-repeat top center/cover;
	}
	.top #sec01 ul li:hover{
		opacity: .6;
		cursor: pointer;
	}
	.top #sec01 ul li a:hover{
		opacity: 1;
	}
/* 先輩社員の声 */
.top #voice ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
	.top #voice ul li {
		width: 31%;
		margin-bottom: 30px;
	}
	.top #voice ul li:hover {
		opacity: .6;
	}
	.top #voice ul li .photo {
		width: 320px;
	}
	.top #voice ul li dl {
		display: flex;
		justify-content: center;
		margin-top: -30px;
		position: relative;
	}
	.top #voice ul li dl dt,
	.top #voice ul li dl dd {
		display: flex;
		height: 60px;
		align-items: center;
		justify-content: center;
		color: #fff;
		text-align: center;
		font-weight: 500;
		line-height: 1.3;
	}
	.top #voice ul li dl dt {
		background: #003E8E;
		width: 110px;
	}
	.top #voice ul li dl dd {
		background: rgba(0, 0, 0,.7);
		width: 155px;
	}

/* ▼▼▼ Job
=====================================*/
.job section ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.job section ul li{
	width: 50%;
	max-width: 480px;
	margin-bottom: 40px;
	border: 1px solid #333;
}
.job section ul li p{
	position: relative;
}
.job section ul li p span{
	background: #003E8E;
	padding: 0 10px;
	color: #fff;
	font-size: 22px;
	position: absolute;
	top: 0;
	left: 0;
}
.job section ul li p:nth-child(2){
	padding: 20px 25px;
}
.job section ul li p.more a{
	max-width: 350px;
	padding: 10px;
	margin-bottom: 35px;
	border-radius: 50px;
	font-size: 16px;
}
/* ▼▼▼ Job description
=====================================*/
.gideline .entry h3{
	margin-bottom: 10px;
	font-size: 22px;
	text-align: center;
	position: relative;
	}
	.gideline .entry h3::before,
	.gideline .entry h3:after{
		display: inline-block;
		content: "";
		width: 2px;
		height: 20px;
		background: #000;
		border-radius: 5px;
		vertical-align: -2px;
		}
	.gideline .entry h3::before {
		margin-right: 15px;
		-webkit-transform: rotate(-23deg);
		transform: rotate(-23deg);
	}
	.gideline .entry h3:after{
		margin-left: 15px;
		-webkit-transform: rotate(23deg);
		transform: rotate(23deg);
	}
	.gideline .entry p {
		text-align: center;
	}
	.gideline .entry a{
		display: block;
	}
.gideline table.gray_table tr th {
	min-width: 115px;
}
/* ▼▼▼ Cross Talk
=====================================*/
.talk p.read {
	max-width: 745px;
	padding: 15px;
	margin: -30px auto 60px;
	background: #fff;
	font-size: 20px;
	position: relative;
}
	/* メンバー */
	.talk ul.member_list {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		max-width: 850px;
		margin: 0 auto;
	}
	.talk ul.member_list li{
		width: 30%;
		max-width: 230px;
		margin:0 80px 50px 0;
		text-align: center;
	}
	.talk ul.member_list li:nth-child(3n){
		margin-right: 0;
	}
	.talk ul.member_list li p{
		font-size: 20px;
		text-align: center;
		line-height: 1.4;
	}
	.talk ul.member_list li p.photo{
		margin-bottom: 10px;
		border: 2px solid #003E8E;
		border-radius: 50%;
	}
	.talk ul.member_list li p.name{
		color: #003E8E;
		font-size: 25px;
		font-feature-settings: 'palt' 1;
	}
	.talk ul.member_list li p.yaer{
		display: inline-block;
		padding: 1px 10px;
		border: 1px solid #000;
		font-size: 14px;
	}
	/* トークタイトル */
	.talk .main_inner{
		display: flex;
		align-items: center;
		max-width: 1400px;
		margin: 0 auto 60px;
	}
	.talk .main_inner .photo{
		max-width: 800px;
	}
	.talk .main_inner .txt{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 450px;
		height: 300px;
		background: rgba(0, 62, 142,.6);
		margin-left: -60px;
		color: #fff;
		z-index: 9;
	}
	.talk .main_inner .txt h3{
		margin-bottom: 20px;
		font-size: 28px;
		text-align: center;
		line-height: 1.5;
	}
	.talk .main_inner .txt h3 span.Oswald{
		display: block;
		margin-bottom: 20px;
		font-size: 60px;
		text-align: center;
		font-weight: normal;
	}
	/* 写真右 */
	.talk .main_inner.photo_r .photo{
		order: 2;
	}
	.talk .main_inner.photo_r .txt{
		margin: 0 -60px 0 0;
	}

	/* トーク内容 */
	.talk ul.talk_detail li{
		display: flex;
		align-items: center;
		margin-bottom: 40px;
	}
	.talk ul.talk_detail li p.photo{
		width: 100px;
		min-height: 145px;
		position: relative;
	}
	.talk ul.talk_detail li p.photo::before{
		display: block;
		content: "";
		width: 95px;
		height: 95px;
		border: 2px solid #003E8E;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.talk ul.talk_detail li p.photo::after{
		display: block;
		margin: 0 auto;
		color: #003E8E;
		font-size: 24px;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	/* 遠坂 */
	.talk ul.talk_detail li p.photo.m_01::before {background: url(../img/recruit/talk/member_img01.png)no-repeat top center/contain;}
	.talk ul.talk_detail li p.photo.m_01::after {content: "遠坂";}
	/* 葛城 */
	.talk ul.talk_detail li p.photo.m_02::before {background: url(../img/recruit/talk/member_img02.png)no-repeat top center/contain;}
	.talk ul.talk_detail li p.photo.m_02::after {content: "葛城";}
	/* 速水 */
	.talk ul.talk_detail li p.photo.m_03::before {background: url(../img/recruit/talk/member_img03.png)no-repeat top center/contain;}
	.talk ul.talk_detail li p.photo.m_03::after {content: "速水";}
	/* 夏川 */
	.talk ul.talk_detail li p.photo.m_04::before {background: url(../img/recruit/talk/member_img04.png)no-repeat top center/contain;}
	.talk ul.talk_detail li p.photo.m_04::after {content: "夏川";}
	/* 綾波 */
	.talk ul.talk_detail li p.photo.m_05::before {background: url(../img/recruit/talk/member_img05.png)no-repeat top center/contain;}
	.talk ul.talk_detail li p.photo.m_05::after {content: "綾波";}
	/* 七瀬 */
	.talk ul.talk_detail li p.photo.m_06 {background: url(../img/recruit/talk/member_img06.png)no-repeat top center/contain;}
	.talk ul.talk_detail li p.photo.m_06::after {content: "七瀬";}

	.talk ul.talk_detail li p.txt{
		width: calc(100% - 170px);
		background: #E9EFF8;
		padding: 25px 40px;
		margin-left: 60px;
		border-radius: 20px;
		position: relative;
	}
	.talk ul.talk_detail li p.txt::before{
		display: block;
		content: "";
		width: 60px;
		height: 26px;
		background: url(../img/recruit/talk/talk_arrow.png)no-repeat top center/contain;
		position: absolute;
		top: 30px;
		left: -35px;
	}
	/* 写真左 */
	.talk ul.talk_detail li:nth-child(even) p.photo {
		order: 2;
	}
	.talk ul.talk_detail li:nth-child(even) p.txt {
		margin: 0 60px 0 0;
	}
	.talk ul.talk_detail li:nth-child(even) p.txt::before {
		transform: scale(-1, 1);
		left:inherit;
		right: -35px;
	}
/* ▼▼▼ voice
=====================================*/
.voice ul.voice_link{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 60px;
}
.voice ul.voice_link li{
	width: 33%;
	margin-bottom: 30px;
}
.voice ul.voice_link li a{
	display: block;
	border: 1px solid #003E8E;
	padding: 10px;
	color: #003E8E;
	font-size: 19px;
	text-align: center;
	font-weight: 500;
	font-feature-settings: 'palt' 1;
	position: relative;
}
	.voice ul.voice_link li a::before,
	.voice ul.voice_link li a:after{
		display: block;
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 7px 0 7px;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		}
	.voice ul.voice_link li a:before{
		border-color: #003E8E transparent transparent transparent;
		bottom: -10px;
		}
	.voice ul.voice_link li a:after{
		border-color: #fff transparent transparent transparent;
		bottom: -8px;
		}
	.voice ul.voice_link li a span{
		margin-right: 15px;
		color: #999;
		font-size: 14px;
	}
	.voice ul.voice_link li.now a,
	.voice ul.voice_link li a:hover{
		background: #003E8E;
		padding: 10px;
		color: #fff;
		opacity: 1;
	}
	.voice ul.voice_link li.now span,
	.voice ul.voice_link li a:hover span{
		color: #fff;
	}
	.voice ul.voice_link li.now a:after,
	.voice ul.voice_link li a:hover:after{
		border-color: #003E8E transparent transparent transparent;
	}
	.voice #sec01 .txt{
		background: #fff;
		width: 80%;
		max-width: 745px;
		padding: 25px;
		margin: -40px auto 40px;
		position: relative;
	}
	.voice #sec01 .txt::before {
		display: block;
		content: "";
		width: 1px;
		height: 60px;
		background: #000;
		margin: 0 auto;
		position: absolute;
		top: -35px;
		left:0;
		right: 0;
	}
	.voice #sec01 .txt h2{
		margin-bottom: 5px;
		color: #003E8E;
		font-size: 35px;
		font-weight: 500;
		text-align: center;
		font-feature-settings: 'palt' 1;
	}
	.voice #sec01 .txt h2 span{
		margin-right: 10px;
		color: #999;
		font-size: 22px;
	}
	.voice #sec01 .txt p{
		text-align: center;
	}
	.voice #flow {
		margin-bottom: 0;
	}
	.voice #flow .inner{
		background: #fff;
		border-radius: 20px;
		padding: 30px;
	}

	.voice #flow .container h3{
		display: table;
		background: #003E8E;
		padding: 0 20px;
		margin: 0 auto 20px;
		border-radius: 20px;
		color: #fff;
		font-size: 20px;
		font-weight: 500;
	}
	.voice #flow .container table{
		width: 100%;
	}
	.voice #flow .container table th,
	.voice #flow .container table td {
		border-bottom: 2px dotted #999;
		padding: 12px 0;
	}
	.voice #flow .container table th{
		width: 105px;
		color: #003E8E;
		font-size: 26px;
		font-weight: 500;
	}
	.voice #flow .container table td{
		width: calc(100% - 105px);
		vertical-align: middle;
	}
	.voice #flow .title_bl.mb0 {
		margin-bottom: 0;
	}
/* ▼▼▼ 768px
=====================================*/
@media screen and (max-width: 768px) {
	.title_wrap h1.title {
		background: url(../img/recruit/title_bg_sp.jpg) no-repeat center center/cover;
	}
	/* タイトル */
	.sub_title.Oswald {
		font-size: 38px;
	}
		.sub_title.Oswald span{
			font-size: 18px;
		}
	/* 採用に関するお問い合わせ */
	#r_contact {
		padding: 20px 15px;
	}
		#r_contact .container{
			padding: 25px 0;
		}
	/* ▼▼▼ 採用TOP
	=====================================*/
	.top #wrapper {
		max-height: 49em;
	}
	/* メイン */
	p.read {
		margin-bottom: 20px;
		text-align: left;
	}
		.top #sec01 ul {
			display: block;
		}
		.top #sec01 ul li{
			height: 220px;
			margin: 0 auto 10px;
		}
		.top #sec01 ul li:last-child{
			margin: 0 auto;
		}
		.top #sec01 ul li .title_wrap{
			margin: 0;
		}
	/* 先輩社員の声 */
	.top #voice ul {
		display: block;
		margin-bottom: 50px;
	}
		.top #voice ul li {
			width: 100%;
			margin: 0 auto 30px;
		}
		.top #voice ul li:hover {
			opacity: .6;
		}
		.top #voice ul li .photo {
			width: 100%;
		}

	/* ▼▼▼ Job
	=====================================*/
	.job section ul{
		display: block;
	}
	.job section ul li{
		max-width: 100%;
	}
	.job section ul li p span{
		font-size: 18px;
	}
	.job section ul li p.more a{
		max-width: 90%;
		padding: 13px;
	}
	/* ▼▼▼ Job description
	=====================================*/
	.gideline .entry h3{
		font-size: 18px;
	}
		.gideline .entry h3::before,
		.gideline .entry h3:after{
			width: 2px;
			height: 17px;
			}
	.gideline table.gray_table tr th {
		min-width: 80px;
	}
	/* ▼▼▼ Cross Talk
	=====================================*/
	.talk p.read {
		max-width: 85%;
		padding: 10px 25px;
		margin: -20px auto 20px;
		font-size: 16px;
	}
		/* メンバー */
		.talk ul.member_list li{
			max-width: 45%;
			max-height: 245px;
			margin: 0 auto 30px;
		}
		.talk ul.member_list li:nth-child(3n){
			margin: 0 auto;
		}
		.talk ul.member_list li p{
			font-size: 16px;
		}
		.talk ul.member_list li p.photo{
			margin-bottom: 10px;
			border: 2px solid #003E8E;
			border-radius: 50%;
		}
		.talk ul.member_list li p.name{
			margin-bottom: 5px;
			font-size: 21px;
		}
		.talk ul.member_list li p.yaer{
		}
		/* トークタイトル */
		.talk .main_inner{
			align-items: baseline;
			justify-content: unset;
			margin: 0 auto 30px;
		}
		.talk .main_inner .photo{
			max-width: 95%;
		}
		.talk .main_inner .txt{
			width: 300px;
			height: 150px;
			margin: 0px 0 0 -279px;
		}
		.talk .main_inner .txt h3{
			margin-bottom: 10px;
			font-size: 20px;
		}
		.talk .main_inner .txt h3 span.Oswald{
			margin-bottom: 10px;
			font-size: 30px;
		}
		/* 写真右 */
		.talk .main_inner.photo_r .txt{
			margin: 0 -280px 0 0;
		}

		/* トーク内容 */
		.talk ul.talk_detail li{
			margin-bottom: 20px;
			align-items: unset;
		}
		.talk ul.talk_detail li p.photo{
			width: 80px;
			min-height: 110px;
			max-height: 110px;
		}
		.talk ul.talk_detail li p.photo::before{
			width: 75px;
			height: 75px;
		}
		.talk ul.talk_detail li p.photo::after{
			font-size: 16px;
		}
		.talk ul.talk_detail li p.txt{
			width: calc(100% - 110px);
			padding: 15px;
			margin-left: 25px;
		}
		.talk ul.talk_detail li p.txt::before{
			height: 15px;
			top: 30px;
			left: -30px;
		}
		/* 写真左 */
		.talk ul.talk_detail li:nth-child(even) p.txt {
			margin: 0 25px 0 0;
		}
		.talk ul.talk_detail li:nth-child(even) p.txt::before {
			right: -30px;
		}
		/* ▼▼▼ voice
		=====================================*/
		.voice ul.voice_link{
			margin-bottom: 40px;
		}
			.voice ul.voice_link li{
				width: 49%;
				margin-bottom: 20px;
			}
			.voice ul.voice_link li a {
				font-size: 16px;
				line-height: 1.5;
			}
			.voice ul.voice_link li a::before,
			.voice ul.voice_link li a:after{
				border-width: 8px 5px 0 5px;
				}
			.voice ul.voice_link li a:before{
				bottom: -8px;
				}
			.voice ul.voice_link li a:after{
				bottom: -7px;
				}
			.voice ul.voice_link li a span{
				display: block;
				margin: 0 auto;
				text-align: center;
			}
			.voice #sec01 .txt{
				width: 90%;
				padding: 20px 0;
				margin: -40px auto 30px;
			}
			.voice #sec01 .txt::before {
				height: 30px;
				top: -15px;
			}
			.voice #sec01 .txt h2{
				font-size: 23px;
			}
			.voice #sec01 .txt h2 span{
				margin-right: 5px;
				font-size: 16px;
			}
			.voice #flow .inner{
				padding: 25px 20px;
			}

			.voice #flow .container h3{
				padding: 0 15px;
				margin: 0 auto 10px;
				font-size: 18px;
			}
			.voice #flow .container table th,
			.voice #flow .container table td {
				padding: 10px 0;
			}
			.voice #flow .container table th{
				width: 80px;
				font-size: 21px;
			}
			.voice #flow .title_bl.mb0 {
				margin-bottom: 10px;
			}




}