/* 全体の外枠 */
.body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 中央部分を可変にする */
.main {
    flex-grow: 1;    /* 余った縦の空間をすべてこの要素で埋める */
    /*display: block;*/
    display: flex;   /* 子要素の .body-three-split も縦いっぱいに広げるため */
    flex-direction: column;
    overflow-y: auto;
    overflow-x: auto;
    background:  #ddffff;
    /* 見やすいように画面端は使わない */
    padding: 2px 10px;
}

/* ヘッダー・フッター */
.header, .footer {
    background:  #ddffdd;
    min-height: 12px;
}

/* ヘッダー */
.header {
    /* 見やすいように画面端は使わない */
    padding: 10px 10px 2px;
    /* 下線のみ作成 */
    border-bottom: 1px solid #000000;
}

/* フッター */
.footer {
    /* 見やすいように画面端は使わない */
    padding: 2px 10px 10px;
    /* 上線のみ作成 */
    border-top: 1px solid #000000;
}