/* =========================================
   チャトレ診断 v1.2
   - コンパクトタイトル（縦1/4）
   - 自動スライド遷移
========================================= */

.cld-wrap {
	max-width: 520px;
	margin: 24px auto;
	padding: 0 0 20px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(255, 140, 170, 0.14), 0 2px 6px rgba(0,0,0,0.04);
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	color: #3a3a3a;
	box-sizing: border-box;
	overflow: hidden;
}
.cld-wrap *,
.cld-wrap *::before,
.cld-wrap *::after {
	box-sizing: border-box;
}

/* SANGOなど親テーマの ul/li デフォルトを打ち消し */
.cld-wrap ul,
.cld-wrap ol {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0;
}
.cld-wrap ul li,
.cld-wrap ol li {
	list-style: none !important;
	list-style-type: none !important;
	background: none !important;
	padding-left: 0;
	margin-left: 0;
}
.cld-wrap ul li::marker,
.cld-wrap ol li::marker {
	content: "" !important;
	display: none;
}

/* ============================
   ヘッダー（コンパクト版）
============================ */
.cld-header {
	background:
		radial-gradient(circle at 15% 30%, rgba(255,255,255,0.35) 0, transparent 40%),
		radial-gradient(circle at 88% 70%, rgba(255,255,255,0.25) 0, transparent 45%),
		linear-gradient(135deg, #ffb0d4 0%, #ffc4a1 55%, #ffd7b0 100%);
	padding: 8px 14px 12px;
	text-align: center;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.cld-header::before,
.cld-header::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,0.22);
	pointer-events: none;
}
.cld-header::before {
	width: 44px; height: 44px;
	top: -14px; left: -10px;
}
.cld-header::after {
	width: 60px; height: 60px;
	bottom: -24px; right: -18px;
}
.cld-badge {
	display: inline-block;
	background: rgba(255,255,255,0.9);
	color: #ff5a86;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	position: relative;
	z-index: 1;
	line-height: 1.6;
}
.cld-title {
	position: relative;
	z-index: 1;
	color: #fff;
	text-align: center;
	line-height: 1.15;
}
.cld-title-sub {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #ff5a86;
	background: rgba(255, 255, 255, 0.92);
	padding: 5px 14px;
	border-radius: 20px;
	margin-bottom: 6px;
	box-shadow: 0 2px 6px rgba(220, 90, 130, 0.22);
	line-height: 1;
}
.cld-sub-text {
	display: inline-block;
	line-height: 1;
}
.cld-heart-deco {
	font-size: 12px;
	flex-shrink: 0;
	display: inline-block;
	line-height: 1;
	animation: cldHeartBeat 1.6s ease-in-out infinite;
}
.cld-heart-deco:last-child {
	animation-delay: 0.2s;
}
@keyframes cldHeartBeat {
	0%, 100% { transform: scale(1); }
	30%      { transform: scale(1.2); }
	60%      { transform: scale(1); }
}
.cld-title-hero {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 4px 4px;
	line-height: 1;
	transform: rotate(-1deg);
}
.cld-hero-text {
	display: inline-block;
	font-size: 30px;
	font-weight: 900;
	letter-spacing: 0.08em;
	color: #fff;
	line-height: 1;
	text-shadow:
		0 2px 0 #e63b6a,
		0 3px 6px rgba(180, 60, 100, 0.3);
}
.cld-hero-slash {
	display: inline-block;
	font-size: 26px;
	font-weight: 900;
	color: #fff;
	line-height: 1;
	text-shadow: 0 2px 0 #e63b6a, 0 3px 5px rgba(180, 60, 100, 0.25);
	animation: cldSlashSway 2s ease-in-out infinite;
	transform-origin: center;
}
.cld-hero-slash.right {
	animation-delay: 1s;
}
@keyframes cldSlashSway {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
/* キラキラ */
.cld-title-hero-sparkle {
	position: absolute;
	font-size: 12px;
	text-shadow: none;
	animation: cldSparkle 1.8s ease-in-out infinite;
	pointer-events: none;
	line-height: 1;
}
.cld-title-hero-sparkle.s1 { top: -2px;    left: 14%;  }
.cld-title-hero-sparkle.s2 { bottom: -2px; right: 16%; animation-delay: 0.9s; }
@keyframes cldSparkle {
	0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); }
	50%      { opacity: 1;    transform: scale(1.2) rotate(180deg); }
}

