/* ==========================================================================
   Clarino - pages/reform-category.css
   /reform/{category}/ 8ページ共通テンプレート（page-reform-category.php）専用。
   ========================================================================== */

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

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

.page-reform-category__intro,
.page-reform-category__pain-points,
.page-reform-category__work-items,
.page-reform-category__price-duration,
.page-reform-category__manufacturers,
.page-reform-category__related-works,
.page-reform-category__faq {
	margin-top: var(--space-4);
}

.page-reform-category__price-duration dl {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	background-color: var(--color-gray-50);
	border-radius: var(--radius-base);
	padding: var(--space-2);
}

.page-reform-category__price-duration dl > div {
	display: flex;
	justify-content: space-between;
	gap: var(--space-2);
}

.page-reform-category__price-duration dt {
	font-weight: 700;
}

.page-reform-category__manufacturer-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding: 0;
}

.page-reform-category__manufacturer-list li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-sm);
}

.page-reform-category__manufacturer-list img {
	max-height: 40px;
	width: auto;
}

.page-reform-category__faq-item {
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-base);
	padding: var(--space-2);
	margin-bottom: var(--space-1);
}

.page-reform-category__faq-item summary {
	font-weight: 700;
	cursor: pointer;
}

.page-reform-category__faq-item p {
	margin-top: var(--space-1);
	margin-bottom: 0;
}

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

@media (min-width: 768px) {
	.page-reform-category__price-duration dl {
		flex-direction: row;
	}

	.page-reform-category__price-duration dl > div {
		flex: 1;
		flex-direction: column;
		gap: var(--space-1);
	}
}