@charset "utf-8";

.under .mv {
	background:url(../../img/recruit/pc/mv.jpg) no-repeat center;
	background-size: cover;
}

#type {
	padding-top: 80px;
	padding-bottom: 100px;
}
	#type .topTips {
		text-align: center;
		margin-bottom: 50px;
	}

	.jobCategory {
		padding-bottom: 80px;
	}
		.jobCategory .trg {
			width: 100px;
			height: 1px;
			position: absolute;
			top: 60%;
			right: 0;
			left: 0;
			margin: auto;
		}
		.jobCategory .box {
			width: 100%;
			max-width: 1200px;
			margin-right: auto;
			margin-left: auto;
			position: relative;
		}
		.jobCategory .box + .box {
			margin-top: 100px;
		}
			.jobCategory .photo {
				display: block;
				position: relative;
				width: 60%;
			}
			.jobCategory .photo.soon {
				pointer-events: none;
			}
			.jobCategory .box:nth-child(even) .photo {
				margin-left: auto;
			}
				.jobCategory .photo .oh {
					overflow: hidden;
				    position: relative;
				}
				.jobCategory .photo:hover .oh img {
					transition-duration: .4s;
					filter: blur(4px);
				}
				.jobCategory .blurbox {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background:rgba(0,21,51,.8);
					transition-duration: .4s;
					transition-timing-function: ease-in-out;
					opacity: 0;
				}
				.jobCategory .photo:hover .blurbox {
					opacity: 1;
				}
				.jobCategory .soonBox {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background:rgba(0,0,0,.7);
				}
				.jobCategory .soonBox h4 {
					position: absolute;
					top: 50%;
					left: 50%;
					margin: auto;
					transform: translate(-50%, -50%);
					width: 87.5%;
					text-align: center;
					color: #b1b1b1;
					letter-spacing: 2px;
					font-size: 13px;
				}
					.jobCategory .blurbox .more {
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: auto;
						transform: translate(-50%, -50%);
						width: 100%;
					    text-align: center;
					    letter-spacing: 3px;
					    padding-bottom: 70px;
					}
						.jobCategory .blurbox .more span {
							font-size: 13px;
							opacity: 0;
							transition-duration: .3s;
							transition-timing-function: ease-in-out;
						}
						.jobCategory .blurbox .more span:nth-child(1) {
							transition-delay: .15s;
						}
						.jobCategory .blurbox .more span:nth-child(2) {
							transition-delay: .3s;
						}
						.jobCategory .blurbox .more span:nth-child(3) {
							transition-delay: .45s;
						}
						.jobCategory .blurbox .more span:nth-child(4) {
							transition-delay: .6s;
						}
						.jobCategory .photo:hover .blurbox .more span {
							opacity: 1;
						}
					.jobCategory .blurbox .h_line {
						width: 0%;
						height: 1px;
						margin-right: auto;
						margin-left: auto;
						background:rgba(255,255,255,.8);
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: auto;
						transform: translate(-50%, -50%);
						transition-duration: .3s;
						transition-timing-function: ease-in-out;
						transition-delay: .6s;
					}
					.jobCategory .photo:hover .blurbox .h_line {
						width: 30px;
					}
					.jobCategory .blurbox .v_line {
						width: 1px;
						height: 0px;
						margin-right: auto;
						margin-left: auto;
						background:rgba(255,255,255,.8);
						display: block;
						position: absolute;
						top: 50%;
						left: 50%;
						margin: auto;
						transform: translate(-50%, -50%);
						transition-duration: .3s;
						transition-timing-function: ease-in-out;
						transition-delay: .3s;
					}
					.jobCategory .photo:hover .blurbox .v_line {
						height: 30px;
					}

				.jobCategory .logo {
					display: block;
				    position: absolute;
				    bottom: -40px;
				    left: 5%;
				}
				.jobCategory .box:nth-child(even) .logo {
					bottom: inherit;
				    top: -40px;
				    left: inherit;
				    right: 5%;
				}
					.jobCategory .logo img {
						display: block;
						max-width: 170px;
						width: 100%;
						margin-right: auto;
						margin-left: auto;
						background: rgba(255,255,255,.8);
					    padding-top: 20px;
					    padding-bottom: 15px;
				        padding-left: 20px;
					    padding-right: 20px;
					}
				.jobCategory .t_blank .appearBar .ico_blank {
					content:"";
					display: block;
					width: 16px;
					height: 16px;
					background:url(../../img/recruit/pc/ico_blank.png) no-repeat center;
					background-size: cover;
					position: absolute;
					top: 10px;
					right: 10px;
					opacity: 0;
				}
				.appearBar .square.fadeAway + img + .ico_blank {
					opacity: 1;
				}

			.jobCategory .datail {
				width: 32.5%;
				position: absolute;
			    top: 50%;
			    right: 0;
			    -webkit-transform: translate(0, -50%);
			    -ms-transform: translate(0, -50%);
			    transform: translate(0, -50%);
			    height: auto;
			}
			.jobCategory .box:nth-child(even) .datail {
				right: inherit;
				left: 0;
			}
				.jobCategory .ttl {
				    margin-bottom: 30px;
				    position: relative;
				}
					.jobCategory .numBox {
						width: 120px;
						height: 85px;
						display: block;
						position: relative;
						overflow: hidden;
					}
					.jobCategory .box:nth-child(even) .numBox {
						margin-left: auto;
					}
						.jobCategory .numBox .num {
							font-family: 'Amiri', serif;
							font-size: 100px;
							line-height: 1;
						}
							.jobCategory .numBox .num span {
								color: #515f84;
								position: absolute;
								bottom: -100px;
								transition-duration: .9s;
							    transition-timing-function: cubic-bezier(.89,.06,.43,1);
							}
							.jobCategory .box:nth-child(even) .numBox .num span {
								right: 50px;
							}
							.jobCategory .numBox .num span + span {
								left: 50px;
								transition-delay: .15s;
							}
							.jobCategory .box:nth-child(even) .numBox .num span + span {
								left: inherit;
								right: 0;
							}
							.jobCategory .view .numBox .num span {
								bottom: -15px;
							}
						.jobCategory .ttl .line {
							position: absolute;
							top: 0;
							bottom: 0;
							margin: auto;
							right: 0;
							width: 0px;
							background:#929bb2;
							height: 1px;
							transition-duration: .9s;
							transition-timing-function: cubic-bezier(.89,.06,.43,1);
							transition-delay: .25s;
						}
						.jobCategory .view .ttl .line {
							width: calc(100% - 120px);
						}
						.jobCategory .box:nth-child(even) .ttl .line {
							right: inherit;
							left: 0;
						}

				.jobCategory h3 {
					font-size: 24px;
					line-height: 1.4;
					letter-spacing: 4px;
					visibility: visible !important;
					opacity: 0;
				}
				.jobCategory .view h3 {
					animation-fill-mode:both;
					animation-duration:.8s;
					animation-delay:.8s;
					-webkit-animation-name: mainFIU_late;
					animation-name: mainFIU_late;
				}
				.jobCategory .box:nth-child(even) h3 {
					text-align: right;
				}
					.jobCategory h3 span {
						font-size: 14px;
						display: block;
						padding-top: 15px;
					    letter-spacing: 3px;
					}