/* ============================
   本体パディング
============================ */
.cld-progress-area,
.cld-question-viewport,
.cld-nav,
.cld-result-area {
	padding-left: 18px;
	padding-right: 18px;
}

/* ============================
   ハート型プログレス
============================ */
.cld-progress-area {
	padding-top: 10px;
	padding-bottom: 0;
}
.cld-hearts {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}
.cld-heart-item {
	flex: 1;
	text-align: center;
	font-size: 20px;
	line-height: 1;
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
	filter: grayscale(0.2) opacity(0.85);
	display: inline-block;
}
.cld-heart-item.on {
	filter: none;
	animation: cldHeartPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cldHeartPop {
	0%   { transform: scale(0.6); }
	60%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}
.cld-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	color: #999;
	letter-spacing: 0.05em;
	font-weight: 600;
}
.cld-step-txt span { color: #ff5a86; font-weight: 700; }
.cld-progress-pct {
	background: linear-gradient(90deg, #ff6b9d 0%, #ff9558 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	font-size: 13px;
}

/* ============================
   質問（スライド遷移）
============================ */
.cld-question-viewport {
	overflow: hidden;
	position: relative;
	padding-top: 6px;
}
.cld-question-area {
	min-height: 220px;
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
	will-change: transform, opacity;
}
.cld-question-area.slide-out-left {
	transform: translateX(-40px);
	opacity: 0;
}
.cld-question-area.slide-out-right {
	transform: translateX(40px);
	opacity: 0;
}
.cld-question-area.slide-in-right {
	animation: cldSlideInR 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.cld-question-area.slide-in-left {
	animation: cldSlideInL 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes cldSlideInR {
	0%   { transform: translateX(40px); opacity: 0; }
	100% { transform: translateX(0);    opacity: 1; }
}
@keyframes cldSlideInL {
	0%   { transform: translateX(-40px); opacity: 0; }
	100% { transform: translateX(0);     opacity: 1; }
}

.cld-q-number {
	display: inline-block;
	color: #ff5a86;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	margin-bottom: 2px;
}
.cld-q-lead {
	font-size: 12px;
	color: #ff9558;
	font-weight: 600;
	margin-bottom: 2px;
}
.cld-q-text {
	font-size: 15px;
	font-weight: 700;
	color: #333;
	margin: 0 0 10px;
	line-height: 1.5;
}

/* 選択肢 */
.cld-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cld-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1.5px solid #ffe1ea;
	border-radius: 12px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #444;
	text-align: left;
	transition: border-color 0.2s, background 0.25s, transform 0.15s;
	width: 100%;
	font-family: inherit;
	line-height: 1.4;
}
.cld-option:hover {
	border-color: #ff9bb8;
	background: #fff8fa;
}
.cld-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: linear-gradient(135deg, #ffeaf1 0%, #ffe9d9 100%);
	border-radius: 50%;
	font-size: 14px;
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s;
}

/* ぽん → 選択色 */
.cld-option.pressing {
	transform: scale(0.94);
	transition: transform 0.12s ease-out;
}
.cld-option.selected {
	border-color: #ff6b9d;
	background: linear-gradient(135deg, #fff0f5 0%, #fff5ec 100%);
	animation: cldSelectPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cld-option.selected .cld-option-icon {
	transform: scale(1.15) rotate(-6deg);
	background: linear-gradient(135deg, #ff6b9d 0%, #ff9558 100%);
	color: #fff;
}
@keyframes cldSelectPop {
	0%   { transform: scale(0.94); }
	60%  { transform: scale(1.03); }
	100% { transform: scale(1); }
}

/* ============================
   ナビ（戻るのみ）
============================ */
.cld-nav {
	margin-top: 14px;
	display: flex;
	justify-content: flex-start;
}
.cld-back-btn {
	background: transparent;
	border: none;
	color: #999;
	font-size: 12px;
	cursor: pointer;
	padding: 6px 10px;
	font-family: inherit;
	transition: color 0.2s;
}
.cld-back-btn:not(:disabled):hover { color: #ff5a86; }
.cld-back-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cld-back-arrow { font-size: 16px; font-weight: bold; }



/* スマホ */
@media (max-width: 480px) {
	.cld-wrap { margin: 12px 8px; border-radius: 16px; }
	.cld-header { padding: 6px 12px 10px; gap: 3px; }
	.cld-badge { font-size: 9px; padding: 2px 8px; }
	.cld-title-sub { font-size: 12px; padding: 2px 12px; gap: 5px; }
	.cld-hero-text { font-size: 26px; letter-spacing: 0.06em; }
	.cld-hero-slash { font-size: 22px; }
	.cld-heart-deco { font-size: 12px; }
	.cld-progress-area, .cld-question-viewport, .cld-nav, .cld-result-area {
		padding-left: 14px; padding-right: 14px;
	}
	.cld-heart-item { font-size: 18px; }
	.cld-q-text { font-size: 14px; }
	.cld-option { font-size: 13px; padding: 11px 12px; }
	.cld-question-area { min-height: 200px; }
	.cld-card-name { font-size: 14px; }
}


/* ============================
   診断結果 v1.3
============================ */
.cld-result-area {
	padding-top: 6px;
	padding-bottom: 8px;
}

/* === ヘッダー === */
.cld-r-header {
	text-align: center;
	padding: 8px 0 14px;
}
.cld-r-header-line {
	color: #ffb0c8;
	font-size: 12px;
	letter-spacing: -0.1em;
	line-height: 1;
	user-select: none;
}
.cld-r-header-title {
	font-size: 20px;
	font-weight: 800;
	padding: 6px 0;
	background: linear-gradient(90deg, #ff6b9d 0%, #ff9558 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: 0.05em;
}

/* === 1位発表 === */
.cld-r-winner {
	text-align: center;
	background:
		radial-gradient(circle at 20% 20%, rgba(255,180,200,0.25) 0, transparent 50%),
		radial-gradient(circle at 80% 80%, rgba(255,200,160,0.25) 0, transparent 50%),
		linear-gradient(180deg, #fff8fa 0%, #fff5ec 100%);
	border-radius: 18px;
	padding: 18px 16px 20px;
	margin-bottom: 16px;
	position: relative;
	overflow: hidden;
	border: 1.5px solid #ffe1ea;
}
.cld-r-lead {
	font-size: 13px;
	color: #ff9558;
	font-weight: 700;
	margin-bottom: 8px;
	letter-spacing: 0.03em;
}
.cld-r-crown {
	font-size: 46px;
	line-height: 1;
	margin-bottom: 6px;
	filter: drop-shadow(0 3px 6px rgba(255, 180, 100, 0.35));
	animation: cldCrownFloat 2.5s ease-in-out infinite;
}
@keyframes cldCrownFloat {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50%      { transform: translateY(-4px) rotate(3deg); }
}
.cld-r-brand {
	font-size: 30px;
	font-weight: 900;
	letter-spacing: 0.05em;
	background: linear-gradient(135deg, #ff6b9d 0%, #ff9558 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1.2;
}
.cld-r-brand-sub {
	font-size: 12px;
	color: #888;
	margin-top: 2px;
	font-weight: 600;
}

/* おすすめ度 */
.cld-r-match {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed #ffcfda;
}
.cld-r-match-label {
	font-size: 11px;
	color: #888;
	font-weight: 700;
	letter-spacing: 0.15em;
	margin-bottom: 2px;
}
.cld-r-match-pct {
	line-height: 1;
	background: linear-gradient(90deg, #ff6b9d 0%, #ff9558 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
}
.cld-r-pct-num {
	font-size: 42px;
	letter-spacing: -0.02em;
}
.cld-r-pct-unit {
	font-size: 22px;
	margin-left: 2px;
}
.cld-r-match-bar {
	max-width: 220px;
	margin: 8px auto 0;
	height: 8px;
	background: #ffe6ec;
	border-radius: 8px;
	overflow: hidden;
}
.cld-r-match-fill {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #ff6b9d 0%, #ff9558 100%);
	border-radius: 8px;
	transition: width 1.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.cld-r-match-fill.animate {
	/* JS側で style.width を保持しつつ transition だけ効かせる */
}

/* === あなたのタグ === */
.cld-r-tags-box {
	background: #fff;
	border: 1.5px dashed #ffbcd0;
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 14px;
	position: relative;
}
.cld-r-tags-box::before {
	content: "";
	position: absolute;
	top: -6px; left: 20px;
	width: 12px; height: 12px;
	background: #fff;
	border-top: 1.5px dashed #ffbcd0;
	border-left: 1.5px dashed #ffbcd0;
	transform: rotate(45deg);
}
.cld-r-tags-heading {
	font-size: 13px;
	font-weight: 700;
	color: #ff5a86;
	margin-bottom: 6px;
}
.cld-r-tags {
	list-style: none;
	padding: 0;
	margin: 0 0 6px;
}
.cld-r-tags li {
	font-size: 14px;
	color: #444;
	line-height: 1.7;
	font-weight: 600;
	position: relative;
	padding-left: 4px !important;
}
.cld-r-tags li::first-letter {
	color: #ff6b9d;
	font-weight: 800;
}
.cld-r-tags-footer {
	font-size: 13px;
	font-weight: 700;
	color: #ff5a86;
	text-align: right;
	margin-top: 4px;
}

/* === 理由 === */
.cld-r-reason {
	background: linear-gradient(135deg, #fff0f5 0%, #fff5ec 100%);
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 14px;
	border-left: 4px solid #ff6b9d;
}
.cld-r-reason-heading {
	font-size: 13px;
	font-weight: 800;
	color: #ff9558;
	margin-bottom: 4px;
	letter-spacing: 0.05em;
}
.cld-r-reason-body {
	font-size: 14px;
	color: #444;
	line-height: 1.65;
	font-weight: 500;
}
.cld-r-reason-body strong {
	color: #ff5a86;
	font-weight: 800;
}
.cld-r-reason-sparkle {
	margin-left: 2px;
}

/* === 画像 === */
.cld-r-image-wrap {
	text-align: center;
	margin-bottom: 14px;
	border-radius: 14px;
	overflow: hidden;
	background: #fff8fa;
	line-height: 0;
}
.cld-r-image {
	max-width: 100%;
	height: auto;
	display: inline-block;
	border-radius: 14px;
}

/* === 特徴 === */
.cld-r-features {
	background: #fff;
	border: 1.5px solid #ffe1ea;
	border-radius: 14px;
	padding: 14px 16px 16px;
	margin-bottom: 16px;
}
.cld-r-features-heading {
	font-size: 14px;
	font-weight: 800;
	color: #333;
	margin-bottom: 10px;
	padding-bottom: 8px;
	border-bottom: 1px dashed #ffd7e2;
	text-align: center;
	letter-spacing: 0.02em;
}
.cld-r-features-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cld-r-features-list li {
	position: relative;
	padding-left: 28px !important;
	font-size: 13.5px;
	color: #444;
	line-height: 1.6;
	margin-bottom: 8px !important;
	font-weight: 500;
}
.cld-r-features-list li:last-child {
	margin-bottom: 0 !important;
}
.cld-r-features-list li::before {
	content: "✓";
	position: absolute;
	left: 4px;
	top: 0;
	color: #fff;
	background: linear-gradient(135deg, #ff6b9d 0%, #ff9558 100%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	margin-top: 2px;
}

/* === CTA === */
.cld-r-cta-wrap {
	text-align: center;
	margin-bottom: 24px;
	padding: 0 4px;
}
.cld-r-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	background: linear-gradient(135deg, #ff6b9d 0%, #ff9558 100%);
	color: #fff !important;
	padding: 16px 12px;
	border-radius: 40px;
	text-decoration: none !important;
	font-weight: 800;
	font-size: 16px;
	box-shadow: 0 6px 16px rgba(255, 130, 160, 0.4), 0 2px 4px rgba(0,0,0,0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	position: relative;
	overflow: hidden;
	animation: cldCtaPulse 2s ease-in-out infinite;
	letter-spacing: 0.05em;
}
@keyframes cldCtaPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.02); }
}
.cld-r-cta:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 10px 22px rgba(255, 130, 160, 0.5);
	color: #fff !important;
	text-decoration: none !important;
}
.cld-r-cta-slash {
	font-size: 18px;
	font-weight: 900;
	opacity: 0.9;
}
.cld-r-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
	animation: cldCtaShine 3s ease-in-out infinite;
}
@keyframes cldCtaShine {
	0%   { left: -100%; }
	60%  { left: 120%; }
	100% { left: 120%; }
}

/* === 第二・第三候補 === */
.cld-r-others {
	margin-bottom: 20px;
}
.cld-r-others-heading {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #888;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
	position: relative;
}
.cld-r-others-heading::before,
.cld-r-others-heading::after {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1px;
	background: #d8d8d8;
	vertical-align: middle;
	margin: 0 10px;
}
.cld-r-sub-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1.5px solid #ffe6ec;
	border-radius: 12px;
	margin-bottom: 8px;
	text-decoration: none !important;
	color: #444 !important;
	transition: border-color 0.2s, transform 0.15s;
}
.cld-r-sub-card:hover {
	border-color: #ffb0c8;
	transform: translateX(2px);
	text-decoration: none !important;
}
.cld-r-sub-medal {
	font-size: 26px;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}
.cld-r-sub-info {
	flex: 1;
	min-width: 0;
}
.cld-r-sub-name {
	font-size: 14px;
	font-weight: 800;
	color: #333;
	margin-bottom: 2px;
}
.cld-r-sub-catch {
	font-size: 11.5px;
	color: #888;
	font-weight: 500;
}
.cld-r-sub-arrow {
	color: #ffb0c8;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

/* === リトライ === */
.cld-r-retry-wrap {
	text-align: center;
	margin-top: 8px;
}
.cld-r-retry {
	background: transparent;
	border: 1.5px solid #ffb0c8;
	color: #ff5a86;
	padding: 10px 22px;
	border-radius: 22px;
	font-size: 13px;
	cursor: pointer;
	font-weight: 700;
	font-family: inherit;
	transition: background 0.2s, transform 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cld-r-retry:hover {
	background: #fff0f5;
	transform: scale(1.02);
}
.cld-r-retry-icon {
	display: inline-block;
	transition: transform 0.5s ease;
}
.cld-r-retry:hover .cld-r-retry-icon {
	transform: rotate(180deg);
}

/* 結果全体のふわっと出現アニメ */
.cld-result-area.cld-fade-in .cld-r-header      { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0s both; }
.cld-result-area.cld-fade-in .cld-r-winner      { animation: cldRFloat 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 0.1s both; }
.cld-result-area.cld-fade-in .cld-r-tags-box    { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.3s both; }
.cld-result-area.cld-fade-in .cld-r-reason      { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.45s both; }
.cld-result-area.cld-fade-in .cld-r-image-wrap  { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.55s both; }
.cld-result-area.cld-fade-in .cld-r-features    { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.65s both; }
.cld-result-area.cld-fade-in .cld-r-cta-wrap    { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.8s both; }
.cld-result-area.cld-fade-in .cld-r-others      { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.95s both; }
.cld-result-area.cld-fade-in .cld-r-retry-wrap  { animation: cldRFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 1.1s both; }
@keyframes cldRFloat {
	0%   { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* SP調整 */
@media (max-width: 480px) {
	.cld-r-header-title { font-size: 18px; }
	.cld-r-brand { font-size: 26px; }
	.cld-r-crown { font-size: 40px; }
	.cld-r-pct-num { font-size: 36px; }
	.cld-r-pct-unit { font-size: 18px; }
	.cld-r-cta { font-size: 15px; padding: 14px 10px; }
	.cld-r-tags li { font-size: 13.5px; }
	.cld-r-reason-body { font-size: 13.5px; }
	.cld-r-features-list li { font-size: 13px; }
}

/* ============================
   診断中ローディング演出
============================ */
.cld-loading {
	padding: 40px 20px 44px;
	text-align: center;
	animation: cldFadeUp 0.4s ease;
}
@keyframes cldFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
.cld-loading-icon {
	font-size: 46px;
	line-height: 1;
	display: inline-block;
	animation: cldSearch 1.4s ease-in-out infinite;
	margin-bottom: 14px;
	filter: drop-shadow(0 3px 8px rgba(255, 140, 170, 0.35));
}
@keyframes cldSearch {
	0%   { transform: rotate(-15deg) translateX(-4px); }
	50%  { transform: rotate(15deg)  translateX(4px); }
	100% { transform: rotate(-15deg) translateX(-4px); }
}
.cld-loading-title {
	font-size: 15px;
	font-weight: 700;
	color: #ff5a86;
	margin-bottom: 6px;
	letter-spacing: 0.04em;
}
.cld-loading-title .cld-dots::after {
	content: "";
	animation: cldDots 1.2s steps(4, end) infinite;
}
@keyframes cldDots {
	0%   { content: ""; }
	25%  { content: "."; }
	50%  { content: ".."; }
	75%  { content: "..."; }
}
.cld-loading-sub {
	font-size: 12px;
	color: #999;
	margin-bottom: 18px;
	line-height: 1.5;
}
.cld-loading-bar {
	max-width: 240px;
	height: 8px;
	margin: 0 auto;
	background: #ffeef3;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}
.cld-loading-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #ff6b9d 0%, #ff9558 50%, #ffb84d 100%);
	background-size: 200% 100%;
	border-radius: 20px;
	transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
	animation: cldShimmer 1.2s linear infinite;
}
@keyframes cldShimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.cld-loading-pct {
	margin-top: 8px;
	font-size: 11px;
	font-weight: 700;
	color: #ff9558;
	letter-spacing: 0.05em;
}

/* 完了バースト */
.cld-complete-burst {
	padding: 30px 20px;
	text-align: center;
	animation: cldBurstIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cld-complete-text {
	font-size: 22px;
	font-weight: 800;
	background: linear-gradient(120deg, #ff6b9d 0%, #ff9558 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	animation: cldPulse 0.6s ease;
}
@keyframes cldBurstIn {
	0%   { opacity: 0; transform: scale(0.5); }
	60%  { opacity: 1; transform: scale(1.15); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes cldPulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}
.cld-sparkle {
	position: relative;
	display: inline-block;
}
.cld-sparkle::before,
.cld-sparkle::after {
	content: "✨";
	position: absolute;
	font-size: 16px;
	animation: cldSparkle 1.2s ease-in-out infinite;
}
.cld-sparkle::before { top: -8px; left: -22px; animation-delay: 0.1s; }
.cld-sparkle::after  { top: -4px; right: -22px; animation-delay: 0.5s; }
@keyframes cldSparkle {
	0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
	50%      { opacity: 1; transform: scale(1)   rotate(20deg); }
}

/* 結果カードのふわっ演出 */
.cld-card.cld-fade-in {
	animation: cldCardFluffy 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cldCardFluffy {
	0%   { opacity: 0; transform: translateY(20px) scale(0.85); filter: blur(4px); }
	60%  { opacity: 1; transform: translateY(-4px) scale(1.03); filter: blur(0); }
	100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.cld-result-header.cld-fade-in {
	animation: cldCardFluffy 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.cld-retry.cld-fade-in {
	animation: cldCardFluffy 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ============================
   診断中ローディング演出
============================ */
.cld-loading-area {
	padding: 40px 20px 44px;
	text-align: center;
	animation: cldFadeInSoft 0.4s ease;
}
@keyframes cldFadeInSoft {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cld-loading-icon {
	font-size: 48px;
	line-height: 1;
	display: inline-block;
	animation: cldSearchBounce 1.2s ease-in-out infinite;
	margin-bottom: 14px;
	filter: drop-shadow(0 4px 8px rgba(255, 140, 170, 0.3));
}
@keyframes cldSearchBounce {
	0%, 100% { transform: translateY(0) rotate(-8deg); }
	50%      { transform: translateY(-10px) rotate(8deg); }
}

.cld-loading-title {
	font-size: 16px;
	font-weight: 800;
	background: linear-gradient(90deg, #ff6b9d 0%, #ff9558 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 6px;
	letter-spacing: 0.05em;
}
.cld-loading-title .cld-dots {
	display: inline-block;
	animation: cldDots 1.4s steps(4, end) infinite;
	overflow: hidden;
	vertical-align: bottom;
	width: 0;
	white-space: nowrap;
	-webkit-text-fill-color: #ff6b9d;
}
@keyframes cldDots {
	to { width: 1.2em; }
}

.cld-loading-sub {
	font-size: 12px;
	color: #999;
	margin-bottom: 18px;
	font-weight: 500;
}

/* ブロック型プログレスバー */
.cld-loading-bar {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 8px;
}
.cld-loading-block {
	width: 22px;
	height: 12px;
	border-radius: 3px;
	background: #ffe6ec;
	transition: background 0.3s ease, transform 0.3s ease;
}
.cld-loading-block.on {
	background: linear-gradient(135deg, #ff6b9d 0%, #ff9558 100%);
	transform: scaleY(1.15);
	box-shadow: 0 2px 6px rgba(255, 130, 160, 0.35);
}

/* 完了フラッシュ */
.cld-loading-complete {
	animation: cldCompletePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cld-loading-complete .cld-loading-icon {
	animation: cldIconBurst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
	font-size: 42px;
}
@keyframes cldIconBurst {
	0%   { transform: scale(0.4) rotate(-30deg); opacity: 0; }
	60%  { transform: scale(1.25) rotate(10deg); opacity: 1; }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.cld-loading-complete .cld-loading-title {
	font-size: 20px;
	animation: cldCompleteText 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cldCompleteText {
	0%   { transform: scale(0.7); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes cldCompletePop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.03); }
	100% { transform: scale(1); }
}

/* 結果カードふわっと出現 */
.cld-result-area.cld-fade-in .cld-card {
	opacity: 0;
	transform: translateY(20px);
	animation: cldCardFloat 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.cld-result-area.cld-fade-in .cld-result-header {
	opacity: 0;
	transform: translateY(-10px);
	animation: cldCardFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.cld-result-area.cld-fade-in .cld-card.rank-1 { animation-delay: 0.15s; }
.cld-result-area.cld-fade-in .cld-card.rank-2 { animation-delay: 0.3s; }
.cld-result-area.cld-fade-in .cld-card.rank-3 { animation-delay: 0.45s; }
.cld-result-area.cld-fade-in .cld-retry {
	opacity: 0;
	animation: cldCardFloat 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) 0.6s forwards;
}
@keyframes cldCardFloat {
	0%   { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
	.cld-loading-area { padding: 32px 16px 36px; }
	.cld-loading-icon { font-size: 42px; }
	.cld-loading-title { font-size: 15px; }
	.cld-loading-complete .cld-loading-title { font-size: 18px; }
	.cld-loading-block { width: 18px; height: 10px; }
}