@charset "UTF-8";
/*
 * sub_layout.css
 *
 */
 
/* !mainvisual
---------------------------------------------------------- */
.main {
	position: relative;
    height: 500px;
	background-repeat:no-repeat;
	background-position:50% 50%;
    background-size: cover;
}
.mainMessage {
	background-image:url(../img/message_main.jpg);
}
.mainCompany {
	background-image:url(../img/company_main.jpg);
}
.mainBusiness {
	background-image:url(../img/business_main.jpg);
}
.mainInterview {
	background-image:url(../img/interview_main.jpg);
}
.mainCrosstalk {
	background-image:url(../img/crosstalk_main.jpg);
}
.mainBenefits {
	background-image:url(../img/benefits_main.jpg);
}
.mainInformation {
	background-image:url(../img/information_main.jpg);
}
.mainEntry {
	background-image:url(../img/entry_main.jpg);
}
	.main #header {
		width:100%;
		height:80px;
	}
		.main #header p#headerLogo {
			position:absolute;
			width:260px;
			height:50px;
			top:20px;
			left:50px;
		}
			.main #header p#headerLogo img {
				display:block;
				width:93px;
				float:left;
			}
				.main #header p#headerLogo span {
					font-family: BebasNeue;
					font-size:22px;
					font-weight:normal;
					color:#222;
					line-height:50px;
					letter-spacing:0.04em;
					margin-left:12px;
				}
	.main div.pageTit {
		width:400px;
		height:200px;
		overflow: hidden;
		background:rgba(227,0,0,.8);
		margin-top:70px;
		position:relative;
	}
		.main div.pageTit:before {
			background: #ECFD1B;
			content: '';
			display: inline-block;
			width:100%;
			height:100%;
			position: absolute;
			transform: translateX(-100%);
			transition:all 1.0s 0.4s ease; 
			width: 100%;
			z-index: 3;
		}
		.main div.pageTit p.titEn {
			position:absolute;
			font-family: BebasNeue;
			font-weight:400;
			font-size:60px;
			line-height:1;
			color:#FFF;
			letter-spacing:0.04em;
			top:55px;
			left:60px;
			-webkit-animation: en 1.5s ease;
			-moz-animation: en 1.5s ease;
			animation: en 1.5s ease ;
			opacity: 0;
			z-index: 1;
		}
		.main div.pageTit h1 {
			position:absolute;
			font-size:137%;
			font-weight:500;
			color:#FFF;
			letter-spacing:0.06em;
			top:115px;
			left:60px;
			-webkit-animation: jp 1.5s 1 ease;
			-moz-animation: jp 1.5s 1 ease;
			animation: jp 1.5s 1 ease ;
			opacity: 0;
			z-index: 2;
		}
		
