@charset "UTF-8";
/**
 * Contact Form 7 スタイル最適化
 *
 * 設計の要点
 *   - 入力欄の高さは 52px 以上（モバイルのタップ領域と、和文の視認性）。
 *   - ラベルは必ず入力欄の上。プレースホルダをラベル代わりにしない
 *     （入力後にラベルが消える設計は B2B フォームで離脱を生む）。
 *   - 必須／任意を色ではなくバッジの文言で示す（色覚特性への配慮）。
 *   - エラーは「枠線の色」だけでなく「アイコン＋文言＋背景」で示す。
 *   - すべての色はプリセットのトークンを参照するため、
 *     プリセットを切り替えるとフォームの配色も自動で追従する。
 */

/* =========================================================================
 * レイアウト
 * ====================================================================== */

.ttcs-form,
.ttcs-form-demo {
	font-family: var(--ttcs-font-sans);
	color: var(--ttcs-ink);
}

.ttcs-formwrap {
	container-type: inline-size;
}

.ttcs-formgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.15rem 1.25rem;
}

.ttcs-formgrid > p,
.ttcs-formgrid > .ttcs-field {
	grid-column: 1 / -1;
	margin: 0;
}

.ttcs-formgrid > .is-half {
	grid-column: span 1;
}

@container (max-width: 560px) {
	.ttcs-formgrid > .is-half {
		grid-column: 1 / -1;
	}
}
@media (max-width: 600px) {
	.ttcs-formgrid {
		grid-template-columns: minmax(0, 1fr);
	}
	.ttcs-formgrid > .is-half {
		grid-column: 1 / -1;
	}
}

/* CF7 が自動挿入する空の <p> を潰す */
.ttcs-form p:empty {
	display: none;
}

/* =========================================================================
 * ラベルとバッジ
 * ====================================================================== */

.ttcs-form label,
.ttcs-form-demo label {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ttcs-ink);
	margin-bottom: 0.5rem;
}

.ttcs-req,
.ttcs-opt {
	display: inline-block;
	margin-left: 0.7em;
	padding: 0.3em 0.6em;
	font-size: 0.71rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.06em;
	border-radius: 3px;
	vertical-align: 0.1em;
}
.ttcs-req {
	background: color-mix(in srgb, #d1603d 14%, transparent);
	color: #b34a29;
	border: 1px solid color-mix(in srgb, #d1603d 34%, transparent);
}
.ttcs-opt {
	background: var(--ttcs-bg-sub);
	color: var(--ttcs-ink-3);
	border: 1px solid var(--ttcs-line);
}

/* =========================================================================
 * 入力欄
 * ====================================================================== */

.ttcs-form .wpcf7-form-control-wrap,
.ttcs-form-demo .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.ttcs-form input[type="text"],
.ttcs-form input[type="email"],
.ttcs-form input[type="tel"],
.ttcs-form input[type="url"],
.ttcs-form input[type="number"],
.ttcs-form input[type="date"],
.ttcs-form select,
.ttcs-form textarea,
.ttcs-form-demo input[type="text"],
.ttcs-form-demo input[type="email"],
.ttcs-form-demo input[type="tel"],
.ttcs-form-demo select,
.ttcs-form-demo textarea {
	width: 100%;
	min-height: 3.49rem;
	padding: 0.9rem 1.1rem;
	font-family: inherit;
	font-size: 1.07rem; /* 16px 未満だと iOS でズームが発生する */
	line-height: 1.7;
	color: var(--ttcs-ink);
	background-color: var(--ttcs-bg);
	border: 1px solid var(--ttcs-line-strong);
	border-radius: var(--ttcs-radius);
	box-shadow: none;
	transition: border-color 0.25s var(--ttcs-ease), box-shadow 0.25s var(--ttcs-ease),
		background-color 0.25s var(--ttcs-ease);
	appearance: none;
	-webkit-appearance: none;
}

.ttcs-form textarea,
.ttcs-form-demo textarea {
	min-height: 9rem;
	resize: vertical;
	line-height: 1.95;
}

.ttcs-form ::placeholder,
.ttcs-form-demo ::placeholder {
	color: var(--ttcs-ink-3);
	opacity: 0.72;
}

.ttcs-form :is(input, select, textarea):hover {
	border-color: var(--ttcs-ink-3);
}

.ttcs-form :is(input, select, textarea):focus,
.ttcs-form-demo :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--ttcs-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ttcs-accent) 18%, transparent);
	background-color: var(--ttcs-bg);
}

