@charset "UTF-8";

/**
 * キャラクター診断（#diagnosis / .page-character-diagnosis）
 * 選択表の列幅・セル幅は既存の #diagnosis ルールを維持し、ページ全体の余白・タイポ・ボタンだけ整える。
 */

/* ----- ページ全体（表の列幅・% は #diagnosis 側で変更しない） ----- */
#diagnosis.page-character-diagnosis {
	padding-bottom: 1.75rem;
}

.page-character-diagnosis .entry-header {
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: none;
}

.page-character-diagnosis .entry-header::after {
	content: "";
	display: block;
	height: 3px;
	margin-top: 0.65rem;
	max-width: 7.5rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--matching-color-primary, #0077c7), var(--matching-color-accent, #0f766e));
}

.page-character-diagnosis .entry-title {
	margin: 0;
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: var(--matching-color-text, #23221e);
	line-height: 1.35;
}

/* 共通 style.css の .entry-title::after と二重にならないように */
.page-character-diagnosis .entry-title::after {
	display: none;
	content: none;
}

.page-character-diagnosis .entry-content {
	color: var(--matching-color-text, #23221e);
	line-height: 1.55;
	padding-left: clamp(0rem, 1.5vw, 0.75rem);
	padding-right: clamp(0rem, 1.5vw, 0.75rem);
	/* スタッフ登録の --sr-* と同じ拍（法的文言・同意） */
	/* 個人情報ブロック本文（登録フォームの表セルに近いサイズ・destyle の li 上書き用） */
	--cd-prose-fs: clamp(1.5rem, 0.35vw + 1.32rem, 1.62rem);
	--cd-prose-lh: 1.62;
	--cd-prose-title-fs: clamp(1.78rem, 0.5vw + 1.46rem, 2rem);
	--cd-prose-title-lh: 1.38;
	--cd-prose-meta-fs: max(1.12rem, calc(var(--cd-prose-fs) - 0.2rem));
	--cd-prose-meta-lh: 1.55;
	--cd-inset-y: clamp(0.88rem, 1.25vw + 0.56rem, 1.15rem);
	--cd-inset-x: clamp(1rem, 1.6vw + 0.72rem, 1.55rem);
	--cd-field-gap: 0.8rem;
	--cd-section-gap: 1.5rem;
	--cd-form-card-bg: color-mix(in srgb, var(--matching-color-bg) 93%, var(--matching-color-surface) 7%);
	--cd-form-card-border: color-mix(in srgb, var(--matching-color-border) 78%, transparent);
	--cd-handling-pad-x: 2.25rem;
	--cd-handling-ol-indent: 3rem;
	--cd-handling-ul-indent: 1.75rem;
	--cd-handling-text: #0f172a;
	--cd-handling-text-sub: #334155;
	--cd-handling-text-meta: #475569;
	--cd-consent-label-fs: 1.3rem;
	--cd-consent-label-lh: 1.55;
}

.page-character-diagnosis .entry-content > *:first-child {
	margin-top: 0;
}

.page-character-diagnosis .contact-form-container {
	margin-top: 0.25rem;
	max-width: none;
	width: 100%;
	padding: clamp(1.18rem, 2.2vw + 0.82rem, 1.9rem);
	box-sizing: border-box;
	background: var(--cd-form-card-bg);
	border: 1px solid var(--cd-form-card-border);
	border-radius: calc(var(--matching-radius, 8px) + 3px);
	box-shadow: var(--matching-shadow-md);
	color: var(--matching-color-text);
	font-size: var(--cd-prose-fs);
	line-height: var(--cd-prose-lh);
}

/* ----- 基本情報（入力）/ 確認画面テーブル / 入力欄 / .wpcf7-not-valid-tip は
 *       matching-cf7-form.css に共通化済み。
 *       性格診断は max-width 88em でテーブルを中央配置・全幅に近く伸ばす独自運用と、
 *       th.title の vertical-align: middle、確認画面側の th.title bg を上書きする。 ----- */
#diagnosis .matching-cf7-form .contactTable,
#diagnosis .matching-cf7-form #contactFormConfirm.contactTable {
	max-width: 88em;
	margin-left: auto;
	margin-right: auto;
}
#diagnosis .matching-cf7-form #contactForm.contactTable th.title,
#diagnosis .matching-cf7-form #contactForm.contactTable td.input {
	vertical-align: middle;
}

