@charset "utf-8";

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


// template css

// PC

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

body {
	@include dff;
	color: #222;
	overflow-x: hidden;
}

a{
	color: inherit;
	text-decoration: underline;
	
	img{
		@include transition(opacity 0.3s ease 0s);
	}
	
	&:hover{
		text-decoration: none;
		
		img{
			@include opacity(.7);
		}
	}
}

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

header{
	position: static;
	width: 100%;
	height: 140px;
	background-color: #fff;
	@include transition(top 0.3s ease 0s);
	top: -90px;
	z-index: 99;
	
	a{
		text-decoration: none;
	}
	
	h1{
		float: left;
		margin: 40px 50px;
		
		span{
			display: block;
			@include fs(10,1);
			margin-top: 7px;
		}
	}
	
	nav{
		float: right;
		position: relative;
		margin-right: 50px;
		
		#main_menu{
			
			&>li{
				float: left;
				&>a,&>span{
					position: relative;
					@include fs(17,20px,.05);
					display: inline-block;
					padding: 70px 20px 45px;
					cursor: pointer;
					
					&:after{
						content: "";
						display: block;
						width: 0;
						height: 0;
						padding-bottom: 1px;
						margin-top: 5px;
						background-color: #e50012;
						@include transition(width 0.3s ease 0s);
					}
					
					&.active{
						&:after{
							width: 100%;
						}
					}
				}
				
				&>div{
					position: fixed;
					width: 100%;
					background-color: #e50012;
					color: #e50012;
					top: 140px;
					left: 0;
					@include fs(19);
					@include mon(6);
					@include opacity(0);
					@include transition(all 0.3s ease 0s);
					height: 0;
					overflow-y: hidden;
					z-index: -1;
					
					ul{
						width: 800px;
						margin: 30px auto;
						letter-spacing: -.4em;
						text-align: center;
						
						li{
							display: inline-block;
							width: 335px;
							margin-bottom: 10px;
							line-height: 90px;
							background-color: #fff;
							letter-spacing: normal;
							margin: 0 10px 10px;
							@include transition(all 0.3s ease 0s);
							
							a{
								display: block;
								span{
									display: inline-block;
									width: auto;
									line-height: 23px;
									vertical-align: middle;
									position: relative;
									
									&:after{
										content: "";
										display: inline-block;
										position: absolute;
										width: 0;
										height: 1px;
										background-color: #e50012;
										left: 0;
										bottom: -2px;
										@include transition(width 0.3s ease 0s);
									}
								}

							}
							
							&:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4){
								text-align: left;
								line-height: 80px;
								vertical-align: middle;
								
								i{
									display: inline-block;
									width: 100px;
									height: 70px;
									margin:  0px 25px 0px 5px;
									background: center center no-repeat;
									background-size: 100%;
									vertical-align: middle;
									@include transition(background-size 0.3s ease 0s);
								}
							}
							
							&:nth-child(5),&:nth-child(6){
								text-align: center;
								line-height: 50px;
								margin-top: 20px;
								
								a{
									span{
										&:after{
											right: 0;
											margin: auto;
										}
									}
								}
							}
							&:hover{
								
								i{
									//background-size: 105%;
								}
								
								a{
									span{
										&:after{
											width: 100%;
										}
									}
								}
							}
						}
					}
				}
				
				&:hover{
					&>a,&>span{
						&:after{
							width: 100%;
						}
					}
					&>div{
						@include opacity(1);
						z-index: 100;
						height: auto;
					}
				}
			}
		}
		
		.lang{
			position: absolute;
			top: 0;
			right: 0;
			letter-spacing: -.4em;
			text-align: center;
			margin-right: 20px;
			@include mon(6);
			z-index: 5;
			width: 180px;
			height: 35px;
			
			li{
				display: inline-block;
				@include fs(13,35px,.05);
				
				a{
					display: block;
					width: 90px;
					background-color: #ddd;
					color: #888;
					@include transition(opacity 0.3s ease 0s);
					
					&:hover{
						@include opacity(.7);
					}
				}
				
				&.active{
					a{
						color: #fff;
						background-color: #e50012;
						pointer-events: none;
					}
				}
			}
		}
		
		#prd_menu{
			position: fixed;
			top: 140px;
			left: 0;
			right: 0;
			width: 670px;
			margin: auto;
			padding: 40px;
			background-color: #e50012;
			color: #e50012;
			z-index: 999;
			text-align: center;
			letter-spacing: -.4em;
			display: none;
			
			ul{
				display: inline-block;
				width: 335px;
				letter-spacing: normal;
				vertical-align: top;

				li{
					margin-bottom: 10px;
					line-height: 90px;
					background-color: #fff;
					letter-spacing: normal;
					margin: 0 10px 10px;
					@include transition(all 0.3s ease 0s);
					text-align: left;
					line-height: 80px;
					vertical-align: middle;

					i{
						display: inline-block;
						width: 100px;
						height: 70px;
						margin:  0px 25px 0px 5px;
						background: center center no-repeat;
						background-size: 100%;
						vertical-align: middle;
						@include transition(background-size 0.3s ease 0s);
					}

					a{
						display: block;
						span{
							display: inline-block;
							width: auto;
							line-height: 23px;
							vertical-align: middle;
							position: relative;
							@include mon(6);

							&:after{
								content: "";
								display: inline-block;
								position: absolute;
								width: 0;
								height: 1px;
								background-color: #e50012;
								left: 0;
								bottom: -2px;
								@include transition(width 0.3s ease 0s);
							}
						}

					}
					
					&.ttl{
						background: none;
						@include fs(18,2,.1);
						color: #fff;
					}
					&:hover{

						i{
							//background-size: 105%;
						}

						a{
							span{
								&:after{
									width: 100%;
								}
							}
						}
					}
				}
					
				&+ul{
					li:not(:first-child){
						text-align: center;
						line-height: 50px;

						a{
							span{
								&:after{
									right: 0;
									margin: auto;
								}
							}
						}
					}
				}
			}
			
			.close{
				width: 30px;
				height: 30px;
				position: absolute;
				background-color: #fff;
				top: 10px;
				right: 10px;
				cursor: pointer;
				
				&:before,&:after{
					content: "";
					width: 25px;
					height: 2px;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					background-color: #222;
					@include rotate(45deg);
				}
				
				&:after{
					@include rotate(-45deg);
				}
			}
			
		}
	}
	
	&.scroll{
		position: fixed;
		height: 90px;
		top: 0;
		@include box-shadow(0px 1px 3px rgba(0,0,0,0.2));
		
		&+main{
			padding-top: 140px;
		}
		
		h1{
			margin: 23px;
			
			span{
				display: none;
			}
		}
		nav{
			margin-right: 0;

			#main_menu{
				float: left;

				&>li{
					float: left;
					&>a,&>span{
						@include fs(14,20px,.05);
						padding: 40px 20px 30px;
					}

					&>div{
						top: 90px;
					}
				}
			}

			.lang{
				position: static;
				float: left;
				letter-spacing: normal;
				text-align: center;
				margin-right: 0;
				margin-left: 20px;
				width: auto;
				height: auto;

				li{
					display: block;
					@include fs(13,45px,.05);

					a{
						display: block;
						width: 90px;
						background-color: #ddd;
						color: #888;
						@include transition(opacity 0.3s ease 0s);

						&:hover{
							@include opacity(.7);
						}
					}

					&.active{
						a{
							color: #fff;
							background-color: #e50012;
						}
					}
				}
			}
			
			#prd_menu{
				top: 90px;
			}
		}
	
	}
	
	#sp_btn,#sp_menu{display: none;}
}

