@charset "utf-8";
/* Copyright 2022 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

PC、タブレット、スマートフォン共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ------------------------------------------------------------

採用情報

------------------------------------------------------------ */

.sec_lead{padding-bottom: 120px;}

.sec_lead .heading02{text-align: center;}

.sec_lead .lead{
	display: flex;
	border-top: 1px solid #CBD6DE;
	border-bottom: 1px solid #CBD6DE;
}

.sec_lead .lead .col_l{
	background: url("../recruit/img/bg_lead01.jpg") no-repeat center;
	background-size: cover;
	width: 50%;
	padding: 120px 13.75%;
	border-right: 1px solid #CBD6DE;
}

.sec_lead .lead .col_r{
	background: url("../recruit/img/bg_lead02.jpg") no-repeat center;
	background-size: cover;
	width: 50%;
	padding: 120px 13.75%;
}

.sec_lead .lead .col_l h3,
.sec_lead .lead .col_r h3{
	color: #0270BB;
	font-size: 3rem;
	line-height: 1.2;
	margin-bottom: 30px;
}

.sec_lead .lead .col_l .txt,
.sec_lead .lead .col_r .txt{line-height: 2;}

/* 福利厚生
---------------------------------------------- */
.sec_welfare{
	background: #E5ECF0;
	padding: 120px 40px;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.sec_welfare::before{
	content: "Welfare";
	font-family: "Amiri";
	font-size: 30rem;
	color: #FFF;
	line-height: 1;
	letter-spacing: -0.03em;
	opacity: 0.4;
	position: absolute;
	top: 80px;
	left: -15px;
	z-index: -1;
}

.sec_welfare .heading01{text-align: center;}

.sec_welfare .heading01::before{
	left: 50%;
	margin-left: -35px;
}

.sec_welfare .heading01::after{
	left: 50%;
	transform: translateX(calc(-50%));
}

.sec_welfare .heading02{text-align: center;}

.wrap_welfare{
	max-width: 1840px;
	margin: 0 auto;
}

.welfare{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px -10px;
}

.welfare .item{
	width: 20%;
	padding: 0 5px;
	margin-bottom: 10px;
}

.welfare .item .inner{
	background: #FFF;
	padding: 40px 20px;
	height: 100%;
}

.welfare .item .inner .name{
	min-height: 50px;
	margin-bottom: 20px;
	color: #0270BB;
	display: flex;
	align-items: center;
}

.welfare .item .inner .name .ico{
	background: #0270BB;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}

.welfare .item .inner .name img{
	width: 32px;
	height: 32px;
}

.welfare .item .inner .txt{line-height: 2;}

.welfare .item .inner .txt table{width: 100%;}

.welfare .item .inner .txt table th,
.welfare .item .inner .txt table td{
	padding: 5px 0;
	line-height: 1.4;
}

.welfare .item .inner .txt table th{
	width: 70px;
	vertical-align: top;
	color: #0270BB;
}

/*  当社の動向指針
---------------------------------------------- */
.sec_philosophy{
	padding: 120px 0 0;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.sec_philosophy::before{
	content: "Philosophy";
	font-family: "Amiri";
	font-size: 30rem;
	color: #FFF;
	line-height: 1;
	letter-spacing: -0.03em;
	opacity: 0.8;
	position: absolute;
	top: 40px;
	left: 50%;
	margin-left: -160px;
	z-index: -1;
}

.sec_philosophy .heading01{text-align: center;}

.sec_philosophy .heading01::before{
	left: 50%;
	margin-left: -35px;
}

.sec_philosophy .heading01::after{
	left: 50%;
	transform: translateX(calc(-50%));
}

.sec_philosophy > .heading02{text-align: center;}

/*--期待を超えるサービス提供を安定的に--*/
.philosophy{display: flex;}
	
.philosophy .item{
	width: 33.33%;
	min-height: 560px;
	color: #FFF;
	background-size: cover !important;
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
}

.philosophy .item:nth-of-type(1){background: url("../recruit/img/bg_philosophy01.jpg") no-repeat center;}
.philosophy .item:nth-of-type(2){background: url("../recruit/img/bg_philosophy02.jpg") no-repeat center;}
.philosophy .item:nth-of-type(3){background: url("../recruit/img/bg_philosophy03.jpg") no-repeat center;}

.philosophy .item .inner{padding: 50px 7.8% 80px;}
	
.philosophy .item .inner h4{
	font-size: 1.6rem;
	letter-spacing: 0.2em;
	line-height: 1;
	padding-bottom: 20px;
	margin-bottom: 30px;
	position: relative;
}

.philosophy .item .inner h4::before{
	content: "";
	background: #FFF;
	display: inline-block;
	width: 70px;
	height: 1px;
	position: absolute;
	left: 0;
	bottom: 0;
}

.philosophy .item .inner .lead{
	font-size: 2.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	line-height: 1.2;
	margin-bottom: 20px;
}

/*--コンセプト--*/
.concept{
	padding: 120px 0 130px;
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.concept::before{
	content: "Concept Concept Concept";
	font-family: "Amiri";
	font-size: 30rem;
	white-space: nowrap;
	color: #FFF;
	line-height: 1;
	letter-spacing: -0.07em;
	opacity: 0.8;
	position: absolute;
	top: 80px;
	left: 50%;
	margin-left: -1180px;
	z-index: -1;
}

.concept h4{
	text-align: center;
	color: #0270BB;
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 30px;
}

.concept .heading02{
	text-align: center;
	margin-bottom: 0;
}

/*--経営理念--*/
.management{
	padding: 120px 0;
	margin-bottom: 120px;
	border-top: 1px solid #CBD6DE;
	position: relative;
	z-index: 0;
}

.management::before{
	content: "";
	display: block;
	background: url("../recruit/img/bg_management01.jpg") no-repeat center;
	background-size: cover;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.management .inner{
	background: #F2F6F8;
	width: 41.66%;
	padding: 60px 60px 0 60px;
	position: absolute;
	right: 0;
	bottom: 120px;
	z-index: 1;
}

.management .inner h4{
	color: #0270BB;
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 20px;
}

.management .inner .txt{line-height: 2;}

.management .image{
	width: 70%;
	padding-top: clamp(420px, 29.166%, 700px);
	margin-left: auto;
	position: relative;
}

.management .image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
	z-index: -1;
}

.wrap_detail{
	background: url("../recruit/img/bg_management02.png") no-repeat center bottom;
	background-size: cover;
	padding: 0 50px 120px;
}

.detail{
	max-width: 1340px;
	margin: 0 auto;
}

.detail_inner{
	display: flex;
	justify-content: center;
	margin: 0 -15px;
}

.detail_inner .inner{
	padding: 0 15px;
	width: 33.33%;
}

.detail_inner .inner > div{
	background: #FFF;
	padding: 30px;
	line-height: 2;
	height: 100%;
}

.detail_inner .inner h4{
	color: #0270BB;
	line-height: 1;
	font-size: 3rem;
	margin-bottom: 20px;
}

.detail_inner .inner:nth-of-type(1) h4{margin-bottom: 30px;}

.detail_inner .inner:nth-of-type(1) ul{
	text-indent: -1.5em;
	padding-left: 1.5em;
}

.detail_inner .inner:nth-of-type(1) ul li{
	line-height: 1.2;
	margin-bottom: 10px;
}

.detail_inner .inner:nth-of-type(1) ul li:last-of-type{margin-bottom: 0;}

.detail_inner .inner:nth-of-type(3) ul{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -15px;
	counter-reset: number;
}

.detail_inner .inner:nth-of-type(3) ul li{
	width: 50%;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	min-height: 22px;
	line-height: 1;
}

.detail_inner .inner:nth-of-type(3) ul li::before{
	counter-increment: number;
	content: counter(number);
	color: #0270BB;
	width: 22px;
	height: 22px;
	border-radius: 22px;
	border: 1px solid #0270BB;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1;
	margin-right: 5px;
}

/*--社長挨拶--*/
.greeting{
	background: #E5ECF0;
	padding: 120px 50px;
	text-align: center;
	position: relative;
}

.greeting h4{
	color: #0270BB;
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 30px;
}

.greeting .inner{line-height: 2;}

.greeting .inner p{margin-bottom: 20px;}

.greeting .inner p:last-of-type{margin-bottom: 0;}

#waveCanvas{
	width: 100%;
	transform: scale(-1, 1);
	position: absolute;
	top: 110px;
	left: 0;
}

/*  募集要項
---------------------------------------------- */
.sec_application{
	background: url("../recruit/img/bg_application01.jpg") no-repeat right 0;
	background-size: contain;
	padding: 120px 0 120px 3.64vw;
	display: flex;
	align-items: center;
	flex-direction: row-reverse;
	position: relative;
	z-index: 0;
}

.sec_application .inner{
    padding: 0 7.1%;
    width: 37.83%;
    min-width: 555px;
}

.sec_application .image{width: 62.17%;}

.sec_application .image img{
	width: 100%;
	min-height: 560px;
	height: auto;
	object-fit: cover;
}

/* ------------------------------------------------------------

募集要項

------------------------------------------------------------ */

.requirements{margin-bottom: 20px;}
	
.requirements:last-of-type{margin-bottom: 0;}

.industry{
	background: #FFF;
	border: 1px solid #CBD6DE;
	border-bottom: none;
	position: relative;
}

.industry button{
	width: 100%;
	padding: 38px 80px 38px 30px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #CBD6DE;
}

.industry .name{
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.2;
}

.industry .position{
	color: #4F697B;
	margin-left: 5px;
}

.industry .ico{
	width: 30px;
	height: 30px;
	position: absolute;
	top: 50%;
	right: 30px;
	margin-top: -15px;
}

.industry .ico span{
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .5s;
}

.requirements.open .industry .ico span{transform: rotate(360deg);}

.industry .ico span::before{
	content: "";
	background: #0270BB;
	display: block;
	width: 30px;
	height: 4px;
	border-radius: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
}

.industry .ico span::after{
	content: "";
	background: #0270BB;
	display: block;
	width: 30px;
	height: 4px;
	border-radius: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0) rotate(90deg);
	transition: opacity .3s;
}

.requirements.open .industry .ico span::after{transform: translate3d(-50%, -50%, 0);}

.requirements.open .industry .ico span::after{opacity: 0;}

.contents{
	border: 1px solid #CBD6DE;
	border-top: none;
	border-bottom: none;
	overflow: hidden;
	height: 0;
}

.contents .inner{
	display: flex;
	padding: 40px;
	border-bottom: 1px solid #CBD6DE;
}

.contents .inner .item_name{
	color: #4F697B;
	font-weight: 700;
	width: 22%;
	line-height: 1.2;
	flex: none;
	padding: 6px 30px 0 0;
}

.contents .inner .txt{line-height: 2;}

.contents .inner.apply{
	padding: 0;
	justify-content: space-between;
}

.contents .inner.apply .item_name{
	padding: 35px 0 30px 40px;
	width: 24%;
}
	
.contents .inner.apply .txt{
	width: 36%;
	padding: 30px 15px 30px 0;
}

.contents .inner.apply .btn{flex: 1;}
	
.contents .inner.apply .btn a{
	background: #0270BB;
	color: #FFF;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 2rem;
	padding: 0 50px;
	height: 100%;
	flex: none;
	transition: padding-right .3s, background .3s;
}

.contents .inner.apply .btn a.focus-visible{
	outline-color: #FFF;
	outline-offset: -3px;
}

.contents .inner.apply .btn a:hover{
	background: #007ED3;
	padding-right: 40px;
}

.contents .inner.apply .btn .ico_arrow01{
	width: 60px;
	height: 60px;
	border-radius: 60px;
	border: 1px solid #4DA0D8;
	display: flex;
	justify-content: center;
	align-items: center;
}

.contents .inner.apply .btn .ico_arrow01 svg{
	width: 22px;
	height: 22px;
	fill: #FFFFFF;
}


@media only screen and (max-width:1750px){ /* 表示領域が1750px以下の場合に適用するスタイル */

	.lead .col_l,
	.lead .col_r{padding: 5%;}
	
	
}/*--@media--*/


@media only screen and (max-width:1500px){ /* 表示領域が1550px以下の場合に適用するスタイル */

	/* ------------------------------------------------------------

	採用情報

	------------------------------------------------------------ */
	
	.sec_lead .lead .col_l,
	.sec_lead .lead .col_r{padding: 60px;}

	
}/*--@media--*/


@media only screen and (max-width:1400px){ /* 表示領域が1400px以下の場合に適用するスタイル */

	/* ------------------------------------------------------------

	採用情報

	------------------------------------------------------------ */
	
	/* 福利厚生
	---------------------------------------------- */
	.welfare .item{width: 33.33%;}
	
	/* 当社の動向指針
	---------------------------------------------- */
	/*--経営理念--*/
	.wrap_detail{padding: 0 40px 120px;}
	
	.detail_inner{margin: 0 -5px;}

	.detail_inner .inner{padding: 0 5px;}
	
	/* 募集要項
	---------------------------------------------- */
	.sec_application .inner{
		min-width: 455px;
		padding: 0 4.3%;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:1024px){ /* 表示領域が1024px以下の場合に適用するスタイル */

	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	タブレット

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	採用情報

	------------------------------------------------------------ */
	
	.sec_lead{padding-bottom: 80px;}

	.sec_lead .heading02{padding: 0 15px;}
	
	.sec_lead .lead{
		display: block;
		border-bottom: none;
	}

	.sec_lead .lead .col_l{
		background-image: url("../recruit/img/bg_lead01_sp.jpg");
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #CBD6DE;
	}

	.sec_lead .lead .col_r{
		background-image: url("../recruit/img/bg_lead02_sp.jpg");
		width: 100%;
		border-bottom: 1px solid #CBD6DE;
	}
	
	/* 福利厚生
	---------------------------------------------- */
	.sec_welfare{padding: 60px 15px;}

	.sec_welfare::before{
		top: 32px;
		left: 0;
	}

	.sec_welfare .heading01{text-align: left;}

	.sec_welfare .heading01::before{
		left: 0;
		margin-left: unset;
	}

	.sec_welfare .heading01::after{
		left: 0;
		transform: unset;
	}

	.sec_welfare .heading02{text-align: left;}

	.welfare{
		display: block;
		margin: 0;
	}

	.welfare .item{
		width: 100%;
		padding: 0;
		margin-bottom: 10px;
	}
	
	.welfare .item:last-of-type{margin-bottom: 0;}

	.welfare .item .inner{padding: 30px 15px;}

	/*  当社の動向指針
	---------------------------------------------- */
	.sec_philosophy{padding: 60px 0 0;}

	.sec_philosophy::before{top: -10px;}

	.sec_philosophy .heading01{
		text-align: left;
		padding: 0 15px 20px;
	}

	.sec_philosophy .heading01::before{
		left: 15px;
		margin-left: unset;
	}

	.sec_philosophy .heading01::after{
		left: 15px;
		transform: unset;
	}

	.sec_philosophy > .heading02{
		text-align: left;
		padding: 0 15px;
	}

	.philosophy{display: block;}

	.philosophy .item{
		width: 100%;
		min-height: unset;
	}

	.philosophy .item:nth-of-type(1){background: url("../recruit/img/bg_philosophy01_sp.jpg") no-repeat center 0;}
	.philosophy .item:nth-of-type(2){background: url("../recruit/img/bg_philosophy02_sp.jpg") no-repeat center 0;}
	.philosophy .item:nth-of-type(3){background: url("../recruit/img/bg_philosophy03_sp.jpg") no-repeat center 0;}

	.philosophy .item .inner{padding: 70px 15px 40px;}

	.philosophy .item .inner .lead{
		font-size: 2rem;
		margin-bottom: 15px;
	}
	
	/* 当社の動向指針
	---------------------------------------------- */
	/*--コンセプト--*/
	.concept::before{top: 70px;}
	
	/*--経営理念--*/
	.management .inner{
		width: 50%;
		padding: 50px 50px 0 50px;
	}

	.management .image{width: 80%;}

	.detail_inner{flex-wrap: wrap;}
	
	.detail_inner .inner{width: 50%;}
	
	.detail_inner .inner:last-of-type{margin-top: 10px;}
	
	/*  募集要項
	---------------------------------------------- */
	.sec_application{
		background-image: url("../recruit/img/bg_application01_sp.jpg");
		background-size: 80%;
		padding: 50px 15px 120px;
		flex-direction: column-reverse;
	}

	.sec_application .inner{
		padding: 0;
		width: 100%;
		min-width: unset;
	}

	.sec_application .inner .heading02{margin-bottom: 30px;}
	
	.sec_application .image{
		width: 100%;
		margin-bottom: 40px;
	}

	.sec_application .image img{
		width: 100%;
		min-height: unset;
		height: auto;
	}
	
	/* ------------------------------------------------------------

	募集要項

	------------------------------------------------------------ */
	
	.industry button{
		display: block;
		padding: 20px 60px 20px 15px;
		text-align: left;
	}

	.industry .name{font-size: 1.8rem;}
	
	.industry .ico{right: 15px;}

	.contents .inner{
		display: block;
		padding: 37px 13px;
	}

	.contents .inner .item_name{
		width: 100%;
		flex: none;
		padding: 0;
		margin-bottom: 10px;
	}

	.contents .inner .txt{line-height: 2;}
	
	.contents .inner.apply{display: block;}
	
	.contents .inner.apply .item_name{
		padding: 37px 13px 10px;
		width: 100%;
	}

	.contents .inner.apply .txt{
		width: 100%;
		padding: 0 13px 37px;
	}

	.contents .inner.apply .btn{flex: 1;}

	.contents .inner.apply .btn a{
		font-size: 1.8rem;
		padding: 27px 13px;
		height: 100%;
	}

	.contents .inner.apply .btn a:hover{padding-right: 15px;}

	.contents .inner.apply .btn .ico_arrow01{
		width: 50px;
		height: 50px;
		border-radius: 50px;
	}
	
	
}/*--@media--*/


@media only screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	採用情報

	------------------------------------------------------------ */
	
	.sec_lead .lead .col_l,
	.sec_lead .lead .col_r{padding: 50px 15px;}
	
	.sec_lead .lead .col_l h3,
	.sec_lead .lead .col_r h3{
		font-size: 2.4rem;
		margin-bottom: 20px;
	}
	
	/* 福利厚生
	---------------------------------------------- */
	.sec_welfare::before{
		font-size: 13rem;
		top: 110px;
		left: 0;
	}
	
	.welfare .item .inner .name{
		font-size: 1.8rem;
		margin-bottom: 15px;
	}
	
	/*  当社の動向指針
	---------------------------------------------- */
	.sec_philosophy::before{
		font-size: 10rem;
		top: 120px;
		left: 0;
		margin-left: unset;
	}
	
	/*--コンセプト--*/
	.concept{padding: 80px 15px;}

	.concept::before{
		content: "Concept";
		font-size: 13rem;
		top: 90px;
		left: 50%;
		margin-left: -190px;
	}

	.concept h4{
		font-size: 2.4rem;
		margin-bottom: 20px;
	}
	
	/*--経営理念--*/
	.management{
		padding: 50px 0 80px;
		margin-bottom: 0;
		display: flex;
		flex-direction: column-reverse;
	}

	.management::before{
		background: url("../recruit/img/bg_management01.jpg") no-repeat center;
		background-size: cover;
		width: 80%;
		height: calc(100% - 95px);
	}

	.management .inner{
		width: 89.33%;
		padding: 30px 15px 0 15px;
		position: unset;
		margin: -50px 0 0 auto;
	}

	.management .inner h4{font-size: 2.4rem;}

	.management .image{
		width: calc(100% - 15px);
		padding-top: 0;
	}

	.management .image img{
		width: 100%;
		height: auto;
		object-fit: unset;
		position: unset;
	}
	
	.wrap_detail{
		background: url("../recruit/img/bg_management02_sp.png") no-repeat center 0;
		background-size: cover;
		padding: 0 15px 80px;
	}
	
	.detail_inner{flex-wrap: wrap;}
	
	.detail_inner .inner{
		width: 100%;
		margin-bottom: 10px;
	}
	
	.detail_inner .inner:last-of-type{margin: 0;}
	
	.detail_inner .inner h4{font-size: 2.4rem;}
	
	.detail_inner .inner:nth-of-type(1) h4{margin-bottom: 20px;}
	
	/*--社長挨拶--*/
	.greeting{padding: 80px 15px;}

	.greeting h4{font-size: 2.4rem;}

	.greeting .inner p{margin-bottom: 15px;}
	
	.greeting .inner p:first-of-type br{display: none;}

	#waveCanvas{top: 110px;}
	
	/* ------------------------------------------------------------

	募集要項

	------------------------------------------------------------ */
	
	.industry .position{margin: 5px 0 0 0;}
	

}/*--@media--*/


@media only screen and (max-width:432px){ /* 表示領域が432px以下の場合に適用するスタイル */
	
	/* ------------------------------------------------------------

	採用情報

	------------------------------------------------------------ */
	
	/*  当社の動向指針
	---------------------------------------------- */
	.sec_philosophy::before{top: 150px;}
	
	/*--コンセプト--*/
	.concept::before{top: 130px;}
	
	
}/*--@media--*/