/* --------------------------------------------------------------------------------------
   PC
--------------------------------------------------------------------------------------- */

.key {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 114% auto;
	height: 600px;
}

.key-inner {
	background: url(../img/career_change/key_bg.png) no-repeat left top;
	height: 600px;
}

.key-inner h2 { padding-top: 17%; }

.key-inner p {
	background-color: #fff;
	line-height: 2.0;
	margin-top: 3%;
	padding: 2% 3%;
	width: 46%;
	position: relative;
	z-index: 15;
}

.sub-ttl {
	background: url(../img/career_change/line01.png) no-repeat left top;
	margin-top: -8.5%;
	padding: 17% 0;
	text-align: center;
	position: relative;
	z-index: 10;
}

.sub-ttl img {
	border-bottom: 2px solid #fff;
	padding-bottom: 10px;
}

.career-list { margin-top: -9%; }

.career-list .section {
	background-position: center 45%;
	background-repeat: no-repeat;
	background-size: 126% auto;
	position: relative;
	margin-top: -12%;
}

.career-list .section .s-inner { padding-top: 18.5%; }

.career-list .section .wrap { height: 733px; }

.career-list .section .detail {
	background-color: #fff;
	line-height: 2.0;
	margin-top: 0%;
	padding: 4% 6%;
	width: 48%;
	position: relative;
	z-index: 20;
	min-height: 353px;
}

.career-list .section .detail h2 {
	border-bottom: 3px solid #0eb8f1;
	padding-bottom: 15px;
}

.career-list .section .detail h2 span {
	display: inline-block;
	color: #10b7f2;
	vertical-align: bottom;
	line-height: 0.7;
	font-weight: bold;
	font-size: 418%;
	margin-left: 2%;
}

.career-list .section .detail h3 {
	color: #0eb8f1;
	font-size: 245%;
	font-weight: bold;
	line-height: 1.3;
	margin-top: 4%;
}

.career-list .section .detail h4 {
	font-size: 182%;
	font-weight: bold;
	line-height: 1.5;
	margin-top: 4%;
}

.career-list .section .banner {
	padding-top: 37%;
	position: relative;
	z-index: 10;
}

.career-list .section .banner a {
	background: #0f8fba url(../img/career_change/arrow.png) no-repeat center 89%;
	width: 316px;
	height: 316px;
	border-radius: 158px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
}

.career-list .section:nth-child(odd) .s-inner { background: url(../img/career_change/line03.png) no-repeat right top; }
.career-list .section:nth-child(2n) .s-inner { background: url(../img/career_change/line02.png) no-repeat left top; }


.career-list .section:nth-child(2n) .detail { float: left; }
.career-list .section:nth-child(odd) .detail { float: right; }

.career-list .section:nth-child(odd) .banner { float: left; }
.career-list .section:nth-child(2n) .banner { float: right; }

.career-list .section:first-child .s-inner { background: none; }

.career-list .section:first-child .detail { margin-top: -3%; }

.career-list .section:first-child { margin-top: -20%; }


@media(min-width: 1600px) {
	
	.sub-ttl {
		background-size: 100% auto !important;
		background-position: center center;
		margin-top: -10%;
	}
	
	.career-list .section:nth-child(2n) .s-inner {
		background-size: 100% auto !important;
		background-position: center top;
	}
}


