/*
Theme Name: MBTI-SVAF
Theme URI:
Author: MBTI-SVAF Team
Description: 愛着MBTI（MBTI × SVAF）心理診断サイト — 進化したMBTI診断
Version: 3.0.0
Text Domain: mbti-svaf
*/

/* ==========================================================================
   Variables
   ========================================================================== */
:root {
	--color-primary: #8b6cc1;
	--color-primary-dark: #7558ab;
	--color-secondary: #d65c9a;
	--color-secondary-dark: #c04888;
	--color-accent: #f0c040;
	--color-analysts: #8b6cc1;
	--color-diplomats: #43b88c;
	--color-sentinels: #5ba3c9;
	--color-explorers: #E8698B;
	--color-bg: #f5f0fa;
	--color-bg-white: #ffffff;
	--color-bg-dark: #2d2055;
	--color-text: #3a3040;
	--color-text-secondary: #6b5f7d;
	--color-text-muted: #756985;
	--color-text-white: #ffffff;
	--color-border: #e4daf0;
	--shadow-soft: 0 2px 12px rgba(80,40,120,0.06);
	--shadow-card: 0 4px 16px rgba(80,40,120,0.08);
	--shadow-hover: 0 8px 32px rgba(80,40,120,0.12);
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-full: 9999px;
	--font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', Meiryo, sans-serif;
	--font-heading: 'Poppins', var(--font-main);
	--max-width: 1200px;
	--header-height: 80px;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-main); color: var(--color-text); background: var(--color-bg); line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary-dark); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

.ms-container { max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
.ms-sp-only { display: none; }

/* ==========================================================================
   Header — 動物テーマ
   ========================================================================== */
.ms-header {
	background: linear-gradient(135deg, #f3ecfb, #fdf0f6, #f0ecfb);
	height: var(--header-height);
	border-bottom: 3px solid transparent;
	border-image: linear-gradient(90deg, #d65c9a, #8b6cc1, #f0c040, #43b88c, #d65c9a) 1;
	position: sticky;
	top: 0;
	z-index: 1000;
	overflow: visible;
}
.ms-header__paws {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
}
.ms-header__paw {
	position: absolute;
	font-size: 1.2rem;
	opacity: 0.12;
}
.ms-header__paw--1 { top: 8px; left: 18%; transform: rotate(-20deg); }
.ms-header__paw--2 { bottom: 6px; left: 45%; transform: rotate(15deg); font-size: 0.9rem; }
.ms-header__paw--3 { top: 12px; right: 25%; transform: rotate(-35deg); font-size: 1rem; }
.ms-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 16px;
	overflow: visible;
	position: relative;
}
.ms-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	position: relative;
	left: -6px;
	z-index: 10;
}
.ms-header__logo-img {
	height: 110px;
	width: auto;
	max-width: none;
	display: block;
	object-fit: contain;
	margin: -10px 0 -10px 0;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}
/* SP ナビ（ハンバーガー展開） */
.ms-header__nav {
	display: none;
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	bottom: 0;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(243,236,251,0.98), rgba(253,240,246,0.98));
	backdrop-filter: blur(12px);
	padding: 28px 24px;
	gap: 6px;
	z-index: 999;
	overflow-y: auto;
}
.ms-header__nav--open {
	display: flex;
}
.ms-nav-icon {
	margin-right: 8px;
	font-size: 1.1em;
}
.ms-header__nav a {
	color: #5a3d7a;
	font-size: 1.05rem;
	font-weight: 600;
	padding: 16px 20px;
	border-radius: var(--radius-lg);
	transition: all 0.25s;
	background: rgba(255,255,255,0.6);
	border: 1px solid rgba(139,108,193,0.1);
	display: flex;
	align-items: center;
}
.ms-header__nav a:hover {
	background: rgba(255,255,255,0.9);
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: translateX(4px);
}
.ms-header__cta {
	background: linear-gradient(135deg, #8b6cc1, #d65c9a) !important;
	color: var(--color-text-white) !important;
	text-align: center;
	justify-content: center;
	border-radius: var(--radius-full) !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	margin-top: 12px;
	padding: 18px 24px !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(139,108,193,0.35);
	letter-spacing: 0.03em;
}
.ms-header__cta:hover {
	transform: translateX(0) scale(1.02) !important;
	box-shadow: 0 6px 24px rgba(139,108,193,0.4) !important;
}
/* 肉球ハンバーガーボタン */
.ms-header__hamburger {
	display: flex;
	background: linear-gradient(135deg, #f3ecfb, #fdf0f6);
	border: 2px solid rgba(139,108,193,0.2);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1001;
	transition: all 0.3s;
	box-shadow: 0 2px 8px rgba(139,108,193,0.15);
}
.ms-header__hamburger:hover {
	border-color: var(--color-primary);
	box-shadow: 0 4px 12px rgba(139,108,193,0.25);
}
.ms-header__hamburger span {
	display: none;
}
.ms-header__hamburger-paw {
	font-size: 1.4rem;
	line-height: 1;
	transition: transform 0.3s;
}
.ms-header__hamburger--open {
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	border-color: transparent;
}
.ms-header__hamburger--open .ms-header__hamburger-paw {
	transform: rotate(180deg) scale(1.1);
	filter: brightness(10);
}

/* ==========================================================================
   Hero v2 — バナー画像フル表示 + CTA下部バー
   ========================================================================== */
.ms-hero2 {
	background: #e0d4f0;
}
.ms-hero2__image {
	width: 100%;
	line-height: 0;
}
.ms-hero2__image img {
	width: 100%;
	height: auto;
	display: block;
}
.ms-hero2__img-sp { display: none !important; }
.ms-hero2__img-pc { display: block !important; }
@media (max-width: 767px) {
	.ms-hero2__img-sp { display: block !important; line-height: 0; }
	.ms-hero2__img-pc { display: none !important; }
	.ms-hero2 { background: var(--color-bg); }
	.ms-hero2__cta-bar { padding: 4px 16px 8px; }
	.ms-hero2__cta-link { max-width: 340px; }

	.ms-section { padding: 32px 0; }
	.ms-section__header { margin-bottom: 24px; }
	.ms-section__title { font-size: 1.25rem; }
	.ms-section__desc { font-size: 0.82rem; }

	.ms-authority__card { padding: 18px 16px; }
	.ms-authority__content h3 { font-size: 0.88rem; }
	.ms-authority__content p { font-size: 0.78rem; }

	.ms-svaf-card { padding: 18px 16px; }
	.ms-svaf-card__desc { font-size: 0.8rem; }
	.ms-svaf-card__traits li { font-size: 0.78rem; }

	.ms-dance__visual { padding: 16px 10px; gap: 8px; margin-bottom: 20px; }
	.ms-dance__person strong { font-size: 0.8rem; }
	.ms-dance__step h3 { font-size: 0.85rem; }
	.ms-dance__step p { font-size: 0.8rem; }
	.ms-dance__cta { padding: 18px 14px; }
	.ms-dance__cta p { font-size: 0.88rem; }

	.ms-group__header { padding: 12px 16px; }
	.ms-group__header h3 { font-size: 0.9rem; }
	.ms-group__header p { font-size: 0.72rem; }
	.ms-type-card { padding: 14px 8px; }
	.ms-type-card__img { max-width: 104px; }
	.ms-type-card__mbti { font-size: 0.78rem; }
	.ms-type-card__animal { font-size: 0.7rem; }
	.ms-type-card__title { font-size: 0.6rem; }

	.ms-cta-section { padding: 32px 16px; }
	.ms-cta-section__title { font-size: 1.15rem; }
	.ms-cta-section__desc { font-size: 0.82rem; }
	.ms-cta-section__btn-link { max-width: 320px; }

	/* タッチ判定はアンカーの箱（180×64）だけに限定し、はみ出す画像はクリックを透過させる */
	.ms-header__logo { left: -20px; position: relative; width: 190px; height: 64px; }
	.ms-header__logo-img { position: absolute; top: -38px; left: 0; height: 180px; margin: 0; pointer-events: none; }
}
.ms-hero2__cta-bar {
	background: linear-gradient(180deg, #eee5f8, #faf7fd);
	padding: 8px 16px 14px;
	text-align: center;
}
.ms-hero2__cta-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.ms-hero2__cta-link {
	display: inline-block;
	max-width: 520px;
	transition: transform 0.2s;
}
.ms-hero2__cta-link:hover {
	transform: scale(1.05);
}
.ms-hero2__cta-img {
	width: 100%;
	height: auto;
	display: block;
}

/* 旧ヒーロー非表示 */
.ms-hero { display: none; }
.ms-hero__bg-shapes { display: none; }
.ms-hero__shape { display: none; }
.ms-hero__layout { display: none; }
.ms-hero__text { display: none; }
.ms-hero__eyecatch { display: none; }
.ms-hero__title { display: none; }
.ms-hero__subtitle { display: none; }
.ms-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--color-accent);
	color: var(--color-bg-dark);
	font-size: 1rem;
	font-weight: 700;
	padding: 14px 36px;
	border-radius: var(--radius-full);
	box-shadow: 0 4px 20px rgba(228,174,58,0.3);
	transition: all 0.25s;
}
.ms-hero__cta:hover {
	background: #f0c040;
	color: var(--color-bg-dark);
	transform: translateY(-2px);
}
.ms-hero__stats {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-top: 28px;
}
.ms-hero__stat { text-align: center; }
.ms-hero__stat-num {
	font-family: var(--font-heading);
	font-size: 1.3rem;
	font-weight: 800;
	display: block;
}
.ms-hero__stat-label { font-size: 0.7rem; opacity: 0.7; }

.ms-hero__visual { display: none; }
.ms-hero__banner { display: none; }

.ms-hero__card {
	position: absolute;
	width: 140px;
	background: white;
	border-radius: 14px;
	padding: 6px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.2);
	transition: transform 0.3s;
}
.ms-hero__card:hover { transform: scale(1.06) !important; }
.ms-hero__card img { width: 100%; border-radius: 10px; }
.ms-hero__card-label {
	text-align: center;
	font-size: 0.65rem;
	font-weight: 600;
	color: #555;
	margin-top: 4px;
	display: block;
}
.ms-hero__card--1 { top: 8%; left: 3%; transform: rotate(-5deg); }
.ms-hero__card--2 { top: 4%; left: 42%; transform: rotate(4deg); }
.ms-hero__card--3 { top: 32%; left: 18%; transform: rotate(-2deg); }
.ms-hero__card--4 { top: 28%; left: 58%; transform: rotate(5deg); }
.ms-hero__card--5 { top: 58%; left: 5%; transform: rotate(3deg); }
.ms-hero__card--6 { top: 54%; left: 48%; transform: rotate(-4deg); }

/* ==========================================================================
   Section
   ========================================================================== */
.ms-section { padding: 48px 0; }
.ms-section--white { background: var(--color-bg-white); }
.ms-section--decorated {
	position: relative;
	background: url('images/bg-pastel.webp') center / cover no-repeat;
	background-color: var(--color-bg);
}
.ms-section__header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 36px;
	padding: 0 16px;
}
.ms-section__label {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #69469a;
	margin-bottom: 6px;
}
.ms-section__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.35;
	margin-bottom: 10px;
	color: var(--color-bg-dark);
}
.ms-section__desc {
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	line-height: 1.7;
}

/* ==========================================================================
   仕組み解説(.ms-explain)
   ========================================================================== */
.ms-explain {
	max-width: 680px;
	margin: 0 auto;
}
.ms-explain__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: white;
	padding: 24px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}
.ms-explain__item--highlight {
	border: 2px solid var(--color-primary);
	background: #f8f3ff;
}
.ms-explain__icon {
	font-size: 1.8rem;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ms-explain__content h3 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--color-bg-dark);
}
.ms-explain__content p {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	line-height: 1.7;
}
.ms-explain__icon-plus {
	text-align: center;
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--color-secondary);
	padding: 10px 0;
}

/* ==========================================================================
   SVAF カード
   ========================================================================== */
