@charset "utf-8";

@import "setting";

#body_item{
	.item_nav{
		margin: 150px auto 0;
		text-align: center;
		
		.container{
			width: 880px;
		}
		
		ul{
			@include pie-clearfix;
			
			li{
				float: left;
				width: 240px;
				margin-right: 80px;
				margin-bottom: 10px;
				@include mon(6);
				
				&:nth-child(3n){
					margin-right: 0;
				}
				
				a{
					text-decoration: none;
					display: block;
					@include fs(18,80px,.05);
					border-bottom: solid 1px #ccc;
					@include transition(all 0.3s ease 0s);
					
					&:hover{
						background-color: rgba(0,0,0,0.1);
					}
				}
			}
		}
		
		&+#contact{
			margin-top: 150px;
			border-top: solid 1px #ccc;
		}
	}
	.item{
		padding: 120px 0 0;
		
		.container{
			width: 880px;
		}
		
		h3{
			text-align: center;
			margin-bottom: 80px;
			
			.en{
				display: block;
				@include mon(6);
				@include fs(18,2,.05);
				margin-bottom: 10px;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			.jp01{
				display: block;
				@include fs(32,1.4,.05);
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			img{
				display: inline-block;
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.2s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			.jp02{
				display: block;
				@include fs(18,1.4,.1);
				color: #e50012;
				@include transition(all 0.4s ease 0.3s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			&.active{
				&>*{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h4.ttl01{
			text-align: center;
			@include fs(24,1.5,.2);
			margin-bottom: 30px;
			padding-bottom: 10px;
			border-bottom: solid 1px #ccc;
			@include transition(all 0.4s ease 0s);
			@include translateY(20px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		h4.ttl02{
			margin: 60px auto 30px;
			text-align: center;
			@include fs(22,2,.075);
			color: #e50012;
			@include transition(all 0.4s ease 0s);
			@include translateY(20px);
			@include opacity(0);
			
			&+p{
				@include fs(16,1.8,.1);
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				@include translateY(0);
				@include opacity(1);
				
				&+p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		div.clearfix{
			img{
				float: left;
				display: inline-block;
				margin-left: 40px;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			p{
				float: right;
				width: 440px;
				@include fs(16,1.8,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				img,p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		ul.fig_list{
			@include pie-clearfix;
			
			li{
				float: left;
				width: 410px;
				@include transition(all 0.4s ease 0s);
				@include translateY(30px);
				@include opacity(0);
				
				&:nth-child(2){
					margin-left: 60px;
					@include transition(all 0.4s ease 0.1s);
				}
				
				p{
					margin-top: 10px;
					@include fs(16,2,.1);
				}
				
				h5{
					@include fs(20,2.2,.075);
					margin-top: 10px;
				}
			}
			
			&.active{
				li{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		.fig{
			text-align: center;
			margin-bottom: 80px;
			
			img{
				@include transition(all 0.4s ease 0s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			p{
				text-align: left;
				@include fs(16,2,.1);
				margin-top: 10px;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				img,p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		p.point{
			width: calc(100% - 40px);
			background-color: #eee;
			position: relative;
			margin-top: 80px;
			margin-left: 40px;
			text-align: center;
			padding: 30px 0;
			@include fs(18,1.8,.1);
			@include transition(all 0.4s ease 0s);
			@include translateY(30px);
			@include opacity(0);
			
			&:before{
				content: "POINT";
				display: block;
				width: 95px;
				@include fs(12,30px,0);
				background-color: #e50012;
				color: #fff;
				position: absolute;
				top: -15px;
				left: -40px;
			}
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		.stero{
			text-align: center;
			
			img{
				@include transition(all 0.4s ease 0s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				img{
					@include translateY(0);
					@include opacity(1);
				}
			}
			
			ul{
				@include pie-clearfix;
				li{
					float: left;
					width: 410px;
					margin-top: 40px;
					@include transition(all 0.4s ease 0s);
					@include translateY(30px);
					@include opacity(0);
					
					i{
						@include mon(6);
						display: block;
						margin: 0 auto 10px;
						@include fs(28,65px,0);
						width: 65px;
						@include border-radius(100%);
						background-color: #000;
						color: #fff;
					}
					
					h4{
						@include fs(22,1.3,.1);
						margin-bottom: 20px;
						font-weight: 600;
					}

					h5{
						@include fs(18,1.5,.1);
						margin-bottom: 10px;
					}

					p{
						text-align: left;
						@include fs(16,2,.1);
					}
					
					&:nth-child(1){
						i{background-color: #00a0e8;}
						h4{color: #00a0e8;}
					}
					
					&:nth-child(2){
						margin-left: 60px;
						@include transition(all 0.4s ease 0.1s);
						i{background-color: #22ac38;}
						h4{color: #22ac38;}
					}
					
					&:nth-child(3){
						clear: left;
						@include transition(all 0.4s ease 0.2s);
						i{background-color: #f8b629;}
						h4{color: #f8b629;}
					}
					
					&:nth-child(4){
						margin-left: 60px;
						@include transition(all 0.4s ease 0.3s);
						i{background-color: #122b88;}
						h4{color: #122b88;}
					}
				}
				
				&.active{
					li{
						@include translateY(0);
						@include opacity(1);
					}
				}
			}
		}
		
		hr{
			border: none;
			border-top: solid 1px #ccc;
			margin-top: 100px;
			@include transition(all 0.4s ease 0s);
			@include scaleX(0);
			
			&.active{
				@include scaleX(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_item{
	img{
		max-width: 100%;
		height: auto;
	}
	.item_nav{
		margin: 50px auto 0;
		text-align: center;
		
		.container{
			width: 84%;
		}
		
		ul{
			@include pie-clearfix;
			
			li{
				float: left;
				width: 48%;
				margin-right: 4%;
				margin-bottom: 2%;
				@include mon(6);
				
				&:nth-child(3n){
					margin-right: 4%;
				}
				&:nth-child(2n){
					margin-right: 0;
				}
				
				a{
					text-decoration: none;
					display: block;
					@include fs(18,80px,.05);
					border-bottom: solid 1px #ccc;
					@include transition(all 0.3s ease 0s);
					
					&:hover{
						background-color: rgba(0,0,0,0.1);
					}
				}
			}
		}
		
		&+#contact{
			margin-top: 150px;
			border-top: solid 1px #ccc;
		}
	}
	.item{
		padding: 120px 0 0;
		
		.container{
			width: 84%;
		}
		
		h3{
			text-align: center;
			margin-bottom: 80px;
			
			.en{
				display: block;
				@include mon(6);
				@include fs(18,2,.05);
				margin-bottom: 10px;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			.jp01{
				display: block;
				@include fs(28,1.4,.05);
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			img{
				display: inline-block;
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.2s);
				@include translateY(40px);
				@include opacity(0);
			}
			
			.jp02{
				display: block;
				@include fs(18,1.4,.1);
				color: #e50012;
				@include transition(all 0.4s ease 0.3s);
				@include translateY(20px);
				@include opacity(0);
			}
			
			&.active{
				&>*{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		h4.ttl01{
			text-align: center;
			@include fs(21,1.5,.2);
			margin-bottom: 30px;
			padding-bottom: 10px;
			border-bottom: solid 1px #ccc;
			@include transition(all 0.4s ease 0s);
			@include translateY(20px);
			@include opacity(0);
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		h4.ttl02{
			margin: 60px auto 30px;
			text-align: center;
			@include fs(17,2,.075);
			color: #e50012;
			@include transition(all 0.4s ease 0s);
			@include translateY(20px);
			@include opacity(0);
			
			&+p{
				@include fs(15,1.8,.1);
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				@include translateY(0);
				@include opacity(1);
				
				&+p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		div.clearfix{
			text-align: center;
			img{
				float: none;
				display: inline-block;
				margin-left: 0;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			p{
				float: none;
				width: 100%;
				text-align: left;
				margin-top: 20px;
				@include fs(16,1.8,.1);
				@include transition(all 0.4s ease 0.2s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				img,p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		ul.fig_list{
			@include pie-clearfix;
			
			li{
				float: left;
				width: 48%;
				@include transition(all 0.4s ease 0s);
				@include translateY(30px);
				@include opacity(0);
				
				&:nth-child(2){
					margin-left: 4%;
					@include transition(all 0.4s ease 0.1s);
				}
				
				p{
					margin-top: 10px;
					@include fs(13.5,2,.1);
				}
				
				h5{
					@include fs(16,2.2,.075);
					margin-top: 10px;
				}
			}
			
			&.active{
				li{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		.fig{
			text-align: center;
			margin-bottom: 80px;
			
			img{
				@include transition(all 0.4s ease 0s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			p{
				text-align: left;
				@include fs(14,2,.1);
				margin-top: 10px;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				img,p{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
		
		p.point{
			width: calc(100% - 40px);
			@include box-sizing;
			background-color: #eee;
			position: relative;
			margin-top: 80px;
			margin-left: 40px;
			text-align: center;
			padding: 30px;
			text-align: left;
			@include fs(16,1.8,.1);
			@include transition(all 0.4s ease 0s);
			@include translateY(30px);
			@include opacity(0);
			
			br{
				display: none;
			}
			
			&:before{
				content: "POINT";
				display: block;
				text-align: center;
				width: 95px;
				@include fs(12,30px,0);
				background-color: #e50012;
				color: #fff;
				position: absolute;
				top: -15px;
				left: -40px;
			}
			
			&.active{
				@include translateY(0);
				@include opacity(1);
			}
		}
		
		.stero{
			text-align: center;
			
			img{
				@include transition(all 0.4s ease 0s);
				@include translateY(30px);
				@include opacity(0);
			}
			
			&.active{
				img{
					@include translateY(0);
					@include opacity(1);
				}
			}
			
			ul{
				@include pie-clearfix;
				li{
					float: none;
					width: auto;
					margin-top: 40px;
					position: relative;
					padding-left: 140px;;
					
					i{
						@include mon(6);
						display: block;
						margin: 0 auto 10px;
						@include fs(28,65px,0);
						width: 65px;
						@include border-radius(100%);
						background-color: #000;
						color: #fff;
						position: absolute;
						top: 0;
						left: 3px;
					}
					
					h4{
						@include fs(18,1.3,.1);
						margin-bottom: 20px;
						font-weight: 600;
						position: absolute;
						top: 80px;
						left: 0;
					}

					h5{
						@include fs(16,1.5,.1);
						margin-bottom: 10px;
						text-align: left;
					}

					p{
						text-align: left;
						@include fs(14,2,.1);
						min-height: 6em;
					}
					
					&:nth-child(1){
						i{background-color: #00a0e8;}
						h4{color: #00a0e8;}
					}
					
					&:nth-child(2){
						margin-left: 0;
						@include transition(all 0.4s ease 0.1s);
						i{background-color: #22ac38;}
						h4{color: #22ac38;}
					}
					
					&:nth-child(3){
						clear: left;
						@include transition(all 0.4s ease 0.2s);
						i{background-color: #f8b629;}
						h4{color: #f8b629;}
					}
					
					&:nth-child(4){
						margin-left: 0;
						@include transition(all 0.4s ease 0.3s);
						i{background-color: #122b88;}
						h4{color: #122b88;}
					}
				}
				
				&.active{
					li{
						@include translateY(0);
						@include opacity(1);
					}
				}
			}
		}
		
		hr{
			border: none;
			border-top: solid 1px #ccc;
			margin-top: 100px;
			@include transition(all 0.4s ease 0s);
			@include scaleX(0);
			
			&.active{
				@include scaleX(1);
			}
		}
	}
}

}