/* ==========================================================================
   Contact Form
   お問い合わせ（page-contact-form.php）入力・確認・完了
   デザイン幅: 1920px（確認画面はデザインなし。入力・完了画面に合わせている）
   フォームの各項目はプラグイン RSC Contact Form が出力する（cf-* クラス）
   ========================================================================== */

.p-contact-form {
	padding-top: 40px;
	padding-bottom: 40px;
}

@media (max-width: 767px) {
	.p-contact-form {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

/* 注意書き */
.p-contact-form__caution {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 30px;
	padding: 20px 32px;
	background-color: rgb(255 245 240 / 0.4);
	border: 3px solid var(--color-pink-red);
	/* 枠線のグラデーション。Figma は角度グラデーション＋ハードライト合成で、CSS では同じ形にできないため、
	   デザイン（PC）の枠の色を中心から 10° ごとに測り、その色をつないでいる */
	border-image: conic-gradient(
		rgb(255 100 125) 0deg,
		rgb(255 101 129) 10deg,
		rgb(255 110 136) 20deg,
		rgb(255 114 138) 30deg,
		rgb(255 120 145) 40deg,
		rgb(255 127 148) 50deg,
		rgb(255 142 162) 60deg,
		rgb(255 157 176) 70deg,
		rgb(255 177 190) 80deg,
		rgb(255 180 188) 90deg,
		rgb(255 190 190) 100deg,
		rgb(255 181 189) 110deg,
		rgb(255 172 189) 120deg,
		rgb(255 144 163) 130deg,
		rgb(255 109 135) 140deg,
		rgb(255 81 108) 150deg,
		rgb(255 55 87) 160deg,
		rgb(255 66 97) 170deg,
		rgb(255 75 105) 180deg,
		rgb(255 88 117) 190deg,
		rgb(255 101 127) 200deg,
		rgb(255 116 139) 210deg,
		rgb(255 135 157) 220deg,
		rgb(255 154 174) 230deg,
		rgb(255 175 190) 240deg,
		rgb(255 195 189) 250deg,
		rgb(255 214 192) 260deg,
		rgb(255 169 186) 270deg,
		rgb(255 125 147) 280deg,
		rgb(255 78 107) 290deg,
		rgb(255 63 95) 300deg,
		rgb(255 61 92) 310deg,
		rgb(255 75 104) 320deg,
		rgb(255 84 111) 330deg,
		rgb(255 89 117) 340deg,
		rgb(255 93 121) 350deg,
		rgb(255 100 125) 360deg
	) 1;
}

.p-contact-form__caution-text {
	font-size: 1.125rem;
	line-height: 1.67;
	letter-spacing: 0.05em;
	color: var(--color-black);
}

.p-contact-form__caution-alert {
	display: flex;
	gap: 20px;
	align-items: center;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.08em;
	color: var(--color-red);
}

.p-contact-form__caution-alert::before {
	content: "";
	flex-shrink: 0;
	width: 66px;
	height: 56px;
	background: url("../../img/contact-form/icon-alert.svg") center / contain no-repeat;
}

@media (max-width: 767px) {
	.p-contact-form__caution {
		padding: 16px 20px;
	}

	.p-contact-form__caution-text {
		font-size: 1rem;
	}

	.p-contact-form__caution-text br {
		display: none;
	}

	.p-contact-form__caution-alert {
		gap: 12px;
		font-size: 1rem;
	}

	.p-contact-form__caution-alert::before {
		width: 44px;
		height: 38px;
	}
}

/* 画面全体のエラー */
.p-contact-form__error {
	margin-top: 20px;
	padding: 12px 20px;
	font-weight: 500;
	color: var(--color-red);
	background-color: var(--color-pale-orange);
	border-left: 4px solid var(--color-red);
}

.p-contact-form__form {
	margin-top: 30px;
}

/* ハニーポット（人には見せない） */
.p-contact-form__hp {
	position: absolute;
	top: -9999px;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 項目 ----------------------------------------------------------------- */
.p-contact-form__fields {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.cf-field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* 注記（※ 複数のチェックも可能です。）はプラグインがラベルの前に出すため、並びを最後にする */
.cf-field__note {
	order: 1;
	margin-top: 5px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.56;
	letter-spacing: 0.1em;
	color: var(--color-black);
}

.cf-field__label {
	display: flex;
	gap: 12px;
	align-items: center;
}

.cf-badge {
	flex-shrink: 0;
	width: 65px;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--color-white);
	background-color: var(--color-pink-red);
}

.cf-badge--opt {
	background-color: var(--color-indigo);
}

.cf-field__labeltext {
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--color-black);
}

/* チェックボックスの項目（お問い合わせ内容）は見出しを一回り大きくする */
.cf-field:has(.cf-choices) .cf-field__labeltext {
	font-size: 1.25rem;
}

/* 入力欄 */
.cf-input {
	width: 100%;
	padding: 14px 20px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: var(--color-black);
	background-color: var(--color-pale-orange);
	border: 1px solid var(--color-black);
	border-radius: 0;
}

.cf-input::placeholder {
	color: rgb(0 0 0 / 0.3);
	opacity: 1;
}

.cf-textarea {
	height: 326px;
	resize: vertical;
}

.cf-field--error .cf-input {
	border-color: var(--color-red);
	outline: 1px solid var(--color-red);
}

.cf-field__error {
	order: 2; /* 注記（order: 1）の後ろに出す */
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-red);
}

/* チェックボックス（3 列） */
.cf-choices {
	display: grid;
	grid-template-columns: repeat(3, auto); /* 列の幅は文字の長さに合わせ、左右の端をそろえる */
	gap: 15px 20px;
	justify-content: space-between;
	margin-top: 5px;
}

.cf-choice {
	position: relative;
	display: flex;
	gap: 10px;
	align-items: center;
	cursor: pointer;
}

/* 本物の input は見えなくし、.cf-choice__box で見た目を作る（キーボード操作・読み上げはそのまま） */
.cf-choice input {
	position: absolute;
	width: 25px;
	height: 25px;
	opacity: 0;
}

.cf-choice__box {
	flex-shrink: 0;
	width: 25px;
	height: 25px;
	background: var(--color-white) center / 24px 24px no-repeat;
	border: 1px solid var(--color-black);
}

.cf-choice input:checked + .cf-choice__box {
	background-color: var(--color-navy-clear);
	background-image: url("../../img/contact-form/icon-check.svg");
	border-color: var(--color-navy-clear);
}

.cf-choice input:focus-visible + .cf-choice__box {
	outline: 2px solid var(--color-navy-clear);
	outline-offset: 2px;
}

.cf-choice__text {
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--color-black);
}

