@charset "utf-8";

@import "compass/reset";
@import "setting";


// template css

// PC

html{
	font-size:$base-font-size+px;
	line-height:$base-line-height;
}

body {
	@include dff;
	color: #222;
}

.container{
	width: 1165px;
	margin: 0 auto;
}

a{
	color: inherit;
	text-decoration: none;
}

header{
	position: fixed;
	width: 100%;
	height: 120px;
	@include pie-clearfix;
	background-color: #fff;
	top: 0;
	left: 0;
	@include box-shadow(0px 1px 3px rgba(0,0,0,0.3));
	z-index: 99;
	
	h1{
		float: left;
		margin: 30px 60px;
		line-height: 0;
		color: $corp;
		
		a{
			@include transition(opacity 0.3s ease 0s);
			
			img{
				height: 31px;
				width: auto;
			}
			
			span{
				display: block;
				@include fs(12,29px,.1);
				@include pp(3);
				
				strong{
					font-weight: 600;
				}
			}
			
			&:hover{
				@include opacity(.8);
			}
		}
	}
	
	#sp_btn{display: none;}
	
	nav{
		float: right;
		
		ul{
			letter-spacing: -.4em;
			li{
				letter-spacing: normal;
				display: inline-block;
				text-align: center;
				vertical-align: top;
				a{
					display: block;
					@include box-sizing;
					width: auto;
					height: 120px;
					padding: 45px 30px 0;
					@include fs(16,1.7,.05);
					position: relative;
					
					span{
						display: block;
						
						&.en{
							@include pp;
							color: $corp;
						}
						&.jp{
							@include fs(10);
							color: $steel;
						}
					}
					
					&:after{
						content: "";
						width: 0;
						height: 2px;
						background-color: $corp;
						position: absolute;
						left: 0;
						right: 0;
						bottom: 15px;
						margin: auto;
						@include transition(width 0.3s ease 0s);
					}
					
					&:hover,&.active{
						&:after{
							width: 100px;
						}
					}
				}
				
				&:last-child{
					a{
						width: 120px;
						padding: 50px 0 0;
						background-color: $corp;
						@include transition(background-color 0.3s ease 0s);
						
						span.en{
							color: #fff;
						}
						
						&:after{
							display: none!important;
						}
						
						&:hover{
							background-color: #000;
						}
					}
				}
			}
		}
	}
}

main{
	padding-top: 120px;
	background: url("../images/bg_dot.gif") center center repeat;
	position: relative;
	
	&:before{
		content: "";
		display: block;
		width: 100%;
		height: 170px;
		position: absolute;
		top: 120px;
		left: 0;
		background-color: #fff;
		z-index: 0;
	}
	
	h3{
		@include pp;
		@include fs(40,1.5,.005);
	}
	
	h4{
		@include fs(22,1.5,.1);
		font-weight: 500;
	}
	
	h5{
		@include fs(14,1.6,.1);
	}
	
	h6{
		@include pp;
		@include fs(13,1.5);
		margin-bottom: 5px;
	}
	
	.head{
		width: calc(100% - 120px);
		background: center center no-repeat;
		background-size: cover;
		padding: 140px 0;
		text-align: center;
		color: #fff;
		position: relative;
		z-index: 2;
	}
	
	#recruit_info{
		background-color: $corp;
		color: #fff;
		text-align: center;
		padding: 100px 0;
		
		ul{
			margin-top: 60px;
			@include pie-clearfix;
			
			li{
				float: left;
				width: 32%;
				height: 370px;
				margin-right: 2%;
				
				&:nth-child(3n){
					margin-right: 0;
				}
				
				a{
					display: block;
					width: 100%;
					height: 100%;
					@include box-sizing;
					border: solid 1px #fff;
					background-color: rgba(#fff,.1);
					padding-top: 150px;
					@include transition(background-color 0.3s ease 0s);
					
					span{
						display: block;
						&.jp{
							@include fs(28,1.4,.1);
							font-weight: 500;
						}
						&.en{
							@include fs(14,1.5,.15);
							@include pp;
							margin-top: 5px;
						}
					}
					
					&:hover{
						background-color: #000;
					}
				}
			}
		}
	}
}

