/*
  まず、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;
  overflow-x:hidden;
}
#fixed-sub0{
  background-color:rgb(200,100,200);
  overflow:scroll;
  overflow-x:hidden;
}
#fixed-sub1{
  background-color:rgb(100,200,200);
  overflow:scroll;
  overflow-x:hidden;
}
#variable-sub{
  background-color:rgb(200,200,100);
  overflow:scroll;
  overflow-x:hidden;
}

main{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  position:relative;
}

#open-button{
  position:absolute;
  left:0;
  right:0;
  display:block;
  width:40px;
  height:40px;
}

#main{
  width:600px;
  margin:0 auto;
  display:block;
}

#sub{
  position:absolute;
  height:calc(100dvh - 40px);
  display:flex;
  left:-300px;
  flex-direction:column;
  transition:0.2s;
}
#sub.open{
  left:0px;
}
#fixed-sub{
  width:300px;
  order:1;
}
#variable-sub{
  width:300px;
  order:2;
}

@media screen and (min-width: 900px) {
  #open-button{
    display:none;
  }
  main{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
  }
  #main{
    width:600px;
    display:block;
  }
  #sub{
    position:static;
    display:flex;
    flex-direction:column;
    left:0;
  }
  #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:center;
    align-items:baseline;
    gap:600px;
  }
  #fixed-sub{
    width:300px;
    order:2;
  }
  #variable-sub{
    width:300px;
    order:1;
  }
  #main{
    width:600px;
    display:block;
    margin:0 auto;
  }
}

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