@charset "utf-8";

@import "setting";

#body_option{
	.prd_option{
		
		h3{
			padding-top: 80px;
			text-align: center;
			margin-bottom: 80px;
			.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{
				display: inline-block;
				@include mon(6);
				@include fs(45,1.2,.05);
				margin-bottom: 10px;
				padding-bottom: 10px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp{
				@include fs(16,1.5,.1);
				display: block;
				@include transition(all 0.4s ease 0.2s);
				@include translateY(20px);
				@include opacity(0);
			}
		}
		.container{
			width: 880px;
			@include box-sizing;
			padding: 40px 240px 40px 40px;
			border-bottom: solid 1px #ccc;
			background: center right 20px no-repeat #fff;
			background-blend-mode: lighten;
			@include transition(all 0.3s ease 0s);
			@include translateY(80px);

			h5{
				@include fs(22,1.5,.075);
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(40px);
				@include opacity(0);
			}

			h4{
				width: 400px;
				text-align: center;
					margin-bottom: 20px;

				.jp{
					color: #e50012;
					@include fs(16,2,.075);
					display: block;
					margin-bottom: 10px;
					@include transition(all 0.4s ease 0.2s);
					@include translateY(30px);
					@include opacity(0);
				}
				.en{
					display: inline-block;
					@include mon(6);
					@include fs(60,1,.075);
					padding-bottom: 20px;
					border-bottom: solid 1px #e50012;
					@include transition(all 0.4s ease 0.3s);
					@include translateY(20px);
					@include opacity(0);
				}
			}

			h6{
				@include fs(18,2,.075);
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0.4s);
				@include translateY(40px);
				@include opacity(0);
			}

			ul{
				@include transition(all 0.4s ease 0.5s);
				@include translateY(40px);
				@include opacity(0);
				li{
					list-style-type: square;
					margin-left: 20px;
					@include fs(15,2,.1);
				}
			}
		}
		
		&.active{
			h3{
				span{
					@include translateY(0);
					@include opacity(1);
				}
			}
			
			.container{
				@include translateY(0);
				background-color: rgba(#fff,0);
				h5,h4 span,h6,ul{
					@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_option{
	.prd_option{
		
		h3{
			padding-top: 80px;
			text-align: center;
			margin-bottom: 80px;
			.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{
				display: inline-block;
				@include mon(6);
				@include fs(45,1.2,.05);
				margin-bottom: 10px;
				padding-bottom: 10px;
				border-bottom: solid 1px #e50012;
				@include transition(all 0.4s ease 0.1s);
				@include translateY(30px);
				@include opacity(0);
			}
			.jp{
				@include fs(16,1.5,.1);
				display: block;
				@include transition(all 0.4s ease 0.2s);
				@include translateY(20px);
				@include opacity(0);
			}
		}
		.container{
			width: 84%;
			@include box-sizing;
			padding: 680px 0 60px;
			border-bottom: solid 1px #ccc;
			background: top 140px center no-repeat #fff;
			background-size: auto 500px;
			background-blend-mode: lighten;
			@include transition((transpose 0.3s ease 0s),(background-color 0.7s ease 0.3s));
			@include translateY(80px);
			position: relative;

			h5{
				position: absolute;
				top: 40px;
				left: 0;
				width: 100%;
				@include fs(20,1.5,.075);
				text-align: center;
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0s);
				@include translateY(40px);
				@include opacity(0);
			}

			h4{
				width: 100%;
				text-align: center;
					margin-bottom: 20px;

				.jp{
					color: #e50012;
					@include fs(16,2,.075);
					display: block;
					margin-bottom: 10px;
					@include transition(all 0.4s ease 0.2s);
					@include translateY(30px);
					@include opacity(0);
				}
				.en{
					display: inline-block;
					@include mon(6);
					@include fs(60,1,.075);
					padding-bottom: 20px;
					border-bottom: solid 1px #e50012;
					@include transition(all 0.4s ease 0.3s);
					@include translateY(20px);
					@include opacity(0);
				}
			}

			h6{
				text-align: center;
				@include fs(18,2,.075);
				margin-bottom: 60px;
				@include transition(all 0.4s ease 0.4s);
				@include translateY(40px);
				@include opacity(0);
			}

			ul{
				@include transition(all 0.4s ease 0.5s);
				@include translateY(40px);
				@include opacity(0);
				li{
					list-style-type: square;
					margin-left: 20px;
					@include fs(15,2,.1);
				}
			}
			
		}
		&#mat,&#mat+section{
			.container{
				padding: 540px 0 60px;
				background-position: top 180px center;
				background-size: auto 300px;
			}
		}
		
		&.active{
			h3{
				span{
					@include translateY(0);
					@include opacity(1);
				}
			}
			
			.container{
				@include translateY(0);
				background-color: rgba(#fff,0);
				h5,h4 span,h6,ul{
					@include translateY(0);
					@include opacity(1);
				}
			}
		}
	}
	
}

}