/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset, legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

ul {
  list-style: none; }

button, input, select, textarea {
  margin: 0; }

html {
  box-sizing: border-box; }

*, *::before, *::after {
  box-sizing: inherit; }

img, video {
  height: auto;
  max-width: 100%; }

iframe {
  border: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td, th {
  padding: 0; }

td:not([align]), th:not([align]) {
  text-align: left; }

body {
  min-width: 290px;
  line-height: 1.5;
  background-color: #ffffff;
  color: #4d4e53;
  font-family: "Noto Sans JP", sans-serif; }

@media (min-width: 1000px) {
  body {
    display: flex; }
    body nav {
      width: 1200px; } }

#nav-bar header {
  padding: 20px 0;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #0b0b0b; }

#nav-bar ul {
  height: 200px;
  overflow: scroll;
  border: 1px solid #4d4e53; }

#nav-bar li {
  border-top: 1px solid #4d4e53; }

#nav-bar a {
  display: block;
  text-decoration: none;
  padding: 10px 30px;
  color: #4d4e53;
  cursor: pointer; }

@media (min-width: 1000px) {
  #nav-bar ul {
    height: 100%; } }

.main-section {
  padding: 15px 20px;
  overflow: scroll; }
  .main-section h1 {
    font-size: 25px;
    font-weight: bold; }
  .main-section p {
    margin: 10px 0 0 25px; }
  .main-section ul {
    list-style: circle; }
  .main-section li {
    margin: 15px 0 0 100px; }