@charset "utf-8";

@import "setting";

#body_partner{
	#partner00{
		text-align: center;
		padding-top: 100px;
		
		h3{
			text-align: center;
			margin-bottom: 80px;

			.en01{
				display: block;
				@include mon(6);
				@include fs(15,3,.05);
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}

			.en02{
				display: inline-block;
				@include mon(6);
				@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(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(25px);
				@include opacity(0);
			}
		}
		
		p{
			@include fs(21,2,.1);
			@include transition(all 0.4s ease 0.5s);
			@include translateY(40px);
			@include opacity(0);
		}
		
		&.active{
			h3 span,p{
				@include translateY(0);
				@include opacity(1);
			}
		}

	}
	
	.partner{
		padding: 120px 0 160px;
		position: relative;
		width: 100%;
		overflow-x: hidden;
		
		.txt{
			img{
				display: block;
				@include transition(all 0.4s ease 0s);
				@include translateX(-60px);
				@include opacity(0);
			}
			
			h4{
				display: inline-block;
				border-bottom: solid 1px #e50012;
				@include fs(18,1.4,.1);
				margin-bottom: 20px;
				padding: 15px 0 30px;
				@include transition(all 0.4s ease 0.1s);
				@include translateX(-50px);
				@include opacity(0);
			}
			
			p{
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateX(-40px);
				@include opacity(0);
			}
			
			a{
				@include mon(6);
				text-decoration: none;
				@include fs(16,2,.1);
				display: inline-block;
				margin-top: 40px;
				@include transition(all 0.4s ease 0.3s);
				@include translateX(-30px);
				@include opacity(0);
				
				&:hover{
					text-decoration: underline;
				}
			}
		}
		
		.img{
			line-height: 0;
			@include transition(all 0.4s ease 0.5s);
			@include translateX(60px);
			@include opacity(0);
		}
		
		&:after{
			content: "";
			display: block;
			position: absolute;
			width: calc(50% + 240px);
			height: 200px;
			bottom: 0;
			right: 0;
			background: url("../images/bg_partner.gif") center center repeat;
			z-index: -1;
			@include transition(all 0.4s ease 0.7s);
			@include translateX(100px);
			@include opacity(0);
		}
		
		&.active{
			.txt{
				img,h4,p,a{
					@include translateX(0);
					@include opacity(1);
				}
			}
			
			.img,&:after{
				@include translateX(0);
				@include opacity(1);
			}
		}
	}
	
	#partner01{
		.txt{
			float: left;
		}
		.img{
			float: right;
		}
	}
	
	#partner02{
		.txt{
			float: right;
			
			img{@include translateX(60px);}
			h4{@include translateX(50px);}
			p{@include translateX(40px);}
			a{@include translateX(30px);}
		}
		.img{
			float: left;
			@include translateX(-60px)
		}
		
		&:after{
			left: 0;
			right: auto;
			@include translateX(-100px)
		}
		
		&.active{
			.txt{
				img,h4,p,a{
					@include translateX(0);
					@include opacity(1);
				}
			}
			
			.img,&:after{
				@include translateX(0);
				@include opacity(1);
			}
		}
	}
	
	#partner03{
		.txt{
			float: left;
		}
		.img{
			float: right;
		}
	}
}

@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_partner{
	#partner00{
		
		p{
			@include fs(18,2,.1);
			text-align: left;
		}

	}
	
	.partner{
		padding: 120px 0 0;
		position: relative;
		
		.txt{
			text-align: center;
			padding-top: 100px;
			width: 100%;
			
			img{
				display: block;
				@include transition(all 0.4s ease 0s);
				@include translateX(-60px);
				@include opacity(0);
				margin: 0 auto;
			}
			
			h4{
				display: inline-block;
				border-bottom: solid 1px #e50012;
				@include fs(18,1.4,.1);
				margin-bottom: 20px;
				padding: 15px 0 30px;
				@include transition(all 0.4s ease 0.1s);
				@include translateX(-50px);
				@include opacity(0);
			}
			
			p{
				@include fs(16,2,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateX(-40px);
				@include opacity(0);
			}
			
			a{
				@include mon(6);
				text-decoration: none;
				@include fs(16,2,.1);
				display: inline-block;
				margin-top: 40px;
				@include transition(all 0.4s ease 0.3s);
				@include translateX(-30px);
				@include opacity(0);
				
				&:hover{
					text-decoration: underline;
				}
			}
		}
		
		.img{
			line-height: 0;
			@include transition(all 0.4s ease 0s);
			@include translateX(60px);
			@include opacity(0);
			
			img{
				max-width: 100%;
				height: auto;
			}
		}
		
		&:after{
			content: "";
			display: block;
			position: absolute;
			width: calc(50% + 240px);
			height: 200px;
			top: 300px;
			right: 0;
			background: url("../images/bg_partner.gif") center center repeat;
			z-index: -1;
			@include transition(all 0.4s ease 0.1s);
			@include translateX(100px);
			@include opacity(0);
		}
		
		&.active{
			.txt{
				img,h4,p,a{
					@include translateX(0);
					@include opacity(1);
				}
			}
			
			.img,&:after{
				@include translateX(0);
				@include opacity(1);
			}
		}
	}
	
	#partner01{
		.txt{
			float: left;
		}
		.img{
			float: right;
		}
	}
	
	#partner02{
		.txt{
			float: right;
			
			img{@include translateX(60px);}
			h4{@include translateX(50px);}
			p{@include translateX(40px);}
			a{@include translateX(30px);}
		}
		.img{
			float: left;
			@include translateX(-60px)
		}
		
		&:after{
			left: 0;
			right: auto;
			@include translateX(-100px)
		}
		
		&.active{
			.txt{
				img,h4,p,a{
					@include translateX(0);
					@include opacity(1);
				}
			}
			
			.img,&:after{
				@include translateX(0);
				@include opacity(1);
			}
		}
	}
	
	#partner03{
		.txt{
			float: left;
		}
		.img{
			float: right;
		}
	}
}

}