/*-------------------------------
お問合せフォーム（2026-10 に見た目を変更。お問合せのページだけで読み込む。functions.php）
・css/common.css（stylus/common.styl の div#page-contact）の上から指定している
・色はサイトの色（stylus の gray0〜3・orange）に合わせている
-------------------------------*/
div#page-contact div.contact-form {
	--cf-text: #6f6254;
	--cf-label: #958573;
	--cf-line: #e3dbd1;
	--cf-card: #fbfaf9;
	--cf-accent: #958573;
	--cf-accent-dark: #7d6f5f;
	--cf-required: #f57c00;
	--cf-error: #d9480f;
	max-width: 680px;
	margin: 2rem auto 0;
	padding: 5.6rem 6rem 4.8rem;
	background-color: var(--cf-card);
	border: 1px solid #efe9e2;
	border-radius: 20px;
	box-shadow: 0 20px 50px -30px rgba(149, 133, 115, .45);
}

div#page-contact div.contact-form form {
	color: var(--cf-text);
}

div#page-contact div.contact-form form p {
	margin-bottom: 2.8rem;
}

/* 項目名 */
div#page-contact div.contact-form form label {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: 1rem;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--cf-label);
}

/* 必須（以前は「*」） */
div#page-contact div.contact-form form label b {
	margin-left: 0;
	padding: .2rem .8rem;
	border-radius: 999px;
	background-color: var(--cf-required);
	font-size: 0;
	line-height: 1.6;
}

div#page-contact div.contact-form form label b::after {
	content: "必須";
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: .08em;
	color: #fff;
}

/* 入力欄 */
div#page-contact div.contact-form form input:not([type="submit"]),
div#page-contact div.contact-form form textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--cf-line);
	border-radius: 10px;
	background-color: #fff;
	color: #333;
	font-size: 1.6rem;
	line-height: 1.6;
	outline: none;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}

div#page-contact div.contact-form form textarea {
	min-height: 22rem;
	resize: vertical;
}

div#page-contact div.contact-form form input:not([type="submit"]):hover,
div#page-contact div.contact-form form textarea:hover {
	border-color: #cfc3b5;
}

div#page-contact div.contact-form form input:not([type="submit"]):focus,
div#page-contact div.contact-form form textarea:focus {
	border-color: var(--cf-accent);
	background-color: #fff;
	box-shadow: 0 0 0 4px rgba(149, 133, 115, .15);
}

/* 送信ボタン */
div#page-contact div.contact-form form p.submit {
	margin: 4rem 0 0;
	text-align: center;
}

div#page-contact div.contact-form form p.submit label {
	display: none;
}

div#page-contact div.contact-form form input[type="submit"] {
	width: 100%;
	max-width: 360px;
	padding: 1.8rem 2rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--cf-accent);
	color: #fff;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: .12em;
	cursor: pointer;
	box-shadow: 0 10px 24px -12px rgba(125, 111, 95, .8);
	transition: background-color .2s, transform .2s, box-shadow .2s;
}

div#page-contact div.contact-form form input[type="submit"]:hover {
	background-color: var(--cf-accent-dark);
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -12px rgba(125, 111, 95, .9);
}

div#page-contact div.contact-form form input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(149, 133, 115, .3);
}

div#page-contact div.contact-form form input[type="submit"]:disabled {
	opacity: .6;
	cursor: default;
	transform: none;
}

/* 送信中のくるくる（ボタンの下に） */
div#page-contact div.contact-form form p.submit span {
	display: block;
}

div#page-contact div.contact-form form .wpcf7-spinner {
	display: block;
	margin: 1.6rem auto 0;
}

/* 入力エラー */
div#page-contact div.contact-form form .wpcf7-not-valid {
	border-color: var(--cf-error) !important;
	background-color: #fff8f5 !important;
}

div#page-contact div.contact-form form .wpcf7-not-valid-tip {
	margin-top: .8rem;
	font-size: 1.3rem;
	color: var(--cf-error);
}

/* 送信の結果 */
div#page-contact div.contact-form form .wpcf7-response-output {
	margin: 2.4rem 0 0;
	padding: 1.4rem 1.8rem;
	border: 1px solid var(--cf-line);
	border-radius: 10px;
	background-color: #fff;
	font-size: 1.4rem;
	line-height: 1.8;
	text-align: center;
}

div#page-contact div.contact-form form.invalid .wpcf7-response-output,
div#page-contact div.contact-form form.unaccepted .wpcf7-response-output,
div#page-contact div.contact-form form.failed .wpcf7-response-output,
div#page-contact div.contact-form form.aborted .wpcf7-response-output,
div#page-contact div.contact-form form.spam .wpcf7-response-output {
	border-color: #f3c7b3;
	background-color: #fff8f5;
	color: var(--cf-error);
}

div#page-contact div.contact-form form.sent .wpcf7-response-output {
	border-color: #cfe3c8;
	background-color: #f6fbf4;
	color: #3f6b35;
}

/* スマホ */
@media screen and (max-width: 767px) {
	div#page-contact div.contact-form {
		margin-top: 1rem;
		padding: 3.2rem 2rem 3.2rem;
		border-radius: 16px;
	}

	div#page-contact div.contact-form form p {
		margin-bottom: 2.4rem;
	}

	div#page-contact div.contact-form form textarea {
		min-height: 18rem;
	}
}