@charset "utf-8";




/* ------------------------------------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------------------------------------ */
@media screen and (max-width: 999px) {
	.workflow__introduction {
		padding: 60px 0 20px;
	}
	
	.industry {
		background: #23a5de url(/recruit/_assets/img/work_flow/img-01.png) no-repeat right top / 100% auto;
	}
	
	.flow__inner {
		padding: 40px 40px 0;
	}
	
	
	.flow__corner {
		margin: 0 0 100px;
		padding: 25px 240px 0 0;
	}
	
	.flow__corner:before {
		font-size: 3rem;
		width: 60px;
		height: 60px;
		padding: 14px 3px 0 0;
	}
	
	.flow__corner figure {
		max-width: 200px;
		top: -10px;
		right: 10px;
	}
	
	.flow__corner h4 {
		font-size: 1.8rem;
		white-space: nowrap;
		margin: 0 0 20px -40px;
		padding: 15px 20px 15px 120px;
	}
	
	.flow .kyoeiman-comment {
		max-width: 100%;
		margin: -60px 0 100px 25%;
		transform: translateX(50px);
	}
	
	.kyoeiman-comment p {
		width: 100%;
		max-width: 100%;
	}
	
	.flow__corner.is-finish {
		margin: 0 -40px;
		padding: 65px 280px 40px 40px;
	}
	
	.flow__corner.is-finish:before {
		top: 40px;
		left: 40px;
	}
	
	.flow__corner.is-finish:after {
		width: calc(100% - 80px);
		top: 40px;
		left: 40px;
	}
	
	.flow__corner.is-finish figure {
		top: 30px;
		right: 50px;
	}
	
	.kyoeiman-comment.is-SEIZA {
		margin: -10px 0 0 50%;
		transform: translateX(-20px);
	}
	
	
	
	
} /* END RESPONSIVE 999px */




@media screen and (max-width: 767px) {
	.workflow__introduction {
		padding: 80px 0 10px;
	}
	
	.workflow__introduction h3 {
		font-size: 2.6rem;
	}
	
	.workflow__introduction p {
		font-size: 1.4rem;
		letter-spacing: .1em;
	}
	
	.industry {
		background: #23a5de url(/recruit/_assets/img/work_flow/img-01.png) no-repeat right 0 top 50px / 100% auto;
	}
	
	.industry p {
		font-size: 1.6rem;
	}
	
	.flow {
		padding: 0;
	}
	
	.flow__inner {
		padding: 20px 20px 0;
	}
	
	.flow__corner {
		margin: 0 0 100px;
		padding: 25px 0 0 0;
	}
	
	.flow__corner:before {
		font-size: 2.4rem;
		width: 50px;
		height: 50px;
		padding: 11px 3px 0 0;
	}
	
	.flow__corner h4 {
		font-size: 1.6rem;
		padding: 15px 20px 15px 105px;
	}
	
	.flow__corner p small {
		font-size: 1.2rem;
		line-height: 1.5;
	}
	
	.flow__corner .implement p {
		font-size: 1.4rem;
		line-height: 1.75;
	}
	
	.flow__corner figure {
		max-width: 100%;
		margin: 30px 0 0;
		padding: 100% 0 0;
		position: relative;
		top: auto;
		right: auto;
		overflow: hidden;
	}
	
	.flow__corner figure img {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	
	.flow .kyoeiman-comment {
		max-width: 100%;
		margin: -60px 0 60px 25%;
		transform: translateX(35px);
	}
	
	.flow__corner.is-finish {
		margin: 0 -20px;
		padding: 45px 20px 20px 20px;
	}
	
	.flow__corner.is-finish:before {
		top: 20px;
		left: 20px;
	}
	
	.flow__corner.is-finish:after {
		width: calc(100% - 40px);
		top: 20px;
		left: 20px;
	}
	
	.flow__corner.is-finish h4 {
		margin: 0 0 20px -20px;
	}
	
	.flow__corner.is-finish figure {
		top: auto;
		right: auto;
	}
	
	.kyoeiman-comment.is-SEIZA {
		max-width: 100%;
		margin: -10px 0 60px 25%;
		transform: translateX(10px);
	}
	
	
	
	
} /* END RESPONSIVE 767px */




@media screen and (max-width:374px) {
	
	
	
	
} /* END RESPONSIVE 374px */




@media print {
} /* END PRINT */