body{
    max-width: 960px;
    margin: 0 auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background-color: ghostwhite;
    -webkit-text-size-adjust: 90%;
    -webkit-appearance: none;
    font-family: "Gothic MB101 Heavy", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "Helvetica Neue LT Std", Arial, sans-serif;
}

#container {
    flex: 1;

    & #left_menu {
        background-color: #ddeeff;
        /*background-color: #eaf5ff;*/
        margin-right: 1px;
        max-width: 30%;

        & .nav .nav-item{
            border-bottom: 3px solid white;

            &.top_logo{
                padding: 5% 0;
            }
            &:not(:first-child){
                padding: 3% 0;
            }
            &:has(.nav-link.active){
                background-color: #fce7ed;
                /*background-color: #eefb96;*/
                
                .active{
                    background-color: unset;
                    color: black;
                }
            }
        }
        & #lower_menu{
            text-align: center;
            padding: 3% 0;
        }
    }
    & #top_menu {
        display: none;
    }
}

footer{
    background-color: #222;
    color: #fff;
    position: sticky;
    top: 100vh;
}


#main_body{
    width: 96%;
    margin: 0 auto;
    background-color: white;

    img.no-drag {
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
    }

    & .section {
        margin-top: 1rem;
        padding: 1rem;
    }
    & .section_title {
        border-bottom: 1px solid black;
        color: #1d2087d0;
        font-weight: bold;
    }
    & .section_contents {
        padding: 0 0.5rem;
    }

    & .annotation {
        margin-left: 3rem;
    }

    table {
        vertical-align: middle;
        & th{
            text-align: center;
            background-color: rgb(200,200,200);
            width: 18%;
        }
        & td{
            padding-left: 2em;
            background-color: rgb(220,220,220);
        }
    }
}


/* --------------------------------レスポンシブ用設定-------------------------------- */
@media screen and (max-width: 690px) {
    body{
        font-size: small;
    }

    #container {
        flex-direction: column;

        & #left_menu {
            display: none !important;
        }
        & #top_menu {
            display: block !important;
            overflow-x: hidden;
            position: sticky;
            top: 0;

            & #top_bar, #top_grid .col {
                background-color: #ddeeff;
                border-bottom: 1px solid white;
            }
            & #top_bar img {
                max-height : 3rem;
            }

            & #top_grid .col {
                padding: 3% 0;
                text-decoration: none;
                border-left: 1px solid white;

                &.active{
                    background-color: #fce7ed;
                    color: black;
                }
            }

            /* アニメーション用スタイル */
            & #top_grid {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s ease;
            }
            & #top_grid.show {
                max-height: 300px;
            }
        }
    }

    #main_body{
        width: 100%;
        flex: 1;

        & #top_banner_pc{
            display: none;
        }
        & .section {
            padding: 5px;
        }

        & .annotation {
            margin-left: 2rem;
        }

        table{
            & td{
                padding-left: 2px !important;
                &:has(> #img_skyo){
                    display: none;
                }
            }
        }
    }

    

}