/* ==========================================================================
   Clarino - pages/future.css
   /future/（page-future.php）専用。
   ========================================================================== */

.page-future__hero-image {
	width: 100%;
	border-radius: var(--radius-base);
	margin-bottom: var(--space-2);
}

.page-future__title {
	font-size: var(--fs-hero);
}

.page-future__intro,
.page-future__concerns,
.page-future__services,
.page-future__flow,
.page-future__note,
.page-future__vacant-house-link {
	margin-top: var(--space-4);
}

.page-future__concerns ul {
	background-color: var(--color-gray-50);
	border-radius: var(--radius-base);
	padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 1em);
}

.page-future__concerns li {
	margin-bottom: var(--space-1);
}

.page-future__service-item {
	margin-bottom: var(--space-3);
}

.page-future__service-item h3 {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-1);
}

.page-future__flow ol {
	padding-left: 1.5em;
}

.page-future__flow li {
	margin-bottom: var(--space-3);
}

.page-future__flow li strong {
	display: block;
	font-size: var(--fs-lg);
	margin-bottom: var(--space-1);
}

.page-future__note {
	font-size: var(--fs-sm);
	color: var(--color-gray-500);
	background-color: var(--color-gray-50);
	border-radius: var(--radius-base);
	padding: var(--space-2);
}

.page-future__footer {
	margin-top: var(--space-6);
	text-align: center;
}

@media (min-width: 768px) {
	.page-future__intro,
	.page-future__concerns,
	.page-future__services,
	.page-future__flow,
	.page-future__note,
	.page-future__vacant-house-link {
		margin-top: var(--space-6);
	}
}