@charset "utf-8";

@import "setting";

#body_products{
	.container{
		width: 880px;
	}
	.products_nav{
		padding: 60px 0;
		ul{
			@include pie-clearfix;
			text-align: center;
			@include mon(6);
			@include fs(18,60px,.05);
			
			li{
				float: left;
				width: 184px;
				margin-right: 48px;
				border-bottom: solid 1px #ccc;
				
				&:nth-child(4n){
					margin-right: 0;
				}
				
				a{
					display: block;
					text-decoration: none;
					
					&:hover{
						background-color: rgba(0,0,0,0.1);
					}
				}
				
				&.active{
					border-bottom-color: #e50012;
					
					a{
						pointer-events: none;
					}
				}
			}
		}
	}
	
	.prd_index{
		padding: 60px 0 0;
		text-align: center;
		
		h3{
			.en01{
				@include mon(6);
				@include fs(15,3,.05);
				display: block;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			.en02{
				@include mon(6);
				display: inline-block;
				@include fs(45,1,.05);
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp{
				display: block;
				@include fs(24,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			&.active{
				span{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h6{
			display: inline-block;
			width: auto;
			background-color: #0045aa;
			color: #fff;
			margin: 50px auto;
			padding: 0 8px;
			@include fs(16,2,.1);
			@include transition(all 0.4s ease 0s);
			@include translateY(30px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		h4{
			@include fs(21,2,.2);
			margin-bottom: 60px;
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		#slide{
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
			#stage{
				position: relative;
				width: 100%;
				padding-top: 66%;
				
				li{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					@include transition(all 0.6s ease 0s);
					@include opacity(0);
					z-index: -1;
					
					&.active{
						@include opacity(1);
						z-index: 1;
					}
					
					a{
						display: block;
						width: 100%;
						height: 100%;
						background: center center no-repeat;
						background-size: cover;
						@include transition(opacity 0.3s ease 0s);
						
						&:hover{
							@include opacity(.8);
						}
					}
				}
			}
			
			#thumb{
				width: 100%;
				@include pie-clearfix;
				margin-top: 8px;
				
				li{
					float: left;
					width: 140px;
					height: 95px;
					margin-right: 8px;
					cursor: pointer;
					@include transition(opacity .3s ease 0s);
					@include opacity(.7);
					background: center center no-repeat;
					background-size: cover;
					
					&:nth-child(6n){margin-right: 0;}
					
					&:hover{
						@include opacity(.9);
					}
					
					&.active,&.active:hover{
						cursor: auto;
						@include opacity(1);
					}
				}
				
			}
		}
	}
	
	.prd_content{
		padding-top: 120px;
		&.bb .container{
			padding-bottom: 60px;
			border-bottom: solid 1px #ccc;
			
			&>h4{
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
				
				&.active{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h3{
			text-align: center;
			@include fs(18,2.5,.075);
			margin-bottom: 60px;
			
			.en{
				display: block;
				color: #e50012;
				@include mon(6);
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			.jp01{
				display: inline-block;
				padding: 10px 0;
				margin-bottom: 20px;
				@include fs(32,1.5,.075);
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp02{
				display: block;
				@include transition(all 0.4s ease 0.2s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			i{
				display: inline-block;
				width: 95px;
				background-color: #e50012;
				color: #fff;
				@include fs(12,2,0);
				@include transition(all 0.4s ease 0.3s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			&+p{
				@include fs(18,2,.1);
				@include transition(all 0.4s ease 0.6s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			&.active{
				span,i{
					@include translateY(0);
					@include opacity(1);
				}
				
				&+p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h4.ttl01{
			margin-bottom: 20px;
			@include fs(24,2,.075);
			
			em{
				color: #e50012;
			}
			
			span{
				@include fs(16,2,0);
			}
			
			i{
				display: block;
				text-align: center;
				width: 100px;
				@include fs(12,2,0);
				background-color: #e50012;
				color: #fff;
				
				&.bl{
					background-color: #1829b9;
				}
			}
		}
		
		.col-1{
			margin: 40px auto;
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
			
			p{
				margin-top: 20px;
				@include fs(16,2,.1);
			}
			
			h6{
				@include fs(16);
				text-align: center;
				margin: 40px 0 10px;
				
				em{
					display: block;
					color: #e50012;
					@include fs(24);
					
					strong{
						font-weight: 600;
						@include fs(32);
					}
				}
			}
		}
		
		.col-2{
			@include pie-clearfix;
			
			li{
				float: left;
				width: 410px;
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
				
				&:nth-child(2){
					@include transition(all 0.4s ease 0.1s);
					@include translateY(30px);
				}
				
				&:nth-child(3){
					@include transition(all 0.4s ease 0.2s);
					@include translateY(20px);
				}
				
				&:nth-child(4){
					@include transition(all 0.4s ease 0.3s);
					@include translateY(10px);
				}
				
				&:nth-child(2n+1){
					margin-right: 60px;
					clear: left;
				}
				
				h5{
					margin: 10px 0;
					text-align: center;
					@include fs(20,2.2,.075);
				}
				
				p{
					@include fs(16,2,.1);
					margin-top: 10px;
				}
			}
			
			&.active{
				li{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		.col-3{
			@include pie-clearfix;
			margin: 40px auto;
			
			li{
				float: left;
				width: 270px;
				margin-right: 35px;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
				
				&:nth-child(3n+2){
					@include transition(all 0.4s ease 0.1s);
					@include translateY(30px);
				}
				
				&:nth-child(3n){
					@include transition(all 0.4s ease 0.2s);
					@include translateY(20px);
					margin-right: 0;
				}
				
				i{
					display: block;
					width: 50px;
					@include fs(24,50px,0);
					text-align: center;
					@include border-radius(100%);
					background-color: #e50012;
					color: #fff;
					margin: auto;
				}
				
				h6{
					@include mon(6);
					text-align: center;
					@include fs(16,2,.075);
					margin: 10px auto;
					text-align: center;
					color: #e50012;
				}
				
				h4{
					text-align: center;
					min-height: 50px;
					@include fs(18,1.5,.075);
					margin-bottom: 20px;
					
					span{
						@include fs(16);
						display: block;
					}
				}
				
				h5{
					margin: 10px 0;
					@include fs(18,1.5,.05);
					color: #e50012;
					
					&.en{
						@include mon(6);
						@include fs(24,1.8,.075);
						color: #222;
					}
				}
				
				p{
					@include fs(16,2,.1);
				}
			}
			&.active{
				li{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		.check{
			margin: 40px auto;
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
			
			h5{
				@include fs(18,1.4,.075);
				margin-bottom: 10px;
			}
			
			table{
				width: 100%;
				
				th{
					padding: 30px 40px;
					width: 320px;
					position: relative;
					background-color: #ddd;
					@include fs(14,2,.075);
					text-align: left;
					vertical-align: middle;
					
					span{
						display: block;
						padding-left: 20px;
						@include fs(15);
					}
					
					&:after{
						content: "";
						display: block;
						position: absolute;
						width: 0;
						height: 0;
						border-left: solid 30px #ddd;
						border-top: solid 18px transparent;
						border-bottom: solid 18px transparent;
						top: 0;
						bottom: 0;
						right: -30px;
						margin: auto;
						z-index: 1;
					}
				}
				
				td{
					padding: 30px 0 30px 50px;
					position: relative;
					background-color: #e50012;
					color: #fff;
					@include fs(16,2,.075);
					text-align: left;
					vertical-align: middle;
					
					span{
						display: block;
						padding-left: 20px;
						@include fs(20);
					}
				}
			}
		}
		
		.clearfix{
			margin-top: 40px;
			padding-bottom: 120px;
			
			img{
				float: left;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			.txt{
				float: right;
				clear: right;
				margin-bottom: 80px;
				width: 260px;
				@include transition(all 0.4s ease 0.3s);
				@include translateY(30px);
				@include opacity(0);
				
				h5{
					@include fs(18,2,.075);
					padding-bottom: 5px;
					border-bottom: solid 2px #f7b52c;
					margin-bottom: 5px;
				}
				
				p{
					@include fs(16,2,.1);
					padding-left: 10px;
				}
				
				&+.txt{
					@include transition(all 0.4s ease 0.5s);
					@include translateY(20px);
					@include opacity(0);
					
					h5{
						border-bottom-color: #2ca6e0;
					}
				}
			}
			
			&.active{
				img,.txt{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		#flit_fig{
			ul{
				position: relative;
				width: 100%;
				height: 1300px;
				
				li{
					position: absolute;
					width: 270px;
					height: 260px;
					@include transition(all 0.4s ease 0s);
					@include opacity(0);
					
					p{
						@include fs(12,1.5,.1);
						min-height: 3em;
					}
					
					&.txt{
						width: 590px;
						top: 260px;
						left: 0;
						@include translateY(40px);
						
						h4{
							@include fs(21,1.6,.075);
							color: #e50012;
							margin-bottom: 10px;
							padding-bottom: 10px;
							border-bottom: solid 1px #e50012;
						}
						
						p{
							@include fs(16,1.5,.1);
						}
					}
					
					&.img{
						top: 520px;
						left: 305px;
						@include transition(all 0.4s ease 0.1s);
						@include translateY(30px);
					}
					
					&:nth-child(3),&:nth-child(4){
						top: 0;
						left: 0;
						&:after{
							content: "";
							display: block;
							position: absolute;
							width: 0;
							height: 0;
							top: 75px;
							right: -24px;
							border-left: solid 9px #0d3387;
							border-top: solid 12px transparent;
							border-bottom: solid 12px transparent;
						}
					}
					
					&:nth-child(5),&:nth-child(6),&:nth-child(7),&:nth-child(8),&:nth-child(9){
						top: 0;
						right: 0;
						&:after{
							content: "";
							display: block;
							position: absolute;
							width: 0;
							height: 0;
							bottom: 30px;
							left: 0;
							right: 0;
							margin: auto;
							border-top: solid 9px #0d3387;
							border-left: solid 12px transparent;
							border-right: solid 12px transparent;
						}
					}
					
					&:nth-child(10),&:nth-child(11){
						top: 1040px;
						left: 0;
						
						&:after{
							content: "";
							display: block;
							position: absolute;
							width: 0;
							height: 0;
							top: 75px;
							right: -20px;
							border-right: solid 9px #0d3387;
							border-top: solid 12px transparent;
							border-bottom: solid 12px transparent;
						}
					}
					
					&:nth-child(12),&:nth-child(13){
						top: 520px;
						left: 0;
						&:after{
							content: "";
							display: block;
							position: absolute;
							width: 0;
							height: 0;
							bottom: 15px;
							left: 0;
							right: 0;
							margin: auto;
							border-bottom: solid 9px #0d3387;
							border-left: solid 12px transparent;
							border-right: solid 12px transparent;
						}
					}
					
					&:nth-child(3){@include transition(all 0.4s ease 0.2s);}
					&:nth-child(4){@include transition(all 0.4s ease 0.3s);left: 305px;}
					&:nth-child(5){@include transition(all 0.4s ease 0.4s);&:after{bottom: 15px;}}
					&:nth-child(6){@include transition(all 0.4s ease 0.5s);top: 260px;}
					&:nth-child(7){@include transition(all 0.4s ease 0.6s);top: 520px;}
					&:nth-child(8){@include transition(all 0.4s ease 0.7s);top: 780px; &:after{bottom: 15px;}}
					&:nth-child(9){@include transition(all 0.4s ease 0.8s);top: 1040px; &:after{display: none;}}
					&:nth-child(10){@include transition(all 0.4s ease 0.9s);left: 305px}
					&:nth-child(11){@include transition(all 0.4s ease 1.0s);}
					&:nth-child(12){@include transition(all 0.4s ease 1.1s);top: 780px}
					&:nth-child(13){@include transition(all 0.4s ease 1.2s);}
				}
			}
			
			&.active ul li{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
	
	.fk-2_tribe{
		padding: 80px 0;
		background: url("../images/bg_partner.gif") center center repeat;
		@include transition(all 0.4s ease 0s);
		@include opacity(0);
		
		h3{
			text-align: center;
			@include fs(18,2.5,.075);
			margin-bottom: 60px;
			
			.en{
				display: block;
				color: #e50012;
				@include mon(6);
				@include fs(14);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(40px);
				@include opacity(0);
			}
			.jp01{
				display: block;
				@include transition(all 0.4s ease 0.3s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp02{
				display: inline-block;
				padding: 0 0 10px;
				margin-bottom: 20px;
				@include mon(6);
				@include fs(32,1.5,.075);
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.4s);
				@include translateY(20px);
				@include opacity(0);
			}
		}
		
		.container>div{
			background-color: #fff;
			padding: 60px;
			border: solid 1px #ccc;
			text-align: center;
			@include transition(all 0.4s ease 0s);
			@include translateY(20px);
			@include opacity(0);
			
			&>p{
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			ul{
				letter-spacing: -.4em;
				margin-bottom: 100px;
				
				li{
					display: inline-block;
					letter-spacing: normal;
					margin-top: 60px;
					width: 360px;
					@include transition(all 0.4s ease 0.4s);
					@include translateY(40px);
					@include opacity(0);
					
					&:nth-child(2){
						@include transition(all 0.4s ease 0.5s);
						@include translateY(30px);
					}
					
					&:nth-child(3){
						@include transition(all 0.4s ease 0.6s);
						@include translateY(20px);
					}
					
					&:nth-child(4){
						@include transition(all 0.4s ease 0.7s);
						@include translateY(10px);
					}
					
					img{
						height: 125px;
						width: auto;
					}
					
					p{
						margin-top: 10px;
						line-height: 1.8;
					}
				}
			}
			
			&>a{
				display: block;
				width: 200px;
				@include mon(6);
				@include fs(12,40px,.1);
				text-decoration: none;
				border: solid 1px #222;
				@include transition((background-color 0.3s ease 0s),(transpose 0.4s ease 0.8s),(opacity 0.4s ease 0.8s));
				@include translateY(40px);
				@include opacity(0);
				margin: auto;
				
				&:hover{
					background-color: #eee;
				}
			}
			
			&.active{
				@include translateY(0);
				@include opacity(1);
				
				&>p,ul li,&>a{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		&.active{
			@include opacity(1);
			
			h3{
				span{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
	}
	
	.movie{
		padding: 100px 0;
		text-align: center;
		
		
		h4{
			margin-bottom: 60px;
			@include mon;
			@include fs(22,2,.1);
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			
			strong{
				font-weight: 600;
			}
		}
		
		iframe{
			@include transition(all 0.4s ease 0.1s);
			@include translateY(30px);
			@include opacity(0);
		}
		
		&.active{
			h4,iframe{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
}

@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_products{
	img{
		max-width: 100%;
		height: auto;
	}
	
	.container{
		width: 84%;
	}
	.products_nav{
		padding: 40px 0;
		ul{
			@include pie-clearfix;
			text-align: center;
			@include mon(6);
			@include fs(18,60px,.05);
			
			li{
				float: left;
				width: 48%;
				margin-right: 4%;
				border-bottom: solid 1px #ccc;
				margin-top: 20px;
				
				&:nth-child(2n){
					margin-right: 0;
				}
				
				a{
					display: block;
					text-decoration: none;
					
					&:hover{
						background-color: rgba(0,0,0,0.1);
					}
				}
				
				&.active{
					border-bottom-color: #e50012;
					
					a{
						pointer-events: none;
					}
				}
			}
		}
	}
	
	.prd_index{
		padding: 60px 0 0;
		text-align: center;
		
		h3{
			.en01{
				@include mon(6);
				@include fs(15,3,.05);
				display: block;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			.en02{
				@include mon(6);
				display: inline-block;
				@include fs(45,1,.05);
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp{
				display: block;
				@include fs(24,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			&.active{
				span{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h6{
			display: inline-block;
			width: auto;
			background-color: #0045aa;
			color: #fff;
			margin: 50px auto;
			padding: 0 8px;
			@include fs(16,2,.1);
			@include transition(all 0.4s ease 0s);
			@include translateY(30px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		h4{
			@include fs(18,2,.2);
			margin-bottom: 60px;
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		#slide{
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
			#stage{
				position: relative;
				width: 100%;
				padding-top: 66%;
				
				li{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					@include transition(all 0.6s ease 0s);
					@include opacity(0);
					z-index: -1;
					
					&.active{
						@include opacity(1);
						z-index: 1;
					}
					
					a{
						display: block;
						width: 100%;
						height: 100%;
						background: center center no-repeat;
						background-size: cover;
						@include transition(opacity 0.3s ease 0s);
						
						&:hover{
							@include opacity(.8);
						}
					}
				}
			}
			
			#thumb{
				width: 100%;
				@include pie-clearfix;
				margin-top: 40px;
				text-align: center;
				
				li{
					float: none;
					display: inline-block;
					width: 10px;
					height: 10px;
					margin: 0 10px;
					cursor: pointer;
					background: #222 !important;
					@include border-radius(100%);
					@include opacity(.2);
					
					&:nth-child(6n){margin-right: 10px;}
					
					&:hover{
						@include opacity(.9);
					}
					
					&.active,&.active:hover{
						cursor: auto;
						@include opacity(1);
					}
				}
				
			}
		}
	}
	
	.prd_content{
		padding-top: 120px;
		&.bb .container{
			padding-bottom: 60px;
			border-bottom: solid 1px #ccc;
			
			&>h4{
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
				
				&.active{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h3{
			text-align: center;
			@include fs(18,2.5,.075);
			margin-bottom: 60px;
			
			.en{
				display: block;
				color: #e50012;
				@include mon(6);
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			.jp01{
				display: inline-block;
				padding: 10px 0;
				margin-bottom: 20px;
				@include fs(24,1.5,.075);
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp02{
				display: block;
				@include transition(all 0.4s ease 0.2s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			i{
				display: inline-block;
				width: 95px;
				background-color: #e50012;
				color: #fff;
				@include fs(12,2,0);
				@include transition(all 0.4s ease 0.3s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			&+p{
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.6s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			&.active{
				span,i{
					@include translateY(0);
					@include opacity(1);
				}
				
				&+p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h4.ttl01{
			margin-bottom: 20px;
			@include fs(20,1.5,.075);
			
			em{
				color: #e50012;
			}
			
			span{
				display: block;
				@include fs(16,2,0);
			}
			
			i{
				display: block;
				text-align: center;
				width: 100px;
				@include fs(12,2,0);
				background-color: #e50012;
				color: #fff;
				margin-bottom: 10px;
				
				&.bl{
					background-color: #1829b9;
				}
			}
		}
		
		.col-1{
			margin: 40px auto;
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
			
			p{
				margin-top: 20px;
				@include fs(14,2,.1);
			}
			
			h6{
				@include fs(16);
				text-align: center;
				margin: 40px 0 10px;
				
				em{
					display: block;
					color: #e50012;
					@include fs(24);
					
					strong{
						font-weight: 600;
						@include fs(32);
					}
				}
			}
		}
		
		.col-2{
			@include pie-clearfix;
			
			li{
				float: left;
				width: 48%;
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
				
				&:nth-child(2){
					@include transition(all 0.4s ease 0.1s);
					@include translateY(30px);
				}
				
				&:nth-child(3){
					@include transition(all 0.4s ease 0.2s);
					@include translateY(20px);
				}
				
				&:nth-child(4){
					@include transition(all 0.4s ease 0.3s);
					@include translateY(10px);
				}
				
				&:nth-child(2n+1){
					margin-right: 4%;
					clear: left;
				}
				
				h5{
					margin: 10px 0;
					text-align: center;
					@include fs(14,2.2,.075);
				}
				
				p{
					@include fs(12,2,.1);
					margin-top: 10px;
				}
			}
			
			&.active{
				li{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		.col-3{
			@include pie-clearfix;
			margin: 40px auto;
			
			li{
				float: none;
				width: 100%;
				margin-right: 0;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
				@include pie-clearfix;
				margin-bottom: 40px;
				
				&:nth-child(3n+2){
					@include transition(all 0.4s ease 0.1s);
					@include translateY(30px);
				}
				
				&:nth-child(3n){
					@include transition(all 0.4s ease 0.2s);
					@include translateY(20px);
					margin-right: 0;
				}
				
				&>img{
					display: inline-block;
					width: 45%;
					height: auto;
					float: left;
					margin-right: 8%;
				}
				
				i{
					display: block;
					width: 50px;
					@include fs(20,50px,0);
					text-align: center;
					@include border-radius(100%);
					background-color: #e50012;
					color: #fff;
					margin: auto;
				}
				
				h6{
					@include mon(6);
					text-align: center;
					@include fs(14,2,.075);
					margin: 10px auto;
					text-align: center;
					color: #e50012;
				}
				
				h4{
					text-align: center;
					min-height: 50px;
					@include fs(18,1.5,.075);
					margin-bottom: 20px;
					
					span{
						@include fs(14);
						display: block;
					}
				}
				
				h5{
					margin: 10px 0;
					@include fs(14,1.5,.05);
					color: #e50012;
					
					&.en{
						@include mon(6);
						@include fs(20,1.8,.075);
						color: #222;
					}
				}
				
				p{
					@include fs(14,2,.1);
				}
			}
			&.active{
				li{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		&#hayabusa03,&#hayabusa04,&#tsurugi01{
			.col-3{
				li{
					position: relative;
					padding-top: 110px;
					
					i{
						position: absolute;
						top: 0;
						left: 15px;
					}
					
					h6{
						width: 80px;
						position: absolute;
						top: 40px;
						left: 0;
					}
					
					h4{
						text-align: left;
						position: absolute;
						top: 0;
						left: 120px;
						
						span{
							display: inline-block;
							margin-left: 20px;
						}
						
						br{display: none;}
					}
					
					h5{
						position: absolute;
						top: 30px;
						left: 120px;
					}
					
					p{
						line-height: 1.8;
						float: right;
						width: 47%;
					}
				}
			}
		}
		
		.check{
			margin: 40px auto;
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
			
			h5{
				text-align: center;
				@include fs(18,1.4,.075);
				margin-bottom: 40px;
			}
			
			table{
				width: 100%;
				
				th{
					display: block;
					padding: 30px 40px;
					width: 100%;
					@include box-sizing;
					position: relative;
					background-color: #ddd;
					@include fs(14,2,.075);
					text-align: center;
					vertical-align: middle;
					
					span{
						display: block;
						padding-left: 0;
						margin-top: 10px;
						@include fs(16);
					}
					
					&:after{
						content: "";
						display: block;
						position: absolute;
						width: 0;
						height: 0;
						border-left: solid 18px transparent;
						border-right: solid 18px transparent;
						border-bottom: none;
						border-top: solid 30px #ddd;
						top: auto;
						bottom: -30px;
						left: 0;
						right: 0;
						margin: auto;
						z-index: 1;
					}
				}
				
				td{
					padding: 30px 50px;
					display: block;
					position: relative;
					background-color: #e50012;
					color: #fff;
					@include fs(16,2,.075);
					text-align: center;
					vertical-align: middle;
					
					span{
						display: block;
						padding-left: 0;
						@include fs(20);
					}
				}
			}
		}
		
		.clearfix{
			margin-top: 40px;
			padding-bottom: 120px;
			
			img{
				float: none;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			.txt{
				float: left;
				clear: none;
				margin-top: 40px;
				margin-bottom: 0;
				width: 48%;
				@include transition(all 0.4s ease 0.3s);
				@include translateY(30px);
				@include opacity(0);
				
				h5{
					@include fs(16,2,.075);
					padding-bottom: 5px;
					border-bottom: solid 2px #f7b52c;
					margin-bottom: 15px;
				}
				
				p{
					@include fs(14,2,.1);
					padding-left: 0;
				}
				
				&+.txt{
					float: right;
					@include transition(all 0.4s ease 0.5s);
					@include translateY(20px);
					@include opacity(0);
					
					h5{
						border-bottom-color: #2ca6e0;
					}
				}
			}
			
			&.active{
				img,.txt{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		#flit_fig{
			ul{
				position: relative;
				width: 100%;
				height: auto;
				padding-bottom: 400px;
				@include pie-clearfix;
				
				li{
					position: relative;
					width: 48%;
					@include transition(all 0.4s ease 0s);
					@include opacity(0);
					
					p{
						@include fs(12,1.5,.1);
						min-height: 3em;
					}
					
					&.txt{
						position: absolute;
						width: 100%;
						height: auto;
						top: auto;
						bottom: 80px;
						left: 0;
						@include translateY(40px);
						
						h4{
							@include fs(20,1.6,.075);
							color: #e50012;
							margin-bottom: 30px;
							padding-bottom: 10px;
							border-bottom: solid 1px #e50012;
						}
						
						p{
							@include fs(14,1.8,.1);
							width: 48%;
						}
					}
					
					&.img{
						position: absolute;
						height: auto;
						top: auto;
						left: auto;
						bottom: 0;
						right: 0;
						@include transition(all 0.4s ease 0.1s);
						@include translateY(30px);
					}
					
					&:nth-child(2n+3){
						float: left;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: 0;
						padding: 70px 0 50px;
						height: 260px;
						
						&:before{
							content: "";
							position: absolute;
							display: block;
							width: 54%;
							height: 50px;
							border-top: solid 1px #0d3387;
							border-left: solid 1px #0d3387;
							top: 0;
							left: 50%;
						}
						
						&:after{
							content: "";
							position: absolute;
							display: block;
							width: 0;
							height: 0;
							border-top: solid 10px #0d3387;
							border-left: solid 12px transparent;
							border-right: solid 12px transparent;
							border-bottom: none;
							top: 50px;
							left: calc(50% - 12px);
							bottom: auto;
							right: auto;
							margin: auto;
						}
					}
					
					&:nth-child(2n+4){
						float: right;
						top: 0;
						left: 0;
						bottom: 0;
						right: 0;
						margin: 0;
						padding: 120px 0 0;
						height: 260px;
						
						&:before{
							content: "";
							position: absolute;
							display: block;
							width: 54%;
							height: 50px;
							border-top: solid 1px #0d3387;
							border-right: solid 1px #0d3387;
							top: 50px;
							right: 50%;
						}
						
						&:after{
							content: "";
							position: absolute;
							display: block;
							width: 0;
							height: 0;
							border-top: solid 10px #0d3387;
							border-left: solid 12px transparent;
							border-right: solid 12px transparent;
							border-bottom: none;
							top: 100px;
							right: calc(50% - 12px);
							bottom: auto;
							left: auto;
							margin: auto;
						}
						
					}
					
					&:nth-child(3){
						padding: 0;
						&:before,&:after{
							display: none;
						}
					}
					
				}
			}
			
			&.active ul li{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
	
	.fk-2_tribe{
		padding: 80px 0;
		background: url("../images/bg_partner.gif") center center repeat;
		@include transition(all 0.4s ease 0s);
		@include opacity(0);
		
		h3{
			text-align: center;
			@include fs(18,2.5,.075);
			margin-bottom: 60px;
			
			.en{
				display: block;
				color: #e50012;
				@include mon(6);
				@include fs(14);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(40px);
				@include opacity(0);
			}
			.jp01{
				display: block;
				@include transition(all 0.4s ease 0.3s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp02{
				display: inline-block;
				padding: 0 0 10px;
				margin-bottom: 20px;
				@include mon(6);
				@include fs(32,1.5,.075);
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.4s);
				@include translateY(20px);
				@include opacity(0);
			}
		}
		
		.container>div{
			background-color: #fff;
			padding: 60px;
			border: solid 1px #ccc;
			text-align: center;
			@include transition(all 0.4s ease 0s);
			@include translateY(20px);
			@include opacity(0);
			
			&>p{
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			ul{
				letter-spacing: -.4em;
				margin-bottom: 100px;
				
				li{
					display: inline-block;
					letter-spacing: normal;
					margin-top: 60px;
					width: 360px;
					@include transition(all 0.4s ease 0.4s);
					@include translateY(40px);
					@include opacity(0);
					
					&:nth-child(2){
						@include transition(all 0.4s ease 0.5s);
						@include translateY(30px);
					}
					
					&:nth-child(3){
						@include transition(all 0.4s ease 0.6s);
						@include translateY(20px);
					}
					
					&:nth-child(4){
						@include transition(all 0.4s ease 0.7s);
						@include translateY(10px);
					}
					
					img{
						height: 125px;
						width: auto;
					}
					
					p{
						margin-top: 10px;
						line-height: 1.8;
					}
				}
			}
			
			&>a{
				display: block;
				width: 100%;
				@include mon(6);
				@include fs(16,80px,.1);
				text-decoration: none;
				border: solid 1px #222;
				@include transition((background-color 0.3s ease 0s),(transpose 0.4s ease 0.8s),(opacity 0.4s ease 0.8s));
				@include translateY(40px);
				@include opacity(0);
				margin: auto;
				
				&:hover{
					background-color: #eee;
				}
			}
			
			&.active{
				@include translateY(0);
				@include opacity(1);
				
				&>p,ul li,&>a{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		&.active{
			@include opacity(1);
			
			h3{
				span{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
	}
	
	.movie{
		padding: 100px 0;
		text-align: center;
		
		
		h4{
			margin-bottom: 60px;
			@include mon;
			@include fs(22,2,.1);
			@include transition(all 0.4s ease 0s);
			@include translateY(40px);
			@include opacity(0);
			
			
			strong{
				font-weight: 600;
			}
		}
		
		iframe{
			@include transition(all 0.4s ease 0.1s);
			@include translateY(30px);
			@include opacity(0);
			width: 84%;
			height: 48vw;
		}
		
		&.active{
			h4,iframe{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
}

}