@charset "UTF-8";

.wrap-p,
.wrap-g,
.wrap-s,
.wrap-b {
    border-top: dotted 3px #D1D1D1;
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    justify-content: center;
    align-items: center;
}

@media not all and (min-width: 768px) {

    .wrap-p,
    .wrap-g,
    .wrap-s,
    .wrap-b {
        border-top: dotted 2px #D1D1D1;
        padding: 10px 0;
    }
}

.wrap-p {
    row-gap: 50px;
    /*行の余白（上下の余白）*/
    column-gap: 60px;
    /*列の余白（左右の余白）*/
}

.item-p {
    width: calc((100% - 30px * 2) / 2);
}

@media not all and (min-width: 768px) {
    .wrap-p {
        row-gap: 20px;
        /*行の余白（上下の余白）*/
        column-gap: 60px;
        /*列の余白（左右の余白）*/
    }
}

.wrap-g {
    row-gap: 20px;
    /*行の余白（上下の余白）*/
    column-gap: 10px;
    /*列の余白（左右の余白）*/
}

.item-g {
    width: calc((100% - 10px * 2) / 2);
}

@media not all and (min-width: 768px) {
    .wrap-g {
        row-gap: 10px;
        /*行の余白（上下の余白）*/
        column-gap: 10px;
        /*列の余白（左右の余白）*/
    }
}

.wrap-s {
    justify-content: center;
    row-gap: 50px;
    column-gap: 40px;
}

.item-s {
    width: calc((100% - 40px * 2) / 3);
}



.wrap-b {
    row-gap: 50px;
    column-gap: 60px;
}

.item-b {
    width: calc((100% - 60px * 2) / 3);
}

@media not all and (min-width: 768px) {
    .wrap-b {
        row-gap: 20px;
        column-gap: 10px;
    }

    .item-b {
        width: calc((100% - 10px * 2) / 3);
    }
}