/*
 * takamuku.com お問い合わせフォーム（CF7 #1120）
 * form-template.html の tc-* クラス専用。左右サイドバーには影響しない。
 */

.tc-form {
	--tc-ink: #16161d;
	--tc-ink-soft: #3b3b46;
	--tc-muted: #6b6b76;
	--tc-line: #d9d9de;
	--tc-field: #f7f7f8;
	--tc-error: #b42318;
	--tc-error-bg: #fef3f2;
	--tc-ok: #1f7a4d;
	--tc-radius: 6px;

	width: 100%;
	margin: 0;
	color: var(--tc-ink);
	line-height: 1.7;
}

/*
 * 本文はテンプレートのフレックス行の中にあり、既定では内容の幅に縮む。
 * 文章の長い他ページは結果的に列幅いっぱいになるが、フォームは縮んで右に余白が出るため、
 * このフォームを含む本文だけ列幅いっぱいに広げて他ページと揃える。
 */
.wp-block-post-content:has(.tc-form) {
	flex: 1 1 auto;
	min-width: 0;
}

.tc-form p {
	margin: 0;
}

/* リード文 */
.tc-lead {
	margin: 0 0 2.5rem !important;
	color: var(--tc-ink-soft);
	font-size: 0.95rem;
	line-height: 1.9;
}

/* 各項目 */
.tc-fields {
	display: grid;
	gap: 1.75rem;
}

.tc-field {
	display: block;
	margin: 0;
	font-weight: inherit;
}

.tc-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.55rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.tc-req {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 3px;
	background: var(--tc-ink);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.tc-help {
	display: block;
	margin-top: 0.45rem;
	color: var(--tc-muted);
	font-size: 0.8rem;
	line-height: 1.6;
}

.tc-count {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

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

/* 入力欄 */
.tc-form .tc-input,
.tc-form .tc-textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.8rem 1rem;
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	background: var(--tc-field);
	color: var(--tc-ink);
	font: inherit;
	font-size: 1rem; /* iOS のフォーカス時ズームを防ぐため 16px 以上 */
	line-height: 1.6;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tc-form .tc-textarea {
	min-height: 12rem;
	resize: vertical;
}

.tc-form .tc-input::placeholder,
.tc-form .tc-textarea::placeholder {
	color: #a3a3ad;
	opacity: 1;
}

.tc-form .tc-input:hover,
.tc-form .tc-textarea:hover {
	border-color: #b9b9c1;
}

.tc-form .tc-input:focus,
.tc-form .tc-textarea:focus {
	outline: none;
	border-color: var(--tc-ink);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(22, 22, 29, 0.1);
}

/* 入力エラー */
.tc-form .wpcf7-not-valid {
	border-color: var(--tc-error) !important;
	background: var(--tc-error-bg) !important;
}

.tc-form .wpcf7-not-valid:focus {
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12) !important;
}

.tc-form .wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.45rem;
	color: var(--tc-error);
	font-size: 0.8rem;
	font-weight: 600;
}

.tc-form .wpcf7-not-valid-tip::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--tc-error);
	color: #fff;
	font-size: 0.65rem;
	line-height: 1;
}

/* 送信エリア */
.tc-actions {
	display: grid;
	justify-items: center;
	gap: 0;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--tc-line);
}

.tc-actions > p {
	margin: 0;
}

.tc-form .wpcf7-turnstile {
	width: 100%;
}

/* interaction-only では確認が必要なときだけウィジェットが現れる。出たときだけ余白を取る */
.tc-form .wpcf7-turnstile:has(iframe[style*="visibility: visible"]),
.tc-form .wpcf7-turnstile:has(iframe:not([style*="display: none"])) {
	margin-bottom: 1rem;
}

.tc-form .wpcf7-turnstile:empty {
	display: none;
}

.tc-note {
	margin: 0 0 1rem !important;
	color: var(--tc-muted);
	font-size: 0.8rem;
	text-align: center;
}

.tc-note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tc-note a:hover {
	color: var(--tc-ink);
}

.tc-form .tc-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 15rem;
	margin: 0;
	padding: 0.95rem 2.5rem;
	border: 1px solid var(--tc-ink);
	border-radius: 999px;
	background: var(--tc-ink);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tc-form .tc-submit:hover {
	background: #fff;
	color: var(--tc-ink);
}

.tc-form .tc-submit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tc-ink);
}

.tc-form .tc-submit:active {
	transform: translateY(1px);
}

/* 送信中 */
.wpcf7-form.submitting .tc-submit {
	background: var(--tc-ink-soft);
	border-color: var(--tc-ink-soft);
	color: #fff;
	cursor: progress;
	pointer-events: none;
}

.tc-form .wpcf7-spinner {
	display: none;
}

