@charset "UTF-8";

/* upper */
.second-bg::after {
	background-image: url(../../../recruit/img/recruit_main.jpg);
}

/* requirements */
.requirements {
	background: var(--gray);
	padding-bottom: 109px;
}
.requirements-list {
	width: 835px;
	margin: 0 auto;
}
.requirements table {
	width: 100%;
}
.requirements table th,
.requirements table td {
	padding: 15px 0.5em;
	border-bottom: var(--border);
}
.requirements table th {
	width: 132px;
	color: #5b5b5b;
	font-weight: normal;
}
.requirements table td {
	width: calc(100% - 132px);
}

@media screen and (max-width: 950px) {
	.requirements-list {
		width: 94%;
	}
}

/* entry flow */
.entry-flow {
	background: #fff;
	overflow: hidden;
	position: relative;
	z-index: 0;
}
.entry-flow::before {
	content: "";
	position: absolute;
	width: 32%;
	height: 1500px;
	background: #73c7f3;
	bottom: 0;
	right: -6%;
	transform: rotate(-45deg);
	z-index: -1;
}
.flow {
	font-size: 2rem;
	font-weight: bold;
	margin: 0 auto;
	padding-top: 10px;
	padding-bottom: 30px;
	width: 80%;
	position: relative;
	z-index: 0;
}
.flow::before {
	content: "";
	position: absolute;
	width: 32%;
	max-width: 389px;
	min-width: 334px;
	height: 1500px;
	background: var(--blue);
	top: -340px;
	left: -21%;
	transform: rotate(-45deg);
	z-index: -1;
}
.flow li {
	margin: 40px 0;
	min-width: 830px;
}
.flow li::before {
	content: "";
	display: inline-block;
	background: url(../../../recruit/img/step01.png) no-repeat center / contain;
	width: 87px;
	height: 80px;
	vertical-align: middle;
	margin-top: -18px;
	margin-right: 36px;
}
.flow li:nth-of-type(1)::before {
	width: 74px;
	height: 79px;
}
.flow li:nth-of-type(2) {
	margin-left: 102px;
}
.flow li:nth-of-type(2)::before {
	background-image: url(../../../recruit/img/step02.png);
}
.flow li:nth-of-type(3) {
	margin-left: 204px;
}
.flow li:nth-of-type(3)::before {
	background-image: url(../../../recruit/img/step03.png);
}
.flow li:nth-of-type(4) {
	margin-left: 306px;
}
.flow li:nth-of-type(4)::before {
	background-image: url(../../../recruit/img/step04.png);
}
.flow .txt-small {
	font-weight: normal;
	font-size: 1.6rem;
	display: inline-block;
	padding-left: 39px;
}

@media screen and (max-width: 950px) {
	.entry-flow::before {
		right: -21%;
	}
	.flow {
		width: 94%;
		padding-bottom: 90px;
	}
	.flow::before {
		left: -61%;
	}
	.flow li:nth-of-type(2),
	.flow li:nth-of-type(3),
	.flow li:nth-of-type(4) {
		margin-left: 0;
	}
	.flow .txt-small {
		display: block;
		padding-left: 123px;
	}
}