/* ============================
// Contact Form 7
// ============================ */

:root {
	.cf7-form-item {
		.cf7-form-label {
			--cf7-label-content: "任意";
			--cf7-label-background: #949090;
			--cf7-label-color: #FFFFFF;
		}

		&:has(.wpcf7-validates-as-required, .wpcf7-radio, .wpcf7-acceptance) .cf7-form-label {
			--cf7-label-content: "必須";
			--cf7-label-background: #BF3F3F;
			--cf7-label-color: #FFFFFF;
		}

		.cf7-form-input {
			--cf7-input-border: #949090;
			--cf7-input-outline: #666666;
			--cf7-input-background: #FAFAFA;
			--cf7-input-placeholder: #949090;
			--cf7-input-selected: #666666;

			&:has(.wpcf7-not-valid-tip) {
				--cf7-input-background: #F7E7E7;
			}
		}

		.cf7-form-sub-label {
			--cf7-sub-label: currentColor;
		}

		.cf7-form-note {
			--cf7-input-note: #949090;
		}

		.cf7-form-link {
			--cf7-input-link: #3F52BF;
		}
	}

	.wpcf7-not-valid-tip {
		--wpcf7-not-valid-tip: #BF3F3F;
	}

	.wpcf7-submit {
		--wpcf7-submit-disabled: #949090;
		--wpcf7-submit-hover: #17BBEF;
	}
}




.wpcf7-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	max-width: 650px;
	margin-inline: auto;

	@media (min-width: 768px) {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	.cf7-form-item {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1 / -1;
		row-gap: 10px;
	}

	.cf7-form-label {
		display: flex;
		column-gap: 0.5em;
		line-height: 1.25;
		word-break: keep-all;
		overflow-wrap: break-word;

		@media (min-width: 768px) {
			grid-column: 1 / 2;
		}

		&::before {
			align-self: start;
			content: var(--cf7-label-content);
			display: grid;
			place-content: center;
			padding: 0.25em 0.5em;
			background-color: var(--cf7-label-background);
			font-size: 12px;
			color: var(--cf7-label-color);
			white-space: nowrap;
		}
	}

	.cf7-form-input {
		@media (min-width: 768px) {
			grid-column: 2 / -1;
		}

		.cf7-form-sub-label {}

		.cf7-form-note {
			font-size: 14px;
			color: var(--cf7-input-note);
		}

		.cf7-form-link {
			color: var(--cf7-input-link);
			text-decoration: underline;

			&:hover {
				color: color-mix(in srgb, var(--cf7-input-link) 80%, transparent);
			}
		}
	}

	.cf7-form-submit {
		grid-column: 1 / -1;
		display: grid;
		place-items: center;
		gap: 1em;

		.wpcf7-submit {}

		.wpcf7-spinner {}
	}

	.wpcf7-response-output {
		grid-column: 1 / -1;
	}
}




.wpcf7-form {
	--input-size: 1em;

	input:is([type="radio"], input[type="checkbox"]) {
		width: var(--input-size);
		height: auto;
		aspect-ratio: 1 / 1;

		display: inline-grid;
		grid-template-areas: "input";
		place-content: center;
		place-items: center;
		margin: 0;
		background-color: var(--cf7-input-background);
		border: 1px solid var(--cf7-input-border);

		&::after {
			grid-area: input;
			content: "";
			opacity: 0;
		}

		&:checked::after {
			opacity: 1;
		}
	}

	input[type="radio"] {
		border-radius: 50%;

		&::after {
			width: calc(var(--input-size) / 2);
			height: auto;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			background-color: var(--cf7-input-selected);
		}
	}

	input[type="checkbox"] {
		border-radius: 3px;

		&::after {
			width: calc(var(--input-size) / 3);
			aspect-ratio: 1 / 2;
			transform: rotate(45deg);
			translate: -10% -15%;
			border-bottom: 2px solid var(--cf7-input-selected);
			border-right: 2px solid var(--cf7-input-selected);
		}
	}

	.wpcf7-form-control:has(.wpcf7-list-item) {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em 1em;

		.wpcf7-list-item {
			margin-left: 0;
			line-height: 1;

			label {
				display: inline-flex;
				column-gap: 0.25em;
				align-items: center;
			}
		}
	}

	.wpcf7-not-valid-tip {
		font-size: 14px;
		color: var(--wpcf7-not-valid-tip);
	}

	.wpcf7-submit {
		display: grid;
		place-content: center;
		width: 100%;
		max-width: 140px;
		min-height: 40px;
		background-color: var(--color-text);
		color: var(--color-white);
		text-align: center;
		transition: background 0.32s var(--ease);

		&:hover {
			background-color: var(--wpcf7-submit-hover);
		}

		&:disabled {
			background-color: var(--wpcf7-submit-disabled);
		}
	}
}




.wpcf7-form-control-wrap {

	:is(.wpcf7-text, .wpcf7-textarea, .wpcf7-select, .wpcf7-number) {
		width: 100%;
		padding-inline: 8px;
		border: 1px solid var(--cf7-input-border);
		background: var(--cf7-input-background);
		border-radius: 3px;

		&::placeholder {
			color: var(--cf7-input-placeholder);
		}

		&:focus-visible {
			outline: 1px solid var(--cf7-input-outline);
		}
	}

	.wpcf7-textarea {
		resize: vertical;
		field-sizing: content;
	}

	.wpcf7-number {
		width: auto;
	}

	:is(.wpcf7-radio, .wpcf7-checkbox) {}

	.wpcf7-select {
		color: var(--cf7-input-placeholder);

		&:user-valid {
			color: var(--color-text);
		}

		option {
			color: var(--color-text);
		}
	}

	&:has(.wpcf7-select) {
		position: relative;

		&::after {
			content: "";
			display: block;
			width: 0.5em;
			height: auto;
			aspect-ratio: 1 / 1;
			transform: rotate(45deg);
			border-bottom: solid 2px var(--cf7-input-outline);
			border-right: solid 2px var(--cf7-input-outline);
			position: absolute;
			top: 0.4em;
			right: 0.75em;
			pointer-events: none;
		}
	}
}