@media screen and (max-width:768px) {

	#type {
	    padding-top: 60px;
	    padding-bottom: 30px;
	}
		#type .topTips {
		    margin-bottom: 30px;
		}

		.jobCategory .box + .box {
		    margin-top: 60px;
		}
		.jobCategory .trg {
			top: 50%;
		}
			.jobCategory .photo {
				width: 100%;
			}
				.jobCategory .blurbox {
					display: none !important;
				}
				
			.jobCategory .datail {
			    width: 87.5%;
			    margin-right: auto;
			    margin-left: auto;
			    margin-top: 20px;
			    position: inherit;
			    top: inherit;
			    right: inherit;
			    -webkit-transform: inherit;
			    -ms-transform: inherit;
			    transform: inherit;
			}
			.jobCategory .logo {
		        display: table;
			    margin-right: auto;
			    margin-left: auto;
			    margin-top: -53px;
			    position: inherit;
			    bottom: inherit;
			    left: inherit;
			}
			.jobCategory .box:nth-child(even) .logo {
				top: inherit;
			    right: inherit;
			}
				.jobCategory .logo img {
					width: 100px;
				}
				.jobCategory .ttl {
				    margin-bottom: 15px;
				}
					.jobCategory .numBox {
					    width: 75px;
					    height: 40px;
					}
						.jobCategory .numBox .num {
						    font-size: 60px;
						}
							.jobCategory .box:nth-child(even) .numBox .num span {
							    right: 30px;
							}
							.jobCategory .numBox .num span + span {
							    left: 30px;
							}
					.jobCategory .view .ttl .line {
					    width: calc(100% - 80px);
					}

				.jobCategory h3 {
				    font-size: 20px;
				    text-align: center;
				}
				.jobCategory .box:nth-child(even) h3 {
				    text-align: center;
				}
					.jobCategory h3 span {
					    font-size: 13px;
					    padding-top: 10px;
					}

}