@charset "utf-8";

.works-group {
    padding: 30px 5.3%;
    color: var(--black);
}

.web-group {
    margin-top: 20px;
}

.works-kind {
    text-align: center;
    font-size: 2.6rem;
    font-weight: 600;
}

.banner-group {
    margin-top: 50px;
}

.dtp-group {
    margin-top: 50px;
}

.works-list {
    margin-top: 20px;
}

.works-list li {
    margin-top: 50px;
}

.works-list li:first-of-type {
    margin-top: 0;
}

.works-img {
    overflow:hidden; /* これを記述することではみ出た部分を非表示にします。 */
    box-shadow: 2px 2px 20px 0px var(--gray);
}

.works-img img {
    transition: 1s all;
}

.works-img img:hover {
    transform: scale(1.1,1.1);
}

.works-annotation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.works-annotation p{
    font-size: 1.4rem;
    background-color: var(--gray);
    width: 31.3%;
    text-align: center;
    padding: 5px 0;
}

.works-name {
    margin-top: 10px;
    font-size: 2.2rem;
    font-weight: 600;
}

.works-region {
    margin-top: 10px;
    font-size: 1.4rem;
}

.works-detail {
    text-align: right;
}

.works-detail p {
    margin-top: 20px;
    font-size: 1.4rem;
    font-family: "Noto Sans JP";
    font-weight: 300;
    display: inline-block;
    border-bottom: 1px solid var(--black);
}

/* animation */
.delay-time-half {
    animation-delay: 0.5s;
}

.delay-time-1-half {
    animation-delay: 1.5s;
}

/* tb */
@media screen and (min-width: 768px) {
    /* works */
    .works-group {
        padding: 40px 0;
        width: 85.4%;
        margin: 0 auto;
    }

    .web-group {
        margin-top: 30px;
    }

    .works-kind {
        font-size: 3rem;
    }

    .banner-group {
        margin-top: 60px;
    }

    .dtp-group {
        margin-top: 60px;
    }

    .works-list {
        margin-top: 30px;
    }

    .works-list li {
        margin-top: 60px;
    }

    .works-list li:first-of-type {
        margin-top: 0;
    }

    .works-contents {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .works-img {
        width: 40%;
        box-shadow: 2px 2px 20px 0px var(--gray);
    }

    .works-txt-group {
        width: 50%;
    }

    .works-annotation {
        margin-top: 0;
    }

    .works-region {
        font-size: 1.6rem;
    }

    .works-detail p {
        font-size: 1.6rem;
    }

    .reverse {
        flex-direction: row-reverse;
    }
}

/* pc */
@media screen and (min-width: 1280px) {
    /* works */
    .works-group {
        padding: 50px 0;
        width: 78.1%;
        max-width: 1500px;
    }

    .web-group {
        margin-top: 40px;
    }

    .works-kind {
        font-size: 3.4rem;
    }

    .banner-group {
        margin-top: 70px;
    }

    .dtp-group {
        margin-top: 70px;
    }

    .works-list {
        margin: 40px auto 0;
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 70px 2%;
    }

    .works-list::after {
        content: "";
        display: block;
        margin-top: 0;
        width: 100%;
        max-width: 350px;
    }

    .works-list li {
        margin-top: 0;
        width: 100%;
        max-width: 350px;
    }

    /* .works-list li:nth-of-type(1),
    .works-list li:nth-of-type(2) {
        margin-top: 0;
    } */

    .works-contents {
        display: block;
    }

    .works-img {
        width: 100%;
        max-width: 360px;
        box-shadow: 20px 20px 60px 10px var(--gray);
    }

    .works-txt-group {
        width: 100%;
        max-width: 360px;
    }

    .works-annotation {
        margin-top: 10px;
    }

    .works-annotation p {
        width: 32%;
    }

    .works-name {
        font-size: 2.4rem;
    }
}