@charset "UTF-8";
#portfolio .gallery-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 27.61vw;
    gap: 0.69vw;
}

#portfolio .gallery-list li {
    position: relative;
    width: 100%;
    height: 100%;
}

#portfolio .gallery-list li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: 50% 10%;
}

#portfolio .gallery-list li:first-child {
    grid-column: 1 / 5;
    grid-row: span 1;
}

#portfolio .gallery-list li:nth-child(8n+2) {
    grid-column: 1 / 2;
}

#portfolio .gallery-list li:nth-child(8n+3) {
    grid-column: 2 / 4;
    grid-row: span 2;
}

#portfolio .gallery-list li:nth-child(8n+4) {
    grid-column: 4 / 5;
    grid-row: span 2;
}

#portfolio .gallery-list li:nth-child(8n+5) {
    grid-column: 1 / 2;
}

#portfolio .gallery-list li:nth-child(8n+6) {
    grid-column: 1 / 3;
    grid-row: span 2;
}

#portfolio .gallery-list li:nth-child(8n+7) {
    grid-column: 3 / 5;
}

#portfolio .gallery-list li:nth-child(8n+8) {
    grid-column: 3 / 4;
}

#portfolio .gallery-list li:nth-child(8n+9) {
    grid-column: 4 / 5;
}

.modaal-gallery-item.is_active img {
    max-height: 700px;
}
/*==============
    contact
===============*/
#contact {
    background: url(../img/contact.jpg) no-repeat center /cover;
    padding: 8.89vw 0;
    margin-top: 0;
}
#contact h2{
    color: #fff;
    margin-bottom: 32px;
}
#contact .lead{
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 40px;
}
@media screen and (max-width: 768px){
    #contact {
        background: url(../img/contact-sp.jpg) no-repeat center /cover;
        padding: 17vw 0;
    }
    #contact .moreBtn {
        text-align: left;
    }
    #contact h2{
        margin-bottom: 24px;
    }
    #contact .lead{
        font-size: 1.6rem;
        margin-bottom: 32px;
    }
}