@charset "UTF-8";



/* 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 %
---------------------------------------------------------------------*/






/* ++++++++++++++++++++++++++++++++++++++++++++++    PC    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* 801px ~ */
@media screen and (min-width: 801px), print {
	
/*-------------------------------------------------------------------
	
	project/index

---------------------------------------------------------------------*/
	#project.indexpage{
		
	}
	
	/* title
	-------------------------------*/
	#project.indexpage #maintitle{
		height: 236px;
		text-align: center;
		background: #ededed url("../img/project_index/bg_tit.png") no-repeat bottom center;
		background-size: 100% auto;
	}
	#project.indexpage #maintitle h1{
		width: auto;
		display: block;
		color: #212121;
	}
	#project.indexpage #maintitle .en{
		display: block;
		width: 69px;
		margin: 0 auto;
	}
	#project.indexpage #maintitle .en img{
		display: block;
	}
	
	/* contents
	-------------------------------*/
	#project.indexpage .contents{
		background: #fff url("../img/project_index/bg_main.png") no-repeat top center;
		background-size: 100% auto;	
	}
	#project.indexpage .leadArea{
		text-align: center;
		margin-bottom: 90px;
	}
	
		#project.indexpage .leadArea .catch{
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 0.25em;
			line-height: 2;
			margin-bottom: 20px;
		}
		#project.indexpage .leadArea .lead{
			letter-spacing: 0.25em;
			line-height: 2;
		}
	/* links
	-------------------------------*/
	#project.indexpage .link > ul{
	}
		#project.indexpage .link > ul li{

		}
			#project.indexpage .link > ul li + li{
				margin-top: 70px;
			}
				#project.indexpage .link > ul li a{
					display: block;
					position: relative;
					overflow: hidden;
					z-index: 1;
					padding: 90px 0;
					text-align: center;
				}
					#project.indexpage .link > ul li a:after{
						content: '';
						display: block;
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						z-index: -1;
						transition: 1.0s;
					}
						#project.indexpage .link > ul li a:hover:after{
							transform: scale(1.05);
						}
						#project.indexpage .link > ul li:nth-of-type(1) a:after{
							background: url("/recruit/w-nexco/business/img/project_index/btn_bg02.jpg") no-repeat center;
							background-size: cover;
						}
						#project.indexpage .link > ul li:nth-of-type(2) a:after{
							background: url("/recruit/w-nexco/business/img/project_index/btn_bg01.jpg") no-repeat center;
							background-size: cover;
						}
						#project.indexpage .link > ul li:nth-of-type(3) a:after{
							background: url("/recruit/w-nexco/business/img/project_index/btn_bg03.jpg") no-repeat center;
							background-size: cover;
						}
				#project.indexpage .link > ul li a .num{
					position: absolute;
					width: 128px;
					top: -2px;
					left: 30px;
				}
					#project.indexpage .link > ul li:nth-of-type(2) a .num{
						right: 85px;
						left: auto;
					}
					#project.indexpage .link > ul li:nth-of-type(3) a .num{
						top: auto;
						bottom: -1px;
						left: 160px;
					}
					#project.indexpage .link > ul li a .num img{
						display: block;
					}
				#project.indexpage .link > ul li a h2{
					color: #fff;
					font-size: 22px;
					font-weight: bold;
					font-feature-settings: "palt";
					letter-spacing: 0.2em;
					line-height: 2;
					margin-bottom: 20px;
				}
				#project.indexpage .link > ul li a .txt{
					font-weight: bold;
					color: #fff;
					line-height: 2;
				}
				#project.indexpage .link > ul li a .arrow{
					width: 100px;
					height: 60px;
					background-color: #000;
					position: absolute;
					bottom: 0;
					right: 0;
				}
					#project.indexpage .link > ul li a .arrow:before,
					#project.indexpage .link > ul li a .arrow:after{
						content: '';
						display: block;
						position: absolute;
					}
					#project.indexpage .link > ul li a .arrow:before{
						background: url("/recruit/w-nexco/business/img/project_index/arrow.png") no-repeat center;
						background-size: cover;
						width: 29px;
						height: 5px;
						right: 15px;
						top: 50%;
						margin-top: -4px;
						transition: 0.4s;
					}
						#project.indexpage .link > ul li a:hover .arrow:before{
							right: 8px;
						}
					#project.indexpage .link > ul li a .arrow:after{
						background: url("/recruit/w-nexco/business/img/project_index/line.png") no-repeat center;
						background-size: cover;
						width: 45px;
						height: 42px;
						top: 0;
						left: 20px;
					}
	
	
	
	
}




