@charset "utf-8";
/* CSS Document */
#keyVisual{
	background: url("../img/keyvisual_pc.webp") no-repeat 4vw center / cover;
}

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

footer{
	margin-top: 0;
}
@media screen and (max-width: 1780px){
	#keyVisual{
		background-position: 66%;
	}
}
@media screen and (max-width: 1440px){
	#keyVisual{
		background-position: center;
	}
}
@media screen and (max-width: 1200px){
	.flexBox{
		flex-wrap: wrap;
	}
}
@media screen and (max-width: 820px){
	#keyVisual{
		background-position: 48% center;
	}
}
@media screen and (max-width: 767px){
	#keyVisual{
		background-image: url("../img/keyvisual_sp.webp");
		background-position: right center;
	}
}



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

/*  教育制度

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

#sec_education{
	padding: 0 0 220px;
}

#sec_education ul{
	flex-wrap: wrap;
	gap: 70px 32px;
}
	#sec_education ul > li{
		border: solid 2px var(--color-black);
		padding: 0 20px 20px;
		width: calc(100% / 2 - 16px);
	}

#sec_education .label{
	font-size: 2.8rem;
	background: var(--color-base);
	color: #fff;
	padding: 7px 20px;
	margin: -28px auto 20px;
	max-width: 350px;
	width: 100%;
	transform: skewX(164deg);
}
	#sec_education .label span{
		display: block;
		transform: skewX(-164deg);
	}

#sec_education .flexBox{
	align-items: center;
	flex-wrap: nowrap;
	gap: 20px;
}
	#sec_education .flexBox .figBox{
		max-width: 200px;
		width: 40%;
		aspect-ratio: 1/1;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
	}
	#sec_education .list1 .figBox{
		background-image: url(../img/img_education_01.webp);
	}
	#sec_education .list2 .figBox{
		background-image: url(../img/img_education_02.webp);
	}
	#sec_education .list3 .figBox{
		background-image: url(../img/img_education_03.webp);
	}
	#sec_education .list4 .figBox{
		background-image: url(../img/img_education_04.webp);
	}
	#sec_education .list5 .figBox{
		background-image: url(../img/img_education_05.webp);
	}
	#sec_education .list6 .figBox{
		background-image: url(../img/img_education_06.webp);
	}

#sec_education .flexBox .txtBox{
	text-align: left;
	line-height: 2;
	width: 60%;
}

@media screen and (max-width: 820px){
	#sec_education{
		padding-bottom: 120px;
	}
	#sec_education .ttl-sub{
		margin-bottom: 60px;
	}
	#sec_education ul{
		gap: 55px 32px;
	}
	#sec_education ul > li{
		width: 100%;
	}
	#sec_education .label{
		font-size: 2rem;
		margin: -22px auto 20px;
		max-width: 260px;
	}
	#sec_education .flexBox .txtBox{
		width: 70%;
	}
}



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

/*  福利厚生

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

#sec_benefies{
	background: #f0f0f0;
	padding: 80px 0 160px;
	position: relative;
}
	#sec_benefies::before{
		content: "";
		display: block;
		width: 100%;
		height: 120px;
		background: #f0f0f0;
		clip-path: polygon(0 100%, 100% 0, 100% 100%);
		position: absolute;
		bottom: 100%;
		left: 0;
	}

#sec_benefies ul{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 30px;
}

#sec_benefies .list li{
	border: solid 2px var(--color-black);
	background: #fff;
	position: relative;
	padding: 32px;
	width: calc(100% / 3 - 20px);
}

#sec_benefies .list .ttl{
	font-size: 2.8rem;
	font-weight: 700;
	color: var(--color-base);
}
	#sec_benefies .list .ttl::before{
			content: "";
			display: block;
			width: 160px;
			height: 160px;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			margin: 0 auto 25px;
		}
		#sec_benefies .list .list1 .ttl::before{
			background-image: url("../img/icon_benefies_01.webp");
		}
		#sec_benefies .list .list2 .ttl::before{
			background-image: url("../img/icon_benefies_02.webp");
		}
		#sec_benefies .list .list3 .ttl::before{
			background-image: url("../img/icon_benefies_03.webp");
		}
		#sec_benefies .list .list4 .ttl::before{
			background-image: url("../img/icon_benefies_04.webp");
		}
		#sec_benefies .list .list5 .ttl::before{
			background-image: url("../img/icon_benefies_05.webp");
		}
		#sec_benefies .list .list6 .ttl::before{
			background-image: url("../img/icon_benefies_06.webp");
		}
		#sec_benefies .list .list7 .ttl::before{
			background-image: url("../img/icon_benefies_07.webp");
		}
		#sec_benefies .list .list8 .ttl::before{
			background-image: url("../img/icon_benefies_08.webp");
		}
		#sec_benefies .list .list9 .ttl::before{
			background-image: url("../img/icon_benefies_09.webp");
		}

#sec_benefies .list p{
	margin-top: 20px;
	text-align: left;
	line-height: 1.875;
}

@media screen and (max-width: 1024px){
	#sec_benefies ul{
		gap: 20px;
	}
	#sec_benefies .list li{
		width: calc(100% / 2 - 10px);
	}
}
@media screen and (max-width: 820px){
	#sec_benefies{
		padding: 50px 0 80px;
	}
	#sec_benefies::before{
		height: 40px;
	}
	#sec_benefies .list .ttl{
		font-size: 2rem;
	}
}
@media screen and (max-width: 767px){
	#sec_benefies .list li{
		padding: 22px;
        margin: 0 auto;
		max-width: 320px;
		width: 100%;
	}
	#sec_benefies .list .ttl::before{
		width: 110px;
		height: 110px;
		margin: 0 auto 15px;
	}
	#sec_benefies .list p{
		margin-top: 10px;
	}
}