.ms-svaf-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.ms-svaf-card {
	background: white;
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-soft);
	border-top: 4px solid;
	transition: transform 0.2s;
}
.ms-svaf-card:hover { transform: translateY(-3px); }
.ms-svaf-card--s { border-color: #F2A93B; }
.ms-svaf-card--v { border-color: #5BBBAC; }
.ms-svaf-card--a { border-color: #E8698B; }
.ms-svaf-card--f { border-color: #8E7CC3; }

.ms-svaf-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.ms-svaf-card__letter {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1rem;
	flex-shrink: 0;
}
.ms-svaf-card--s .ms-svaf-card__letter { background: #fff6e3; color: #c9962f; }
.ms-svaf-card--v .ms-svaf-card__letter { background: #eaf7f4; color: #2f6f66; }
.ms-svaf-card--a .ms-svaf-card__letter { background: #fdeef4; color: #c2456f; }
.ms-svaf-card--f .ms-svaf-card__letter { background: #f1ecfa; color: #5f4a94; }

.ms-svaf-card__header h3 {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}
.ms-svaf-card__header h3 small {
	display: block;
	font-size: 0.7rem;
	color: var(--color-text-muted);
	font-weight: 400;
}
.ms-svaf-card__desc {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	margin-bottom: 12px;
}
.ms-svaf-card__traits li {
	font-size: 0.82rem;
	line-height: 1.8;
	padding-left: 20px;
	position: relative;
}
.ms-svaf-card__traits li::before {
	content: "✓";
	position: absolute;
	left: 0;
	font-weight: 700;
}
.ms-svaf-card--s .ms-svaf-card__traits li::before { color: #F2A93B; }
.ms-svaf-card--v .ms-svaf-card__traits li::before { color: #5BBBAC; }
.ms-svaf-card--a .ms-svaf-card__traits li::before { color: #E8698B; }
.ms-svaf-card--f .ms-svaf-card__traits li::before { color: #8b6cc1; }

.ms-svaf-card__pct {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.7rem;
	background: #f5f5f5;
	padding: 3px 10px;
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
}

/* ==========================================================================
   愛着のダンス
   ========================================================================== */
.ms-dance { max-width: 700px; margin: 0 auto; }
.ms-dance__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 28px;
	padding: 24px 16px;
	background: linear-gradient(135deg, #f8f3ff, #fff0f6);
	border-radius: var(--radius-lg);
}
.ms-dance__person {
	text-align: center;
	flex: 1;
	max-width: 140px;
}
.ms-dance__letter {
	display: flex;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.2rem;
	margin: 0 auto 6px;
}
.ms-dance__person--anxious .ms-dance__letter {
	background: #fef5e0;
	color: #d4a030;
}
.ms-dance__person--avoidant .ms-dance__letter {
	background: #e8f4fb;
	color: #5ba3c9;
}
.ms-dance__person strong {
	display: block;
	font-size: 0.85rem;
	color: var(--color-bg-dark);
	margin-bottom: 2px;
}
.ms-dance__person p {
	font-size: 0.72rem;
	color: var(--color-text-muted);
	font-style: italic;
}
.ms-dance__arrows {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}
.ms-dance__arrow {
	font-size: 0.7rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	white-space: nowrap;
}
.ms-dance__arrow--push {
	background: #fce4f0;
	color: #d65c9a;
}
.ms-dance__arrow--pull {
	background: #e8f4fb;
	color: #5ba3c9;
}
.ms-dance__explanation {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
}
.ms-dance__step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.ms-dance__step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	color: white;
	font-weight: 800;
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ms-dance__step h3 {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 4px;
}
.ms-dance__step p {
	font-size: 0.84rem;
	color: var(--color-text-secondary);
	line-height: 1.75;
}
.ms-dance__cta {
	text-align: center;
	background: linear-gradient(135deg, #f3ecfb, #fff0f6);
	border-radius: var(--radius-lg);
	padding: 24px 20px;
	border: 1px solid #e4d5f5;
}
.ms-dance__cta p {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 4px;
}
.ms-dance__cta-sub {
	font-size: 0.8rem !important;
	font-weight: 400 !important;
	color: var(--color-text-secondary) !important;
	margin-bottom: 16px !important;
}

/* ==========================================================================
   タイプ一覧(.ms-group)
   ========================================================================== */
.ms-group { margin-bottom: 32px; }
.ms-group__header {
	padding: 16px 20px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	color: white;
}
.ms-group__header--analysts { background: linear-gradient(135deg, #8b6cc1, #a88dd8); }
.ms-group__header--diplomats { background: linear-gradient(135deg, #F2A93B, #4fc08d); }
.ms-group__header--sentinels { background: linear-gradient(135deg, #5BBBAC, #68b8d0); }
.ms-group__header--explorers { background: linear-gradient(135deg, #d4a030, #e8c547); color: var(--color-bg-dark); }

.ms-group__header h3 { font-size: 1rem; font-weight: 700; }
.ms-group__header h3 small { font-weight: 400; opacity: 0.8; margin-left: 6px; font-size: 0.8rem; }
.ms-group__header p { font-size: 0.78rem; opacity: 0.8; margin-top: 2px; }

.ms-group__types {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: white;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
}
.ms-type-card {
	padding: 20px 12px;
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
	transition: background 0.2s;
}
.ms-type-card:hover { background: #f8f3ff; }
.ms-type-card__img {
	width: 100%;
	max-width: 120px;
	aspect-ratio: 1 / 1;
	height: auto;
	margin: 0 auto 8px;
	overflow: hidden;
	border-radius: var(--radius-md);
}
.ms-type-card__img {
	background: #fff;
	border: 1px solid #ede7f6;
	padding: 8px;
	box-sizing: border-box;
}
.ms-type-card__img img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.ms-type-card__mbti {
	display: block;
	font-weight: 800;
	font-size: 0.85rem;
	color: var(--color-bg-dark);
	letter-spacing: 0.04em;
}
.ms-type-card__animal {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-text-secondary);
}
.ms-type-card__title {
	display: block;
	font-size: 0.65rem;
	color: var(--color-text-muted);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.ms-cta-section {
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	padding: 48px 16px;
	text-align: center;
	color: var(--color-text-white);
}
.ms-cta-section__title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
	font-weight: 800;
	margin-bottom: 10px;
}
.ms-cta-section__desc { opacity: 0.85; margin-bottom: 24px; font-size: 0.9rem; }
.ms-cta-section__btn-link {
	display: inline-block;
	max-width: 480px;
	transition: transform 0.2s;
}
.ms-cta-section__btn-link:hover { transform: scale(1.05); }
.ms-cta-section__btn-img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 4px 16px rgba(0,0,0,0.2));
}


/* ==========================================================================
   Footer
   ========================================================================== */
.ms-footer {
	background: linear-gradient(135deg, #2d2055, #3a2568);
	color: var(--color-text-white);
	padding: 48px 20px 24px;
}
.ms-footer__inner {
	max-width: var(--max-width);
	margin: 0 auto;
}
.ms-footer__top {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ms-footer__brand {
	text-align: center;
}
.ms-footer__logo {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	background: linear-gradient(135deg, #c9a0f0, #f0a0c8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 8px;
}
.ms-footer__desc {
	font-size: 0.8rem;
	color: #c9bdd8;
	line-height: 1.6;
}
.ms-footer__nav-group {
	display: flex;
	gap: 32px;
	justify-content: center;
}
.ms-footer__nav-col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ms-footer__nav-title {
	font-size: 0.75rem;
	font-weight: 700;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 4px;
}
.ms-footer__nav-col a {
	color: #c9bdd8;
	font-size: 0.82rem;
	transition: color 0.2s;
}
.ms-footer__nav-col a:hover {
	color: var(--color-text-white);
}
.ms-footer__bottom {
	padding-top: 20px;
	text-align: center;
}
.ms-footer__note {
	font-size: 0.62rem;
	color: var(--color-text-muted);
	opacity: 0.75;
	line-height: 1.8;
	max-width: 640px;
	margin: 0 auto 10px;
	text-align: left;
}
.ms-footer__copy {
	font-size: 0.7rem;
	color: var(--color-text-muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-main);
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: all 0.2s;
	border-radius: var(--radius-full);
	text-decoration: none;
}
.ms-btn--primary { background: var(--color-primary); color: white; padding: 12px 28px; font-size: 0.95rem; }
.ms-btn--primary:hover { background: var(--color-primary-dark); color: white; }
.ms-btn--accent { background: var(--color-accent); color: var(--color-bg-dark); padding: 12px 28px; font-size: 0.95rem; font-weight: 700; }
.ms-btn--accent:hover { background: #f0c040; color: var(--color-bg-dark); }
.ms-btn--outline { background: transparent; color: var(--color-text-secondary); border: 2px solid var(--color-border); padding: 10px 24px; font-size: 0.85rem; }
.ms-btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ==========================================================================
   権威付けセクション
   ========================================================================== */
.ms-authority {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.ms-authority__card {
	background: white;
	border-radius: var(--radius-lg);
	padding: 24px 20px;
	box-shadow: var(--shadow-soft);
}
.ms-authority__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	flex-shrink: 0;
	margin-bottom: 12px;
}
.ms-authority__icon--jung { background: #ede7f6; }
.ms-authority__icon--bowlby { background: #e3f2fd; }
.ms-authority__icon--fusion { background: #fff3e0; }
.ms-authority__content h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; color: var(--color-bg-dark); }
.ms-authority__content p { font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.7; }

/* ==========================================================================
   PC (min-width: 768px)
   ========================================================================== */
@media (min-width: 768px) {
	:root { --header-height: 90px; }
	.ms-container { padding: 0 24px; }
	.ms-sp-only { display: none !important; }

	.ms-header__logo { left: -6px; }
	.ms-header__logo-img { height: 118px; margin: -14px 0 -14px 0; }
	.ms-header__paw--1 { left: 22%; }
	.ms-header__paw--2 { left: 50%; }
	.ms-header__paw--3 { right: 15%; }
	.ms-hero2__cta-link { max-width: 500px; }

	.ms-hero { min-height: 480px; max-height: 700px; }
	.ms-hero__overlay { padding: 40px 24px 32px; }

	.ms-section { padding: 72px 0; }
	.ms-section__title { font-size: 1.8rem; }

	.ms-svaf-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.ms-group__types { grid-template-columns: repeat(4, 1fr); }
	.ms-type-card { border-bottom: none; border-right: 1px solid #f0f0f0; }
	.ms-type-card:nth-child(4n) { border-right: none; }
	.ms-type-card__img { max-width: 150px; }

	.ms-authority { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.ms-hero__title { font-size: 3rem; }
	.ms-hero__card { width: 160px; }
}

/* ==========================================================================
   64タイプ一覧ページ
   ========================================================================== */
.ms-group--detail { margin-bottom: 40px; }
.ms-type-detail {
	background: white;
	padding: 20px;
	border-bottom: 1px solid #f0e8f8;
}
.ms-type-detail:last-child { border-bottom: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ms-type-detail__header {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
}
.ms-type-detail__mbti {
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 900;
	color: var(--color-bg-dark);
}
.ms-type-detail__animal {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-primary);
}
.ms-type-detail__title {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}
.ms-type-detail__variants {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.ms-variant-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	background: var(--color-bg);
	border-radius: var(--radius-md);
	padding: 14px 10px 16px;
	transition: transform 0.2s;
}
.ms-variant-card:hover { transform: translateY(-2px); }
.ms-variant-card__img {
	width: 100%;
	max-width: 132px;
	aspect-ratio: 1 / 1;
	height: auto;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
}
.ms-variant-card__img {
	background: #fff;
	border: 1px solid #ede7f6;
	border-radius: 14px;
	padding: 10px;
	box-sizing: border-box;
}
.ms-variant-card__img img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.ms-variant-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
}
.ms-variant-card__type {
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--color-bg-dark);
}
.ms-variant-card__svaf {
	font-size: 0.68rem;
	color: var(--color-text-muted);
}
a.ms-variant-card { text-decoration: none; }
.ms-variant-card__more {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.7rem;
	font-weight: 800;
	color: #8b6cc1;
}
.ms-types-cta {
	text-align: center;
	padding: 40px 0;
}
.ms-types-cta p {
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 16px;
}
@media (min-width: 768px) {
	.ms-type-detail__variants { grid-template-columns: repeat(4, 1fr); }
	.ms-variant-card__img { max-width: 150px; }
}

/* ==========================================================================
   Aboutページ
   ========================================================================== */
.ms-about-block {
	max-width: 760px;
	margin: 0 auto 40px;
	padding: 0 8px;
}
.ms-about-block__icon {
	font-size: 2rem;
	margin-bottom: 8px;
}
.ms-about-block h2 {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--color-bg-dark);
	margin-bottom: 12px;
}
.ms-about-block p {
	font-size: 0.9rem;
	color: var(--color-text-secondary);
	line-height: 1.85;
	margin-bottom: 12px;
}
.ms-about-axes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 16px 0;
}
.ms-about-axis {
	background: white;
	padding: 14px 16px;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
}
.ms-about-axis__pair {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-bg-dark);
	margin-bottom: 2px;
}
.ms-about-axis__desc {
	font-size: 0.78rem;
	color: var(--color-text-muted);
}
.ms-about-svaf {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 16px 0;
}
.ms-about-svaf__item {
	padding: 14px 16px;
	border-radius: var(--radius-md);
	border-left: 4px solid;
}
.ms-about-svaf__item--s { border-color: #43b88c; background: #f0faf5; }
.ms-about-svaf__item--v { border-color: #5ba3c9; background: #f0f7fc; }
.ms-about-svaf__item--a { border-color: #E8698B; background: #fef9f0; }
.ms-about-svaf__item--f { border-color: #8b6cc1; background: #f5f0fa; }
.ms-about-svaf__item strong {
	display: block;
	font-size: 0.88rem;
	color: var(--color-bg-dark);
	margin-bottom: 4px;
}
.ms-about-svaf__item p {
	font-size: 0.82rem;
	color: var(--color-text-secondary);
	margin-bottom: 0;
}
.ms-about-example {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 16px 0;
}
.ms-about-example__item {
	background: linear-gradient(135deg, #f8f3ff, #fff0f6);
	padding: 16px;
	border-radius: var(--radius-md);
}
.ms-about-example__item strong {
	display: block;
	font-size: 0.88rem;
	color: var(--color-bg-dark);
	margin-bottom: 4px;
}
.ms-about-example__item p {
	font-size: 0.82rem;
	margin-bottom: 0;
}
.ms-about-list {
	margin: 8px 0;
}
.ms-about-list li {
	font-size: 0.85rem;
	color: var(--color-text-secondary);
	line-height: 1.8;
	padding-left: 20px;
	position: relative;
}
.ms-about-list li::before {
	content: '•';
	position: absolute;
	left: 4px;
	color: var(--color-primary);
	font-weight: 700;
}
@media (min-width: 768px) {
	.ms-about-axes { grid-template-columns: repeat(2, 1fr); }
	.ms-about-svaf { grid-template-columns: repeat(2, 1fr); }
	.ms-about-example { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   法務ページ（特定商取引法・プライバシーポリシー）
   ========================================================================== */
.ms-tokushoho-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 16px;
	font-size: 0.9rem;
}
.ms-tokushoho-table th {
	background-color: var(--color-primary);
	color: var(--color-bg-white);
	padding: 12px 16px;
	text-align: left;
	font-weight: 600;
	width: 30%;
	border: 1px solid var(--color-primary);
}
.ms-tokushoho-table td {
	padding: 12px 16px;
	border: 1px solid #e0e0e0;
	color: var(--color-text-secondary);
	line-height: 1.6;
}
.ms-tokushoho-table a {
	color: var(--color-primary);
	text-decoration: none;
}
.ms-tokushoho-table a:hover {
	text-decoration: underline;
}

/* ══════════════════════════════════════════
   ヘッダー/ドロワー刷新 v2（視認できるメニューボタン・常設CTA・整理されたドロワー）
   ══════════════════════════════════════════ */
.ms-header__hamburger {
	width: auto;
	height: 40px;
	border-radius: 999px;
	padding: 0 13px;
	gap: 7px;
	flex-shrink: 0;
}
.ms-header__hamburger span { display: inline-flex; }
.ms-hbg-lines {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 17px;
}
.ms-hbg-lines i {
	display: block;
	height: 2.5px;
	border-radius: 2px;
	background: linear-gradient(90deg, #8b6cc1, #d65c9a);
	transition: transform .25s, opacity .2s;
}
.ms-hbg-label {
	font-size: 10.5px;
	font-weight: 800;
	color: #6b3fa0;
	letter-spacing: .04em;
	line-height: 1;
}
.ms-header__hamburger--open .ms-hbg-lines i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ms-header__hamburger--open .ms-hbg-lines i:nth-child(2) { opacity: 0; }
.ms-header__hamburger--open .ms-hbg-lines i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.ms-header__hamburger--open {
	background: linear-gradient(135deg, #f3ecfb, #fdf0f6);
	border-color: #8b6cc1;
}

/* SP常設CTAピル（ヘッダー右） */
.ms-header__quickcta {
	display: inline-block;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	padding: 10px 14px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(139, 108, 193, .35);
	white-space: nowrap;
	margin-left: auto;
	margin-right: 10px;
	flex-shrink: 0;
}
@media (min-width: 1024px) {
	.ms-header__quickcta { display: none; }
}

/* ドロワー（SP・タブレット）: セクション見出し＋コンパクト行 */
@media (max-width: 1023px) {
	.ms-header__nav { padding: 20px 20px 44px; gap: 0; }
	.ms-header__nav a {
		padding: 13px 12px;
		font-size: .98rem;
		background: transparent;
		border: none;
		border-bottom: 1px solid rgba(139, 108, 193, .13);
		border-radius: 0;
	}
	.ms-header__nav a:hover { transform: none; background: rgba(255, 255, 255, .75); }
	.ms-nav-sec {
		font-size: .7rem;
		font-weight: 900;
		color: #a08bb8;
		letter-spacing: .14em;
		margin: 20px 4px 4px;
	}
	.ms-header__nav .ms-nav-cta-top {
		border-radius: 999px !important;
		border-bottom: none;
		margin-top: 4px;
	}
	.ms-nav-cta-pc { display: none !important; }
	.ms-nav-x {
		background: #16111f !important;
		color: #fff !important;
		border-radius: 12px !important;
		border-bottom: none !important;
		justify-content: center;
		margin-top: 16px;
		font-weight: 800 !important;
	}
}
/* PC（1024px以上）: 主要リンクのみ横並び・その他はドロワー専用 */
@media (min-width: 1024px) {
	.ms-header__hamburger { display: none; }
	.ms-header__nav {
		display: flex !important;
		position: static;
		flex-direction: row;
		flex-wrap: nowrap;
		padding: 0;
		bottom: auto;
		background: transparent;
		border: none;
		box-shadow: none;
		backdrop-filter: none;
		gap: 4px;
		align-items: center;
		overflow: visible;
	}
	.ms-header__nav a { display: none; }
	.ms-header__nav a.ms-nav-main {
		display: inline-flex;
		font-size: 0.78rem;
		padding: 8px 12px;
		border: none;
		background: rgba(255,255,255,0.5);
		border-radius: var(--radius-full);
		white-space: nowrap;
	}
	.ms-header__nav a.ms-nav-main:hover {
		background: rgba(255,255,255,0.9);
		transform: translateY(-1px);
	}
	.ms-header__nav .ms-nav-cta-pc {
		display: inline-flex;
		margin-top: 0 !important;
		font-size: 0.78rem !important;
		padding: 10px 18px !important;
		white-space: nowrap;
		flex-shrink: 0;
	}
	.ms-nav-icon { margin-right: 4px; font-size: 0.9em; }
	.ms-nav-sec, .ms-nav-cta-top, .ms-nav-x { display: none; }
}
/* PC 1024-1535px: ナビ項目が増えたぶんチップを詰めてCTAの潰れを防ぐ */
@media (min-width: 1024px) and (max-width: 1535px) {
	.ms-header__nav { gap: 3px; }
	.ms-header__nav a.ms-nav-main { font-size: 0.72rem; padding: 7px 9px; }
	.ms-header__nav .ms-nav-cta-pc { font-size: 0.72rem !important; padding: 9px 13px !important; }
	.ms-header__nav .ms-nav-new { display: none; }
}
/* 2026-08-09: 項目が増えて 1536px 以上でも右端のCTAがはみ出していた。
   幅に余裕があっても縮められるようにして、溢れる前に収める。 */
@media (min-width: 1536px) {
	.ms-header__nav { gap: 2px; }
	.ms-header__nav a.ms-nav-main { font-size: 0.72rem; padding: 6px 9px; }
	.ms-header__nav .ms-nav-cta-pc { font-size: 0.74rem !important; padding: 9px 15px !important; }
}
/* 保険: どの幅でも、ナビが親からはみ出さないようにする */
@media (min-width: 1024px) {
	.ms-header__inner { min-width: 0; }
	.ms-header__nav { min-width: 0; flex-shrink: 1; }
	/* 文字を切ると「診断一」のように意味が壊れる。切らずに縮めて収める */
}
/* 2026-08-09: 動画リンクが増えて横並びが8項目になり、1920pxでも385px はみ出していた。
   以前は nth-of-type で番号指定していたが、このナビには非表示のリンクも含めて
   多数の a があり、nth-of-type はクラスを見ないため番号がずれて効いていなかった。
   項目そのものに優先度クラスを付け、幅が足りないぶんだけ後ろから外す。
   （外した項目はドロワーに残るので、導線は消えない）
   pri1 診断一覧 / pri2 ビッグ5 / pri3 動画 / pri4 キャラ辞典
   pri5 ちいかわ / pri6 相性 / pri7 16タイプ / pri8 コラム */
/* 器は最大1200px。内訳を実測すると ロゴ352 + ナビ816 + ボタン109 で、
   8項目（合計1039px）はどの画面幅でも入らない。以下は実測に沿った設定。 */
@media (min-width: 1024px) {
	/* この2つはドロワーへ回す（横並びでは物理的に入らない） */
	.ms-header__nav a.ms-nav-pri8,
	.ms-header__nav a.ms-nav-pri7 { display: none; }
	/* バッジは幅を取るわりに情報量が少ないので、横並びでは出さない */
	.ms-header__nav a.ms-nav-main .ms-nav-new { display: none; }
	/* ロゴが352pxあり、ナビを圧迫していた */
	.ms-header__logo { width: 268px; }
}

/* ==========================================================================
   2026-08-15 PC版ヘッダーの重なりを直す

   実測（本番・未ログイン）でこうなっていた:
     ・枠 .ms-header__logo は 268px なのに、画像は 352px で描かれていた。
       画像は height 基準（118px）＋ max-width:none なので、枠を狭めても縮まない。
       flex は枠の 268px で場所を決めるため、ロゴの右 84px がナビの下へ潜り込み、
       どの画面幅でも 78px 重なっていた（1152px以下では 32〜38px）。
     ・器 .ms-header__inner が 1200px 固定で、1920px の画面でも両脇を大きく空けたまま
       ナビだけ 176px ぶん詰まっていた（必要 1032px に対して実幅 856px）。

   直し方は3つ:
     ① 画像を枠に追従させる（width:100% / height:auto）
     ② 画面が広いぶんは器も広げる
     ③ 項目を落とす閾値を、広がった器で計算し直す
   ========================================================================== */
@media (min-width: 1024px) {
	.ms-header__logo { width: 240px; }
	.ms-header__logo-img {
		width: 100%;
		max-width: 100%;
		height: auto;
		margin: 0;
	}
	/* ヘッダーだけ器を広げる。--max-width は本文の幅なので触らない。 */
	.ms-header__inner { max-width: min(1480px, calc(100vw - 24px)); }
	/* 同じ /mypage-entry/ への導線が、ナビ内のチップと右端のドアで2つ出ていた。
	   PCでは意味の伝わるチップに一本化する（モバイルはドアのまま。ドロワーが別にあるため）。 */
	.ms-header .ms-door { display: none; }
}
/* 落とす閾値（ナビに使える幅 ＝ 画面幅 − ロゴ240 − 左右padding32 − 24 で計算）
   8項目=1026px / 7項目=941px / 6項目=796px / 5項目=642px が必要。 */
@media (min-width: 1024px) and (max-width: 1339px) {
	.ms-header__nav a.ms-nav-pri6 { display: none; }
}
@media (min-width: 1024px) and (max-width: 1239px) {
	.ms-header__nav a.ms-nav-pri5 { display: none; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
	.ms-header__nav a.ms-nav-pri4 { display: none; }
}
/* PC 1024-1179px: さらに詰める（アイコン非表示） */
@media (min-width: 1024px) and (max-width: 1179px) {
	.ms-header__nav a.ms-nav-main .ms-nav-icon { display: none; }
	.ms-header__nav a.ms-nav-main { font-size: 0.64rem; padding: 6px 6px; }
	.ms-header__nav .ms-nav-cta-pc { font-size: 0.64rem !important; padding: 8px 10px !important; }
	/* 2026-08-15: 画像を枠に追従させたので、150pxのままだとロゴが実際に150pxまで縮む
	   （それまでは枠を無視して352pxで描かれていた）。この幅でもナビは足りるので、
	   読める大きさに戻す。190px = 高さ64pxで、ヘッダー90pxに収まる。 */
	.ms-header__logo { width: 190px; }
}
.ms-nav-new {
	background: #d65c9a;
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	border-radius: 999px;
	padding: 1px 6px;
	margin-left: 6px;
	vertical-align: middle;
}

/* ヘッダーの横あふれ防止（SP） */
@media (max-width: 767px) {
	.ms-header__inner { gap: 6px; }
	.ms-header__logo { width: 170px; height: 56px; left: 0; flex-shrink: 0; }
	.ms-header__logo-img { top: 0; height: 56px; margin: 0; }
	.ms-header__quickcta { margin-right: 4px; padding: 9px 11px; font-size: 11.5px; }
	.ms-header__hamburger { padding: 0 10px; }
}



/* 389px以下の詰め調整（ヘッダー3要素を確実に収める） */
@media (max-width: 389px) {
	/* ここも縮めない。345pxだけ直して、360pxのほうが小さいという逆転が起きていた。 */
	.ms-header__logo { width: 148px; flex-shrink: 0; min-width: 148px; }
	.ms-header__logo-img { height: 48px; top: 0; }
	.ms-header__quickcta { font-size: 11px; padding: 8px 9px; margin-right: 4px; }
	.ms-header__hamburger { padding: 0 8px; gap: 5px; }
	.ms-hbg-label { font-size: 10px; }
}

/* ヘッダー最狭幅（iPhone SE 320px など）
   389px調整でもまだ 325px > 288px で溢れ、全ページが24px横スクロールしていた。
   左右paddingを削り、3要素をもう一段圧縮して収める。
   それでも溢れる環境用に、最後の逃げ道としてロゴだけ縮小を許可する。 */
@media (max-width: 345px) {
	.ms-header__inner { padding-left: 8px; padding-right: 8px; gap: 4px; }
	/* 2026-08-15: ロゴを縮めない。扉を足したぶん、ここで削られていた。
	   足りないぶんは、あとから増えた扉のほうで詰める（下の .ms-door）。 */
	.ms-header__logo { width: 126px; flex-shrink: 0; min-width: 126px; }
	.ms-header__logo-img { height: 44px; top: 0; }
	.ms-header__quickcta { font-size: 10.5px; padding: 7px 7px; margin-right: 0; }
	.ms-header__hamburger { padding: 0 6px; gap: 4px; }
	.ms-hbg-label { font-size: 9.5px; letter-spacing: 0; }
	.ms-hbg-lines { width: 15px; }
}

/* ==========================================================================
   画面外セクションのレイアウト計算をスキップ（LCP/FCP改善）
   フルページ再レイアウトの度に全文テキスト整形が走るのを防ぐ
   ========================================================================== */
.ms-section,
.msrcta,
.tp-hub__section,
.msrel,
.mstrust {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}


/* ── 結果画面エンゲージメント（チャプターナビ/折りたたみ/文脈CTA） 2026-07-18 ── */
.ms-topshare{display:flex;gap:8px;justify-content:center;margin:14px auto 4px;max-width:560px;padding:0 10px;}
.ms-topshare a{flex:1;max-width:220px;text-align:center;font-size:12.5px;font-weight:900;padding:11px 10px;border-radius:999px;text-decoration:none;color:#fff;}
.ms-topshare__x{background:#0f1419;}
.ms-topshare__line{background:#06c755;}
.ms-chapnav{position:sticky;top:0;z-index:40;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:10px 10px;margin:10px -10px 14px;background:rgba(250,247,255,.95);backdrop-filter:blur(6px);border-bottom:1px solid #e8def5;scrollbar-width:none;}
.ms-chapnav::-webkit-scrollbar{display:none;}
.ms-chapnav a{flex-shrink:0;font-size:12px;font-weight:800;color:#5a4460;background:#fff;border:1.5px solid #e4d5f5;border-radius:999px;padding:7px 13px;text-decoration:none;white-space:nowrap;}
#qsec-glance,#qsec-chars,#qsec-score,#qsec-renai,#qsec-report,#msCrossDeep,#msB5Deep,#b5sec-front,#b5sec-aruaru,#b5sec-renai,#b5sec-back{scroll-margin-top:74px;}
.ms-collapse{max-height:900px;overflow:hidden;position:relative;}
.ms-collapse::after{content:'';position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(180deg,rgba(250,247,255,0),#faf7ff);pointer-events:none;}
.ms-collapse--open{max-height:none;}
.ms-collapse--open::after{display:none;}
.ms-collapse-btn{display:block;margin:10px auto 6px;background:#fff;border:2px solid #c9a9f5;color:#6b3fa0;font-weight:900;font-size:13px;padding:11px 26px;border-radius:999px;cursor:pointer;}
.ms-minicta{display:block;text-align:center;background:linear-gradient(135deg,#d65c9a,#8b6cc1);color:#fff;font-size:13px;font-weight:900;line-height:1.6;padding:13px 16px;border-radius:14px;text-decoration:none;margin:12px auto 18px;max-width:560px;box-shadow:0 6px 16px rgba(214,92,154,.28);}

/* 公式LINEブロック: QRはPCのみ表示 */
.ms-oaline-qr{display:none;}
@media (min-width:768px){.ms-oaline-qr{display:block;margin-top:14px;}}
/* Attachment-style adaptive strengths — shared across diagnosis and character pages */
.ms-att-gifts {
	--att-accent: #8b6cc1;
	--att-soft: #f7f1ff;
	position: relative;
	overflow: hidden;
	margin: 24px 0;
	padding: clamp(22px, 4vw, 32px);
	border: 1.5px solid color-mix(in srgb, var(--att-accent) 34%, #fff);
	border-radius: 22px;
	background: linear-gradient(145deg, #fff 0%, var(--att-soft) 100%);
	box-shadow: 0 9px 28px color-mix(in srgb, var(--att-accent) 11%, transparent);
	color: #403550;
}
.ms-att-gifts::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -60px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--att-accent) 9%, transparent);
	pointer-events: none;
}
.ms-att-gifts--s { --att-accent: #d08a16; --att-soft: #fff8e8; }
.ms-att-gifts--a { --att-accent: #cf4f86; --att-soft: #fff1f7; }
.ms-att-gifts--v { --att-accent: #477fc5; --att-soft: #eff6ff; }
.ms-att-gifts--f { --att-accent: #8c51bf; --att-soft: #f8f0ff; }
.ms-att-gifts__eyebrow {
	position: relative;
	margin: 0 0 5px;
	color: var(--att-accent);
	font: 900 10.5px/1.4 Poppins, "Noto Sans JP", sans-serif;
	letter-spacing: .16em;
}
.ms-att-gifts__title {
	position: relative;
	margin: 0 0 9px;
	color: #382d47;
	font-size: clamp(18px, 3.8vw, 24px);
	font-weight: 900;
	line-height: 1.45;
}
.ms-att-gifts__headline {
	position: relative;
	margin: 0 0 10px;
	color: var(--att-accent);
	font-size: clamp(15px, 3vw, 18px);
	font-weight: 900;
	line-height: 1.7;
}
.ms-att-gifts__lead {
	position: relative;
	margin: 0;
	font-size: 14px;
	line-height: 2;
}
.ms-att-gifts__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}
.ms-att-gifts__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 15px;
	border: 1px solid color-mix(in srgb, var(--att-accent) 21%, #fff);
	border-radius: 14px;
	background: rgba(255, 255, 255, .78);
	font-size: 12.5px;
	line-height: 1.75;
}
.ms-att-gifts__item strong {
	color: var(--att-accent);
	font-size: 14px;
	font-weight: 900;
}
.ms-att-gifts__item strong::before { content: "✦ "; }
.ms-att-gifts__note {
	position: relative;
	margin: 15px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var(--att-accent);
	border-radius: 0 10px 10px 0;
	background: rgba(255, 255, 255, .62);
	font-size: 12px;
	line-height: 1.85;
}
.ms-att-gifts__note strong { color: var(--att-accent); }
.ms-att-gifts--dark {
	border-color: color-mix(in srgb, var(--att-accent) 45%, #6b6078);
	background: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035));
	box-shadow: none;
	color: #e7deef;
}
.ms-att-gifts--dark .ms-att-gifts__title { color: #fff; }
.ms-att-gifts--dark .ms-att-gifts__headline { color: color-mix(in srgb, var(--att-accent) 58%, #fff); }
.ms-att-gifts--dark .ms-att-gifts__item,
.ms-att-gifts--dark .ms-att-gifts__note { background: rgba(255, 255, 255, .065); }
.ms-att-gifts--dark .ms-att-gifts__item { border-color: rgba(255, 255, 255, .13); }
.ms-att-gifts--compact {
	margin: 12px 0 8px;
	padding: 14px 16px;
	border-radius: 14px;
	box-shadow: none;
}
.ms-att-gifts--compact .ms-att-gifts__eyebrow { display: none; }
.ms-att-gifts--compact .ms-att-gifts__title { margin-bottom: 3px; font-size: 13px; }
.ms-att-gifts--compact .ms-att-gifts__headline { margin-bottom: 4px; font-size: 13px; line-height: 1.6; }
.ms-att-gifts--compact .ms-att-gifts__lead { font-size: 11.5px; line-height: 1.75; }
@media (max-width: 620px) {
	.ms-att-gifts { margin: 18px 0; padding: 20px 17px; border-radius: 18px; }
	.ms-att-gifts__grid { grid-template-columns: 1fr; }
	.ms-att-gifts__item { padding: 13px 14px; }
	.ms-att-gifts--compact { padding: 13px 14px; }
}

/* 64タイプ一覧カード：キャラ名（新画像は名前が入っていないためHTML側で表示） */
.ms-variant-card__name{display:block;font-size:11.5px;font-weight:900;line-height:1.35;margin:2px 0 1px;color:#2a1850;letter-spacing:-.04em;}
.ms-variant-card__name[data-sv="S"]{color:#c9962f;}
.ms-variant-card__name[data-sv="A"]{color:#c2456f;}
.ms-variant-card__name[data-sv="V"]{color:#2f6f66;}
.ms-variant-card__name[data-sv="F"]{color:#5f4a94;}
.ms-variant-card__en{display:block;font-size:8px;font-weight:800;letter-spacing:0;color:#a99ac0;margin:0 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ms-variant-card__type{font-size:11px !important;}
@media(max-width:345px){
.ms-variant-card__name{font-size:10.5px;}
.ms-variant-card__en{font-size:7.5px;}
}

/* ===========================================================
   64タイプ一覧カード：愛着スタイルで色分け（枠・背景・画像リング・バッジ）
   data-type の末尾1文字（S/A/V/F）で切り替わる
   =========================================================== */
.ms-variant-card[data-type$="S"]{--vc:#F2A93B;--vc-ink:#c9962f;--vc-bg:#fff8ec;--vc-soft:#FFD98A;}
.ms-variant-card[data-type$="A"]{--vc:#E8698B;--vc-ink:#c2456f;--vc-bg:#fdf0f5;--vc-soft:#F6C7DE;}
.ms-variant-card[data-type$="V"]{--vc:#5BBBAC;--vc-ink:#2f6f66;--vc-bg:#edf8f6;--vc-soft:#A7CED8;}
.ms-variant-card[data-type$="F"]{--vc:#8E7CC3;--vc-ink:#5f4a94;--vc-bg:#f3eefb;--vc-soft:#BDC9E3;}

.ms-variant-card{
	position:relative;overflow:hidden;
	background:linear-gradient(180deg,var(--vc-bg,#faf8ff) 0%,#fff 62%)!important;
	border:1px solid color-mix(in srgb,var(--vc,#7349d1) 26%,#fff)!important;
	border-top:4px solid var(--vc,#7349d1)!important;
	transition:transform .22s,box-shadow .22s;
}
.ms-variant-card::after{
	content:"";position:absolute;top:-34px;right:-34px;width:96px;height:96px;border-radius:50%;
	background:color-mix(in srgb,var(--vc,#7349d1) 14%,transparent);pointer-events:none;
}
.ms-variant-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px color-mix(in srgb,var(--vc,#7349d1) 30%,transparent);}
.ms-variant-card__img{
	position:relative;z-index:1;
	border:2px solid color-mix(in srgb,var(--vc,#7349d1) 34%,#fff)!important;
	box-shadow:0 4px 14px color-mix(in srgb,var(--vc,#7349d1) 18%,transparent);
}
.ms-variant-card__name{color:var(--vc-ink,#2a1850)!important;}
.ms-variant-card__en{color:color-mix(in srgb,var(--vc-ink,#6a5a8a) 55%,#fff)!important;}
/* 愛着スタイル名を塗りバッジに */
.ms-variant-card__type{
	display:inline-block;background:var(--vc,#7349d1);color:#fff!important;
	font-weight:900;border-radius:999px;padding:3px 11px;margin:3px 0 2px;
	box-shadow:0 3px 9px color-mix(in srgb,var(--vc,#7349d1) 38%,transparent);
}
.ms-variant-card__more{color:var(--vc-ink,#7349d1)!important;font-weight:800;}

/* 画像を枠の中央に（正方形前提） */
.ms-type-card__img img,.ms-variant-card__img img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block;margin:auto;}
.ms-type-card__img,.ms-variant-card__img{display:flex;align-items:center;justify-content:center;}

/* 愛着カード：上部の帯と淡い背景でも色分け（TOPの4タイプ紹介） */
.ms-svaf-card--s{border-top:4px solid #F2A93B;background:linear-gradient(180deg,#fff8ec,#fff 60%);}
.ms-svaf-card--a{border-top:4px solid #E8698B;background:linear-gradient(180deg,#fdf0f5,#fff 60%);}
.ms-svaf-card--v{border-top:4px solid #5BBBAC;background:linear-gradient(180deg,#edf8f6,#fff 60%);}
.ms-svaf-card--f{border-top:4px solid #8E7CC3;background:linear-gradient(180deg,#f3eefb,#fff 60%);}
.ms-svaf-card--s .ms-svaf-card__pct{background:#76530d;color:#fff;}
.ms-svaf-card--a .ms-svaf-card__pct{background:#a8325a;color:#fff;}
.ms-svaf-card--v .ms-svaf-card__pct{background:#1f665d;color:#fff;}
.ms-svaf-card--f .ms-svaf-card__pct{background:#5f4a94;color:#fff;}
.ms-svaf-card__pct{border-radius:999px;padding:3px 12px;font-weight:900;}


/* ── 下部の説明ブロックは既定で閉じる（スクロール短縮・2026-07-29） ── */
.ms-foldsec{margin:0 0 16px;}
.ms-foldsec:last-child{margin-bottom:0;}
.ms-foldsec > summary{list-style:none;}
.ms-foldsec > summary::-webkit-details-marker{display:none;}
.ms-foldsec > summary::after{content:"開く ▾";font-size:11px;font-weight:800;color:#8b6cc1;white-space:nowrap;}
.ms-foldsec[open] > summary::after{content:"閉じる ▴";}
.ms-foldsec[open] > summary{margin-bottom:14px;}

/* ── cta-button-shindan2 は背景を抜いた透過画像なので、角丸は当てない
      （角丸で切ると発光の縁が欠けるため） ── */

/* ==========================================================================
   診断で多かったタイプ TOP5 — ドーナツグラフ
   円で全体に占める割合を示し、各弧は愛着スタイルの色にする
   ========================================================================== */
.msrk3{
	position:relative;max-width:560px;margin:0 auto;padding:22px 16px 18px;
	background:linear-gradient(180deg,#fdfbff 0%,#f7f2fc 100%);
	border:1px solid #ebe1f7;border-radius:24px;
	box-shadow:0 6px 26px rgba(80,40,120,.08);
}

/* ── グラフ ── */
.msrk3__chart{position:relative;width:220px;max-width:74vw;margin:0 auto 20px;aspect-ratio:1/1;}
.msrk3__svg{width:100%;height:100%;display:block;}
.msrk3__svg{filter:drop-shadow(0 3px 8px rgba(80,40,120,.10));}
.msrk3__slice{
	animation:msrkSlice .5s ease-out both;
	animation-delay:var(--delay,0s);
}
@keyframes msrkSlice{ from{opacity:0;} to{opacity:1;} }
@media (prefers-reduced-motion:reduce){ .msrk3__slice{animation:none;} }

.msrk3__center{
	position:absolute;inset:0;display:flex;flex-direction:column;
	align-items:center;justify-content:center;gap:1px;pointer-events:none;text-align:center;
}
.msrk3__ctop{font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#a396b8;}
.msrk3__cpct{
	font-size:40px;font-weight:900;line-height:1;color:var(--ci);
	letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.msrk3__cpct i{font-size:16px;font-style:normal;font-weight:900;margin-left:1px;}
.msrk3__cname{
	margin-top:3px;font-size:11.5px;font-weight:900;color:#2f2545;
	max-width:104px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── 凡例 ── */
.msrk3__list{display:flex;flex-direction:column;gap:6px;}
.msrk3__item{
	display:grid;grid-template-columns:18px 62px 1fr auto;align-items:center;gap:11px;
	padding:10px 13px 10px 10px;
	background:#fff;border:1px solid #ede6f7;border-radius:14px;
	text-decoration:none;
	transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.msrk3__item:hover{transform:translateX(3px);border-color:var(--c);box-shadow:0 4px 14px color-mix(in srgb,var(--c) 22%,transparent);}

/* 順位を色の点として見せる（グラフの弧と対応） */
.msrk3__rank{
	position:relative;display:grid;place-items:center;
	width:16px;height:16px;border-radius:50%;
	background:var(--c);color:#fff;
	font-size:9.5px;font-weight:900;line-height:1;
	box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent);
}
.msrk3__thumb{
	width:62px;height:62px;border-radius:16px;overflow:hidden;
	background:var(--cs);border:2.5px solid var(--c);display:grid;place-items:center;
	box-shadow:0 2px 8px color-mix(in srgb,var(--c) 26%,transparent);
}
.msrk3__thumb img{width:100%;height:100%;object-fit:contain;display:block;}

.msrk3__body{min-width:0;display:flex;flex-direction:column;gap:5px;align-items:flex-start;}
.msrk3__top{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0;max-width:100%;}
.msrk3__bar{display:block;width:100%;height:7px;border-radius:999px;background:#f2edf9;overflow:hidden;}
.msrk3__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 50%,#fff));}
.msrk3__name{
	font-size:13.5px;font-weight:900;color:#2f2545;line-height:1.3;
	max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.msrk3__tag{
	font-size:9.5px;font-weight:800;line-height:1;white-space:nowrap;
	color:var(--ci);background:var(--cs);padding:3px 7px;border-radius:999px;
}
.msrk3__val{display:flex;align-items:baseline;gap:1px;color:var(--ci);white-space:nowrap;}
.msrk3__val b{font-size:16px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;}
.msrk3__val i{font-size:9.5px;font-style:normal;font-weight:800;}
.msrk3__val em{font-style:normal;font-size:9.5px;font-weight:700;color:#a396b8;margin-left:6px;}

.msrk3__other{
	display:flex;align-items:center;gap:8px;
	padding:7px 12px;font-size:11px;font-weight:700;color:#6f647f;
}
.msrk3__other i{width:12px;height:12px;border-radius:50%;background:#e3d9f0;flex-shrink:0;}

.msrk3__note{margin:12px 0 0;text-align:center;font-size:10.5px;color:#70647f;}

@media (max-width:400px){
	.msrk3{padding:18px 11px 15px;}
	.msrk3__chart{width:190px;}
	.msrk3__cpct{font-size:34px;}
	.msrk3__item{grid-template-columns:16px 52px 1fr auto;gap:9px;padding:8px 10px 8px 8px;}
	.msrk3__thumb{width:52px;height:52px;border-radius:13px;}
	.msrk3__name{font-size:12.5px;}
	.msrk3__val em{display:none;}
}

/* ── 円グラフの見出しと、愛着スタイル別の凡例 ── */
.msrk3__ghead,.msrk3__lhead{
	margin:0 0 12px;text-align:center;
	font-size:12.5px;font-weight:900;letter-spacing:.04em;color:#6b5f85;
}
.msrk3__lhead{margin:20px 0 10px;padding-top:16px;border-top:1px dashed #e6dcf3;}

.msrk3__sv{
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;
	margin:0 0 4px;
}
.msrk3__svitem{
	display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:8px;
	padding:9px 11px;border-radius:12px;
	background:var(--cs);border:1px solid color-mix(in srgb,var(--c) 30%, transparent);
}
.msrk3__svitem i{width:12px;height:12px;border-radius:3px;background:var(--c);}
.msrk3__svitem b{font-size:11.5px;font-weight:900;color:var(--ci);line-height:1.2;}
.msrk3__svitem em{font-style:normal;font-size:14px;font-weight:900;color:var(--ci);line-height:1;}
.msrk3__svitem u{
	grid-column:2 / -1;text-decoration:none;
	font-size:9.5px;font-weight:700;color:#6f647f;margin-top:1px;
}

@media (max-width:400px){
	.msrk3__sv{gap:6px;}
	.msrk3__svitem{padding:8px 9px;gap:6px;}
	.msrk3__svitem b{font-size:10.5px;}
	.msrk3__svitem em{font-size:13px;}
}


/* ===== 64タイプ図鑑：出現率（/types/ の固有要素） =====
   序列を付けると多いタイプの価値が低く見えるため、色は一律。
   極端に少ないタイプにだけ控えめな印を付ける。 */
.ms-variant-card__rare{
	display:inline-block;margin:2px 0 4px;padding:2px 9px;border-radius:999px;
	font-size:10px;font-weight:800;letter-spacing:.01em;color:#5b4a75;background:#f1ecfa;
}
.ms-variant-card__rare[data-few="1"]{background:#fff6e3;color:#8a6a1c;}

.tp-rare{
	margin:16px auto 26px;max-width:620px;background:#fff;border:2px solid #ece3f8;
	border-radius:18px;padding:16px 16px 12px;text-align:left;
}
.tp-rare__note{font-size:12px;color:#6f647f;line-height:1.7;margin:0 0 12px;}
.tp-rare__cols{display:grid;grid-template-columns:1fr;gap:12px;}
.tp-rare__h{font-size:13px;font-weight:900;color:#6b3fa0;margin:0 0 6px;}
.tp-rare__row{
	display:flex;justify-content:space-between;align-items:center;gap:10px;
	padding:8px 12px;margin:0 0 6px;border-radius:10px;background:#faf7ff;
	text-decoration:none;
}
.tp-rare__name{font-size:13px;font-weight:800;color:#3a2a55;}
.tp-rare__pct{font-size:13px;font-weight:900;color:#8b6cc1;}
.tp-rare__link{font-size:12.5px;color:#4a3560;margin:8px 0 0;line-height:1.8;}
.tp-rare__link a{font-weight:900;color:#6b3fa0;}

@media (min-width:600px){
	.tp-rare__cols{grid-template-columns:1fr 1fr;gap:18px;}
}


/* ===== グループへのジャンプ（/types/ と /type-detail/ の索引用） ===== */
.tp-jump{
	max-width:620px;margin:0 auto 22px;background:#fff;border:2px solid #ece3f8;
	border-radius:16px;padding:14px 14px 12px;
}
.tp-jump__h{font-size:12.5px;font-weight:900;color:#6b3fa0;margin:0 0 10px;text-align:left;}
.tp-jump__list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0;padding:0;list-style:none;}
.tp-jump__list a{
	display:flex;align-items:center;gap:7px;justify-content:center;
	padding:9px 6px;border-radius:10px;background:#faf7ff;
	font-size:13px;font-weight:800;color:#4a2f7a;text-decoration:none;
}
.tp-jump__list a:hover{background:#f3ecfb;}
.tp-jump__list span{font-size:15px;}
html{scroll-behavior:smooth;}
/* 固定ヘッダーに見出しが隠れないよう、ジャンプ先に余白を持たせる */
.ms-group[id], .td-group[id]{scroll-margin-top:76px;}

@media (min-width:600px){
	.tp-jump__list{grid-template-columns:repeat(4,1fr);}
}


/* 390px前後でヘッダーが2pxだけ外に出て、全ページが横スクロールしていた。
   ロゴは縮めず、余白と文字間だけを詰めて収める。 */
@media (min-width: 346px) and (max-width: 430px) {
	.ms-header__inner { padding-left: 10px; padding-right: 10px; gap: 5px; }
	.ms-header__quickcta { padding-left: 9px; padding-right: 9px; letter-spacing: 0; }
	.ms-hbg-label { letter-spacing: 0; }
}


/* ===== トップ：この診断はどう作られているか ===== */
.fpm__nums{
	display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 16px;
}
.fpm__num{
	background:#fff;border:2px solid #ece3f8;border-radius:14px;padding:12px 6px;text-align:center;
}
.fpm__num b{
	display:block;font-size:22px;font-weight:900;color:#6b3fa0;line-height:1.2;
	font-feature-settings:"tnum";
}
.fpm__num span{display:block;font-size:10.5px;font-weight:700;color:#6f647f;margin-top:3px;line-height:1.5;}

.fpm__cards{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px;text-align:left;}
.fpm__card{
	position:relative;background:#fff;border:2px solid #ece3f8;border-radius:16px;
	padding:14px 15px 13px 15px;
}
.fpm__no{
	display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;border-radius:8px;background:#69469a;color:#fff;
	font-size:11.5px;font-weight:900;margin:0 0 8px;
}
.fpm__card b{display:block;font-size:15px;font-weight:900;color:#3a2a55;margin:0 0 6px;line-height:1.6;}
.fpm__card p{font-size:12.5px;line-height:1.95;color:#3c3155;margin:0;}
.fpm__card strong{color:#6b3fa0;}
.fpm__more{
	font-size:12.5px;line-height:1.9;color:#6d6086;margin:0;text-align:center;
}
.fpm__more a{font-weight:900;color:#6b3fa0;}

@media (min-width:700px){
	.fpm__cards{grid-template-columns:1fr 1fr;}
}


/* ==========================================================================
   TOP: 新ヒーロー（星空グラデ）に合わせた調整  2026-08-05
   画像の実測色 — 左下 #A5DBE7 / 中央下 #DFDBF4 / 右下 #231573
   ========================================================================== */
.ms-hero2 {
	background: linear-gradient(100deg, #A5DBE7 0%, #DFDBF4 48%, #4A3A86 78%, #231573 100%);
}
@media (max-width: 767px) {
	.ms-hero2 {
		background: linear-gradient(160deg, #C6B2E8 0%, #A8CEE6 40%, #4A3A86 82%, #191B73 100%);
	}
}
/* ヒーロー下のCTA帯。画像の下端から続いているように見せる */
.ms-hero2__cta-bar {
	background: linear-gradient(180deg, rgba(223,219,244,.92) 0%, rgba(245,240,250,1) 100%);
}

/* セクション見出しを星空側の紫に寄せる（既存の色指定より弱い指定で上書きしない） */
.fp-starry .ms-section__label { color: #69469a; }
.fp-starry .ms-section__title { color: #2c2352; }

/* 星の粒。装飾なので読み上げ対象外・クリックも透過させる */
.fp-stars { position: relative; }
.fp-stars::before {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 78% 16%, rgba(255,255,255,.7) 50%, transparent 51%),
		radial-gradient(1.8px 1.8px at 64% 68%, rgba(255,255,255,.75) 50%, transparent 51%),
		radial-gradient(1.3px 1.3px at 30% 82%, rgba(255,255,255,.6) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 90% 54%, rgba(255,255,255,.65) 50%, transparent 51%);
	background-repeat: no-repeat;
}

/* ヒーロー直下の診断ボタン帯。余白を締めて、画像から視線が途切れないようにする */
.ms-hero2__cta-bar { padding-top: 10px; padding-bottom: 14px; }
.ms-hero2__title {
	margin: 0 auto 4px;
	padding: 0 16px;
	font-size: clamp(1.05rem, 4.3vw, 1.45rem);
	font-weight: 900;
	line-height: 1.45;
	text-align: center;
	color: #352656;
}
.ms-hero2__lead {
	margin: 0 auto 8px;
	padding: 0 16px;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.7;
	text-align: center;
	color: #625474;
}
@media (max-width: 767px) {
	.ms-hero2__cta-bar { padding-top: 6px; padding-bottom: 10px; }
}

/* トップのコラムカードだけを本体CSSに同梱し、記事用CSS/JSの全読み込みを避ける。 */
.ms-topics-teaser__grid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0 32px;}
.ms-topics-teaser__card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #ece5ff;border-radius:16px;padding:20px;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s;box-shadow:0 2px 8px rgba(80,40,160,.05);}
.ms-topics-teaser__card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(115,73,209,.15);border-color:#b89dff;}
.ms-topics-teaser__thumb{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;font-size:28px;}
.ms-topics-teaser__cat{font-size:11px;font-weight:700;color:#7a42d1;margin:0 0 4px;letter-spacing:.05em;}
.ms-topics-teaser__card h3{font-size:15px;font-weight:800;margin:0 0 6px;color:#2a1850;line-height:1.5;}
.ms-topics-teaser__excerpt{font-size:12px;color:#625474;margin:0;line-height:1.7;}
.ms-topics-teaser__more{text-align:center;}
@media(min-width:700px){.ms-topics-teaser__grid{grid-template-columns:repeat(3,1fr);}}








/* ==========================================================================
   相性診断の演出  2026-08-06
   MBTI相性（/compatibility/）とビッグ5相性（/big5-pair/）で共通。
   スコアが最初から出ているだけだったので、円のゲージが回って数字が決まる
   「判明する瞬間」を作る。動きを避けたい端末では最終状態だけ出す。
   ========================================================================== */
.afx {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}
/* 円のゲージ */
.afx__gauge {
	position: relative;
	width: min(212px, 58vw);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	padding: 13px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .3);
	filter: drop-shadow(0 10px 26px rgba(120, 60, 130, .28));
}
.afx__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from -90deg, var(--afx-c1, #c58bea) 0%, rgba(255, 255, 255, .3) 0%);
}
.afx__hole {
	position: absolute;
	inset: 13px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: inset 0 3px 14px rgba(120, 60, 130, .12);
}
.afx__cap {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .18em;
	color: #a08bbd;
	margin: 0 0 2px;
}
.afx__val {
	display: flex;
	align-items: baseline;
	gap: 2px;
	line-height: 1;
	font-weight: 900;
	color: #2d2055;
}
.afx__val b {
	font-size: clamp(44px, 13vw, 62px);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}
.afx__val i { font-style: normal; font-size: 19px; font-weight: 900; color: #8b6cc1; }
/* ランクのメダル */
.afx__medal {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
	color: #fff;
	border: 3px solid #fff;
	background: linear-gradient(140deg, var(--afx-c1, #c58bea), var(--afx-c2, #8b6cc1));
	box-shadow: 0 6px 16px rgba(120, 60, 130, .34);
	transform: scale(.4) rotate(-25deg);
	opacity: 0;
	transition: transform .5s cubic-bezier(.3, 1.7, .5, 1), opacity .3s;
}
.afx.is-done .afx__medal { transform: scale(1) rotate(0); opacity: 1; }
.afx__medal b { font-size: 22px; font-weight: 900; }
.afx__medal small { font-size: 7.5px; font-weight: 900; letter-spacing: .1em; opacity: .9; }
/* 称号とひとこと */
.afx__title {
	margin: 14px 0 0;
	font-size: 19px;
	font-weight: 900;
	color: #2d2055;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s .15s, transform .5s .15s;
}
.afx__line {
	margin: 5px 0 0;
	font-size: 13px;
	font-weight: 800;
	color: #a4489a;
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s .3s, transform .5s .3s;
}
.afx.is-done .afx__title,
.afx.is-done .afx__line { opacity: 1; transform: translateY(0); }
/* 舞い上がるハート */
.afx__hearts {
	position: absolute;
	inset: -20px 0 0;
	pointer-events: none;
	overflow: visible;
}
.afx-heart {
	position: absolute;
	bottom: 18%;
	animation: afxHeart 2.2s ease-out forwards;
	opacity: 0;
}
@keyframes afxHeart {
	0%   { opacity: 0; transform: translateY(0) scale(.6); }
	18%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(-120px) scale(1.15) rotate(12deg); }
}
/* 向かい合う2体の浮遊と、あいだを行き来する光 */
@keyframes afxFloat {
	0%, 100% { transform: translateY(0) rotate(-1.2deg); }
	50%      { transform: translateY(-9px) rotate(1.4deg); }
}
.afx-link {
	position: relative;
	flex: 0 0 auto;
	width: 52px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.afx-link::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 50%;
	height: 2px;
	margin-top: -1px;
	background: repeating-linear-gradient(90deg, #e79ac4 0 5px, transparent 5px 10px);
	opacity: .75;
}
.afx-link__dot {
	position: absolute;
	top: 50%;
	width: 8px; height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 10px 3px rgba(214, 92, 154, .85);
	animation: afxTravel 2.4s ease-in-out infinite;
}
@keyframes afxTravel {
	0%, 100% { left: -4px; }
	50%      { left: calc(100% - 4px); }
}
.afx-link__mark {
	position: relative;
	font-size: 24px;
	filter: drop-shadow(0 3px 6px rgba(200, 80, 140, .35));
	animation: afxBeat 1.6s ease-in-out infinite;
}
@keyframes afxBeat {
	0%, 100% { transform: scale(1); }
	18%      { transform: scale(1.22); }
	36%      { transform: scale(1); }
	54%      { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
	.afx__medal { transform: none; opacity: 1; }
	.afx__title, .afx__line { opacity: 1; transform: none; }
	.afx-link__dot, .afx-link__mark, .afx-heart { animation: none; }
	.afx-heart { display: none; }
}


/* ==========================================================================
   相性のペア表示  2026-08-06
   白い小さなカードが2枚並ぶだけで、相性診断の見た目になっていなかった。
   キャラを大きくし、あなた=ピンク／相手=ブルーの額に入れ、
   背景にハートを散らして「相性を見ている」画面にする。
   ========================================================================== */
.cp-result__pair {
	position: relative;
	gap: 6px !important;
	padding: 20px 6px 16px;
	margin: 4px auto 28px !important;
	max-width: 540px;
	border-radius: 24px;
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 182, 213, .34) 0 9px, transparent 10px),
		radial-gradient(circle at 88% 26%, rgba(190, 170, 240, .30) 0 7px, transparent 8px),
		radial-gradient(circle at 22% 86%, rgba(190, 170, 240, .26) 0 6px, transparent 7px),
		radial-gradient(circle at 78% 88%, rgba(255, 182, 213, .28) 0 8px, transparent 9px),
		linear-gradient(150deg, #fff5fa 0%, #f7f0ff 55%, #fdeef6 100%);
	border: 2px solid #f2dcec;
	box-shadow: 0 10px 28px rgba(150, 100, 160, .12);
	overflow: hidden;
}
.cp-result__pair::before,
.cp-result__pair::after {
	content: "♡";
	position: absolute;
	color: rgba(214, 92, 154, .16);
	pointer-events: none;
	line-height: 1;
}
.cp-result__pair::before { top: 8px; left: 12px; font-size: 34px; transform: rotate(-14deg); }
.cp-result__pair::after  { bottom: 6px; right: 14px; font-size: 46px; transform: rotate(12deg); }

.cp-result__pair-card {
	position: relative;
	max-width: 168px !important;
	padding: 12px 8px 13px !important;
	border-radius: 20px !important;
	background: #fff !important;
	border: 2.5px solid #f4c9dd;
	box-shadow: 0 8px 20px rgba(160, 90, 150, .16) !important;
	gap: 2px !important;
}
/* 2枚目（相手）は青系にして、どちらの結果か一目で分かるようにする */
.cp-result__pair-card:last-of-type { border-color: #c6d5f2; }
.cp-result__pair-card::before {
	/* キャラを選んだときは名前を出すため、JSが渡す data-label を使う */
	content: attr(data-label);
	position: absolute;
	top: -10px; left: 50%;
	transform: translateX(-50%);
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .16em;
	color: #fff;
	background: linear-gradient(135deg, #e8709f, #c0418a);
	border-radius: 999px;
	padding: 3px 12px;
	box-shadow: 0 3px 9px rgba(192, 65, 138, .3);
	/* キャラ名が長いとカード幅を超えるので、はみ出しは省略する */
	max-width: 92%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cp-result__pair-card:last-of-type::before {
	background: linear-gradient(135deg, #6f9ae0, #4a6fc0);
	box-shadow: 0 3px 9px rgba(74, 111, 192, .3);
}
/* キャラを大きく。小さいままだと誰と誰の相性か伝わらない */
.cp-result__pair-card img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 15px !important;
	margin-bottom: 9px !important;
	background: linear-gradient(160deg, #fff5fa, #f6f0ff) !important;
	box-shadow: inset 0 2px 10px rgba(150, 100, 160, .12);
}
.cp-result__pair-code {
	font-size: 0.72rem !important;
	letter-spacing: .06em;
	background: #f6edfb;
	border-radius: 999px;
	padding: 2px 10px;
}
.cp-result__pair-name {
	font-size: 0.9rem !important;
	font-weight: 900 !important;
	line-height: 1.35;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.cp-result__pair-sub { font-size: 0.68rem !important; margin-top: 2px !important; }
/* 二人をつなぐところ */
.cp-result__pair-heart.afx-link {
	width: 40px !important;
	height: 40px !important;
	font-size: 1.5rem !important;
}
@media (max-width: 360px) {
	.cp-result__pair { padding: 18px 3px 14px; }
	.cp-result__pair-card { padding: 10px 5px 11px !important; }
	.cp-result__pair-name { font-size: 0.82rem !important; }
	.cp-result__pair-heart.afx-link { width: 30px !important; }
}

/* ビッグ5相性のシェアボタン（キャラ入りの画像ボタン） */
.b5shbtn {
	display: block;
	max-width: 380px;
	margin: 0 auto 14px;
	line-height: 0;
	transition: transform .16s ease, filter .16s ease;
}
.b5shbtn img { width: 100%; height: auto; filter: drop-shadow(0 8px 18px rgba(190, 120, 170, .34)); }
.b5shbtn:active { transform: translateY(2px) scale(.99); }
@media (prefers-reduced-motion: reduce) { .b5shbtn { transition: none; } }


/* ==========================================================================
   相性結果の体裁とビッグ5シェアボタンの演出  2026-08-06
   もとは JS から文字列で差し込んでいたが、JSが動くまでスタイルが当たらず
   一瞬崩れて見えること、style.css を検索しても出てこないことから、ここへ移した。
   （js/aisho-fx.js と js/big5.js の注入は削除済み）
   ========================================================================== */

/* --- 相性の結果を1枚の札に見せる --- */
.afx--card {
	position:relative;
	max-width:520px;
	padding:46px 18px 26px;
	margin:6px auto 20px;
	border-radius:28px;
	background:radial-gradient(circle at 18% 12%,rgba(255,255,255,.85),transparent 46%),radial-gradient(circle at 84% 88%,rgba(255,214,235,.6),transparent 52%),linear-gradient(155deg,#fff6fb 0%,#f7f0ff 48%,#ffeef6 100%);
	border:2px solid #f0d8ea;
	box-shadow:0 16px 40px rgba(150,95,155,.16),inset 0 0 0 6px rgba(255,255,255,.55);
}

.afx--card::before,.afx--card::after {
	content:"";
	position:absolute;
	width:56px;
	height:56px;
	pointer-events:none;
	border:2px solid rgba(214,92,154,.28);
	border-radius:20px;
}

.afx--card::before {
	top:10px;
	left:10px;
	border-right:0;
	border-bottom:0;
}

.afx--card::after {
	bottom:10px;
	right:10px;
	border-left:0;
	border-top:0;
}

.afx__head {
	position:absolute;
	top:-1px;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	align-items:center;
	gap:8px;
	background:linear-gradient(135deg,#e8709f,#a94aa6);
	color:#fff;
	font-size:12.5px;
	font-weight:900;
	letter-spacing:.14em;
	padding:9px 26px 8px;
	border-radius:0 0 16px 16px;
	box-shadow:0 5px 14px rgba(170,70,140,.3);
	white-space:nowrap;
}

.afx__head i {
	font-style:normal;
	font-size:13px;
}

.afx__burst {
	position:absolute;
	top:52%;
	left:50%;
	width:290px;
	height:290px;
	margin:-145px 0 0 -145px;
	pointer-events:none;
	background:conic-gradient(from 0deg,rgba(255,214,120,.24) 0 6deg,transparent 6deg 24deg);
	border-radius:50%;
	opacity:0;
	transition:opacity .6s .3s;
	animation:afxSpin 22s linear infinite;
}

.afx.is-done .afx__burst {
	opacity:1;
}

@keyframes afxSpin {
to {
	transform:rotate(360deg)}

}

.afx__gauge {
	width:min(224px,60vw);
}

.afx__val b {
	background:linear-gradient(140deg,var(--afx-c1,#c58bea),var(--afx-c2,#8b6cc1));
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
}

.afx__cap {
	letter-spacing:.22em;
	color:#b79ccb;
}

.afx__medal {
	width:62px;
	height:62px;
	top:-10px;
	right:-10px;
}

.afx__medal b {
	font-size:25px;
}

.afx__medal::after {
	content:"";
	position:absolute;
	bottom:-11px;
	left:50%;
	transform:translateX(-50%);
	border-left:11px solid transparent;
	border-right:11px solid transparent;
	border-top:14px solid var(--afx-c2,#8b6cc1);
}

.afx__title {
	font-size:21px;
	margin-top:18px;
}

.afx__line {
	position:relative;
	display:inline-block;
	margin-top:12px;
	background:#fff;
	border:2px solid #f4c9dd;
	border-radius:16px;
	padding:10px 18px;
	font-size:13.5px;
	color:#a4489a;
	box-shadow:0 5px 14px rgba(170,90,150,.14);
}

.afx__line::before,.afx__line::after {
	content:"";
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	border-left:9px solid transparent;
	border-right:9px solid transparent;
}

.afx__line::before {
	top:-11px;
	border-bottom:11px solid #f4c9dd;
}

.afx__line::after {
	top:-8px;
	border-bottom:11px solid #fff;
}

@media(max-width:360px) {
.afx--card {
	padding:42px 12px 22px}

.afx__title {
	font-size:18px}

.afx__line {
	font-size:12.5px;
	padding:9px 14px}

}

@media(prefers-reduced-motion:reduce) {
.afx__burst {
	animation:none}

}
/* --- ビッグ5のシェアボタン（手紙を運ぶふくろう）の演出 --- */
.b5shbtn {
	position:relative;
	display:block;
	max-width:380px;
	margin:0 auto 14px;
	line-height:0;
	animation:b5shFly 3.4s ease-in-out infinite;
	transform-origin:22% 60%;
}

@keyframes b5shFly {
0%,100% {
	transform:translateY(0) rotate(-.5deg)}

50% {
	transform:translateY(-5px) rotate(.6deg)}

}

.b5shbtn img {
	width:100%;
	height:auto;
	position:relative;
	z-index:1;
}

.b5shbtn::after {
	content:"";
	position:absolute;
	top:14%;
	bottom:14%;
	left:30%;
	right:2%;
	z-index:2;
	border-radius:999px;
	pointer-events:none;
	overflow:hidden;
	background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.72) 47%,transparent 56%);
	background-size:260% 100%;
	background-position:130% 0;
	animation:b5shShine 3.4s ease-in-out infinite;
}

@keyframes b5shShine {
0%,55% {
	background-position:130% 0}

92%,100% {
	background-position:-40% 0}

}

.b5shbtn__sp {
	position:absolute;
	z-index:3;
	pointer-events:none;
	color:#ffd977;
	font-size:13px;
	line-height:1;
	text-shadow:0 0 8px rgba(255,214,120,.9);
	animation:b5shTwinkle 2.6s ease-in-out infinite;
}

@keyframes b5shTwinkle {
0%,100% {
	opacity:0;
	transform:scale(.4) rotate(0)}

45% {
	opacity:1;
	transform:scale(1.2) rotate(28deg)}

}

.b5shbtn:active {
	transform:translateY(3px) scale(.985);
}

@media(prefers-reduced-motion:reduce) {
.b5shbtn,.b5shbtn::after,.b5shbtn__sp {
	animation:none}

.b5shbtn__sp {
	opacity:.9}

}

/* バックタイプの図鑑カード。項目行をやめ、名前の下にスタイルだけを置く形に調整 */
.b5ura__style-wrap {
	margin: 0 0 2px;
	text-align: center;
}
.b5ura__desc {
	border-top: 1px solid rgba(255, 255, 255, .11);
	margin: 12px 0 0;
	padding: 13px 2px 0;
}


/* --- MBTIのシェアボタン（スマホを見る黒猫・ネオン）の演出 --- */
.msshbtn {
	position: relative;
	display: block;
	max-width: 380px;
	margin: 0 auto 6px;
	line-height: 0;
	animation: msshFloat 3.6s ease-in-out infinite;
}
@keyframes msshFloat {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
.msshbtn img {
	width: 100%;
	height: auto;
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .32));
	animation: msshNeon 2.8s ease-in-out infinite;
}
/* シアンのネオンが呼吸する */
@keyframes msshNeon {
	0%, 100% { filter: drop-shadow(0 6px 16px rgba(0,0,0,.32)) drop-shadow(0 0 6px rgba(120,235,235,.35)); }
	50%      { filter: drop-shadow(0 6px 16px rgba(0,0,0,.32)) drop-shadow(0 0 16px rgba(120,235,235,.85)); }
}
/* 帯の上を光が走る。猫のいる左28%は避ける */
.msshbtn::after {
	content: "";
	position: absolute;
	top: 18%;
	bottom: 18%;
	left: 30%;
	right: 3%;
	z-index: 2;
	border-radius: 999px;
	pointer-events: none;
	overflow: hidden;
	background: linear-gradient(100deg, transparent 38%, rgba(190,255,255,.5) 47%, transparent 56%);
	background-size: 260% 100%;
	background-position: 130% 0;
	animation: msshShine 3.6s ease-in-out infinite;
}
@keyframes msshShine {
	0%, 58% { background-position: 130% 0; }
	92%, 100% { background-position: -40% 0; }
}
.msshbtn__sp {
	position: absolute;
	z-index: 3;
	pointer-events: none;
	color: #9df3f3;
	font-size: 13px;
	line-height: 1;
	text-shadow: 0 0 9px rgba(140, 240, 240, .95);
	animation: msshTwinkle 2.6s ease-in-out infinite;
}
@keyframes msshTwinkle {
	0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
	45%      { opacity: 1; transform: scale(1.2) rotate(28deg); }
}
.msshbtn:active { transform: translateY(3px) scale(.985); }
@media (prefers-reduced-motion: reduce) {
	.msshbtn, .msshbtn img, .msshbtn::after, .msshbtn__sp { animation: none; }
	.msshbtn__sp { opacity: .9; }
}


/* YOU / PARTNER のリボンが、浮遊するキャラ画像の下に隠れないようにする。
   画像は transform で重なり順が上がるので、リボン側を明示的に前面へ出す。 */
.cp-result__pair-card { z-index: 1; }
.cp-result__pair-card::before {
	z-index: 4;
	top: -13px;
}
.cp-result__pair-card img {
	position: relative;
	z-index: 1;
}


/* 裏の結果のシェアボタン（青い狐火）。表はあたたかい光、裏はシアンのネオンで分ける。
   表より一回り小さくして、主役（表の結果）と役割の差をつける。
   炎の精なので、イーグルのような羽ばたき（回転）ではなく、まっすぐ漂わせる。 */
.b5shbtn--back {
	/* 絵の縦横比が 3.3:1（表は 4.6:1）で縦長なので、同じ幅だと必ず表より大きく見える。
	   表の高さ(約82px)を下回る幅まで絞って、主役（表）との差をはっきりさせる。 */
	max-width: 254px;
	margin-top: 2px;
	animation: b5shFlame 3.1s ease-in-out infinite;
}
/* 炎の揺らめき。イーグルの羽ばたき（上下＋回転）とは別の動きにする */
@keyframes b5shFlame {
	0%   { transform: translate(0, 0) scale(1, 1); }
	22%  { transform: translate(-1.5px, -1.5px) scale(1.012, .992); }
	46%  { transform: translate(1.2px, -3px) scale(.99, 1.016); }
	70%  { transform: translate(-.8px, -1px) scale(1.008, .996); }
	100% { transform: translate(0, 0) scale(1, 1); }
}
.b5shbtn--back img {
	animation: b5shNeonBack 2.8s ease-in-out infinite;
}
@keyframes b5shNeonBack {
	0%, 100% { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .3)) drop-shadow(0 0 6px rgba(110, 220, 255, .35)); }
	50%      { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .3)) drop-shadow(0 0 17px rgba(110, 220, 255, .9)); }
}
.b5shbtn--back::after {
	background: linear-gradient(100deg, transparent 38%, rgba(190, 245, 255, .55) 47%, transparent 56%);
}
.b5shbtn--back .b5shbtn__sp {
	color: #a5eaff;
	text-shadow: 0 0 9px rgba(140, 225, 255, .95);
	animation-duration: 1.9s;
}
@media (prefers-reduced-motion: reduce) {
	.b5shbtn--back, .b5shbtn--back img { animation: none; }
}


/* トップ最上部の累計診断数。社会的証明は本文より先に見せる */
.ms-hero2__count {
	display: inline-block;
	margin: 0 auto 10px;
	padding: 6px 18px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	border: 1.5px solid rgba(214, 92, 154, .3);
	font-size: 13px;
	font-weight: 900;
	color: #8b4a86;
	box-shadow: 0 3px 10px rgba(150, 90, 150, .16);
}
.ms-hero2__count strong { font-size: 17px; color: #c0418a; }


/* 診断前のバナー（ビッグ5と同じ形）。バナーに大きなタイトルが入っているので、
   本文側の見出しは控えめにして二重に見えないようにする。 */
/* 診断前の背景。既存の quiz-bg.webp を敷いたままバナーを置くと
   「ページ背景 + 絵柄の背景 + バナー」の3枚重ねになって落ち着かない。
   ビッグ5の診断前と同じく、内側はグラデーションだけにして絵柄はバナー1枚に絞る。 */
.ms-quiz__screen--active .ms-quiz__intro:has(.ms-quiz-banner) {
	background-image: linear-gradient(135deg, #fdeef5 0%, #f3ecfb 45%, #ded1f2 100%);
}
.ms-quiz-banner {
	display: block;
	margin: 0 auto 14px;
	max-width: 640px;
}
.ms-quiz-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(150, 110, 200, .16);
}
.ms-quiz-banner + .ms-quiz__intro-title {
	font-size: 1.15rem;
	margin-top: 4px;
}
.ms-quiz-banner + .ms-quiz__intro-title span { font-size: .78em !important; }
@media (max-width: 600px) {
	.ms-quiz-banner { margin: 0 auto 12px; }
	.ms-quiz-banner img { border-radius: 14px; }
	.ms-quiz-banner + .ms-quiz__intro-title { font-size: 1.02rem; }
}

/* トップ最上部の図鑑導線。診断（主導線）より一段小さく、
   画像ボタンと張り合わないよう枠線だけの控えめな体裁にする */
.ms-hero2__sub {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 10px 0 0;
}
.ms-hero2__sublink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	border: 1.5px solid rgba(139, 108, 193, .34);
	font-size: 12.5px;
	font-weight: 800;
	color: #6b4f9e;
	text-decoration: none;
	line-height: 1.3;
	box-shadow: 0 2px 8px rgba(139, 108, 193, .14);
	transition: transform .18s, box-shadow .18s;
}
.ms-hero2__sublink:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 14px rgba(139, 108, 193, .26);
	color: #6b4f9e;
}
@media (min-width: 768px) {
	.ms-hero2__sublink { font-size: 14px; padding: 9px 20px; }
}
/* 補足は主文と同じ太さだと読点なしで続いて見えるので一段落とす */
.ms-hero2__sublink-note {
	font-size: .84em;
	font-weight: 700;
	color: #9585b8;
}

/* ==========================================================================
   インスタ（ストーリーズ）用シェア画像の導線
   これまで canvas は display:none で、入口も「📸 画像で保存」の文字だけだった。
   作った1枚を実物で見せてから押させる。
   ========================================================================== */
.ms-insta {
	max-width: 540px;
	margin: 20px auto 4px;
	padding: 20px 18px 18px;
	border-radius: 20px;
	background: linear-gradient(150deg, #fff7fb 0%, #f7edfb 55%, #ede4fb 100%);
	border: 2px solid #f0d8ea;
	text-align: center;
	box-shadow: 0 6px 20px rgba(150, 90, 150, .1);
}
.ms-insta__ttl {
	font-size: 15.5px;
	font-weight: 900;
	color: #8b4a86;
	margin: 0 0 4px;
}
.ms-insta__lead {
	font-size: 12px;
	font-weight: 700;
	color: #8b7f9d;
	line-height: 1.7;
	margin: 0 0 14px;
}
.ms-insta__canvas {
	display: block;
	width: 100%;
	max-width: 250px;
	height: auto;
	margin: 0 auto 15px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(120, 80, 140, .22);
}
.ms-insta__btn {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto 9px;
	padding: 15px 20px;
	border: 0;
	border-radius: 999px;
	/* Instagram のブランドグラデーションに寄せて、何のボタンか一目で分かるようにする */
	background: linear-gradient(95deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
	color: #fff;
	font-size: 15.5px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(200, 60, 130, .32);
	transition: transform .18s, box-shadow .18s;
}
.ms-insta__btn:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(200, 60, 130, .4); }
.ms-insta__btn:active { transform: translateY(1px); }
.ms-insta__save {
	display: inline-block;
	padding: 9px 22px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #ddc9e8;
	color: #7a5c9e;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}
.ms-insta__save:hover { background: #faf4fd; }
.ms-insta__note {
	font-size: 11px;
	color: #9d92ad;
	margin: 10px 0 0;
	line-height: 1.7;
}

/* ==========================================================================
   愛着プロファイル精密診断への導線
   他の導線は白カード＋紫枠で見た目が揃っており、専門版だけ別格に見えない。
   診断TOPの写真をそのまま使い、暗色＋金でこの診断だけの質感にする。
   ========================================================================== */
.ms-apcta {
	display: block;
	max-width: 540px;
	margin: 22px auto;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	background: linear-gradient(168deg, #2e2344 0%, #1d1629 100%);
	border: 1px solid rgba(226, 190, 130, .34);
	box-shadow: 0 14px 38px rgba(20, 12, 34, .34);
	transition: transform .2s, box-shadow .2s;
}
.ms-apcta:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(20, 12, 34, .44); }
.ms-apcta__img {
	display: block;
	width: 100%;
	height: auto;
	/* 写真の下端をカードの闇に溶かして、文字と地続きに見せる */
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.ms-apcta__body {
	display: block;
	padding: 0 20px 22px;
	margin-top: -34px;
	position: relative;
	text-align: center;
}
.ms-apcta__label {
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .18em;
	color: #e2be82;
	margin: 0 0 7px;
}
.ms-apcta__ttl {
	display: block;
	font-size: 17px;
	font-weight: 900;
	color: #f5f0fb;
	line-height: 1.55;
	margin: 0 0 9px;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "BIZ UDPMincho", serif;
}
.ms-apcta__desc {
	display: block;
	font-size: 12.5px;
	color: #c9bde0;
	line-height: 1.95;
	margin: 0 0 15px;
	text-align: left;
}
.ms-apcta__btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 999px;
	background: linear-gradient(120deg, #e2be82, #f0d9ab);
	color: #2a2038;
	font-size: 13.5px;
	font-weight: 900;
	box-shadow: 0 6px 18px rgba(226, 190, 130, .28);
}
@media (max-width: 400px) {
	.ms-apcta__ttl { font-size: 15.5px; }
	.ms-apcta__desc { font-size: 12px; }
	.ms-apcta__btn { font-size: 12.5px; padding: 12px 22px; }
}

/* 精密診断のシェアブロックは、この診断だけ暗色＋金で統一する */
.ms-insta--cinema {
	background: linear-gradient(150deg, rgba(60, 44, 88, .94), rgba(28, 21, 41, .96));
	border: 1px solid rgba(226, 190, 130, .34);
	box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
}
.ms-insta--cinema .ms-insta__ttl { color: #f0d9ab; }
.ms-insta--cinema .ms-insta__lead { color: #b9a9d8; }
.ms-insta--cinema .ms-insta__save {
	background: rgba(255, 255, 255, .07);
	border-color: rgba(205, 183, 238, .34);
	color: #ddd3ef;
}
.ms-insta--cinema .ms-insta__save:hover { background: rgba(255, 255, 255, .13); }
.ms-insta__x {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	color: #e2be82;
	text-decoration: none;
	border-bottom: 1.5px dotted rgba(226, 190, 130, .55);
	padding-bottom: 2px;
}


/* MBTI・ビッグ5のインスタ用シェア画像は、内容の密度が低いため作り直し中。
   それまで非公開にする（愛着プロファイル版 --cinema は対象外）。 */

/* ==========================================================================
   コラム中盤の診断CTA
   これまで導線は記事末尾にしかなく、しかも画像が無かったため見られていなかった。
   診断結果画面と同じ「画像＋見出し＋ボタン」の形で、本文の途中に置く。
   ========================================================================== */
.ms-midcta {
	max-width: 620px;
	margin: 30px auto;
}
.ms-midcta__link {
	display: block;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	background: linear-gradient(168deg, #2e2344 0%, #1d1629 100%);
	border: 1px solid rgba(226, 190, 130, .34);
	box-shadow: 0 14px 38px rgba(20, 12, 34, .3);
	transition: transform .2s, box-shadow .2s;
}
.ms-midcta__link:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(20, 12, 34, .42); }
.ms-midcta__img {
	display: block;
	width: 100%;
	height: auto;
	/* 写真の下端をカードの闇に溶かして、見出しと地続きに見せる */
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.ms-midcta__body {
	display: block;
	position: relative;
	margin-top: -36px;
	padding: 0 22px 24px;
	text-align: center;
}
.ms-midcta__label {
	display: block;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .18em;
	color: #e2be82;
	margin: 0 0 8px;
}
.ms-midcta__title {
	display: block;
	font-size: 19px;
	font-weight: 900;
	line-height: 1.55;
	color: #f5f0fb;
	margin: 0 0 10px;
}
.ms-midcta__lead {
	display: block;
	font-size: 12.5px;
	line-height: 1.95;
	color: #c9bde0;
	text-align: left;
	margin: 0 0 16px;
}
.ms-midcta__btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	background: linear-gradient(120deg, #e2be82, #f0d9ab);
	color: #2a2038;
	font-size: 14px;
	font-weight: 900;
	box-shadow: 0 6px 18px rgba(226, 190, 130, .3);
}
@media (max-width: 400px) {
	.ms-midcta__title { font-size: 17px; }
	.ms-midcta__lead { font-size: 12px; }
	.ms-midcta__btn { font-size: 13px; padding: 13px 22px; }
}

/* ==========================================================================
   このタイプだけが共感できるワード集（シェア画像）
   ========================================================================== */
.ms-wc {
	max-width: 540px;
	margin: 20px auto 4px;
	padding: 20px 18px 18px;
	border-radius: 20px;
	background: #fff;
	border: 2px solid #ede2f6;
	text-align: center;
	box-shadow: 0 6px 20px rgba(150, 90, 150, .1);
}
.ms-wc__ttl { font-size: 15.5px; font-weight: 900; color: #6b3fa0; margin: 0 0 4px; }
.ms-wc__lead { font-size: 12px; font-weight: 700; color: #8b7f9d; margin: 0 0 14px; }
.ms-wc__canvas {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	margin: 0 auto 15px;
	border-radius: 12px;
	border: 1px solid #ece4f4;
	background: #fff;
	box-shadow: 0 6px 18px rgba(120, 80, 140, .16);
}
.ms-wc__btn {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto 9px;
	padding: 15px 20px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(120deg, #8b6cc1, #d65c9a);
	color: #fff;
	font-size: 15.5px;
	font-weight: 900;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(150, 90, 170, .3);
}
.ms-wc__save {
	display: inline-block;
	padding: 9px 22px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid #ddc9e8;
	color: #7a5c9e;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}
.ms-wc__tabs { display: flex; gap: 6px; justify-content: center; margin: 0 0 12px; }
.ms-wc__tab {
	border: 1.5px solid #ddc9e8;
	background: #fff;
	color: #7a5c9e;
	font-size: 12.5px;
	font-weight: 800;
	border-radius: 999px;
	padding: 8px 14px;
	cursor: pointer;
}
.ms-wc__tab.is-active { background: linear-gradient(120deg, #8b6cc1, #d65c9a); border-color: transparent; color: #fff; }
.ms-wc__canvas--h { max-width: 340px; }
.ms-wc__btn--x {
	background: #111;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .26);
}
.ms-wc__note { font-size: 11px; color: #9d92ad; line-height: 1.7; margin: 10px 0 0; }
/* .ms-wc__canvas の display:block が hidden 属性に勝ってしまい、
   縦横の2枚が同時に表示されていた。属性側を明示的に優先させる。 */
.ms-wc__canvas[hidden] { display: none; }

/* ===== 診断結果のぼかし（2026-08-10）=====
   買った人は body に .ms-unlocked が付き、同じ要素がそのまま読めるようになる。
   ぼかしを個別のstyle属性で書くと解除できないので、必ずこのクラスを使う。 */
.ms-lock{filter:blur(3.5px);-webkit-filter:blur(3.5px);user-select:none;pointer-events:none;}
.ms-unlocked .ms-lock{filter:none;-webkit-filter:none;user-select:auto;pointer-events:auto;}
.ms-unlocked .ms-lock-cta{display:none;}
/* ぼかしの直後に必ず置く「続きを読む」。行き止まりにしない */
.ms-lock-cta{display:block;text-align:right;margin:10px 0 0;}
.ms-lock-cta a{font-size:13.5px;font-weight:900;color:#c0418a;text-decoration:none;}


/* 2026-08-11: 診断が終わったあとも「100%」の帯と数字が残り、結果の邪魔になっていた。
   結果画面に入ったら body に .ms-quiz-done が付くので、まとめて隠す。 */
.ms-quiz-done .ms-quiz__progress,
.ms-quiz-done .ms-quiz__progress-text{display:none !important;}

/* ===== トップの法人向けPR枠（2026-08-13） =====
   個人の導線を邪魔しないよう、全コンテンツの後ろ・診断CTAの手前に置く。
   落ち着いた配色にして、消費者向けの華やかさとは区別する。 */
.fp-biz{padding:52px 0 56px;background:linear-gradient(165deg,#f4f7fb 0%,#eef3fa 60%,#e9eff8 100%);border-top:1px solid #dfe6f0}
.fp-biz__eyebrow{margin:0 0 12px;font-size:11px;font-weight:900;letter-spacing:.16em;color:#5a76a0}
.fp-biz__title{margin:0 0 14px;font-size:clamp(23px,5.6vw,36px);line-height:1.45;font-weight:900;color:#16202e}
.fp-biz__title b{color:#1f6feb}
.fp-biz__lead{margin:0 0 24px;font-size:14.5px;line-height:2;color:#41526a;max-width:680px}
.fp-biz__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 8px}
.fp-biz__shot{margin:0}
.fp-biz__shot img{display:block;width:100%;height:auto;border-radius:10px;background:#0d1522;box-shadow:0 10px 24px rgba(18,28,41,.16)}
.fp-biz__shot figcaption{margin-top:7px;text-align:center;font-size:10.5px;font-weight:800;color:#6f7f93;line-height:1.5}
.fp-biz__shotnote{margin:10px 0 24px;font-size:11px;color:#78889c;line-height:1.8}
.fp-biz__merits{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.fp-biz__merits li{background:#fff;border:1px solid #dfe6f0;border-radius:13px;padding:17px 19px}
.fp-biz__merits b{display:block;font-size:15px;font-weight:900;color:#16202e;line-height:1.55;margin-bottom:7px}
.fp-biz__merits span{display:block;font-size:13px;line-height:1.95;color:#41526a}
.fp-biz__btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 30px;border-radius:11px;background:#1f6feb;color:#fff;text-decoration:none;font-size:15.5px;font-weight:900;box-shadow:0 10px 26px rgba(31,111,235,.3);transition:transform .18s ease,box-shadow .18s ease}
.fp-biz__btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(31,111,235,.38);color:#fff}
.fp-biz__note{margin:14px 0 0;font-size:11.5px;line-height:1.85;color:#78889c}
@media(min-width:820px){
	.fp-biz{padding:76px 0 80px}
	.fp-biz__shots{grid-template-columns:repeat(3,minmax(0,220px));gap:18px}
	.fp-biz__merits{grid-template-columns:repeat(2,1fr);gap:14px}
	.fp-biz__lead{font-size:16px}
}

/* ===== トップの作品別キャラ診断（2026-08-13） =====
   シェアで広がる入口。カードは画像を主役にして、作品の空気で選べるようにする。 */
.fp-works{padding:48px 0 52px;background:linear-gradient(170deg,#fbf8ff 0%,#f5f0fb 60%,#f2f7f5 100%)}
.fp-works__eyebrow{margin:0 0 10px;font-size:11px;font-weight:900;letter-spacing:.18em;color:#8b6cc1;text-align:center}
.fp-works__title{margin:0 0 12px;text-align:center;font-size:clamp(22px,5.4vw,34px);line-height:1.45;font-weight:900;color:#3f3349}
.fp-works__title b{color:#7d55b8}
.fp-works__lead{margin:0 auto 24px;max-width:640px;text-align:center;font-size:14px;line-height:2;color:#5f5468}
.fp-works__grid{display:grid;grid-template-columns:1fr;gap:12px}
.fp-works__card{position:relative;display:grid;grid-template-columns:104px 1fr;align-items:stretch;
	background:#fff;border:1px solid #ebe2f2;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
	box-shadow:0 6px 20px rgba(80,58,110,.08);transition:transform .18s ease,box-shadow .18s ease}
.fp-works__card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(80,58,110,.16)}
.fp-works__art{display:block;overflow:hidden;background:#efeaf6}
.fp-works__art img{display:block;width:100%;height:100%;object-fit:cover}
.fp-works__body{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:16px 16px 16px 15px}
.fp-works__name{font-size:16px;font-weight:900;line-height:1.45;color:#3f3349}
.fp-works__meta{display:flex;flex-wrap:wrap;gap:6px}
.fp-works__meta i,.fp-works__meta em{font-style:normal;font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px}
.fp-works__meta i{background:#f1ecf8;color:#6b4a9e}
.fp-works__meta em{background:#eef6f2;color:#2f7a58}
.fp-works__card--jujutsu .fp-works__meta em{background:#f1eafb;color:#5b46a0}
.fp-works__card--hunterhunter .fp-works__meta em{background:#eaf6ee;color:#1f6b45}
.fp-works__card--haikyu .fp-works__meta em{background:#fdeeda;color:#a8511a}
.fp-works__card--chiikawa .fp-works__meta em{background:#fdeaf2;color:#b2417a}
.fp-works__note{margin:20px 0 14px;text-align:center;font-size:12px;line-height:1.85;color:#7d7288}
.fp-works__more{display:block;text-align:center;font-size:13.5px;font-weight:900;color:#6b4a9e;text-decoration:none}
.fp-works__more:hover{text-decoration:underline}
@media(min-width:700px){
	.fp-works{padding:72px 0 76px}
	.fp-works__grid{grid-template-columns:repeat(2,1fr);gap:16px}
	.fp-works__card{grid-template-columns:132px 1fr}
	.fp-works__name{font-size:17px}
}
@media(min-width:1000px){
	.fp-works__grid{grid-template-columns:repeat(3,1fr)}
	.fp-works__card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
	.fp-works__art{height:132px}
	.fp-works__body{padding:16px 18px 18px}
}

/* ===== アダルトチルドレン診断の結果ヒーロー（2026-08-13） =====
   タイプごとの写真を主役にする。以前は白い幕を .93 でかけていて写真が見えなかった。 */
.ac-hero{position:relative;border-radius:22px;overflow:hidden;background-size:cover;background-position:center;
	box-shadow:0 16px 40px rgba(60,36,90,.24)}
.ac-hero__inner{position:relative;padding:26px 22px 30px;text-align:center;color:#3b2f4d;background:#fff}
.ac-hero__eyebrow{margin:0 0 12px;font-size:11.5px;font-weight:900;letter-spacing:.16em;color:#d9c9f0}
.ac-hero__name{margin:0 0 4px;font-size:clamp(26px,6.4vw,38px);font-weight:900;line-height:1.3;
	color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.ac-hero__en{margin:0 0 16px;font-size:11px;font-weight:800;letter-spacing:.2em;color:#bcaad6}
.ac-hero__catch{margin:0;font-size:clamp(14px,3.6vw,17px);font-weight:800;line-height:1.85;color:#f1eaf9}
.ac-hero__double{display:inline-block;margin:18px 0 0;padding:7px 16px;border-radius:999px;
	background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
	font-size:12px;font-weight:800;color:#fff}
@media(min-width:700px){.ac-hero__inner{padding:34px 30px 38px}}

/* AC診断の結果ヒーロー：写真は無加工で見せ、文字は下のパネルに置く */
.ac-hero{background:#fff;border:1px solid #ece2f5}
.ac-hero__photo{position:relative;line-height:0;background:#241a33}
.ac-hero__photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ac-hero__photo:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:34%;
	background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.ac-hero__inner{border-top:0}
.ac-hero__eyebrow{margin:0 0 10px;font-size:11.5px;font-weight:900;letter-spacing:.16em;color:#9184a8}
.ac-hero__name{margin:0 0 4px;font-size:clamp(26px,6.4vw,38px);font-weight:900;line-height:1.3;
	color:var(--ac-c,#3b2f4d);text-shadow:none}
.ac-hero__en{margin:0 0 16px;font-size:11px;font-weight:800;letter-spacing:.2em;color:#a99cbb}
.ac-hero__catch{margin:0;font-size:clamp(14px,3.6vw,17px);font-weight:800;line-height:1.85;color:#4a3f5c}
.ac-hero__double{display:inline-block;margin:18px 0 0;padding:7px 16px;border-radius:999px;
	background:#f5f0fa;border:1px solid #e2d7ef;font-size:12px;font-weight:800;color:#6b3fa0}

/* ===== トップ：関係を扱う診断（2026-08-13） =====
   作品診断カードのCSSを流用したら絵が切れて崩れたので、絵に頼らない作りにする。
   番号と問いで読ませ、診断名は最後に置く（先に名前を出すと広告に見える）。 */
.fp-next{padding:46px 14px 50px;background:linear-gradient(180deg,#faf7fd 0%,#fff 100%)}
.fp-next__eyebrow{
	margin:0 0 8px;text-align:center;font:900 11px/1 Poppins,sans-serif;
	letter-spacing:.2em;color:#8a6fb8}
.fp-next__title{
	margin:0 0 12px;text-align:center;font-size:clamp(21px,5.4vw,30px);font-weight:900;
	line-height:1.5;color:#2f2838}
.fp-next__title b{color:#6b3fa0}
.fp-next__lead{
	max-width:620px;margin:0 auto 22px;text-align:center;
	font-size:13.5px;line-height:2;color:#5f5570}
.fp-next__list{max-width:660px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.fp-next__row{
	display:flex;align-items:center;gap:14px;
	padding:16px 16px;border-radius:16px;background:#fff;
	border:1.5px solid #ece5f5;text-decoration:none;
	box-shadow:0 6px 18px rgba(48,34,72,.06);
	transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.fp-next__row:hover{
	transform:translateY(-2px);box-shadow:0 12px 26px rgba(48,34,72,.12);border-color:#d8cce9}
.fp-next__num{
	flex:0 0 auto;font:900 15px/1 Poppins,sans-serif;color:#c3b2dd;letter-spacing:.02em}
.fp-next__body{flex:1 1 auto;min-width:0}
.fp-next__tag{
	display:inline-block;margin:0 0 6px;padding:3px 10px;border-radius:999px;
	background:#f3edfa;color:#7a5fa8;font-size:10.5px;font-weight:900;letter-spacing:.04em}
.fp-next__q{
	display:block;font-size:14.5px;font-weight:900;line-height:1.65;color:#2f2838}
.fp-next__name{
	display:block;margin:5px 0 0;font-size:11.5px;font-weight:700;color:#8a7f9c}
.fp-next__go{flex:0 0 auto;font-size:17px;font-weight:900;color:#6b3fa0}
.fp-next__note{
	max-width:660px;margin:18px auto 0;text-align:center;
	font-size:11.5px;line-height:1.9;color:#8a7f9c}
.fp-next__more{
	display:block;width:fit-content;margin:12px auto 0;
	font-size:12.5px;font-weight:900;color:#6b3fa0;text-decoration:none}
.fp-next__more:hover{text-decoration:underline}
@media(max-width:400px){
	.fp-next{padding:38px 12px 42px}
	.fp-next__row{padding:14px 13px;gap:11px}
	.fp-next__q{font-size:13.5px}
}

/* ===== 診断ページ共通の出口（2026-08-13） =====
   各診断はJSの作りがばらばらなので、PHPで静的に置いている（inc/shindan-cta.php）。
   出すのは3つだけ：LINE登録・64タイプ診断・愛着コラム。 */
.sc-cta{display:block;max-width:620px;margin:34px auto 8px;padding:0 4px}
.sc-cta__keep{
	padding:17px 17px 15px;border-radius:16px;
	background:#f2fbf5;border:1.5px solid #bfe8cd}
.sc-cta__warn{margin:0 0 6px;font-size:12.5px;font-weight:900;color:#2f7d55;line-height:1.6}
.sc-cta__warn:before{content:"⚠ "}
.sc-cta__keeplead{margin:0 0 12px;font-size:12.5px;line-height:1.95;color:#3c5a49}
.sc-cta__line{
	display:block;text-align:center;text-decoration:none;
	padding:14px 16px;border-radius:999px;background:#06c755;color:#fff;
	font-size:14px;font-weight:900;box-shadow:0 6px 16px rgba(6,199,85,.28)}

.sc-cta__quiz{
	display:block;margin:14px 0 0;border-radius:18px;overflow:hidden;text-decoration:none;
	background:linear-gradient(160deg,#241b36,#3a2a52);
	border:1.5px solid rgba(232,182,76,.42);
	box-shadow:0 14px 34px rgba(24,14,44,.24)}
.sc-cta__quizimg{display:block;width:100%;height:auto}
.sc-cta__quizbody{display:block;padding:20px 18px 18px}
.sc-cta__label{
	display:block;margin:0 0 8px;text-align:center;
	font:900 10.5px/1 Poppins,sans-serif;letter-spacing:.16em;color:#e8b64c}
.sc-cta__quiztitle{
	display:block;margin:0 0 10px;text-align:center;
	font-size:clamp(17px,4.6vw,21px);font-weight:900;line-height:1.55;color:#fff}
.sc-cta__quizlead{
	display:block;margin:0 0 14px;font-size:13px;line-height:2;color:#e6dcf5}
.sc-cta__quizbtn{
	display:block;text-align:center;padding:14px 18px;border-radius:999px;
	background:linear-gradient(135deg,#e8b64c,#d65c9a);color:#1c1530;
	font-size:14.5px;font-weight:900;box-shadow:0 8px 22px rgba(232,182,76,.32)}

.sc-cta__reads{margin:16px 0 0}
.sc-cta__readshead{
	margin:0 0 10px;font-size:11.5px;font-weight:900;letter-spacing:.06em;color:#8a7f9c}
.sc-cta__read{
	display:block;margin:0 0 9px;padding:15px 16px;border-radius:14px;background:#fff;
	border:1.5px solid #ece5f5;text-decoration:none;
	box-shadow:0 5px 16px rgba(48,34,72,.06);
	transition:transform .16s ease,border-color .16s ease}
.sc-cta__read:hover{transform:translateY(-2px);border-color:#d8cce9}
.sc-cta__read b{display:block;font-size:14px;font-weight:900;line-height:1.65;color:#2f2838}
.sc-cta__read b:after{content:" →";color:#6b3fa0}
.sc-cta__read span{display:block;margin:5px 0 0;font-size:11.5px;font-weight:700;color:#8a7f9c}
@media(max-width:400px){
	.sc-cta__quizbody{padding:17px 15px 15px}
	.sc-cta__quizlead{font-size:12.5px}
	.sc-cta__read b{font-size:13.5px}
}

/* シェアのお願い。黙ってボタンを置くより、頼んだほうが押される。 */
.sc-cta__share{
	margin:16px 0 0;padding:15px 16px 14px;border-radius:16px;
	background:#fff;border:1.5px solid #e7e0f0;text-align:center;
	box-shadow:0 6px 18px rgba(48,34,72,.06)}
.sc-cta__sharelead{
	margin:0 0 11px;font-size:13px;font-weight:900;color:#3f3550;line-height:1.6}
.sc-cta__sharebtns{margin:0;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sc-cta__sharebtn{
	flex:1 1 auto;min-width:120px;max-width:210px;
	padding:12px 14px;border-radius:999px;text-decoration:none;
	font-size:13.5px;font-weight:900;line-height:1.2}
.sc-cta__sharebtn--x{background:#000;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.24)}
.sc-cta__sharebtn--line{background:#06c755;color:#fff;box-shadow:0 6px 16px rgba(6,199,85,.28)}
@media(max-width:400px){
	.sc-cta__sharebtn{flex:1 1 calc(50% - 4px);min-width:0}
}

/* ビッグ5の上部シェア。ボタンだけ置くより、一言頼んだほうが押される。 */
.b5-sharetop-ask{
	margin:0 0 8px;text-align:center;
	font-size:13px;font-weight:900;line-height:1.6;color:#3f3550}

/* ===== マイページの入口（2026-08-14） =====
   売れ筋の「無料で診断」には触らない。その左に小さく置くだけ。
   戻ってくる人のための入口なので、新規の導線と大きさで競わせない。 */
.ms-header__me{
	display:grid;place-items:center;width:36px;height:36px;flex:none;
	margin:0 2px;border-radius:50%;text-decoration:none;
	background:#fff;border:1.5px solid #e2d6f2;
	box-shadow:0 2px 8px rgba(43,36,64,.08)}
.ms-header__me span{font-size:16px;line-height:1}
.ms-header__me:hover{background:#faf7ff}
/* 入口が一つ増えたぶん、横が足りなくなる。
   実測（390px）：ロゴ170＋アイコン34＋ボタン102＋ハンバーガー90＝429。
   ロゴを縮めて幅を返す。アンカー側で止めないと、中の画像が効かない。 */
@media (max-width:430px){
	.ms-header .ms-header__logo{max-width:132px;flex:none}
	.ms-header .ms-header__logo img{width:100%;height:auto;max-width:100%}
	.ms-header__quickcta{padding-left:11px;padding-right:11px;font-size:12px}
	.ms-header__hamburger{padding-left:6px;padding-right:6px}
}
/* 実測：375pxで2px、320pxで11px足りない。
   いちばん削っていいのは、絵で分かるハンバーガーの文字。 */
@media (max-width:380px){
	.ms-header .ms-header__hamburger .ms-hbg-label{display:none}
	.ms-header .ms-header__hamburger{padding-left:8px;padding-right:8px}
}
@media (max-width:360px){
	.ms-header .ms-header__logo{max-width:104px}
	.ms-header__me{width:32px;height:32px;margin:0}
}

/* ドロワー側 */
.ms-nav-mypage{
	background:linear-gradient(100deg,#f6f1fd,#fdf4f8)!important;
	border:1.5px solid #ddd0f0!important;border-radius:12px!important}
.ms-nav-sub{
	display:block;padding:2px 12px 10px!important;
	font-size:11.5px!important;line-height:1.8!important;color:#8a7f9c!important;
	font-weight:600!important}

@media (max-width:400px){
	.ms-header__me{width:34px;height:34px}
	.ms-header__me span{font-size:15px}
}

/* ===== 隠し扉（マイページの入口・2026-08-14） ==================
 * ノートの絵文字だと、並んだアイコンに紛れて気づかれなかった。
 * ここは「戻ってくる人」の入口なので、扉として立てる。
 * 札はまわりのボタンと同じ淡い色。暗くするのは扉の口だけにする——
 * 扉は、まわりより暗いから扉に見える。
 * ============================================================== */
.ms-door{
	position:relative;flex:0 0 auto;width:auto;min-width:44px;height:38px;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5px;
	padding:0 8px;border-radius:12px;text-decoration:none;
	background:linear-gradient(168deg,#ffffff,#f4eeff);
	border:1px solid rgba(139,104,214,.26);
	box-shadow:0 2px 7px rgba(107,63,160,.13);
	transition:box-shadow .3s ease,border-color .3s ease,transform .2s ease}
.ms-door:hover,.ms-door:focus-visible{
	border-color:rgba(139,104,214,.55);
	box-shadow:0 3px 12px rgba(107,63,160,.24),0 0 14px rgba(226,190,130,.30)}
.ms-door:active{transform:translateY(1px)}

/* 押せると分かるように、文字を出す。隣のメニューと同じ作り。 */
.ms-door__label{
	display:block;font-size:9.5px;font-weight:800;letter-spacing:.04em;line-height:1;
	color:#6b3fa0}

/* 扉のかたち。上がまるい石の枠。 */
.ms-door__arch{
	position:relative;display:block;width:15px;height:18px;
	border-radius:7.5px 7.5px 2px 2px;
	background:linear-gradient(170deg,#6b4ba8,#2e2050);
	box-shadow:0 0 0 1px rgba(139,104,214,.34),inset 0 1px 0 rgba(255,255,255,.18)}

/* 合わせ目からもれる光。ゆっくり息をする。 */
.ms-door__seam{
	position:absolute;right:2.5px;top:2.5px;bottom:2.5px;width:1.5px;border-radius:1px;
	background:linear-gradient(180deg,rgba(255,240,205,0),#ffeec4 30%,#ffd894 72%,rgba(255,238,196,0));
	box-shadow:0 0 6px 1.5px rgba(255,206,128,.72);
	animation:msDoorBreath 3.6s ease-in-out infinite}
@keyframes msDoorBreath{0%,100%{opacity:.5}50%{opacity:1}}

/* 鍵穴 */
.ms-door__hole{
	position:absolute;left:4px;top:9px;width:2.5px;height:2.5px;border-radius:50%;
	background:#ffe6b8;box-shadow:0 0 5px 1px rgba(255,206,128,.6)}
.ms-door__hole::after{
	content:"";position:absolute;left:.75px;top:2px;width:1px;height:3px;
	background:#ffe6b8;box-shadow:0 0 4px 1px rgba(255,206,128,.5)}

@media (max-width:389px){.ms-door{min-width:38px;padding:0 5px}
	.ms-door__label{font-size:9px;letter-spacing:0}}
/* いちばん狭い画面では、扉から文字を落として絵だけにする。
   ここはロゴを守るほうを優先する——扉は押せば分かるが、ロゴは看板なので。 */
@media (max-width:345px){
	.ms-door{min-width:30px;padding:0 4px;gap:0}
	.ms-door__label{display:none}
	.ms-door__arch{width:17px;height:21px}
	.ms-door__hole{top:11px}}
@media (prefers-reduced-motion:reduce){.ms-door__seam{animation:none;opacity:.9}}

/* ===== ヘッダー右側の詰まりを直す（2026-08-15） ================
 * 実測で 390px のとき右端の余りが3px、隙間が 5/9/5 と不揃いだった。
 * 扉を足したぶん、右へ行くほど窮屈になっていた。
 * 「無料で診断」を少し細くし、余ったぶんを隙間と右端へ回す。
 * 押しやすさは高さで確保しているので、横を削っても押しにくくならない。
 * ============================================================== */
@media (max-width:430px){
	/* 実測: 390pxで溢れたので詰めた。
	   ロゴ132＋扉44＋隙間15＋左右16 を引いた残りに、
	   「無料で診断」とメニューが収まる幅にしてある。 */
	.ms-header__inner{gap:5px;padding-left:8px;padding-right:8px}
	.ms-header__quickcta{padding:9px 10px;margin-right:0}
	.ms-header__hamburger{padding:0 6px}
}
@media (max-width:389px){
	.ms-header__inner{gap:6px;padding-right:9px}
	.ms-header__quickcta{padding:8px 10px;margin-right:0}
	.ms-header__hamburger{padding:0 7px}
}
@media (max-width:345px){
	.ms-header__inner{gap:5px;padding-right:8px}
	.ms-header__quickcta{padding:7px 8px}
	.ms-header__hamburger{padding:0 5px}
}