/* ========== 登録済みプロフィール固定（キャラクター診断） ========== */
.page-character-diagnosis .matching-cd-profile-lock-banner {
	margin: 0 0 var(--cd-section-gap, 1.5rem);
	padding: var(--cd-inset-y, 0.9rem) var(--cd-inset-x, 1.1rem);
	border: 1px solid color-mix(in srgb, var(--matching-color-primary, #0077c7) 24%, transparent);
	border-radius: calc(var(--matching-radius, 8px) + 2px);
	background: color-mix(in srgb, var(--matching-color-primary, #0077c7) 7%, var(--matching-color-bg, #fff));
}

.page-character-diagnosis .matching-cd-profile-lock-banner-title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.45rem, 0.35vw + 1.28rem, 1.58rem);
	font-weight: 700;
	line-height: 1.42;
	color: var(--matching-color-primary, #0077c7);
}

.page-character-diagnosis .matching-cd-profile-lock-banner-text {
	margin: 0;
	font-size: var(--cd-prose-fs, 1.5rem);
	line-height: var(--cd-prose-lh, 1.62);
	color: var(--matching-color-text, #23221e);
}

.page-character-diagnosis .matching-cd-profile-lock-banner-note {
	margin: 0.55rem 0 0;
	font-size: max(1.2rem, calc(var(--cd-prose-fs, 1.5rem) - 0.18rem));
	line-height: var(--cd-prose-lh, 1.62);
	color: var(--matching-color-secondary, #6b6a64);
}

.page-character-diagnosis .matching-cd-profile-lock-banner-note a {
	color: var(--matching-color-primary, #0077c7);
	font-weight: 600;
	text-underline-offset: 2px;
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] #contactForm .matching-cf7-profile-locked-row th.title {
	background: color-mix(in srgb, var(--matching-color-surface, #f8f7f6) 86%, var(--matching-color-primary, #0077c7) 14%);
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] #contactForm .matching-cf7-profile-locked-row td.input {
	background: color-mix(in srgb, var(--matching-color-bg, #fff) 90%, var(--matching-color-surface-alt, #f3f2f0) 10%);
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] .matching-cf7-field-lock-badge {
	display: inline-block;
	margin-left: 0.42rem;
	padding: 0.1rem 0.48rem;
	font-size: max(1.08rem, calc(var(--matching-cf7-th-fs, 1.48rem) * 0.68));
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	color: var(--matching-color-secondary, #6b6a64);
	vertical-align: middle;
	white-space: nowrap;
	background: var(--matching-color-surface-alt, #f3f2f0);
	border: 1px solid var(--matching-color-border, #d6d3d0);
	border-radius: 999px;
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] .matching-cf7-profile-locked-row td.input .wpcf7-form-control-wrap {
	position: relative;
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] .matching-cf7-field-locked {
	border-style: dashed !important;
	border-color: color-mix(in srgb, var(--matching-color-border, #d6d3d0) 72%, var(--matching-color-secondary, #6b6a64) 28%) !important;
	background: var(--matching-color-surface-alt, #f3f2f0) !important;
	color: var(--matching-color-text, #23221e) !important;
	cursor: not-allowed;
	box-shadow: none;
	padding-right: calc(var(--matching-cf7-input-padding-x, 1rem) + 1.55rem) !important;
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] .matching-cf7-field-locked:focus {
	border-color: color-mix(in srgb, var(--matching-color-border, #d6d3d0) 72%, var(--matching-color-secondary, #6b6a64) 28%) !important;
	box-shadow: none;
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] select.matching-cf7-field-locked {
	background-image: none;
	pointer-events: none;
}

#diagnosis [data-matching-diagnosis-lock-profile-fields="1"] .matching-cf7-profile-locked-row td.input .wpcf7-form-control-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.9rem;
	width: 1.05rem;
	height: 1.05rem;
	transform: translateY(-50%);
	opacity: 0.5;
	pointer-events: none;
	color: var(--matching-color-secondary, #6b6a64);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#diagnosis .matching-cf7-form #contactFormConfirm.contactTable th.title,
#diagnosis .matching-cf7-form #contactFormConfirm.contactTable td.input {
	vertical-align: top;
}

/* ========== 確認画面：入力内容の確認（プロフィール登録の confirmation-screen に合わせる） ========== */
.page-character-diagnosis #confirmationScreen.confirmation-screen {
	margin-top: 0.25rem;
	margin-bottom: 0;
	padding: clamp(1.18rem, 2.2vw + 0.82rem, 1.9rem);
	box-sizing: border-box;
	background: var(--cd-form-card-bg);
	border: 1px solid var(--cd-form-card-border);
	border-radius: calc(var(--matching-radius, 8px) + 3px);
	box-shadow: var(--matching-shadow-md);
}

.page-character-diagnosis #confirmationScreen .confirmation-title {
	font-weight: 700;
	font-size: var(--cd-prose-title-fs);
	line-height: var(--cd-prose-title-lh);
	margin: 0 0 var(--cd-section-gap);
	color: var(--matching-color-text);
	border-bottom: 3px solid var(--matching-color-primary, #0077c7);
	padding-bottom: 0.75rem;
	letter-spacing: 0.032em;
}

.page-character-diagnosis #confirmationScreen .matching-must {
	display: none;
}

.page-character-diagnosis #confirmationScreen #contactFormConfirm.contactTable {
	margin-bottom: var(--cd-section-gap);
	table-layout: fixed;
	box-shadow: var(--matching-shadow-md);
}

.page-character-diagnosis #confirmationScreen #contactFormConfirm.contactTable th.title {
	width: 29%;
	min-width: 11rem;
	padding: calc(var(--cd-inset-y) + 0.06rem) var(--cd-inset-x);
	font-size: clamp(var(--matching-public-label-fs, 1.5rem), 0.38vw + 1.06rem, 1.48rem);
	font-weight: 700;
	color: var(--matching-color-text);
	background: var(--matching-color-surface);
	border-right: 1px solid var(--matching-color-border);
	line-height: 1.5;
	letter-spacing: 0.032em;
}

.page-character-diagnosis #confirmationScreen #contactFormConfirm.contactTable td.input {
	padding: calc(var(--cd-inset-y) + 0.06rem) var(--cd-inset-x);
	font-size: var(--cd-prose-fs);
	line-height: var(--cd-prose-lh);
	background: var(--matching-color-bg);
}

.page-character-diagnosis #confirmationScreen #contactFormConfirm .wpcf7-form-control-wrap {
	display: inline;
	margin: 0;
	width: auto;
	max-width: none;
}

.page-character-diagnosis #confirmationScreen #contactFormConfirm .cd-confirm-value {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	padding: 0.35rem 0.78rem;
	margin: 0.1rem 0.18rem 0.1rem 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--cd-prose-fs);
	font-weight: 500;
	line-height: var(--cd-prose-lh);
	letter-spacing: 0.024em;
	color: var(--matching-color-text);
	word-break: break-word;
	vertical-align: middle;
	background: var(--matching-color-surface-alt);
	border: 1px solid var(--matching-color-border);
	border-radius: var(--matching-radius, 8px);
}

.page-character-diagnosis #confirmationScreen #contactFormConfirm .cd-confirm-value:empty {
	display: none;
}

.page-character-diagnosis #confirmationScreen .cd-confirm-note {
	margin-top: 0;
	margin-bottom: 0.65rem;
	font-size: var(--cd-prose-fs);
	line-height: var(--cd-prose-lh);
	color: var(--matching-color-secondary);
}

.page-character-diagnosis #confirmationScreen .choice-text + .choice-text {
	margin-top: var(--cd-section-gap, 1.5rem);
}

.page-character-diagnosis #confirmationScreen .choiceScroll {
	max-height: min(70vh, 42rem);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#diagnosis #confirmationScreen .choiceTable tbody tr:hover td {
	background-color: var(--matching-color-bg, #fff);
}

#diagnosis #confirmationScreen .choiceTable tbody tr:hover td.answer {
	background-color: color-mix(in srgb, var(--matching-color-primary, #0077c7) 6%, var(--matching-color-bg, #fff));
}

#diagnosis #confirmationScreen .radio-input.cd-confirm-radio::before {
	border-color: var(--matching-color-primary, #0077c7);
	border-width: 2px;
}

#diagnosis #confirmationScreen .radio-input.cd-confirm-radio .wpcf7-list-item-label {
	color: var(--matching-color-primary, #0077c7);
}

.page-character-diagnosis.is-confirmation-visible .btn-wrapper:has(#confirmationBtn) {
	display: none;
}

.page-character-diagnosis.is-confirmation-visible .btn-wrapper.btn-actions-row {
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 0;
}

/* 入力欄サイズは matching-cf7-form 共通＋プロフィール登録に近い拍 */
.page-character-diagnosis .matching-cf7-form {
	--matching-cf7-th-fs: clamp(var(--matching-public-label-fs, 1.5rem), 0.38vw + 1.06rem, 1.48rem);
	--matching-cf7-td-fs: clamp(1.5rem, 0.35vw + 1.32rem, 1.62rem);
	--matching-cf7-input-fs: clamp(1.5rem, 0.35vw + 1.32rem, 1.62rem);
	--matching-cf7-input-h: 4rem;
	--matching-cf7-input-padding-y: 0.62rem;
	--matching-cf7-input-padding-x: 1.02rem;
	--matching-cf7-input-max: min(46rem, 100%);
	--matching-cf7-cell-pad-y: clamp(0.88rem, 1.25vw + 0.56rem, 1.15rem);
	--matching-cf7-cell-pad-x: clamp(1rem, 1.6vw + 0.72rem, 1.55rem);
	--matching-cf7-th-bg: var(--matching-color-surface);
}

/* ========== 個人情報の取り扱い・同意：本体は matching-cf7-form.css に共通化 ========== */
.page-character-diagnosis .entry-content .matching-cf7-form .headling#handling {
	margin-top: var(--cd-section-gap);
}
.page-character-diagnosis .entry-content .matching-cf7-form {
	--matching-cf7-handling-prose-fs: var(--cd-prose-fs);
	--matching-cf7-handling-prose-lh: var(--cd-prose-lh);
	--matching-cf7-handling-prose-title-fs: var(--cd-prose-title-fs);
	--matching-cf7-handling-prose-title-lh: var(--cd-prose-title-lh);
	--matching-cf7-handling-pad-y: var(--cd-inset-y);
	--matching-cf7-handling-pad-x: var(--cd-handling-pad-x);
	--matching-cf7-handling-ol-indent: var(--cd-handling-ol-indent);
	--matching-cf7-handling-ul-indent: var(--cd-handling-ul-indent);
	--matching-cf7-handling-text: var(--cd-handling-text);
	--matching-cf7-handling-text-sub: var(--cd-handling-text-sub);
	--matching-cf7-handling-text-meta: var(--cd-handling-text-meta);
	--matching-cf7-consent-label-fs: var(--cd-consent-label-fs);
	--matching-cf7-consent-label-lh: var(--cd-consent-label-lh);
	--matching-cf7-consent-pad-y: 1.125rem;
	--matching-cf7-consent-pad-x: 1.375rem;
	--matching-cf7-consent-min-height: 3.125rem;
}

.page-character-diagnosis .entry-content .matching-cf7-form .form-group.form-check,
.page-character-diagnosis .entry-content .matching-cf7-form .form-check {
	margin-top: var(--cd-section-gap);
}

/* 旧 CF7 admin 本文: [acceptance] 移行前の label.form-check-inner 構造 — レイアウトは matching-cf7-form.css */

/* ----- 以下、表のサイズ指定は元ファイルどおり（変更なし） ----- */

/* CF7 の装飾用 ::after のみ除去（選択の円は .radio-input 内の ::before を使う） */
#diagnosis .wpcf7-list-item-label::after {
	display: none;
}

/* キャラクター診断：選択テーブル・結果表示 */
#diagnosis {
	margin-top: 0;
}

#diagnosis .choice-text h1 {
	margin-top: 0.15rem;
	margin-bottom: 0.55rem;
	padding: 0 0 0 0.65rem;
	display: block;
	font-size: clamp(1.65rem, 1.2rem + 0.75vw, 1.95rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.35;
	color: var(--matching-color-heading);
	border-left: 4px solid var(--matching-color-primary);
}

#diagnosis .choice-text p {
	margin-top: 0;
	margin-bottom: 0.45rem;
	font-size: var(--cd-prose-fs, 1.5rem);
	line-height: var(--cd-prose-lh, 1.65);
	color: var(--matching-color-secondary);
}

/* 問題ブロック同士の余白（旧 .choiceScroll の下マージンに頼らず、セクション単位で付ける） */
#diagnosis .choice-text + .choice-text {
	margin-top: var(--cd-section-gap, 1.5rem);
}

#diagnosis table.choiceTable {
	text-align: center;
	border-collapse: collapse;
	width: 100%;
}

#diagnosis table.choiceTable th {
	padding: 0.55rem 0.65rem;
	font-size: clamp(var(--matching-public-label-fs, 1.5rem), 0.38vw + 1.06rem, 1.48rem);
	line-height: 1.4;
	border: 1px solid var(--matching-color-border);
	background: var(--matching-color-surface);
	color: var(--matching-color-heading);
	vertical-align: middle;
	text-align: left;
}

