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

  headerは60pxくらいで。
*/

html {
  font-size:calc(100% * 0.625);
}

* {
  box-sizing: border-box;
}

body {
  margin:0;
  width:100%;
  height:100dvh;
  display:grid;
  grid-template-rows:6rem 1fr; /* header - main */
  font-size:1.8rem;
}

main{
  width:100%;
  position:relative;
  display:flex; /* これは最終的に最大幅の場合に適用される。 */
  flex-direction:row;
  justify-content:space-around;
  overflow:hidden; /* 画面外のサブコンテンツを表示しないための措置 */
}

#header{
  background-color:teal;
  color:white;
}

/* 900px未満の場合は非表示 */
#header-links{
  display:none;
}

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

#main{
  background-color: rgb(200,200,200);
  overflow:scroll;
  padding:0 1rem;
}
#fixed-sub0{
  background-color:rgb(200,100,200);
  overflow:scroll;
  max-height:calc(100dvh - 6rem);
}
#fixed-sub1{
  background-color:rgb(100,200,200);
  overflow:scroll;
  max-height:calc(100dvh - 6rem);
}
#variable-sub{
  background-color:rgb(200,200,100);
  overflow:scroll;
  max-height:calc(100dvh - 6rem);
}

/* タブ操作用ボタン。横並び。 */
#tab-buttons{
  position:absolute;
  top:0.5rem;
  right:0.5rem;
  height:5rem;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  width:21rem;
  max-width:100%;
}

.toggle-button{
  width:24%;
  height:100%;
  border: none;
  border-radius:1.2rem;
}

.toggle-button[role="tab"][aria-selected=false]{ /* ここ離すとアウトなんだ。半角スペース禁止！ */
  background-color:gray;
}

.toggle-button[role="tab"][aria-selected=false]:hover{
  background-color:rgb(200,200,200);
}

.toggle-button[role="tab"][aria-selected=true]{ /* ここ離すとアウトなんだ。半角スペース禁止！ */
  background-color:aquamarine;
}

/* 900px未満の場合のデザイン */
#main{
  width:60rem;
  margin:0 auto;
  display:block;
}

#fixed-sub0{
  width:30rem;
  position:absolute;
  right:-30rem;
  transition:0.2s;
}
#fixed-sub0.open{
  right:0;
}

#fixed-sub1{
  width:30rem;
  position:absolute;
  right:-30rem;
  transition:0.2s;
}
#fixed-sub1.open{
  right:0;
}

#variable-sub{
  width:30rem;
  position:absolute;
  right:-30rem;
  transition:0.2s;
}
#variable-sub.open{
  right:0;
}

/* 900px～1200pxの場合のデザイン */
/* break-pointは変数を使えないので、手動で同じ比率を設定する */
@media screen and (min-width: calc(90rem * 0.625)) {
  /* リンクは表示しないので消す */
  #fixed-sub0{
    display:none;
  }

  /* 代わりにheaderにリンクを置く */
  #header-links{
    height:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    gap:2rem;
  }

  .link-div{
    display:flex;
    align-items:center;
  }

  /* 使わないので、ボタンを消す */
  #tab-buttons{
    display:none;
  }

  #main{
    width:66%;
    display:block;
  }
  #sub{
    position:static;
    display:flex; /* subのエリアに他のsubを縦に並べる */
    flex-direction:column;
    overflow:scroll;
    height:fit-content;
    max-height:calc(100dvh - 6rem);
  }
  /* sub0は消すので不要なのと、外側のoverflowをscrollにし内部の方は無効にすることで全体をスクロールさせる */
  #fixed-sub{
    width:30rem;
    overflow:visible;
  }
  #fixed-sub1{
    position:static;
    overflow:visible;
    max-height:none;
  }
  #variable-sub{
    width:30rem;
    position:static;
    overflow:visible;
    max-height:none; /* max-heightの設定を殺しておかないとエリアの指定がおかしくなる */
  }
}

/* break-pointは変数を使えないので、手動で同じ比率を設定する */
@media screen and (min-width: calc(120rem * 0.625)) {
  #sub{
    position:absolute;
    left:0;
    right:0;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:baseline; /* これがないと伸びてしまう */
    gap:50%;
    overflow:visible;
    pointer-events:none; /* subのpointer-eventsを殺す */
  }
  /* overflowを復活させる。 */
  #fixed-sub{
    width:30rem;

    overflow:scroll;
    max-height:calc(100dvh - 6rem);
    pointer-events:auto; /* 子要素で復活させる */
  }
  #variable-sub{
    width:30rem;

    overflow:scroll;
    max-height:calc(100dvh - 6rem);
    pointer-events:auto; /* 子要素で復活させる */
  }
  #main{
    width:50%;
    display:block;
    margin:0 auto;
    overflow:scroll;
  }
}