@charset "utf-8";

@import "setting";

#body_index{
	aside{
		width: 100%;
		height: calc(100vh - 140px);
		position: relative;
		
		ul{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			
			li{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: center center no-repeat;
				background-size: cover;
				@include transition(all 0.6s ease 0s);
				@include opacity(0);
				
				&.active{
					@include opacity(1);
				}
			}
		}
		
		span{
			display: block;
			color: #fff;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 550px;
			height: 130px;
			@include mon;
			@include fs(64,1);
			@include transition(all 0.6s ease 0s);
			@include opacity(1);
			
			&.hide{
				@include opacity(0);
			}
			
			strong{
				font-weight: 600;
				display: block;
				margin-left: 1.2em;
			}
		}
	}
	
	#index01{
		background: url("../images/img_index01.jpg") center right no-repeat #fff;
		padding: 90px 0;
		@include transition(all 0.8s ease 0s);
		@include opacity(0);
		@include translateY(40px);
		
		h2{
			display: inline-block;
			@include fs(32,1.6,.1);
			margin-bottom: 30px;
			padding-bottom: 15px;
			border-bottom: solid 1px #e50012;
			@include transition(all 0.6s ease 0.2s);
			@include opacity(0);
			@include translateY(40px);
		}
		
		p{
			@include fs(16,2,.1);
			margin-bottom: 50px;
			@include transition(all 0.6s ease 0.3s);
			@include opacity(0);
			@include translateY(40px);
		}

		a.btn{
			display: block;
			width: 240px;
			@include fs(16,50px,.1);
			@include mon(6);
			text-align: center;
			border: solid 1px #222;
			background-color: #fff;
			text-decoration: none;
			@include transition((background-color 0.3s ease 0s),(color 0.3s ease 0s),(transform 0.6s ease 0.3s),(opacity 0.8s ease 0.3s));
			@include opacity(0);
			@include translateY(40px);

			&:hover{
				background-color: #222;
				color: #fff;
			}
		}
		
		&.active{
			@include opacity(1);
			@include translateY(0);
			
			h2,p,a.btn{
				@include opacity(1);
				@include translateY(0);
			}
		}
	}
	
	#index02{
		padding: 60px 0 0;
		@include transition(all 0.8s ease 0s);
		@include opacity(0);
		@include translateY(40px);
		
		h2{
			text-align: center;
			margin-bottom: 80px;
			.en{
				display: inline-block;
				@include mon(6);
				@include fs(45,1,.05);
				margin-bottom: 15px;
				padding-bottom: 20px;
				@include transition(all 0.4s ease 0.1s);
				@include opacity(0);
				@include translateY(40px);
				
				&:after{
					content: "";
					display: block;
					width: 0;
					height: 1px;
					background-color: #e50012;
					margin: 10px auto 0;
					@include transition(all 0.4s ease 0.1s);
				}
			}
			.jp{
				display: block;
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include opacity(0);
				@include translateY(40px);
			}
		}
		
		ul{
			li{
				float: left;
				width: calc(50% - 0.5px);
				height: 450px;
				text-align: center;
				@include transition(all 0.4s ease 0.5s);
				@include opacity(0);
				@include translateY(30px);
				
				&:nth-child(2n){
					float: right;
					@include transition(all 0.4s ease 0.6s);
					@include translateY(20px);
				}
				
				a{
					display: block;
					color: #fff;
					text-decoration: none;
					position: relative;
					@include transition(all 0.3s ease 0s);
					background: center center no-repeat;
					background-size: 100%;
					@include box-sizing;
					width: 100%;
					height: 100%;
					
					.en{
						position: relative;
						display: block;
						padding-top: 195px;
						@include mon(6);
						@include fs(32,2,.1);
						z-index: 2;
					}
					
					.jp{
						position: relative;
						display: block;
						@include fs(16,1,.1);
						z-index: 2;
					}
					
					&:before{
						content: "";
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						background-color: rgba(0,0,0,0);
						@include transition(all 0.3s ease 0s);
						z-index: 0;
					}
					
					&:hover{
						background-size: 105%;
						
						&:before{
							background-color: rgba(0,0,0,0.4);
						}
					}
				}
			}
		}
		
		&.active{
			@include opacity(1);
			@include translateY(0);
			
			h2{
				.en,.jp{
					@include opacity(1);
					@include translateY(0);
					
					&:after{
						width: 100%;
					}
				}
			}
			
			ul{
				li:nth-child(n){
					@include opacity(1);
					@include translateY(0);
				}
			}
		}
	}
	
	#index03{
		padding: 120px 0;
		background: url("../images/bg_partner.gif") center center repeat;
		@include transition(all 0.8s ease 0s);
		@include opacity(0);
		
		h2{
			text-align: center;
			margin-bottom: 80px;
			
			.en{
				display: inline-block;
				@include mon(6);
				@include fs(45,1,.05);
				margin-bottom: 15px;
				padding-bottom: 20px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include opacity(0);
				@include translateY(40px);
			}
			.jp{
				display: block;
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include opacity(0);
				@include translateY(40px);
			}
		}
		
		ul{
			letter-spacing: -.4em;
			text-align: center;
			
			li{
				display: inline-block;
				letter-spacing: normal;
				width: calc(50% - 20px);
				height: 280px;
				margin: 0 10px;
				@include transition(all 0.4s ease 0.5s);
				@include opacity(0);
				@include translateY(30px);
				
				&:nth-child(2){
					@include transition(all 0.4s ease 0.6s);
					@include translateY(20px);
				}
				
				a{
					display: block;
					width: 100%;
					height: 100%;
					text-decoration: none;
					background-color: #fff;
					@include transition(all 0.3s ease 0s);
					
					.en{
						padding-top: 90px;
						display: block;
						@include mon(6);
						@include fs(32,2,.1);
					}
					
					.jp{
						display: block;
						@include fs(16,1,.1);
					}
					
					&:hover{
						background-color: #222;
						color: #fff;
					}
				}
			}
		}
		
		&.active{
			@include opacity(1);
			
			h2{
				.en,.jp{
					@include opacity(1);
					@include translateY(0);
				}
			}
			
			ul{
				li:nth-child(n){
					@include opacity(1);
					@include translateY(0);
				}
			}
		}
	}
}

