@charset "utf-8";

#KeyVisual{
	z-index: 10;
}
#KeyVisual .img::before{
	content: "";
	display: block;
	background: url("../img/img_keyvisual_pc.svg") no-repeat center / contain;
	width: 1201px;
	height: 421px;
	position: absolute;
	top: -13px;
	left: calc(100% / 2 - 568px);
	z-index: 1;
}

[id^="sec_"] .lead{
	text-align: left;
	line-height: 2;
	font-weight: 700;
}

.hd03{
	color: #025BB2;
}

.top-ttl{
	font-family: "Lato", serif;
	font-weight: 700;
	text-align: left;
	color: #025BB2;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	line-height: 1.2;
}
.top-ttl .number{
	font-size: 12rem;
	font-weight: 900;
	color: #FFE52C;
}
.top-ttl .en{
	margin-left: -1.6em;
}

#recruitingContainer{
	margin-top: 90px;
}

@media screen and (max-width: 810px){
	#KeyVisual .img::before{
	background-image: url("../img/img_keyvisual_sp.svg");
	width: 77%;
	height: auto;
	aspect-ratio: 412/273;
	top: 34px;
	left: 50%;
	transform: translateX(calc(-50% + 11px));
}
}
@media screen and (max-width: 767px){
	#KeyVisual .img::before{
		width: 110%;
		top: 51px;
		transform: translateX(calc(-50% + 8px));
	}
	.hd03{
		font-size: 2rem;
	}
	.top-ttl .number{
		font-size: 10rem;
	}
	.top-ttl .en {
		margin-left: -1.3em;
	}
}

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

/*  COMMUNICATION

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

#sec_culture [id^="sec_"] + [id^="sec_"]{
	margin-top: 120px;
}

#sec_culture{
	padding-top: 35px;
	position: relative;
}
#sec_culture::before,
#sec_culture-01::after{
	content: "";
	display: block;
	position: absolute;
	aspect-ratio: 1366/372;
	width: 100%;
	z-index: 5;
}
#sec_culture::before{
	background: #fff url("/themes/site/recruit/img/line.svg") no-repeat right calc(100% + 1px) / 100%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
#sec_culture-01{
	background: rgb(239,239,239);
	padding: 37px 0 10px;
	position: relative;
}
#sec_culture-01::after{
	background: #fff url("/themes/site/recruit/img/line.svg") no-repeat right bottom / 100%;
	top: 100%;
	left: 50%;
	aspect-ratio: 1366/372;
	transform: translateX(-50%) scale(-1,-1);
}

#sec_culture-01 > .contents,
#sec_culture .leadContainer{
	position: relative;
	z-index: 20;
}

#sec_culture-01 ul{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0 17px;
	margin-top: 22px;
}
	#sec_culture-01 ul li{
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 3;
	}
		#sec_culture-01 li figure{
			border-radius: 10px;
			overflow: hidden;
			aspect-ratio: 322/210;
			width: 100%;
		}
#sec_culture-01 li figure img{
	object-fit: cover;
	width: 100%;
	height: 100%;
}

		#sec_culture-01 li .hd03{
			margin-top: 20px;
			line-height: 1.333;
		}

		#sec_culture-01 li p{
			margin-top: 8px;
			text-align: left;
			font-size: 1.4rem;
		}

@media screen and (max-width: 880px){
	#sec_culture-01 ul{
		grid-template-columns: 1fr;
	}
	
	#sec_culture-01 ul li{
		max-width: 482px;
		margin: 0 auto;
	}
	
	#sec_culture-01 ul li + li{
		margin-top: 28px;
	}
}
@media screen and (max-width: 768px){
	#sec_culture::before{
		content: none;
	}
	#sec_culture-01::before{
		content: "";
		display: block;
		background: #fff url("/themes/site/recruit/img/line.svg") no-repeat right calc(100% + 1px) / 100%;
		position: absolute;
		top: -3%;
		left: 50%;
		transform: translateX(-50%);
		aspect-ratio: 1366 / 372;
		width: 100%;
		z-index: 5;
	}
	
	#sec_culture-01 li .hd03{
		margin-top: 10px;
	}
}
@media screen and (max-width: 767px){
	#sec_culture{
		margin-top: 0;
	}
	#sec_culture [id^="sec_"] + [id^="sec_"]{
		margin-top: 50px;
	}
	#sec_culture-01{
		padding: 57px 0 100px;
	}
	#sec_culture-01 li figure{
		aspect-ratio: 345/192;
	}
	#sec_culture-01 li .hd03{
		line-height: 1.6;
	}
	#sec_culture-01 li p{
		font-size: 1.6rem;
	}
}



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

/*  EMPLOYEE BENEFITS

/* ------------------------------------------------------------------------ */
#sec_culture-02 > .contents{
	position: relative;
	z-index: 10;
}

