/* BIG5ウラオモテ診断 — 独立サイト風LP＆結果画面 */

.b5-lp { font-feature-settings: "palt"; }

/* ── ヒーロー：光と影の分割 ── */
.b5-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(105deg, #fdfbf6 0%, #fdfbf6 49.8%, #241b36 50.2%, #241b36 100%);
	padding: 64px 20px 72px;
	text-align: center;
}
.b5-hero__badge {
	display: inline-block;
	background: rgba(139, 108, 193, .12);
	border: 1.5px solid #8b6cc1;
	color: #6b3fa0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	border-radius: 999px;
	padding: 6px 16px;
	margin-bottom: 18px;
	background-color: #fff;
}
.b5-hero__title {
	font-size: clamp(34px, 7vw, 56px);
	font-weight: 900;
	line-height: 1.25;
	margin: 0 0 10px;
	background: linear-gradient(105deg, #2d2055 0%, #2d2055 44%, #f6e9c8 56%, #f6e9c8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}
.b5-hero__sub {
	font-size: clamp(14px, 3vw, 18px);
	font-weight: 700;
	margin: 0 0 8px;
	background: linear-gradient(105deg, #5b4a7a 0%, #5b4a7a 44%, #cbb8e8 56%, #cbb8e8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.b5-hero__meta {
	font-size: 13px;
	font-weight: 700;
	margin: 14px 0 26px;
	background: linear-gradient(105deg, #8b7f9d 0%, #8b7f9d 44%, #9c8cbb 56%, #9c8cbb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.b5-hero__cta {
	display: inline-block;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	color: #fff;
	font-size: 17px;
	font-weight: 900;
	padding: 17px 46px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(139, 108, 193, .4);
	transition: transform .15s ease;
}
.b5-hero__cta:hover { transform: translateY(-2px); color: #fff; }
.b5-hero__faces {
	display: flex;
	justify-content: center;
	gap: 10vw;
	font-size: clamp(40px, 9vw, 72px);
	margin: 6px 0 18px;
}

/* ── ヒーロー：キービジュアル画像版 ── */
.b5-hero--img { padding: 0; }
.b5-hero__srtitle {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.b5-hero__imglink { display: block; line-height: 0; }
.b5-hero__imglink img {
	width: 100%;
	height: auto;
	display: block;
}
.b5-hero__under { padding: 26px 20px 36px; text-align: center; }

/* ── セクション共通 ── */
.b5-section { padding: 54px 20px; }
.b5-section--alt { background: #f6f1fb; }
.b5-section--dark { background: linear-gradient(150deg, #241b36, #3a2a52); color: #e5dcf2; }
.b5-inner { max-width: 860px; margin: 0 auto; }
.b5-h2 {
	text-align: center;
	font-size: clamp(22px, 4.5vw, 30px);
	font-weight: 900;
	color: #2d2055;
	margin: 0 0 8px;
}
.b5-section--dark .b5-h2 { color: #fff; }
.b5-lead2 {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #8b6cc1;
	margin: 0 0 28px;
	letter-spacing: .08em;
}
.b5-section--dark .b5-lead2 { color: #b8a8d5; }

/* ── 表裏コンセプトカード ── */
.b5-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .b5-duo { grid-template-columns: 1fr; } }
.b5-card {
	border-radius: 20px;
	padding: 26px 22px;
	line-height: 1.9;
	font-size: 14px;
}
.b5-card--omote { background: #fff; border: 2px solid #e4d5f5; color: #4a3560; }
.b5-card--ura { background: #241b36; border: 2px solid #4a3a68; color: #d8cdea; }
.b5-card h3 { font-size: 18px; font-weight: 900; margin: 0 0 10px; }
.b5-card--omote h3 { color: #6b3fa0; }
.b5-card--ura h3 { color: #f6cf8e; }

/* ── 5軸チップ ── */
.b5-axes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 720px) { .b5-axes { grid-template-columns: repeat(2, 1fr); } .b5-axes .b5-axis:last-child { grid-column: span 2; } }
.b5-axis {
	background: #fff;
	border: 1.5px solid #e4d5f5;
	border-radius: 14px;
	padding: 14px 8px;
	text-align: center;
}
.b5-axis__pair { font-size: 22px; font-weight: 900; color: #6b3fa0; letter-spacing: .05em; }
.b5-axis__name { font-size: 12px; font-weight: 800; color: #3a3040; margin: 4px 0 2px; }
.b5-axis__vs { font-size: 10.5px; color: #8b7f9d; line-height: 1.5; }

/* ── 二つ名ショーケース ── */
.b5-titles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.b5-title-chip {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(246, 207, 142, .45);
	color: #f6e9c8;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
}
.b5-title-chip small { color: #b8a8d5; font-weight: 600; margin-left: 4px; }

/* ── 裏の顔4タイプ ── */
.b5-ura-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .b5-ura-grid { grid-template-columns: 1fr; } }
.b5-ura-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 16px;
	padding: 18px 16px;
	font-size: 13px;
	line-height: 1.8;
}
.b5-ura-card h3 { font-size: 15px; font-weight: 900; margin: 0 0 6px; }

/* ── 分析機能リスト ── */
.b5-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .b5-features { grid-template-columns: 1fr; } }
.b5-feature {
	background: #fff;
	border: 1.5px solid #e4d5f5;
	border-radius: 16px;
	padding: 20px 16px;
	text-align: center;
}
.b5-feature__icon { font-size: 30px; }
.b5-feature h3 { font-size: 14.5px; font-weight: 900; color: #2d2055; margin: 8px 0 6px; }
.b5-feature p { font-size: 12.5px; color: #6b5f7d; line-height: 1.7; margin: 0; }

/* ── FAQ ── */
.b5-faq { max-width: 720px; margin: 0 auto; }
.b5-faq__item { background: #fff; border: 1.5px solid #e4d5f5; border-radius: 14px; padding: 18px 18px; margin-bottom: 12px; }
.b5-faq__q { font-size: 14.5px; font-weight: 900; color: #6b3fa0; margin: 0 0 8px; }
.b5-faq__a { font-size: 13.5px; color: #4a3560; line-height: 1.9; margin: 0; }

/* ── 最終CTA ── */
.b5-final {
	text-align: center;
	background: linear-gradient(105deg, #fdfbf6 0%, #fdfbf6 49.8%, #241b36 50.2%, #241b36 100%);
	padding: 60px 20px;
}
.b5-final__title {
	font-size: clamp(20px, 4.5vw, 28px);
	font-weight: 900;
	margin: 0 0 20px;
	background: linear-gradient(105deg, #2d2055 0%, #2d2055 44%, #f6e9c8 56%, #f6e9c8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── ビッグ5専用ヘッダー ── */
.b5h {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	box-shadow: 0 2px 14px rgba(60, 40, 90, .12);
}
.b5h__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 8px 14px;
}
.b5h__logo { display: block; line-height: 0; }
.b5h__logo-img { width: auto; height: 58px; display: block; }
.b5h__cta {
	flex-shrink: 0;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	padding: 10px 20px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(139, 108, 193, .35);
	white-space: nowrap;
}
.b5h__cta:hover { color: #fff; opacity: .9; }
.b5h__nav {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 10px 8px;
	max-width: 1080px;
	margin: 0 auto;
}
.b5h__nav::-webkit-scrollbar { display: none; }
.b5h__nav a {
	flex-shrink: 0;
	color: #6b5a8a;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 999px;
	background: #f6f1fb;
}
.b5h__nav a:hover { background: #ece2f8; color: #6b3fa0; }
@media (min-width: 768px) {
	.b5h__logo-img { height: 66px; }
	.b5h__cta { font-size: 14px; padding: 11px 26px; }
	.b5h__nav a { font-size: 13.5px; }
}

/* ── キャラ図鑑ページ ── */
.b5z-inner { max-width: 1040px; margin: 0 auto; }
.b5z-hero { position: relative; background: #241b36; }
.b5z-hero__img {
	width: 100%;
	height: auto;
	display: block;
	max-width: 1040px;
	margin: 0 auto;
}
.b5z-hero__body {
	text-align: center;
	padding: 26px 20px 34px;
	background: linear-gradient(105deg, #fdfbf6 0%, #fdfbf6 49.8%, #241b36 50.2%, #241b36 100%);
}
.b5z-hero__title {
	font-size: clamp(26px, 5.5vw, 40px);
	font-weight: 900;
	margin: 0 0 10px;
	background: linear-gradient(105deg, #2d2055 0%, #2d2055 44%, #f6e9c8 56%, #f6e9c8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.b5z-hero__lead {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.9;
	margin: 0;
	background: linear-gradient(105deg, #5b4a7a 0%, #5b4a7a 44%, #cbb8e8 56%, #cbb8e8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.b5z-group {
	font-size: clamp(20px, 4.5vw, 28px);
	font-weight: 900;
	color: #2d2055;
	margin: 44px 0 6px;
	text-align: center;
}
.b5z-group:first-of-type { margin-top: 0; }
.b5z-group__emoji { margin-right: 8px; }
.b5z-group--dark { color: #f6e9c8; margin-top: 0; }
.b5z-group__sub {
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: #8b6cc1;
	margin: 0 0 22px;
}
.b5z-group__sub--dark { color: #b8a8d5; }
.b5z-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 22px;
}
.b5z-card {
	background: #fff;
	border: 1.5px solid #e8def5;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(60, 40, 90, .08);
	display: flex;
	flex-direction: column;
}
.b5z-card__imglink { display: block; line-height: 0; background: #f6f1fb; }
.b5z-card__imglink img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .2s ease;
}
a.b5z-card__imglink:hover img { transform: scale(1.03); }
.b5z-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.b5z-card__code {
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .3em;
	color: #8b6cc1;
	margin: 0 0 4px;
}
.b5z-card__name {
	font-size: 21px;
	font-weight: 900;
	color: #2d2055;
	margin: 0 0 8px;
}
.b5z-card__desc {
	font-size: 13.5px;
	line-height: 1.85;
	color: #5b4a7a;
	margin: 0 0 12px;
	flex: 1;
}
.b5z-card__more {
	align-self: flex-end;
	font-size: 13px;
	font-weight: 800;
	color: #d65c9a;
	text-decoration: none;
}
.b5z-card__more:hover { text-decoration: underline; color: #c0418a; }
.b5z-card--dark { background: #2e2347; border-color: #4a3a6a; }
.b5z-card--dark .b5z-card__code { color: #cbb8e8; }
.b5z-card--dark .b5z-card__name { color: #f6e9c8; }
.b5z-card--dark .b5z-card__desc { color: #d5c8ea; }
.b5z-card--dark .b5z-card__imglink { background: #241b36; }
.b5z-banner { display: block; margin: 44px auto 0; max-width: 760px; line-height: 0; }
.b5z-banner img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
	box-shadow: 0 10px 28px rgba(60, 40, 90, .18);
	transition: transform .15s ease;
}
.b5z-banner:hover img { transform: translateY(-2px); }

/* ── ヒーロー下：ダブルCTA＋チップ ── */
.b5-hero__btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 420px;
	margin: 0 auto;
}
.b5-hero__btns .b5-hero__cta { width: 100%; text-align: center; }
.b5-hero__cta--ghost {
	background: #fff;
	color: #8b6cc1;
	border: 2px solid #d3bfef;
	box-shadow: 0 6px 16px rgba(139, 108, 193, .15);
}
.b5-hero__cta--ghost:hover { color: #6b3fa0; }
.b5-hero__chips { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.b5-chip {
	background: #fff;
	border: 1.5px solid #e4d5f5;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 800;
	color: #6b5a8a;
	box-shadow: 0 4px 12px rgba(60, 40, 90, .08);
}

/* ── ビッグ5でわかること ── */
.b5w-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .b5w-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .b5w-grid { grid-template-columns: 1fr; } }
.b5w-card {
	background: #fff;
	border: 2px solid #e4d5f5;
	border-radius: 18px;
	padding: 20px 16px;
	text-align: center;
}
.b5w-card--pink   { border-color: #f3c3d8; }
.b5w-card--purple { border-color: #d5c3f0; }
.b5w-card--blue   { border-color: #bcd6ee; }
.b5w-card--orange { border-color: #f2d8b8; }
.b5w-card h3 { font-size: 15.5px; font-weight: 900; margin: 0 0 10px; }
.b5w-card--pink h3   { color: #d65c8a; }
.b5w-card--purple h3 { color: #8b6cc1; }
.b5w-card--blue h3   { color: #5a86c5; }
.b5w-card--orange h3 { color: #cf8a3a; }
.b5w-card__icon { font-size: 34px; display: block; margin-bottom: 10px; }
.b5w-card p { font-size: 13px; color: #5b4a7a; line-height: 1.8; margin: 0; font-weight: 700; }

/* ── 人気キャラクター ── */
.b5p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .b5p-grid { grid-template-columns: repeat(2, 1fr); } }
.b5p-card {
	display: block;
	background: #fff;
	border: 2px solid #e4d5f5;
	border-radius: 18px;
	padding: 16px 14px 18px;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.b5p-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(60, 40, 90, .15); }
.b5p-card__name { font-size: 15.5px; font-weight: 900; color: #6b3fa0; margin: 0 0 10px; }
.b5p-card img {
	width: 100%;
	max-width: 190px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 14px;
	margin: 0 auto;
	display: block;
}
.b5p-card__catch { font-size: 12.5px; font-weight: 700; color: #5b4a7a; line-height: 1.75; margin: 12px 0 0; }

/* ── 4つの心の守り方 ── */
.b5m-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .b5m-grid { grid-template-columns: repeat(2, 1fr); } }
.b5m-card {
	background: #fff;
	border: 2px solid #e4d5f5;
	border-radius: 18px;
	padding: 18px 14px;
	text-align: center;
}
.b5m-card__type { font-size: 16px; font-weight: 900; margin: 0 0 10px; }
.b5m-card img {
	width: 100%;
	max-width: 130px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto;
	display: block;
}
.b5m-card p { font-size: 12.5px; font-weight: 700; color: #5b4a7a; line-height: 1.8; margin: 12px 0 0; }

/* ── 3ステップ ── */
.b5s-grid { display: flex; align-items: stretch; justify-content: center; gap: 10px; }
@media (max-width: 760px) { .b5s-grid { flex-direction: column; align-items: center; } }
.b5s-card {
	position: relative;
	background: #fff;
	border: 2px solid #e4d5f5;
	border-radius: 18px;
	padding: 24px 18px 20px;
	text-align: center;
	flex: 1;
	max-width: 300px;
}
.b5s-card__num {
	position: absolute;
	top: -14px;
	left: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #e4737f, #d65c9a);
	color: #fff;
	font-weight: 900;
	font-size: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(214, 92, 154, .35);
}
.b5s-card h3 { font-size: 15.5px; font-weight: 900; color: #8b6cc1; margin: 0 0 10px; }
.b5s-card__icon { font-size: 20px; }
.b5s-card p { font-size: 13px; font-weight: 700; color: #5b4a7a; line-height: 1.8; margin: 0; }
.b5s-arrow { align-self: center; font-size: 22px; color: #8b6cc1; flex-shrink: 0; }
@media (max-width: 760px) { .b5s-arrow { transform: rotate(90deg); } }

/* ── こんな人におすすめ ── */
.b5r-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.b5r-bubble {
	background: #fff;
	border: 2px solid #e4d5f5;
	border-radius: 999px;
	padding: 16px 26px;
	font-size: 14px;
	font-weight: 800;
	color: #4a3560;
	box-shadow: 0 6px 16px rgba(60, 40, 90, .08);
}

/* ── 最終CTA（紫の帯） ── */
.b5cta {
	text-align: center;
	padding: 64px 20px 70px;
	background: linear-gradient(150deg, #8b6cc1, #6b4fa0 55%, #52397e);
}
.b5cta__title { font-size: clamp(21px, 4.8vw, 30px); font-weight: 900; color: #fff; margin: 0 0 12px; }
.b5cta__sub { font-size: 14px; font-weight: 700; color: #e5dcf2; margin: 0 0 26px; }
.b5cta .b5-hero__cta { background: linear-gradient(135deg, #e4737f, #d65c9a); }

/* ── ビッグ5専用フッター ── */
.b5f { background: #2e2347; padding: 44px 20px 30px; }
.b5f__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.b5f__logo { display: inline-block; background: #fff; border-radius: 16px; padding: 8px 18px; line-height: 0; margin-bottom: 22px; }
.b5f__logo img { width: auto; height: 64px; }
.b5f__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-bottom: 14px; }
.b5f__nav a { color: #d5c8ea; font-size: 13px; font-weight: 700; text-decoration: none; }
.b5f__nav a:hover { color: #fff; text-decoration: underline; }
.b5f__nav--legal a { color: #9c8cbb; font-size: 12px; font-weight: 600; }
.b5f__copy { color: #8b7f9d; font-size: 11.5px; margin: 18px 0 0; }

/* ── ビッグ5診断ページ：クイズイントロの背景をMBTI用画像から差し替え ── */
.b5-body .ms-quiz__intro {
	background: linear-gradient(135deg, #fdeef5 0%, #f3ecfb 45%, #ded1f2 100%);
}

/* ── タイプページ：詳細分析 ── */
.b5t-sw { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .b5t-sw { grid-template-columns: 1fr; } }
.b5t-sw__head {
	text-align: center;
	font-size: 17px;
	font-weight: 900;
	margin: 0 0 12px;
}
.b5t-sw__head--s { color: #33a474; }
.b5t-sw__head--w { color: #d0716a; }
.b5t-sw__item {
	background: #fff;
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 10px;
}
.b5t-sw__item--s { border: 1.5px solid #bfe3d2; }
.b5t-sw__item--w { border: 1.5px solid #f0cfc9; }
.b5t-sw__item h4 { font-size: 14px; font-weight: 900; color: #2d2055; margin: 0 0 6px; }
.b5t-sw__item p { font-size: 12.5px; color: #5b4a7a; line-height: 1.8; margin: 0; }
.b5t-jobs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.b5t-jobs__chip {
	background: #fff;
	border: 1.5px solid #d3bfef;
	color: #6b3fa0;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 700;
}
.b5t-growth {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: #fff;
	border: 1.5px solid #e4d5f5;
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 12px;
}
.b5t-growth__num {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, #8b6cc1, #d65c9a);
	color: #fff;
	font-weight: 900;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.b5t-growth h4 { font-size: 14.5px; font-weight: 900; color: #2d2055; margin: 2px 0 6px; }
.b5t-growth p { font-size: 13px; color: #5b4a7a; line-height: 1.85; margin: 0; }
.b5t-pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .b5t-pairs { grid-template-columns: 1fr; } }
.b5t-pair {
	display: block;
	background: #fff;
	border: 1.5px solid #e4d5f5;
	border-radius: 16px;
	padding: 18px 16px;
	text-align: center;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.b5t-pair:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(60, 40, 90, .14); }
.b5t-pair img {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 16px;
	margin: 0 auto 10px;
	display: block;
}
.b5t-pair h4 { font-size: 15px; font-weight: 900; color: #6b3fa0; margin: 0 0 8px; }
.b5t-pair p { font-size: 12.5px; color: #5b4a7a; line-height: 1.8; margin: 0; text-align: left; }

/* ── タイプページ：ヒーロー2カラム ── */
.b5th {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	max-width: 920px;
	margin: 0 auto;
	text-align: left;
}
.b5th__img {
	width: min(340px, 74vw);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 30px;
	box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
	flex-shrink: 0;
}
.b5th__body { max-width: 460px; }
.b5th__title {
	font-size: clamp(30px, 6vw, 50px);
	font-weight: 900;
	line-height: 1.25;
	color: #f6e9c8;
	margin: 0 0 10px;
}
.b5th__tagline {
	font-size: clamp(13.5px, 2.6vw, 16px);
	font-weight: 800;
	color: #cbb8e8;
	margin: 0 0 12px;
	line-height: 1.7;
}
.b5th__code {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .12em;
	color: #9c8cbb;
	margin: 0 0 22px;
}
@media (max-width: 760px) {
	.b5th { flex-direction: column; gap: 22px; text-align: center; }
	.b5th__body { max-width: none; }
	.b5th__code { margin-bottom: 18px; }
}

/* ── PC: 診断ページのみ左右にキャラアート背景（コンテンツ幅は全幅のまま） ── */
@media (min-width: 1180px) {
	body.page-template-page-big5,
	body.page-template-page-big5-mini {
		background:
			url('../images/big5/bg_side_l.png') left top / auto 100vh no-repeat fixed,
			url('../images/big5/bg_side_r.png') right top / auto 100vh no-repeat fixed,
			linear-gradient(90deg, #fbeaee 0%, #f6ecf1 50%, #e9dcf2 100%) !important;
	}
	body.page-template-page-big5 .ms-quiz,
	body.page-template-page-big5-mini .ms-quiz {
		background: transparent;
	}
}

/* 図鑑カード: 裏の顔比率 */
.b5z-card__back {
	font-size: .78rem;
	font-weight: 700;
	color: #6b3fa0;
	background: #f6efff;
	border-radius: 8px;
	padding: 6px 10px;
	margin: 8px 0 10px;
}
.b5z-card__back b { color: #c0418a; }
.b5z-card__back-n { font-weight: 600; font-size: .68rem; color: #a093b5; }

/* ==========================================================================
   LP: 心理学的裏付けセクション
   ========================================================================== */
.b5sci-card {
	background: #fff;
	border-radius: 22px;
	padding: 26px 22px;
	margin-top: 20px;
	box-shadow: 0 6px 22px rgba(214, 146, 184, .14);
	border: 2px solid #ffe3ef;
	text-align: left;
}
.b5sci-card--bowlby { border-color: #e2dcff; box-shadow: 0 6px 22px rgba(150, 130, 220, .14); }
.b5sci-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.b5sci-card__emoji {
	width: 58px; height: 58px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 30px; border-radius: 18px;
	background: linear-gradient(135deg, #ffe9f2, #f3edff);
}
.b5sci-card__head h3 { font-size: 1.1rem; font-weight: 900; color: #5a4460; line-height: 1.3; }
.b5sci-card__head h3 small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; color: #c3aed6; text-transform: uppercase; }
.b5sci-card__who { font-size: .74rem; font-weight: 700; color: #b09ec5; margin-top: 2px; }
.b5sci-card > p { font-size: .92rem; line-height: 2.0; color: #5f5266; }
.b5sci-card > p b { color: #d65c9a; }
.b5sci-card__map {
	margin-top: 14px !important;
	background: linear-gradient(135deg, #fff3f8, #f5f0ff);
	border-radius: 14px;
	padding: 13px 16px;
	font-size: .87rem !important;
	font-weight: 700;
}
.b5sci-bridge {
	margin-top: 22px;
	background: linear-gradient(135deg, #ffe9f2, #e9e1ff);
	border-radius: 20px;
	padding: 22px 20px;
	text-align: center;
}
.b5sci-bridge p { font-size: .95rem; line-height: 2.0; color: #5a4460; }
.b5sci-bridge b { color: #c0418a; }

/* ==========================================================================
   LP: 人気キャラランキング
   ========================================================================== */
.b5p-card { position: relative; }
.b5p-card__rank {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 2px solid #e4d5f5;
	color: #8b6cc1;
	font-size: .78rem;
	font-weight: 900;
	border-radius: 999px;
	padding: 4px 16px;
	white-space: nowrap;
	box-shadow: 0 3px 10px rgba(120, 80, 170, .15);
	z-index: 2;
}
.b5p-card--gold { border: 3px solid #f6cf49 !important; box-shadow: 0 12px 34px rgba(240, 192, 64, .3) !important; }
.b5p-card--gold .b5p-card__rank { border-color: #f0c040; color: #a87b12; background: #fff8e0; }
.b5p-card--silver { border: 3px solid #c9cfdc !important; }
.b5p-card--silver .b5p-card__rank { border-color: #aab2c4; color: #5c6577; background: #f4f6fa; }
.b5p-card--bronze { border: 3px solid #e0b184 !important; }
.b5p-card--bronze .b5p-card__rank { border-color: #cf9257; color: #8a5a24; background: #fdf3e7; }

/* ==========================================================================
   サンリオ風パステル・スキン（ビッグ5全体のトーン統一）
   キャラのやわらかい水彩タッチに合わせ、ダークネイビーを廃して
   クリーム×ベビーピンク×ラベンダー×ミントの配色にそろえる
   ========================================================================== */
:root {
	--b5p-cream: #fffaf5;
	--b5p-pink: #ffd9e8;
	--b5p-pink-deep: #ff8fb8;
	--b5p-lavender: #e9e1ff;
	--b5p-mint: #d6f2e6;
	--b5p-sky: #d8ecff;
	--b5p-text: #5a4460;
	--b5p-accent: #d65c9a;
}
/* 見出し・本文をダークネイビーからソフトプラムへ */
.b5-h2, .b5z-group, .b5z-card__name, .b5p-card__name, .bv-h2 { color: var(--b5p-text) !important; }
/* セクション背景をパステルストライプに */
.b5-section--alt {
	background: linear-gradient(180deg, #fff2f8 0%, #f4eeff 100%) !important;
}
.b5-section { background: var(--b5p-cream); }
/* カード類のボーダーをやわらかく */
.b5w-card, .b5p-card, .b5z-card, .b5-faq__item {
	border-radius: 24px !important;
	box-shadow: 0 6px 20px rgba(230, 160, 195, .16) !important;
}
/* CTAボタン系: 濃紫→いちごミルクグラデ */
.b5-cta-btn, .b5cta a, .b5-hero__cta a {
	background: linear-gradient(135deg, #ff9ec4, #b79ae8) !important;
	box-shadow: 0 10px 26px rgba(255, 158, 196, .45) !important;
}
/* 図鑑ヒーローのダーク地をラベンダー夜空パステルへ */
.b5z-hero__body {
	background: linear-gradient(135deg, #b9a5e8 0%, #d8a9d4 55%, #f0b7cd 100%) !important;
}
/* 図鑑ヒーロー: 明暗2分割グラデ文字をやめ、パステル地で読める白文字に */
.b5z-hero__title,
.b5z-hero__lead {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
}
.b5z-hero__title { color: #fff !important; text-shadow: 0 2px 14px rgba(110, 70, 130, .5); }
.b5z-hero__lead { color: #fdf6ff !important; text-shadow: 0 1px 8px rgba(110, 70, 130, .45); }
/* タイプページヒーロー: パステル地に合わせた文字色（ダーク用の金・薄紫を置換） */
.b5th__title { color: #5a4460 !important; }
.b5th__tagline { color: #8b5fae !important; }
.b5th__code { color: #a08bb8 !important; }
.b5th__img { box-shadow: 0 14px 38px rgba(170, 120, 170, .35) !important; }
/* 総選挙ヒーロー: キャラフレーム画像背景（テンプレート側の指定を優先） */
.bv-hero {
	background-image: url('../images/big5/frame_pastel.jpg') !important;
	background-size: cover !important;
	background-position: center !important;
}

/* ==========================================================================
   かわいい演出（モーション控えめ設定では無効化）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	@keyframes b5twinkle {
		0%, 100% { opacity: .4; transform: scale(.85) rotate(-8deg); }
		50% { opacity: 1; transform: scale(1.15) rotate(8deg); }
	}
	@keyframes b5pulse {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.035); }
	}
	@keyframes b5floaty {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-7px); }
	}
	/* 見出しのきらめき */
	.b5-h2::after, .bv-h2::after {
		content: '✨';
		display: inline-block;
		margin-left: 8px;
		font-size: .8em;
		animation: b5twinkle 2s ease-in-out infinite;
	}
	/* CTAの鼓動 */
	.b5-hero__cta, .bv-card__btn { animation: b5pulse 2.8s ease-in-out infinite; }
	/* キャラ画像: ホバーでぷるんと傾く */
	.b5z-card:hover img, .b5p-card:hover img, .bv-card:hover .bv-card__img,
	.cd-index__card:hover img, .b5z-card__imglink:hover img {
		transform: scale(1.06) rotate(-2.5deg);
	}
	.b5z-card img, .b5p-card img, .bv-card__img, .cd-index__card img {
		transition: transform .3s cubic-bezier(.34,1.56,.64,1);
	}
	/* ヒーローのキャラ画像はゆらゆら浮く */
	.b5th__img { animation: b5floaty 4s ease-in-out infinite; }
	/* スクロールでふわっと出現 */
	.b5-reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
	.b5-reveal.is-in { opacity: 1; transform: none; }
}

/* ── 今日の1票ナッジ（フッター直上・全ビッグ5ページ） ── */
.b5vote-nudge { padding: 0 16px 26px; background: var(--b5p-cream); }
.b5vote-nudge a {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 620px;
	margin: 0 auto;
	background: linear-gradient(135deg, #fff3f8, #efe7ff);
	border: 2px solid #f3c9de;
	border-radius: 999px;
	padding: 12px 20px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(230, 160, 195, .22);
	transition: transform .15s;
}
.b5vote-nudge a:hover { transform: translateY(-2px); }
.b5vote-nudge__emoji { font-size: 26px; flex-shrink: 0; }
.b5vote-nudge__text { flex: 1; min-width: 0; line-height: 1.4; }
.b5vote-nudge__text b { display: block; font-size: .92rem; font-weight: 900; color: #c0418a; }
.b5vote-nudge__text small { font-size: .72rem; font-weight: 700; color: #a08bb8; }
.b5vote-nudge__arrow { font-size: 20px; font-weight: 900; color: #d65c9a; flex-shrink: 0; }

/* ── 旧ダークセクションの可読性修正（パステル地に文字色を追従） ── */
.b5-section--dark {
	background: linear-gradient(160deg, #f3ecfb 0%, #fdeef6 100%) !important;
	color: #5f5266 !important;
}
.b5-section--dark .b5-lead2 { color: #8b6cc1 !important; }
.b5-ura-card {
	background: #fff !important;
	border: 2px solid #eadcf7 !important;
	color: #5f5266 !important;
	box-shadow: 0 4px 14px rgba(150, 110, 180, .1);
}
.b5-card--ura {
	background: #fff !important;
	border-color: #e4d5f5 !important;
	color: #5f5266 !important;
}
.b5-card--ura h3 { color: #8b5fae !important; }
.b5-title-chip {
	background: #fff !important;
	border-color: #e0b8d5 !important;
	color: #c0418a !important;
}
.b5-title-chip small { color: #a08bb8 !important; }
.b5-final { background: linear-gradient(105deg, #fff6fa, #efe6fb) !important; }
.b5-final__title {
	background: none !important;
	-webkit-background-clip: initial !important;
	background-clip: initial !important;
	-webkit-text-fill-color: currentColor !important;
	color: #5a4460 !important;
}
/* LPプログラムカード（ダーク用カードを白カードへ） */
.b5z-card--dark {
	background: #fff !important;
	border: 2px solid #eadcf7 !important;
}
.b5z-card--dark .b5z-card__code, .b5z-card--dark .b5z-card__desc { color: #8b7f9d !important; }
.b5z-card--dark .b5z-card__name, .b5z-card--dark h3 { color: #5a4460 !important; }
