/* スモール */
@media (min-width: 0px) {
    nav #a2-nav-bar {
        max-width                 : 952px;
        width                     : calc(100% - 26px);
        margin                    : 8px 0 0 8px;
        padding                   : 2px;

        border-radius             : 8px;
    }

    nav #a2-nav-bar p {    
        margin                    : 4px 0;

        font-size                 : 16px;
        font-weight               : bold;
        text-align                : center;
    }
        
    nav #a2-nav-bar .a2-select-category {
        grid-template-columns     : repeat(auto-fit, minmax(var(--a2-panel-m-width), 1fr));
        grid-auto-rows            : 28px;
        gap                       : var(--a2-panel-gap);
    }

    nav #a2-nav-bar .a2-select-category div {
        border-radius             : 2px;

        cursor                    : pointer;
    }
    
    nav #a2-nav-bar .a2-select-category div:hover {
        background                : white;
    
        opacity                   : 0.8;
    }
    
    nav #a2-nav-bar .a2-select-category div a {
        display                   : block;

        padding                   : 0 0 0 8px;
    
        font-size                 : 16px;
        font-weight               : bold;
        
        text-decoration           : none;
    }
}

/* ミドル */
@media (min-width: 651px) {
    nav #a2-nav-bar .a2-select-category {
        grid-template-columns     : repeat(auto-fit, minmax(var(--a2-panel-l-width), 1fr));
    }
}

/* ラージ */
@media (min-width: 961px) {
    nav #a2-nav-bar .a2-select-category {
        width                     :calc(72% - 22px);
        margin-left               : 268px;
    }
}