#sec_culture-02 .container{
	margin-top: 24px;
}

#sec_culture-02 .container + .container{
	margin-top: 32px;
}

#sec_culture-02 .container ul{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
	margin-top: 7px;
}

#sec_culture-02 .container ul > li{
	box-shadow: 0 5px 25px 0 rgba(112,112,112,0.16);
	border-radius: 10px;
	padding: 21px 15px;
	background: #fff;
}

#sec_culture-02 .container ul .sub-ttl-02{
	margin-bottom: 2px;
}

#sec_culture-02 .sub-ttl-01{
	text-align: left;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	color: #1F1F1F;
}
#sec_culture-02 .sub-ttl-01::before{
	content: "";
	display: inline-block;
	width: 56px;
	height: 56px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin-right: 10px;
}
	#sec_culture-02 .container1 .sub-ttl-01::before{
		background-image: url("../img/icon_megaphone.svg");
	}
	#sec_culture-02 .container2 .sub-ttl-01::before{
		background-image: url("../img/icon_graph.svg");
	}
	#sec_culture-02 .container3 .sub-ttl-01::before{
		background-image: url("../img/icon_cup.svg");
	}
	#sec_culture-02 .container4 .sub-ttl-01::before{
		content: none;
	}

#sec_culture-02 .sub-ttl-02::before{
	content: "";
	display: block;
	max-width: 208px;
	aspect-ratio: 208/130;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 0 auto 11px;
}
	#sec_culture-02 .container1 li:first-child .sub-ttl-02::before{
		background-image: url("../img/employeebenefits_icon_01.svg");
	}
	#sec_culture-02 .container1 li:last-child .sub-ttl-02::before{
		background-image: url("../img/employeebenefits_icon_02.svg");
	}
	#sec_culture-02 .container2 li:first-child .sub-ttl-02::before{
		background-image: url("../img/employeebenefits_icon_03.svg");
	}
	#sec_culture-02 .container2 li:last-child .sub-ttl-02::before{
		background-image: url("../img/employeebenefits_icon_04.svg");
	}
	#sec_culture-02 .container3 li:first-child .sub-ttl-02::before{
		background-image: url("../img/employeebenefits_icon_05.svg");
	}
	#sec_culture-02 .container3 li:last-child .sub-ttl-02::before{
		background-image: url("../img/employeebenefits_icon_06.svg");
	}


#sec_culture-02 .container.container4{
	margin-top: 44px;
}

#sec_culture-02 .container4 ul{
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin-top: 12px;
}
	#sec_culture-02 .container4 ul li{
		font-weight: 700;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		padding: 13px 15px 17px;
	}
	#sec_culture-02 .container4 ul li::before{
		content: "";
		display: block;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin: 0 auto 14px;
		width: 100%;
	}
		#sec_culture-02 .container4 li.li-01::before{
			background-image: url("../img/icon_car.svg");
			max-width: 93px;
			aspect-ratio: 93/66;
		}
		#sec_culture-02 .container4 li.li-02::before{
			background-image: url("../img/icon_calendar.svg");
			max-width: 73px;
			aspect-ratio: 73/68;
		}
		#sec_culture-02 .container4 li.li-03::before{
			background-image: url("../img/icon_money.svg");
			max-width: 97px;
			aspect-ratio: 97/58;
		}
		#sec_culture-02 .container4 li.li-04::before{
			background-image: url("../img/icon_envelope.svg");
			max-width: 54px;
			aspect-ratio: 54/77;
		}

#sec_culture-02 .container4 li .min{
	font-size: 1.4rem;
}

@media screen and (max-width: 767px){
	#sec_culture #sec_culture-02{
		margin-top: -50px;
	}
	#sec_culture-02 .sub-ttl-01::before{
		width: 36px;
		height: 36px;
		margin-right: 8px;
	}
	#sec_culture-02 .container ul{
		gap: 0 9px;
	}
		#sec_culture-02 .container ul > li{
			padding: 30px 13px 13px;
		}
			#sec_culture-02 .container ul .sub-ttl-02{
				font-size: 1.6rem;
			}
			#sec_culture-02 .container ul p{
				text-align: left;
				font-size: 1.4rem;
				font-weight: 700;
			}
	
	#sec_culture-02 .container4 ul{
		grid-template-columns: 1fr 1fr;
		gap: 10px 9px;
	}
}



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

