/* ==========================================================================
   Clarino - pages/single.css
   ブログ記事詳細（single.php）専用。
   ========================================================================== */

.single-post__header {
	margin-bottom: var(--space-3);
}

.single-post__title {
	font-size: var(--fs-hero);
	margin-bottom: var(--space-1);
}

.single-post__date {
	font-size: var(--fs-sm);
	color: var(--color-gray-500);
}

.single-post__thumbnail {
	margin-bottom: var(--space-4);
}

.single-post__thumbnail img {
	width: 100%;
	border-radius: var(--radius-base);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.single-post__content {
	max-width: 720px;
	margin: 0 auto;
}

.single-post__content p {
	margin-bottom: var(--space-3);
}

.single-post__content h2 {
	font-size: var(--fs-xl);
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
}

.single-post__content h3 {
	font-size: var(--fs-lg);
	margin-top: var(--space-4);
	margin-bottom: var(--space-1);
}

.single-post__content ul,
.single-post__content ol {
	margin-bottom: var(--space-3);
	padding-left: 1.5em;
}

.single-post__content li {
	margin-bottom: var(--space-1);
}

.single-post__content img {
	border-radius: var(--radius-base);
	margin: var(--space-3) 0;
}

.single-post__footer {
	margin-top: var(--space-6);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}