:root {
  --primary-color: #333;
}

body {
  color: var(--primary-color);
  margin: 24px;
  min-height: 600px;
}

nav ul {
  margin: 3px;
  display: flex;
  list-style: none;
}

nav ul li {
  margin-left: 15px;
}

nav ul li a {
  text-decoration: none;
  color: var(--primary-color);
}

.container {
  display: flex;
}

.maincontents {
  margin-left: 15px;
  order: 1;
}

.subcontents {
  border-right: solid #333 1px;
  order: 0;
  width: 200px;
  flex-shrink: 0;
}

.subcontents h2 a {
  text-decoration: none;
  color: var(--primary-color);
}

img {
  max-width: 100%;
}

iframe {
  width: 170%;
}

@media (max-width: 767px) {
  .container {
    display: block;
  }

  .subcontents {
    border-top: solid #333 1px;
    border-right: none;
    order: 0;
    width: 100%;
  }
  iframe {
    width:100%;
  }
}