/*
 * サイト共通スタイルシート
 */

:root {
	--nav-border-color: #20c997; /* ナビゲーション下線の色 (BootstrapのTeal) */
	--nav-icon-size: 2rem; /* ナビゲーションアイコンのサイズ */
	--nav-icon-padding: 0.5rem; /* ナビゲーションアイコンの左右余白 */
}

/* ナビゲーションバーのカスタム下線 */
header.navigation {
	position: relative; /* ::after疑似要素の基準点とするため */
}
header.navigation::after {
	content: '';
	position: absolute;
	bottom: 0; /* headerの最下部に配置 */
	left: 0;
	width: 100%;
	height: 1px; /* 線の太さ */
	/* 指定色から中央に向かって透明になるグラデーション */
	background: linear-gradient(to right, var(--nav-border-color), transparent, var(--nav-border-color));
}

/* ナビゲーションアイコンのサイズ調整 */
.navigation li a .bi {
	font-size: var(--nav-icon-size);
	color: var(--bs-link-color); /* Bootstrap標準のリンク色を使用 */
}
/* ナビゲーションリンクの余白調整 */
.navigation li a {
	padding-left: var(--nav-icon-padding);
	padding-right: var(--nav-icon-padding);
}