/* ==========================================================================
   corop — お問い合わせ（page-contact.php 専用）
   基準: Figma PC 1280px を ×1.125 でスケール（他ページと同じ換算）
        Figma SP 402px → 実機 375px 想定
   ※フォーム本体は Contact Form 7。CF7 が出力するマークアップに直接当てている。
   ========================================================================== */

.cf {
	--cf-line: #4c4948;

	max-width: 931px; /* Figma 228〜1056 = 828 × 1.125 */
	margin-inline: auto;
	padding: 73px 24px 150px;
	color: var(--corop-ink, #4c4948);
	font-family: var(--corop-font, "Avenir", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif);
}

/* ===== 見出し ===== */
.cf-head__title {
	margin: 0;
	color: var(--corop-olive, #9d8a3c);
	font-size: 40px; /* Figma 36 × 1.125 */
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.2;
}
.cf-head__sub {
	margin: 2px 0 0 5px;
	font-size: 16px; /* Figma 14 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.6;
}

/* ===== リード ＆ 項目 ===== */
.cf-lead {
	margin: 54px 0 0 5px;
	font-size: 15px; /* Figma 13 × 1.125 */
	letter-spacing: 0.1em;
	line-height: 1.6;
}
/* 「お問い合わせ項目」＝ CF7 のラジオボタン（Figma の ○ リストの見た目に合わせる） */
.cf-subhead {
	margin: 45px 0 0 5px;
	font-size: 19px; /* Figma 17 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.6;
}
.cf-subjects {
	margin: 12px 0 0 5px;
	font-size: 15px;
	letter-spacing: 0.1em;
}
.cf-subjects .wpcf7-list-item {
	display: block;
	margin: 0;
}
.cf-subjects .wpcf7-list-item-label {
	line-height: 2.3; /* Figma 180 / 6行 = 30px */
}
.cf-subjects label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.cf-subjects input[type="radio"] {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid var(--corop-ink, #4c4948);
	border-radius: 50%;
	background: var(--corop-white, #fff);
	appearance: none;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cf-subjects input[type="radio"]:checked {
	border-color: var(--corop-olive, #9d8a3c);
	box-shadow: inset 0 0 0 3px var(--corop-white, #fff),
		inset 0 0 0 15px var(--corop-olive, #9d8a3c);
}
.cf-subjects input[type="radio"]:focus-visible {
	outline: 2px solid var(--corop-olive, #9d8a3c);
	outline-offset: 2px;
}
.cf-subjects .wpcf7-not-valid-tip {
	margin-top: 4px;
}

/* ==========================================================================
   フォーム（Contact Form 7）
   ※「お問い合わせ項目」の見出し＋ラジオもフォーム内にあるため、
     上の余白は .cf-subhead 側で持つ
   ========================================================================== */
.cf-form {
	margin-top: 0;
}
/* ラジオ群と最初の入力欄の間隔（Figma 704-639 = 65 × 1.125） */
.cf-subjects + .cf-field {
	margin-top: 73px;
}
.cf-form__missing {
	padding: 20px;
	background: rgba(215, 144, 0, 0.1);
	font-size: 15px;
	letter-spacing: 0.1em;
}

/* 1行＝ラベル＋入力欄 */
.cf-field {
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin-left: 5px;
}
.cf-field + .cf-field {
	margin-top: 40px; /* Figma 81 - 43 = 38 × 1.125 */
}
.cf-field__label {
	flex: 0 0 auto;
	width: 186px; /* Figma 398-233 = 165 × 1.125 */
	padding-top: 12px;
	font-size: 16px; /* Figma 14 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.2em;
	line-height: 1.5;
}
.cf-required {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 3px;
	background: var(--corop-orange, #d79000);
	color: var(--corop-paper, #f3f2f1);
	font-size: 11px;
	letter-spacing: 0.1em;
	vertical-align: 2px;
}
.cf-field__body {
	flex: 0 0 auto;
	width: 464px; /* Figma 412 × 1.125 */
	max-width: 100%;
}

/* 入力欄 */
.cf-form input[type="text"],
.cf-form input[type="tel"],
.cf-form input[type="email"],
.cf-form select,
.cf-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--cf-line);
	border-radius: 0;
	background: var(--corop-white, #fff);
	color: inherit;
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 1.6;
	appearance: none;
}
.cf-form input[type="text"],
.cf-form input[type="tel"],
.cf-form input[type="email"],
.cf-form select {
	height: 48px; /* Figma 43 × 1.125 */
}
.cf-form textarea {
	height: 267px; /* Figma 237 × 1.125 */
	resize: vertical;
}
.cf-form select {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, var(--corop-ink, #4c4948) 50%),
		linear-gradient(135deg, var(--corop-ink, #4c4948) 50%, transparent 50%);
	background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.cf-form input:focus,
.cf-form select:focus,
.cf-form textarea:focus {
	outline: 2px solid var(--corop-olive, #9d8a3c);
	outline-offset: 1px;
}

/* CF7 が入力欄を包む span を素通しにする */
.cf-form .wpcf7-form-control-wrap {
	display: block;
}

/* 送信ボタン */
.cf-submit {
	margin-top: 57px;
	text-align: center;
}
.cf-form input[type="submit"] {
	width: 378px;  /* Figma 336 × 1.125 */
	max-width: 100%;
	height: 71px;  /* Figma 63 × 1.125 */
	padding: 0 24px;
	border: 1px solid var(--corop-olive, #9d8a3c);
	border-radius: 999px;
	background: var(--corop-white, #fff) url("../images/arrow.svg") no-repeat right 26px center;
	background-size: 26px auto;
	color: var(--corop-olive, #9d8a3c);
	font-family: inherit;
	font-size: 19px; /* Figma 17 × 1.125 */
	font-weight: 500;
	letter-spacing: 0.1em;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cf-form input[type="submit"]:hover {
	background-color: var(--corop-olive, #9d8a3c);
	color: var(--corop-white, #fff);
}
.cf-form .wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* エラー・完了メッセージ */
.cf-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: #c0392b;
	font-size: 13px;
	letter-spacing: 0.05em;
}
.cf-form .wpcf7-response-output {
	max-width: 650px;
	margin: 32px auto 0;
	padding: 14px 18px;
	border: 1px solid var(--corop-olive, #9d8a3c);
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1.7;
	text-align: center;
}
.cf-form .wpcf7-form.invalid .wpcf7-response-output,
.cf-form .wpcf7-form.unaccepted .wpcf7-response-output {
	border-color: #c0392b;
	color: #c0392b;
}
.cf-form .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--corop-olive, #9d8a3c);
}

/* ==========================================================================
   送信完了ページ（page-thanks.php）
   ========================================================================== */
.cf-thanks {
	margin-top: 64px;
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 2.1;
}
.cf-thanks p {
	margin: 0 0 1.6em;
}
.cf-thanks__lead {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.1em;
}
.cf-thanks__note {
	padding: 20px 24px;
	background: rgba(217, 217, 217, 0.4);
	font-size: 14px;
	line-height: 1.9;
}
.cf-thanks .corop-content {
	max-width: none;
	margin: 0 0 1.6em;
}
.cf-thanks__actions {
	margin-top: 48px;
	text-align: center;
}
.cf-thanks__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 378px;
	max-width: 100%;
	height: 71px;
	border: 1px solid var(--corop-olive, #9d8a3c);
	border-radius: 999px;
	background: var(--corop-white, #fff);
	color: var(--corop-olive, #9d8a3c);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cf-thanks__back:hover {
	background: var(--corop-olive, #9d8a3c);
	color: var(--corop-white, #fff);
}

/* ===== 注意書き ===== */
.cf-note {
	margin: 75px 0 0 5px;
	max-width: 786px; /* Figma 699 × 1.125 */
	font-size: 15px;
	letter-spacing: 0.05em;
	line-height: 2.1;
}
.cf-note p {
	margin: 0;
}

/* ==========================================================================
   SP（Figma node 260:15438）
   ========================================================================== */
@media (max-width: 768px) {
	.cf {
		max-width: none;
		padding: 32px 20px 60px;
	}

	.cf-head__title {
		font-size: 36px;
	}
	.cf-head__sub {
		margin-left: 4px;
		font-size: 14px;
	}

	.cf-lead {
		margin: 32px 0 0;
		font-size: 13px;
		line-height: 1.85;
	}
	.cf-subhead {
		margin: 30px 0 0;
		font-size: 17px;
	}
	.cf-subjects {
		margin: 8px 0 0;
		font-size: 13px;
	}

	.cf-form {
		margin-top: 0;
	}
	.cf-subjects + .cf-field {
		margin-top: 34px;
	}
	/* SP はラベルを入力欄の上に */
	.cf-field {
		display: block;
		margin-left: 0;
	}
	.cf-field + .cf-field {
		margin-top: 22px;
	}
	.cf-field__label {
		width: auto;
		padding-top: 0;
		font-size: 14px;
	}
	.cf-field__body {
		width: 100%;
		margin-top: 6px;
	}
	.cf-form input[type="text"],
	.cf-form input[type="tel"],
	.cf-form input[type="email"],
	.cf-form select {
		height: 43px;
	}
	.cf-form textarea {
		height: 243px;
	}
	.cf-form select {
		background-position: calc(100% - 20px) 19px, calc(100% - 14px) 19px;
	}

	.cf-submit {
		margin-top: 26px;
	}
	.cf-form input[type="submit"] {
		width: 269px; /* Figma 268.8 */
		height: 50px;
		background-position: right 20px center;
		background-size: 20px auto;
		font-size: 16px;
	}

	.cf-note {
		margin: 34px 0 0;
		font-size: 13px;
		line-height: 2;
	}

	/* 送信完了ページ */
	.cf-thanks {
		margin-top: 34px;
		font-size: 13px;
		line-height: 2;
	}
	.cf-thanks__lead {
		font-size: 17px;
	}
	.cf-thanks__note {
		padding: 16px 18px;
		font-size: 12px;
	}
	.cf-thanks__actions {
		margin-top: 32px;
	}
	.cf-thanks__back {
		width: 269px;
		height: 50px;
		font-size: 16px;
	}
}