#diagnosis table.choiceTable td {
	padding: 0.55rem 0.65rem;
	font-size: var(--cd-prose-fs, 1.5rem);
	line-height: var(--cd-prose-lh, 1.62);
	border: 1px solid var(--matching-color-border);
	background-color: var(--matching-color-bg);
	vertical-align: middle;
}

#diagnosis .choiceTable-1 thead tr td {
	font-weight: bold;
	background: var(--matching-color-surface-alt);
	color: var(--matching-color-heading);
	border-color: var(--matching-color-border);
	text-align: center !important;
}

#diagnosis .choiceTable tr td:first-child {
	text-align: center !important;
	width: 5%;
}

#diagnosis .choiceTable tr td:last-child {
	width: 20%;
}

/*
 * 選択肢セル：PCでは display:flex を付けない（テーブルレイアウトが崩れ、列幅が効かず縦に見えることがあるため）。
 * 横並びは label.radio-input の inline-flex + セル側の nowrap で担保。
 */
#diagnosis .choiceTable td.answer {
	display: table-cell;
	width: 20%;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	line-height: 0; /* Win: inline-block 選択肢のベースラインずれを抑える */
	background: var(--matching-color-bg);
}

#diagnosis .choiceTable td.answer br {
	display: none !important;
}

#diagnosis .choiceTable td.answer .radio-input {
	display: inline-grid;
	grid-template-areas: "stack";
	place-items: center;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	vertical-align: middle;
	line-height: 0;
	isolation: isolate;
}

