/* ===============================
   blog-related: 季節の薬膳メニューへの小さな関連導線
   =============================== */

.blog-related {
	background: var(--color-bg);
}

.blog-related__inner {
	display: grid;
	grid-template-columns: 43px auto 43px;
	align-items: center;
	justify-content: center;
	gap: 14px;
	width: 343px;
	max-width: 100%;
	min-height: 23.5px;
	margin-inline: 0 auto;
	padding-inline: 0;
}

.blog-related__inner::before,
.blog-related__inner::after {
	border-top: 1px solid var(--color-main);
	content: "";
}

.blog-related__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 23.5px;
	border-bottom: 1px solid var(--color-primary);
	color: var(--color-primary);
	font-size: 9px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.blog-related__link::after {
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	content: "";
	transform: rotate(45deg);
}

@media (max-width: 767px) {
	.blog-related {
		padding-block: var(--space-3);
	}

	.blog-related__inner {
		grid-template-columns: 32px minmax(0, 1fr) 32px;
		gap: var(--space-3);
		width: 100%;
		min-height: 48px;
		padding-inline: var(--space-5);
	}

	.blog-related__link {
		justify-content: center;
		min-height: 48px;
		font-size: var(--fs-body);
	}
}

@media (min-width: 768px) {
	.blog-related__inner {
		display: flex;
		gap: var(--space-8);
		width: 100%;
		max-width: 1306px;
		min-height: 100px;
		padding-inline: 0;
		border: 1px solid var(--color-main);
	}

	.blog-related__inner::before,
	.blog-related__inner::after {
		display: none;
	}

	.blog-related__link {
		justify-content: space-between;
		width: 100%;
		min-height: 98px;
		padding-inline: var(--space-8);
		border-bottom: 0;
		font-size: 24px;
	}
}