@charset "utf-8";

/*######################################################
お申し込み・お問い合わせフォーム（2026リニューアル）
Figma 292:701（入会について S6）／350:758（フォーム状態：通常・入力エラー・送信完了）

・入会について（/join）とお問い合わせ（/contact）で読み込む
・フォーム本体は Contact Form 7。項目の枠組み（.c-field など）は functions/contact-form.php のテンプレート、
　入力欄・ラジオ・エラー文は Contact Form 7 が出力するクラス（.wpcf7-*）に当てている
・エラーは色だけに頼らず、!アイコンとテキストで伝える（仕様メモ）
######################################################*/
:root {
	--c-error: #C2453D;
	--c-error-bg: #FEF8F7;
	--c-error-summary-bg: #FDF1EF;
	--c-error-summary-line: #F0C4BF;
	--c-error-title: #8E2F28;
	--c-error-text: #7A4A45;
	--c-input-bg: #F7F9FC;
}

.contact__body {
	width: min(880px, 100%);
	margin-inline: auto;
}

/* Contact Form 7 未導入時の案内 */
.contact__unavailable {
	padding: 40px 24px;
	border-radius: 16px;
	background-color: var(--c-white);
	font-size: 15px;
	line-height: 2;
	text-align: center;
	color: var(--c-ink-muted);
}



/* ==============================
① 通常
============================== */
.c-form {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 48px 56px;
	border-radius: 16px;
	background-color: var(--c-white);
}

.c-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.c-field--radio {
	gap: 12px;
}

.c-field__label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--c-navy-900);
}

/* fieldset の legend は gap が効かないため余白で揃える */
.c-field--radio .c-field__label {
	margin-bottom: 12px;
}

.c-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	background-color: var(--c-navy-100);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--c-ink-muted);
}

.c-badge--required {
	background-color: var(--c-gold-200);
	color: var(--c-gold-ink);
}

.c-input {
	width: 100%;
	height: 54px;
	padding: 0 16px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background-color: var(--c-input-bg);
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-ink);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.c-input::placeholder {
	color: var(--c-navy-300);
	opacity: 1;
}

.c-input--textarea {
	height: 180px;
	padding-block: 14px;
	resize: vertical;
}

.c-input:focus {
	outline: none;
	border-color: var(--c-navy-500);
	box-shadow: 0 0 0 3px rgba(58, 92, 136, 0.18);
}

.c-field__note {
	margin-top: -2px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--c-navy-300);
}

/* Contact Form 7 の入れ物（ブロックにして幅いっぱいに） */
.c-form .wpcf7-form-control-wrap {
	display: block;
}

.c-field .wpcf7-form-control-wrap + .wpcf7-form-control-wrap {
	margin-top: 10px;
}

/* ラジオボタン（行全体がクリック領域） */
.c-form .wpcf7-radio {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c-form .wpcf7-radio .wpcf7-list-item {
	display: block;
	margin: 0;
}

.c-form .wpcf7-radio label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 20px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background-color: var(--c-input-bg);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.c-form .wpcf7-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* 丸（選択時は太いネイビーの輪） */
.c-form .wpcf7-radio .wpcf7-list-item-label {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	line-height: 1.8;
	color: var(--c-ink);
}

.c-form .wpcf7-radio .wpcf7-list-item-label::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--c-navy-300);
	border-radius: 50%;
	background-color: var(--c-white);
	box-sizing: border-box;
	transition: border-width 0.2s ease, border-color 0.2s ease;
}

.c-form .wpcf7-radio label:has(:checked) {
	border-color: var(--c-navy-700);
	background-color: #EAF0F8;
}

.c-form .wpcf7-radio label:has(:checked) .wpcf7-list-item-label {
	font-weight: 500;
}

.c-form .wpcf7-radio label:has(:checked) .wpcf7-list-item-label::before {
	border: 6px solid var(--c-navy-700);
}

.c-form .wpcf7-radio label:has(:focus-visible) {
	box-shadow: 0 0 0 3px rgba(58, 92, 136, 0.25);
}

.c-form__submit {
	display: flex;
	justify-content: center;
	padding-top: 12px;
}

.c-button--submit {
	width: 320px;
	min-height: 60px;
	font-size: 16px;
}

.c-button--submit:disabled,
.wpcf7-form.submitting .c-button--submit {
	opacity: 0.6;
	cursor: wait;
}

/* 送信中のくるくる（ボタンの右に重ねる） */
.c-form__submit {
	position: relative;
}

.c-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	left: calc(50% + 176px);
	margin: 0;
	transform: translateY(-50%);
}


/* ==============================
② 入力エラー
============================== */
.c-form__summary {
	display: flex;
	gap: 14px;
	padding: 20px 24px 22px;
	border: 1px solid var(--c-error-summary-line);
	border-radius: 12px;
	background-color: var(--c-error-summary-bg);
}

