:root{
  --mainColor:#2DAC7A;
  --contact-black:#333;
	--gray:#eee;
  --white:#fff;
	--pink:#F94C66;
	--lightgreen:#d5f3d5;
	--contact-border-color:#ddd;
	--orange:#ff9f2a;
}
.contact h2{
	text-align:center;
	color:var(--mainColor);
}
.contact input[type="text"],
.contact input[type="email"],
.contact textarea{
	width:100%;
}
.contact input{
	border:none;
	outline:none;
	border-bottom:1px solid var(--contact-border-color);
	padding:.5em 0 .5em .25em;
	box-sizing:border-box;
	color:var(--contact-black);
}
.contact input:focus{
	background-color:#eeffed;
}
.contact input,
.contact select{
	margin-bottom:1em;
}
.contact textarea{
	border:1px solid var(--contact-border-color);
}
.contact select{
	border:1px solid var(--contact-border-color);
	padding:.5em;
	box-sizing:border-box;
	color:var(--contact-black);
}
.contact input[type="submit"] {
	display: block;
	border-radius:8px;
	margin: 1em auto 0;
	background-color:var(--orange);
	color:var(--white);
	font-weight:bold;
	padding:1em 0;
}
#contactType{
	width:60%;
	display:block;
}
@media screen and (min-width:1001px){
	.contact{
		box-shadow: 0 4px 4px rgba(0,0,0,0.3);
		width:36vh;
		min-width:300px;
		max-width:500px;
		margin-left:3vw;
		height:99%;
		color:var(--contact-black);
		padding:1em;
		box-sizing:border-box;
		background-color:var(--white);
		border: 1px solid #f4f4f4;
	}
	.contact label,
	.contact p{
		font-size:min(1.6vw,16px);
	}
	.contact input[type="submit"] {
		width: 100%;
		font-size:.8em;
		box-shadow: 0 3px 3px 0 #bb7015;
	}
}
@media screen and (max-width:1000px){
	.sp .contact{
		width:100%;
	}
	.sp .contact select{
		height:30px;
		text-align:center;
	}
	.contact input[type="submit"] {
		width: 300px;
		font-size:1em;
		box-shadow: 0 3px 3px 0 #bb7015;
	}
}