@charset "utf-8";

@import "setting";

#body_contact{
	#contact01{
		text-align: center;
		padding-top: 80px;
		
		h3{
			display: inline-block;
			margin: 0 auto 40px;
			@include fs(16,2,.1);
			border-bottom: solid 1px #e50012;
			padding-bottom: 40px;
			@include transition(all 0.3s ease 0.1s);
			@include translateY(40px);
			@include opacity(0);
		}
		
		h6{
			margin-bottom: 10px;
			@include transition(all 0.3s ease 0.2s);
			@include translateY(30px);
			@include opacity(0);
		}
		
		p.tel{
			@include fs(32,1,.1);
			@include transition(all 0.3s ease 0.3s);
			@include translateY(20px);
			@include opacity(0);
			
			span{
				display: inline-block;
				margin-right: 10px;
				@include fs(21);
			}
		}
		
		&.active{
			h3,h6,p{
				@include translateY(0);
				@include opacity(1);
			}
		}
	}
	
	#contact02{
		@include transition(all 0.4s ease 0s);
		@include translateY(40px);
		@include opacity(0);
		
		&.active{
			@include translateY(0);
			@include opacity(1);
		}
		
		.container{
			border-top: solid 1px #ddd;
			width: 800px;
			margin-top: 60px;
			padding: 60px 0;
			
			&>p{
				text-align: center;
				margin-bottom: 60px;
			}
			
			table{
				width: 100%;
				@include fs(16,1.6,.1);
				
				th{
					text-align: left;
					vertical-align: top;
					width: 200px;
					padding-top: 5px;
					
					&.must{
						&:after{
							content: "*";
							color: #e50012;
							@include fs(14);
							display: inline-block;
							margin-left: 5px;
							vertical-align: top;
						}
					}
					
					&.result{
						padding-top: 0;
					}
				}
				
				td{
					padding-bottom: 3em;
					vertical-align: middle;
					
					input[type="text"],input[type="tel"],input[type="email"],select{
						@include box-sizing;
						@include fs(16);
						width: 100%;
						padding: 8px;
						border: solid 1px #ccc;
						
						&+input[type="text"]{
							margin-top: 1em;
						}
						
						&[name="zip"]{
							width: 12em;
						}
					}
					
					textarea{
						@include fs(16);
						@include box-sizing;
						width: 100%;
						height: 160px;
						padding: 8px;
						border: solid 1px #ccc;
					}
					
					&.recapcha{
						text-align: center;
						padding: 40px 0;
						
						.g-recaptcha>div{
							margin: auto;
						}
					}
					
					&.btn{
						padding-top: 60px;
						text-align: center;
						
						input[type="submit"]{
							width: 600px;
							@include fs(18,80px);
							border: solid 1px #222;
							cursor: pointer;
							margin: auto;
							background-color: #222;
							color: #fff;
							@include transition(all 0.3s ease 0s);
							@include dff;
							
							&:not(:disabled):hover{
								background-color: #fff;
								color: #222;
							}
							
							&:disabled{
								background-color: #999;
								cursor: default;
							}
						}
					}
				}
				
				tr.border{
					border-top: solid 1px #ccc;
					th,td{
						padding-top: 40px;
					}
				}
			}
		}
	}
}

@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_contact{
	#contact01{
		
		h3{
			text-align: left;
		}
	}
	
	#contact02{
		
		.container{
			border-top: solid 1px #ddd;
			width: 84%;
			margin-top: 60px;
			padding: 60px 0;
			
			&>p{
				text-align: left;
				@include fs(15,1.8,.1);
			}
			
			table{
				width: 100%;
				@include fs(16,1.6,.1);
				
				th{
					display: block;
					text-align: left;
					vertical-align: top;
					width: 100%;
					padding-top: 5px;
					
					&.must{
						&:after{
							content: "*";
							color: #e50012;
							@include fs(14);
							display: inline-block;
							margin-left: 5px;
							vertical-align: top;
						}
					}
				}
				
				td{
					display: block;
					padding-top: 10px;
					padding-bottom: 3em;
					
					input[type="text"],input[type="tel"],input[type="email"],select{
						@include box-sizing;
						@include fs(16);
						width: 100%;
						padding: 8px;
						border: solid 1px #ccc;
						
						&+input[type="text"]{
							margin-top: 1em;
						}
						
						&[name="zip"]{
							width: 12em;
						}
					}
					
					input[type="checkbox"]{
						@include scale(2);
						margin-right: 20px;
					}
					
					textarea{
						@include fs(16);
						@include box-sizing;
						width: 100%;
						height: 160px;
						padding: 8px;
						border: solid 1px #ccc;
					}
					
					&.recapcha{
						text-align: center;
						padding: 40px 0;
					}
					
					&.btn{
						padding-top: 60px;
						text-align: center;
						
						input[type="submit"]{
							width: 100%;
							@include fs(18,80px);
							border: solid 1px #222;
							cursor: pointer;
							margin: auto;
							background-color: #222;
							color: #fff;
							@include transition(all 0.3s ease 0s);
							@include dff;
							   -webkit-appearance: none;
							   -moz-appearance:    none;
							   appearance:         none;
								
							
							&:hover{
								background-color: #fff;
								color: #222;
							}
						}
					}
				}
				
				tr.border{
					border-top: solid 1px #ccc;
					th,td{
						padding-top: 40px;
					}
				}
			}
		}
	}
}

}