.c-form__summary[hidden] {
	display: none;
}

.c-form__summary:focus {
	outline: none;
}

.c-form__summary-icon {
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background-color: var(--c-error);
	font-weight: 500;
	line-height: 1;
	color: var(--c-white);
}

.c-form__summary-icon {
	width: 22px;
	height: 22px;
	font-size: 14px;
}

.c-form__summary-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.c-form__summary-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--c-error-title);
}

.c-form__summary-text {
	font-size: 14px;
	line-height: 1.75;
	color: var(--c-error-text);
}

.c-form__summary-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	padding-left: 0;
	font-size: 14px;
	line-height: 1.75;
	color: var(--c-error);
}

.c-form__summary-list li {
	position: relative;
	padding-left: 12px;
}

.c-form__summary-list li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--c-error);
}

.c-form__summary-list a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 入力欄 */
.c-form .c-input.wpcf7-not-valid {
	border: 1.5px solid var(--c-error);
	background-color: var(--c-error-bg);
}

.c-form .wpcf7-radio.wpcf7-not-valid label {
	border-color: var(--c-error-summary-line);
	background-color: var(--c-white);
}

.c-form .wpcf7-radio.wpcf7-not-valid .wpcf7-list-item-label::before {
	border-color: var(--c-line);
}

/* エラー文（入力欄の直下。先頭に!アイコン） */
.c-form .wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.75;
	color: var(--c-error);
}

.c-form .wpcf7-not-valid-tip::before {
	content: "!";
	flex: none;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	border-radius: 50%;
	background-color: var(--c-error);
	font-size: 10px;
	line-height: 1;
	color: var(--c-white);
}

/* 送信結果のメッセージ。入力エラーはサマリーで出すので、送信失敗などのときだけ見せる */
.c-form .wpcf7-response-output {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid var(--c-error-summary-line);
	border-radius: 12px;
	background-color: var(--c-error-summary-bg);
	font-size: 14px;
	line-height: 1.75;
	color: var(--c-error-title);
}

.c-form .wpcf7-response-output:empty,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.init .wpcf7-response-output {
	display: none;
}


/* ==============================
③ 送信完了
============================== */
.contact-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 80px;
	border-radius: 16px;
	background-color: var(--c-white);
	text-align: center;
}

.contact-done:focus {
	outline: none;
}

.contact-done__icon {
	position: relative;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background-image: linear-gradient(160deg, var(--c-navy-700) 0%, var(--c-navy-500) 100%);
	box-shadow: 0 8px 20px rgba(35, 64, 101, 0.28);
}

.contact-done__icon::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 26px;
	width: 26px;
	height: 14px;
	border-left: 5px solid var(--c-white);
	border-bottom: 5px solid var(--c-white);
	border-radius: 2px;
	transform: rotate(-45deg);
}

.contact-done__title {
	font-family: var(--f-serif);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.55;
	color: var(--c-navy-900);
}

.contact-done__text {
	font-size: 16px;
	line-height: 2;
	color: var(--c-ink-muted);
}

.contact-done__note {
	width: 100%;
	padding: 24px;
	border-radius: 10px;
	background-color: var(--c-navy-50);
}

.contact-done__note-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--c-navy-700);
}

.contact-done__note-text {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--c-ink-muted);
}

.contact-done__note-text a {
	color: inherit;
}

.contact-done .c-button {
	min-height: 58px;
	padding-inline: 44px;
	border-width: 1.5px;
	font-size: 16px;
}


/* ==============================
SP
============================== */
@media (max-width: 767px) {
	.c-form {
		gap: 24px;
		padding: 28px 20px 30px;
	}

	.c-field__label {
		gap: 8px;
		font-size: 15px;
		line-height: 1.6;
	}

	.c-field--radio .c-field__label {
		margin-bottom: 10px;
	}

	.c-form .wpcf7-radio {
		gap: 10px;
	}

	.c-form .wpcf7-radio label {
		padding: 14px 16px;
	}

	.c-form .wpcf7-spinner {
		left: auto;
		right: 12px;
	}

	.c-field__note {
		font-size: 13px;
	}

	.c-form__summary {
		padding: 18px 16px 20px;
		gap: 10px;
	}

	.c-form__submit {
		padding-top: 0;
	}

	.c-button--submit {
		width: 100%;
		font-size: 17px;
	}

	.contact-done {
		gap: 20px;
		padding: 48px 20px;
	}

	.contact-done__title {
		font-size: 22px;
	}

	.contact-done__text {
		font-size: 15px;
		text-align: left;
	}

	.contact-done__note {
		padding: 20px 16px;
	}

	.contact-done .c-button {
		width: 100%;
	}
}