/* スモール */
@media (min-width: 0px) {
    .nav-lcl {
        display                   : none;

        width                     : 100%;
    
        background                : lightgrey;
    }

    .nav-lcl h3 {
        padding                   : 0 0 0 16px;
    }

    .nav-lcl section {
        width                     : 72%;
        height                    : 28px;
        margin                    : 4px 0 0 32px;

        border                    : 3px solid gray;

        background                : lemonchiffon;
    }
}

/* ミドル */
@media (min-width: 651px) {
    .nav-lcl {
        display                   : block;

        height                    : var(--nav-side-hight);
    }
}

/* ラージ */
@media (min-width: 961px) {
    .nav-lcl {
        width                     : 20%;
        height                    : 100%;
    }

    .nav-lcl h3 {
        padding                   : 8px 0 0 16px;
    }

    .nav-lcl section {
        width                     : 80%;
        margin                    : 4px 0 0 16px;
    }
}