/* スモール */
@media (min-width: 0px) {
    main {
        width                     : calc(100% - 16px);
    }

    #a2-grid-content {
        display                   : grid;
        grid-template-columns     : repeat(auto-fit, minmax(100%, 1fr));
        grid-auto-rows            : 20px;
        gap                       : var(--a2-panel-gap);

        width                     : 100%;
        padding                   : var(--a2-panel-gap);
    }

    #a2-grid-content .a2-paragraph {
        grid-column               : 1 / 1;
    }

    #a2-grid-content .a2-panel-content {
        grid-row                  : span 8;
        
        padding-bottom            : 4px;

        border-radius             : 4px;

        cursor                    : pointer;
    }

    #a2-grid-content .a2-panel-content a {
        text-decoration           : none;
    }

    #a2-grid-content .a2-panel-content img {
        width                     : 100%;
        height                    : 84%;

        background                : white;

        object-fit                : cover;
    }

    #a2-grid-content .a2-panel-content p {
        line-height               : 20px;

        font-size                 : 20px;
        text-align                : center;
        text-shadow               : 1px 1px 2px rgba(52,85,43,0.8);
    }

    #a2-grid-content .a2-panel-content:hover {
        opacity                   : 0.5;
    }

    #a2-grid-content .a2-more {
        width                     : 100%;
        margin-top                : 16px;

        font-size                 : 18px;
        font-weight               : bold;
        color                     : darkorange;

        text-align                : right;
    }
    
    #a2-pageEnd {
        height                    : var(--a2-header-hight);
    }

    .a2-paragraph.setting {
        grid-row                  : span 2;
        
        padding-left              : 32px;
        line-height               : 48px;

        font-size                 : 28px;
        color                     : white;
        text-align                : left;

        border-radius             : 8px;
    }

    .a2-frame {
        margin                    : 8px 0 16px 0;
        padding                   : 8px 0;

        background                : white;
        border                    : 3px solid gold;
        border-radius             : 8px;
    }

    .a2-strings {
        padding-left              : 32px;

        font-size                 : 18px;
        font-weight               : bold;
    }

    .a2-blank {
        height                    : 400px;
    }
}

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

    #a2-grid-content .a2-paragraph {
        grid-column               : 1 / 3;
    }

    #a2-grid-content .a2-more {
        width                     : 95%;
        margin-top                : 152px;
    }
}

/* ラージ */
@media (min-width: 961px) {
    main {
        width                     : 72%;     
        margin                    : 0 auto;
    }

    #a2-grid-content {
        grid-template-columns     : repeat(auto-fit, minmax(var(--a2-panel-l-width), 1fr));
    }

    #a2-grid-content .a2-paragraph {
        grid-column               : 1 / 5;
    }
}