@charset "UTF-8";

body {
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: rgb(236, 197, 149);
}
header_base {
  display: block;        /* ← これを追加 */
  height: auto;
  background-color: #3a3a3a;
}

header_base, nav_base, main_base, side_base, footer_base {
  display: block;
}


.layout-wrap {
  display: flex;
  flex: 1;
  gap: 12px;
  min-width: 0;
}

nav_base {
  flex: 0 0 180px;
  min-width: 0;
}

main_base {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 400px);
  overflow-wrap: anywhere;
  word-break: break-word;
}

side_base {
  flex: 0 0 220px;
  min-width: 0;
  background-color: #3a3a3a;
}

footer_base {
  min-height: 20px;
}

@media screen and (max-width: 800px) {
  body {
    max-width: none;
  }

  .layout-wrap {
    flex-direction: column;
  }

  main_base {
    order: -1;
    max-width: none;
  }

  nav_base,
  side_base {
    width: auto;
    flex: none;
  }
}