/*divに対してflex: 1;を当て高さをいっぱいに設定したいのでflexプロパティは親要素がdisplayプロパティを持っていないと効かないので今回の親のbodyタグにdisplayプロパティをまず当てる*/
body {
  width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header {
  height: 500px;
  font-size: clamp(16px, 3vw, 28px);
}
  /* 比較関数のclampでレスポンシブ対応*/
h1 {
  margin: 0;
}
p {
  margin: 1px;
  font-size: 16px;
}
.container {
  display: flex;
  flex: 1;
  background-color: skyblue;
}
nav {
  width: 100px;
  border-right: 1px solid black;
}
main {
  width: 600px;
  
  /* display: flex; */
  /* border-right: 1px solid black; */
}
main ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
}
.section1 p {
  background-color: chocolate;
  width: 150px;
  height: 150px;
  font-size: 15px;
}
.section2 p {
  background-color: rgb(163, 190, 65);
  width: 150px;
  height: 150px;
  font-size: 15px;
}
.section3 p {
  background-color: pink;
  width: 150px;
  height: 150px;
  font-size: 15px;
}
.section4 p {
  background-color: #D2CCE6;
  width: 150px;
  height: 150px;
  font-size: 15px;
}
.character-w1 p {
  background-color: yellow;
  width: 450px;
  height: 50px;
  /* font-size: 15px; */
  }
.image-w1 p {
  background-color: white;
  width: 147px;
  height: 100px;
  /* font-size: 15px; */
  }
.image-t1 p {
  background-color: white;
  width: 150px;
  height: 100px;
  
  }
  .character-t1 p {
    background-color: yellow;
    width: 447px;
    height: 50px;
    
    }
    .image-n1 p {
      background-color: white;
      width: 150px;
      height: 100px;
      
      }  
    .character-n1 p {
      background-color: yellow;
      width: 447px;
      height: 75px;
      
      }
      .image-s1 p {
        background-color: white;
        width: 150px;
        height: 100px;
        
        }  
      .character-s1 p {
        background-color: yellow;
        width: 447px;
        height: 75px;
        
        }   
      


aside {
  width: 200px;
  border-left: 1px solid black;
  
}
.memo1 p {
  background-color: gold;
  width: 180px;
  height: 20px;
  font-size: 15px;
}
.memo2 p {
  background-color: burlywood;
  width: 180px;
  height: 130px;
  font-size: 15px;
}
#footer {
  float: left;
  width: 900px;
  padding: 15px 0 0 15px;
  font-size: 12px;
  color: #aaa;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}

@media screen and (max-width: 800px) {
  body {
    width: 100%;
  }
  div {
    flex-direction: column;
  }
  nav,aside {
    width: 100%;
    border-top: 1px solid black;
  }
  main {
    order: -1;
  }
}