/* セレクトの矢印 */
.ttcs-form select,
.ttcs-form-demo select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m7 10 5 5 5-5' fill='none' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.15rem;
	cursor: pointer;
}

/* =========================================================================
 * チェックボックス・ラジオ
 * ====================================================================== */

.ttcs-form .wpcf7-list-item,
.ttcs-form-demo .wpcf7-list-item {
	display: block;
	margin: 0 0 0.6rem;
}
.ttcs-form .wpcf7-list-item:last-child {
	margin-bottom: 0;
}

.ttcs-form .wpcf7-list-item label,
.ttcs-form-demo .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0;
	padding: 0.7rem 0.9rem;
	font-weight: 500;
	font-size: 0.99rem;
	line-height: 1.75;
	border: 1px solid var(--ttcs-line);
	border-radius: var(--ttcs-radius);
	cursor: pointer;
	transition: border-color 0.25s var(--ttcs-ease), background-color 0.25s var(--ttcs-ease);
}
.ttcs-form .wpcf7-list-item label:hover {
	border-color: var(--ttcs-accent);
	background: var(--ttcs-accent-soft);
}

.ttcs-form input[type="checkbox"],
.ttcs-form input[type="radio"],
.ttcs-form-demo input[type="checkbox"],
.ttcs-form-demo input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.3rem;
	height: 1.3rem;
	margin: 0.22rem 0 0;
	flex: none;
	border: 1.5px solid var(--ttcs-line-strong);
	background: var(--ttcs-bg);
	cursor: pointer;
	transition: border-color 0.2s var(--ttcs-ease), background-color 0.2s var(--ttcs-ease);
}
.ttcs-form input[type="checkbox"],
.ttcs-form-demo input[type="checkbox"] {
	border-radius: 4px;
}
.ttcs-form input[type="radio"],
.ttcs-form-demo input[type="radio"] {
	border-radius: 50%;
}
.ttcs-form input[type="checkbox"]:checked,
.ttcs-form-demo input[type="checkbox"]:checked {
	background-color: var(--ttcs-accent);
	border-color: var(--ttcs-accent);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-size: 78%;
	background-position: center;
	background-repeat: no-repeat;
}
.ttcs-form input[type="radio"]:checked {
	border-color: var(--ttcs-accent);
	border-width: 6px;
}

/* 同意チェック（1項目だけ、枠線なしで軽く） */
.ttcs-field.is-consent .wpcf7-list-item label {
	border: 0;
	padding: 0;
	background: none;
	/*
	 * チェックボックスと文言を左揃えで並べる。
	 * 中央揃えのままだと、折り返したとき2行目が
	 * 「…同意しま／す」のように中央でぶら下がって読みにくい。
	 */
	display: inline-flex;
	align-items: flex-start;
	gap: 0.6em;
	text-align: left;
	line-height: 1.7;
	/*
	 * 「…同意しま／す」と1文字だけ落ちるのを避ける。
	 * 少しだけ小さくして1行に収め、収まらないときも
	 * <wbr> を入れた文節位置で折り返す。
	 */
	font-size: 0.95rem;
	word-break: keep-all;
	overflow-wrap: break-word;
	text-wrap: pretty;
}
.ttcs-field.is-consent {
	text-align: center;
	padding-top: 0.5rem;
}
.ttcs-field.is-consent .wpcf7-list-item {
	display: inline-block;
	max-width: 100%;
}
.ttcs-field.is-consent a {
	color: var(--ttcs-accent);
	text-underline-offset: 0.2em;
}

/* =========================================================================
 * 送信ボタンと状態
 * ====================================================================== */

.ttcs-field.is-submit {
	text-align: center;
	margin-top: 0.75rem;
}

