/*-------------------------------
お問合せフォーム（2026-10 に見た目を変更。お問合せのページだけで読み込む。functions/plugins.php）
・assets/dist/css/main.css（assets/src/stylus/templates/page-contact.styl）の上から指定している
・黒の背景に合わせ、アクセントはロゴの赤
-------------------------------*/
body.page-template-page-contact {
	--cf-card: #0c0c0c;
	--cf-card-line: #232323;
	--cf-field: #151515;
	--cf-field-line: #2c2c2c;
	--cf-field-hover: #3d3d3d;
	--cf-text: #f2f2f2;
	--cf-muted: #9a9a9a;
	--cf-placeholder: #666;
	--cf-accent: #a71f35;
	--cf-accent-soft: rgba(167, 31, 53, .35);
	--cf-error: #ff6b7d;
}

/* フォーム全体をカードに */
body.page-template-page-contact main div.wpcf7 {
	margin-top: 8px;
	padding: 48px 56px 44px;
	background-color: var(--cf-card);
	border: 1px solid var(--cf-card-line);
	border-radius: 18px;
	box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .9);
}

/* 項目 */
body.page-template-page-contact main form div.form {
	margin-bottom: 28px;
}

body.page-template-page-contact main form div.form > label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--cf-text);
}

/* 必須（入力が必須の項目だけ。:has() に対応していないブラウザでは出ない） */
body.page-template-page-contact main form div.form:has([aria-required="true"]) > label::after {
	content: "必須";
	padding: 1px 8px;
	border-radius: 999px;
	background-color: var(--cf-accent);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: .1em;
	color: #fff;
}

body.page-template-page-contact main form .flex-2col {
	gap: 12px;
}

body.page-template-page-contact main form .flex-2col > span {
	flex: 1;
}

/* 入力欄 */
body.page-template-page-contact main form div.form input[type="text"],
body.page-template-page-contact main form div.form input[type="tel"],
body.page-template-page-contact main form div.form input[type="email"],
body.page-template-page-contact main form div.form input[type="url"],
body.page-template-page-contact main form div.form textarea,
body.page-template-page-contact main form div.form select {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	padding: 14px 16px;
	border: 1px solid var(--cf-field-line);
	border-radius: 10px;
	background-color: var(--cf-field);
	color: var(--cf-text);
	font-size: 16px;
	line-height: 1.6;
	outline: none;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}

body.page-template-page-contact main form div.form textarea {
	min-height: 220px;
	resize: vertical;
}

body.page-template-page-contact main form div.form input::placeholder,
body.page-template-page-contact main form div.form textarea::placeholder {
	color: var(--cf-placeholder);
	font-size: 14px;
}

body.page-template-page-contact main form div.form input:hover,
body.page-template-page-contact main form div.form textarea:hover {
	border-color: var(--cf-field-hover);
}

/* 選んだとき（以前は背景が白になっていた） */
body.page-template-page-contact main form div.form input:focus,
body.page-template-page-contact main form div.form textarea:focus,
body.page-template-page-contact main form div.form select:focus {
	border-color: var(--cf-accent);
	background-color: #181818;
	color: var(--cf-text);
	box-shadow: 0 0 0 4px var(--cf-accent-soft);
}

/* 注意書き */
body.page-template-page-contact main form div.tips {
	margin: 8px 0 36px;
	padding: 16px 20px;
	border-left: 3px solid var(--cf-accent);
	border-radius: 8px;
	background-color: #121212;
	font-size: 12px;
	line-height: 1.9;
	color: #c9c9c9;
}

/* ボタン */
body.page-template-page-contact main form div.send input[type="submit"],
body.page-template-page-contact main form div.send input[type="button"] {
	min-width: 240px;
	height: auto;
	padding: 16px 32px;
	border: 1px solid #fff;
	border-radius: 999px;
	background-color: #fff;
	color: #000;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.6;
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .2s, box-shadow .2s, opacity .2s;
}

body.page-template-page-contact main form div.send input[type="submit"]:hover {
	opacity: 1;
	background-color: var(--cf-accent);
	border-color: var(--cf-accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -12px var(--cf-accent);
}

body.page-template-page-contact main form div.send input[type="submit"]:focus-visible,
body.page-template-page-contact main form div.send input[type="button"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--cf-accent-soft);
}

body.page-template-page-contact main form div.send input[type="submit"]:disabled {
	opacity: .5;
	transform: none;
	cursor: default;
}

/* 確認画面の「編集する」（白い枠だけ） */
body.page-template-page-contact main form div.send input[type="button"] {
	background-color: transparent;
	border-color: #555;
	color: #fff;
}

body.page-template-page-contact main form div.send input[type="button"]:hover {
	border-color: #fff;
	opacity: 1;
}

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

body.page-template-page-contact main form span.wpcf7-not-valid-tip {
	margin-top: 8px;
	font-size: 12px;
	color: var(--cf-error);
}

/* 送信の結果 */
body.page-template-page-contact main form div.wpcf7-response-output {
	margin: 28px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--cf-field-line);
	border-radius: 10px;
	background-color: #121212;
	font-size: 13px;
	line-height: 1.8;
	color: var(--cf-text);
}

body.page-template-page-contact main form.invalid div.wpcf7-response-output,
body.page-template-page-contact main form.unaccepted div.wpcf7-response-output,
body.page-template-page-contact main form.failed div.wpcf7-response-output,
body.page-template-page-contact main form.aborted div.wpcf7-response-output,
body.page-template-page-contact main form.spam div.wpcf7-response-output {
	border-color: rgba(255, 107, 125, .5);
	background-color: #1d1012;
	color: var(--cf-error);
}

body.page-template-page-contact main form.sent div.wpcf7-response-output {
	border-color: rgba(120, 200, 140, .45);
	background-color: #0f1a12;
	color: #9fe0ae;
}

/*-------------------------------
確認画面（入力した内容を並べる）
-------------------------------*/
body.page-id-231 main form div.form,
body.page-id-236 main form div.form {
	margin-bottom: 0;
	padding: 16px 4px;
	border-bottom: 1px solid var(--cf-card-line);
	font-size: 15px;
	line-height: 1.8;
	color: var(--cf-text);
}

body.page-id-231 main form div.form > label,
body.page-id-236 main form div.form > label {
	margin-bottom: 4px;
	font-size: 11px;
	color: var(--cf-muted);
}

body.page-id-231 main form div.form > label::after,
body.page-id-236 main form div.form > label::after {
	display: none;
}

body.page-id-231 main form div.send,
body.page-id-236 main form div.send {
	margin-top: 36px;
}

/* スマホ */
@media only screen and (max-width: 599px) {
	body.page-template-page-contact main div.wpcf7 {
		padding: 28px 18px 28px;
		border-radius: 14px;
	}

	body.page-template-page-contact main form div.form {
		margin-bottom: 22px;
	}

	body.page-template-page-contact main form .flex-2col {
		gap: 8px;
	}

	body.page-template-page-contact main form div.form textarea {
		min-height: 180px;
	}

	body.page-template-page-contact main form div.send input[type="submit"],
	body.page-template-page-contact main form div.send input[type="button"] {
		width: 100%;
		min-width: 0;
	}
}