@charset "UTF-8";

/*contact ---------------------------------------------*/
#contact {
	--color-contact-main: #faa732; /* ボタン・リンク */
	--color-contact-required-mark-txt: #0f0f0f; /* 必須マーク文字色 */
	--color-contact-required-mark-bg: #fff; /* 必須マーク背景 */
	--color-contact-th-bg: #faa732; /* テーブルヘッダー背景 */
	--color-contact-th-txt: #0f0f0f; /* テーブルヘッダー文字色 */
	--color-contact-td-bg: #fff; /* テーブルセル背景 */
	--color-contact-td-border: #dfdfdf; /* テーブルセル罫線 */
	--color-contact-th-border: #dfdfdf; /* テーブルヘッダー罫線 */
	--color-contact-disabled-bg: #ccc; /* 無効ボタン背景 */
	--color-contact-disabled-txt: #777; /* 無効ボタン文字色 */
}

#contact table {
	width: 100%;
	margin-bottom: 16px;
	border-collapse: collapse;
}

#contact table tr td {
	font-size: 15px;
	padding: 10px;
	vertical-align: middle;
	text-align: left;
	font-weight: 400;
	border: 1px solid var(--color-contact-td-border);
	background: var(--color-contact-td-bg);
}

#contact table tr th {
	font-size: 15px;
	padding: 10px;
	vertical-align: middle;
	text-align: left;
	font-weight: 400;
	border: 1px solid var(--color-contact-th-border);
	width: 30%;
	color: var(--color-contact-th-txt);
	background: var(--color-contact-th-bg);
}

#contact table .required-mark {
	color: var(--color-contact-required-mark-txt);
	font-size: 13px;
	border-radius: 0;
	background: var(--color-contact-required-mark-bg);
}

#contact label[for="agree"] a {
	color: var(--color-contact-main);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--color-contact-main);
}

#contact .contact-btn.contact-submits-wrap button[type="button"],
#contact input[type="button"],
#contact input[type="submit"],
#contact button[type="button"] {
	color: #fff;
	background: var(--color-contact-main);
	font-size: 16px;
	border: unset;
	transition: ease 0.2s;
	padding: 1em 2em;
	border-radius: 2px;
	margin: 0 4px;
}

#contact .contact-btn.contact-submits-wrap button[type="button"]:hover,
#contact input[type="button"]:hover,
#contact input[type="submit"]:hover,
#contact button[type="button"]:hover {
	opacity: 0.7;
}

#contact .contact-btn.contact-submits-wrap button[type="button"][disabled],
#contact input[type="button"][disabled],
#contact input[type="submit"][disabled],
#contact button[type="button"][disabled] {
	color: var(--color-contact-disabled-txt);
	background: var(--color-contact-disabled-bg);
	opacity: 0.7;
}

#contact .contact-submits-wrap button[name="back"] {
	color: #444;
	background: #fff;
	border: 1px solid #444;
}

@media (max-width: 768px) {
	#contact table {
		border-collapse: separate;
	}

	#contact table tr {
		margin-bottom: 5vw;
	}

	#contact table tr td {
		font-size: 4vw;
		padding: 4vw;
		text-align: left;
		font-weight: 400;
		border: 1px solid #dfdfdf;
		background: var(--color-contact-td-bg);
	}

	#contact table tr th {
		font-size: 4vw;
		padding: 4vw;
		text-align: left;
		font-weight: 400;
		border: 1px solid #dfdfdf;
		width: 100%;
		color: var(--color-contact-th-txt);
		background: var(--color-contact-th-bg);
	}

	#contact table tr textarea,
	#contact table tr input {
		font-size: 4vw;
		padding: 4vw;
	}

	#contact table .required-mark {
		font-weight: 500;
		color: var(--color-contact-required-mark-txt);
		font-size: 3.5vw;
		border-radius: 0;
		background: var(--color-contact-required-mark-bg);
	}

	#contact input[type="button"],
	#contact input[type="submit"],
	#contact button[type="button"] {
		width: 95%;
		font-size: 4vw;
		margin-bottom: 2vw;
		padding: 1em;
	}

	#contact .contact-submits-wrap button[name="back"] {
		color: #444;
		background: #fff;
		border: 1px solid #444;
	}
}

/*complete ---------------------------------------------*/
.complete {
	--color-complete-txt: #0f0f0f; /* 文字色 */
	--color-complete-link: #faa732; /* リンク文字色 */
}

.complete-box {
	max-width: 80%;
	margin: 0 auto;
	text-align: left;
	font-weight: var(--font-medium, 500);
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0;
	color: var(--color-complete-txt);
}

.complete-box a {
	display: inline-block;
	margin-top: 20px;
	color: var(--color-complete-link);
	text-decoration: underline;
}