/* Smooth Scrolling */
html {
	scroll-behavior: smooth;
}

/* Explicit Font Override for Android Support */
.font-serif {
	font-family: "Playfair Display", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
}

/* Custom Utilities */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Custom Utilities */
.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-up.in-view {
	opacity: 1;
	transform: translateY(0);
}

/* Hero Image Animation */
.hero-bg-animate {
	animation: slowZoom 20s ease-in-out infinite alternate;
}

@keyframes slowZoom {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15);
	}
}

.delay-100 {
	animation-delay: 0.1s;
}
.delay-200 {
	animation-delay: 0.2s;
}
.delay-300 {
	animation-delay: 0.3s;
}
.delay-500 {
	animation-delay: 0.5s;
}
.delay-700 {
	animation-delay: 0.7s;
}

/* ====================================
   News Detail - 見出しスタイル
   記事本文内のh2, h3を装飾して階層を明確化
   ==================================== */

/* h2: セクション見出し - 左ボーダー付き */
.prose h2,
.leading-loose h2 {
	font-size: 1.5rem !important;
	font-weight: 600 !important;
	color: #2c3333 !important; /* brand-charcoal */
	margin-top: 2.5rem !important;
	margin-bottom: 1rem !important;
	padding-left: 1rem !important;
	border-left: 4px solid #8fa998 !important; /* brand-sage */
	line-height: 1.4 !important;
}

/* h3: サブセクション - 下線付き */
.prose h3,
.leading-loose h3 {
	font-size: 1.25rem !important;
	font-weight: 600 !important;
	color: #4a4a4a !important; /* brand-dark */
	margin-top: 2rem !important;
	margin-bottom: 0.75rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 2px solid #e6e2dd !important; /* brand-beige */
	line-height: 1.4 !important;
}

/* 最初の見出しはマージン上部を削除 */
.prose h2:first-child,
.leading-loose h2:first-child,
.prose h3:first-child,
.leading-loose h3:first-child {
	margin-top: 0 !important;
}
