@charset "utf-8";

#mainVisual{
	background: url("/assets/recruit/img/mainvisual.webp") no-repeat center top / cover;
	width: 100%;
	aspect-ratio: 1366 / 720;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	text-align: left;
	padding-bottom: 156px;
}

.topHd{
	font-size: 5rem;
	font-weight: 900;
	color: #003289;
	position: relative;
}
.topHd span{
	position: relative;
}
	.topHd span::before{
		content: "";
		display: block;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		bottom: -40px;
	}

.flexBox{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

[id^="sec_"] .contents > .inner{
	max-width: 1006px;
	margin: 0 auto;
	width: calc(100% - 46px);
}
[id^="sec_"] .lead{
	font-size: 1.8rem;
	line-height: 2;
	text-align: left;
}

[id^="sec_"] .com-btn{
	padding-top: 29px;
	padding-bottom: 29px;
	border-radius: 40px;
}

@media screen and (max-width: 1024px){
	#mainVisual{
		padding-bottom: 13vw;
	}
	
	#mainVisual h1{
		max-width: 635px;
		width: 65%;
	}
}

@media screen and (max-width: 767px){
	.topHd{
		font-size: 3rem;
	}
	.topHd span::before{
		bottom: -24px;
	}
	#mainVisual h1{
		width: 79%;
	}
	[id^="sec_"] .contents > .inner{
		width: 100%;
	}
	[id^="sec_"] .lead{
		font-size: 1.6rem;
	}
	[id^="sec_"] .com-btn{
		padding-top: 19px;
		padding-bottom: 19px;
	}
}

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