#diagnosis .choiceTable tr td:nth-child(2),
#diagnosis .choiceTable-1 tr td:nth-child(3) {
	text-align: left;
	padding-left: 10px;
}

#diagnosis .choiceTable tr:nth-child(5n) td {
	border-bottom: 2px solid var(--matching-color-border);
}

#diagnosis .choiceTable tbody tr:hover td {
	background-color: var(--matching-color-surface);
}

#diagnosis .choiceTable tbody tr:hover td.answer {
	background-color: color-mix(in srgb, var(--matching-color-primary) 6%, var(--matching-color-bg));
}

#diagnosis .choiceTable td.answer .radio-input::before,
#diagnosis .choiceTable td.answer .radio-input .wpcf7-list-item-label,
#diagnosis .choiceTable td.answer .radio-input input[type="radio"] {
	grid-area: stack;
}

#diagnosis .choiceTable td.answer .radio-input input[type="radio"] {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	z-index: 2;
}

/* 記号（A / B / ・ / ◯ など）は grid で円と同じセルに重ね、flex で中央寄せ。
   実体は script-diagnosis.js が描画する SVG（フォントメトリクス非依存）。 */
#diagnosis .choiceTable td.answer .radio-input .wpcf7-list-item-label {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: 700;
	/* SVG 化前の一瞬だけ素のテキストが見える可能性があるためフォールバック値 */
	font-size: min(1.45rem, calc(var(--cd-prose-fs, 1.5rem) * 0.97));
	line-height: 1;
	cursor: pointer;
	box-sizing: border-box;
	text-align: center;
	pointer-events: none;
	color: var(--matching-color-secondary);
	background: transparent;
	box-shadow: none;
	transition: color 0.18s ease;
}

/* SVG（円内記号）はラベル内で中央にフィット */
#diagnosis .choiceTable td.answer .radio-input .radio-input-svg {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	overflow: visible;
	pointer-events: none;
	color: inherit;
}

/* 外枠の円（::before）も同じ grid セルに重ねる */
#diagnosis .choiceTable td.answer .radio-input::before {
	content: "";
	position: relative;
	width: 100%;
	height: 100%;
	border: 2px solid transparent;
	border-radius: 50%;
	box-sizing: border-box;
	pointer-events: none;
	transition: border-color 0.18s ease;
	z-index: 0;
}

