@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


img {
	max-width: 100%;
}

/* PC */
@media screen and (min-width: 769px), print {


#mainTitle {
	background: url("/recruit/w-nexco/special/img/manga/mainimg.jpg") no-repeat center;
	background-size: cover;
	height: 350px;
	color: #fff;
	font-weight: bold;
	position: relative;
	z-index: 0;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}
	#mainTitle h1{
		font-weight: bold;
		color: #fff;
		font-size: 28px;
		letter-spacing: 0.2em;
		margin-top: 5px;
		line-height: 1.5;
		margin-bottom: 100px;
	} 


/* wrapper
--------------------- */
#wrapper {
	background-color: #efefef;
}
	#wrapper .content {
		transform: translateY(-100px);
		width: 962px;
		margin: 0 auto;
	}
		#wrapper .content .top_area {
			position: relative;
			text-align: center;
			background-color: #fff;
			padding-top: 50px;
			padding-bottom: 80px;
		}
			#wrapper .content .top_area:before{
				content: '';
				display: block;
				position: absolute;
				width: 924px;
				height: 76px;
				top: 0;
				left: 0;
				right: 0;
				margin: 0 auto;		
				background: url("/recruit/w-nexco/special/img/manga/bg_tit.png") no-repeat center;
				background-size: cover;
			}
			#wrapper .content .top_area .sub_tit {
			}
				#wrapper .content .top_area .sub_tit div {
					color: rgba(0, 159, 232, 0.14);
					font-size: 104px;
					letter-spacing: 10px;
					line-height: 79px;
				}
				#wrapper .content .top_area .sub_tit p {
					transform: translateY(-10px);
					font-weight: bold;
					font-size: 17px;
					letter-spacing: 4px;
				}
				#wrapper .content .top_area .sub_tit h3 {
					color: #009de6;
					font-size: 30px;
				}
			#wrapper .content .top_area .lead {
				margin-top: 40px;
				display: flex;
				justify-content: space-between;
				padding: 0 90px;
			}
				#wrapper .content .top_area .lead div {
					width: 220px;
				}
					#wrapper .content .top_area .lead div img {
						border: solid 1px #ddd;
					}
				#wrapper .content .top_area .lead p {
					width: 520px;
					text-align: left;
					letter-spacing: 1px;
					line-height: 2.28;
					text-align: justify
				}

		#wrapper .content .manga_area {
		}
			#wrapper .content .manga_area ul {
			}
				#wrapper .content .manga_area ul li {
					margin-top: 80px;
				}
				#wrapper .content .manga_area ul li + li {
				}
	
			.btn {
				margin: 60px auto 0;
				width: 420px;
			}
				.btn a {
					color: #fff;
					font-size: 16px;
					display: block;
					background-color: #000;
					position: relative;
					padding: 12px 20px;
					box-sizing: border-box;
				}
				.btn a::before ,
				.btn a::after {
					position: absolute;
					content: "";
				}
				.btn a::before {
					top: 0;
					bottom: 0;
					right: 16px;
					margin: auto;
					width: 28px;
					height: 5px;
					border-right: solid 1px #fff;
					border-bottom: solid 1px #fff;
					transform: skew(45deg);
					transition: 0.3s;
				}
				.btn a:hover::before {
					right: 10px;
				}
				.btn a::after {
					top: 0;
					right: 42px;
					height: calc(100% - 20px);
					border-right: solid 3px #0078d2;
					transform: skew(135deg);
				}

	
}


/* スマホ */
@media only screen and (max-width: 768px) {


	#mainTitle h2.detail {
		font-size: 24px;
	}

		#mainTitle {
			background: url("/recruit/w-nexco/special/img/manga/mainimg_sp.jpg") no-repeat center;
			background-size: cover;
			height: 240px;
			color: #fff;
			font-weight: bold;
			position: relative;
			z-index: 0;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;
		}
	#mainTitle h1{
		font-weight: bold;
		color: #fff;
		font-size: 21px;
		letter-spacing: 0.2em;
		margin-top: 10px;
		line-height: 1.5;
		margin-bottom: 50px;
	} 

/* wrapper
--------------------- */
#wrapper {
	background-color: #efefef;
}
	#wrapper .content {
		transform: translateY(-50px);
		margin: 0 auto;
	}
		#wrapper .content .top_area {
			position: relative;
			text-align: center;
			background-color: #fff;
			padding-bottom: 40px;
			padding-top: 30px;
		}
			#wrapper .content .top_area:before{
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 13vw;
				top: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				background: url("/recruit/w-nexco/special/img/manga/bg_tit.png") no-repeat top center;
				background-size: 100% auto;
			}
			#wrapper .content .top_area .sub_tit {
			}
				#wrapper .content .top_area .sub_tit div {
					color: rgba(0, 159, 232, 0.14);
					font-size: 40px;
					letter-spacing: 2px;
					line-height: 79px;
				}
				#wrapper .content .top_area .sub_tit p {
					font-weight: bold;
					font-size: 16px;
					letter-spacing: 2px;
				}
				#wrapper .content .top_area .sub_tit h3 {
					color: #009de6;
					font-size: 19px;
					margin-top: 10px;
				}
			#wrapper .content .top_area .lead {
				margin-top: 40px;
				justify-content: space-between;
				padding: 0 5%;
			}
				#wrapper .content .top_area .lead div {
					width: 200px;
					margin: auto;
				}
					#wrapper .content .top_area .lead div img {
						border: solid 1px #ddd;
					}
				#wrapper .content .top_area .lead p {
					margin-top: 30px;
					letter-spacing: 1px;
					line-height: 2.28;
					text-align: justify
				}

		#wrapper .content .manga_area {
		}
			#wrapper .content .manga_area ul {
			}
				#wrapper .content .manga_area ul li {
					margin-top: 20px;
				}
				#wrapper .content .manga_area ul li + li {
				}

			.btn {
				margin: 40px 5% 0;
			}
				.btn a {
					color: #fff;
					font-size: 16px;
					display: block;
					background-color: #000;
					position: relative;
					padding: 12px 20px;
					box-sizing: border-box;
				}
				.btn a::before ,
				.btn a::after {
					position: absolute;
					content: "";
				}
				.btn a::before {
					top: 0;
					bottom: 0;
					right: 16px;
					margin: auto;
					width: 28px;
					height: 5px;
					border-right: solid 1px #fff;
					border-bottom: solid 1px #fff;
					transform: skew(45deg);
					transition: 0.3s;
				}
				.btn a::after {
					top: 0;
					right: 42px;
					height: calc(100% - 20px);
					border-right: solid 3px #0078d2;
					transform: skew(135deg);
				}


}