@charset "UTF-8";

/* -------------------------------------
job
------------------------------------- */
.blk {
	padding-bottom:0;
}
#step1, #step2 {
	padding:0 55px 55px 55px;
	margin-bottom:210px;
	border-radius:25px;
	background-color:#fff;
	position:relative;
}
#step1::after, #step2::after {
	content:"";
	width:9px;
	height:102px;
	display:block;
	margin:0 auto;
	background:url(../imgs/job/bdr.png) no-repeat center center;
	background-size:100% 100%;
	position:absolute;
	top:calc(100% + 30px);
	left:0;
	right:0;
	z-index:1;
}

.step .no {
	font-size:12px;
	font-weight:bold;
	text-align:center;
	color:#fff;
	line-height:1.0;
	width:107px;
	height:107px;
	padding:17px 10px;
	margin:0 auto -43px auto;
	border:10px solid #fff;
	border-radius:50%;
	background-color:#003c96;
	position:relative;
	top:-53px;
}
.step .no span {
	font-size:39px;
	display:block;
}
.step .text {
	width:67%;
}
.step#step2 .text {
	margin-left:33%;
}
.step h2 {
	font-size:25px;
	font-weight:bold;
	color:#003c96;
	margin-bottom:8px;
}
#step1 #property, #step2 #point {
	margin-top:23px;
}
#step1 #property h3, #step2 #point h3 {
	font-size:0;
}
#step1 #property h3 span, #step2 #point h3 span {
	font-size:20px;
	font-weight:bold;
	color:#fff;
	line-height:1.0;
	letter-spacing:0.1em;
	display:inline-block;
	padding:6px 15px 4px 20px;
	position:relative;
}
#step1 #property h3 span {
	background-color:#003c96;
}
#step2 #point h3 span {
	background-color:#e60000;
}
#step1 #property h3 span::after, #step2 #point h3 span::after {
	content:"";
	width:24px;
	height:100%;
	position:absolute;
	top:0;
	right:-24px;
	z-index:1;
}
#step1 #property h3 span::after {
	background:linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #003c96 50.5%) no-repeat top left/100% 100%;
}
#step2 #point h3 span::after {
	background:linear-gradient(to bottom left, rgba(255,255,255,0) 50%, #e60000 50.5%) no-repeat top left/100% 100%;
}

#step1 #property .in {
	padding:15px 35% 15px 15px;
	border:3px solid #003c96;
	background-color:#e9f5fc;
	position:relative;
}
#step1 #property .in ul {
	margin-bottom:8px;
}
#step1 #property .in ul li {
	font-size:12px;
	line-height:1.8;
	width:50%;
	float:left;
}
.job2 #step1 #property .in ul li {
	width:100%;
	float:none;
}
#step1 #property .in p.cap {
	font-size:12px;
	font-weight:bold;
	color:#003c96;
	line-height:1.4;
	text-indent:-1em;
	padding-left:1em;
}
#step1 #property .in p#property_img {
	width:36.7%;
	position:absolute;
	bottom:13px;
	right:20px;
	z-index:1;
}
#step2 #point ul {
	font-size:12px;
	font-weight:bold;
	padding:20px 10px 20px 15px;
	border:3px solid #e60000;
	background-color:#fcece3;
}
#step2 #point ul li {
	line-height:1.8;
	text-indent:-1em;
	padding-left:1em;
}
#step2 #point ul li span {
	color:#e60000;
}
#step3 {
	margin-bottom:-42px;
	background:url(../imgs/job/bg_step3.jpg) no-repeat center center;
	background-size:cover;
	position:relative;
	z-index:-1;
}
#step3 .in {
	width:85.7%;
	margin:0 auto;
	background-color:#fff;
}
#step3 .in .page {
	padding-bottom:9.5%;
	position:relative;
}
.step#step3 .text {
	width:62%;
}
.step#step3 .text p:last-child {
	font-size:14px;
	font-weight:bold;
	color:#063b98;
	margin-top:30px;
}

.step figure {
	position:absolute;
	bottom:0;
	z-index:2;
}
.step#step1 figure {
	width:25.9%;
	right:4%;
}
.step#step2 figure {
	width:27.6%;
	left:3.5%;
}
.step#step3 figure {
	width:33%;
	right:2%;
}


