@charset "utf-8";
@import url(common/style.css);

.flexBox{
	-js-display: flex;
	display:flex;
}

/* header */
header{
	padding-top:60px;
	position: absolute;
	z-index:10;
	left:0;
	top:0;
	width:100%;
	min-width: 1280px;
}

header h1,
p.siteName{
	text-align: center;
	font-family: 'Arial Black',Arial;
	font-weight: bold;
	font-size:25px;
	letter-spacing: 0.3em;
}

header h1 img,
p.siteName img{
	width:140px;
	height:auto;
	display:inline-block;
}

header h1 a,
p.siteName a{
	display:inline-block;
}
/* END header */

/* nav */
header ul.nav{
	margin-top:25px;
}

footer ul.nav{
	margin-top:15px;
}

header ul.nav,
footer ul.nav{
	-js-display: flex;
	display:flex;
	justify-content: center;
}

header ul.nav li,
footer ul.nav li{
	margin:0 1em;
	height:auto;
	position: relative;
	padding-bottom:5px;
	font-size:74%;
	letter-spacing: 0.1em;
}

header ul.nav li:after,
footer ul.nav li:after{
	content: "";
	position: absolute;
	left:0;
	bottom:0;
	height:1px;
	width:0;
	background: #FFF;
	transition: width 0ms;
}

footer ul.nav li:after{
	background: #FFF;
}

header ul.nav li:hover:after,
footer ul.nav li:hover:after{
	width:100%;
	transition: width 100ms;
}

header ul.nav li a{
	color:#000;
}

footer ul.nav li a{
	color:#FFF;
}

#top .nav li.nav_top:after,
.project .nav li.nav_project:after,
#service .nav li.nav_service:after,
#mission .nav li.nav_mission:after,
#aboutus .nav li.nav_aboutus:after,
#group .nav li.nav_group:after,
#recruit .nav li.nav_recruit:after,
#contact .nav li.nav_contact:after{
	width:100%;
}
/* nav */

/* main */
#main{
	width:100%;
	min-width: 1280px;
	position: relative;
	z-index:1;
}
/* END main */

/* footer */
footer{
	width:100%;
	min-width: 1280px;
	background: #333;
	padding-top:75px;
	color:#FFF;
}

footer ul.nav{
	margin-top:15px;
}

footer .copyBox{
	margin-top:15px;
	-js-display: flex;
	display: flex;
	font-size:60%;
	padding:15px 0;
	border-top:1px solid #FFF;
	justify-content: center;
}

footer .copyBox a{
	color:#FFF;
	margin-right:2em;
}

footer .copyBox a:hover{
	text-decoration: underline;
}



footer .pagetop {
	width:100px;
	height:80px;
	margin:0 auto;
	margin-bottom:80px;
	cursor: pointer;
}

footer .pagetop p{
	text-align: center;
	width:100%;
	hegiht:auto;
	position: relative;
}

footer .pagetop p::before{
	content: "";
	display:block;
	width:50px;
	height:1px;
	position: absolute;
	right:50%;
	bottom:-5px;
	transform: rotate(-30deg);
	background: #FFF;
	transform-origin: right center;
}

footer .pagetop p::after{
	content: "";
	display:block;
	width:50px;
	height:1px;
	position: absolute;
	left:50%;
	bottom:-5px;
	transform: rotate(30deg);
	background: #FFF;
	transform-origin: left center;
}


/* END footer */

@media only screen and (max-width:640px){
	
	/* spNav */
	#menuWrap{
		width:100%;
		min-width:320px;
		position: fixed;
		top:0;
		left:0;
		z-index: 30;
		padding-top:20px;
	}
	
	.menu-trigger span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	.menu-trigger {
		width: 56px;
		height: 22px;
		z-index:30;
		cursor: pointer;
		display:block;
		margin:0 auto;
		position: relative;
	}
	.menu-trigger span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #000;
		border-radius: 2px;
	}
	.menu-trigger span:nth-of-type(1) {
		top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
		top: 10px;
	}
	.menu-trigger span:nth-of-type(3) {
		bottom: 0;
	}

	.menu-trigger.active span:nth-of-type(1) {
		transform-origin: right top;
		transform: translateY(0) rotate(-21deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
		opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
		transform-origin: right bottom;
		transform: translateY(0) rotate(21deg);
	}
	
	.spNav {
		width:100%;
		min-width: 320px;
		position: fixed;
		top:0;
		left:0;
		z-index:20;
		box-sizing: border-box;
		display:none;
	}
	
	.spNav .spNwrap{
		background: rgba(255,255,255,0.8);
		padding:60px 0 0;
	}
	
	.spNav .nav{
		margin-top:30px;
		-js-display: flex;
		display: flex;
		flex-wrap: wrap;
	}
	
	.spNav .nav li{
		display:block;
		box-sizing: border-box;
		width:50%;
		border: 1px solid #CCC;
	}
	
	.spNav .nav li a{
		display:block;
		width: 100%;
		text-align: center;
		padding:10px 0;
		color:#000;
		font-size:3.5vmin;
	}
	
	#top .spNav .nav li.nav_top,
	.project .spNav .nav li.nav_project,
	#service .spNav .nav li.nav_service,
	#mission .spNav .nav li.nav_mission,
	#aboutus .spNav .nav li.nav_aboutus,
	#group .spNav .nav li.nav_group,
	#recruit .spNav .nav li.nav_recruit,
	#contact .spNav .nav li.nav_contact{
		background: #333;
		
	}
	
	#top .spNav .nav li.nav_top a,
	.project .spNav .nav li.nav_project a,
	#service .spNav .nav li.nav_service a,
	#mission .spNav .nav li.nav_mission a,
	#aboutus .spNav .nav li.nav_aboutus a,
	#group .spNav .nav li.nav_group a,
	#recruit .spNav .nav li.nav_recruit a,
	#contact .spNav .nav li.nav_contact a{
		color:#FFF;
	}
	/* END spNav */
	
	/* header */
	header{
		min-width: 320px;
	}
	
	header h1,
	p.siteName{
		font-size:6vmin;
	}
	/* END header */
	
	/* main */
	#main{
		min-width: 320px;
	}
	/* END main */
	
	/* footer */
	footer{
		min-width: 320px;
		padding-top:30px;
	}
	
	footer .copyBox{
		display: block;
		text-align: center;
	}
	
	footer .copyBox a{
		margin-bottom:1em;
		margin-right:0;
	}
	
	footer .pagetop{
		margin-bottom:20px;
	}

	footer ul.nav{
		display:none;
	}
	/* END footer */
}