#diagnosis .choiceTable td.answer .radio-input input[type="radio"]:checked + .wpcf7-list-item-label,
#diagnosis .choiceTable td.answer .radio-input:has(input[type="radio"]:checked) .wpcf7-list-item-label {
	color: var(--matching-color-primary);
	background: transparent;
}

#diagnosis .choiceTable td.answer .radio-input:has(input[type="radio"]:checked)::before {
	border-color: var(--matching-color-primary);
	border-width: 2px;
}

#diagnosis-result {
	font-size: clamp(var(--matching-public-label-fs, 1.5rem), 1rem + 1vw, 1.45rem);
	line-height: 1.68;
	color: var(--matching-color-text);
	text-align: center;
	border-radius: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 下余白は .choice-text + .choice-text や entry の兄弟余白に任せる（表直下の「空き」が二重にならないように） */
.choiceScroll {
	padding: 0.35rem;
	border: 1px solid var(--matching-color-border);
	border-radius: 0.6rem;
	background: var(--matching-color-bg);
	box-shadow: none;
	margin-bottom: 0;
}

#diagnosis .btn-wrapper {
	display: flex;
}

.diagnosis-result {
	margin: 0 auto;
	width: 80vw;
	padding-bottom: 2rem;
	font-size: clamp(var(--matching-public-label-fs, 1.5rem), 1rem + 1vw, 1.45rem);
	line-height: 1.68;
}

.diagnosis-result .results {
	text-align: center;
	margin-bottom: 1rem;
	font-size: clamp(2rem, 5.5vw, 3rem);
	line-height: 1.22;
}

.diagnosis-result .category {
	margin-bottom: 0.5rem;
}

.diagnosis-result p {
	margin-bottom: 0.35rem;
	margin-left: 20px;
	line-height: 1.68;
	font-size: clamp(var(--matching-public-label-fs, 1.5rem), 1rem + 1vw, 1.45rem);
}

.diagnosis-result .recommend {
	margin-bottom: 1.25rem;
}

/* ============================================================
 * 診断結果（サンクス）画面 — シンプル版
 *   - ヒーロー: 完了バッジ + 「あなたのキャラクタータイプは」+ 型ピル
 *   - 詳細: 型ごとに「型名 → 解説 → おすすめの職業」の縦並びカード
 *   - アクション: 求人を見る / もう一度診断 / トップへ戻る
 *
 *   表示崩れを避けるため、grid は使わず素直な block / flex のみで構成。
 * ============================================================ */

