@charset "utf-8";

#training {
	padding: 4rem 2rem 0;
	/* background: var(--white); */
}

#training .recruitinfo_flow {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 0;
	align-items: stretch;
}

.recruitinfo_flow .h6-title {
	margin: 0 10px 10px;
	border-bottom: 1px solid var(--gray);
	padding: 0 0 10px;
	font-weight: 600;
}

#training .recruitinfo_flow ol {
	counter-reset: 0;
}
#training .recruitinfo_flow li {
	counter-increment: counter;
	background: var(--white);
	color: var(--black);
	text-align: center;
	padding: 30px 0 20px;
	border-radius: 5px;
	margin: 0 0 10px;
	font-size: var(--font-em);
	display: block;
	align-items: center;
	justify-content: center;
	/* height: 100px; */
	position: relative;
}

#training .recruitinfo_flow li:before {
	content: counter(counter);
	font-family: "Open Sans", sans-serif;
	position: absolute;
	top: -12px;
	left: 0;
	margin: auto;
	font-size: var(--font-h5);
	font-style: italic;
	right: 0;
	font-weight: 600;
}

.curriculum {
	/* background: var(--white); */
	/* border-radius: 10px; */
}
.curriculum ol{
	padding: 30px 20px;
}
.curriculum li{
	display: grid;
	grid-template-columns: 30% 65%;
	gap: 15px;
	justify-content: space-between;
	margin: 0 0 15px;
	align-items: center;
}
.curriculum figure{
	width: 100%;
	height: 100px;
	background: #111;
}

.flow li {
	display: grid;
	grid-template-columns: 30% 70%;
	gap: 0;
	justify-content: space-between;
}

.flow li .tab {
	background: #c9c9c9;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.flow li .tab:before {
	content:"";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-top: 15px solid #c9c9c9;
	border-bottom: 0;
	position: absolute;
	top: 0;
}

.flow li:nth-child(2) .tab {
	background:#b4b4b4;
}
.flow li:nth-child(2) .tab:before {
	/* border-top: 15px solid #b4b4b4; */
}
.flow li:nth-child(3) .tab {
	background:#9f9f9f;	
}
.flow li:nth-child(3) .tab:before {
	border-top: 15px solid #b4b4b4;
}
.flow li:nth-child(4) .tab {
	background:#7f7f7f;
}
.flow li:nth-child(4) .tab:before {
	border-top: 15px solid #9f9f9f;
}
.flow li:last-child .tab {
	background:#555555;
}
.flow li:last-child .tab:before {
	border-top: 15px solid #7f7f7f;
}


.flow li .cont {
	padding: 10px 0 10px 10px;
	border-bottom: 1px solid var(--gray);
	
}
.flow li:first-child .cont {
	border-top: 1px solid var(--gray);
}

#flow {
	padding: 2px 2rem;
	margin: 0 -2rem;
	background: var(--white);
}