@charset "utf-8";

@import url("/common/css/reset.css");
@import url("/common/css/layout.css");

/* recruit
────────────────────────────────────────*/

#recruit{
	margin:0 0 30px;
}

#recruit h1{
	background:url(../../index/img/recruit/outline/photo_gray.jpg) no-repeat center;
	background-size:100% auto;
	color:#FFF;
	font-size:36px;
	font-weight:bold;
	text-align:center;
	position:relative;
	padding:60px 10px;
}
#recruit h1::before {
	background: -moz-linear-gradient(45deg, rgba(74,179,221,0.8) 0%, rgba(4,75,143,0.8) 100%);
	background: -webkit-linear-gradient(45deg, rgba(74,179,221,0.8) 0%,rgba(4,75,143,0.8) 100%);
	background: linear-gradient(45deg, rgba(74,179,221,0.8) 0%,rgba(4,75,143,0.8) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc4ab3dd', endColorstr='#cc044b8f',GradientType=1 );
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0; left:0;
	z-index:0;
}

#recruit h1 span{
	position:relative;
	z-index:10;
}

#recruit section{
	color:#FFF;
	padding:20px;
	height:100%;
	margin:30px 0 0;
	position:relative;
}

#recruit section + section{
	margin:10px 0 0;
}

#recruit section::before {
	background:rgba(0,0,0,0.75);
	content:"";
	display:block;
	height:100%;
	position:absolute;
	top:0; left:0;
	width:100%;
	z-index:0;
}
	
#recruit section h3{
	font-size:24px;
	text-shadow:0 0 5px rgba(0,0,0,1.00);
	margin-top:20px;
	position:relative;
}

#recruit section p{
	text-shadow:0 0 5px rgba(0,0,0,1.00);
	line-height:1.6;
	position:relative;
}

#recruit span {
	display:block;
    overflow: hidden;
    width:100%;
	text-align:center;
	position:relative;
}

#recruit span img {
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;
	width:auto;
	height:auto;
	max-height:240px;
}

#recruit span img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

#recruit section nav{
	margin-top:20px;
	position:relative;
	text-align:center;
}

#recruit section nav a{
	text-shadow:0 0 5px rgba(0,0,0,1.00);
	box-shadow:0 0 5px 0 rgba(0,0,0,1.00);
	border:1px #FFF solid;
	color:#FFF;
	padding:0.5em 2em;
}

#message{
	background:url(/index/img/recruit/message/photo_gray.jpg) no-repeat center;
	background-size:auto 100%;
}

#outline{
	background:url(/index/img/recruit/outline/photo_gray.jpg) no-repeat center;
	background-size:auto 100%;
}

@media only screen and (min-width:480px) {
		
	#recruit section{
		align-items:flex-start;
		display:flex;
		justify-content:flex-start;
		padding:30px;
	}
	
	#recruit section span {
		display:block;
		overflow: hidden;
		width:50%;
		text-align:center;
		position:relative;
	}
	
	#recruit section span img {
		height:auto;
		min-height:80px;
	}
	
	#recruit div{
		width:75%;
		padding:0 0 0 30px;
	}
	
	#recruit section h3{
		font-size:36px;
		margin-top:0;
	}
	
	#recruit section p{
		line-height:1.8;
		margin-top:1rem;
	}
	
	#message{
		background-size:100% auto;
	}
	
	#outline{
		background-size:100% auto;
	}
	
	#outline div{
		order:1;
		padding:0 30px 0 0;
	}
	
	#outline span{
		order:2;
	}
	
}

@media only screen and (min-width:1280px) { 

	#recruit article{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}

	#recruit section{
		margin:40px 0 0 !important;
		box-sizing:border-box;
		width:50%;
		width:calc(50% - 5px);
		padding:100px 40px;
	}
	
	#recruit span {
		min-width:120px;
	}
	
	#recruit span img {
		max-height:200px;
	}
	
	#recruit div{
		width:auto;
	}
	
	#recruit section nav a{
		padding:0.5em 4em;
	}

}