#relief .font-maru {
	font-family: 'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
}

#relief .font-number {
	font-family: 'Bahnschrift', 'Noto Sans JP', sans-serif;
}

#relief .fade-in {
	opacity: 0;
	transform: scale(0.98);
	transition:
		opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#relief .fade-in.is-visible {
	opacity: 1;
	transform: scale(1);
}

#relief .relief-intro-bubble::before,
#relief .relief-intro-bubble::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 0;
	height: 0;
	transform: translateX(-50%);
}

#relief .relief-intro-bubble::before {
	bottom: -16px;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 16px solid rgba(57, 72, 104, 0.3);
}

#relief .relief-intro-bubble::after {
	bottom: -12px;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-top: 14px solid #ffffff;
}

#relief .relief-card-number {
	transition: color 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: 0.3s;
}

#relief .relief-card.is-visible .relief-card-number {
	color: #e198a6 !important;
}

#relief .relief-feature-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: #394868;
	font-weight: 700;
	font-size: 1.15em;
	line-height: 1.65;
}

#relief .relief-card-illustration::after {
	content: '[ イラスト プレースホルダー ]';
	font-family: 'DM Mono', monospace;
	font-size: 11px;
	color: rgba(57, 72, 104, 0.3);
	letter-spacing: 0.05em;
}

#relief .relief-card-illustration:has(img)::after,
#relief .relief-card-illustration:has(video)::after {
	content: none;
}

#relief .relief-intro-bubble.fade-in { transition-delay: 0.1s; }
#relief .relief-intro-dot.fade-in { transition-delay: 0.3s; }
#relief .relief-intro-message.fade-in { transition-delay: 0.5s; }
#relief .relief-intro-divider.fade-in { transition-delay: 0.8s; }
#relief .relief-intro-wish.fade-in { transition-delay: 1s; }
#relief .relief-lead.fade-in { transition-delay: 0.1s; }
#relief .relief-headline.fade-in { transition-delay: 0.5s; }
#relief .relief-card.fade-in:nth-of-type(1) { transition-delay: 0.9s; }
#relief .relief-card.fade-in:nth-of-type(2) { transition-delay: 1.1s; }
#relief .relief-card.fade-in:nth-of-type(3) { transition-delay: 1.3s; }
#relief .relief-card.fade-in:nth-of-type(4) { transition-delay: 1.5s; }
#relief .relief-cta-copy.fade-in { transition-delay: 0.2s; }
#relief .relief-cta-buttons.fade-in { transition-delay: 0.5s; }

.color-switch button.active {
	background: #394868 !important;
	color: #ffffff !important;
}

@media (min-width: 1025px) {
	#relief .relief-card:nth-of-type(even) .relief-card-inner {
		grid-template-columns: 1fr 1.1fr;
	}

	#relief .relief-card:nth-of-type(even) .relief-card-text {
		order: 2;
	}

	#relief .relief-card:nth-of-type(even) .relief-card-illustration {
		order: 1;
	}
}

body.label-navy #relief .relief-card.is-visible .relief-card-number {
	color: #394868 !important;
	background: none !important;
	-webkit-text-fill-color: initial !important;
	transition-delay: 0s !important;
}

body.label-pink #relief .relief-card-number {
	color: #e198a6 !important;
	background: none !important;
	-webkit-text-fill-color: initial !important;
	transition-delay: 0s !important;
}

body.label-gradient #relief .relief-card-number,
body.label-gradient #relief .relief-card.is-visible .relief-card-number {
	background: linear-gradient(135deg, #e198a6 0%, #e198a6 80%, #a2d7dd 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	transition-delay: 0s !important;
}

@media (max-width: 1024px) {
	#relief .relief-card-inner {
		grid-template-areas:
			"number"
			"title"
			"illustration"
			"body"
			"features"
			"note";
	}

	#relief .relief-card-text {
		display: contents;
	}

	#relief .relief-card-number { grid-area: number; }
	#relief .relief-card-title { grid-area: title; }
	#relief .relief-card-illustration { grid-area: illustration; }
	#relief .relief-card-body { grid-area: body; }
	#relief .relief-feature-list { grid-area: features; }
	#relief .relief-card-note { grid-area: note; }
}