main .works-list {
    padding:40px 0;
    margin:0;
}

.works-detail h2 {
    font-size:2em;
}

.works-detail .photo-grid img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width : 641px) {
    .works-detail .photo-grid {
        display:grid;
        grid-template-rows: repeat(3); 
        grid-template-columns: repeat(5);
        margin-left:-10px;
        margin-right:-10px;
        height:calc((100vw / 5) * 3);
        max-height:calc((1200px / 5) * 3);
    }
    .works-detail .photo-grid li {
        list-style:none;
        margin:0;
        padding:10px;
        overflow:hidden;
        position:relative;
    }

    /* HOUSE */
    .works-detail .photo-grid.house li:nth-of-type(1) {
        grid-column:1 / 4;
        grid-row:1 / 3;
    }
    .works-detail .photo-grid.house li:nth-of-type(2) {
        grid-column:4 / 6;
        grid-row:1 / 2;
    }
    .works-detail .photo-grid.house li:nth-of-type(3) {
        grid-column:4 / 6;
        grid-row:2 / 3;
    }
    .works-detail .photo-grid.house li:nth-of-type(4) {
        grid-column:1 / 2;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.house li:nth-of-type(5) {
        grid-column:2 / 3;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.house li:nth-of-type(6) {
        grid-column:3 / 4;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.house li:nth-of-type(7) {
        grid-column:4 / 5;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.house li:nth-of-type(8) {
        grid-column:5 / 6;
        grid-row:3 / 4;
    }

    /* REFORM */
    .works-detail .photo-grid.reform li span {
        position:absolute;
        top:30px;
        left:10;
        background:#000;
        color:#fff;
        padding:10px 20px 5px 20px;
    }
    .works-detail .photo-grid.reform li:nth-of-type(1) span {
        display:block;
        font-size:1em;
    }
    .works-detail .photo-grid.reform li:nth-of-type(2) span {
        display:block;
        font-size:1.3em;
    }
    .works-detail .photo-grid.reform li:nth-of-type(1) {
        grid-column:1 / 3;
        grid-row:1 / 3;
        padding:10px 100px 70px 10px;
    }
    .works-detail .photo-grid.reform li:nth-of-type(2) {
        grid-column:3 / 6;
        grid-row:1 / 3;
    }
    .works-detail .photo-grid.reform li:nth-of-type(3) {
        grid-column:1 / 2;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.reform li:nth-of-type(4) {
        grid-column:2 / 3;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.reform li:nth-of-type(5) {
        grid-column:3 / 4;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.reform li:nth-of-type(6) {
        grid-column:4 / 5;
        grid-row:3 / 4;
    }
    .works-detail .photo-grid.reform li:nth-of-type(7) {
        grid-column:5 / 6;
        grid-row:3 / 4;
    }
}

/** Media Query **/

@media only screen and (max-width : 900px) {

}
@media only screen and (max-width : 640px) {
    .works-detail .photo-grid {
        padding:0 0 40px 0;
        margin:0;
    }
    .works-detail .photo-grid li {
        list-style:none;
        margin:0;
        padding:0 0 20px 0;
    }
}
@media only screen and (max-width : 320px) {

}