/*アニメーションするプロパティを設定*/
.main div.pageTit.active{
	opacity: 1;
}
.main div.pageTit.active p.titEn{
	opacity: 1;
}
.main div.pageTit.active h1{
	opacity: 1;
}
.main div.pageTit.active:before{
    transform: translateX(100%);     
}

			
@-webkit-keyframes en {
    0% {
        opacity: 0;
		transform: translateX(-30px);
    }
	40% {
        opacity: 0;
        transform: translateX(-30px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-moz-keyframes en {
    0% {
        opacity: 0;
		transform: translateX(-30px);
    }
	40% {
        opacity: 0;
        transform: translateX(-30px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes en {
    0% {
        opacity: 0;
		transform: translateX(-30px);
    }
	40% {
        opacity: 0;
        transform: translateX(-30px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes jp {
    0% {
        opacity: 0;
		transform: translateX(-30px);
    }
	40% {
        opacity: 0;
        transform: translateX(-30px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-moz-keyframes jp {
    0% {
        opacity: 0;
		transform: translateX(-30px);
    }
	40% {
        opacity: 0;
        transform: translateX(-30px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes jp {
    0% {
        opacity: 0;
		transform: translateX(-30px);
    }
	40% {
        opacity: 0;
        transform: translateX(-30px);
    }
	100% {
        opacity: 1;
        transform: translateX(0);
    }
}
	

@media screen and (max-width:1039px){
.main {
    height: 400px;
}
	.main #header p#headerLogo {
		left:30px;
	}
	.main div.pageTit {
		width:340px;
		height:180px;
		margin-top:50px;
	}
		.main div.pageTit p.titEn {
			font-size:54px;
			top:50px;
			left:30px;
		}
		.main div.pageTit h1 {
			font-size:125%;
			top:105px;
			left:30px;
		}
}

@media screen and (max-width:767px){
.main {
    height: 300px;
}
.mainMessage {
	background-image:url(../img/message_main.jpg);
	background-position:85% 50%;
}
.mainBusiness {
	background-image:url(../img/business_main.jpg);
	background-position:80% 50%;
}
.mainCrosstalk {
	background-image:url(../img/crosstalk_main.jpg);
	background-position:65% 50%;
}
		.main #header p#headerLogo {
			width:100px;
			height:auto;
			top:10px;
			left:20px;
		}
			.main #header p#headerLogo img {
				float:none;
				margin-bottom:5px;
			}
				.main #header p#headerLogo span {
					display:block;
					font-size:17px;
					line-height:1;
					margin-left:0;
				}
	.main div.pageTit {
		width:210px;
		height:120px;
		margin-top:50px;
	}
		.main div.pageTit p.titEn {
			font-size:38px;
			top:30px;
			left:20px;
		}
		.main div.pageTit h1 {
			font-size:107%;
			top:68px;
			left:20px;
		}
}

/* !contents
---------------------------------------------------------- */
#contents {
	width:100%;
	margin:100px 0;
}
	.contentsIn {
		width:auto;
		max-width:1240px;
		padding:0 50px;
		margin-left:auto;
		margin-right:auto;
	}
	.contentsIn2 {
		width:auto;
		max-width:1000px;
		margin-left:auto;
		margin-right:auto;
	}
	
.interviewNavi {
	width:100%;
	background:#F4F4F4;
	border-top:5px solid #E4E4E4;
	padding:40px 0;
}
	.interviewNavi div.inner {
		width:auto;
		max-width:1000px;
		margin:0 auto;
	}
		.interviewNavi div.inner p.tit {
			display:block;
			width:16%;
			float:left;
			font-size:87%;
			font-weight:500;
			text-align:center;
			padding-top:60px;
		}
			.interviewNavi div.inner p.tit span {
				display:block;
				top:68px;
				left:20px;
				font-family: BebasNeue;
				font-weight:400;
				font-size:40px;
				line-height:1;
				color:#222;
				letter-spacing:0.04em;
				margin-bottom:5px;
			}
		.interviewNavi div.inner ul {
			width:76%;
			float:right;
		}
			.interviewNavi div.inner ul li {
				width:22%;
				float:left;
				margin-right:4%;
			}
				.interviewNavi div.inner ul li:last-child {
					margin-right:0;
				}
				.interviewNavi div.inner ul li a {
					display:block;
					width:100%;
				}
					.interviewNavi div.inner ul li a div.imgWrap {
						overflow: hidden;
						position:relative;
					}
						.interviewNavi div.inner ul li a div.imgWrap:before {
							display:block;
							position:absolute;
							content:"";
							width:100%;
							height:100%;
							border-radius:50%;
							transition: all 0.1s 0.1s linear;
							z-index:1;
							border:0 solid #E30000;
							box-sizing:border-box;
						}
							.interviewNavi div.inner ul li a:hover div.imgWrap:before {
								border:5px solid #E30000;
							}
					.interviewNavi div.inner ul li a img {
						display:block;
						width:100%;
						height:100%;
						border-radius:50%;
						position:relative;
						transition: all 0.8s ease;
						z-index:0;
					}
					.interviewNavi div.inner ul li a p.name {
						font-weight:500;
						text-align:center;
						line-height:1.6;
						transition: all .6s ease;
						margin-top:5px;
					}
						.interviewNavi div.inner ul li a:hover p.name {
							color:#E30000;
						}
					.interviewNavi div.inner ul li a p.department {
						font-size:75%;
						text-align:center;
						line-height:1.6;
						color:#878787;
						transition: all .6s ease;
					}
						.interviewNavi div.inner ul li a:hover p.department {
							color:#BA8475;
						}
						.interviewNavi div.inner ul li a p.department br.tb {
							display:none;
						}
						
a.entryBtn {
	display:block;
	width:380px;
	height:80px;
	line-height:80px;
	margin:0 auto;
	background:#E30000;
	text-align:center;
	position:relative;
	z-index:0;
	overflow:hidden;
}
	a.entryBtn span {
		color:#FFF;
		font-family: BebasNeue;
		font-weight:400;
		font-size:40px;
		height:80px;
		line-height:80px;
		letter-spacing:0.04em;
		z-index:2;
		transition: .4s;
		position:relative;
	}
		a:hover.entryBtn span {
			color:#222;
		}
		a.entryBtn:before {
			display:block;
			content:"";
			position:absolute;
			width:100%;
			height:100%;
			background:#ECFD1B;
			z-index:1;
			top:0;
			left:-100%;
			transition: all 0.4s ease;
		}
			a:hover.entryBtn:before {
				left:0;
			}

@media screen and (max-width:1039px){
#contents {
	margin:80px 0;
}
	.contentsIn {
		width:auto;
		padding:0 30px;
	}
	.contentsIn2 {
		width:auto;
		padding:0 30px;
	}
	
.interviewNavi {
	padding:40px 30px;
}
			.interviewNavi div.inner p.tit span {
				font-size:30px;
			}
						.interviewNavi div.inner ul li a div.imgWrap:before {
							display:none;
						}
						.interviewNavi div.inner ul li a:hover p.name {
							color:#222;
						}
					.interviewNavi div.inner ul li a p.department {
						transition: none;
					}
						.interviewNavi div.inner ul li a:hover p.department {
							color:#878787;
						}
						.interviewNavi div.inner ul li a p.department br.tb {
							display:inherit;
						}
						
		a:hover.entryBtn span {
			color:#FFF;
		}
		a.entryBtn:before {
			display:none;
		}
}

@media screen and (max-width:767px){
#contents {
	margin:60px 0 80px 0;
}
	.contentsIn {
		width:auto;
		padding:0 20px;
	}
	.contentsIn2 {
		width:auto;
		padding:0 20px;
	}
	
.interviewNavi {
	padding:40px 20px;
}
		.interviewNavi div.inner p.tit {
			width:100%;
			padding-top:0;
			margin-bottom:20px;
		}
		.interviewNavi div.inner ul {
			width:100%;
			float:none;
		}
			.interviewNavi div.inner ul li {
				width:47%;
				float:left;
				margin-right:6%;
				margin-bottom:15px;
			}
				.interviewNavi div.inner ul li:nth-child(even) {
					margin-right:0;
				}
				.interviewNavi div.inner ul li:nth-child(3) {
					margin-bottom:0;
				}
				.interviewNavi div.inner ul li:last-child {
					margin-bottom:0;
				}
					.interviewNavi div.inner ul li img {
						max-width:160px;
						margin:0 auto;
					}
						.interviewNavi div.inner ul li a p.department br.tb {
							display:none;
						}
						
a.entryBtn {
	width:90%;
	max-width:340px;
	height:70px;
	line-height:70px;
	margin:0 auto;
}
	a.entryBtn span {
		font-size:30px;
		height:70px;
		line-height:70px;
	}
}