@charset "utf-8";

@import "setting";

#body_company{
	
	h3{
		text-align: center;
		margin-bottom: 80px;
		
		.en01{
			display: block;
			@include mon(6);
			@include fs(15,3,.05);
			@include transition(all 0.4s ease 0.1s);
			@include opacity(0);
			@include translateY(40px);
		}
		
		.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.2s);
			@include opacity(0);
			@include translateY(30px);
		}
		
		.jp{
			display: block;
			@include fs(16,2,.1);
			@include transition(all 0.4s ease 0.3s);
			@include opacity(0);
			@include translateY(20px);
		}
	}
	
	.active{
		h3{
			span{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
	
	#message{
		padding: 100px 0;
		@include transition(all 0.4s ease 0s);
		@include opacity(0);
		
		p{
			background: url("../images/message.jpg") left top no-repeat;
			min-height: 1150px;
			padding-left: 370px;
			@include fs(18,2,.1);
			@include transition(all 0.4s ease 0.5s);
			@include translateX(40px);
			@include opacity(0);
			
			span{
				float: right;
			}
		}
		
		&.active{
			@include opacity(1);
			
			p{
				@include translateX(0);
				@include opacity(1);
			}
		}
	}
	
	#overview{
		background: url("../images/bg_partner.gif") center center repeat;
		@include transition(all 0.4s ease 0s);
		@include opacity(0);
		padding: 100px 0;
		
		.container{
			background-color: #fff;
			padding: 100px 0;
			@include transition(all 0.5s ease 0.4s);
			@include translateY(60px);
			@include opacity(0);
			
			table{
				width: 720px;
				margin: auto;
				@include fs(16,2,.1);
				
				th{
					width: 200px;
					text-align: left;
					vertical-align: top;
					padding-bottom: 2em;
				}
				
				td{
					text-align: left;
					vertical-align: top;
				}
			}
		}
		
		&.active{
			@include opacity(1);
			
			.container{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
	
	#history{
		padding: 100px 0;
		@include box-shadow(0px 1px 3px rgba(0,0,0,0.1));
		@include transition(all 0.4s ease 0s);
		@include opacity(0);
		
		.container{
			padding: 100px 0;
			@include transition(all 0.5s ease 0.4s);
			@include translateY(60px);
			@include opacity(0);
			
			table{
				width: 720px;
				margin: auto;
				@include fs(16,2,.1);
				
				th{
					width: 110px;
					text-align: left;
					vertical-align: top;
					position: relative;
					border-right: solid 1px #ddd;
					
					&:after{
						content: "";
						width: 5px;
						height: 5px;
						background: #222;
						@include border-radius(100%);
						position: absolute;
						top: 13.5px;
						right: -3px;
					}
				}
				
				td{
					text-align: left;
					vertical-align: top;
					padding-left: 60px;
					padding-bottom: 2em;
				}
				
				tr:first-child th{
					&:before{
						content: "";
						display: block;
						width: 1px;
						height: 13.5px;
						background-color: #fff;
						position: absolute;
						top: 0;
						right: -1px;
					}
				}
				
				tr:last-child th{
					&:before{
						content: "";
						display: block;
						width: 1px;
						height: 150px;
						background-color: #ddd;
						position: absolute;
						top: 0;
						right: -1px;
					}
				}
			}
		}
		&.active{
			@include opacity(1);
			
			.container{
				@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_company{
	
	#message{
		padding-bottom: 100px;
		
		p{
			background: url("../images/message.jpg") center top no-repeat;
			min-height: 0;
			padding-left: 0;
			padding-top: 1200px;
			@include fs(15,2,.1);
			@include transition(all 0.4s ease 0.5s);
			@include translateX(0);
			@include translateY(60px);
			@include opacity(0);
			
			span{
				float: none;
				display: block;
				text-align: right;
			}
		}
		
		&.active{
			@include opacity(1);
			
			p{
				@include translateX(0);
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
	
	#overview{
		
		.container{
			padding: 60px 0;
			
			table{
				width: 100%;
				margin: auto;
				@include fs(14,2,.1);
				
				th{
					display: block;
					text-align: center;
					width: auto;
					padding-bottom:0.5em;
					font-weight: 600;
				}
				
				td{
					text-align: center;
					display: block;
					vertical-align: top;
					padding-bottom: 2em;
					
					a{
						display: block;
					}
				}
			}
		}
		
	}
	
	#history{
		
		.container{
			padding: 40px 0;
			@include transition(all 0.5s ease 0.4s);
			@include translateY(60px);
			@include opacity(0);
			
			table{
				width: 100%;
				margin: auto;
				@include fs(14,2,.1);
				
				th{
					width: 80px;
					text-align: left;
					vertical-align: top;
					position: relative;
					border-right: solid 1px #ddd;
					
					&:after{
						content: "";
						width: 5px;
						height: 5px;
						background: #222;
						@include border-radius(100%);
						position: absolute;
						top: 13.5px;
						right: -3px;
					}
				}
				
				td{
					text-align: left;
					vertical-align: top;
					padding-left: 60px;
					padding-bottom: 2em;
				}
				
				tr:first-child th{
					&:before{
						content: "";
						display: block;
						width: 1px;
						height: 13.5px;
						background-color: #fff;
						position: absolute;
						top: 0;
						right: -1px;
					}
				}
				
				tr:last-child th{
					&:before{
						content: "";
						display: block;
						width: 1px;
						height: 150px;
						background-color: #ddd;
						position: absolute;
						top: 0;
						right: -1px;
					}
				}
			}
		}
		&.active{
			@include opacity(1);
			
			.container{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
}

}