/*  メッセージ

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

#sec_message .contents{
	padding-top: 20px;
	position: relative;
	z-index: 10;
}
#sec_message .contents::before{
	content: "";
	display: block;
	width: 100%;
	height: 100px;
	background: #fff;
	border-top-right-radius: 100px;
	border-top-left-radius: 100px;
	position: absolute;
	bottom: 100%;
	left: 0;
}

#sec_message .topHd span{
	padding: 0 60px;
}
#sec_message .topHd span::before{
	background-image: url("/assets/recruit/img/message_hukidashi.svg");
	aspect-ratio: 368/109;
	left: 0;
}

#sec_message .flexBox{
	margin-top: 67px;
	justify-content: flex-end;
	align-items: flex-start;
}

#sec_message .flexBox .txtBox{
	margin-top: 50px;
	margin-right: 103px;
	width: 50%;
}

#sec_message .lead{
	font-size: 3.4rem;
	font-weight: 900;
	color: #fff;
	text-align: left;
	line-height: 1.941;
}
#sec_message .lead span{
	background: #378CFA;
	padding-left: 10px;
}

#sec_message .txt{
	font-size: 1.8rem;
	text-align: left;
	line-height: 2;
	margin-top: 35px;
}

#sec_message .flexBox figure{
	max-width: 400px;
	width: 43%;
}

#sec_message figcaption{
	margin-top: 27px;
	font-size: 1.8rem;
}

#sec_message figcaption .big{
	font-size: 2.2rem;
	font-weight: 500;
}

#sec_message .com-btn{
	margin-top: 86px;
}

@media screen and (max-width: 1180px){
	#sec_message .flexBox{
		justify-content: space-between;
	}
	#sec_message .flexBox .txtBox{
		margin-top: 0;
		margin-right: 30px;
		width: calc(70% - 30px);
	}
	#sec_message .flexBox figure{
		width: 30%;
	}
}
@media screen and (max-width: 1024px){
	#sec_message .contents::before{
		height: 9.767vw;
	}
	#sec_message .flexBox{
		display: block;
	}
	#sec_message .flexBox .txtBox{
		width: 100%;
	}
	#sec_message .flexBox figure{
		margin: 30px auto 0;
		max-width: 300px;
		width: 65%;
	}
}

@media screen and (max-width: 767px){
	#sec_message .contents::before{
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
	}
	#sec_message .topHd span::before{
		aspect-ratio: 338 / 79;
	}
	#sec_message .flexBox{
		margin-top: 50px;
	}
	#sec_message .lead{
		font-size: clamp(1.6rem, 5vw,2.4rem);
	}
	#sec_message .txt{
		margin-top: 15px;
		font-size: 1.6rem;
	}
	
	#sec_message .com-btn{
		margin-top: 60px;
	}
}

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

/*  仕事を知ろう

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

#sec_know{
	background: #ECF1FF;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(236, 241, 255, 1) 50%, rgba(236, 241, 255, 1) 100%);
	text-align: left;
	margin-top: 175px;
}
#sec_know .contents{
	background: #ECF1FF;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
	padding-top: 100px;
	padding-bottom: 142px;
}

#sec_know .topHd{
	text-align: left;
	margin-bottom: 86px;
}
#sec_know .topHd span{
	padding: 0 54px;
}
#sec_know .topHd span::before{
	background-image: url("/assets/recruit/img/know_hukidashi.svg");
	aspect-ratio: 408/109;
	left: 0;
}

.knowList{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 100px 66px;
	margin-top: 45px;
}
	.knowList li{
		width: calc(100% / 2 - 33px);
	}
	.knowList li:nth-child(2){
		margin-top: 150px;
	}
	.knowList li:nth-child(3){
		margin-top: -174px;
	}
	.knowList li:nth-child(5){
		margin-top: -266px;
	}
	.knowList li figure{
		border-radius: 30px;
		overflow: hidden;
	}
	.knowList li .hd{
		font-size: 2rem;
		font-weight: 700;
		color: #1E4ED8;
		letter-spacing: 0.05em;
		margin-top: 15px;
	}
	.knowList li .label{
		display: inline-block;
		width: 120px;
		line-height: 21px;
		color: #fff;
		font-size: 1.4rem;
		font-weight: 700;
		background: #378CFA;
		text-align: center;
		border-radius: 11px;
	}
	.knowList li .min{
		font-size: 0.875em;
	}
	.knowList li p{
		margin-top: 10px;
		max-width: 440px;
	}
	.knowList li .label + p{
		margin-top: 3px;
	}

#sec_know .com-btnBox{
	margin-top: 118px;
}

@media screen and (max-width: 1024px){
	#sec_know .contents > .inner{
		padding-left: 23px;
		width: 100%;
	}
}
@media screen and (max-width: 767px){
	#sec_know{
		margin-top: 100px;
	}
	#sec_know .contents{
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		padding-top: 60px;
		padding-bottom: 60px;
	}
	#sec_know .topHd{
		margin-bottom: 50px;
	}
	#sec_know .topHd span{
		padding: 0 34px;
	}
	#sec_know .topHd span::before{
		aspect-ratio: 388 / 89;
	}
	.knowList{
		flex-direction: column;
		gap: 50px 66px;
	}
	.knowList li{
		width: 100%;
	}
	.knowList li .hd{
		font-size: 1.8rem;
	}
	.knowList li:nth-child(2),
	.knowList li:nth-child(3),
	.knowList li:nth-child(5){
		margin-top: 0;
	}
	.knowList li p{
		max-width: inherit;
	}
	
	#sec_know .com-btnBox{
		margin-top: 60px;
	}
}

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

/*  働く環境を知ろう

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

#sec_environment{
	margin-top: 172px;
}

#sec_environment .topHd{
	margin-bottom: 97px;
}
	#sec_environment .topHd span{
		padding: 0 49px
	}
	#sec_environment .topHd span::before{
		background-image: url("/assets/recruit/img/environment_hukidashi.svg");
		aspect-ratio: 498/109;
		left: 0;
	}

#sec_environment .container{
	margin-top: 60px;
}

#sec_environment .container + .container{
	margin-top: 83px;
}

.hd-label{
	text-align: left;
	font-size: 3rem;
	font-weight: 900;
}
.hd-label span{
	color: #fff;
	line-height: 51px;
	background: #003289;
	text-align: left;
	display: inline-block;
	margin: 0 auto 0 0;
	padding: 0 38px;
}

#sec_environment .txtBox p{
	font-size: 1.8rem;
	text-align: left;
	line-height: 2;
	margin-top: 27px;
}

#sec_environment .flexBox{
	align-items: flex-start;
}

#sec_environment .flexBox .txtBox{
	width: calc(69% - 180px);
}
#sec_environment .flexBox figure{
	margin-right: -180px;
	max-width: 600px;
	width: 60%;
}

.gridBox{
	margin-top: 34px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 33px 42px;
}
.gridBox li{
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

#sec_environment a.com-btn{
	padding-top: 18px;
	padding-bottom: 17px;
	margin-top: 60px;
}

@media screen and (max-width: 1370px){
	#sec_environment .flexBox .txtBox{
		width: 50%;
	}
	#sec_environment .flexBox figure{
		margin-right: -46px;
		width: 50%;
	}
}
@media screen and (max-width: 1023px){
	#sec_environment .flexBox{
		flex-direction: column;
	}
	#sec_environment .flexBox .txtBox{
		width: 100%;
	}
	#sec_environment .flexBox figure{
		margin: 20px auto 0;
		width: 100%;
	}
	.gridBox{
		gap: 20px;
	}
}
@media screen and (max-width: 767px){
	#sec_environment{
		margin-top: 100px;
	}
	#sec_environment .topHd{
		margin-bottom: 50px;
	}
	#sec_environment .topHd span {
		padding: 0 17px;
	}
	#sec_environment .container{
		margin-top: 30px;
	}
	.hd-label{
		font-size: 2rem;
	}
	.hd-label span{
		line-height: 40px;
		padding: 0 24px;
	}
	#sec_environment .txtBox p{
		font-size: 1.6rem;
		margin-top: 15px;
	}
	.gridBox {
		gap: 10px;
	}
	#sec_environment a.com-btn{
		padding-top: 19px;
		padding-bottom: 19px;
	}
}

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

/*  新東エンジニアリングってどんな会社？

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

#sec_about{
	background: #ECF1FF;
	border-radius: 100px;
	padding: 154px 0 186px;
	margin-top: 190px;
}

#sec_about .topHd{
	line-height: 1.28;
}
#sec_about .topHd span{
	padding: 0 67px;
	display: inline-block;
}
#sec_about .topHd span::before{
	background-image: url("/assets/recruit/img/about_hukidashi.svg");
	aspect-ratio: 732/173;
	left: 0;
	bottom: -49px;
}
.aboutList{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 50px 38px;
	max-width: 1006px;
	margin: 173px auto 0;
}

.aboutList .about06{
	margin: -50px 0px 0 -32px;
}

@media screen and (max-width: 1024px){
	#sec_about .topHd{
		font-size: 4.5rem
	}
	.aboutList{
		gap: 20px;
	}
	.aboutList .about06{
		margin: -16.2% 0 0 -11%;
	}
}
@media screen and (max-width: 767px){
	#sec_about{
		border-radius: 50px;
		padding: 60px 0;
		margin-top: 100px;
	}
	#sec_about .topHd{
		font-size: clamp(1.6rem,5vw,3rem);
	}
	#sec_about .topHd span{
		padding: 0 40px;
	}
	#sec_about .topHd span::before{
		bottom: -35px;
	}
	.aboutList{
		margin-top: 60px;
		gap: 10px;
	}
	.aboutList .about06{
		margin: -16.4% 0 0 -11%;
	}
}
@media screen and (max-width: 480px){
	#sec_about .topHd span::before{
		aspect-ratio: 712 / 153;
		bottom: -30px;
	}
}