.ttcs-form .wpcf7-submit,
.ttcs-form-demo .wpcf7-submit {
	min-width: min(100%, 20rem);
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/*
 * 送信ボタンの文言は1行に収める。
 * 「この内容で送信す／る」のように割れると、
 * 押す直前でいちばん目立つ要素が急に不格好になる。
 * 入らない幅では文字と余白を少しだけ詰める。
 */
.ttcs-form .wpcf7-submit,
.ttcs-form-demo .wpcf7-submit,
.ttcs-field.is-submit .ttcs-btn {
	white-space: nowrap;
}
@media (max-width: 420px) {
	.ttcs-form .wpcf7-submit,
	.ttcs-form-demo .wpcf7-submit,
	.ttcs-field.is-submit .ttcs-btn {
		font-size: 1rem;
		padding-inline: 1.2em;
		gap: 0.5em;
	}
}

/* 送信中：CF7 が form に .submitting を付ける */
.ttcs-form.submitting .wpcf7-submit {
	opacity: 0.6;
	pointer-events: none;
}
.ttcs-form.submitting .wpcf7-submit::after {
	content: "";
	position: absolute;
	right: 1.2rem;
	top: 50%;
	width: 1.05rem;
	height: 1.05rem;
	margin-top: -0.525rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ttcs-spin 0.7s linear infinite;
}
@keyframes ttcs-spin {
	to {
		transform: rotate(360deg);
	}
}

/* CF7 標準のスピナーは非表示にして、ボタン内に統一 */
.ttcs-form .wpcf7-spinner {
	display: none;
}

/* =========================================================================
 * バリデーション表示
 * ====================================================================== */

/* 個別項目のエラー */
.ttcs-form .wpcf7-not-valid {
	border-color: #d1603d !important;
	background-color: color-mix(in srgb, #d1603d 5%, transparent);
}

.ttcs-form .wpcf7-not-valid-tip {
	display: flex;
	align-items: flex-start;
	gap: 0.45em;
	margin-top: 0.5rem;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.6;
	color: #b34a29;
}
.ttcs-form .wpcf7-not-valid-tip::before {
	content: "";
	width: 1.05em;
	height: 1.05em;
	margin-top: 0.22em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='black'/><path d='M12 7v6M12 16.2v.1' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='black'/><path d='M12 7v6M12 16.2v.1' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

/* フォーム全体のレスポンス表示 */
.ttcs-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 1.1rem 1.35rem;
	border: 1px solid;
	border-radius: var(--ttcs-radius);
	font-size: 0.97rem;
	font-weight: 700;
	line-height: 1.8;
}

.ttcs-form.invalid .wpcf7-response-output,
.ttcs-form.unaccepted .wpcf7-response-output,
.ttcs-form.payment-required .wpcf7-response-output {
	border-color: color-mix(in srgb, #d1603d 45%, transparent);
	background: color-mix(in srgb, #d1603d 8%, transparent);
	color: #b34a29;
}

.ttcs-form.sent .wpcf7-response-output {
	border-color: color-mix(in srgb, var(--ttcs-accent) 45%, transparent);
	background: var(--ttcs-accent-soft);
	color: var(--ttcs-accent);
}

.ttcs-form.failed .wpcf7-response-output,
.ttcs-form.aborted .wpcf7-response-output {
	border-color: var(--ttcs-line-strong);
	background: var(--ttcs-bg-sub);
	color: var(--ttcs-ink-2);
}

/* 送信完了時は入力欄を薄くして、完了メッセージに視線を集める */
.ttcs-form.sent .ttcs-formgrid {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.5s var(--ttcs-ease);
}

/* =========================================================================
 * デザイン見本（CF7 未設定時）
 * ====================================================================== */

.ttcs-form-demo__note {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1.1rem;
	font-size: 0.84rem;
	line-height: 1.75;
	color: var(--ttcs-ink-2);
	background: var(--ttcs-bg-sub);
	border: 1px dashed var(--ttcs-line-strong);
	border-radius: var(--ttcs-radius);
}

/* =========================================================================
 * 補足
 * ====================================================================== */

.ttcs-formwrap .ttcs-note {
	margin-top: 1rem;
}

/* 反転セクション内でも入力欄は常に明色（可読性の担保） */
.is-tone-invert .ttcs-form :is(input, select, textarea),
.is-tone-accent .ttcs-form :is(input, select, textarea) {
	background-color: #fff;
	color: #16202f;
}