.page-character-diagnosis .character-diagnosis-thanks {
	--cd-thanks-radius: 12px;
	--cd-thanks-primary: var(--matching-color-primary, #0077c7);
	--cd-thanks-primary-soft: color-mix(in srgb, var(--cd-thanks-primary) 8%, var(--matching-color-bg, #fff));
	--cd-thanks-border: color-mix(in srgb, var(--cd-thanks-primary) 18%, var(--matching-color-border, #e6e3df));
	max-width: 56rem;
	margin: 1.5rem auto 0;
	padding: 0;
	color: var(--matching-color-text, #2b2a26);
}

.page-character-diagnosis .character-diagnosis-thanks > * + * {
	margin-top: 1.5rem;
}

/* ===== ヒーロー ===== */
.page-character-diagnosis .character-diagnosis-thanks-hero {
	text-align: center;
	padding: 2.2rem 1.5rem 2rem;
	background: var(--matching-color-bg, #fff);
	border: 1px solid var(--cd-thanks-border);
	border-radius: var(--cd-thanks-radius);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* ヒーロー: チェックバッジ */
.page-character-diagnosis .character-diagnosis-thanks-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto 0.9rem;
	color: #fff;
	background: var(--matching-color-success-text, #16a34a);
	border-radius: 999px;
}

.page-character-diagnosis .character-diagnosis-thanks-eyebrow {
	margin: 0 0 0.3rem;
	font-size: var(--matching-public-caption-fs, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--matching-color-success-text, #16a34a);
	text-transform: uppercase;
}

.page-character-diagnosis .character-diagnosis-thanks-title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.95rem);
	font-weight: 700;
	color: var(--matching-color-heading, #1f1e1b);
	line-height: 1.45;
}

/* ヒーロー: 型ピル */
.page-character-diagnosis .character-diagnosis-thanks-type {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
}

.page-character-diagnosis .character-diagnosis-thanks-type-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1.4rem;
	font-size: clamp(var(--matching-public-meta-fs, 1.5rem), 1rem + 1vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: var(--cd-thanks-primary);
	border-radius: 999px;
}

/* ===== 詳細結果（型ごとカード） ===== */
.page-character-diagnosis .character-diagnosis-thanks-result {
	display: block;
}

.page-character-diagnosis .character-diagnosis-thanks-result > * + * {
	margin-top: 1rem;
}

.page-character-diagnosis .character-diagnosis-thanks-card {
	display: block;
	padding: 1.4rem 1.4rem 1.5rem;
	background: var(--matching-color-bg, #fff);
	border: 1px solid var(--cd-thanks-border);
	border-radius: var(--cd-thanks-radius);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.page-character-diagnosis .character-diagnosis-thanks-card-name {
	margin: 0 0 1rem;
	padding: 0 0 0.6rem;
	font-size: clamp(var(--matching-public-label-fs, 1.5rem), 1.1rem + 0.7vw, 1.65rem);
	font-weight: 700;
	color: var(--cd-thanks-primary);
	letter-spacing: 0.04em;
	border-bottom: 2px solid color-mix(in srgb, var(--cd-thanks-primary) 30%, transparent);
}

.page-character-diagnosis .character-diagnosis-thanks-card-field {
	display: block;
}

.page-character-diagnosis .character-diagnosis-thanks-card-field + .character-diagnosis-thanks-card-field {
	margin-top: 1rem;
}

.page-character-diagnosis .character-diagnosis-thanks-card-label {
	display: block;
	margin: 0 0 0.45rem;
	font-size: var(--matching-public-meta-fs, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--matching-color-secondary, #6b6a64);
}

.page-character-diagnosis .character-diagnosis-thanks-card-body {
	margin: 0;
	font-size: clamp(1.45rem, 1.2rem + 0.5vw, 1.6rem);
	line-height: 1.8;
	color: var(--matching-color-text);
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* ===== アクション: サイト共通 .btn 2 つ + テキストリンク 1 つ ===== */
.page-character-diagnosis .character-diagnosis-thanks .matching-thanks-my-page-note {
	margin: 0 0 1.2rem;
	font-size: var(--matching-public-meta-fs, 1.5rem);
	line-height: 1.65;
	color: var(--matching-color-secondary, #6b6a64);
	text-align: center;
}

.page-character-diagnosis .character-diagnosis-thanks-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	/* 結果カード群とアクション群は性質が違うので、共通の 1.5rem より広く空ける */
	margin: 3rem auto 0;
	padding: 0;
	text-align: center;
}

/* 上 2 つのボタンは同じ最小幅で揃える */
.page-character-diagnosis .character-diagnosis-thanks-actions .btn {
	min-width: 28rem;
	max-width: 100%;
}

/* 「トップへ戻る」: 控えめなテキストリンクに格下げ */
.page-character-diagnosis .character-diagnosis-thanks-textlink {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.4rem 0.6rem;
	color: var(--matching-color-secondary, #6b6a64);
	font-size: var(--matching-public-caption-fs, 1.5rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--matching-color-secondary, #6b6a64) 40%, transparent);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.page-character-diagnosis .character-diagnosis-thanks-textlink:hover {
	color: var(--cd-thanks-primary);
	text-decoration-color: var(--cd-thanks-primary);
}

/* レスポンシブ */
@media (max-width: 600px) {
	.page-character-diagnosis .character-diagnosis-thanks {
		margin-top: 1rem;
	}
	.page-character-diagnosis .character-diagnosis-thanks > * + * {
		margin-top: 1.1rem;
	}
	.page-character-diagnosis .character-diagnosis-thanks-hero {
		padding: 1.8rem 1rem 1.6rem;
	}
	.page-character-diagnosis .character-diagnosis-thanks-card {
		padding: 1.1rem 1rem 1.2rem;
	}
	.page-character-diagnosis .character-diagnosis-thanks-actions {
		gap: 0.75rem;
		margin-top: 2.2rem;
	}
	.page-character-diagnosis .character-diagnosis-thanks-actions .btn {
		min-width: 0;
		width: 100%;
	}
}

.none {
	display: none;
}

@media (max-width: 768px) {
	.page-character-diagnosis .contact-form-container,
	.page-character-diagnosis #confirmationScreen.confirmation-screen {
		padding: 0.85rem 0.7rem 1rem;
	}

	.page-character-diagnosis #confirmationScreen .confirmation-title {
		font-size: clamp(1.72rem, 5.2vw + 0.9rem, 2rem);
		margin-bottom: 1.15rem;
	}

	#diagnosis .contact-form-container #contactForm.contactTable,
	#diagnosis #confirmationScreen #contactFormConfirm.contactTable {
		border-radius: var(--matching-radius, 8px);
	}

	#diagnosis .contact-form-container #contactForm.contactTable th.title,
	#diagnosis .contact-form-container #contactForm.contactTable td.input,
	#diagnosis #confirmationScreen #contactFormConfirm.contactTable th.title,
	#diagnosis #confirmationScreen #contactFormConfirm.contactTable td.input {
		display: block;
		width: 100%;
		min-width: 0;
		border-right: 0;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#diagnosis .contact-form-container #contactForm.contactTable th.title,
	#diagnosis #confirmationScreen #contactFormConfirm.contactTable th.title {
		padding-bottom: 0.3rem;
		padding-top: 1rem;
		border-bottom: 0;
	}

	#diagnosis .contact-form-container #contactForm.contactTable td.input,
	#diagnosis #confirmationScreen #contactFormConfirm.contactTable td.input {
		padding-top: 0.35rem;
		padding-bottom: 1rem;
	}

	#diagnosis .contact-form-container #contactForm.contactTable input[type="text"],
	#diagnosis .contact-form-container #contactForm.contactTable input[type="email"],
	#diagnosis .contact-form-container #contactForm.contactTable select,
	#diagnosis #confirmationScreen #contactFormConfirm .cd-confirm-value {
		max-width: 100%;
	}

	.page-character-diagnosis #confirmationScreen .choiceScroll {
		max-height: 65vh;
	}

	#diagnosis .choiceTable thead {
		display: none;
	}

	#diagnosis .choiceTable tr {
		padding-bottom: 0.65rem;
		display: block;
	}

	#diagnosis .choiceTable td {
		display: block;
		width: 100% !important;
		text-align: left;
		position: relative;
		font-size: var(--cd-prose-fs, 1.5rem);
		line-height: var(--cd-prose-lh, 1.65);
		padding: 0.55rem 0.65rem 0.55rem 10% !important;
	}

	#diagnosis .choiceTable-2 td {
		padding-left: 5% !important;
	}

	#diagnosis .choiceTable tr td:last-child {
		text-align: center !important;
		padding-left: 0 !important;
	}

	/* モバイルでも選択肢は横一列 */
	#diagnosis .choiceTable td.answer {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	#diagnosis .choiceTable tr:nth-child(5n) td {
		border: 1px dotted color-mix(in srgb, var(--matching-color-border, #d6d3d0) 85%, transparent);
	}

	#diagnosis .choiceTable td.answer {
		background: color-mix(in srgb, var(--matching-color-primary, #0077c7) 4%, var(--matching-color-bg, #fff));
	}

	#diagnosis .choiceTable td::after {
		content: attr(data-label);
		position: absolute;
		top: 50%;
		left: 15px;
		transform: translateY(-50%);
		font-weight: bold;
		font-size: var(--cd-prose-fs, 1.5rem);
		color: var(--matching-color-heading, #1f1e1b);
	}

	#diagnosis .choiceTable td[data-label="A"]::after,
	#diagnosis .choiceTable td[data-label="B"]::after {
		content: "" attr(data-label);
		color: var(--matching-color-primary, #0077c7);
	}

	#diagnosis .radio-input .wpcf7-list-item-label {
		font-size: min(1.45rem, calc(var(--cd-prose-fs, 1.5rem) * 0.97));
	}

	.choiceScroll {
		max-height: 65vh;
		height: auto;
		min-height: 12rem;
		overflow: auto;
		margin-bottom: 0;
		padding: 0.2rem;
	}
}

/* ========== スマホ最適化（640px 以下・プロフィール登録に合わせる） ========== */
@media (max-width: 640px) {
	#diagnosis.page-character-diagnosis {
		overflow-x: clip;
	}

	.page-character-diagnosis .entry-content {
		--cd-prose-fs: clamp(1.48rem, 3.8vw + 1.12rem, 1.62rem);
		--cd-prose-title-fs: clamp(1.72rem, 5.2vw + 0.9rem, 2rem);
		--cd-inset-x: 0.95rem;
		--cd-inset-y: 0.78rem;
		--cd-handling-pad-x: 1.2rem;
		--cd-handling-ol-indent: 2rem;
		--cd-handling-ul-indent: 1.35rem;
		--cd-consent-label-fs: 1.24rem;
		max-width: 100%;
		overflow-x: clip;
	}

	body.page-character-diagnosis .site-container,
	body.page-character_diagnosis .site-container,
	body.page-diagnosis .site-container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		padding-bottom: 1.5rem;
	}

	.page-character-diagnosis .entry-header {
		margin-bottom: 0.85rem;
		padding-bottom: 0.55rem;
	}

	.page-character-diagnosis .entry-title {
		font-size: clamp(1.72rem, 5.2vw + 0.9rem, 2rem);
		line-height: 1.4;
	}

	.page-character-diagnosis .contact-form-container,
	.page-character-diagnosis #confirmationScreen.confirmation-screen {
		padding: 0.85rem 0.7rem 1rem;
		border-radius: var(--matching-radius, 8px);
	}

	.page-character-diagnosis .matching-cf7-form {
		--matching-cf7-th-fs: clamp(var(--matching-public-label-fs, 1.5rem), 2.8vw + 1.1rem, 1.55rem);
		--matching-cf7-td-fs: clamp(1.48rem, 3.8vw + 1.12rem, 1.62rem);
		--matching-cf7-input-fs: clamp(1.48rem, 3.8vw + 1.12rem, 1.62rem);
		--matching-cf7-input-h: max(4.4rem, 4rem);
		--matching-cf7-cell-pad-x: 0.95rem;
		--matching-cf7-cell-pad-y: 0.78rem;
	}

	.page-character-diagnosis #confirmationScreen .confirmation-title {
		font-size: var(--cd-prose-title-fs);
		margin-bottom: 1.15rem;
	}

	#diagnosis .choice-text h1 {
		font-size: clamp(1.48rem, 3.5vw + 1rem, 1.72rem);
		margin-bottom: 0.45rem;
	}

	#diagnosis .choiceTable td {
		padding: 0.5rem 0.65rem 0.5rem 2.85rem !important;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	#diagnosis .choiceTable-2 td {
		padding-left: 0.85rem !important;
	}

	#diagnosis .choiceTable td:first-child {
		padding-left: 0.65rem !important;
		text-align: left !important;
	}

	#diagnosis .choiceTable td:first-child::after {
		content: none;
	}

	#diagnosis .choiceTable td::after {
		left: 0.85rem;
		font-size: clamp(var(--matching-public-label-fs, 1.5rem), 2.8vw + 0.98rem, 1.38rem);
	}

	#diagnosis .choiceTable td.answer {
		flex-wrap: wrap;
		gap: 6px;
		padding-left: 0.65rem !important;
		padding-right: 0.65rem !important;
	}

	#diagnosis .choiceTable td.answer .radio-input {
		width: 2.35rem;
		height: 2.35rem;
	}

	.page-character-diagnosis .entry-content .btn-wrapper {
		padding-left: 0.15rem;
		padding-right: 0.15rem;
	}

	.page-character-diagnosis .entry-content .btn-wrapper.btn-actions-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.page-character-diagnosis .entry-content .btn-wrapper .contact-btn,
	.page-character-diagnosis .entry-content .btn-wrapper input[type="submit"],
	.page-character-diagnosis .entry-content .btn-wrapper .confirmation-btn,
	.page-character-diagnosis .entry-content .btn-wrapper .edit-btn {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.page-character-diagnosis .entry-content .btn-wrapper .submit-wrapper,
	.page-character-diagnosis .entry-content .btn-wrapper .confirmation-wrapper,
	.page-character-diagnosis .entry-content .btn-wrapper .edit-wrapper {
		width: 100%;
		max-width: 100%;
	}

	.page-character-diagnosis .entry-content .btn-add-block {
		width: 100%;
		max-width: 100%;
	}

	.page-character-diagnosis .entry-content .matching-cf7-form .headling#handling .frame_box {
		padding: 1rem 1.2rem 1.1rem;
	}

	.page-character-diagnosis .entry-content .matching-cf7-form .form-check .wpcf7-list-item-label,
	.page-character-diagnosis .entry-content .matching-cf7-form .form-check .form-check-label {
		white-space: normal;
	}
}