main{
	
	h2.title{
		background: center center no-repeat;
		background-size: cover;
		text-align: center;
		width: 100%;
		height: 380px;
		
		&.wt{
			color: #fff;
		}
		
		.en{
			@include mon(6);
			display: block;
			@include fs(48,1.4,.05);
			padding-top: 140px;
		}
		
		.jp{
			display: block;
			@include fs(21,1,.1);
		}
	}
	
	section#contact{
		padding: 170px 0;
		
		.container{
			width: 800px;
			margin: 0 auto;
			
			h2{
				float: left;
				margin-right: 200px;
				
				.en{
					display: inline-block;
					@include fs(40,1.2,.05);
					@include mon(6);
					margin-bottom: 15px;
					padding-bottom: 15px;
					@include transition(all 0.3s ease 0s);
					@include translateY(40px);
					@include opacity(0);
					
					&:after{
						content: "";
						display: block;
						width: 0;
						height: 1px;
						background-color: #e50012;
						margin-top: 4px;
						@include transition(all 0.3s ease 0s);
					}
				}
				
				.jp{
					display: block;
					@include fs(16,1.2,.1);
					@include transition(all 0.3s ease 0.1s);
					@include translateY(30px);
					@include opacity(0);
				}
			}
			
			div{
				float: left;
				
				p{
					@include fs(16,1.8,.1);
					margin-bottom: 40px;
					@include transition(all 0.3s ease 0.2s);
					@include translateY(30px);
					@include opacity(0);
				}
				
				a.btn{
					display: block;
					width: 240px;
					@include fs(16,50px,.1);
					@include mon(6);
					text-align: center;
					@include transition((transpose 0.3s ease 0.3s),(opacity 0.3s ease 0.3s),(background-color 0.3s ease 0s),(color 0.3s ease 0s));
					@include translateY(20px);
					@include opacity(0);
					border: solid 1px #222;
					background-color: #fff;
					text-decoration: none;
					
					&:hover{
						background-color: #222;
						color: #fff;
					}
				}
			}
		}
		
		&.active{
			.container{
				h2{
					.en,.jp{
						@include translateY(0);
						@include opacity(1);
						
						&:after{
							width: 100%;
						}
					}
					
				}
				
				div{
					p,a{
						@include translateY(0);
						@include opacity(1);
					}
				}
			}
		}
	}
}

