@charset "utf-8";
/* CSS Document */
/*============================
#contents__index
============================*/
#contents__index .nav-contents {
	padding: 82px 0 120px;
}
#contents__index .nav-contents li {
	margin: 0 20px;
	height: 322px;
	opacity: 1;
}
#contents__index .nav-contents li:nth-child(even) {
	float: right;
}
#contents__index .nav-contents h2, #contents__index .nav-contents p {
	padding: 0 30px 0;
}
#contents__index .nav-contents h2 {
	font-size: 1.375em;
	line-height: 1.364;
	padding-top: 12px;
	padding-bottom: 4px;
	margin-left: -4px;
}
#contents__index .nav-contents p {
	font-size: 0.875em;
	line-height: 1.429;
}
#index #bg-main {
	background: #000;
}
/*============================
#header
============================*/
#header {
	height: 170px;
	background: #000 url(/recruit/fresh/business/assets/img/flow/img_flow_main.jpg) no-repeat;
	position: relative;
	background-size: cover;
}
#header h1 {
	position: relative;
	z-index: 1;
}
#header .bg-main {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 170px;
	overflow: hidden;
}
#header .bg-main span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#header .bg-main img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
}
/*============================
#contents__flow
============================*/
#contents__flow .flow-chart {
	background: #f2f2f2;
	padding: 65px 0 66px;
}
#contents__flow .flow-chart ol, #contents__flow .box-step {
	max-width: 800px;
	margin: 0 auto;
}
#contents__flow .flow-chart li {
	background: #a9a9a9;
	float: left;
	color: #fff;
	text-align: center;
	width: 108px;
	height: 108px;
	line-height: 108px;
	position: relative;
	margin: 0 0 0 65px;
}
#contents__flow .flow-chart .txt-step {
	position: absolute;
	width: auto;
	top: 0;
	left: 0;
	margin: 9px 0 0 10px;
}
#contents__flow .flow-chart li:after {
	content: "\e900";
	font-family: icon;
	color: #ca0114;
	position: absolute;
	top: 1px;
	left: 126px;
	font-size: 0.7em;
}
#contents__flow .flow-chart li:last-child:after {
	content: "";
}
#contents__flow .flow-chart li:first-child {
	margin-left: 0;
}
#contents__flow .box-step {
	clear: both;
	padding: 66px 0 63px;
}
#contents__flow .box-step.lay-last {
	padding-bottom: 180px;
}
#contents__flow .box-step h2 {
	background: #a9a9a9;
	color: #fff;
	width: 130px;
	height: 130px;
	line-height: 130px;
	text-align: center;
	position: relative;
	font-size: 1.25em;
	letter-spacing: 0.06em;
	float: left;
}
#contents__flow .box-step h2 .txt-step {
	position: absolute;
	top: 0;
	left: 0;
	margin: 10px 0 0 9px;
}
#contents__flow .box-step h3, #contents__flow .box-step p {
	padding: 0 0 0 166px;
}
#contents__flow .box-step h3 {
	color: #ca0114;
	font-size: 1.25em;
	line-height: 1.2;
	padding-bottom: 0.6em;
}
#contents__flow .box-step p {
	font-size: 0.875em;
	line-height: 1.715;
}
#contents__flow .img-step {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 200px;
}
#contents__flow .img-step span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#contents__flow .img-step img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%, -50%);
	min-width: 1200px;
}

@media screen and (max-width: 767px) {
	/*============================
	#contents__index
	============================*/
	#contents__index > .inner {
		max-width: 100%;
	}
	#contents__index .nav-contents {
		width: 91.2%;
		margin: 0 auto;
		padding: 7.3% 0 4.7%;
		padding-bottom: 17.7%;
	}
	#contents__index .nav-contents li {
		float: none;
		width: 100%;
		margin: 0 0 3.5%;
		height: auto;
	}
	#contents__index .nav-contents img {
		width: 100%;
		height: auto;
	}
	#contents__index .nav-contents h2,  #contents__index .nav-contents p {
		padding: 0 6% 0;
		margin: 0;
	}
	#contents__index .nav-contents h2 {
		font-size: 1.191em;
		line-height: 1.294;
		padding-top: 3.5%;
		padding-bottom: 1.9%;
	}
	#contents__index .nav-contents p {
		font-size: 0.771em;
		line-height: 1.635;
		padding-bottom: 5.4%;
	}
	/*============================
		#header
		============================*/
	#header {
		height: 0;
		background: url(/recruit/fresh/business/assets/img/flow/img_flow_main_sp.jpg) center 0;
		background-size: cover;
		padding-bottom: 33.33%;
	}
	/*============================
		#contents__flow
		============================*/
	#contents__flow .flow-chart {
		padding: 6.7% 0 0;
	}
	#contents__flow .flow-chart ol,  #contents__flow .box-step {
		width: 86.667%;
	}
	#contents__flow .flow-chart li {
		width: 100%;
		margin: 0 0 7.7%;
		font-size: 0.96em;
		line-height: 3em;
		height: 3em;
		letter-spacing: 0.2em;
		text-indent: 0.2em;
	}
	#contents__flow .flow-chart .txt-step {
		width: 14%;
		height: auto;
		margin: 5% 0 0 5.4%;
	}
	#contents__flow .flow-chart li:after {
		transform: rotate(90deg);
		font-size: 0.4em;
		top: 115.8%;
		left: 46.7%;
		line-height: 1;
		transform-origin: 50% 100%;
		display: block;
	}
	#contents__flow .box-step {
		padding: 6.5% 0 5.3%;
	}
	#contents__flow .box-step.lay-last {
		padding-bottom: 8.4%;
	}
	#contents__flow .box-step h2 {
		width: 24.616%;
		height: 0;
		padding-bottom: 24.616%;
		font-size: 0.832em;
		line-height: 6.149;
	}
	#contents__flow .box-step h3 {
		font-size: 1.216em;
		line-height: 1.368;
		position: relative;
		height: 0;
		padding: 0 0 24.616%;
	}
	#contents__flow .box-step h2 .txt-step {
		width: 42%;
		height: auto;
		margin: 7.5% 0 0 6.2%;
	}
	#contents__flow .box-step h3 span {
		position: absolute;
		top: 50%;
		display: block;
		transform: translateY(-50%);
		left: 30.4%;
	}
	#contents__flow .box-step p {
		font-size: 0.896em;
		padding: 5.8% 0 0;
		text-align: justify;
	}
	#contents__flow .img-step {
		height: 0;
		padding-bottom: 20%;
	}
	#contents__flow .img-step img {
		min-width: 0;
		height: 150%;
		width: auto;
	}
}

@media print {
	#contents__flow .img-step > span {
		transform: matrix(1, 0, 0, 1, 0, 0) !important;
	}
}