/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media(max-width:1024px) and (min-width: 767px) {
	
	.key {
		background-position: 65% top;
		background-size: 207% auto;
		height: auto;
	}
	
	.key-inner {
		background-position: 312% top;
		height: auto;
		padding-bottom: 10%;
	}
	
	.key-inner h2 {
		padding-top: 21%;
		width: 32%;
		margin-left: 10%;
	}
	
	.key-inner h2 img {
		width: 100%;
		height: auto;
	}
	
	.key-inner p {
		width: 29%;
		margin-left: 11%;
		font-size: 80%;
		line-height: 1.8;
		margin-top: 4%;
	}
	
	.sub-ttl {
		background-size: 100% auto;
		margin-top: -8%;
		padding: 12% 0;
	}
	
	.career-list .section .wrap { height: auto; }
	
	.career-list .section {
		background-size: 143% auto;
		background-position: 52% 18%;
		margin-top: -36%;
	}
	
	.career-list .section .s-inner { padding-top: 100%; }
	
	.career-list .section:first-child .detail { margin-top: -91%; }
	
	
	.career-list .section .detail {
		min-height: inherit;
		padding: 3% 4%;
		width: 45%;
		margin-right: 3%;
	}
	
	.career-list .section .detail img:nth-child(1) {
		width: 22%;
		height: auto;
		vertical-align: bottom;
	}
	
	.career-list .section:first-child { margin-top: -14%; }
	
	.career-list .section .detail h2 span {
		font-size: 390%;
		line-height: 0.6;
	}
	
	.career-list .section .detail h3 { font-size: 155%; }
	
	.career-list .section .detail h4 { font-size: 120% }
	
	.career-list .section .banner {
		padding-top: 0;
		margin-left: 10%;
		margin-top: -53%;
	}
	
	.career-list .section:nth-child(2n) .banner { margin-right: 10%; }
	
	.career-list .section .banner a {
		width: 200px;
		height: 200px;
		border-radius: 100px;
	}
	
	.career-list .section .banner a img {
		width: 77%;
		height: auto;
	}
	
	.career-list .section:nth-child(odd) .s-inner,
	.career-list .section:nth-child(2n) .s-inner { background-size: 100% auto; }
	
	.career-list .section:nth-child(odd) .detail { margin-top: -87%; }
	
	.career-list .section:nth-child(2n) .detail {
		margin-left: 5%;
		margin-top: -87%;
	}
	
	
	#footer { margin-top: -29%; }
}

/* --------------------------------------------------------------------------------------
  スマホ用
--------------------------------------------------------------------------------------- */

@media(max-width: 766px) {
	.key {
		background-position: 83% 26%;
		background-size: 180% auto;
		height: auto;
	}
	
	.key-inner {
		background: url(../img/career_change/sp_key_bg.png) no-repeat left top;
		background-position: left top;
		height: auto;
		padding-bottom: 10%;
		background-size: 100% auto;
	}
	
	.key-inner .wrap { padding-top: 88%; }
	
	.key-inner .wrap div {
		background-color: #48c3d0;
		padding-bottom: 15%;
	}
	
	.key-inner h2 {
		padding-top: 8%;
		width: 64%;
		margin-left: 15%;
		margin-bottom: 4%;
	}
	
	.key-inner h2 img {
		width: 100%;
		height: auto;
	}
	
	.key-inner p {
		background: none;
		width: 78%;
		font-size: 80%;
		line-height: 1.8;
		margin-top: 0;
		color: #fff;
		padding: 0;
		margin-left: 15%;
	}
	
	.sub-ttl {
		background-size: 100% auto;
		margin-top: -23%;
		padding: 12% 19%;
	}
	
	.career-list .section .wrap {
		height: auto;
		padding-top: 83%;
	}
	
	.career-list .section {
		background-size: 213% auto;
		background-position: 10% 7%;
		margin-top: 6%;
	}
	
	.career-list .section:nth-child(2n) { background-position: 89% 4%; }
	
	.career-list .section .s-inner { padding-top: 0; }
	
	.career-list .section:first-child .detail { margin-top: 0; }
	
	
	.career-list .section .detail {
		min-height: inherit;
		padding: 6% 10% 3%;
		width: auto;
		margin: 0 5%;
	}
	
	.career-list .section .detail img:nth-child(1) {
		width: 22%;
		height: auto;
		vertical-align: bottom;
	}
	
	.career-list .section:first-child { margin-top: -17%; }
	
	.career-list .section .detail h2 span {
		font-size: 200%;
		line-height: 0.6;
	}
	
	.career-list .section .detail h3 { font-size: 144%; }
	
	.career-list .section .detail h4 { font-size: 85%; }
	
	.career-list .section .banner {
		padding-top: 0;
		margin: 3% auto 0;
		text-align: center;
	}
	
	.career-list .section:nth-child(odd) .banner { float: none; }
	.career-list .section:nth-child(2n) .banner {
		margin-right: 0;
		float: none;
	}
	
	.career-list .section .banner a {
		background-size: 10% auto;
		width: 150px;
		height: 150px;
		border-radius: 75px;
		margin: 0 auto;
	}
	
	.career-list .section .banner a img {
		width: 77%;
		height: auto;
	}
	
	.career-list .section:nth-child(odd) .s-inner,
	.career-list .section:nth-child(2n) .s-inner { background-size: 100% auto; }
	
	.career-list .section:nth-child(odd) .detail {
		margin-top: -4%;
		float: none;
	}
	
	.career-list .section:nth-child(2n) .detail {
		margin-top: 0;
		float: none;
	}
	
	
	#footer { margin-top: 10%; }
}