@charset "utf-8";




.next-contents {
	margin: 0;
	padding: 40px 0 30px;
}




/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.workflow__introduction {
	text-align: center;
	padding: 60px 0;
}

.workflow__introduction h3 {
	color: #000;
	font-size: 3rem;
	margin: 0 0 30px;
}

.workflow__introduction p {
	color: #000;
	font-weight: 700;
	line-height: 2.5;
	letter-spacing: .2em;
	margin: 0 0 30px;
}




/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.industry {
	color: #fff;
	padding: 200px 0 100px;
	background: #23a5de url("/recruit/_assets/img/work_flow/img-01.png") no-repeat right center / auto 100%;
	position: relative;
}

.industry:before,
.industry:after {
	content: '';
	width: 100%;
	min-height: 140px;
	padding: 10% 0 0;
	background: url(/recruit/_assets/img/global/triangle-white.svg) no-repeat center / cover;
	position: absolute;
	top: -1px;
	left: 0;
	transform: rotate(180deg);
	z-index: 10;
}

@media all and (-ms-high-contrast:none){
	.industry:before,
	.industry:after {
		padding: 8.75% 0 0;
	}
}

.industry:after {
	top: auto;
	bottom: -1px;
	transform: rotate(0);
}

.industry .u-title-mid {
	color: #fff;
	border-bottom-color: #fff;
}

.industry p {
	font-size: 1.9rem;
}




/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flow {
	padding: 80px 0 0;
}

.flow__inner {
	margin: 30px 0 0;
	padding: 60px 60px 0;
	background: #f1f1f1;
}

.flow__corner {
	color: #000;
	margin: 0 0 140px;
	padding: 40px 300px 0 0;
	position: relative;
}

.flow__corner:before {
	content: attr(data)'';
	color: #fff;
	font-family: Oswald, sans-serif !important;
	font-size: 4rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	text-align: center;
	width: 80px;
	height: 80px;
	padding: 16px 5px 0 0;
	background: linear-gradient(-5deg, rgba(31,148,199,1) 49%, rgba(35,165,222,1) 50%);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

.flow__corner:after {
	content: '';
	width: 100%;
	height: 3px;
	background: #cdcdcd;
	position: absolute;
	top: 0;
	left: 0;
}

.flow__corner h4 {
	font-size: 2.2rem;
	margin: 0 0 30px -60px;
	padding: 15px 20px 15px 165px;
	display: inline-block;
	background: #fff;
}

.flow__corner p small {
	font-size: 1.4rem;
	line-height: 1.75;
}

.flow__corner figure {
	max-width: 240px;
	position: absolute;
	top: -30px;
	right: 30px;
	z-index: 20;
}

.flow__corner .implement h5 {
	color: #fff;
	line-height: 1;
	margin: 0 0 7px;
	padding: 7px 20px;
	background: #919191;
	border-radius: 10em;
	display: inline-block;
}

.flow__corner .implement p {
	line-height: 1.5;
}

.flow .kyoeiman-comment {
	max-width: calc(50% + 80px);
	margin: -80px 0 120px 50%;
	transform: translateX(80px);
}

.flow__corner.is-finish {
	color: #fff;
	margin: 0 -60px;
	padding: 100px 360px 60px 60px;
	background: #23a5de;
}

.flow__corner.is-finish h4 {
	background: #39b5eb;
}

.flow__corner.is-finish:before {
	color: #23a5de;
	background: linear-gradient(-5deg, rgba(229,229,229,1) 49%, rgba(255,255,255,1) 50%);
	top: 60px;
	left: 60px;
}

.flow__corner.is-finish:after {
	background: #1e8cbd;
	width: calc(100% - 120px);
	top: 60px;
	left: 60px;
}

.flow__corner.is-finish figure {
	top: 30px;
	right: 90px
}

.flow__corner.is-finish .implement h5 {
	background: #39b5eb;
}

.kyoeiman-comment.is-SEIZA {
	margin: -90px 0 30px 50%;
	transform: translateX(-20px);
}