/* ==========================================================================
   診断ページ — スマホファースト
   ========================================================================== */
.ms-quiz {
	min-height: 100vh;
	background: url('../images/bg-pastel.webp') center top / cover no-repeat fixed;
	background-color: #ede0f8;
}

/* プログレスバー */
.ms-quiz__progress {
	height: 5px;
	background: var(--color-border);
	position: fixed;
	top: var(--header-height);
	left: 0; right: 0;
	z-index: 999;
}
.ms-quiz__progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #d65c9a, #8b6cc1);
	width: 0%;
	transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
	border-radius: 0 3px 3px 0;
}
.ms-quiz__progress-text {
	position: fixed;
	top: calc(var(--header-height) + 10px);
	right: 16px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-text-muted);
	z-index: 999;
}

/* コンテナ */
.ms-quiz__container {
	max-width: 640px;
	margin: 0 auto;
	padding: 60px 16px 40px;
}

/* 画面切替 */
.ms-quiz__screen { display: none; }
.ms-quiz__screen--active {
	display: block;
	animation: quizFade 0.4s ease;
}
@keyframes quizFade {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

/* イントロ */
.ms-quiz__intro {
	text-align: center;
	background: url('../images/quiz-bg.webp') center / cover no-repeat;
	border-radius: var(--radius-lg);
	padding: 40px 20px;
	min-height: 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ms-quiz__intro-icon { font-size: 2.5rem; margin-bottom: 16px; }
.ms-quiz__intro-title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--color-bg-dark);
	margin-bottom: 4px;
}
.ms-quiz__intro-subtitle {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-bottom: 16px;
}
.ms-quiz__intro-desc {
	color: var(--color-text-secondary);
	font-size: 0.9rem;
	line-height: 1.7;
	margin-bottom: 24px;
}
.ms-quiz__intro-note {
	background: rgba(255,255,255,0.9);
	border-radius: var(--radius-md);
	padding: 20px;
	margin-bottom: 28px;
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(4px);
	text-align: left;
}
.ms-quiz__intro-note h3 { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.ms-quiz__intro-note p { font-size: 0.8rem; color: var(--color-text-secondary); line-height: 1.6; }
.ms-quiz__start-btn { font-size: 1.05rem !important; padding: 14px 40px !important; }
.ms-pc-only { display: none; }

/* 質問カード */
.ms-quiz__question-card {
	background: var(--color-bg-white);
	border-radius: var(--radius-lg);
	padding: 32px 20px;
	box-shadow: var(--shadow-card);
	text-align: center;
}
.ms-quiz__qnum {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--color-text-muted);
	letter-spacing: 0.06em;
	margin-bottom: 16px;
	display: block;
}
.ms-quiz__qtext {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--color-bg-dark);
	margin-bottom: 32px;
	min-height: 3.2em;
}

/* 7段階スケール */
.ms-quiz__scale-labels {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
}
.ms-quiz__scale-label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--color-text-muted);
}
.ms-quiz__scale-label--disagree { color: var(--color-secondary); }
.ms-quiz__scale-label--agree { color: var(--color-primary); }

