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

　  Common │ 共通

--------------------------------------------------*/
/* pager */
.wp-pagenavi {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);
}
.wp-pagenavi a,
.wp-pagenavi span {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	padding: 0!important;
	border: 1px solid #000A6A !important;
	font-weight: bold !important;
	line-height: 1.2;
	text-align: center;
}
.wp-pagenavi span.current {background: #000A6A;color: #fff;}
.wp-pagenavi a:hover {color: #000A6A;}
/*-------------------------------------------------

　  Main Visual

--------------------------------------------------*/
#mv.gray_bg {background: #FAFAFA;}
#mv .inner {position: relative;max-width: 1480px;}
#mv .image-crossfader {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 22.4%;
	overflow: hidden;
}
#mv .image-crossfader-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	transform: scale(1.2);
	transition:
	opacity 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955),
	transform 1.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	background-size: cover;
	background-position: center;
}
#mv.interview .image-crossfader-inner {background-image: url("../img/page/interview/mv1.webp");}
#mv.company .image-crossfader-inner {background-image: url("../img/page/company/mv.webp");}
#mv.work_style .image-crossfader-inner {background-image: url("../img/page/work_style/mv.webp");}
#mv.inforgraphics .image-crossfader-inner {background-image: url("../img/page/inforgraphics/mv.webp");}
#mv.recruitment_archive .image-crossfader-inner {background-image: url("../img/page/recruitment/mv_archive.webp");}
#mv.recruitment_single .image-crossfader-inner {background-image: url("../img/page/recruitment/mv_single.webp");}
#mv.news .image-crossfader-inner {background-image: url("../img/page/recruitment/mv_single.webp");}
#mv.entry .image-crossfader-inner {background-image: url("../img/page/entry/mv.webp");}
#mv .image-crossfader-inner.is-visible {z-index: 1;opacity: 1;transform: scale(1.02);}
#mv .wrap {
	position: absolute;
	bottom: 20%;
	left: 0;
	z-index: 3;
	padding: 15px 6vw 15px 15px;
	background: #fff;
}
#mv .wrap h1 {
	margin-bottom: 10px;
	padding-bottom: 5px;
	color: #000A6A;
	font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
}
#mv .wrap p {
	font-weight: bold;
	font-size: clamp(24px, calc(24px + 12 * ((100vw - 375px) / 1545)), 36px);
	line-height: 1;
}
@media only screen and ( max-width : 1024px ) {
	#mv .inner {display: flex;flex-direction: column-reverse;}
	#mv .inner::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 63%;
		background: linear-gradient(#fff 68%, transparent);
	}
	#mv .image-crossfader {padding-top: 31%;}
	#mv .wrap {position: relative;padding: 7vw 10px 5vw;}
}
/*-------------------------------------------------

	Interview │ 先輩スタッフの声

--------------------------------------------------*/
#interview::before {content: '';position: absolute;top: 0;left: 0;width: 30%;height: 100%;background: #FDF8F5;}
#interview .inner {
	position: relative;
	max-width: 1480px;
	padding-top: clamp(100px, calc(100px + 130 * ((100vw - 375px) / 1545)), 230px);
	padding-bottom: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);
	background: #FDF8F5;
}
#interview ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(30px, calc(30px + 70 * ((100vw - 375px) / 1545)), 100px);
	width: 90%;
	max-width: 1220px;
	margin: 0 auto;
}
#interview ul li {position: relative;background: #fff;}
#interview ul li figure {overflow: hidden;}
#interview ul li figure img {transition: .3s;}
#interview ul li:hover figure img {transform: scale(1.1);}
#interview ul li .wrap {
	position: relative;
	padding: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
	padding-top: 30px;
	padding-bottom: 60px;
}
#interview ul li .wrap p.biography {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	padding: 5px;
	border-radius: 20px;
	background: #000A6A;
	color: #fff;
	text-align: center;
}
#interview ul li .wrap h3 {
	margin-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	font-weight: 600;
	font-size: 1.6rem;
	line-height: 1.7;
}
#interview ul li p.read {position: absolute;right: 30px;bottom: 20px;margin-right: 10px;font-size: 1.4rem;text-align: right;}
#interview ul li p.read::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border: 1px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	color: #000;
	transition: .3s;
}
#interview ul li:hover p.read::after {right: -25px;}
@media only screen and ( max-width : 1024px ) {
	#interview ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 767px ) {
	#interview ul {grid-template-columns: repeat(1, 1fr);}
}
/*-------------------------------------------------

	Interview │ スタッフ

--------------------------------------------------*/
#staff .block1 .main_container {
	align-items: center;
	margin-bottom: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);
}
#staff .block1 .main_container figure {width: 48%;}
#staff .block1 .main_container .wrap {width: 50%;}
#staff .block1 .main_container .wrap h2 {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 10px);
	font-weight: bold;
	font-size: clamp(22px, calc(22px + 15 * ((100vw - 375px) / 1545)), 37px);
}
#staff .block1 .main_container .wrap h2 span {
	display: block;
	color: #000A6A;
	font-weight: bold;
	font-size: clamp(14px, calc(14px + 2 * ((100vw - 375px) / 1545)), 16px);
	letter-spacing: .015em;
}
#staff .block1 .main_container .wrap dl dt {margin-bottom: 10px;font-weight: 500;letter-spacing: -.1em;}
#staff .block1 .main_container .wrap dl dd {
	display: flex;
	align-items: center;
	gap: 15px;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 1545)), 18px);
	letter-spacing: -.1em;
}
#staff .block1 .main_container .wrap dl dd span {
	padding: 5px 15px;
	border: 1px solid #000A6A;
	border-radius: 15px;
	color: #000A6A;
	letter-spacing: 0;
	text-align: center;
}
#staff .block1 .main_container .wrap dl dd span {border-color: #FF651A;color: #FF651A;}
#staff .block1 ul li {margin-bottom: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);}
#staff .block1 ul li:last-child {margin-bottom: 0;}
#staff .block1 ul li .ttl_wrap {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	padding-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	border-bottom: 1px solid #D1D1D1;
}
#staff .block1 ul li .ttl_wrap p {position: relative;margin-bottom: 15px;padding-left: 20px;}
#staff .block1 ul li .ttl_wrap p::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 15px;
	height: 1px;
	background: #000A6A;
}
#staff .block1 ul li .ttl_wrap p span {
	position: relative;
	z-index: 1;
	background: #fff;
	color: #000A6A;
	font-weight: bold;
	letter-spacing: .015em;
}
#staff .block1 ul li .ttl_wrap h3 {font-weight: 500;font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);}
#staff .block1 ul li .txt_wrap p {font-weight: 500;}
#staff .block2 {background: #FDF8F5;}
#staff .block2 h2 {
	margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	font-weight: bold;
	font-size: clamp(22px, calc(22px + 15 * ((100vw - 375px) / 1545)), 37px);
}
#staff .block2 ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
}
#staff .block2 ul li {position: relative;background: #fff;}
#staff .block2 ul li figure {position: relative;overflow: hidden;}
#staff .block2 ul li figure img {transition: .3s;}
#staff .block2 ul li:hover figure img {transform: scale(1.1);}
#staff .block2 ul li figure figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 5px 20px;
	background: #000A6A;
	color: #fff;
	font-weight: 500;
	text-align: center;
}
#staff .block2 ul li .wrap {
	position: relative;
	padding: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
	padding-bottom: 60px;
}
#staff .block2 ul li .wrap h3 {
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	padding-bottom: clamp(15px, calc(15px + 30 * ((100vw - 375px) / 1545)), 45px);
	border-bottom: 1px solid #333;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 2 * ((100vw - 375px) / 1545)), 20px);
	line-height: 1.4;
}
#staff .block2 ul li p.read_more {
	position: absolute;
	right: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	margin-right: 10px;
	font-size: 1.4rem;
	text-align: right;
}
#staff .block2 ul li p.read_more::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -20px;
	transform: translateY(-50%) rotate(45deg);
	width: 8px;
	height: 8px;
	border: 1px solid currentColor;
	border-left: 0;
	border-bottom: 0;
	box-sizing: border-box;
	color: #000;
	transition: .3s;
}
#staff .block2 ul li:hover p.read_more::after {right: -25px;}
#staff .block2 a.read {
	max-width: 370px;
	margin: 0 auto;
	border: 1px solid #333;
	background: #fff;
	color: #000;
	font-size: clamp(14px, calc(14px + 6 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
#staff .block2 a.read:hover {color: #fff;}
#staff .block2 a.read::before {background: #333;}
#staff .block2 a.read::after {background-image: url(../img/page/interview/Icon_arrowR-blk.svg);}
#staff .block2 a.read:hover::after {background-image: url(../img/page/interview/Icon_arrowR-wht.svg);}
@media only screen and ( max-width : 767px ) {
	#staff .block1 .main_container figure {width: 100%;margin-bottom: 20px;}
	#staff .block1 .main_container .wrap {width: 100%;}
	#staff .block2 ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#staff .block2 ul {grid-template-columns: repeat(1, 1fr);}
}
/*-------------------------------------------------

	Company │ 神奈川管材を知る

--------------------------------------------------*/
#company .title_common h2 {
	color: #000;
	font-size: clamp(22px, calc(22px + 10 * ((100vw - 375px) / 1545)), 32px);
	text-align: center;
}
#company .title_common p {font-size: clamp(12px, calc(12px + 4 * ((100vw - 375px) / 1545)), 16px);text-align: center;}
#company ul {display: grid;gap: clamp(30px, calc(30px + 70 * ((100vw - 375px) / 1545)), 100px);}
#company ul li:nth-of-type(odd) {flex-direction: row-reverse;}
#company ul li figure {width: 48%;}
#company ul li .wrap {width: 48%;}
#company ul li .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	font-weight: 600;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
}
#company ul li .wrap .content p {margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);}
#company ul li .wrap .content p:last-child {margin-bottom: 0;}
#company .container table {max-width: 960px;margin: 0 auto;}
#company .container table tr {
	display: block;
	padding-top: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	border-bottom: 1px solid #000;
}
#company .container table tr th {
	width: clamp(150px, calc(150px + 100 * ((100vw - 375px) / 1545)), 250px);
	font-weight: 600;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
}
#company .container table tr td {font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);}
#company .container table tr td p {
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
}
#company .container table tr td p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 767px ) {
	#company ul li figure {width: 100%;margin-bottom: 20px;}
	#company ul li .wrap {width: 100%;}
}
@media only screen and ( max-width : 500px ) {
	#company .container table tr:first-child {padding-top: 0;}
	#company .container table tr th {display: block;width: 100%;margin-bottom: 10px;}
	#company .container table tr td {display: block;}
}
/*-------------------------------------------------

	Work Style │ 仕事内容を知る

--------------------------------------------------*/
#work_style h2.title {margin-bottom: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);}
#work_style h2.title span {
	display: inline-block;
	width: 40%;
	position: relative;
	padding: 10px;
	padding-right: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	background: #000A6A;
	color: #fff;
	font-weight: 600;
	font-size: clamp(22px, calc(22px + 10 * ((100vw - 375px) / 1545)), 32px);
}
#work_style h2.title span::before {
	content: '';
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	z-index: -1;
	width: 50vw;
	height: 100%;
	background: #000A6A;
}
#work_style h3.sub_title {margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);}
#work_style h3.sub_title span {
	padding-bottom: 5px;
	border-bottom: 1px solid #000;
	font-weight: 600;
	font-size: clamp(22px, calc(22px + 10 * ((100vw - 375px) / 1545)), 32px);
}
#work_style .common_container {
	flex-direction: row-reverse;
	margin-bottom: clamp(30px, calc(30px + 30 * ((100vw - 375px) / 1545)), 60px);
}
#work_style .common_container figure {width: 48%;}
#work_style .common_container .wrap {width: 49%;}
#work_style .common_container .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	font-weight: 600;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
}
#work_style .block1 .container2 {margin-bottom: clamp(40px, calc(40px + 50 * ((100vw - 375px) / 1545)), 90px);}
#work_style .block1 .container2 .wrap {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 50%;
	padding: clamp(20px, calc(20px + 45 * ((100vw - 375px) / 1545)), 65px);
	padding-top: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-bottom: clamp(30px, calc(30px + 25 * ((100vw - 375px) / 1545)), 55px);
	background: #FFF7F2;
}
#work_style .block1 .container2 .wrap .content h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: 600;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#work_style .block1 .container2 .wrap .content figure {
	width: 30%;
	margin: 0 auto clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
}
#work_style .block1 .container2 .wrap:nth-child(2) .content figure {width: 28%;}
#work_style .block1 .container3 {flex-direction: inherit;}
#work_style .block1 .container3 figure {width: 52%;}
#work_style .block1 .container3 .wrap {width: 44%;}
#work_style .block1 .container4 {margin-bottom: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);}
#work_style .block1 .container4 .wrap {width: 49%;}
#work_style .block1 .container4 .wrap ul {display: grid;gap: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);}
#work_style .block1 .container4 .wrap ul li h4 {
	position: relative;
	padding-left: 20px;
	font-weight: 600;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
}
#work_style .block1 .container4 .wrap ul li h4::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	background: #000;
}
#work_style .block1 .container4 figure {width: 48%;}
#work_style .block1 .container5 h3.sub_title {margin-bottom: clamp(100px, calc(100px + 100 * ((100vw - 375px) / 1545)), 200px);}
#work_style .block1 .container5 table {position: relative;z-index: 1;}
#work_style .block1 .container5 table::before {
	content: '';
	position: absolute;
	top: -3%;
	left: 5%;
	z-index: -1;
	width: 20%;
	height: 103%;
	border-radius: 10px;
	background: linear-gradient(#FFF1E8 0% 45%, #EAEBFA 45%);
}
#work_style .block1 .container5 table tr {
	display: block;
	margin-bottom: clamp(40px, calc(40px + 35 * ((100vw - 375px) / 1545)), 75px);
}
#work_style .block1 .container5 table tr:last-child {margin-bottom: 0;}
#work_style .block1 .container5 table tr th {
	width: clamp(285px, calc(285px + 200 * ((100vw - 375px) / 1545)), 485px);
	overflow: hidden;
}
#work_style .block1 .container5 table tr th p {position: relative;}
#work_style .block1 .container5 table tr th p time {
	display: inline-block;
	position: relative;
	z-index: 1;
	padding: 10px clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	background: #FFAC76;
	color: #fff;
	font-weight: bold;
	font-size: clamp(20px, calc(20px + 13 * ((100vw - 375px) / 1545)), 33px);
	line-height: 1;
	text-align: center;
}
#work_style .block1 .container5 table tr th.navy p time {background: #000A6A;}
#work_style .block1 .container5 table tr th p .border {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 85%;
	border: 1px solid #000;
}
#work_style .block1 .container5 table tr th p .border::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border: 1px solid #000;
	border-radius: 50%;
	background: #fff;
}
#work_style .block1 .container5 table tr td .wrap h3 {
	position: relative;
	margin-bottom: clamp(10px, calc(10px + 5 * ((100vw - 375px) / 1545)), 15px);
	font-weight: 600;
	font-size: clamp(23px, calc(23px + 10 * ((100vw - 375px) / 1545)), 33px);
}
#work_style .block1 .container5 table tr td .wrap p {margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);}
#work_style .block1 .container5 table tr td figure {overflow: hidden;border-radius: 2em;}
#work_style .block2 ul {display: grid;grid-template-columns: repeat(3, 1fr);background: #FFF7F2;}
#work_style .block2 ul li {
	position: relative;
	padding: clamp(20px, calc(20px + 15 * ((100vw - 375px) / 1545)), 35px);
	padding-right: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-left: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
}
#work_style .block2 ul li:nth-child(2)::before,
#work_style .block2 ul li:nth-child(2)::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 80%;
	background: #707070;
}
#work_style .block2 ul li:nth-child(2)::before {left: 0;}
#work_style .block2 ul li:nth-child(2)::after {right: 0;}
#work_style .block2 ul li h4 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: 600;
	font-size: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#work_style .block2 ul li figure {
	margin-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	text-align: center;
}
#work_style .block2 ul li figure img {width: auto;height: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);}
@media only screen and ( max-width : 767px ) {
	#work_style h2.title span {width: auto;}
	#work_style .common_container figure {width: 100%;margin-bottom: 20px;}
	#work_style .common_container .wrap {width: 100%;}
	#work_style .block1 .container3 .wrap {width: 100%;margin-bottom: 30px;}
	#work_style .block1 .container3 figure {width: 100%;}
	#work_style .block1 .container4 .wrap {width: 100%;margin-bottom: 30px;}
	#work_style .block1 .container4 figure {width: 100%;}
	#work_style .block1 .container5 table tr th {display: block;margin-bottom: 30px;}
	#work_style .block1 .container5 table tr th .border {display: none;}
	#work_style .block2 ul {grid-template-columns: repeat(1, 1fr);}
	#work_style .block2 ul li:nth-child(2)::before,
	#work_style .block2 ul li:nth-child(2)::after {top: 0;left: 50%;transform: translate(-50%, 0);width: 90%;height: 1px;}
	#work_style .block2 ul li:nth-child(2)::after {top: inherit;right: inherit;bottom: 0;}
}
@media only screen and ( max-width : 500px ) {
	#work_style .block1 .container2 .wrap {width: 100%;}
}
/*-------------------------------------------------

	Inforgraphics │ 数字でみる神奈川管材

--------------------------------------------------*/
#inforgraphics ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(30px, calc(30px + 70 * ((100vw - 375px) / 1545)), 100px);
}
@media only screen and ( max-width : 767px ) {
	#inforgraphics ul {grid-template-columns: repeat(2, 1fr);}
}
/*-------------------------------------------------

	Recruitment Search │ 検索機能

--------------------------------------------------*/
.search_block {margin-bottom: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);}
.search_block dl {display: flex;}
.search_block dl dt {
	display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
	width: 100%;
	max-width: clamp(138px, calc(138px + 140 * ((100vw - 375px) / 1545)), 278px);
	padding-top: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	padding-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	background: #000A6A;
	color: #fff;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
.search_block dl dd {width: 100%;padding: 10px;border: 1px solid #000;}
.search_block dl dd::before {
	content: '';
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	height: 100%;
	background: no-repeat center / 100%;
}
.search_block .container {margin-top: 10px;margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);}
.search_block .container dl {width: 49%;}
.search_block .container dl dd .wrap {display: flex;justify-content: center;align-items: center;position: relative;height: 100%;}
.search_block .container dl dd .wrap::after {
    content: '';
    position: absolute;
    top: 1em;
    right: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
    width: 0;
    height: 0;
    border-top: 15px solid #000;
    border-left: 8.5px solid transparent;
    border-right: 8.5px solid transparent;
    pointer-events: none;
}
.search_block .container dl dd .wrap select,
.search_block dl dd input {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 10px 20px;
	border: 1px solid #000;
	background: #fff;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	cursor: pointer;
}
.search_block button {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 308px;
	margin: 0 auto;
	padding: 20px 0;
	border: 1px solid #000;
	background: #fff;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
	transition: .3s;
}
.search_block button:hover {background: #000;color: #fff;}
@media only screen and ( max-width : 767px ) {
	.search_block .container {gap: 10px;}
	.search_block .container dl {width: 100%;}
}
/*--------------------------------------------------

	Recruitment Common │ 募集職種一覧

--------------------------------------------------*/
.common_block {
	position: relative;
	margin-bottom: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
	padding-bottom: clamp(40px, calc(40px + 30 * ((100vw - 375px) / 1545)), 70px);
}
.common_block:last-child {margin-bottom: 0;padding-bottom: 0;}
.common_block::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(50px, calc(50px + 50 * ((100vw - 375px) / 1545)), 100px);
	height: 1px;
	background: #707070;
}
.common_block:last-child::before {display: none;}
.rec_block .ttl_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	padding: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	padding-top: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	padding-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	background: #000A6A;
}
.rec_block .ttl_wrap h2 {
	flex: 1;
	margin-right: 10px;
	color: #fff;
	font-weight: bold;
	font-size: clamp(16px, calc(16px + 12 * ((100vw - 375px) / 1545)), 22px);
	letter-spacing: .1em;
}
.rec_block .ttl_wrap p {
	padding: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding-top: clamp(4px, calc(4px + 4 * ((100vw - 375px) / 1545)), 8px);
	padding-bottom: clamp(3px, calc(3px + 3 * ((100vw - 375px) / 1545)), 6px);
	border: 1px solid #fff;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
.rec_block .ttl_wrap p a {color: #fff;}
.rec_block .container {
	padding: clamp(20px, calc(20px + 15 * ((100vw - 375px) / 1545)), 35px);
	padding-top: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	border: 1px solid #9D9D9D;
}
.rec_block .container .txt_wrap {
	align-items: flex-start;
	flex-direction: row-reverse;
	margin-bottom: clamp(30px, calc(30px + 30 * ((100vw - 375px) / 1545)), 60px);
}
.rec_block .container .txt_wrap figure {
	width: 48%;
	margin-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 16%);
}
.rec_block .container .txt_wrap .content {width: 48%;}
.rec_block .container .txt_wrap .content h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: 600;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
}
.rec_block .container .txt_wrap .content table {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
.rec_block .container .txt_wrap .content table tr {display: block;margin-bottom: 10px;}
.rec_block .container .txt_wrap .content table tr:last-child {margin-bottom: 0;}
.rec_block .container .txt_wrap .content table tr th {
	width: clamp(100px, calc(100px + 20 * ((100vw - 375px) / 1545)), 120px);
	padding: 5px;
	background: #000A6A;
	color: #fff;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}
.rec_block .container .txt_wrap .content table tr td {padding: 0 20px;vertical-align: middle;}
.rec_block .container .txt_wrap .content ul {justify-content: flex-start;gap: 15px;}
.rec_block .container .txt_wrap .content ul li {
	padding: 4px 12px;
	border: 1px solid #000;
	border-radius: 5px;
	background: #fff;
	font-size: clamp(11px, calc(11px + 2 * ((100vw - 375px) / 1545)), 13px);
	text-align: center;
}
ul.button_wrap {width: 100%;}
ul.button_wrap li {width: 32%;}
ul.button_wrap li a {
	display: block;
	position: relative;
	padding: 17px;
	border: 1px solid #000A6A;
	color: #fff;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
ul.button_wrap li.detail a {background: #EAEBFA;color: #000;}
ul.button_wrap li.phone a {background: #7B80CB;}
ul.button_wrap li.apply a {background: #001361;}
ul.button_wrap li a span {position: relative;}
ul.button_wrap li a span::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -40px;
	transform: translateY(-50%);
	height: 100%;
	background: no-repeat center / 100%;
}
ul.button_wrap li.detail a span::before {width: 24px;background-image: url(../img/page/recruitment/Icon_folder.svg);}
ul.button_wrap li.phone a span::before {width: 22px;background-image: url(../img/page/recruitment/Icon_phone.svg);}
ul.button_wrap li.apply a span::before {width: 19px;background-image: url(../img/page/recruitment/Icon_check.svg);}
ul.button_wrap li a span::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 120%;
	transform: translateY(-50%);
	width: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	height: 100%;
	background: url(../img/common/Icon_arrowR-wht.svg) no-repeat center / 100%;
	transition: .3s;
}
ul.button_wrap li.detail a span::after {background-image: url(../img/common/Icon_arrowR-blk.svg);}
ul.button_wrap li a:hover span::after {left: 125%;}
@media only screen and ( max-width : 767px ) {
	.rec_block .ttl_wrap {flex-direction: column-reverse;align-items: flex-start;padding: 15px;}
	.rec_block .ttl_wrap h3 {margin-right: 0;}
	.rec_block .ttl_wrap p {margin-bottom: 10px;}
    .rec_block .container {padding: 15px;}
    .rec_block .container .txt_wrap {margin-bottom: 20px;}
    .rec_block .container .txt_wrap figure {width: 100%;margin-bottom: 20px;}
	.rec_block .container .txt_wrap .content {width: 100%;}
	.rec_block .container .txt_wrap .content table {width: 100%;}
    .rec_block .container .txt_wrap .content table tr {display: flex;flex-direction: column;}
    .rec_block .container .txt_wrap .content table tr th {width: 100%;margin-bottom: 5px;padding-left: 0;}
	.rec_block .container .txt_wrap .content ul {gap: 5px;}
	ul.button_wrap {grid-template-columns: repeat(1, 1fr);gap: 5px;width: 100%;}
    ul.button_wrap li {width: 100%;}
    ul.button_wrap li a span::before {left: -30px;width: 20px;}
}
/*--------------------------------------------------

	Recruitment single │ 募集要項

--------------------------------------------------*/
#single {background: #FAFAFA;}
#single .inner {
	padding-bottom: clamp(40px, calc(40px + 50 * ((100vw - 375px) / 1545)), 90px);
	overflow: hidden;
	background: #fff;
}
#single .common_block::before {display: none;}
#single .rec_block .container {border: none;}
#single ul.button_wrap {max-width: 977px;margin: 0 auto;}
#single ul.button_wrap li {width: 49%;}
#single h3.sub_title {
	position: relative;
	margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);
	padding-bottom: 5px;
	font-weight: 600;
	font-size: clamp(18px, calc(18px + 10 * ((100vw - 375px) / 1545)), 28px);
}
#single h3.sub_title::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	height: 1px;
	background: #000A6A;
}
#single .point_block {width: 90%;max-width: 977px;margin: 0 auto clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);}
#single .single_block {width: 90%;max-width: 977px;margin: 0 auto clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);}
#single .single_block table tr {display: block;margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);}
#single .single_block table tr:last-child {margin-bottom: 0;}
#single .single_block table tr th {
	width: clamp(200px, calc(200px + 80 * ((100vw - 375px) / 1545)), 280px);
	font-weight: 600;
	vertical-align: top;
}
#single .single_block ul.button_wrap li {margin: 0 auto;}
#single .entry_block {width: 90%;max-width: 977px;margin: 0 auto;}
#single .entry_block p {
	margin-bottom: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	text-align: center;
}
@media only screen and (max-width: 767px) {
    #single .single_block table tr {display: flex;flex-direction: column;padding: 20px 15px;}
	#single .single_block table tr:last-child {border-bottom: none;}
    #single .single_block table tr th {width: 100%;margin-bottom: 12px;padding-left: 0; font-size: 1.1em;}
    #single .single_block table tr td {width: 100%;text-align: left;}
	#single ul.button_wrap li {width: 100%;}
}
@media only screen and ( max-width : 500px ) {
	#single .single_block table tr {padding: 15px 10px;}
}
/*-------------------------------------------------

	News Archive │ お知らせ

--------------------------------------------------*/
#news ul {margin-bottom: 30px;}
#news ul:last-child {margin-bottom: 0;}
#news ul li {
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 20px;
	padding: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1545)), 40px);
	padding-right: clamp(100px, calc(100px + 100 * ((100vw - 375px) / 1545)), 200px);
	background: linear-gradient(to right, #707070 1px, transparent 1px) repeat-x bottom left / 3px 1px;
}
#news ul li:first-child::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #707070 1px, transparent 1px) repeat-x top left / 3px 1px;
}
#news ul li::after {
	content: '';
	position: absolute;
	top: 50%;
	right: clamp(25px, calc(25px + 20 * ((100vw - 375px) / 1545)), 45px);
	transform: translateY(-50%);
	width: clamp(45px, calc(45px + 20 * ((100vw - 375px) / 1545)), 65px);
	height: 100%;
	background: url(../img/common/Icon_arrowR-blk.svg) no-repeat center / 100%;
	transition: .3s;
}
#news ul li:hover::after {right: clamp(15px, calc(15px + 20 * ((100vw - 375px) / 1545)), 30px);}
#news ul li:last-child {margin-bottom: 0;}
#news ul li dl {display: flex;align-items: center;gap: clamp(20px, calc(20px + 40 * ((100vw - 375px) / 1545)), 60px);}
#news ul li dl dt time {padding-top: 5px;}
#news ul li dl dt span {
	margin-left: clamp(20px, calc(20px + 15 * ((100vw - 375px) / 1545)), 35px);
	padding: 5px 10px;
	background: #000A6A;
	color: #fff;
	text-align: center;
}
#news ul li dl dd {flex: 1;}
@media only screen and ( max-width : 1024px ) {
	#news ul li {padding: 15px 70px 15px 20px;}
}
@media only screen and ( max-width : 767px ) {
	#news ul li dl {display: block;}
	#news ul li dl dt {margin-bottom: 10px;}
}
/*-------------------------------------------------

	News Single │ お知らせ

--------------------------------------------------*/
#news-sg {background: #FAFAFA;}
#news-sg .block {
	padding: 20px;
	padding-top: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);
	padding-bottom: clamp(50px, calc(50px + 40 * ((100vw - 375px) / 1545)), 90px);
	overflow: hidden;
	background: #fff;
}
#news-sg .block .container {max-width: 1120px;margin: 0 auto;}
#news-sg .block .container dl {margin-bottom: clamp(30px, calc(30px + 10 * ((100vw - 375px) / 1545)), 40px);}
#news-sg .block .container dl dt {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#news-sg .block .container dl dt time {padding-top: 5px;}
#news-sg .block .container dl dt span {
	margin-left: clamp(20px, calc(20px + 15 * ((100vw - 375px) / 1545)), 35px);
	padding: 5px 10px;
	background: #000A6A;
	color: #fff;
	text-align: center;
}
#news-sg .block .container dl dd {
	position: relative;
	padding-bottom: 5px;
	color: #000A6A;
	font-size: clamp(18px, calc(18px + 14 * ((100vw - 375px) / 1545)), 32px);
	line-height: 1.4;
}
#news-sg .block .container dl dd::before {
	content: '';
	position: absolute;
	left: calc(50% - 50vw);
	bottom: 0;
	z-index: 1;
	width: 100vw;
	height: 1px;
	background: #000A6A;
}
#news-sg .block .container .content {
	margin-bottom: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);
	padding: 0 10px;
}
#news-sg .block .container .content p {letter-spacing: 0;}
#news-sg .block .container .content .flex {display: flex;}
#news-sg .block .container a.back {
	display: block;
	position: relative;
	max-width: 364px;
	margin: 0 auto;
	overflow: hidden;
	padding: 20px 0;
	padding-right: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	border: 1px solid #000A6A;
	background: #EAEBFA;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
#news-sg .block .container a.back::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10%;
	z-index: 5;
	transform: translateY(-50%);
	width: 38px;
	height: 100%;
	background: url(../img/common/Icon_arrowR-blk.svg) no-repeat center / 100%;
	transition: .3s;
}
#news-sg .block .container a.back:hover::after {right: 7%;}
#news-sg .block .container a.back span {position: relative;z-index: 5;}