/* ----- 設問選択：飛ばし回答の強調 ----- */
#diagnosis .choiceTable td.answer.is-unanswered {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--matching-color-danger-text, #b42318) 55%, transparent);
	background: color-mix(in srgb, var(--matching-color-danger-text, #b42318) 6%, var(--matching-color-bg, #fff));
	white-space: normal;
}

#diagnosis .choiceTable td.answer .diagnosis-choice-error {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin-top: 0.35rem;
	font-size: max(1.2rem, calc(var(--cd-prose-fs, 1.45rem) - 0.15rem));
	font-weight: 600;
	line-height: 1.4;
	color: var(--matching-color-danger-text, #b42318);
	text-align: center;
	white-space: normal;
}

#diagnosis .choiceTable td.answer .diagnosis-choice-error[hidden] {
	display: none !important;
}

#diagnosis .choiceTable td.answer.is-unanswered .radio-input::before {
	border-color: color-mix(in srgb, var(--matching-color-danger-text, #b42318) 45%, var(--matching-color-border, #d6d3d0));
}

/* ----- フォーム下部ボタン（診断ページでは staff 用 CSS が無いので theme 変数に寄せる） ----- */
.page-character-diagnosis .entry-content .btn-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--cd-field-gap);
	margin-top: var(--cd-section-gap);
	margin-bottom: var(--cd-section-gap);
	padding: var(--cd-field-gap) 0 calc(var(--cd-section-gap) - 0.25rem);
}