footer{
	background: url("../images/bg_dot.gif") center center repeat;
	padding: 80px 0 40px;
	text-align: center;
	
	a.logo{
		@include transition(opacity 0.3s ease 0s);
		img{
			height: 96px;
			width: auto;
		}
		span{
			display: block;
			@include pp;
			@include fs(10,1.6,.2);
		}
		
		&:hover{@include opacity(.8);}
	}
	
	address{
		display: block;
		@include fs(12,1.6,.1);
		margin: 60px auto 20px;
	}
	
	.f_contact{
		margin-bottom: 20px;
		li{
			display: inline-block;
			vertical-align: middle;
			margin: 0 10px;
			
			&:first-child{
				a{
					@include fs(24,32px,.05);
					@include pp;
				}
			}
			
			&:last-child{
				a{
					@include fs(12,32px,.1);
					display: block;
					width: 210px;
					background-color: $corp;
					color: #fff;
					@include transition(opacity 0.3s ease 0s);
					
					&:hover{
						@include opacity(.8);
					}
				}
			}
		}
	}
	
	a.btn{
		color: $corp;
		@include fs(12,40px,.1);
		display: block;
		width: 300px;
		margin: auto;
		vertical-align: middle;
		background-color: #fff;
		@include box-shadow(1px 1px 3px rgba(#000,.3));
		@include transition(all 0.3s ease 0s);
		
		&:after{
			content: "";
			display: inline-block;
			margin-left: 5px;
			width: 16px;
			height: 12px;
			background: url("../images/ico_linkg.png") center center no-repeat;
			background-size: contain;
		}
		
		&:hover{
			background-color: $lime;
			@include box-shadow(0px 0px 1px rgba(#000,.5));
		}
	}
	
	p#copy{
		@include fs(11,1.5,.1);
		@include pp;
		margin-top: 100px;
	}
}

#sns{
	position: fixed;
	bottom: 30px;
	left: 30px;
	writing-mode: vertical-rl;
	z-index: 99;
	
	h6{
		display: inline-block;
		vertical-align: middle;
		color: $corp;
		@include fs(13,1.5,.1);
		@include pp(3);
		margin-bottom: 30px;
		
		strong{
			font-weight: 600;
		}
	}
	
	ul{
	display: none !important;
		vertical-align: middle;
		line-height: 0;
		li{
			display: inline-block;
			&:first-child{
				margin-bottom: 10px;
			}
			
			a{
				img{
					height: 16px;
					width: auto;
				}
				
				&:hover{
					@include opacity(.7);
				}
			}
		}
	}
}

br.sp{display:none;}

@media screen and (min-width : $pc-width+px){

}

// tablet
@media screen and (min-width : $tablet-width+px) and (max-width : $pc-width+px) {

}

// smartphone
@media screen and (max-width : $tablet-width+px){

html{
	font-size: 18px;
}

body{
	-webkit-text-size-adjust: 100%;
	max-height:100%;
}

.container{
	width:84%;
	margin:auto;
	max-height:100%;
}

a{
	color: inherit;
	text-decoration: none;
}

header{
	position: fixed;
	width: 100%;
	height: 90px;
	@include pie-clearfix;
	@include box-sizing;
	padding: 0;
	background-color: #fff;
	top: 0;
	left: 0;
	@include box-shadow(0px 1px 3px rgba(0,0,0,0.3));
	z-index: 99;
	
	h1{
		float: none;
		position: absolute;
		margin: 0;
		line-height: 0;
		color: $corp;
		top: 23px;
		left: 20px;
		z-index: 200;
		
		a{
			@include transition(opacity 0.3s ease 0s);
			
			img{
				height: 31px;
				width: auto;
			}
			
			span{
				display: block;
				@include fs(12,29px,.1);
				@include pp(3);
				
				strong{
					font-weight: 600;
				}
			}
			
			&:hover{
				@include opacity(.8);
			}
		}
	}
	
	#sp_btn{
		display: block;
		width: 90px;
		height: 90px;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 200;
		
		i{
			width: 48px;
			height: 24px;
			border-top: solid 2px $corp;
			border-bottom: solid 2px $corp;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			@include transition(all 0.3s ease 0s);
			
			&:before,&:after{
				content: "";
				width: 100%;
				height: 2px;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				@include transition(all 0.3s ease 0s);
				background-color: $corp;
			}
		}

		&.close{
			i{
				border-color: transparent;

				&:before{
					@include rotate(-135deg);
				}

				&:after{
					@include rotate(-225deg);
				}
			}
		}
	}
	
	nav{
		display: none;
		float: none;
		position: fixed;
		z-index: 100;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: #fff;
		
		ul{
			margin-top: 90px;
			
			li{
				display: block;
				text-align: center;
				vertical-align: top;
				
				a{
					display: block;
					@include box-sizing;
					width: auto;
					height: auto;
					padding: 60px 30px 45px;
					@include fs(21,1.7,.05);
					position: relative;
					background-color: #fff;
					border-top: solid 1px #666;
					
					span{
						display: block;
						
						&.en{
							@include pp;
							color: $corp;
						}
						&.jp{
							@include fs(16);
							color: $steel;
						}
					}
					
					&:after{
						display: none !important;
					}
					
					&:hover,&.active{
						&:after{
							width: 100px;
						}
					}
				}
				
				&:last-child{
					a{
						width: 100%;
						padding: 60px 0;
						background-color: $corp;
						@include transition(background-color 0.3s ease 0s);
						
						span.en{
							color: #fff;
						}
						
						&:after{
							display: none!important;
						}
						
						&:hover{
							background-color: #000;
						}
					}
				}
			}
		}
	}
}

main{
	padding-top: 90px;
	background: url("../images/bg_dot.gif") center center repeat;
	position: relative;
	
	&:before{display: none;}
	
	h3{
		@include pp;
		@include fs(40,1.5,.005);
	}
	
	h4{
		@include fs(22,1.5,.1);
		font-weight: 500;
	}
	
	h5{
		@include fs(14,1.6,.1);
	}
	
	h6{
		@include pp;
		@include fs(13,1.5);
		margin-bottom: 5px;
	}
	
	.head{
		width: 100%;
		background: center center no-repeat;
		background-size: cover;
		padding: 140px 0;
		text-align: center;
		color: #fff;
		position: relative;
		z-index: 2;
	}
	
	#recruit_info{
		background-color: $corp;
		color: #fff;
		text-align: center;
		padding: 100px 0;
		
		ul{
			margin-top: 60px;
			@include pie-clearfix;
			
			li{
				float: none;
				width: 100%;
				height: auto;
				margin-right: 0;
				margin-top: 20px;
				
				&:nth-child(3n){
					margin-right: 0;
				}
				
				a{
					display: block;
					width: 100%;
					height: auto;
					@include box-sizing;
					border: solid 1px #fff;
					background-color: rgba(#fff,.1);
					padding: 60px 0;
					@include transition(background-color 0.3s ease 0s);
					
					span{
						display: block;
						&.jp{
							@include fs(28,1.4,.1);
							font-weight: 500;
						}
						&.en{
							@include fs(14,1.5,.15);
							@include pp;
							margin-top: 5px;
						}
					}
					
					&:hover{
						background-color: #000;
					}
				}
			}
		}
	}
}

footer{
	background: url("../images/bg_dot.gif") center center repeat;
	padding: 80px 0 160px;
	text-align: center;
	
	a.logo{
		@include transition(opacity 0.3s ease 0s);
		img{
			height: 96px;
			width: auto;
		}
		span{
			display: block;
			@include pp;
			@include fs(10,1.6,.2);
		}
		
		&:hover{@include opacity(.8);}
	}
	
	address{
		display: block;
		@include fs(14,1.6,.1);
		margin: 60px auto 20px;
	}
	
	.f_contact{
		margin-bottom: 20px;
		li{
			display: block;
			vertical-align: middle;
			margin: 20px auto;
			text-align: center;
			
			&:first-child{
				a{
					@include fs(24,32px,.05);
					@include pp;
				}
			}
			
			&:last-child{
				a{
					@include fs(16,48px,.1);
					display: block;
					width: 80%;
					background-color: $corp;
					color: #fff;
					@include transition(opacity 0.3s ease 0s);
					margin: auto;
					
					&:hover{
						@include opacity(.8);
					}
				}
			}
		}
	}
	
	a.btn{
		color: $corp;
		@include fs(16,60px,.1);
		display: block;
		width: 80%;
		margin: 60px auto;
		vertical-align: middle;
		background-color: #fff;
		@include box-shadow(1px 1px 3px rgba(#000,.3));
		@include transition(all 0.3s ease 0s);
		
		&:after{
			content: "";
			display: inline-block;
			margin-left: 5px;
			width: 16px;
			height: 12px;
			background: url("../images/ico_linkg.png") center center no-repeat;
			background-size: contain;
		}
		
		&:hover{
			background-color: $lime;
			@include box-shadow(0px 0px 1px rgba(#000,.5));
		}
	}
	
	p#copy{
		@include fs(11,1.5,.1);
		@include pp;
		margin-top: 100px;
	}
}

#sns{
	position: fixed;
	bottom: 0;
	left: 0;
	writing-mode: horizontal-tb;
	z-index: 99;
	background-color: #fff;
	@include box-sizing;
	width: 100%;
	padding: 30px;
	@include box-shadow(0px 0px 3px #000);
	
	h6{
		display: inline-block;
		vertical-align: middle;
		color: $corp;
		@include fs(16,1.5,.1);
		@include pp(3);
		margin-bottom: 0;
		
		strong{
			font-weight: 600;
		}
	}
	
	ul{
		display: inline-block;
		vertical-align: middle;
		line-height: 0;
		float: right;
		li{
			display: inline-block;
			margin-left: 20px;
			&:first-child{
				margin-bottom: 0;
			}
			
			a{
				img{
					height: 32px;
					width: auto;
				}
				
				&:hover{
					@include opacity(.7);
				}
			}
		}
	}
}

br.pc{display:none;}
br.sp{display:block;}

}