.wpcf7-form.submitting .tc-form .wpcf7-spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	margin: 0 0 0 0.6rem;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	background: none;
	opacity: 1;
	vertical-align: middle;
	animation: tc-spin 0.7s linear infinite;
}

.tc-form .wpcf7-spinner::before {
	content: none;
}

.tc-submit-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.wpcf7-form.submitting .tc-submit-wrap .wpcf7-spinner {
	position: absolute;
	right: 1.4rem;
	margin: 0;
}

@keyframes tc-spin {
	to { transform: rotate(360deg); }
}

/* 送信結果メッセージ（エラー系） */
.wpcf7 form:has(.tc-form) .wpcf7-response-output {
	box-sizing: border-box;
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--tc-line);
	border-left-width: 4px;
	border-radius: 6px;
	background: #fafafa;
	color: #16161d;
	font-size: 0.875rem;
	line-height: 1.7;
}

.wpcf7 form:has(.tc-form).init .wpcf7-response-output,
.wpcf7 form:has(.tc-form).resetting .wpcf7-response-output,
.wpcf7 form:has(.tc-form).submitting .wpcf7-response-output,
.wpcf7 form:has(.tc-form) .wpcf7-response-output:empty {
	display: none;
}

.wpcf7 form:has(.tc-form).invalid .wpcf7-response-output,
.wpcf7 form:has(.tc-form).unaccepted .wpcf7-response-output,
.wpcf7 form:has(.tc-form).payment-required .wpcf7-response-output {
	border-color: #f1c4bf;
	border-left-color: #b42318;
	background: #fef3f2;
	color: #7a1a12;
}

.wpcf7 form:has(.tc-form).failed .wpcf7-response-output,
.wpcf7 form:has(.tc-form).aborted .wpcf7-response-output,
.wpcf7 form:has(.tc-form).spam .wpcf7-response-output {
	border-color: #f0d9a8;
	border-left-color: #b54708;
	background: #fffaeb;
	color: #7a2e0e;
}

/* 送信完了パネル（JS が is-done を付与） */

/*
 * 本文の幅はテンプレートの3カラムが内容から決めているため、入力欄を display:none で
 * 消すと本文が縮み、左右サイドバーの位置まで動いてしまう。高さ0・不可視で残して
 * 通常時と同じ幅を保つ。
 */
.tc-form.is-done .tc-lead,
.tc-form.is-done .tc-fields,
.tc-form.is-done .tc-actions {
	height: 0;
	margin: 0 !important;
	padding: 0;
	border: 0;
	overflow: hidden;
	visibility: hidden;
}

.wpcf7 form:has(.tc-form.is-done) .wpcf7-response-output {
	display: none;
}

.tc-done[hidden] {
	display: none;
}

.tc-done {
	display: grid;
	justify-items: center;
	gap: 0.9rem;
	padding: 3rem 1.5rem;
	border: 1px solid var(--tc-line);
	border-radius: 10px;
	background: #fafafa;
	text-align: center;
	animation: tc-fade-in 0.35s ease both;
}

.tc-done__icon {
	width: 3.25rem;
	height: 3.25rem;
	fill: none;
	stroke: var(--tc-ok);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tc-done__icon path {
	stroke-dasharray: 30;
	stroke-dashoffset: 30;
	animation: tc-draw 0.45s 0.15s ease forwards;
}

.tc-form .tc-done__title {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	outline: none;
}

.tc-done__text {
	color: var(--tc-ink-soft);
	font-size: 0.9rem;
	line-height: 1.9;
}

.tc-form .tc-done__again {
	margin-top: 0.6rem;
	padding: 0.6rem 1.6rem;
	border: 1px solid var(--tc-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--tc-ink);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tc-form .tc-done__again:hover {
	background: var(--tc-ink);
	color: #fff;
}

.tc-form .tc-done__again:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tc-ink);
}

@keyframes tc-fade-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

@keyframes tc-draw {
	to { stroke-dashoffset: 0; }
}

/* スマホ */
@media (max-width: 600px) {
	.tc-lead {
		margin-bottom: 2rem !important;
		font-size: 0.9rem;
	}

	.tc-lead br {
		display: none;
	}

	.tc-fields {
		gap: 1.5rem;
	}

	.tc-form .tc-textarea {
		min-height: 10rem;
	}

	.tc-actions {
		margin-top: 2rem;
		padding-top: 1.5rem;
	}

	.tc-actions > p:last-child,
	.tc-submit-wrap,
	.tc-form .tc-submit {
		width: 100%;
	}

	.tc-done {
		padding: 2.5rem 1.25rem;
	}

	.tc-done__text br {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tc-form *,
	.tc-form *::before {
		animation: none !important;
		transition: none !important;
	}

	.tc-done__icon path {
		stroke-dashoffset: 0;
	}
}