@charset "utf-8";

body {
  margin: 0;
  padding: 0;
}

.contents {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main"
    "sub";
  gap: 20px;
}
.main {
  grid-area: main;
  background-color: orange;
}
.sub {
  grid-area: sub;
  background-color: purple;
}
@media screen and (min-width: 768px), print {
  .contents {
    grid-template-columns: 1fr 200px;
    grid-template-areas: "main sub";
    max-width: 1200px;
    margin-inline: auto;
  }
}

.table-wrap {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table {
  min-width: 100%;
  width: max-content;
}
th, td {
  padding:5px 10px;
}