/*  CAREER UP

/* ------------------------------------------------------------------------ */
#sec_culture-03::before,
#sec_culture-03::after{
	content: "";
	display: block;
	position: absolute;
	aspect-ratio: 1366/372;
	width: 100%;
	z-index: 5;
}
#sec_culture-03::before{
	background: #fff url("/themes/site/recruit/img/line.svg") no-repeat right calc(100% + 1px) / 100%;
	bottom: 88.6%;
	left: 50%;
	transform: translateX(-50%);
}
#sec_culture-03{
	background: rgb(239,239,239);
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(239,239,239,1) 20%, rgba(239,239,239,1) 100%);
	padding-top: 65px;
	position: relative;
}
#sec_culture-03::after{
	background: #fff url("/themes/site/recruit/img/line.svg") no-repeat right bottom / 100%;
	top: 88%;
	left: 50%;
	aspect-ratio: 1366/372;
	transform: translateX(-50%) scale(-1,-1);
}

#sec_culture-03{
	background: #EFEFEF;
}

#sec_culture-03 > .contents{
	position: relative;
	z-index: 20;
}

#sec_culture-03 .list{
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0 67px;
	margin-top: 107px;
}
#sec_culture-03 .list li{
	background: #FFFFFF;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 40%, rgba(255, 237, 108, 1) 60%, rgba(255, 237, 108, 1) 100%);
	width: calc(100% / 3);
	max-width: 244px;
	border-radius: 122px;
	padding: 0 0 29px;
}

#sec_culture-03 .list .sub-ttl{
	font-size: 2rem;
	line-height: 2;
	letter-spacing: -0.07em;
	color: #025BB2;
}
	#sec_culture-03 .list .sub-ttl::before{
		content: "";
		display: block;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin: 0 auto 16px;
		width: 100%;
	}
	#sec_culture-03 .li-01 .sub-ttl::before{
		background-image: url("../img/careerup_icon_01.svg");
		max-width: 261px;
		aspect-ratio: 261/325;
		margin: -100px -8px 11px;
		width: 107%;
	}
	#sec_culture-03 .li-02 .sub-ttl::before{
		background-image: url("../img/careerup_icon_02.svg");
		max-width: 244px;
		aspect-ratio: 244/289;
		margin-top: -58px;
		margin-right: -10px;
		margin-bottom: 5px;
	}
	#sec_culture-03 .li-03 .sub-ttl::before{
		background-image: url("../img/careerup_icon_03.svg");
		max-width: 300px;
		aspect-ratio: 300/283;
		width: 123%;
		margin: -59px -16px 12px;
	}

#sec_culture-03 .list p{
	color: #025BB2;
	font-size: 1.7rem;
	line-height: 1.118;
}


#sec_culture-03 .pointBox{
	background: #025BB2;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 50px 65px;
	padding-left: 0;
	margin-top: 70px;
	position: relative;
}
#sec_culture-03 .pointBox::before{
	content: "";
	display: block;
	width: 100vw;
	height: 100%;
	background: #025BB2;
	position: absolute;
	top: 0;
	right: 100%;
}

#sec_culture-03 .pointBox > .flex{
	align-items: flex-start;
}

#sec_culture-03 .pointBox .txtBox{
	text-align: left;
	color: #fff;
	width: calc(41% - 44px);
}
	#sec_culture-03 .pointBox .hd03{
		color: #fff;
		line-height: 1.333;
		margin-bottom: 19px;
	}
	#sec_culture-03 .hd03 .label{
		color: #FFE52C;
		font-size: 1.6rem;
	}


#sec_culture-03 .pointBox ul{
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 0 15px;
	max-width: 555px;
	width: 60%;
}
	#sec_culture-03 .pointBox li{
		background: #fff;
		border-radius: 10px;
		font-weight: 700;
		padding: 0 15px 15px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		min-height: 187px;
		max-width: 175px;
		width: calc(100% / 3);
	}
	#sec_culture-03 .pointBox li::before{
		content: "";
		display: block;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin-bottom: 7px;
	}
	#sec_culture-03 .li-01::before{
		background-image: url("../img/point_icon_01.svg");
		max-width: 133px;
		aspect-ratio: 133/102;
		margin-left: 8px;
		width: 92%;
	}
	#sec_culture-03 .li-02::before{
		background-image: url("../img/point_icon_02.svg");
		max-width: 91px;
		aspect-ratio: 91/115;
		margin-left: 17px;
		width: 63%;
	}
	#sec_culture-03 .li-03::before{
		background-image: url("../img/point_icon_03.svg");
		max-width: 102px;
		aspect-ratio: 102/95;
		width: 71%;
	}

