/*
  まず、2つのfixed-subをまとめる。さらにfixed-subとvariable-subをまとめてsubとする。
  >=1200の場合、これらのsubを両端に配置。flexが使えるかと。中央にmain.
  mainはこれらとは独立している方がいいと思う。
*/

html {
  font-size:62.5%;
}

* {
  box-sizing: border-box;
}

body {
  margin:0;
  width:100%;
  height:100dvh;
  display:grid;
  grid-template-rows:1fr 40px;
  font-size:1.8rem;
  position:relative;
}

main{
  display:grid;
  overflow:auto;
  width:100%;
  position:relative;
}

/* もっとも基本的なあれ */

#main{
  background-color: rgb(200,200,200);
  overflow:scroll;
}
#fixed-sub0{
  background-color:rgb(200,100,200);
  overflow:scroll;
}
#fixed-sub1{
  background-color:rgb(100,200,200);
  overflow:scroll;
}
#variable-sub{
  background-color:rgb(200,200,100);
  overflow:scroll;
}

@media screen and (min-width: 900px) {
  main{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
  }
  #main{
    width:600px;
    display:block;
  }
  #sub{
    display:flex;
    flex-direction:column;
  }
  #fixed-sub{
    width:300px;
    order:1;
  }
  #variable-sub{
    width:300px;
    order:2;
  }
}

@media screen and (min-width: 1200px) {
  #sub{
    position:absolute;
    left:0;
    right:0;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:baseline;
  }
  #fixed-sub{
    width:300px;
  }
  #variable-sub{
    width:300px;
  }
  #main{
    width:600px;
    display:block;
    margin:0 auto;
  }
}

#footer{
  background-color:black;
  color:white;
}