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

        background                : #ffffff;
    }

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

        color                     : #555555;
    }
    
    #grid-content {
        display: grid;
        grid-template-columns     : repeat(3, auto-fit, minmax(136px, 1fr));
        grid-template-rows        : repeat(4, 136px);
        gap                       : 16px;
        grid-template-areas       : "a a b"
                                    "c c c"
                                    "d d d"
                                    "e e e";

        margin                    : 8px 16px 8px 16px;
    }

    #grid-content section {
        border                    : 3px solid gray;

        background                : #7fffff;
    }

    #panel1{
        grid-area: a;
    }

    #panel2{
        grid-area: b;
    }

    #panel3{
        grid-area: c;
    }

    #panel4{
        grid-area: d;
    }

    #panel5{
        grid-area: e;
    }
}

/* ミドル */
@media (min-width: 651px) {
}

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