/* ==========================================================================
   診断ツール・索引ページ末尾の解説ブロック
   サイトの配色（紫 #a369ff / #7349d1、ピンク #ff8ab8、角丸、ソフトシャドウ）に合わせる
   ========================================================================== */

.ms-explain {
	max-width: 800px;
	margin: 10px auto 44px;
	padding: 0 16px;
}

.ms-explain__inner {
	position: relative;
	background: linear-gradient(135deg, #fff6fb 0%, #f6efff 55%, #fff8f4 100%);
	border: 1px solid #ecdcff;
	border-radius: 22px;
	padding: 24px 18px 22px;
	box-shadow: 0 8px 26px rgba(150, 110, 200, .09);
	overflow: hidden;
}

/* 上辺のアクセントライン */
.ms-explain__inner::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, #a369ff, #ff8ab8 55%, #ffc46b);
}

.ms-explain__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1.5px solid #e6d4ff;
	color: #7349d1;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	padding: 7px 15px;
	border-radius: 999px;
	margin: 0 0 18px;
	box-shadow: 0 2px 8px rgba(150, 110, 200, .12);
}

.ms-explain__item {
	/* テーマ側に汎用の display:flex 指定があり、見出しと本文が横並びに潰れるため明示的に戻す */
	display: block;
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 17px 17px 15px 19px;
	margin: 0 0 13px;
	box-shadow: 0 2px 12px rgba(150, 110, 200, .08);
}

.ms-explain__item:last-child {
	margin-bottom: 0;
}

/* 左端のアクセントバー */
.ms-explain__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: linear-gradient(180deg, #c79bff, #ff9ec4);
}

.ms-explain__h {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 15.5px;
	font-weight: 800;
	color: #2a1850;
	line-height: 1.55;
	margin: 0 0 10px;
}

.ms-explain__num {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: linear-gradient(135deg, #a369ff, #ff8ab8);
	color: #fff;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 22px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(163, 105, 255, .3);
}

.ms-explain__item p {
	font-size: 14.5px;
	line-height: 1.95;
	color: #3a2a5a;
	margin: 0;
}

.ms-explain__item strong {
	color: #7349d1;
	font-weight: 700;
}

@media (min-width: 768px) {
	.ms-explain__inner { padding: 30px 28px 26px; }
	.ms-explain__item  { padding: 20px 22px 18px 24px; }
	.ms-explain__h     { font-size: 17px; }
	.ms-explain__item p { font-size: 15px; }
}

/* ==========================================================================
   タイプ解説（/type-detail/?type=）のサーバー描画本文
   ========================================================================== */

.td-ssr-body {
	max-width: 800px;
	margin: 4px auto 0;
	padding: 0 16px;
}

.td-ssr-sec {
	display: block;
	position: relative;
	background: #fff;
	border: 1px solid #efe6fb;
	border-radius: 18px;
	padding: 18px 18px 16px;
	margin: 0 0 14px;
	box-shadow: 0 3px 14px rgba(150, 110, 200, .07);
}

.td-ssr-sec__h {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 16px;
	font-weight: 900;
	color: #2a1850;
	line-height: 1.55;
	margin: 0 0 11px;
	padding: 0 0 10px;
	border-bottom: 2px dashed #ecdcff;
}

.td-ssr-sec__ico {
	flex: 0 0 auto;
	font-size: 17px;
	line-height: 1.4;
}

.td-ssr-sec p {
	font-size: 14.5px;
	line-height: 1.95;
	color: #3a2a5a;
	margin: 0;
}

/* 愛着スタイル4分岐 */
.td-ssr-svaf {
	display: block;
	background: linear-gradient(135deg, #fff6fb 0%, #f6efff 100%);
	border: 1px solid #ecdcff;
	border-radius: 20px;
	padding: 20px 16px 18px;
	margin: 0 0 14px;
}

.td-ssr-svaf__lead {
	font-size: 14.5px;
	line-height: 1.95;
	color: #3a2a5a;
	margin: 0 0 14px;
}

.td-ssr-card {
	display: block;
	background: #fff;
	border-radius: 14px;
	padding: 15px 15px 13px;
	margin: 0 0 11px;
	box-shadow: 0 2px 10px rgba(150, 110, 200, .08);
	border-left: 5px solid var(--sv-color, #a369ff);
}

.td-ssr-card:last-child { margin-bottom: 0; }

.td-ssr-card__h {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 900;
	color: #2a1850;
	margin: 0 0 8px;
}

.td-ssr-card__dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--sv-color, #a369ff);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4.5px var(--sv-color, #a369ff);
	margin: 0 3px 0 1px;
}

.td-ssr-card__name {
	font-size: 12px;
	font-weight: 800;
	color: #8b7f9d;
}

.td-ssr-card p {
	font-size: 14px;
	line-height: 1.9;
	color: #3a2a5a;
	margin: 0;
}

@media (min-width: 768px) {
	.td-ssr-sec  { padding: 22px 24px 20px; }
	.td-ssr-sec__h { font-size: 18px; }
	.td-ssr-sec p, .td-ssr-svaf__lead { font-size: 15px; }
	.td-ssr-svaf { padding: 26px 24px 22px; }
	.td-ssr-card { padding: 17px 18px 15px; }
	.td-ssr-card p { font-size: 14.5px; }
}