/* ++++++++++++++++++++++++++++++++++++++++++++++    sp    ++++++++++++++++++++++++++++++++++++++++++++++  */
/* ~ 800px */
@media only screen and (max-width: 800px) {
	
/*-------------------------------------------------------------------
	
	project/index

---------------------------------------------------------------------*/
	#project.indexpage{
		margin-bottom: 0;
	}
	
	/* title
	-------------------------------*/
	#project.indexpage #maintitle{
		height: 180px;
		text-align: center;
		background: #ededed url("../img/project_index/bg_tit_sp.png") no-repeat bottom center;
		background-size: 100% auto;
	}
	#project.indexpage #maintitle:after{
		display: none;
	}
	#project.indexpage #maintitle h1{
		width: auto;
		display: block;
		color: #212121;
	}
	#project.indexpage #maintitle .en{
		display: block;
		width: 69px;
		margin: 0 auto;
	}
	#project.indexpage #maintitle .en img{
		display: block;
	}
	
	/* contents
	-------------------------------*/
	#project.indexpage .contents{
		background: #fff url("../img/project_index/bg_main_sp.png") repeat-y top center;
		background-size: 100% auto;	
	}
	#project.indexpage .leadArea{
		text-align: center;
		margin-bottom: 40px;
	}
	
		#project.indexpage .leadArea .catch{
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 0.2em;
			margin-bottom: 10px;
		}
		#project.indexpage .leadArea .lead{
		}
	/* links
	-------------------------------*/
	#project.indexpage .link > ul{
	}
		#project.indexpage .link > ul li{

		}
			#project.indexpage .link > ul li + li{
				margin-top: 70px;
			}
				#project.indexpage .link > ul li a{
					display: block;
					position: relative;
					overflow: hidden;
					z-index: 1;
					padding: 70px 20px;
					text-align: center;
				}
					#project.indexpage .link > ul li a:after{
						content: '';
						display: block;
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						z-index: -1;
						transition: 1.0s;
					}
						#project.indexpage .link > ul li a:hover:after{
							transform: scale(1.05);
						}
						#project.indexpage .link > ul li:nth-of-type(1) a:after{
							background: url("/recruit/w-nexco/business/img/project_index/btn_bg02.jpg") no-repeat center;
							background-size: cover;
						}
						#project.indexpage .link > ul li:nth-of-type(2) a:after{
							background: url("/recruit/w-nexco/business/img/project_index/btn_bg01.jpg") no-repeat center;
							background-size: cover;
						}
						#project.indexpage .link > ul li:nth-of-type(3) a:after{
							background: url("/recruit/w-nexco/business/img/project_index/btn_bg03.jpg") no-repeat center;
							background-size: cover;
						}
				#project.indexpage .link > ul li a .num{
					position: absolute;
					width: 64px;
					top: -2px;
					left: 30px;
				}
					#project.indexpage .link > ul li:nth-of-type(2n) a .num{
						right: 30px;
						left: auto;
					}
					#project.indexpage .link > ul li a .num img{
						display: block;
					}
				#project.indexpage .link > ul li a h2{
					color: #fff;
					font-size: 18px;
					font-weight: bold;
					font-feature-settings: "palt";
					letter-spacing: 0.2em;
					line-height: 2;
					margin-bottom: 20px;
				}
				#project.indexpage .link > ul li a .txt{
					font-weight: bold;
					color: #fff;
					line-height: 2;
					text-align: justify;
				}
				#project.indexpage .link > ul li a .arrow{
					width: 100px;
					height: 60px;
					background-color: #000;
					position: absolute;
					bottom: 0;
					right: 0;
				}
					#project.indexpage .link > ul li a .arrow:before,
					#project.indexpage .link > ul li a .arrow:after{
						content: '';
						display: block;
						position: absolute;
					}
					#project.indexpage .link > ul li a .arrow:before{
						background: url("/recruit/w-nexco/business/img/project_index/arrow.png") no-repeat center;
						background-size: cover;
						width: 29px;
						height: 5px;
						right: 15px;
						top: 50%;
						margin-top: -4px;
						transition: 0.4s;
					}
						#project.indexpage .link > ul li a:hover .arrow:before{
							right: 8px;
						}
					#project.indexpage .link > ul li a .arrow:after{
						background: url("/recruit/w-nexco/business/img/project_index/line.png") no-repeat center;
						background-size: cover;
						width: 45px;
						height: 42px;
						top: 0;
						left: 20px;
					}
	


}