@media screen and (max-width:1220px) {
	#step3 .in {
		width:1020px;
		padding:0 20px;
	}
	#step3 .in .page {
		width:100%;
	}
}
@media screen and (max-width:1100px) {
	#step3 .in  {
		width:calc(100% - 60px);
	}
	
}
@media screen and (max-width:1040px) {
	#step1, #step2 {
		padding:0 40px 40px 40px;
		margin-bottom:185px;
	}
	#step1::after, #step2::after {
		width:8px;
		height:90px;
		top:calc(100% + 25px);
	}
	.step .no {
		width:100px;
		height:100px;
		padding:17px 10px;
		margin:0 auto -40px auto;
		border:8px solid #fff;
		top:-50px;
	}
	.step .no span {
		font-size:34px;
		margin-top:2px;
	}
	.step h2 {
		font-size:23px;
	}
	
	
	#step1 #property h3 span, #step2 #point h3 span {
		font-size:18px;
		padding:6px 13px 3px 17px;
	}
	
	
	#step3 .in .page {
		padding-left:0;
		padding-right:0;
	}
	.step#step3 .text p:last-child {
		margin-top:27px;
	}
}
@media screen and (max-width:980px) {
	#step1 #property .in {
		padding:15px 33% 15px 15px;
	}
	#step1 #property .in p#property_img {
		right:15px;
	}
}
@media screen and (max-width:900px) {
	#step1 #property .in {
		padding:15px 40% 15px 15px;
	}
	#step1 #property .in ul li {
		width:100%;
		float:none;
	}
	#step1 #property .in p#property_img {
		top:50%;
		bottom:auto;
		transform:translateY(-50%);
	}
	
	
	.step#step3 .text p:last-child br {
		display:none;
	}
}
@media screen and (max-width:800px) {
	#step1 #property .in p.cap br {
		display:none;
	}
}
@media screen and (max-width:768px) {
	#step1, #step2 {
		padding:0 25px 25px 25px;
		margin-bottom:160px;
	}
	#step1::after, #step2::after {
		width:7px;
		height:75px;
		top:calc(100% + 20px);
	}
	.step .no {
		width:90px;
		height:90px;
		padding:16px 10px;
		margin:0 auto -35px auto;
		border:6px solid #fff;
		top:-45px;
	}
	.step .no span {
		font-size:30px;
	}
	.step h2 {
		font-size:20px;
	}
	
	
	#step1 #property h3 span, #step2 #point h3 span {
		font-size:17px;
		padding:5px 10px 5px 13px;
	}
	#step1 #property .in p#property_img {
		right:10px;
	}
	
	
	#step3 .in {
		width:calc(100% - 40px);
	}
	.step#step3 .text p:last-child {
		margin-top:23px;
	}
}
@media screen and (max-width:640px) {
	#maincap .cap br {
		display:none;
	}
	
	
	#step1, #step2 {
		padding:0 20px 0 20px;
		margin-bottom:120px;
	}
	#step1::after, #step2::after {
		width:4px;
		height:50px;
		top:calc(100% + 15px);
	}
	.step .no {
		width:86px;
		height:86px;
		padding:16px 10px;
		margin:0 auto -33px auto;
		border:5px solid #fff;
		top:-43px;
	}
	.step .no span {
		font-size:27px;
	}
	.step .text {
		width:100%;
		margin-bottom:25px;
	}
	.step#step2 .text {
		margin-left:0;
	}
	.step#step3 .text {
		width:100%;
	}
	.step h2 {
		font-size:19px;
	}
	
	
	#step1 #property h3 span, #step2 #point h3 span {
		font-size:16px;
		padding:6px 10px 5px 10px;
	}
	
	.step figure {
		margin:0 auto;
		position:static;
	}
	.step#step1 figure {
		width:140px;
	}
	.step#step2 figure {
		width:150px;
	}
	.step#step3 figure {
		width:180px;
	}
	
	
	#step3 .in .page {
		padding-bottom:2.9%;
	}
	.step#step3 .text p:last-child {
		margin-top:20px;
	}
}
@media screen and (max-width:480px) {
	.step .no {
		width:76px;
		height:76px;
		padding:13px 10px;
		margin:0 auto -25px auto;
		top:-38px;
	}
	.step .no span {
		font-size:25px;
	}
	.step h2 {
		font-size:17px;
	}
	
	
	#step1 #property .in {
		padding:15px;
	}
	
	#step1 #property h3 span, #step2 #point h3 span {
		font-size:15px;
		padding:7px 10px 3px 10px;
	}
	#step1 #property .in p#property_img {
		width:100%;
		margin:15px auto 0 auto;
		position:static;
		transform:translateY(0);
	}
	
	.step#step1 figure {
		width:125px;
	}
	.step#step2 figure {
		width:135px;
	}
	.step#step3 figure {
		width:160px;
	}
}
@media screen and (max-width:320px) {
	
}
@media screen and (min-width:769px) {
	
}