@charset "UTF-8";

html {
	overflow-y:scroll;
}

@media screen and (min-width:769px) {
	body {
		font-size:16px;
	}
	
	.sp {
		display:none!important;
	}
}

@media screen and (min-width:641px) and (max-width:768px) {
	body {
		font-size:2.5vw;
	}
	
	.pc {
		display:none!important;
	}
}

@media screen and (max-width:640px) {
	body {
		font-size:3.4vw;
	}
	
	.pc {
		display:none!important;
	}
}

@media screen and (max-width:300px) {
	body {
		font-size:10px;
	}
}

/*header*/
header {
	position:fixed;
	z-index:1000;
	width:100%;
	height:70px;
	background:#fff;
}

header > div {
	padding:12px 20px 0;
	width:100%;
}

header .logo img {
	width:270px;
}

@media screen and (max-width:768px) {
	header {
		height:3em;
	}
	
	header > div {
		padding:.5em 3% 0;
		width:100%;
	}
	
	header .logo img {
		width:auto;
		height:2em;
	}
}

/*footer*/
footer {
	position:absolute;
	bottom:0;
	z-index:1000;
	width:100%;
	height:40px;
	background:#00354c;
}

footer > div {
	padding:15px 20px;
}

footer small {
	display:block;
	color:#fff;
	text-align:center;
	font-size:65%;
	line-height:1;
}

@media screen and (max-width:768px) {
	footer {
		height:2.5em;
	}
	
	footer > div {
		padding:.75em 5%;
	}
}

/*.recruit-top*/
.recruit-top {
	position:absolute;
	top:0;
	bottom:0;
	min-width:1024px;
	min-height:800px;
	width:100%;
}

@media screen and (max-width:768px) {
	.recruit-top {
		overflow:hidden;
		min-width:320px;
		min-height:43em;
	}
}

/*main*/
main {
	position:absolute;
	top:70px;
	bottom:40px;
	width:100%;
}

@media screen and (max-width:768px) {
	main {
		top:3em;
		bottom:2.45em;
		width:100%;
	}
}

/*h1*/
h1 {
	position:absolute;
	top:50%;
	left:50%;
	z-index:500;
	max-width:900px;
	width:70%;
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

@media screen and (max-width:768px) {
	h1 {
		top:33.333%;
		max-width:none;
		width:80%;
	}
}

/*section*/
section {
	position:absolute;
	top:0;
	bottom:0;
	width:33.333%;
	background:center top no-repeat;
	background-size:cover;
}

section div {
	position:absolute;
	top:0;
	bottom:0;
	width:100%;
	background:url(../img/stripe.png) center center;
}

section a {
	position:absolute;
	bottom:50px;
	left:8%;
	z-index:500;
	padding:40px 6%;
	width:84%;
	box-shadow:0 2px 10px rgba(0,0,0,.25);
	transition:background .3s;
	transform:skew(-6deg);
}

section a strong,section a small {
	display:block;
	color:#fff;
	text-align:center;
	transform:skew(6deg);
}

section a strong {
	margin-bottom:15px;
	padding-bottom:15px;
	background:url(../img/arrow.png) right bottom no-repeat;
	font-weight:700;
	font-size:120%;
}

section a small {
	padding-left:1em;
	letter-spacing:.1em;
	font-size:70%;
}

section.newgraduate {
	background-image:url(../img/newgraduate.jpg);
}

section.career {
	background-image:url(../img/career.jpg);
}

section.mechanic {
	background-image:url(../img/mechanic.jpg);
}

section.career {
	left:33.233%;
	width:33.533%;
}

section.mechanic {
	right:0;
}



/*coming soon*/
/*

.view-pc section.newgraduate a:hover {
	background:#00e3e3;
}
*/

section.newgraduate a strong {
	position:relative;
}

section.newgraduate a strong i {
	display:block;
	width:10.5em;
	position:absolute;
	font-size:65%;
	background-color:#00bfbf;
	bottom:-.5em;
	line-height:1.4;
	color:#ffc400;
	left:50%;
	font-weight:bold;
	-ms-transform:translateX(-50%);
	transform:translateX(-50%);
}

section.newgraduate a {
	/*
	cursor:default;
	*/
}
/*/coming soon*/

section.newgraduate a {
	background:#00bfbf;
}

.view-pc section.newgraduate a:hover {
	background:#00e3e3;
}


section.career a {
	background:#aad37b;
}

.view-pc section.career a:hover {
	background:#95e23c;
}

section.mechanic a {
	background:#007cc1;
}

.view-pc section.mechanic a:hover {
	background:#1e87e8;
}

@media screen and (max-width:768px) {
	section {
		width:100%;
		height:33.333%;
		background-position:right top;
	}
	
	section div {
		background:url(../img/stripe-sp.png) center center;
	}
	
	section a {
		bottom:15%;
		left:-3em;
		padding:.75em 1em .75em 4em;
		width:60%;
		height:50%;
		box-shadow:0 .1em .75em rgba(0,0,0,.15);
	}
	
	section.newgraduate a {
		top:25%;
		right:-3em;
		bottom:auto;
		left:auto;
	}
	
	section a span {
		position:absolute;
		top:50%;
		right:1.5em;
		left:4em;
		z-index:500;
		display:block;
		-ms-transform:translate(0,-50%);
		transform:translate(0,-50%);
	}
	
	section.newgraduate a span {
		right:4.25em;
		left:1.5em;
	}
	
	section a strong,section a small {
		display:block;
		color:#fff;
		text-align:center;
	}
	
	section a strong {
		margin-bottom:.75em;
		padding-bottom:.6em;
		background-size:auto .5em;
		font-size:100%;
	}

	section a small {
		font-size:55%;
	}	

	section.newgraduate {
		background-image:url(../img/newgraduate-sp.jpg);
		background-position:left top;
	}
	
	section.career {
		top:auto;
		right:auto;
		bottom:33.133%;
		left:auto;
		width:100%;
		height:33.733%;
		background-image:url(../img/career-sp.jpg);
	}
	
	section.mechanic {
		top:auto;
		right:auto;
		bottom:0;
		background-image:url(../img/mechanic-sp.jpg);
	}

}