/* =========================================================================
   診断ページの解説セクション（.qab）

   結果をJSで描く診断ページは、静的HTMLだと質問だけのページに見えてしまう。
   そこで各ページにサーバー側の本文を置いており、そのための共通スタイル。
   相性診断は quiz.css を読まないので、ここだけ独立させている。
   ========================================================================= */
/* ===== 診断ページの解説（図解つき） ===== */
.qab{
	max-width:660px;margin:24px auto 0;padding:22px 18px 20px;text-align:left;
	background:linear-gradient(180deg,#fff,#fdfbff);
	border:2px solid #ece3f8;border-radius:22px;
	box-shadow:0 10px 30px rgba(107,63,160,.07);
}
.qab__label{
	font-size:10.5px;font-weight:900;letter-spacing:.16em;color:#b3a3e0;margin:0 0 6px;
}
.qab__title{
	font-size:19px;font-weight:900;color:#3a2a55;margin:0 0 12px;line-height:1.55;
	padding-bottom:10px;border-bottom:2px dashed #ece3f8;
}
.qab__lead{font-size:13.5px;line-height:2;color:#3c3155;margin:0 0 16px;}
.qab p{font-size:13.5px;line-height:2;color:#3c3155;margin:0 0 12px;}
.qab strong{color:#6b3fa0;}

/* 2軸の対比 */
.qab__vs{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;margin:0 0 10px;}
.qab__vs-item{
	background:#fff;border:2px solid #ece3f8;border-radius:16px;padding:13px 15px;
	border-top-width:5px;
}
.qab__vs-item[data-side="mbti"]{border-top-color:#8b6cc1;}
.qab__vs-item[data-side="svaf"]{border-top-color:#E8698B;}
.qab__vs-tag{
	display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.03em;
	color:#fff;background:#8b6cc1;border-radius:999px;padding:3px 11px;margin:0 0 7px;
}
.qab__vs-item[data-side="svaf"] .qab__vs-tag{background:#E8698B;}
.qab__vs-item b{display:block;font-size:16px;font-weight:900;color:#3a2a55;margin:0 0 6px;}
.qab__vs-item p{font-size:12.5px;line-height:1.9;margin:0;}
.qab__vs-x{
	display:block;text-align:center;font-size:17px;font-weight:900;color:#c4b5e0;margin:-2px 0;
}
.qab__note{font-size:12.5px;line-height:1.95;color:#6d6086;margin:0 0 18px;}

/* 見出し */
.qab__h3{
	display:flex;align-items:center;gap:9px;
	font-size:15.5px;font-weight:900;color:#4a2f7a;margin:22px 0 10px;
}
.qab__no{
	display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;border-radius:8px;background:#8b6cc1;color:#fff;
	font-size:11.5px;font-weight:900;flex-shrink:0;
}

/* 質問数の内訳 */
.qab__axes{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 12px;}
.qab__axis{
	display:grid;grid-template-columns:58px 1fr auto;grid-template-rows:auto auto;
	gap:2px 10px;align-items:center;
	background:#faf7ff;border:1.5px solid #ece3f8;border-radius:12px;padding:10px 12px;
}
.qab__axis[data-sv="1"]{background:#fdf3f7;border-color:#f6dbe6;}
.qab__axis-k{
	grid-row:1 / span 2;
	display:flex;align-items:center;justify-content:center;
	font-size:12px;font-weight:900;color:#fff;background:#8b6cc1;
	border-radius:9px;padding:7px 4px;
}
.qab__axis[data-sv="1"] .qab__axis-k{background:#E8698B;}
.qab__axis b{font-size:13.5px;font-weight:900;color:#3a2a55;}
.qab__axis i{
	font-style:normal;font-size:11px;font-weight:900;color:#6b3fa0;
	background:#fff;border:1.5px solid #e0d3f2;border-radius:999px;padding:2px 9px;white-space:nowrap;
}
.qab__axis p{grid-column:2 / span 2;font-size:12px;line-height:1.75;margin:0;color:#5b4a75;}

/* 実データの分布 */
.qab__stat{
	background:#fff;border:2px solid #ece3f8;border-radius:16px;padding:14px 15px;margin:0 0 14px;
}
.qab__stat-h{font-size:13px;font-weight:800;color:#4a3560;margin:0 0 10px;}
.qab__stat-h b{font-size:19px;font-weight:900;color:#6b3fa0;margin:0 3px;}
.qab__bar{display:flex;height:28px;border-radius:999px;overflow:hidden;background:#f3ecfb;margin:0 0 10px;}
.qab__bar-seg{
	display:flex;align-items:center;justify-content:center;
	font-size:11px;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18);min-width:0;
}
.qab__legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin:0 0 10px;padding:0;list-style:none;}
.qab__legend li{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#4a3560;}
.qab__legend i{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.qab__legend b{margin-left:auto;font-size:12.5px;font-weight:900;color:#3a2a55;}
.qab__stat-note{font-size:11.5px;line-height:1.85;color:#8b7f9d;margin:0;}

/* 注意書き */
.qab__care{
	background:#fff6f2;border:1.5px solid #f5d9c8;border-radius:14px;padding:13px 15px;margin:0 0 12px;
}
.qab__care p{margin:0;font-size:13px;line-height:1.95;}
.qab__facts{display:grid;gap:6px;margin:0;padding:0;list-style:none;}
.qab__facts li{
	display:flex;align-items:center;gap:9px;
	font-size:12.5px;font-weight:700;color:#5b4a75;
	background:#faf7ff;border-radius:10px;padding:9px 12px;
}
.qab__facts span{font-size:14px;}

@media (min-width:600px){
	.qab{padding:26px 24px 22px;}
	.qab__vs{grid-template-columns:1fr auto 1fr;gap:12px;}
	.qab__vs-x{margin:0;}
	.qab__axes{grid-template-columns:1fr 1fr;}
	.qab__legend{grid-template-columns:repeat(4,1fr);}
}

/* =========================================================================
   64タイプ早見表（.q64）— 診断ページ専用

   「64タイプ診断 無料」で来た人は、受ける前に判定先の全パターンを見たがる。
   /types/ は1タイプずつ縦に読ませる図鑑なので、こちらは
   16(MBTI)×4(愛着スタイル)のマトリクスにして役割を分ける。
   SPが流入の大半なので4列のまま組み、PCで行見出しを横に出す。
   ========================================================================= */
.q64{
	max-width:660px;margin:20px auto 0;padding:22px 14px 20px;text-align:left;
	background:linear-gradient(180deg,#fffdfa,#fdf7ff);
	border:2px solid #efe6f8;border-radius:22px;
	box-shadow:0 10px 30px rgba(107,63,160,.07);
}
.q64__label{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:#b3a3e0;margin:0 0 6px;}
.q64__title{
	font-size:19px;font-weight:900;color:#3a2a55;margin:0 0 12px;line-height:1.55;
	padding-bottom:10px;border-bottom:2px dashed #efe6f8;
}
.q64__lead{font-size:13.5px;line-height:2;color:#3c3155;margin:0 0 16px;}
.q64__lead strong{color:#6b3fa0;}

/* コードの読み方 */
.q64__code{
	background:#fff;border:1.5px solid #ece3f8;border-radius:16px;
	padding:14px 12px;margin:0 0 16px;text-align:center;
}
.q64__code-h{font-size:11.5px;font-weight:900;color:#8b6cc1;margin:0 0 8px;letter-spacing:.04em;}
.q64__code-ex{display:flex;justify-content:center;gap:5px;margin:0 0 10px;}
.q64__code-ex span,.q64__code-ex b{
	display:flex;align-items:center;justify-content:center;
	width:34px;height:40px;border-radius:9px;
	font-size:19px;font-weight:900;line-height:1;
	background:#f4eefb;color:#6b3fa0;border:1.5px solid #e4d7f4;
}
.q64__code-ex b{background:#8E7CC3;color:#fff;border-color:#7b68b5;}
.q64__code-note{font-size:11.5px;line-height:1.95;color:#5d5170;margin:0;text-align:left;}
.q64__code-k{font-weight:900;color:#6b3fa0;}
.q64__code-k[data-sv]{color:#8E7CC3;}
.q64__code-note b{color:#3a2a55;}

/* 愛着4スタイルの凡例 */
.q64__legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 14px;}
.q64__legend-i{
	display:flex;align-items:center;gap:6px;min-width:0;
	font-size:11.5px;font-weight:700;color:#4a3f5e;
	background:#fff;border:1.5px solid #efe6f8;border-radius:999px;padding:6px 10px;
}
.q64__legend-i i{width:10px;height:10px;border-radius:50%;flex:none;}
.q64__legend-i b{font-size:11px;color:#8b6cc1;}

/* 表本体 */
.q64__wrap{margin:0 0 14px;}
.q64__head{display:none;}
.q64__grp{
	font-size:11px;font-weight:900;letter-spacing:.1em;color:#a493c9;
	margin:14px 0 6px;padding-left:2px;
}
.q64__grp:first-of-type{margin-top:0;}
.q64__row{
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;
	margin:0 0 8px;
}
.q64__rowh{
	grid-column:1 / -1;min-width:0;
	display:flex;align-items:baseline;gap:7px;
	padding:0 0 3px 2px;
}
.q64__rowh b{font-size:13px;font-weight:900;color:#3a2a55;letter-spacing:.03em;}
.q64__rowh i{font-size:11px;font-style:normal;font-weight:700;color:#8b6cc1;}
.q64__rowh em{font-size:10.5px;font-style:normal;color:#9d92ad;}

.q64__cell{
	min-width:0;display:flex;flex-direction:column;align-items:center;
	gap:2px;padding:6px 3px 7px;text-decoration:none;
	background:#fff;border:1.5px solid #eee6f6;border-radius:12px;
	border-top-width:3px;transition:transform .15s,box-shadow .15s;
}
.q64__cell[data-sv="S"]{border-top-color:#F2A93B;}
.q64__cell[data-sv="A"]{border-top-color:#E8698B;}
.q64__cell[data-sv="V"]{border-top-color:#5BBBAC;}
.q64__cell[data-sv="F"]{border-top-color:#8E7CC3;}
.q64__cell-img{
	width:100%;max-width:52px;height:auto;aspect-ratio:1/1;
	border-radius:9px;display:block;object-fit:cover;background:#f7f3fc;
}
.q64__cell-name{
	font-size:9.5px;font-weight:800;line-height:1.35;color:#3f3355;text-align:center;
	word-break:break-word;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.q64__cell-code{font-size:8.5px;font-weight:700;color:#b0a4c4;letter-spacing:.04em;}
.q64__cell-pct{font-size:9.5px;font-weight:900;color:#6b3fa0;}
.q64__cell[data-rare="1"] .q64__cell-pct{color:#d65c9a;}
.q64__cell[data-rare="1"] .q64__cell-pct::before{content:"✦ ";}

.q64__after{font-size:12.5px;line-height:1.95;color:#5d5170;margin:0 0 14px;}
.q64__after a{color:#6b3fa0;font-weight:800;}
.q64__cta{
	display:block;text-align:center;text-decoration:none;
	background:linear-gradient(135deg,#8b6cc1,#6b3fa0);color:#fff;
	font-size:14px;font-weight:900;padding:14px 12px;border-radius:14px;
	box-shadow:0 8px 20px rgba(107,63,160,.24);
}

@media (min-width:600px){
	.q64{padding:26px 22px 24px;}
	.q64__legend{grid-template-columns:repeat(4,minmax(0,1fr));}
	.q64__legend-i{justify-content:center;font-size:11px;padding:6px 6px;}
	.q64__head{
		display:grid;grid-template-columns:104px repeat(4,minmax(0,1fr));gap:6px;
		margin:0 0 8px;
	}
	.q64__head-c{
		min-width:0;text-align:center;font-size:11px;font-weight:900;color:#fff;
		border-radius:8px;padding:5px 2px;
	}
	.q64__head-c:first-child{background:none;}
	.q64__head-c[data-sv="S"]{background:#F2A93B;}
	.q64__head-c[data-sv="A"]{background:#E8698B;}
	.q64__head-c[data-sv="V"]{background:#5BBBAC;}
	.q64__head-c[data-sv="F"]{background:#8E7CC3;}
	.q64__row{grid-template-columns:104px repeat(4,minmax(0,1fr));gap:6px;align-items:stretch;}
	.q64__rowh{
		grid-column:auto;flex-direction:column;align-items:flex-start;justify-content:center;
		gap:1px;padding:0 0 0 4px;
	}
	.q64__rowh b{font-size:14px;}
	.q64__cell{padding:8px 5px 9px;gap:3px;}
	.q64__cell-img{max-width:62px;}
	.q64__cell-name{font-size:10.5px;}
	.q64__cell-code{font-size:9px;}
	.q64__cell-pct{font-size:10.5px;}
	.q64__cell:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(107,63,160,.14);}
}
.q64__cell[data-zero="1"]{background:#fbf8fe;border-color:#e6dbf3;}
.q64__cell[data-zero="1"] .q64__cell-pct{color:#a493c9;font-size:8.5px;}

/* 2026-08-10: 解説表が620pxあり、スマホで画面からはみ出していた。
   表だけを箱の中で横スクロールさせ、ページ本体は横に動かさない。 */
.qas__table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.qas__table table{min-width:520px;}
@media(max-width:560px){
	.qas__table{border:1px solid #ece0f8;border-radius:12px;}
	.qas__table table{font-size:12.5px;}
}
/* 箱の中で収めるには、親側も広がらないようにしておく必要がある */
.qas{max-width:100%;min-width:0;}