.side-bar {
	margin: var(--spacing-0_00em);
	padding: var(--spacing-0_50em);
	overflow: hidden;
	background: var(--color-gray-100);

	@media screen and (min-width: 768px) {
		width: var(--size-34_00em);
		border-radius: var(--radius-1_00em);
		margin: var(--spacing-1_00em) auto var(--spacing-2_00em);
	}

	@media screen and (min-width: 1024px) {
		padding: var(--spacing-1_00em);
		margin: var(--spacing-0_25em) var(--spacing-0_00em) var(--spacing-2_00em);
		border-radius: var(--radius-1_00em);
		width: var(--size-18_75em);
		float: right;
	}

	ul {
		margin: var(--spacing-1_00em) var(--spacing-0_00em);
	}

	li {
		text-align: left;
	}

	div {
		clear: both;
	}

	h2 {
		clear: both;
		font-size: var(--fontSize-1_1em);
		margin: var(--spacing-0_00em) var(--spacing-0_00em) var(--spacing-1_00em);
		font-weight: normal;
		position: relative;
		color: var(--color-gray-100);
		padding: var(--spacing-0_50em) var(--spacing-1_50em);
		background-color: var(--color-gray-700);
		border-radius: var(--radius-0_25em);
		line-height: var(--lineHeight-1_3);

		&::after {
			position: absolute;
			top: 50%;
			left: 0.7em;
			transform: translateY(-50%);
			content: "";
			width: var(--size-005px);
			height: 1.2em;
			background-color: var(--color-gray-100);
		}

		&:not(:first-child) {
			margin-top: var(--spacing-2_00em);
		}
	}

	h3 {
		font-weight: normal;
		font-size: var(--fontSize-1_1em);
		text-align: center;
		margin: var(--spacing-0_00em) auto;
		color: var(--color-gray-900);
		padding: var(--spacing-0_10em);
		background-color: var(--color-gray-700);
	}

	/* 共通: サイドバー内のリンクボタン風リスト */
	.old_year_date,
	.area {
		li {
			box-sizing: border-box;
			background: var(--color-gray-300);
			margin-bottom: 0.4em;

			a {
				color: var(--color-gray-900);
				display: block;

				&:hover {
					text-decoration: none;
					background: var(--color-gray-700);
					color: var(--color-gray-100);
				}
			}
		}
	}

	.old_year_date {
		ul {
			display: flex;
			flex-wrap: wrap;

			li {
				width: var(--size-32pct);
				margin: var(--spacing-0_10em);

				a {
					font-size: var(--fontSize-0_8em);
					text-align: center;
					padding: var(--spacing-0_25em) var(--spacing-0_00em);
				}
			}
		}
	}

	.area {
		li {
			margin: var(--spacing-0_625em) var(--spacing-0_00em);

			a {
				font-size: var(--fontSize-0_8em);
				padding: var(--spacing-0_25em) var(--spacing-0_625em);
			}
		}
	}
}