:root {
    --sec1C:#ffffdd;
    --sec2C:#ddffdd;
    --sec3C:#ddddff;
}

/* ▼タブ */
#tabcontrol a {
    display: inline-block;            /* インラインブロック化 */
    border-width: 1px 1px 0px 1px;    /* 下以外の枠線を引く */
    border-style: solid;              /* 枠線の種類：実線 */
    border-color: black;              /* 枠線の色：黒色 */
    border-radius: 0.75em 0.75em 0 0; /* 枠線の左上角と右上角だけを丸く */
    padding: 0.75em 1em;              /* 内側の余白 */
    text-decoration: none;            /* リンクの下線を消す */
    color: black;                     /* 文字色：黒色 */
    background-color: white;          /* 背景色：白色 */
    font-weight: bold;                /* 太字 */
    position: relative;               /* JavaScriptでz-indexを調整するために必要 */
 }
 /* ▼タブにマウスポインタが載った際（任意） */
 #tabcontrol a:hover {
    text-decoration: underline;   /* リンクの下線を引く */
 }

 /* ▼タブの配色 */
 #tabcontrol a:nth-child(1), #tabbody div:nth-child(1) { background-color: var(--sec1C); }/* 1つ目のタブとその中身用の配色 */
 #tabcontrol a:nth-child(2), #tabbody div:nth-child(2) { background-color: var(--sec2C); }/* 2つ目のタブとその中身用の配色 */
 #tabcontrol a:nth-child(3), #tabbody div:nth-child(3) { background-color: var(--sec3C); }/* 3つ目のタブとその中身用の配色 */

 /* -.-.-.-.-.-.-親子共通要素-.-.-.-.-.-.- */
 #tabcontrol{
   height: 5vh;
   text-align: left;
   margin-bottom: -5px;
}
 /* -.-.-.-.-.-.-子要素-.-.-.-.-.-.- */
 /* iframeの中央揃え要素兼用 */
.container{
   text-align: center;
   margin: auto;
   display: block;
   height: auto;
}

 /* -.-.-.-.-.-.-孫要素-.-.-.-.-.-.- */
 .area {
    position: relative;
    width: 100%;
    height: auto;
    word-break: break-all;
 }
 .nav {
   position: fixed;
   top: 0;
   right: 0;
   border: violet solid;
   width: 20%;
}
.main {
   border: aqua solid;
   width: 79%;
 }
 /*
メモ
indexでは
body
┗tabcontrol
┗tabbody

だが、tabbodyの中のiframeの中(page1)では
area
┗tabcontrol
┗tabbody

さらにそのtabbodyの中のiframeの中(page1-1)では
area
┗nav
┗インクルード内容物

となっている。
それぞれのタグの親はどれか？でタイムループ中。
別のタグを作った方がいい。

areaは子、孫みたいな名前つけたらどうっすか
sb-area
ssb-areaとか

100vwをつかえ


resetcssいれて
 */