@layer components {
	/* ============================================================
	 * お問い合わせフォーム（Contact Form 7）
	 * デザイン移植元: japan-reit/nexray2026_presentation
	 *   contact/index.html ＋ css/style.css の .contact-form* / .btn
	 * マークアップ（正）: assets/reference/cf7-contact-form.html
	 * 行型レイアウト（ラベル左・フィールド右・行間 divider）。
	 * レスポンシブはモバイルファースト（base=縦積み → md(769) で行型）。
	 * ============================================================ */

	/* CF7 の <form> 内に置く .contact-form ラッパ */
	.contact-form {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
		width: 100%;
	}

	.contact-form__heading {
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		line-height: 1.4;
		color: var(--wp--preset--color--primary);
		margin: 0;
	}

	.contact-form__fields {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--30);
	}

	/* 行：モバイルは縦積み、md(769)〜でラベル左・フィールド右 */
	.contact-form__row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--20);
	}

	.contact-form__label {
		flex-shrink: 0;
		width: auto;
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.8;
		color: var(--wp--preset--color--primary);
	}

	.contact-form__required {
		color: var(--nexray-color-error);
	}

	.contact-form__field {
		flex: 1 0 0;
		min-width: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
		margin: 0;
	}

	/* CF7 は入力を <span.wpcf7-form-control-wrap> で包む。フィールド幅を親へ */
	.contact-form__field .wpcf7-form-control-wrap {
		display: block;
		width: 100%;
	}

	.contact-form__input,
	.contact-form__textarea {
		width: 100%;
		background: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--slate-300);
		border-radius: 4px; /* 移植元 input=4px（ボタンの radius-md=8px とは別） */
		padding: var(--wp--preset--spacing--30);
		font-size: var(--wp--preset--font-size--small);
		color: var(--wp--preset--color--contrast);
		outline: none;
		transition: border-color var(--nexray-transition),
			background var(--nexray-transition);
		appearance: none;
	}

	.contact-form__input::placeholder,
	.contact-form__textarea::placeholder {
		color: var(--wp--preset--color--slate-500);
	}

	.contact-form__input:focus,
	.contact-form__textarea:focus {
		border-color: var(--wp--preset--color--primary);
	}

	.contact-form__textarea {
		min-height: 7rem;
		resize: vertical;
		line-height: 1.8;
	}

	/* エラー時（CF7 が .wpcf7-not-valid を入力へ付与） */
	.contact-form__input.wpcf7-not-valid,
	.contact-form__textarea.wpcf7-not-valid {
		border-color: var(--nexray-color-error);
		background: var(--nexray-color-error-bg);
	}

	.contact-form .wpcf7-not-valid-tip {
		display: block;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.8;
		color: var(--nexray-color-error);
	}

	.contact-form__divider {
		height: 1px;
		background: var(--wp--preset--color--slate-300);
	}

	/* フッター：同意チェック＋送信ボタン（中央寄せ） */
	.contact-form__footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
	}

	/* 同意チェック（CF7 acceptance を自作チェック様式へ） */
	.contact-form__acceptance .wpcf7-list-item {
		margin: 0;
	}

	.contact-form__acceptance label {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		cursor: pointer;
		user-select: none;
	}

	.contact-form__acceptance input[type="checkbox"] {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	.contact-form__acceptance .wpcf7-list-item-label {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--body);
		line-height: 1.8;
		color: var(--wp--preset--color--contrast);
	}

	/* チェックボックスの箱（ラベル先頭に擬似要素で描画） */
	.contact-form__acceptance .wpcf7-list-item-label::before {
		content: "";
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: 2px;
		background-color: var(--wp--preset--color--base);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 14px 14px;
		transition: background-color 0.15s, border-color 0.15s;
	}

	/* チェック時：塗り＋白チェック（移植元 check.svg を data-uri で埋込） */
	.contact-form__acceptance
		input[type="checkbox"]:checked
		+ .wpcf7-list-item-label::before {
		background-color: var(--wp--preset--color--primary);
		border-color: var(--wp--preset--color--primary);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M5.24993 11.0841C5.02535 11.0841 4.80075 10.9996 4.63159 10.8275L1.71492 7.91081C1.37367 7.56956 1.37367 7.0154 1.71492 6.67415C2.05617 6.3329 2.61034 6.3329 2.95159 6.67415L5.24993 8.97248L11.0483 3.17415C11.3895 2.8329 11.9437 2.8329 12.2849 3.17415C12.6262 3.5154 12.6262 4.06956 12.2849 4.41081L5.86826 10.8275C5.69618 10.9996 5.47451 11.0841 5.24993 11.0841Z' fill='white'/%3E%3C/svg%3E");
	}

	/* 送信ボタン（移植元 .btn） */
	.contact-form__submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 320px;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
		background: var(--wp--preset--color--primary);
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: var(--nexray-radius-md);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
		font-size: 1.25rem; /* 移植元ボタン固有値。preset の body(1rem)/large(1.5rem) の中間でプリセット外 */
		font-weight: 600;
		color: var(--wp--preset--color--base);
		letter-spacing: var(--nexray-letter-spacing-wide);
		line-height: 1.4;
		white-space: nowrap;
		cursor: pointer;
		transition: background var(--nexray-transition),
			border-color var(--nexray-transition);
	}

	.contact-form__submit:hover {
		background: var(--wp--preset--color--blue-950);
		border-color: var(--wp--preset--color--blue-950);
		box-shadow: none;
	}

	.contact-form__submit:disabled {
		background: var(--wp--preset--color--slate-300);
		border-color: var(--wp--preset--color--slate-300);
		box-shadow: none;
		cursor: not-allowed;
	}

	/* CF7 応答メッセージ */
	.wpcf7-response-output {
		margin: var(--wp--preset--spacing--30) 0 0;
		padding: 0.75rem 1rem;
		font-size: var(--wp--preset--font-size--small);
		border-radius: var(--nexray-radius-md);
	}

	/* md(769)〜：行型（ラベル左固定幅・フィールド右） */
	@media (min-width: 769px) {
		.contact-form__row {
			flex-direction: row;
			align-items: center;
			gap: var(--wp--preset--spacing--20);
		}

		.contact-form__row--top {
			align-items: flex-start;
		}

		.contact-form__label {
			width: 10rem;
		}

		.contact-form__row--top .contact-form__label {
			padding-top: var(--wp--preset--spacing--30);
		}
	}

	/* sm(600) 以下：送信ボタンを全幅に（移植元 .btn @600） */
	@media (max-width: 600px) {
		.contact-form__submit {
			min-width: 0;
			width: 100%;
			padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		}
	}
}