/* ===== アダルトチルドレン診断 専用スタイル =====
 *
 * viral.css は元カレ診断用のピンク基調で、
 * 「機能不全家庭で子どもが担った役割」を扱うこの診断には合わない。
 * 夜の家の中の色（深い藍・くすんだ紫・灯りの橙）へ寄せる。
 *
 * 2026-08-13 の失敗と対処:
 *   ヒーローを暗くしたのに .ex-diag__desc の色を viral のまま（暗い文字）にしていたため、
 *   説明文が背景に溶けて読めなかった。
 *   暗い面に載る文字は必ず明るい色を明示する。数値だけでなく実物を見て確かめる。
 */

.ac-diag{
	--acd-bg:#f3f1f6; --acd-ink:#2f2838; --acd-mut:#6f6680;
	--acd-line:#e0dae8; --acd-accent:#6a5a96; --acd-warm:#b8763c;
	background:var(--acd-bg);
}

/* ---------- ヒーロー（暗い面。文字は必ず明るく） ---------- */
.ac-diag .ex-diag__hero{
	background:linear-gradient(168deg,#241d33 0%,#312845 52%,#1d1729 100%);
	padding:56px 0 46px;
	/* ヒーロー直下の地の文にも色指定が無く、body継承の暗い色のままだった。
	   面ごと明るい文字にして、指定漏れが起きても読めるようにする。 */
	color:#ded6ec;
}
.ac-diag .ex-diag__hero-bg{
	background:
		radial-gradient(620px 300px at 78% 4%,rgba(200,139,82,.20),transparent 62%),
		radial-gradient(520px 280px at 8% 96%,rgba(123,106,168,.24),transparent 60%);
}
.ac-diag .ex-diag__label{
	background:#fff;color:#7a5a2e;letter-spacing:.16em;
	box-shadow:0 2px 12px rgba(20,12,36,.28);
}
.ac-diag .ex-diag__title{
	color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.5);
}
/* 暗い面に載るので明るい色を明示する。ここを忘れると読めなくなる。 */
.ac-diag .ex-diag__desc{
	color:#ded6ec;
}
.ac-diag .ex-diag__desc strong,
.ac-diag .ex-diag__desc b{color:#fff}

/* ---------- 導入カード（白い面） ---------- */
.ac-diag .ex-diag__intro-card{
	background:#fff;border:1px solid var(--acd-line);border-radius:20px;
	box-shadow:0 10px 34px rgba(45,32,70,.10);
}
.ac-diag .ex-diag__intro-icon{filter:grayscale(.2)}
.ac-diag .ex-diag__intro-list li{color:var(--acd-ink);border-color:var(--acd-line)}
.ac-diag .ex-diag__start-btn{
	background:linear-gradient(135deg,#6a5a96,#463a70);color:#fff;border:0;
	box-shadow:0 12px 28px rgba(70,58,112,.32);
}
.ac-diag .ex-diag__start-btn:hover{background:linear-gradient(135deg,#7a68aa,#52447f)}
.ac-diag .ex-diag__disclaimer{color:var(--acd-mut)}

/* ---------- 設問 ---------- */
.ac-diag .ex-diag__q-card{
	background:#fff;border:1px solid var(--acd-line);border-radius:20px;
	box-shadow:0 10px 30px rgba(45,32,70,.09);padding:26px 20px 24px;
}
.ac-diag .ex-diag__q-text{
	color:var(--acd-ink);font-size:clamp(17px,4.2vw,21px);line-height:1.75;
	font-weight:800;letter-spacing:.01em;
}
.ac-diag .ex-diag__choices{margin-top:4px}
.ac-diag .ex-diag__choice{
	background:#fff;border:1.5px solid var(--acd-line);border-radius:13px;
	color:var(--acd-ink);padding:15px 18px;margin:0 0 9px;
	font-size:15px;font-weight:700;line-height:1.6;text-align:left;
	transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.ac-diag .ex-diag__choice:hover,
.ac-diag .ex-diag__choice:focus-visible{
	border-color:var(--acd-accent);background:#faf8fd;transform:translateX(3px);
}
.ac-diag .ex-diag__choice:active{background:#f2eef8}
.ac-diag .ex-diag__back-btn{color:var(--acd-mut);text-decoration:underline;text-underline-offset:3px}

/* 進捗。1問目で幅0だと進んでいる感じが出ないので最初から少し見せる。 */
.ac-diag .ex-diag__progress{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.ac-diag .ex-diag__progress-bar{
	flex:1;min-width:0;height:6px;background:#e3ddec;border-radius:99px;overflow:hidden;
}
.ac-diag .ex-diag__progress-bar > *{
	display:block;height:100%;min-width:5px;border-radius:99px;
	background:linear-gradient(90deg,#6a5a96,#b8763c);transition:width .3s ease;
}
.ac-diag .ex-diag__q-num{
	flex:none;font:900 13px/1 Poppins,sans-serif;color:var(--acd-accent);white-space:nowrap;
}
.ac-diag .ex-diag__q-num:after{content:" / 30";color:var(--acd-mut);font-weight:800}

/* ---------- 読み込み中 ---------- */
.ac-diag .ex-diag__loading{background:#fff;border:1px solid var(--acd-line);border-radius:20px}
.ac-diag .ex-diag__loading-spinner,
.ac-diag .ex-diag__spinner{border-color:#e6e0ef;border-top-color:var(--acd-accent)}

@media(max-width:430px){
	.ac-diag .ex-diag__hero{padding:44px 0 38px}
	.ac-diag .ex-diag__q-card{padding:22px 16px 20px;border-radius:17px}
	.ac-diag .ex-diag__choice{padding:13px 15px;font-size:14.5px;margin:0 0 8px}
	.ac-diag .ex-diag__q-text{font-size:17px}
}

/* ===== 結果直後のシェアバー（2026-08-13） =====
   これまではXへのリンクが1本、結果の一番下にあるだけだった。
   扱う題材が重いぶん、押しつけがましくならないよう色は落ち着かせる。 */
.ac-diag .ac-sharetop{
	margin:14px 0 0;padding:15px 14px 14px;border-radius:18px;
	background:#fff;border:1.5px solid var(--acd-line,#e0dae8);
	box-shadow:0 8px 24px rgba(45,32,70,.09);text-align:center}
.ac-diag .ac-sharetop__lead{
	margin:0 0 11px;font-size:13px;font-weight:900;color:var(--acd-ink,#2f2838);line-height:1.5}
.ac-diag .ac-sharetop__btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ac-diag .ac-sharetop__btn{
	flex:1 1 auto;min-width:104px;max-width:210px;
	padding:13px 12px;border:0;border-radius:999px;
	font-size:13.5px;font-weight:900;line-height:1.2;cursor:pointer;
	font-family:inherit;letter-spacing:.01em;
	transition:transform .14s ease,background .14s ease}
.ac-diag .ac-sharetop__btn:active{transform:translateY(1px)}
.ac-diag .ac-sharetop__btn--x{background:#000;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.26)}
.ac-diag .ac-sharetop__btn--line{background:#06c755;color:#fff;box-shadow:0 6px 16px rgba(6,199,85,.30)}
.ac-diag .ac-sharetop__btn--copy{background:#f5f2f9;color:#4a4059;box-shadow:inset 0 0 0 1.5px #ddd4e9}
@media(max-width:410px){
	.ac-diag .ac-sharetop__btn{min-width:0}
	.ac-diag .ac-sharetop__btn--x,
	.ac-diag .ac-sharetop__btn--line{flex:1 1 calc(50% - 4px);max-width:none}
	.ac-diag .ac-sharetop__btn--copy{flex:1 1 100%;max-width:none;padding:11px 12px;font-size:12.5px}
}

/* ===== 役割の続きを読ませる案内（2026-08-13） =====
   AC診断は毒親を扱う読みものと題材が同じなのに、導線が無かった。
   題材が重いので、煽らずに本文の続きとして置く。 */
.ac-diag .ac-offer{
	margin:16px 0 0;padding:22px 20px 20px;border-radius:18px;
	background:linear-gradient(165deg,#241d33 0%,#3a2f4e 100%);
	border:1.5px solid rgba(200,169,126,.42);
	box-shadow:0 14px 34px rgba(24,16,40,.24)}
.ac-diag .ac-offer__eyebrow{
	margin:0 0 8px;font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#c8a97e}
.ac-diag .ac-offer__h{
	margin:0 0 12px;font-size:clamp(17px,4.6vw,21px);font-weight:900;color:#fff;line-height:1.55}
.ac-diag .ac-offer__lead{margin:0 0 10px;font-size:13.5px;line-height:2.05;color:#e2dbef}
.ac-diag .ac-offer__blur{
	margin:0;font-size:13.5px;line-height:2.05;color:#c8bedd;
	-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%);
	mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 100%)}
.ac-diag .ac-offer__go{margin:6px 0 0;text-align:center}
.ac-diag .ac-offer__go a{
	display:inline-block;padding:14px 32px;border-radius:999px;text-decoration:none;
	background:linear-gradient(135deg,#c8a97e,#a8739a);color:#1c1530;
	font-size:15px;font-weight:900;box-shadow:0 8px 22px rgba(200,169,126,.32)}
@media(max-width:400px){
	.ac-diag .ac-offer{padding:18px 16px 16px}
	.ac-diag .ac-offer__lead,.ac-diag .ac-offer__blur{font-size:13px}
}

/* ===== 閉じる前に残してもらう（2026-08-13） =====
   結果はURLに入っているので、送っておけばあとから開ける。
   煽りに見えないよう、警告は一行だけ。 */
.cq-keep,.ac-keep{
	margin:12px 0 0;padding:16px 16px 14px;border-radius:16px;
	background:#f2fbf5;border:1.5px solid #bfe8cd}
.cq-keep__warn,.ac-keep__warn{
	margin:0 0 6px;font-size:12.5px;font-weight:900;color:#2f7d55;line-height:1.6}
.cq-keep__warn:before,.ac-keep__warn:before{content:"⚠ ";}
.cq-keep__lead,.ac-keep__lead{margin:0 0 12px;font-size:12.5px;line-height:1.9;color:#3c5a49}
.cq-keep__btns,.ac-keep__btns{margin:0;display:flex;gap:8px;flex-wrap:wrap}
.cq-keep__btn,.ac-keep__btn{
	flex:1 1 auto;min-width:132px;text-align:center;text-decoration:none;
	padding:13px 14px;border-radius:999px;font-size:13.5px;font-weight:900;line-height:1.2}
.cq-keep__btn--send,.ac-keep__btn--send{background:#06c755;color:#fff;box-shadow:0 6px 16px rgba(6,199,85,.28)}
.cq-keep__btn--add,.ac-keep__btn--add{background:#fff;color:#2f7d55;box-shadow:inset 0 0 0 1.5px #bfe8cd}
.cq-keep__note,.ac-keep__note{margin:10px 0 0;font-size:11.5px;line-height:1.85;color:#5b7a68}
@media(max-width:400px){
	.cq-keep__btn,.ac-keep__btn{flex:1 1 100%;min-width:0}
}

/* 診断を受ける前の帯。受ける前から、残せることを知らせておく。 */
.cq-linebar{
	display:flex;align-items:center;gap:10px;flex-wrap:wrap;
	margin:0 0 14px;padding:11px 14px;border-radius:14px;
	background:#f2fbf5;border:1px solid #cfe9d8}
.cq-linebar__txt{margin:0;flex:1 1 190px;font-size:12px;font-weight:800;color:#2f7d55;line-height:1.65}
.cq-linebar__btn{
	flex:0 0 auto;padding:9px 18px;border-radius:999px;background:#06c755;color:#fff;
	font-size:12.5px;font-weight:900;text-decoration:none}
/* 既存の a の色指定に負けて緑地に紫文字になっていた。面ごとに指定して確実に上書きする。 */
.cq-keep .cq-keep__btn--send,
.ac-keep .ac-keep__btn--send{color:#fff}
.cq-keep .cq-keep__btn--add{color:#2f7d55}
.ac-keep .ac-keep__btn--add{color:#2f7d55}
.cq-linebar .cq-linebar__btn{color:#fff}
/* 送信ボタンをやめ、友だち追加を主役にした。緑を主ボタンへ移す。 */
.cq-keep .cq-keep__btn--add,
.ac-keep .ac-keep__btn--add{
	background:#06c755;color:#fff;box-shadow:0 6px 16px rgba(6,199,85,.28)}