footer{
	background-color: #eee;
	padding: 100px 0 120px;
	
	a{
		text-decoration: none;

		&:hover{
			text-decoration: underline;
		}
	}
	
	#footer_nav{
		&>li{
			float: left;
			margin-right: 60px;
			
			h5{
				@include fs(16,2,.1);
				margin-bottom: 20px;
			}
			
			ul{
				@include fs(15,2,.1);
				
				&.list{
					&+.list{
						margin-top: 20px;
					}
					
					li:not(:first-child):before{
						content: "-";
						display: inline-block;
						margin: 0 5px;
					}
				}
			}
		}
	}
	
	address{
		margin: 80px 0;
		
		h5{
			@include fs(18,1.5,.1);
			
			span{
				@include fs(15);
			}
		}
		
		p{
			@include fs(16,2,.1);
		}
	}
	
	div.clearfix{
		@include mon(6);
		
		p#copy{
			float: left;
			@include fs(10,2.8,.1);
		}
		
		ul.lang{
			float: right;
			letter-spacing: -.4em;
			
			li{
				display: inline-block;
				color: #888;
				letter-spacing: normal;
				
				a.active{
					color: #e50012;
					pointer-events: none;
				}
				
				&:first-child{
					&:after{
						content: "|";
						display: inline-block;
						margin: 0 5px;
					}
				}
			}
		}
	}
}

#btn_top{
	position: fixed;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #e50012;
	bottom: -100px;
	right: 40px;
	@include transition(all 0.3s ease 0s);
	z-index: 999;
	
	&:after{
		content: "";
		width: 14px;
		height: 14px;
		position: absolute;
		top: 25px;
		left: 0;
		right: 0;
		margin: auto;
		border-top: solid 1px #fff;
		border-right: solid 1px #fff;
		@include rotate(-45deg);
	}
	
	&:hover{
		@include opacity(.7);
	}
	
	&.show{
		bottom: 40px;
	}
}

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%;
}
	
#landscape{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99999;
	top: 0;
	left: 0;
	background: url("../images/orientation.png") center center no-repeat #000;
	background-size: contain;
}

header{
	position: fixed;
	width: 100%;
	height: 100px;
	background-color: #fff;
	top: 0;
	z-index: 99;
	
	h1{
		float: left;
		margin: 25px;
		
		img{
			height: 50px;
			width: auto;
		}
		
		span{
			display: none;
		}
	}
	
	nav{
		display: none;
	}
	
	&.scroll{
		position: fixed;
		height: 100px;
		top: 0;
		@include box-shadow(0px 1px 3px rgba(0,0,0,0.2));
		
		&+main{
			padding-top: 0;
		}
		
		h1{
			margin: 25px;
			
			span{
				display: none;
			}
		}
	
	}
	
	#sp_btn{
		display: block;
		float: right;
		margin: 36px 32px;
		width: 36px;
		height: 24px;
		position: relative;
		@include box-sizing;
		border-top: solid 2px #222;
		border-bottom: solid 2px #222;
		@include transition(all 0.4s ease 0s);
		
		i{
			width: 100%;
			height: 2px;
			position: absolute;
			top: 9px;
			background-color: #222;
		}
		
		&.hide{
			@include opacity(0);
		}
	}
	
	#sp_menu{
		display: block;
		position: fixed;
		background-color: rgba(#222,.95);
		width: 100%;
		height: 0;
		overflow-y: hidden;
		top: 0;
		left: 0;
		color: #fff;
		@include transition((opacity 0.4s ease 0s),(z-index 0.4s ease 0s));
		@include opacity(0);
		z-index: -1;
		
		a.logo{
			float: left;
			display: inline-block;
			margin: 25px;
			
			img{
				height: 50px;
				width: auto;
			}
		}
		
		span.close{
			float: right;
			position: relative;
			display: block;
			width: 36px;
			height: 36px;
			margin: 32px;
			
			&:before,&:after{
				content: "";
				display: block;
				width: 100%;
				height: 2px;
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				@include rotate(45deg);
				background-color: #fff;
			}
			
			&:after{
				@include rotate(-45deg);
			}
		}
		
		&>ul{
			width: 84%;
			margin: 2vh auto 0;
			
			&>li{
				margin-bottom: 20px;
				
				&>a,&>span{
					@include mon(6);
					@include fs(24,1.4,.05);
				}
				
				.clearfix{
					margin-top: 10px;
					ul{
						float: left;
						width: 50%;
						
						li{
							@include fs(16,1.8,.05);
							margin-bottom: 5px;
							
							&:not(.ttl):before{
								content: "―";
								display: inline-block;
								margin-right: 5px;
								color: #e50012;
							}
						}
					}
				}
			}

			&+.clearfix{
				position: absolute;
				width: 84%;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto 8%;
				@include mon(6);
				
				&>a{
					@include fs(16,1.4,.05);
					float: left;
				}
				
				ul{
					float: right;
					@include fs(16);
					letter-spacing: 0;
					
					li{
						letter-spacing: normal;
						display: inline-block;
						
						a.active{
							color: #e50012;
							pointer-events: none;
						}
						&:first-child{
							&:after{
								content: "｜";
								display: inline-block;
								margin: 0 5px;
							}
						}
					}
				}
				
				p.copy{
					clear: both;
					@include fs(12);
					margin-top: 40px;
				}
			}
		}
		@media (min-aspect-ratio: 7/10) {
			&>ul{
				margin-top: 0;
				&>li{
					margin-bottom: 10px;
					&>a{
						&+.clearfix{
							display: none;
						}
					}
					
					li.ttl{
						display: none;
					}
				}
			}
		}
		
		&.show{
			@include opacity(1);
			z-index: 9999;
			height: 100%;
		}
	}
}

