@charset "UTF-8";
/* ==========================================================================
   お問い合わせ（入力・確認・完了）
   - page-contact.php / page-confirm.php / page-thanks.php
   - フォームの中身は Contact Form 7（文面は cf7/form-input.txt・cf7/form-confirm.txt）

   ブレイクポイントは common.css と同じ（768px / 1024px）
   ========================================================================== */


/* ==========================================================================
   お問い合わせから初回のご相談まで（4ステップ）
   ========================================================================== */
.p-contact__steps {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.p-contact__steps .c-card--text {
	gap: 10px;
	padding: 22px 24px;
}

@media (min-width: 768px) {
	.p-contact__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.p-contact__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}


/* ==========================================================================
   フォームの枠
   ========================================================================== */
.p-contact__form-wrap {
	max-width: 900px;
}

.c-form-card {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 24px 20px;
	border: 1px solid var(--c-line);
	border-radius: 8px;
	background: #FFFFFF;
	box-shadow: var(--shadow-card);
}

.c-form-card__notice {
	color: var(--c-ink-muted);
	text-align: center;
}

@media (min-width: 768px) {
	.c-form-card {
		padding: 40px;
	}
}

/* --- 入力 → 確認 → 完了 の表示 --- */
.c-form-steps {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.c-form-steps__item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--c-ink-muted);
	font-family: var(--ff-display);
	font-size: 14px;
	font-weight: 700;
}

/* ステップの間の線 */
.c-form-steps__item + .c-form-steps__item::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--c-line-strong);
}

.c-form-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--c-line-strong);
	border-radius: 50%;
	background: #FFFFFF;
	font-family: var(--ff-en);
	font-weight: 500;
}

.c-form-steps__item.is-done .c-form-steps__num {
	border-color: var(--c-surface-soft);
	background: var(--c-surface-soft);
	color: var(--c-blue-600);
}

.c-form-steps__item[aria-current="step"] {
	color: var(--c-blue-600);
}

.c-form-steps__item[aria-current="step"] .c-form-steps__num {
	border-color: var(--c-blue-600);
	background: var(--c-blue-600);
	color: #FFFFFF;
}

@media (min-width: 768px) {
	.c-form-steps {
		gap: 16px;
	}

	.c-form-steps__item + .c-form-steps__item::before {
		width: 48px;
	}
}


/* ==========================================================================
   入力欄（Contact Form 7 が出すHTMLに合わせている）
   ========================================================================== */
.c-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.c-form__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}

.c-form__label {
	padding: 0;
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-weight: 700;
}

legend.c-form__label {
	margin-bottom: 8px;
}

.c-form__badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border: 1px solid var(--c-blue-600);
	border-radius: 999px;
	background: var(--c-blue-600);
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	vertical-align: 2px;
}

.c-form__badge--optional {
	border-color: #B7C7D0;
	background: transparent;
	color: var(--c-ink);
	font-family: var(--ff-body);
	font-weight: 400;
}

.c-form__input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #B7C7D0;
	border-radius: 8px;
	background: #FFFFFF;
	color: var(--c-ink);
	font: inherit;
}

.c-form__textarea {
	height: 160px;
	padding: 12px 14px;
	resize: vertical;
}

.c-form__input:focus {
	border-color: var(--c-blue-600);
	outline: 2px solid var(--c-sky-400);
	outline-offset: 1px;
}

/* --- 選択肢（ご相談の内容・同意欄）。丸いチェックにする --- */
.c-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

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

.c-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 32px;
	cursor: pointer;
}

.c-form input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid #B7C7D0;
	border-radius: 50%;
	background: #FFFFFF;
	cursor: pointer;
	appearance: none;
}

.c-form input[type="checkbox"]:checked {
	border-color: var(--c-blue-600);
	background: radial-gradient(circle, var(--c-blue-600) 0 4px, #FFFFFF 5px);
}

.c-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--c-sky-400);
	outline-offset: 2px;
}

.c-form__agree {
	display: flex;
	justify-content: center;
}

.c-form__agree a {
	color: var(--c-blue-600);
}

/* --- ボタン --- */
.c-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 26px;
}

.c-form__button,
.c-form__submit input[type="button"] {
	min-height: 56px;
	padding: 16px 56px;
	border: 1px solid var(--c-blue-600);
	border-radius: 8px;
	background: var(--c-blue-600);
	color: #FFFFFF;
	font-family: var(--ff-display);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
}

.c-form__button:hover {
	background: #FFFFFF;
	color: var(--c-blue-600);
}

/* 確認画面の「入力画面に戻る」 */
.c-form__submit input[type="button"] {
	background: #FFFFFF;
	color: var(--c-blue-600);
}

.c-form__submit input[type="button"]:hover {
	background: var(--c-blue-600);
	color: #FFFFFF;
}

@media (max-width: 767px) {
	.c-form__button,
	.c-form__submit input[type="button"] {
		width: 100%;
	}
}

/* --- エラー・送信結果 --- */
.c-form .wpcf7-not-valid {
	border-color: var(--c-danger);
}

.c-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	color: var(--c-danger);
	font-size: 14px;
}

.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--c-line-strong);
	border-radius: 8px;
	font-size: 14px;
}

/* 送信前（メッセージが無いとき）は枠ごと隠す */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--c-danger);
	color: var(--c-danger);
}


/* ==========================================================================
   確認画面：入力内容の一覧
   ========================================================================== */
.c-form-confirm {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--c-line);
}

.c-form-confirm__row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 0;
	border-bottom: 1px solid var(--c-line);
}

.c-form-confirm dt {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-weight: 700;
}

.c-form-confirm dd {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.c-form-confirm__row {
		display: grid;
		grid-template-columns: 200px minmax(0, 1fr);
		gap: 24px;
	}
}


/* ==========================================================================
   完了画面
   ========================================================================== */
.p-contact__thanks {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
}

.p-contact__thanks-title {
	color: var(--c-navy-900);
	font-family: var(--ff-display);
	font-size: clamp(19px, calc(19px + 3 * (100vw - 390px) / 1050), 22px);
	font-weight: 700;
}

.p-contact__thanks .u-center {
	margin-top: 12px;
}