@media (max-width: 1023px) {
	.cf-choices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.cf-field__note {
		font-size: 1rem;
	}

	.cf-field:has(.cf-choices) .cf-field__labeltext {
		font-size: 1.125rem;
	}

	.cf-textarea {
		height: 220px;
	}

	.cf-choices {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
}

/* 確認画面: ラベル（必須・任意＋項目名）と値を 1 行に並べる */
.p-contact-form--confirm .p-contact-form__fields {
	gap: 40px; /* 入力画面は 25px */
}

.p-contact-form--confirm .p-contact-form__actions {
	margin-top: 60px; /* 入力画面は 25px */
}

.p-contact-form--confirm .cf-field {
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

.p-contact-form--confirm .cf-field__label {
	flex-shrink: 0;
	width: 300px;
}

.cf-field__value {
	flex: 1;
	min-width: 0;
	padding-top: 5px; /* ラベル（高さ 34px）の文字と高さをそろえる */
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--color-black);
	overflow-wrap: anywhere;
}

@media (max-width: 767px) {
	.p-contact-form--confirm .p-contact-form__fields {
		gap: 30px;
	}

	.p-contact-form--confirm .p-contact-form__actions {
		margin-top: 40px;
	}

	.p-contact-form--confirm .cf-field {
		flex-direction: column;
		gap: 8px;
	}

	.p-contact-form--confirm .cf-field__label {
		width: auto;
	}

	.cf-field__value {
		padding-top: 0;
		font-size: 1rem;
	}
}

/* 同意・ボタン --------------------------------------------------------- */
.p-contact-form__consent {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
	margin-top: 25px;
}

/* 同意チェックの文中のリンク（プライバシーポリシー） */
.p-contact-form__privacy {
	color: var(--color-pink-red);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.p-contact-form__agree .cf-choice__text {
	font-size: 1.125rem;
}

@media (max-width: 767px) {
	.p-contact-form__agree .cf-choice__text {
		font-size: 1rem;
	}
}

.p-contact-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin-top: 25px;
}

/* 「修正する」ボタン: 「送信する」より目立たないよう、帯のスライドを出さず背景をうっすら色づけるだけにする */
.p-contact-form__edit {
	transition: background-color var(--duration);
}

.p-contact-form__edit::before {
	content: none;
}

@media (any-hover: hover) {
	.p-contact-form__edit:hover {
		color: var(--color-navy);
		background-color: var(--color-pale-grey);
	}
}

.p-contact-form__edit:focus-visible {
	color: var(--color-navy);
	background-color: var(--color-pale-grey);
}

/* 完了画面 ------------------------------------------------------------- */
.p-contact-form__complete {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 30px;
	text-align: center;
}

.p-contact-form__complete-title {
	margin-top: 10px;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: 0.1em;
	color: var(--color-pink-red);
}

.p-contact-form__complete-text {
	margin-top: 20px;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.67;
	letter-spacing: 0.1em;
	color: var(--color-navy);
}

.p-contact-form__complete .c-button {
	margin-top: 30px;
}

@media (max-width: 767px) {
	.p-contact-form__complete-title {
		font-size: 1.375rem;
	}

	.p-contact-form__complete-text {
		font-size: 1rem;
		text-align: left;
	}

	.p-contact-form__complete-text br {
		display: none;
	}
}

/* 送信中の読み込み表示（プラグインが出力）のスピナーの色 */
.rsc-loading-overlay {
	--color-brand: var(--color-pink-red);
}