main{
	margin-top: 100px;
	
	h2.title{
		background: center center no-repeat;
		background-size: cover;
		text-align: center;
		width: 100%;
		height: 380px;
		
		&.wt{
			color: #fff;
		}
		
		.en{
			@include mon(6);
			display: block;
			@include fs(48,1.4,.05);
			padding-top: 140px;
		}
		
		.jp{
			display: block;
			@include fs(21,1,.1);
		}
	}
	
	section#contact{
		padding: 170px 0;
		
		.container{
			width: 84%;
			margin: 0 auto;
			text-align: center;
			
			h2{
				float: none;
				margin-right: 0;
				margin-bottom: 40px;
			}
			
			div{
				float: none;
				
				p{
					@include fs(14,1.8,.1);
					margin-bottom: 80px;
					@include transition(all 0.3s ease 0.2s);
					@include translateY(30px);
					@include opacity(0);
				}
				
				a.btn{
					display: block;
					width: 100%;
					@include fs(16,80px,.1);
					@include mon(6);
					text-align: center;
					@include transition((transpose 0.3s ease 0.3s),(opacity 0.3s ease 0.3s),(background-color 0.3s ease 0s),(color 0.3s ease 0s));
					@include translateY(20px);
					@include opacity(0);
					border: solid 1px #222;
					background-color: #fff;
					text-decoration: none;
					
					&:hover{
						background-color: #222;
						color: #fff;
					}
				}
			}
		}
		
		&.active{
			.container{
				h2{
					.en,.jp{
						@include translateY(0);
						@include opacity(1);
						
						&:after{
							width: 100%;
						}
					}
					
				}
				
				div{
					p,a{
						@include translateY(0);
						@include opacity(1);
					}
				}
			}
		}
	}
}

footer{
	padding: 40px 0;
	text-align: center;
	
	#footer_nav{
		display: none;
	}
	
	address{
		margin: 80px 0;
		
		h5{
			@include fs(18,1.5,.1);
			margin-bottom: 60px;
			
			span{
				display: block;
				@include fs(15);
			}
		}
		
		p{
			@include fs(16,2,.1);
		}
	}
	
	div.clearfix{
		@include mon(6);
		
		p#copy{
			float: none;
			@include fs(10,2.8,.1);
		}
		
		ul.lang{
			display: none;
		}
	}
}

#btn_top{
	position: fixed;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #e50012;
	bottom: -100px;
	right: 40px;
	@include transition(all 0.3s ease 0s);
	z-index: 999;
	
	&:after{
		content: "";
		width: 14px;
		height: 14px;
		position: absolute;
		top: 25px;
		left: 0;
		right: 0;
		margin: auto;
		border-top: solid 1px #fff;
		border-right: solid 1px #fff;
		@include rotate(-45deg);
	}
	
	&:hover{
		@include opacity(.7);
	}
	
	&.show{
		bottom: 40px;
	}
}

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

}