@charset “UTF-8”;

}

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;

}