.ms-quiz__scale {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.ms-quiz__scale-btn {
	border-radius: 50%;
	border: 3px solid var(--color-border);
	background: var(--color-bg-white);
	cursor: pointer;
	transition: all 0.2s;
	flex-shrink: 0;
	-webkit-tap-highlight-color: transparent;
}
.ms-quiz__scale-btn:active { transform: scale(0.9); }

/* サイズ（スマホ向けにやや小さく） */
.ms-quiz__scale-btn[data-value="1"],
.ms-quiz__scale-btn[data-value="7"] { width: 44px; height: 44px; }
.ms-quiz__scale-btn[data-value="2"],
.ms-quiz__scale-btn[data-value="6"] { width: 38px; height: 38px; }
.ms-quiz__scale-btn[data-value="3"],
.ms-quiz__scale-btn[data-value="5"] { width: 32px; height: 32px; }
.ms-quiz__scale-btn[data-value="4"] { width: 26px; height: 26px; }

/* 色 */
.ms-quiz__scale-btn[data-value="1"] { border-color: var(--color-secondary); }
.ms-quiz__scale-btn[data-value="2"] { border-color: #9b8ed8; }
.ms-quiz__scale-btn[data-value="3"] { border-color: #c4bde8; }
.ms-quiz__scale-btn[data-value="4"] { border-color: var(--color-border); }
.ms-quiz__scale-btn[data-value="5"] { border-color: #8cc5d6; }
.ms-quiz__scale-btn[data-value="6"] { border-color: #5db0c8; }
.ms-quiz__scale-btn[data-value="7"] { border-color: var(--color-primary); }

.ms-quiz__scale-btn[data-value="1"]:hover,
.ms-quiz__scale-btn[data-value="2"]:hover,
.ms-quiz__scale-btn[data-value="3"]:hover { background: var(--color-secondary); border-color: var(--color-secondary); }
.ms-quiz__scale-btn[data-value="4"]:hover { background: var(--color-text-muted); border-color: var(--color-text-muted); }
.ms-quiz__scale-btn[data-value="5"]:hover,
.ms-quiz__scale-btn[data-value="6"]:hover,
.ms-quiz__scale-btn[data-value="7"]:hover { background: var(--color-primary); border-color: var(--color-primary); }

.ms-quiz__scale-btn--selected[data-value="1"],
.ms-quiz__scale-btn--selected[data-value="2"],
.ms-quiz__scale-btn--selected[data-value="3"] { background: var(--color-secondary); border-color: var(--color-secondary); }
.ms-quiz__scale-btn--selected[data-value="4"] { background: var(--color-text-muted); border-color: var(--color-text-muted); }
.ms-quiz__scale-btn--selected[data-value="5"],
.ms-quiz__scale-btn--selected[data-value="6"],
.ms-quiz__scale-btn--selected[data-value="7"] { background: var(--color-primary); border-color: var(--color-primary); }

.ms-quiz__scale-line { width: 10px; height: 3px; background: var(--color-border); flex-shrink: 0; }

/* 戻るボタン */
.ms-quiz__back-btn {
	background: none;
	border: none;
	color: var(--color-text-muted);
	font-size: 0.8rem;
	cursor: pointer;
	padding: 8px;
	font-family: var(--font-main);
	transition: color 0.2s;
}
.ms-quiz__back-btn:hover { color: var(--color-text); }
.ms-quiz__back-btn--hidden { visibility: hidden; }

/* ローディング */
.ms-quiz__loading { text-align: center; padding: 60px 0; }
.ms-quiz__loading-spinner {
	width: 48px; height: 48px;
	border: 4px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	margin: 0 auto 20px;
	animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ms-quiz__loading-text { font-size: 1rem; font-weight: 600; color: var(--color-bg-dark); margin-bottom: 6px; }
.ms-quiz__loading-sub { font-size: 0.8rem; color: var(--color-text-muted); }

/* ==========================================================================
   結果ページ
   ========================================================================== */
.ms-quiz__result { padding: 8px 0; }

/* 結果ヘッダー */
.ms-result-header {
	background: transparent;
	border: none;
	border-radius: var(--radius-lg);
	padding: 20px 20px 16px;
	color: var(--color-bg-dark);
	text-align: center;
	margin-bottom: 12px;
	position: relative;
}
.ms-result-header__label {
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--color-text-secondary);
	margin-bottom: 4px;
	position: relative;
}
.ms-result-header__type {
	font-family: var(--font-heading);
	font-size: 0.9rem;
	font-weight: 800;
	color: #8b6cc1;
	margin-bottom: 2px;
	letter-spacing: 0.06em;
	position: relative;
}
.ms-result-header__name {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 900;
	margin-bottom: 2px;
	line-height: 1.3;
	color: var(--color-bg-dark);
	position: relative;
}
.ms-result-header__sub {
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-bottom: 16px;
	position: relative;
}
.ms-result-header__image {
	max-width: 180px;
	margin: 0 auto;
	border-radius: 14px;
	border: none;
	box-shadow: 0 4px 16px rgba(80,40,120,0.12);
	position: relative;
}

/* ゲージ */
.ms-gauges {
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
	padding: 24px 20px;
	box-shadow: var(--shadow-card);
	margin-bottom: 12px;
}
.ms-gauges__title {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 16px;
	text-align: center;
}
.ms-gauge {
	margin-bottom: 14px;
}
.ms-gauge:last-child { margin-bottom: 0; }
.ms-gauge__labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.7rem;
	font-weight: 600;
	margin-bottom: 4px;
}
.ms-gauge__label-l { color: #d65c9a; }
.ms-gauge__label-r { color: #8b6cc1; }
.ms-gauge__bar {
	height: 8px;
	background: var(--color-border);
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}
.ms-gauge__fill {
	height: 100%;
	border-radius: 4px;
	transition: width 1s ease;
}
.ms-gauge__fill--left { background: linear-gradient(90deg, #d65c9a, #e88bc0); }
.ms-gauge__fill--right { background: linear-gradient(90deg, #a88dd8, #8b6cc1); float: right; }
.ms-gauge__pct {
	text-align: center;
	font-size: 0.65rem;
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* SVAF ゲージ */
.ms-gauge--svaf .ms-gauge__labels {
	justify-content: flex-start;
	gap: 4px;
}
.ms-gauge--svaf .ms-gauge__fill { border-radius: 4px; }

.ms-gauges__divider {
	height: 1px;
	background: var(--color-border);
	margin: 16px 0;
}
.ms-gauges__subtitle {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-muted);
	margin-bottom: 12px;
}

/* タグ */
.ms-result-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-bottom: 20px;
}
.ms-result-tag {
	font-size: 0.72rem;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: var(--radius-full);
}
.ms-result-tag--mbti { background: #f0e5f8; color: #8b6cc1; }
.ms-result-tag--svaf { background: #fce4f0; color: #d65c9a; }
.ms-result-tag--animal { background: #fef5e0; color: #d4a030; }

/* キャッチコピー */
.ms-result-catchcopy {
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(216,197,238,0.5);
	border-radius: var(--radius-lg);
	padding: 16px 20px;
	margin-bottom: 12px;
	text-align: center;
}
.ms-result-catchcopy p {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	font-style: italic;
	line-height: 1.6;
}

/* 分析カード */
.ms-result-card {
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: var(--shadow-soft);
	margin-bottom: 12px;
	text-align: left;
	border-left: 4px solid #d8c5ee;
}
.ms-result-card h3 {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ms-result-card p {
	font-size: 0.84rem;
	color: var(--color-text-secondary);
	line-height: 1.8;
}

/* 相性セクション */
.ms-compat {
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(6px);
	border-radius: var(--radius-lg);
	padding: 24px 20px;
	box-shadow: var(--shadow-soft);
	margin-bottom: 12px;
}
.ms-compat h3 {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ms-compat__list {
	display: flex;
	flex-direction: row;
	gap: 8px;
}
.ms-compat__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--color-bg);
	padding: 14px 10px;
	border-radius: var(--radius-md);
	text-align: center;
	position: relative;
}
.ms-compat__img {
	width: 72px;
	height: 96px;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #ede7f6;
	padding: 4px;
	box-sizing: border-box;
	filter: drop-shadow(0 2px 6px rgba(80,40,120,0.12));
}
.ms-compat__rank {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-bg-dark);
	font-size: 0.7rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: absolute;
	top: 8px;
	left: 8px;
}
.ms-compat__name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--color-bg-dark);
}
.ms-compat__type {
	font-size: 0.7rem;
	color: var(--color-text-muted);
}

/* SNSシェアカード */
.ms-share-card {
	background: linear-gradient(135deg, #f8f3ff, #fff5f9);
	border: 2px solid #e4d5f5;
	border-radius: var(--radius-lg);
	padding: 24px 16px;
	margin-bottom: 20px;
	text-align: center;
}
.ms-share-card__header {
	margin-bottom: 16px;
}
.ms-share-card__header .ms-share-card__icon {
	font-size: 1.8rem;
	display: block;
	margin-bottom: 4px;
}
.ms-share-card__header h3 {
	font-size: 1.1rem;
	font-weight: 800;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 4px;
}
.ms-share-card__header p {
	font-size: 0.78rem;
	color: var(--color-text-secondary);
}

/* シェアプレビュー */
.ms-share-preview {
	display: flex;
	align-items: center;
	gap: 12px;
	background: white;
	border-radius: var(--radius-md);
	padding: 12px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(80,40,120,0.08);
	text-align: left;
}
.ms-share-preview__img {
	width: 64px;
	height: 84px;
	border-radius: 10px;
	object-fit: contain;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid #ede7f6;
	padding: 4px;
	box-sizing: border-box;
}
.ms-share-preview__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ms-share-preview__type {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-primary);
	letter-spacing: 0.05em;
}
.ms-share-preview__name {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--color-bg-dark);
	line-height: 1.2;
}
.ms-share-preview__catch {
	font-size: 0.72rem;
	color: var(--color-text-secondary);
	font-style: italic;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* シェアボタン群 */
.ms-share-buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-bottom: 16px;
}
.ms-share-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 8px;
	border-radius: var(--radius-md);
	font-size: 0.82rem;
	font-weight: 700;
	color: white;
	text-decoration: none;
	transition: all 0.2s;
	border: none;
	cursor: pointer;
	font-family: var(--font-main);
}
.ms-share-btn:hover { transform: translateY(-2px); color: white; opacity: 0.92; }
.ms-share-btn__icon {
	font-size: 1.1rem;
	line-height: 1;
}
.ms-share-btn__label {
	font-size: 0.8rem;
}
.ms-share-btn--x {
	background: #000;
	box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ms-share-btn--line {
	background: #06C755;
	box-shadow: 0 2px 8px rgba(6,199,85,0.3);
}
.ms-share-btn--fb {
	background: #1877F2;
	box-shadow: 0 2px 8px rgba(24,119,242,0.3);
}
.ms-share-btn--fb .ms-share-btn__icon {
	font-family: var(--font-heading);
	font-weight: 800;
}
.ms-share-btn--copy {
	background: linear-gradient(135deg, #8b6cc1, #a88dd8);
	box-shadow: 0 2px 8px rgba(139,108,193,0.3);
}

/* ============================================================
   シェアボタン強化 — 押したくなるデザイン
   ============================================================ */
.ms-share-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #fff4f9, #f3ebff, #e8f4ff);
	border: 2px solid #d4b8ff;
	box-shadow: 0 8px 28px rgba(139, 108, 193, 0.18), 0 0 0 4px rgba(212, 184, 255, 0.15);
	animation: ms-share-card-glow 3s ease-in-out infinite;
}
@keyframes ms-share-card-glow {
	0%, 100% { box-shadow: 0 8px 28px rgba(139, 108, 193, 0.18), 0 0 0 4px rgba(212, 184, 255, 0.15); }
	50% { box-shadow: 0 12px 36px rgba(214, 92, 154, 0.25), 0 0 0 6px rgba(255, 180, 220, 0.2); }
}
.ms-share-card::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.4) 50%, transparent 60%);
	animation: ms-share-card-shine 4s linear infinite;
	pointer-events: none;
	z-index: 0;
}
@keyframes ms-share-card-shine {
	0% { transform: translateX(-100%) translateY(-100%); }
	100% { transform: translateX(100%) translateY(100%); }
}
.ms-share-card > * { position: relative; z-index: 1; }

.ms-share-card__header h3 {
	font-size: 1.25rem !important;
	animation: ms-share-title-bounce 2.5s ease-in-out infinite;
}
@keyframes ms-share-title-bounce {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.04); }
}
.ms-share-card__header p {
	font-size: 0.85rem !important;
	font-weight: 600;
	color: #6b3fb5 !important;
}
.ms-share-card__header p::before {
	content: "👇 ";
}

/* ボタングリッド — 目立たせる */
.ms-share-buttons {
	gap: 10px !important;
	padding: 4px;
}

/* 共通 — ボタンを大きく・立体的に */
.ms-share-btn {
	position: relative;
	overflow: hidden;
	padding: 16px 10px !important;
	border-radius: 14px !important;
	font-size: 0.95rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.03em;
	transform: translateZ(0);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}
.ms-share-btn__icon {
	font-size: 1.35rem !important;
}
.ms-share-btn__label {
	font-size: 0.92rem !important;
	font-weight: 800;
}

/* ホバー時の強いフィードバック */
.ms-share-btn:hover {
	transform: translateY(-4px) scale(1.03) !important;
	filter: brightness(1.1);
	opacity: 1 !important;
}
.ms-share-btn:active {
	transform: translateY(-1px) scale(0.98) !important;
}

/* ボタン内の光沢スイープ */
.ms-share-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
	transform: skewX(-25deg);
	transition: left 0.6s ease;
	pointer-events: none;
}
.ms-share-btn:hover::after {
	left: 125%;
}

/* X — 強調 */
.ms-share-btn--x {
	background: linear-gradient(135deg, #000 0%, #1a1a1a 100%) !important;
	box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.ms-share-btn--x:hover {
	box-shadow: 0 10px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* LINE — 緑グラデ */
.ms-share-btn--line {
	background: linear-gradient(135deg, #06C755 0%, #00a846 100%) !important;
	box-shadow: 0 6px 18px rgba(6,199,85,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.ms-share-btn--line:hover {
	box-shadow: 0 10px 24px rgba(6,199,85,0.6), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* Facebook — 青グラデ */
.ms-share-btn--fb {
	background: linear-gradient(135deg, #1877F2 0%, #0d5fcc 100%) !important;
	box-shadow: 0 6px 18px rgba(24,119,242,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.ms-share-btn--fb:hover {
	box-shadow: 0 10px 24px rgba(24,119,242,0.6), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* コピー — 紫グラデ */
.ms-share-btn--copy {
	background: linear-gradient(135deg, #8b6cc1 0%, #d65c9a 100%) !important;
	box-shadow: 0 6px 18px rgba(139,108,193,0.45), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.ms-share-btn--copy:hover {
	box-shadow: 0 10px 24px rgba(214,92,154,0.6), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* Xボタンに「NEW」バッジ風の脈動 */
.ms-share-btn--x {
	animation: ms-share-x-pulse 2s ease-in-out infinite;
}
@keyframes ms-share-x-pulse {
	0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 0 rgba(214, 92, 154, 0.5); }
	50% { box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 0 8px rgba(214, 92, 154, 0); }
}

/* 画像保存ボタンも強化 */
.ms-share-save-btn {
	animation: ms-save-btn-wiggle 3s ease-in-out infinite;
	box-shadow: 0 8px 20px rgba(214, 92, 154, 0.4) !important;
}
@keyframes ms-save-btn-wiggle {
	0%, 90%, 100% { transform: rotate(0deg) scale(1); }
	92% { transform: rotate(-1.5deg) scale(1.02); }
	94% { transform: rotate(1.5deg) scale(1.02); }
	96% { transform: rotate(-1deg) scale(1.02); }
	98% { transform: rotate(1deg) scale(1.02); }
}
.ms-share-save-btn:hover {
	animation: none;
	transform: translateY(-2px) scale(1.04) !important;
}

/* モバイルでは縦積みで1つずつ目立たせる */
@media (max-width: 480px) {
	.ms-share-buttons {
		grid-template-columns: 1fr 1fr !important;
	}
	.ms-share-btn {
		padding: 14px 8px !important;
	}
}

/* 画像保存 */
.ms-share-card__save {
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid #e4d5f5;
}
.ms-share-save-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: linear-gradient(135deg, #ff6b95, #d65c9a);
	color: white;
	font-size: 0.95rem;
	font-weight: 800;
	padding: 14px 32px;
	border-radius: var(--radius-full);
	border: none;
	cursor: pointer;
	font-family: var(--font-main);
	box-shadow: 0 4px 16px rgba(214,92,154,0.3);
	transition: all 0.2s;
	animation: pulseGlow 2s ease-in-out infinite;
}
.ms-share-save-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(214,92,154,0.4);
}
.ms-share-save-btn--vertical {
	background: linear-gradient(135deg, #8b6cc1, #6b3fa0);
	margin-top: 8px;
	box-shadow: 0 4px 16px rgba(139,108,193,0.3);
	animation: none;
}
.ms-share-save-btn--vertical:hover {
	box-shadow: 0 6px 20px rgba(139,108,193,0.4);
}
@keyframes pulseGlow {
	0%, 100% { box-shadow: 0 4px 16px rgba(214,92,154,0.3); }
	50% { box-shadow: 0 4px 24px rgba(214,92,154,0.5); }
}
.ms-share-card__save-hint {
	font-size: 0.7rem;
	color: var(--color-text-muted);
	margin-top: 6px;
}

/* 友達招待 */
.ms-share-card__invite {
	border-top: 1px solid #e4d5f5;
	padding-top: 14px;
}
.ms-share-card__invite p {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--color-text-secondary);
	margin-bottom: 8px;
}
.ms-share-invite-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: white;
	border: 2px solid #ddd0ef;
	color: var(--color-primary);
	font-size: 0.8rem;
	font-weight: 700;
	padding: 8px 20px;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all 0.2s;
	font-family: var(--font-main);
}
.ms-share-invite-btn:hover {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

/* 有料導線 */
/* 愛着パターン警告 */
.ms-attachment-warning {
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(6px);
	border-left: 4px solid #E8698B;
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 12px;
	text-align: left;
}
.ms-attachment-warning h3 {
	font-size: 0.9rem;
	font-weight: 800;
	color: #d4a030;
	margin-bottom: 8px;
}
.ms-attachment-warning p {
	font-size: 0.84rem;
	color: var(--color-text-secondary);
	line-height: 1.8;
	margin-bottom: 8px;
}
.ms-attachment-warning p:last-child { margin-bottom: 0; }

/* 有料導線 */
.ms-premium {
	background: linear-gradient(160deg, #2d2055, #4a2d7a, #6b3fa0);
	border: none;
	border-radius: var(--radius-lg);
	padding: 28px 20px;
	margin-bottom: 16px;
	text-align: center;
	color: white;
	position: relative;
	overflow: hidden;
}
.ms-premium::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: radial-gradient(circle at 30% 0%, rgba(214,92,154,0.2) 0%, transparent 50%),
				radial-gradient(circle at 70% 100%, rgba(240,192,64,0.15) 0%, transparent 50%);
	pointer-events: none;
}
.ms-premium__badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	background: linear-gradient(135deg, #f0c040, #E8698B);
	color: #2d2055;
	padding: 3px 14px;
	border-radius: var(--radius-full);
	margin-bottom: 12px;
	position: relative;
}
.ms-premium h3 {
	font-size: 1.1rem;
	font-weight: 800;
	color: white;
	margin-bottom: 6px;
	position: relative;
}
.ms-premium__lead {
	font-size: 0.82rem !important;
	color: rgba(255,255,255,0.8) !important;
	margin-bottom: 20px !important;
	line-height: 1.6 !important;
	position: relative;
}
.ms-premium__sections {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 20px;
	text-align: left;
	position: relative;
}
.ms-premium__section {
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: var(--radius-md);
	padding: 14px;
	backdrop-filter: blur(4px);
}
.ms-premium__section-icon {
	font-size: 1.2rem;
	display: block;
	margin-bottom: 4px;
}
.ms-premium__section strong {
	font-size: 0.82rem;
	display: block;
	margin-bottom: 4px;
}
.ms-premium__section p {
	font-size: 0.72rem !important;
	color: rgba(255,255,255,0.7) !important;
	margin-bottom: 0 !important;
	line-height: 1.6 !important;
}
.ms-premium__price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
	position: relative;
}
.ms-premium__price-original {
	font-size: 0.9rem;
	color: rgba(255,255,255,0.4);
	text-decoration: line-through;
}
.ms-premium__price-current {
	font-size: 1.8rem;
	font-weight: 900;
	font-family: var(--font-heading);
	color: #f0c040;
}
.ms-premium__price-note {
	font-size: 0.68rem;
	font-weight: 700;
	background: #e84393;
	color: white;
	padding: 2px 8px;
	border-radius: var(--radius-full);
}
.ms-premium__buy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #f0c040, #E8698B);
	color: #2d2055;
	font-size: 1rem;
	font-weight: 800;
	padding: 14px 36px;
	border-radius: var(--radius-full);
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(240,192,64,0.4);
	transition: all 0.25s;
	position: relative;
}
.ms-premium__buy-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(240,192,64,0.5);
	color: #2d2055;
}
/* プレミアム — チラ見せプレビュー */
.ms-premium__preview {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-bottom: 12px;
	text-align: left;
	position: relative;
}
.ms-premium__preview-label {
	font-size: 0.72rem;
	font-weight: 700;
	color: #f0c040;
	margin-bottom: 8px;
}
.ms-premium__preview-text {
	font-size: 0.8rem !important;
	color: rgba(255,255,255,0.9) !important;
	line-height: 1.7 !important;
	margin-bottom: 0 !important;
}
.ms-premium__preview-blur {
	font-size: 0.8rem !important;
	color: rgba(255,255,255,0.9) !important;
	line-height: 1.7 !important;
	margin-bottom: 0 !important;
	filter: blur(4px);
	user-select: none;
	-webkit-user-select: none;
}

/* プレミアム — 目次 */
.ms-premium__toc {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--radius-md);
	padding: 20px 16px;
	margin-bottom: 20px;
	text-align: left;
	position: relative;
}
.ms-premium__toc-title {
	font-size: 0.88rem;
	font-weight: 800;
	color: #f0c040;
	text-align: center;
	margin-bottom: 16px;
}
.ms-premium__toc-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ms-premium__toc-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.ms-premium__toc-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, #d65c9a, #8b6cc1);
	color: white;
	font-size: 0.68rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.ms-premium__toc-item strong {
	font-size: 0.8rem;
	display: block;
	margin-bottom: 2px;
}
.ms-premium__toc-item p {
	font-size: 0.7rem !important;
	color: rgba(255,255,255,0.6) !important;
	margin-bottom: 0 !important;
	line-height: 1.5 !important;
}

/* プレミアム — 購入者の声 */
.ms-premium__reviews {
	margin-bottom: 20px;
	position: relative;
}
.ms-premium__reviews-title {
	font-size: 0.85rem;
	font-weight: 800;
	color: #f0c040;
	margin-bottom: 12px;
}
.ms-premium__review {
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--radius-md);
	padding: 14px;
	margin-bottom: 8px;
	text-align: left;
}
.ms-premium__review p {
	font-size: 0.75rem !important;
	color: rgba(255,255,255,0.85) !important;
	line-height: 1.7 !important;
	margin-bottom: 6px !important;
	font-style: italic;
}
.ms-premium__review span {
	font-size: 0.65rem;
	color: rgba(255,255,255,0.4);
}

/* プレミアム — 特典リスト */
.ms-premium__benefits {
	margin-top: 12px;
	position: relative;
}
.ms-premium__benefits p {
	font-size: 0.7rem !important;
	color: rgba(255,255,255,0.5) !important;
	margin-bottom: 4px !important;
	line-height: 1.4 !important;
}

@media (min-width: 768px) {
	.ms-premium__toc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* タイプ解説記事リンク */
.ms-type-article-link {
	text-align: center;
	margin: 20px 0 8px;
	padding: 24px;
	background: linear-gradient(135deg, rgba(243,236,251,0.8), rgba(253,240,246,0.8));
	border-radius: var(--radius-lg);
	border: 2px dashed rgba(139,108,193,0.3);
}
.ms-type-article-link__btn {
	display: inline-block;
	padding: 14px 32px;
	background: linear-gradient(135deg, #8b6cc1, #a98cd8);
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	box-shadow: 0 3px 12px rgba(139,108,193,0.3);
}
.ms-type-article-link__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(139,108,193,0.4);
}
.ms-type-article-link__desc {
	font-size: 0.8rem;
	color: var(--color-text-secondary);
	margin-top: 10px;
}
.ms-quiz__retry { text-align: center; margin-top: 12px; }

/* ==========================================================================
   PC
   ========================================================================== */
@media (min-width: 768px) {
	.ms-quiz__container { padding: 72px 24px 48px; }
	.ms-quiz__question-card { padding: 40px 36px; }
	.ms-quiz__qtext { font-size: 1.2rem; }
	.ms-quiz__intro-title { font-size: 1.8rem; }
	.ms-pc-only { display: inline; }
	.ms-share-buttons { grid-template-columns: repeat(4, 1fr); }

	.ms-quiz__scale-btn[data-value="1"],
	.ms-quiz__scale-btn[data-value="7"] { width: 52px; height: 52px; }
	.ms-quiz__scale-btn[data-value="2"],
	.ms-quiz__scale-btn[data-value="6"] { width: 44px; height: 44px; }
	.ms-quiz__scale-btn[data-value="3"],
	.ms-quiz__scale-btn[data-value="5"] { width: 38px; height: 38px; }
	.ms-quiz__scale-btn[data-value="4"] { width: 32px; height: 32px; }
	.ms-quiz__scale-line { width: 14px; }

	.ms-result-header { padding: 40px 32px; }
	.ms-result-header__name { font-size: 2rem; }
	.ms-result-header__image { max-width: 320px; }
	.ms-result-card { padding: 28px; }
	.ms-compat { padding: 28px; }
	.ms-compat__list { flex-direction: row; }
	.ms-compat__item { flex: 1; }
	.ms-compat__img { width: 90px; height: 90px; }
	.ms-glance__chips { justify-content: center; }
	.ms-cogfunc__grid { grid-template-columns: repeat(4, 1fr); }
	.ms-strengths__grid { flex-direction: row; }
	.ms-strengths__col { flex: 1; }
}

/* ===== 新セクション: ひと目でわかる特性 ===== */
.ms-glance {
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
	text-align: center;
}
.ms-glance__title {
	font-size: 0.88rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: #4a3560;
}
.ms-glance__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ms-glance__chip {
	display: inline-block;
	background: linear-gradient(135deg, #f3ecfb, #fdf0f6);
	border: 1px solid rgba(139,108,193,0.2);
	border-radius: 20px;
	padding: 6px 14px;
	font-size: 0.78rem;
	font-weight: 600;
	color: #6b3fa0;
}

/* ===== 新セクション: 認知機能スタック ===== */
.ms-cogfunc {
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
}
.ms-cogfunc__title {
	font-size: 0.88rem;
	font-weight: 700;
	margin-bottom: 14px;
	color: #4a3560;
	text-align: center;
}
.ms-cogfunc__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.ms-cogfunc__card {
	border-radius: 12px;
	padding: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ms-cogfunc__card--dom { background: linear-gradient(135deg, #6b3fa0, #8b5cf6); color: #fff; }
.ms-cogfunc__card--aux { background: linear-gradient(135deg, #5BBBAC, #38bdf8); color: #fff; }
.ms-cogfunc__card--ter { background: linear-gradient(135deg, #43b88c, #34d399); color: #fff; }
.ms-cogfunc__card--inf { background: linear-gradient(135deg, #E8698B, #fbbf24); color: #fff; }
.ms-cogfunc__role {
	font-size: 0.65rem;
	font-weight: 700;
	opacity: 0.85;
	text-transform: uppercase;
}
.ms-cogfunc__code {
	font-size: 1.2rem;
	font-weight: 800;
}
.ms-cogfunc__name {
	font-size: 0.7rem;
	opacity: 0.9;
}

/* ===== 新セクション: 強み & 弱み ===== */
.ms-strengths {
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(10px);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
}
.ms-strengths__title {
	font-size: 0.88rem;
	font-weight: 700;
	margin-bottom: 14px;
	color: #4a3560;
	text-align: center;
}
.ms-strengths__grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ms-strengths__col {
	border-radius: 12px;
	padding: 14px;
}
.ms-strengths__col--plus { background: linear-gradient(135deg, #ecfdf5, #d1fae5); }
.ms-strengths__col--minus { background: linear-gradient(135deg, #fef2f2, #fde8e8); }
.ms-strengths__label {
	font-size: 0.75rem;
	font-weight: 700;
	margin-bottom: 8px;
	text-transform: uppercase;
}
.ms-strengths__col--plus .ms-strengths__label { color: #059669; }
.ms-strengths__col--minus .ms-strengths__label { color: #dc2626; }
.ms-strengths__item {
	font-size: 0.82rem;
	line-height: 1.5;
	color: #374151;
	padding: 4px 0;
}

/* ===== 新セクション: 愛着スタイル解説 ===== */
.ms-attachment-insight {
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 16px;
	border-left: 4px solid;
	background: rgba(255,255,255,0.85);
	backdrop-filter: blur(10px);
}
.ms-attachment-insight--s { border-left-color: #F2A93B; }
.ms-attachment-insight--v { border-left-color: #5BBBAC; }
.ms-attachment-insight--a { border-left-color: #E8698B; }
.ms-attachment-insight--f { border-left-color: #8E7CC3; }
.ms-attachment-insight h3 {
	font-size: 0.92rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: #4a3560;
}
.ms-attachment-insight p {
	font-size: 0.85rem;
	line-height: 1.7;
	color: #374151;
}

/* ===== 相性カード改良: 理由テキスト ===== */
.ms-compat__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ms-compat__reason {
	font-size: 0.72rem;
	line-height: 1.5;
	color: #6b7280;
	margin-top: 4px;
}

/* ==========================================================================
   ショート診断用追加スタイル
   ========================================================================== */
.ms-quiz--short .ms-quiz__intro-note--short {
	background: linear-gradient(135deg, rgba(139,108,193,0.08), rgba(214,92,154,0.08));
	border: 1px solid rgba(139,108,193,0.15);
}
.ms-quiz--short .ms-quiz__intro-note--short a {
	color: #8b6cc1;
	text-decoration: underline;
	font-weight: 600;
}

/* 40問版への誘導カード */
.ms-short-upsell {
	background: linear-gradient(135deg, #f3ecfb, #fdf0f6);
	border: 2px dashed rgba(139,108,193,0.3);
	border-radius: 16px;
	padding: 28px 20px;
	margin: 20px 0;
	text-align: center;
}
.ms-short-upsell__icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 8px;
}
.ms-short-upsell h3 {
	font-size: 1rem;
	font-weight: 800;
	color: #4a3560;
	margin-bottom: 8px;
}
.ms-short-upsell p {
	font-size: 0.82rem;
	color: #6b5f7d;
	line-height: 1.6;
	margin-bottom: 16px;
}
.ms-short-upsell__btn {
	display: inline-block;
	padding: 12px 28px;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	color: #fff !important;
	font-size: 0.95rem;
	font-weight: 700;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(139,108,193,0.3);
	transition: transform 0.2s, box-shadow 0.2s;
}
.ms-short-upsell__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(139,108,193,0.4);
}

/* コンパクト版プレミアム */
.ms-premium--compact {
	padding: 24px 20px;
}
.ms-premium--compact .ms-premium__lead {
	font-size: 0.8rem;
}

/* ============================================================
   💎 愛着健全度スコア（バイラル用）
   ============================================================ */
.ms-health-score{margin:24px 0;padding:32px 24px;background:linear-gradient(135deg,#faf5ff 0%,#fff5f9 100%);border-radius:24px;border:2px solid #f0e5ff;text-align:center;box-shadow:0 6px 20px rgba(115,73,209,.08);position:relative;overflow:hidden;}
.ms-health-score::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(245,185,58,.08),transparent 50%);pointer-events:none;animation:ms-hs-shine 6s ease-in-out infinite;}
@keyframes ms-hs-shine{0%,100%{transform:scale(1) rotate(0deg);opacity:.7;}50%{transform:scale(1.1) rotate(5deg);opacity:1;}}
.ms-health-score__label{font-size:12px;color:#6a5a8a;font-weight:700;letter-spacing:.15em;margin:0 0 12px;position:relative;}
.ms-health-score__num{font-size:0;line-height:1;margin:8px 0 16px;position:relative;}
.ms-health-score__num-main{font-size:72px;font-weight:900;color:var(--h-color,#7349d1);letter-spacing:-.04em;font-family:'Poppins',sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.08);}
.ms-health-score__num-max{font-size:26px;font-weight:700;color:#8a7aa0;margin-left:4px;}
.ms-health-score__bar-wrap{max-width:360px;margin:0 auto 14px;height:14px;background:#ece5ff;border-radius:999px;overflow:hidden;position:relative;}
.ms-health-score__bar{height:100%;border-radius:999px;transition:width 1.2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;}
.ms-health-score__bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:ms-hs-bar-shine 2.5s ease-in-out infinite;}
@keyframes ms-hs-bar-shine{0%{transform:translateX(-100%);}100%{transform:translateX(200%);}}
.ms-health-score__level{font-size:18px;font-weight:800;color:var(--h-color,#2a1850);margin:4px 0 8px;position:relative;}
.ms-health-score__catch{font-size:13px;line-height:1.8;color:#534670;margin:0 0 10px;position:relative;}
.ms-health-score__avg{font-size:11px;color:#8a7aa0;margin:0;letter-spacing:.1em;position:relative;}

/* ── 極小幅端末（〜379px）: タイトル縮小・教授吹き出しを縦積みに ── */
@media (max-width: 379px) {
	.ms-quiz__intro-title { font-size: 1.26rem; }
	.b5-prof-bubble { flex-direction: column !important; }
	.b5-prof-bubble img { margin: 0 auto; }
	.b5-prof-bubble > span { text-align: left; }
	.ms-quiz__intro { padding-left: 14px; padding-right: 14px; }
}

/* ===== 結果ヒーロー大型化（キャラ個別ページ準拠） ===== */
.ms-result-header__image--xl {
	max-width: min(360px, 86%);
	width: 100%;
	background: #fff;
	border-radius: 22px;
	padding: 14px;
	box-shadow: 0 16px 44px rgba(120, 70, 150, .2);
	margin-top: 14px;
}
.ms-result-header__catch {
	font-size: 17px;
	font-weight: 800;
	color: #4a3560;
	line-height: 1.85;
	max-width: 480px;
	margin: 16px auto 0;
}
.ms-result-header__animal {
	font-size: 12.5px;
	font-weight: 700;
	color: #8b6cc1;
	margin-top: 6px;
}
@media (min-width: 768px) {
	.ms-result-header__image--xl { max-width: 420px; }
	.ms-result-header__catch { font-size: 19px; }
}

/* ===== 結果画面の演出 ===== */
@keyframes msPop {
	0% { opacity: 0; transform: scale(.7); }
	60% { opacity: 1; transform: scale(1.04); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes msRise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
.ms-result-header__label { animation: msRise .5s ease both; }
.ms-result-header__type { animation: msRise .55s ease both .08s; }
.ms-result-header__name { animation: msRise .6s ease both .16s; }
.ms-result-header__sub { animation: msRise .6s ease both .22s; }
.ms-result-header__image--xl { animation: msPop .75s cubic-bezier(.34, 1.56, .64, 1) both .32s; }
.ms-result-header__catch { animation: msRise .6s ease both .58s; }
.ms-result-header__animal { animation: msRise .6s ease both .68s; }
.ms-result-tags { animation: msRise .6s ease both .78s; }
.ms-gauge__fill { transition: width 1.1s cubic-bezier(.22, .9, .3, 1); }
.ms-health-score__bar { transition: width 1.2s cubic-bezier(.22, .9, .3, 1); }
.ms-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .9, .3, 1); }
.ms-reveal--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.ms-result-header__label, .ms-result-header__type, .ms-result-header__name, .ms-result-header__sub,
	.ms-result-header__image--xl, .ms-result-header__catch, .ms-result-header__animal, .ms-result-tags { animation: none; }
	.ms-gauge__fill, .ms-health-score__bar, .ms-reveal { transition: none; }
	.ms-reveal { opacity: 1; transform: none; }
}

/* 新キャラ画像は正方形。縦長前提の枠を上書き */
.ms-compat__img{width:100%!important;max-width:90px;height:auto!important;aspect-ratio:1/1;object-fit:contain;}
.ms-share-preview__img{width:100%!important;max-width:84px;height:auto!important;aspect-ratio:1/1;object-fit:contain;}

/* 画像を枠の中央に */
.ms-compat__img,.ms-share-preview__img{object-fit:contain;display:block;margin:0 auto;}

/* ===========================================================
   診断結果：愛着スタイルの色演出（キャラ画像の後光・バッジ・背景）
   =========================================================== */
.ms-result-header[data-sv="S"]{--rv:#F2A93B;--rv-ink:#c9962f;--rv-soft:#FFD98A;--rv-bg:#fff8ec;}
.ms-result-header[data-sv="A"]{--rv:#E8698B;--rv-ink:#c2456f;--rv-soft:#F6C7DE;--rv-bg:#fdf0f5;}
.ms-result-header[data-sv="V"]{--rv:#5BBBAC;--rv-ink:#2f6f66;--rv-soft:#A7CED8;--rv-bg:#edf8f6;}
.ms-result-header[data-sv="F"]{--rv:#8E7CC3;--rv-ink:#5f4a94;--rv-soft:#BDC9E3;--rv-bg:#f3eefb;}

.ms-result-header{position:relative;overflow:hidden;border-radius:24px;padding-bottom:14px;
	background:radial-gradient(120% 78% at 50% 0%,var(--rv-bg,#faf8ff) 0%,#fff 68%);}
/* 上部に愛着カラーの光の帯 */
.ms-result-header::before{content:"";position:absolute;left:50%;top:-120px;transform:translateX(-50%);
	width:420px;height:260px;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle,color-mix(in srgb,var(--rv,#8b6cc1) 46%,transparent) 0%,transparent 68%);}
.ms-result-header__label,.ms-result-header__type,.ms-result-header__name,
.ms-result-header__sub,.ms-result-header__image,.ms-result-header__catch,
.ms-result-header__animal{position:relative;z-index:1;}

/* タイプ表記を塗りバッジに */
.ms-result-header__type{display:inline-block;background:linear-gradient(135deg,var(--rv-ink,#7349d1),var(--rv,#a369ff));
	color:#fff!important;font-weight:900;border-radius:999px;padding:6px 20px;letter-spacing:.02em;
	box-shadow:0 6px 18px color-mix(in srgb,var(--rv,#8b6cc1) 40%,transparent);}
.ms-result-header__name{color:var(--rv-ink,#2a1850)!important;}
.ms-result-header__sub{color:color-mix(in srgb,var(--rv-ink,#8b7f9d) 70%,#fff)!important;letter-spacing:.08em;}

/* キャラ画像：愛着カラーの後光＋リング */
.ms-result-header__image{background:#fff;border-radius:22px;
	border:3px solid color-mix(in srgb,var(--rv,#8b6cc1) 34%,#fff);
	box-shadow:0 0 0 8px color-mix(in srgb,var(--rv,#8b6cc1) 12%,transparent),
	           0 16px 40px color-mix(in srgb,var(--rv,#8b6cc1) 34%,transparent);
	animation:msResultGlow 2.8s ease-in-out infinite;}
@keyframes msResultGlow{
	0%,100%{box-shadow:0 0 0 8px color-mix(in srgb,var(--rv,#8b6cc1) 12%,transparent),0 16px 40px color-mix(in srgb,var(--rv,#8b6cc1) 30%,transparent);}
	50%    {box-shadow:0 0 0 15px color-mix(in srgb,var(--rv,#8b6cc1) 8%,transparent), 0 20px 50px color-mix(in srgb,var(--rv,#8b6cc1) 44%,transparent);}
}
@media (prefers-reduced-motion: reduce){.ms-result-header__image{animation:none;}}
.ms-result-header__catch{color:var(--rv-ink,#4a3f63)!important;font-weight:800;}
.ms-result-header__animal{display:inline-block;background:var(--rv-soft,#efe8fb);color:var(--rv-ink,#5b4a7a)!important;
	border-radius:999px;padding:3px 14px;font-weight:900;}


/* ==========================================================================
   相性カード: スマホでは横型カードを縦に積む
   3枚を横並びにすると1枚あたり100px前後になり、キャラ名が1文字ずつ折り返していた
   ========================================================================== */
.ms-compat__list{align-items:stretch;}
.ms-compat__item{position:relative;}

/* 順位バッジは金・銀・銅で一目で分かるように */
.ms-compat__item:nth-child(1) .ms-compat__rank{background:linear-gradient(135deg,#f6d365,#d9a441);color:#5a3d0a;}
.ms-compat__item:nth-child(2) .ms-compat__rank{background:linear-gradient(135deg,#e3e6ec,#b9c0cc);color:#4a4f59;}
.ms-compat__item:nth-child(3) .ms-compat__rank{background:linear-gradient(135deg,#e8c19a,#c99a6d);color:#5a3a1c;}
.ms-compat__rank{box-shadow:0 2px 6px rgba(0,0,0,.14);font-weight:900;}

@media (max-width: 700px){
	.ms-compat{padding:20px 14px;}
	.ms-compat__list{flex-direction:column;gap:10px;}
	.ms-compat__item{
		flex-direction:row;
		align-items:flex-start;
		text-align:left;
		gap:13px;
		padding:13px 14px 13px 13px;
		flex:none;
	}
	.ms-compat__img{
		width:78px!important;max-width:78px;min-width:78px;
		height:78px!important;aspect-ratio:1/1;
		margin:0!important;flex:0 0 78px;
	}
	.ms-compat__rank{
		position:absolute;top:7px;left:7px;
		width:22px;height:22px;font-size:0.68rem;
		z-index:2;
	}
	.ms-compat__info{
		align-items:flex-start;text-align:left;
		flex:1 1 auto;min-width:0;gap:1px;
	}
	.ms-compat__name{
		font-size:0.98rem;font-weight:800;line-height:1.4;
		word-break:auto-phrase;
	}
	.ms-compat__type{font-size:0.74rem;font-weight:700;}
	.ms-compat__reason{
		font-size:0.81rem;line-height:1.8;margin-top:6px;
		padding-top:6px;border-top:1px dashed #e6ddf3;
	}
}

/* PCでも名前が窮屈にならないよう最低幅を確保 */
@media (min-width: 701px){
	.ms-compat__item{flex:1 1 0;min-width:0;}
	.ms-compat__name{font-size:0.9rem;line-height:1.45;}
	.ms-compat__reason{font-size:0.76rem;line-height:1.7;}
}

/* ==========================================================================
   診断結果ヘッダー — トレーディングカード
   愛着スタイル（data-sv）で配色を切り替える
   ========================================================================== */
.qcard{
	--c:#8E7CC3; --ci:#553f8c; --cs:#F1ECFA;
	position:relative;padding:0 16px 8px;
}
.qcard[data-sv="S"]{--c:#F2A93B;--ci:#76530d;--cs:#FFF6E3;}
.qcard[data-sv="A"]{--c:#E8698B;--ci:#b03b62;--cs:#FDEEF4;}
.qcard[data-sv="V"]{--c:#5BBBAC;--ci:#28635b;--cs:#EAF7F4;}
.qcard[data-sv="F"]{--c:#8E7CC3;--ci:#553f8c;--cs:#F1ECFA;}

.qcard__lead{
	margin:0 0 12px;text-align:center;
	font-size:12.5px;font-weight:900;letter-spacing:.08em;color:#8b7fa0;
}

.qcard__card{
	position:relative;max-width:360px;margin:0 auto;
	background:linear-gradient(160deg,#fff 0%, var(--cs) 100%);
	border:3px solid var(--c);border-radius:22px;
	padding:0 0 18px;overflow:hidden;
	box-shadow:
		0 0 0 1px #fff inset,
		0 14px 38px color-mix(in srgb,var(--c) 34%, transparent),
		0 3px 10px rgba(40,20,70,.10);
	animation:qcardIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes qcardIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}

.qcard__holo{
	position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:19px;
	background:linear-gradient(115deg,
		transparent 0%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.1) 46%,
		transparent 58%, rgba(255,255,255,.35) 74%, transparent 88%);
	background-size:260% 260%;mix-blend-mode:overlay;opacity:.75;
	animation:qcardHolo 7s ease-in-out infinite;
}
@keyframes qcardHolo{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:reduce){ .qcard__holo,.qcard__card{animation:none;} }

.qcard__head{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	padding:11px 15px;color:#fff;
	background:linear-gradient(90deg, var(--c), color-mix(in srgb,var(--c) 62%, #fff));
}
.qcard__sv{font-size:13px;font-weight:900;letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.18);}
.qcard__code{font-size:11px;font-weight:900;letter-spacing:.1em;background:rgba(255,255,255,.28);padding:4px 10px;border-radius:999px;}

.qcard__art{
	position:relative;margin:12px 12px 0;aspect-ratio:1/1;
	border-radius:16px;overflow:hidden;
	background:radial-gradient(circle at 50% 40%, #fff 0%, var(--cs) 70%);
	border:2px solid color-mix(in srgb,var(--c) 46%, transparent);
	box-shadow:inset 0 2px 12px color-mix(in srgb,var(--c) 22%, transparent);
}
.qcard__img{width:100%;height:100%;object-fit:contain;display:block;}
.qcard__score{
	position:absolute;right:9px;bottom:9px;z-index:2;
	display:flex;flex-direction:column;align-items:center;line-height:1;
	background:rgba(255,255,255,.94);border:2px solid var(--c);border-radius:12px;
	padding:6px 11px;box-shadow:0 3px 10px color-mix(in srgb,var(--c) 30%, transparent);
}
.qcard__score i{font-style:normal;font-size:8.5px;font-weight:800;color:#9b8fb0;letter-spacing:.04em;}
.qcard__score b{font-size:19px;font-weight:900;color:var(--ci);margin-top:2px;}

.qcard__body{padding:14px 16px 0;text-align:center;}
.qcard__name{margin:0;font-size:26px;font-weight:900;line-height:1.25;color:#2b2145;}
.qcard__en{display:block;margin-top:3px;font-size:10.5px;font-weight:800;letter-spacing:.2em;color:var(--ci);opacity:.75;}
.qcard__catch{
	margin:12px 0 0;padding:11px 12px;text-align:left;
	font-size:13px;font-weight:700;line-height:1.85;color:var(--ci);
	background:rgba(255,255,255,.7);border-left:3px solid var(--c);border-radius:8px;
}
.qcard__meta{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:13px 0 0;}
.qcard__mbti{
	display:inline-flex;align-items:baseline;gap:5px;
	font-size:13px;font-weight:900;color:#fff;background:var(--c);
	padding:6px 13px;border-radius:999px;
	box-shadow:0 3px 9px color-mix(in srgb,var(--c) 36%, transparent);
}
.qcard__mbti i{font-style:normal;font-size:10px;font-weight:800;opacity:.9;}
.qcard__animal{
	font-size:11.5px;font-weight:800;color:var(--ci);background:#fff;
	border:1.5px solid color-mix(in srgb,var(--c) 38%, transparent);
	padding:6px 12px;border-radius:999px;
}
.qcard__skills{
	list-style:none;margin:14px 0 0;padding:11px 12px;text-align:left;
	background:rgba(255,255,255,.72);
	border:1px solid color-mix(in srgb,var(--c) 26%, transparent);border-radius:12px;
}
.qcard__skills li{
	position:relative;padding:5px 0 5px 18px;
	font-size:12.5px;font-weight:700;line-height:1.6;color:#4a3f60;
	border-bottom:1px dashed color-mix(in srgb,var(--c) 22%, transparent);
}
.qcard__skills li:last-child{border-bottom:none;}
.qcard__skills li::before{
	content:"";position:absolute;left:3px;top:11px;width:8px;height:8px;
	border-radius:2px;transform:rotate(45deg);background:var(--c);
}

@media (max-width:400px){
	.qcard{padding:0 12px 6px;}
	.qcard__name{font-size:23px;}
	.qcard__catch{font-size:12.5px;}
	.qcard__score b{font-size:17px;}
}

/* ── 診断結果カードにも同じ演出を（キャラページと様式を統一） ── */
.qcard__card{max-width:460px;padding-bottom:20px;transform-style:preserve-3d;}
.qcard__card::before{
	content:"";position:absolute;inset:-3px;z-index:0;border-radius:24px;
	background:conic-gradient(from 0deg,
		color-mix(in srgb,var(--c) 90%, #fff), #ffd9f0, #d9f2ff, #fff3cf,
		color-mix(in srgb,var(--c) 90%, #fff));
	filter:blur(7px);opacity:.55;animation:qcardEdge 9s linear infinite;
}
@keyframes qcardEdge{to{transform:rotate(360deg);}}
.qcard__card > *{position:relative;z-index:1;}

.qcard__shine{
	position:absolute;top:0;left:-60%;width:45%;height:100%;z-index:4;
	pointer-events:none;border-radius:20px;
	background:linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
	transform:skewX(-18deg);animation:qcardShine 5.5s ease-in-out infinite;
}
@keyframes qcardShine{
	0%,72%{left:-60%;opacity:0;}
	76%{opacity:.9;}
	100%{left:120%;opacity:0;}
}

.qcard__sparkle{position:absolute;inset:0;z-index:4;pointer-events:none;}
.qcard__sparkle i{
	position:absolute;width:9px;height:9px;opacity:0;
	animation:qcardTwinkle 3.4s ease-in-out infinite;
}
.qcard__sparkle i::before{
	content:"";position:absolute;inset:0;background:#fff;
	clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}
.qcard__sparkle i:nth-child(1){top:12%;left:8%;animation-delay:0s;}
.qcard__sparkle i:nth-child(2){top:26%;right:9%;animation-delay:.55s;}
.qcard__sparkle i:nth-child(3){top:48%;left:5%;animation-delay:1.1s;width:7px;height:7px;}
.qcard__sparkle i:nth-child(4){top:58%;right:7%;animation-delay:1.7s;}
.qcard__sparkle i:nth-child(5){top:76%;left:12%;animation-delay:2.2s;width:6px;height:6px;}
.qcard__sparkle i:nth-child(6){top:88%;right:14%;animation-delay:2.8s;}
@keyframes qcardTwinkle{
	0%,100%{opacity:0;transform:scale(.4) rotate(0deg);}
	50%{opacity:.95;transform:scale(1) rotate(90deg);}
}
.qcard__art{transform:translateZ(14px);}

@media (prefers-reduced-motion:reduce){
	.qcard__card::before,.qcard__shine,.qcard__sparkle i{animation:none;}
	.qcard__shine{opacity:0;}
}
@media (max-width:400px){ .qcard__card{max-width:100%;} }

/* ── 結果カード: 幅をキャラページと揃え、上の余白を詰める ── */
.ms-quiz__result{padding-top:0!important;}
.qcard{
	padding:0 8px 10px!important;
	margin-top:-4px;
}
.qcard__lead{
	margin:0 0 10px!important;
	font-size:11.5px;
}
.qcard__card{
	max-width:520px!important;
	margin-left:auto;margin-right:auto;
}
/* キャラページと同じ余白バランスに */
.qcard__art{margin:12px 12px 0;}
.qcard__body{padding:14px 18px 0;}

@media (min-width:520px){
	.qcard{padding:0 16px 12px!important;}
}
@media (max-width:400px){
	.qcard{padding:0 6px 8px!important;}
	.qcard__art{margin:10px 10px 0;}
	.qcard__body{padding:12px 14px 0;}
}

/* ── 結果画面のカードは、コンテナの余白を打ち消して画面幅いっぱいに ── */
.ms-quiz__screen--result .qcard,
.ms-quiz__result .qcard{
	margin-left:-16px;margin-right:-16px;
	padding-left:10px!important;padding-right:10px!important;
}
/* 上の余白は診断ヘッダー分だけあれば足りる */
.ms-quiz__container:has(.qcard){padding-top:18px;}

/* ── ここから結果画面だけのアレンジ ── */

/* 診断直後の高揚に合わせて、カードが軽く傾いてから正位置に収まる */
.qcard__card{animation:qcardReveal .75s cubic-bezier(.2,1,.3,1) both;}
@keyframes qcardReveal{
	0%{opacity:0;transform:translateY(22px) rotate(-4deg) scale(.94);}
	60%{opacity:1;transform:translateY(0) rotate(1.2deg) scale(1.01);}
	100%{opacity:1;transform:none;}
}

/* 「あなたのタイプは」を、結果らしい見せ方に */
.qcard__lead{
	display:flex;align-items:center;justify-content:center;gap:10px;
	color:var(--ci)!important;
}
.qcard__lead::before,.qcard__lead::after{
	content:"";width:26px;height:1.5px;border-radius:999px;
	background:linear-gradient(90deg,transparent,var(--c));
}
.qcard__lead::after{background:linear-gradient(90deg,var(--c),transparent);}

/* カード上部に「診断結果」の帯を足す（キャラページとの違いを出す） */
.qcard__head::after{
	content:"RESULT";
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	font-size:9px;font-weight:900;letter-spacing:.3em;
	color:rgba(255,255,255,.55);pointer-events:none;
}
.qcard__head{position:relative;}

/* 健全度は結果ならではの数値なので、より目立たせる */
.qcard__score{
	padding:8px 13px;border-width:2.5px;
	background:rgba(255,255,255,.97);
}
.qcard__score b{font-size:23px;}
.qcard__score::after{
	content:"";position:absolute;inset:-4px;border-radius:14px;
	border:1.5px solid color-mix(in srgb,var(--c) 45%, transparent);
	pointer-events:none;
}

@media (max-width:400px){
	.ms-quiz__screen--result .qcard,
	.ms-quiz__result .qcard{margin-left:-16px;margin-right:-16px;padding-left:8px!important;padding-right:8px!important;}
}

/* ── 出現率バッジ（健全度の反対側・アート枠の左下） ── */
.qcard__rare{
	position:absolute;left:9px;bottom:9px;z-index:2;
	display:flex;flex-direction:column;align-items:center;line-height:1;
	background:rgba(255,255,255,.97);
	border:2.5px solid var(--c);border-radius:12px;
	padding:8px 13px;
	box-shadow:0 3px 10px color-mix(in srgb,var(--c) 30%, transparent);
}
.qcard__rare[hidden]{display:none;}
.qcard__rare i{font-style:normal;font-size:8.5px;font-weight:800;color:#9b8fb0;letter-spacing:.04em;}
.qcard__rare b{font-size:19px;font-weight:900;color:var(--ci);margin-top:2px;}
.qcard__rare::after{
	content:"";position:absolute;inset:-4px;border-radius:14px;
	border:1.5px solid color-mix(in srgb,var(--c) 45%, transparent);pointer-events:none;
}
/* 希少タイプは金色にして、当たりを引いた感じを出す */
.qcard__rare[data-rare]{
	border-color:#d9a441;
	background:linear-gradient(160deg,#fffdf5,#fff4d8);
	box-shadow:0 4px 14px rgba(200,150,40,.42);
	animation:qrarePulse 2.4s ease-in-out infinite;
}
.qcard__rare[data-rare] i{color:#a8791f;font-weight:900;}
.qcard__rare[data-rare] b{color:#8a6316;}
.qcard__rare[data-rare]::after{border-color:rgba(217,164,65,.6);}
@keyframes qrarePulse{
	0%,100%{box-shadow:0 4px 14px rgba(200,150,40,.42);}
	50%{box-shadow:0 4px 22px rgba(230,180,60,.72);}
}
@media (prefers-reduced-motion:reduce){ .qcard__rare[data-rare]{animation:none;} }

@media (max-width:400px){
	.qcard__rare{padding:6px 10px;}
	.qcard__rare b{font-size:16px;}
}

/* ==========================================================================
   取扱説明書の発行
   ========================================================================== */
.msman{
	--c:#8E7CC3; --ci:#553f8c; --cs:#F1ECFA;
	max-width:520px;margin:26px auto 8px;padding:24px 20px 22px;
	background:linear-gradient(165deg,#fff,var(--cs));
	border:2.5px dashed var(--c);border-radius:22px;
	text-align:center;
	box-shadow:0 8px 26px color-mix(in srgb,var(--c) 22%, transparent);
}
.msman[data-sv="S"]{--c:#F2A93B;--ci:#76530d;--cs:#FFF6E3;}
.msman[data-sv="A"]{--c:#E8698B;--ci:#b03b62;--cs:#FDEEF4;}
.msman[data-sv="V"]{--c:#5BBBAC;--ci:#28635b;--cs:#EAF7F4;}
.msman[data-sv="F"]{--c:#8E7CC3;--ci:#553f8c;--cs:#F1ECFA;}

.msman__label{margin:0 0 6px;font-size:10.5px;font-weight:900;letter-spacing:.22em;color:var(--ci);opacity:.7;}
.msman__title{margin:0 0 10px;font-size:19px;font-weight:900;line-height:1.45;color:#2b2145;}
.msman__desc{margin:0 0 18px;font-size:12.5px;line-height:1.9;color:#5f5470;}

.msman__form{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto;}
.msman__input{
	width:100%;padding:14px 16px;font-size:16px;font-weight:700;text-align:center;
	color:#2b2145;background:#fff;
	border:2px solid color-mix(in srgb,var(--c) 45%, transparent);border-radius:14px;
	outline:none;transition:border-color .15s ease, box-shadow .15s ease;
}
.msman__input:focus{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%, transparent);}
.msman__input::placeholder{color:#b3a8c4;font-weight:500;font-size:14px;}

.msman__btn{
	width:100%;padding:15px 18px;border:none;border-radius:999px;cursor:pointer;
	font-size:16px;font-weight:900;color:#fff;
	background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 68%,#fff));
	box-shadow:0 6px 18px color-mix(in srgb,var(--c) 42%, transparent);
	transition:transform .15s ease, box-shadow .15s ease;
}
.msman__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--c) 50%, transparent);}
.msman__btn:active{transform:translateY(0);}
.msman__btn:disabled{opacity:.65;cursor:default;transform:none;}

.msman__note{margin:12px 0 0;font-size:10.5px;line-height:1.7;color:#9b8fb0;}

.msman__out{margin-top:20px;}
.msman__out[hidden]{display:none;}
.msman__img{
	display:block;width:100%;max-width:340px;margin:0 auto 14px;
	border-radius:14px;border:1px solid color-mix(in srgb,var(--c) 30%, transparent);
	box-shadow:0 10px 28px rgba(60,30,100,.16);
}
.msman__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:340px;margin:0 auto;}
.msman__act{
	display:flex;align-items:center;justify-content:center;gap:5px;
	padding:13px 10px;border:none;border-radius:12px;cursor:pointer;
	font-size:13.5px;font-weight:900;text-decoration:none;
	transition:transform .15s ease;
}
.msman__act:hover{transform:translateY(-2px);}
.msman__act--save{background:var(--c);color:#fff;}
.msman__act--x{background:#111;color:#fff;}
.msman__act--print{grid-column:1 / -1;background:#fff;color:var(--ci);border:2px solid color-mix(in srgb,var(--c) 42%, transparent);}

@media (max-width:400px){
	.msman{padding:20px 14px 18px;margin:22px auto 6px;}
	.msman__title{font-size:17px;}
}

/* ── 説明書のシェアボタン（画像つきシェアを主役に） ── */
.msman__act--share{grid-column:1 / -1;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 62%,#fff));color:#fff;}
.msman__act--share[hidden]{display:none;}
.msman__hint{
	grid-column:1 / -1;margin:4px 0 0;
	font-size:10.5px;line-height:1.7;color:#9b8fb0;text-align:center;
}


/* 16タイプ解説への導線（キャラページより控えめだが、テキストリンクより強い） */
.ms-type-article-link__btn--sub{
	margin-top:10px;
	background:#fff !important;
	color:#6b3fa0 !important;
	border:2px solid #d9c8f2;
	box-shadow:0 4px 12px rgba(107,63,160,.10);
}
.ms-type-article-link__btn--sub:hover{background:#faf7ff !important;}


/* 水晶玉アイコンを外したので、背景の絵柄と見出しが重ならないよう間隔を確保する
   （アイコンが約70pxのスペーサーになっていた。ショート診断側の⚡には影響させない） */
.ms-quiz__intro > .ms-quiz__intro-title:first-child{ margin-top:70px; }
@media (min-width:768px){
	.ms-quiz__intro > .ms-quiz__intro-title:first-child{ margin-top:78px; }
}


/* 診断ページの解説本文（結果はJSで描くため、ここがサーバー側の本文になる） */
.ms-quiz__about{
	max-width:640px;margin:26px auto 0;padding:20px 18px 4px;
	border-top:1.5px dashed #e0d3f2;text-align:left;
}
.ms-quiz__about h2{
	font-size:16px;font-weight:900;color:#4a2f7a;margin:0 0 10px;line-height:1.6;
}
.ms-quiz__about h3{
	font-size:14.5px;font-weight:900;color:#6b3fa0;margin:20px 0 8px;line-height:1.6;
}
.ms-quiz__about p{
	font-size:13.5px;line-height:2;color:#3c3155;margin:0 0 12px;
}
.ms-quiz__about-list{margin:0 0 12px;padding:0 0 0 2px;list-style:none;}
.ms-quiz__about-list li{
	font-size:13px;line-height:1.9;color:#3c3155;
	background:#faf7ff;border-radius:10px;padding:9px 12px;margin:0 0 6px;
}