/* ===== 診断ページの作り直し（2026-08-14） ===============================
 *
 * 対象: ex-diag / screening / tr-check / lm の各テンプレートを使う診断
 *   元カレ・復縁・トラウマ・HSP・ADHD・ASD・サイコパス・毒親・地雷・AC
 *
 * 直した点:
 *   ①開始ボタンが最初の画面に入っていなかった（932〜1068px の位置にあった）。
 *     ヒーローと導入カードの余白を詰めて、スクロールせずに押せる位置へ入れる。
 *   ②診断ごとに余白・角丸・影がばらばらで、同じサイトに見えなかった。
 *     カードと選択肢の見え方をそろえる。
 *   ③選択肢が小さく、指で押しにくかった。高さを確保する。
 *
 * 既存のクラス名は変えない。上から重ねるだけにして、
 * 各診断のJSに手を入れなくても効くようにする。
 * ===================================================================== */

/* ---------- ①最初の画面に開始ボタンを入れる ---------- */
.ex-diag__hero,
.screening__hero,
.tr-check__hero,
.lm__hero {
	padding-top: 26px;
	padding-bottom: 22px;
}
.ex-diag__title,
.screening__title,
.tr-check__title,
.lm__title {
	margin-bottom: 10px;
}
.ex-diag__desc,
.screening__desc,
.tr-check__desc,
.lm__desc {
	margin-bottom: 0;
	font-size: 13.5px;
	line-height: 1.95;
}

/* 導入カード。説明を読ませる前に、押せる位置へボタンを上げる */
.ex-diag__intro-card,
.screening__intro,
.tr-check__intro,
.lm__intro {
	margin-top: 12px;
	padding: 18px 16px 16px;
}
.ex-diag__intro-icon,
.screening__intro-icon {
	font-size: 32px;
	margin-bottom: 4px;
	line-height: 1.1;
}
.ex-diag__intro-list,
.screening__intro-list {
	margin: 10px 0 12px;
}
.ex-diag__intro-list li,
.screening__intro-list li {
	padding: 7px 0;
	font-size: 13px;
	line-height: 1.7;
}
.ex-diag__disclaimer,
.screening__note {
	margin-top: 10px;
	font-size: 11px;
	line-height: 1.75;
}

/* ---------- ②見え方をそろえる ---------- */
.ex-diag__q-card,
.screening__q,
.tr-check__q,
.lm__q {
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(45, 32, 70, .09);
	padding: 24px 18px 22px;
}
.ex-diag__start-btn,
.screening__start,
.tr-check__start,
.lm__start {
	display: block;
	width: 100%;
	padding: 16px 20px;
	border-radius: 999px;
	font-size: 15.5px;
	font-weight: 900;
	line-height: 1.3;
	letter-spacing: .01em;
	cursor: pointer;
}

/* ---------- ③選択肢を押しやすく ---------- */
.ex-diag__choice,
.screening__choice,
.tr-check__choice,
.lm__choice {
	min-height: 52px;
	padding: 14px 16px;
	margin: 0 0 9px;
	border-radius: 13px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	text-align: left;
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ex-diag__choice:active,
.screening__choice:active,
.tr-check__choice:active,
.lm__choice:active {
	transform: translateY(1px);
}

/* 進捗。1問目で幅0だと進んでいる感じが出ないので、最初から少し見せる */
.ex-diag__progress-bar > *,
.screening__progress > *,
.tr-check__progress > * {
	min-width: 5px;
}

@media (max-width: 400px) {
	.ex-diag__hero,
	.screening__hero,
	.tr-check__hero,
	.lm__hero {
		padding-top: 20px;
		padding-bottom: 18px;
	}
	.ex-diag__q-card,
	.screening__q,
	.tr-check__q,
	.lm__q {
		padding: 20px 15px 18px;
		border-radius: 17px;
	}
	.ex-diag__choice,
	.screening__choice,
	.tr-check__choice,
	.lm__choice {
		padding: 13px 14px;
		font-size: 14px;
	}
}

/* ---------- 元カレ・元カノ診断のヒーロー（2026-08-14） ----------
   ここだけ絵が無く、桃色の地に文字が乗っているだけで手薄だった。
   別れたあとの情景（雨の窓越しの夜景）を敷いて、他の診断と釣り合わせる。
   文字は必ず明るい色を明示する（暗い面に載るため）。 */
.page-template-page-ex-diagnosis .ex-diag__hero{
	position:relative;
	background:
		linear-gradient(180deg,rgba(26,16,34,.62) 0%,rgba(26,16,34,.48) 46%,rgba(26,16,34,.78) 100%),
		url("../images/art/fukuen-band-bg.webp") center/cover no-repeat;
	color:#f2e9f5;
}
.page-template-page-ex-diagnosis .ex-diag__label{
	background:rgba(255,255,255,.94);color:#a8437f;
	box-shadow:0 2px 12px rgba(20,12,36,.3)}
.page-template-page-ex-diagnosis .ex-diag__title{
	color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.page-template-page-ex-diagnosis .ex-diag__desc{color:#eadff0}
.page-template-page-ex-diagnosis .ex-diag__hero-bg{
	background:radial-gradient(560px 260px at 82% 10%,rgba(214,92,154,.22),transparent 62%)}
/* 3つの特徴カード。ヒーローを暗くしたぶん、白の透過が濁って見えていた。
   面を白で固定し、中の文字は暗い色に戻す。 */
.page-template-page-ex-diagnosis .xp-proof__item{
	background:rgba(255,255,255,.96);color:#3a2f4d;
	box-shadow:0 6px 18px rgba(20,12,36,.22)}
.page-template-page-ex-diagnosis .xp-proof__item strong{color:#231a3a}