@media screen and (max-width: 1024px){
	#sec_culture-03::after{
		top: 100%;
	}
	#sec_culture-03 .pointBox{
		padding-right: 15px;
	}
}
@media screen and (max-width: 1023px){
	#sec_culture-03 .list{
		gap: 0 30px;
	}
	#sec_culture-03 .list li{
		width: calc(100% / 2 - 15px);
	}
	#sec_culture-03 .list .li-03{
		width: 50.47%;
	}
	
	#sec_culture-03 .pointBox > .flex{
		align-items: center;
		flex-direction: column;
	}
	#sec_culture-03 .pointBox .txtBox{
		max-width: 555px;
		width: 100%;
	}
	#sec_culture-03 .pointBox ul{
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 23px;
		width: 100%;
	}
	#sec_culture-03 .pointBox li{
		width: calc(100% / 2 - 7.5px);
	}
}
@media screen and (max-width: 880px){
	#sec_culture-03 .list{
		flex-wrap: wrap;
		max-width: 518px;
		margin: 107px auto 0;
	}
	#sec_culture-03 .list .li-03{
		margin-top: 70px;
	}
}
@media screen and (max-width: 821px){
	#sec_culture-03 .list{
		gap: 0 9px;
	}
	#sec_culture-03 .list li{
		width: calc(100% / 2 - 4.5px);
	}
}
@media screen and (max-width: 767px){
	#sec_culture-03::before{
		bottom: 96%;
	}
	#sec_culture-03 .list{
		margin-top: 45px;
	}
	#sec_culture-03 .list .sub-ttl{
		font-size: clamp(1rem,3.5vw,1.3rem);
	}
	#sec_culture-03 .list p{
		font-size: 1.1rem;
	}
	#sec_culture-03 .li-01 .sub-ttl::before{
		margin: -24% 0 11px;
		width: 95%;
	}
	#sec_culture-03 .li-02 .sub-ttl::before{
		margin-top: -14%;
		margin-right: 0;
		width: 95%;
	}
	
	#sec_culture-03 .pointBox{
		margin-top: 28px;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#sec_culture-03 .pointBox ul{
		max-width: 365px;
		gap: 15px;
	}
	#sec_culture-03 .pointBox li{
		min-height: inherit;
		padding: 15px;
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 374px){
	#sec_culture-03 .pointBox li{
		font-size: 1rem;
	}
}



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

/*  QUESTIONNAIRE

/* ------------------------------------------------------------------------ */
#sec_culture-04{
	padding-top: 272px;
	position: relative;
	z-index: 10;
}

#sec_culture-04 > .contents{
	background: #E0F0FF;
	border-radius: 10px;
	padding: 10px 0;
}
#sec_culture-04 .hd04{
	text-align: center;
	margin-top: -167px;
	padding-top: 62px;
	position: relative;
}
#sec_culture-04 .hd04::before{
	content: "";
	display: block;
	position: absolute;
	max-width: 902px;
	width: 95%;
	height: 586%;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background: #E0F0FF;
	border-radius: 50%;
}

#sec_culture-04 .hd04 span,
#sec_culture-04 .lead,
#sec_culture-04 figure{
	position: relative;
	z-index: 5;
}

#sec_culture-04 .en{
	font-size: 1.6rem;
	color: #025BB2;
	margin-bottom: 15px;
	display: inline-block;
}
#sec_culture-04 .lead{
	text-align: center;
}
#sec_culture-04 figure{
	margin-top: 25px;
	padding-left: 14px;
}

@media screen and (max-width: 1024px){
	#sec_culture-04 .hd04::before{
		height: 95vw;
	}
}
@media screen and (max-width: 768px){
	#sec_culture-04 > .contents{
		padding: 1px 15px 10px;
	}
	#sec_culture-04 figure{
		margin: 25px -15px -74px;
		margin-right: -42px;
		padding-left: 0;
	}
	#sec_culture-04 figure img{
		max-width: 402px;
		width: 100%;
	}
}
@media screen and (max-width: 767px){
	#sec_culture-04{
		padding-top: 40%;
	}
	#sec_culture-04 > .contents{
		padding-top: 0;
		width: 100%;
	}
	#sec_culture-04 .hd04{
		margin-top: -40px;
		padding-top: 0;
	}
	#sec_culture-04 .hd04::before{
		top: -55px;
		max-width: 312px;
		width: 100%;
		height: 338px;
	}
}
@media screen and (max-width: 374px){
	#sec_culture-04 .hd04{
		font-size: 2.2rem;
	}
}