@charset "UTF-8";

/* ============ contact_contents ============ */

#contact_contents {
	margin-top: 100px;
}

.contact_tel {
	display: inline-block;
	padding: 20px 140px;
	background: var(--background-color);
	border-radius: 50px;
	font-size: 1.5rem;
	font-family: "Zen Maru Gothic", serif;
	color: #fff;
}

@media (max-width: 750px) {
	.contact_tel {
		width: 90%;
		padding: 20px 0;
	}
}

.contact_form {
	background: var(--background-color);
	padding: 70px;
	margin-top: 100px;
}

.contact_form_area {
	background: #fff;
	width: 100%;
	margin: 0 auto;
	padding: 70px 0;
	text-align: left;
}

form {
	width: 70%;
	margin: 0 auto;
	text-align: center;
}

.form-group {
	margin: 20px 0;
	text-align: left;
}

.required {
	font-size: 0.8rem;
	color: red;
}

input,
textarea {
	border: 1px solid #333;
	box-sizing: border-box;
	padding: 5px;
}

input {
	width: 55%;

}

textarea {
	width: 100%;
	height: 100px;
	resize: vertical;
}

.form_text {
	margin: 50px 0;
	font-weight: bold;
}

.submit-btn {
	display: inline-block;
	background: var(--background-color);
	border-radius: 50px;
	color: #fff;
	padding: 20px 120px;
	margin-top: 50px;
}

.success-message {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}

.error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}

@media (max-width: 900px) {
	.contact_form {
		padding: 20px;
	}

	form {
		width: 90%;
	}

	input {
		width: 75%;
	}
}

.thanks-btn {
	display: inline-block;
	padding: 20px 140px;
	background: var(--background-color);
	border-radius: 50px;
	font-size: 1.2rem;
	font-family: "Zen Maru Gothic", serif;
	color: #fff;
	margin: 80px auto;
}

@media (max-width: 750px) {
	.thanks-btn {
		width: 90%;
		padding: 20px 0;
	}
}
.thanks-h3 {
	display:none
}
@media (max-width: 485px) {
	.thanks-h3 {
	display:block
}
	}