/* スモール */
@media (min-width: 0px) {
    main {
        display                   : block;

        height                    : calc(100vh - var(--header-hight) - var(--footer-hight));
    }
    
    #content {
        width                     : 100%;
        height                    : 100%;

        background                : #ffffff;
    }

    #content h3 {
        padding                   : 8px 0 0 16px;

        color                     : #555555;
    }

    #content section {
        width                     : 84%;
        height                    : 18%;
        margin                    : 8px 0 0 32px;

        border                    : 3px solid gray;

        background                : #7fffff;
    }

    #content section + section {
        margin                    : 24px 0 0 32px;
    }
}

/* ミドル */
@media (min-width: 651px) {
    main {
        height                    : calc(100vh - var(--header-hight) - var(--footer-hight) - var(--nav-bar-hight));
    }

    #content {
        height                    : calc(100% - var(--nav-side-hight));
    }

    #content section {
        width                     : 87%;
    }
}

/* ラージ */
@media (min-width: 961px) {
    main {
        display                   : flex;
    }
    
    #content {
        width                     : 80%;
        height                    : 100%;
    }

    #content section {
        width                     : 90%;
    }
}