@charset "utf-8";

/* ===================================================================================================================

	お問い合わせ

=================================================================================================================== */

.contact_box {
	position: relative;
	padding-block: 18rem 15rem;
	background-color: #fff;
	.form_item {
		& + .form_item {
			margin-top: 3rem;
		}
		&.-comment {
			margin-top: 6rem;
		}
		dt {
			font-size: 1.7rem;
			line-height: 1.5;
			font-weight: var(--font-weight-bold);
			margin-bottom: 0.5rem;
			.hissu {
				margin-left: 1em;
				padding: 0 .2em .1em .4em;
				background-color: #cb5620;
				font-size: 1.4rem;
				font-weight: var(--font-weight-medium);
				color: #fff;
				.-confirm & {
					display: none;
				}
			}
		}
		.confirm_text {
			display: block;
			padding: .8em 1em;
			background-color: #f3f3f3;
			font-weight: var(--font-weight-bold);
			font-size: 1.8rem;
			line-height: 1.5;
			letter-spacing: 0.1em;
		}
	}
	.form_btn {
		margin-top: 12rem;
		display: flex;
		justify-content: center;
		gap: 3rem;
	}
	@media screen and (min-width: 744px), print {
		max-width: 142rem;
		width: var(--full-width);
		margin-inline: auto;
		.eng {
			position: absolute;
			top: 19rem;
			left: -3.8rem;
			width: 7.6rem;
		}
		h1 {
			width: fit-content;
			margin-inline: auto;
			margin-bottom: 8rem;
			padding-top: 2rem;
			padding-bottom: 0.5rem;
			font-size: 2.1rem;
			line-height: 1.5;
			border-bottom: 2px solid;
			text-align: center;
		}
		.form_item {
			width: 74rem;
			margin-inline: auto;
			ul {
				display: grid;
				grid-template-columns: repeat(2, max-content);
				gap: .5rem 4em;
				margin-top: 1.5rem;
			}
		}
		.form_error {
			width: 74rem;
			margin-inline: auto;
		}
	}
	@media screen and (max-width: 743px) {
		margin-top: 3rem;
		padding-block: 6rem 6rem;
		.eng {
			position: absolute;
			top: -1.6rem;
			right: 0;
			left: 0;
			width: 9.6rem;
			margin-inline: auto;
			img {
				width: 100%;
			}
		}
		h1 {
			margin-bottom: 4rem;
			font-size: 1.5rem;
			line-height: calc(22 / 15);
			text-align: center;
			letter-spacing: .3em;
		}
		.form_item {
			& + .form_item {
				margin-top: 2rem;
			}
			&.-comment {
				margin-top: 3rem;
			}
			dt {
				font-size: 1.5rem;
				margin-bottom: 0.5rem;
				.hissu {
					margin-left: 0.6em;
					padding: .1em .3em .2em .4em;
					font-size: 1.2rem;
				}
			}
			.confirm_text {
				display: block;
				padding: .4em .6em;
				font-size: 1.6rem;
			}
		}
		.form_btn {
			margin-top: 5rem;
			gap: 1rem;
		}
	}
}


form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=number],
form textarea,
form select {
	width: 100%;
	height: 5rem;
	padding: 0 1em;
	background-color: #fff;
	border: 2px solid #251e1c;
	border-radius: 0;
	color: #000;
	font-size: 1.8rem;
	letter-spacing: 0.1em;
}
form textarea {
	width: 100%;
	height: 30rem;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
}
form select {
	width: auto;
	padding: 0 30px 0 1em;
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229%22%20height%3D%226%22%20viewBox%3D%220%200%209%206%22%3E%3Cpath%20d%3D%22M8.995%2C.297L4.5%2C5.704%2C.005%2C.296H8.995Z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: calc(100% - 10px);
}
form input[type=text],
form input[type=email],
form input[type=tel],
form input[type=number],
form select,
form textarea {
	transition: box-shadow .2s, border .2s;
}
form input[type=text]:focus,
form input[type=email]:focus,
form input[type=tel]:focus,
form input[type=number]:focus,
form select:focus,
form textarea:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,0.8);
}
form input[type=text]:disabled,
form input[type=email]:disabled,
form input[type=tel]:disabled,
form input[type=number]:disabled,
form select:disabled,
form textarea:disabled {
	background-color: #ddd;
	opacity: .5;
}
form ::placeholder {
	color: #a6a6a6;
}
form input[type=checkbox],
form input[type=radio] {
	position: absolute;
	width: 1.8rem;
	height: 1.8rem;
}
form label {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 1.7rem;
	font-weight: var(--font-weight-medium);
}
form label input[type=radio] + span {
	position: relative;
	padding-left: 3rem;
}
form label input[type=radio] + span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.9rem;
	width: 1.8rem;
	height: 1.8rem;
	background-color: #fff;
	border: 1px solid #251e1c;
	border-radius: 100%;
}
form label input[type=radio] + span::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1rem;
	height: 1rem;
	margin-top: -.5rem;
	margin-left: .4rem;
	background-color: #251e1c;
	border-radius: 100%;
	opacity: 0;
	transition: opacity .1s;
}
form label input[type=radio]:checked + span::after {
	opacity: 1;
}
form label input[type=checkbox] + span {
	position: relative;
	padding-left: 3rem;
}
form label input[type=checkbox] + span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -0.9rem;
	width: 1.8rem;
	height: 1.8rem;
	background-color: #fff;
	border: 1px solid #b2b2b2;
}
form label input[type=checkbox] + span::after {
	content: "";
	position: absolute;
	left: 7px;
	top: calc(50% - 8px);
	width: 7px;
	height: 14px;
	border-right: 3px solid var(--color-theme);
	border-bottom: 3px solid var(--color-theme);
	opacity: 0;
	transition: opacity .1s;
	transform: rotate(45deg);
}
form label input[type=checkbox]:checked + span::after {
	opacity: 1;
}
@media screen and (max-width: 743px) {
	form input[type=text],
	form input[type=email],
	form input[type=tel],
	form input[type=number],
	form textarea,
	form select {
		font-size: 1.6rem;
	}
	form textarea {
		height: 25rem;
	}
	form label {
		font-size: 1.5rem;
	}
}


.form_error {
	margin-bottom: 6rem;
	padding: 3rem;
	background-color: #f8d7da;
	border-radius: 0.3rem;
	color: #dd0000;
	font-size: 1.6rem;
	line-height: 1.5;
	text-align: center;
	font-weight: var(--font-weight-bold);
	.error {
		margin-top: 2rem;
	}
	@media screen and (max-width: 743px) {
		margin-bottom: 4rem;
		padding: 2rem 1rem;
		font-size: 1.4rem;
	}
}
.err {
	color: #dd0000;
	font-weight: var(--font-weight-bold);
}


.contact_fin_contents {
	text-align: center;
	font-weight: var(--font-weight-bold);
	.btn {
		margin-top: 7rem;
		@media screen and (max-width: 743px) {
			margin-top: 5rem;
		}
	}
}