@media #{$small} {
	#header,
	#sidebar {
		position: relative;
		z-index: 3;
	}
	#header nav,
	#sidebar nav {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		height: 100vh;
		overflow: scroll;
		@include coat-auto(mobile-nav);
		& > ul {
			height: auto;
			@include coat-auto(mobile-nav-list);
		}

		a {
			display: block;
			white-space: nowrap;
			text-decoration: none;
			@include coat-auto(mobile-nav-link);

			&:hover {
				@include coat-auto(mobile-nav-link, hover);
			}
		}
		.active > a {
			@include coat-auto(mobile-nav-link, active);
			&:hover {
				@include coat-auto(mobile-nav-link, active-hover);
			}
		}
		ul ul {
			a {
				@include coat-auto(mobile-nav-link-sub);
				&:hover {
					@include coat-auto(mobile-nav-link-sub, hover);
				}
			}
			.active > a {
				@include coat-auto(mobile-nav-link-sub, active);
				&:hover {
					@include coat-auto(mobile-nav-link-sub, active-hover);
				}
			}
		}

		/* Reset*/
		li {
			padding-left: 0;
			& + li {
				margin-top: 0;
			}
		}
		li::before {
			content: none;
		}
		ul {
			margin-top: 0;
		}
	}
}