@charset "UTF-8";

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    width: 100%;
    max-width: 100%;
    border: 1px solid #ccc;
    margin-inline: auto;
}
.grid-container-02 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
}

.grid-item {
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    display: flex; /* フレックスボックスで中央揃え */
    align-items: center; /* 縦中央 */
}
.grid-item:nth-child(1),
.grid-item:nth-child(2) {
    background: #F4F5F8;
    justify-content: center; /* 横中央 */
    text-align: center;
}
.grid-item:nth-child(2),
.grid-item:nth-child(4) {
    border-right: none;
}
.grid-item:nth-child(3),
.grid-item:nth-child(4) {
    border-bottom: none;
    padding: 20px 10px;
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .grid-item {
        border-right: none;
        border-bottom: 1px solid #ccc;
    }
    .grid-item:last-child {
        border-bottom: none;
    }
    .grid-item:nth-child(3) {
        border-bottom: 1px solid #ccc;
    }

    .item-01 {
        order: 1;
    }
    .item-02 {
        order: 2;
    }
    .item-03 {
        order: 3;
    }
    .item-04 {
        order: 4;
    }
}