/* ============================================
   lower-nav.css
   下層ページ共通サイドバーナビゲーション
   ============================================ */

.cases-nav {
	border-radius: var(--radius-5);
	margin-top: 6px;
}

.cases-nav__heading {
	background-color: var(--color-navy-2);
	border-radius: var(--radius-5);
	color: var(--color-white-1);
	font-family: var(--font-family-noto-sans-jp);
	font-size: var(--font-size-15);
	font-weight: var(--font-weight-700);
	line-height: normal;
	padding: 20px 16px;
}

.cases-nav__link {
	color: var(--color-gray-2);
	display: block;
	font-family: var(--font-family-noto-sans-jp);
	font-size: var(--font-size-15);
	font-weight: var(--font-weight-700);
	line-height: normal;
	text-decoration: none;
	transition: color 0.2s ease;
}

.cases-nav__link.is-current {
	color: var(--color-black-2);
}

.cases-nav__link:hover {
	color: var(--color-navy-2);
}

.cases-nav__link.is-current:hover {
	color: var(--color-black-2);
}

@media screen and (min-width: 1025px) {
	.cases-nav {
		align-self: start;
		position: sticky;
		top: clamp(48px, 4.4vw, 64px);
	}

	.cases-nav__list {
		margin: 18px 0 0 16px;
	}

	.cases-nav__item + .cases-nav__item {
		margin-top: 39px;
	}
}

@media screen and (max-width: 1024px) {
	.cases-nav {
		display: none;
	}

	.cases-nav__list {
		display: grid;
		gap: 8px;
		margin-top: 16px;
	}

	.cases-nav__item + .cases-nav__item {
		margin-top: 0;
	}

	.cases-nav__link {
		line-height: 1.5;
	}
}