@charset "UTF-8";

* {
	box-sizing: border-box;
}

@media not print {
	
	html, body
	{
		scroll-behavior: smooth;
		min-height: 100%;
	}
	
	header
	{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		padding: $header-padding 0;
		height: $header-height;
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
	}
	
	.wrapper
	{
		display: flex;
		flex-direction: row;
	}
	
	nav, .contents {
		flex: 0 0 auto;
	}
	
	nav .inner
	{
		padding-top: $header-height / 2;
		padding-left: $sidebar-padding / 2;
		height: calc(100vh - #{$header-height});
		
		overflow: hidden auto;
		position: sticky;
		top: $header-height;
	}
	
	main
	{
		flex: 1;
		display: flex;
		flex-direction: row;
		margin-top: $header-height;
		padding: $header-height/2 0;
	}
	
	.contents {
		order: 2;
	}
	
	.contents .inner
	{
		position: sticky;
		top: $header-height * 1.5;
	}
	
	.contents ul li a {
		display: block;
	}
	
	.contents-inline {
		display: none;
	}
	
	article
	{
		order: 1;
		flex: 1;
	}
	
}