.page-character-diagnosis .entry-content .btn-wrapper.btn-actions-row {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem 1.25rem;
}

.page-character-diagnosis .entry-content .btn-wrapper .submit,
.page-character-diagnosis .entry-content .btn-wrapper .confirmation-wrapper,
.page-character-diagnosis .entry-content .btn-wrapper .edit-wrapper,
.page-character-diagnosis .entry-content .btn-wrapper .submit-wrapper {
	display: block;
}

.page-character-diagnosis .entry-content .btn-wrapper.btn-actions-row > .submit {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
}

.page-character-diagnosis .entry-content .btn-wrapper .submit.hide-before-after .confirmation-btn,
.page-character-diagnosis .entry-content .btn-wrapper .submit.is-disabled .confirmation-btn {
	opacity: 0.6;
	cursor: not-allowed;
}

.page-character-diagnosis .entry-content .btn-wrapper .submit .confirmation-wrapper.disabled {
	pointer-events: none;
}

.page-character-diagnosis .entry-content .btn-wrapper .submit-wrapper input {
	width: auto;
	min-width: 0;
}

/* .contact-btn / .confirmation-btn / .edit-btn の構造・色は
 * style.css の共通基底（.contact-btn / .is-confirmation / .is-edit）に集約済み。
 * 性格診断ではホバー時のシャドウ強調だけ上書きする。 */
.page-character-diagnosis .entry-content input[type="submit"].contact-btn:hover,
.page-character-diagnosis .entry-content .contact-btn.confirmation-btn:hover:not([disabled]) {
	box-shadow: 0 4px 12px color-mix(in srgb, var(--matching-color-primary) 40%, transparent);
}

.page-character-diagnosis .entry-content .btn-add-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--matching-btn-min-height, 4rem);
	padding: var(--matching-btn-padding-y, 1rem) var(--matching-btn-padding-x, 1.8rem);
	font-size: var(--matching-btn-font-size, 1.2rem);
	font-weight: 600;
	font-family: inherit;
	line-height: 1.35;
	text-align: center;
	letter-spacing: 0.02em;
	border-radius: var(--matching-radius, 8px);
	border: var(--matching-btn-border-width, 2px) solid var(--matching-color-border, #d6d3d0);
	background: var(--matching-color-bg, #ffffff);
	color: var(--matching-color-text, #23221e);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex-shrink: 0;
	transition: background-color var(--matching-transition, 0.2s ease), border-color var(--matching-transition, 0.2s ease);
}

.page-character-diagnosis .entry-content .btn-add-block:hover {
	background-color: var(--matching-color-surface, #f8f7f6);
	border-color: var(--matching-color-muted, #706d65);
}

@media print {
	.site-header,
	.site-footer {
		display: none !important;
	}
}