/* =========================================================
   contact.css（無料相談・お問い合わせ）
   ========================================================= */

/* 相談方法 */
.p-methods {
	display: grid;
	gap: 20px;
	max-width: 720px;
	margin-inline: auto;
}

.p-methods__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 24px 36px;
	background: var(--color-white);
	border-radius: 8px;
}

.p-methods__item .c-btn-cta {
	width: 100%;
	max-width: 340px;
	padding-inline: 16px;
	font-size: 1.6rem;
}

.p-methods__text {
	margin-top: 20px;
	font-size: 1.6rem;
	text-align: center;
	letter-spacing: 0;
}

/* 画面が狭いスマホで、ボタンの文字幅に押されて右にはみ出さないように */
.p-methods {
	grid-template-columns: minmax(0, 1fr);
}

.p-methods__item .c-btn-cta {
	min-width: 0;
	white-space: normal;
	text-align: center;
}

/* 改行は <wbr> の位置（文の区切り）だけで行う */
.p-methods__item .c-btn-cta,
.p-methods__text {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media (max-width: 480px) {
	.p-methods__item .c-btn-cta {
		gap: 6px;
		padding-inline: 12px;
		font-size: 1.5rem;
	}
}

@media (max-width: 374px) {
	.p-methods__item {
		padding: 32px 16px 28px;
	}
}

@media (min-width: 768px) {
	.p-methods {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

/* ---------------------------------------------------------
   フォーム（Contact Form 7）
   --------------------------------------------------------- */
.p-form {
	max-width: 480px;
	margin-inline: auto;
}

.p-form__admin {
	margin-bottom: 24px;
	padding: 12px 16px;
	font-size: 1.3rem;
	background: var(--color-beige);
	border: 1px solid var(--color-beige-border);
	border-radius: 6px;
}

.p-form__item + .p-form__item {
	margin-top: 28px;
}

.p-form__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 1.7rem;
	font-weight: 500;
}

.p-form__req {
	display: inline-block;
	padding: 1px 10px;
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-white);
	background: var(--color-accent);
	border-radius: var(--radius-pill);
}

.p-form .wpcf7-form-control-wrap {
	display: block;
}

.p-form__input {
	width: 100%;
	min-height: 40px;
	padding: 8px 14px;
	font-size: 1.6rem; /* iOSでズームしないよう16px以上 */
	background: var(--color-section-pale);
	border: 1px solid var(--color-primary-dark);
	border-radius: 4px;
}

.p-form__input:focus {
	background: var(--color-white);
	outline: 2px solid var(--color-primary);
	outline-offset: 0;
}

.p-form__textarea {
	min-height: 130px;
}

/* チェックボックス */
.p-form__checks,
.p-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

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

.p-form .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 1.6rem;
	cursor: pointer;
}

.p-form input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary-dark);
}

.p-form__note {
	margin-top: 24px;
	font-size: 1.4rem;
	line-height: 1.8;
}

.p-form__note a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 送信ボタン */
.p-form__submit {
	position: relative;
	width: fit-content;
	margin: 28px auto 0;
}

.p-form__btn {
	min-width: 210px;
	min-height: 52px;
	padding: 10px 56px 10px 40px;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-white);
	cursor: pointer;
	background: var(--color-primary-dark);
	border: none;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-btn);
	transition: filter var(--transition);
}

.p-form__btn:hover {
	filter: brightness(1.08);
}

.p-form__btn:disabled {
	cursor: not-allowed;
}

.p-form__submit::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 26px;
	width: 20px;
	height: 20px;
	pointer-events: none;
	background: var(--color-white)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231e7f80' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M6.5 12h10M12.5 7.5 17 12l-4.5 4.5'/%3E%3C/svg%3E")
		center / 16px no-repeat;
	border-radius: 50%;
	transform: translateY(-50%);
}

.p-form .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: -40px;
	margin: 0;
	transform: translateY(-50%);
}

/* CF7 のメッセージ */
.p-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 1.2rem;
	color: #d0453b;
}

.p-form .wpcf7-response-output {
	margin: 24px 0 0 !important;
	padding: 12px 16px !important;
	font-size: 1.4rem;
	border-radius: 6px;
}

/* フォーム入力欄は16px（iOSでタップ時に拡大されるのを防ぐ） */
.p-form input[type="text"],
.p-form input[type="email"],
.p-form input[type="tel"],
.p-form input[type="number"],
.p-form input[type="date"],
.p-form select,
.p-form textarea {
	font-size: 16px;
}
