@charset "utf-8";

@import "setting";

#contact_title{
	padding: p2r(280) 0 p2r(200);
	text-align: center;
	
	h2{
		@include din(4);
		color: $c1;
		@include fs(72,56,0);
		margin-bottom: .25em;
	}
	
	p{
		@include fs(18,32,.1);
		font-weight: 500;
		color: #666;
	}
}

#contact_tel{
	padding-bottom: p2r(120);
	text-align: center;
	
	h3{
		@include fs(18,30,.2);
		margin-bottom: 2em;
		font-weight: 500;
		color: #666;
	}
	
	a.tel{
		font-family: poppins, sans-serif;
		@include fs(36,36,.05);
		font-weight: 600;
	}
	
	p{
		@include fs(14,30,.15);
		color: #666;
	}
}

#contact_form{
	background-color: #f7f8f8;
	padding: p2r(100) 0;
	
	h3{
		@include fs(18,30,.2);
		margin-bottom: 2em;
		font-weight: 500;
		color: #666;
		text-align: center;
		
		&+p{
			text-align: center;
			@include fs(16,34,.15);
			color: #666;
			margin-bottom: 4em;
		}
	}
	
	form{
		width: p2r(840);
		margin: auto;
		
		p{
			@include fs(12,26,.1);
			
			&.error{
				color: red;
				margin-bottom: 0;
			}
		}
		
		em{
			font-style: normal;
			color: #ff7800;
		}
		
		table{
			width: 100%;
			border-top: solid 1px #ccc;
			
			th,td{
				border-bottom: solid 1px #ccc;
			}
			
			th{
				@include fs(16,24,.05);
				padding: 1.75em 0;
				width: 14em;
				vertical-align: top;
				font-weight: 400;
				
				&.must{
					&::after{
						content: " ※";
						color: #ff7800;
					}
				}
			}
			
			td{
				@include fs(15,21,.05);
				padding: 1.5em 0;
			}
		}
		
		input,textarea{
			box-sizing: border-box;
			padding: .5em 1em;
			border: solid 1px #ccc;
			background-color: #fff;
			
			&.full{
				width: 100%;
			}
		}
		
		textarea.full{
			height: p2r(220);
		}
		
		.zip{
			display: flex;
			column-gap: 1em;
			align-items: center;
			margin-bottom: .5em;
      
      input {
        width: p2r(300);
      }
		}
		
		textarea.address{
			width: 100%;
			height: p2r(60);
		}
		
		div.text-center{
			p{
				margin: 2rem auto 5rem;
			}
		}
		
		#send{
			width: p2r(500);
			height: p2r(80);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: url("../img/arrow.svg") right p2r(20) center no-repeat #fff;
			background-size: p2r(19) auto;
			cursor: pointer;
			border-color: #666;
			color: #666;
			@include fs(20,24,.05);
			transition: all .6s ease 0s;
			
			&:hover{
				background-color: #666;
				color: #fff;
				background-image: url("../img/arrow_.svg");
			}
			
			&.sending{
				pointer-events: none;
				background: #ccc;
			}
			
			&.sent{
				pointer-events: none;
				color: #fff;
				background: limegreen;
			}
		}
	}
}

// Large devices (desktops, 992px and up)
@media (max-width: 1199.98px) {
}

// Medium devices (tablets, 768px and up)
@media (max-width: 991.98px) {
}

/// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) {

#contact_title{
	h2{
		@include fs(80);
	}
	
	p{
		@include fs(26);
	}
}

#contact_tel{
	h3{
		@include fs(32);
	}
	
	a.tel{
		@include fs(48);
	}
	
	p{
		@include fs(20);
	}
}

#contact_form{
	h3{
		@include fs(32);
		
		&+p{
			@include fs(26);
		}
	}
	
	form{
		width: p2r(610);
		
		p{
			@include fs(20);
		}
		
		table{
			
			th,td{
				display: block;
			}
			
			th{
				@include fs(26);
				padding: 1.5em 0 0;
				width: auto;
				border-bottom: none;
			}
			
			td{
				@include fs(26);
				padding: 1em 0 1.5em;
			}
		}
		
		textarea.full{
			height: 9em;
		}
		
		textarea.address{
			height: 4.5em;
		}
		
		#send{
			width: 100%;
			height: p2r(110);
			background-size: p2r(38) auto;
			@include fs(32);
		}
	}
}
}


@media (max-width: 991.98px) and (min-aspect-ratio: 8/5) and (orientation: landscape) {
}