@media screen and (max-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){
#body_index{
	aside{
		width: 100%;
		height: 0;
		padding-top: 70%;
		position: relative;
		
		ul{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			
			li{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: center center no-repeat;
				background-size: cover;
				@include transition(all 0.6s ease 0s);
				@include opacity(0);
				
				&.active{
					@include opacity(1);
				}
			}
		}
		
		span{
			display: block;
			color: #fff;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 550px;
			height: 130px;
			@include mon;
			@include fs(48,1);
			@include transition(all 0.6s ease 0s);
			@include opacity(1);
			
			&.hide{
				@include opacity(0);
			}
			
			strong{
				font-weight: 600;
				display: block;
				margin-left: 1.2em;
			}
		}
	}
	
	#index01{
		background: url("../images/img_index01.jpg") bottom right no-repeat #fff;
		padding: 90px 0 480px;
		
		h2{
			@include fs(24,1.6,.1);
		}
		
		p{
		}

		a.btn{
			width: 100%;
			@include fs(16,80px,.1);
		}
	}
	
	#index02{
		padding: 60px 0 0;
		
		h2{
			margin-bottom: 60px;
		}
		
		ul{
			li{
				float: none;
				width: 100%;
				height: 450px;
				
				a{
					
					.en{
						padding-top: 180px;
					}
				}
			}
		}
	}
	
	#index03{
		
		h2{
			text-align: center;
			margin-bottom: 80px;
			
			.en{
				display: inline-block;
				@include mon(6);
				@include fs(45,1,.05);
				margin-bottom: 15px;
				padding-bottom: 20px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include opacity(0);
				@include translateY(40px);
			}
			.jp{
				display: block;
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include opacity(0);
				@include translateY(40px);
			}
		}
		
		ul{
			letter-spacing: normal;
			
			li{
				display: block;
				width: 100%;
				height: 200px;
				margin: 10px 0;
				
				a{
					display: block;
					width: 100%;
					height: 100%;
					text-decoration: none;
					background-color: #fff;
					@include transition(all 0.3s ease 0s);
					
					.en{
						padding-top: 40px;
						display: block;
						@include mon(6);
						@include fs(32,2,.1);
					}
					
					.jp{
						display: block;
						@include fs(16,1,.1);
					}
					
					&:hover{
						background-color: #222;
						color: #fff;
					}
				}
			}
		}
		
		&.active{
			@include opacity(1);
			
			h2{
				.en,.jp{
					@include opacity(1);
					@include translateY(0);
				}
			}
			
			ul{
				li{
					@include opacity(1);
					@include translateY(0);
				}
			}
		}
	}
}

}