@charset "utf-8";

.main {
    padding: 72px 0;
}

/*==========================
work
==========================*/
.work__item {
    margin-top: 64px;
}

.work__img img {
    width: 100%;
    border-top: 1px solid rgba(210, 210, 210, 0.6);
    box-shadow: 5px 5px 5px rgba(210, 210, 210, 0.2);
}

.work__content {
    margin-top: 24px;
}

.work__name {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
}

.work__client {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
}

.work__app {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-darkGray);
    text-align: center;
}

.btn--work {
    margin: 60px auto 0;
}

/* work pc */
@media screen and (min-width: 769px) {
    .main {
        padding: 204px 0 104px;
    }

    .work__list {
        max-width: 1280px;
        margin: 64px auto 0;
        padding: 0 24px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 72px 20px;
    }

    .work__item {
        margin-top: 0;
        max-width: 373px;
    }

    .work__item:first-of-type {
        margin-top: 0px;
    }

    .work__img {
        border-radius: 20px;
        overflow: hidden;
    }

    .work__name {
        font-size: 1.6rem;
    }

    .work__client {
        font-size: 1.4rem;
    }

    .work__app {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--primary-darkGray);
        text-align: center;
    }

    .btn--work {
        margin: 48px auto 0;
    }
}

/* pc 769px */

@media screen and (min-width: 1025px) {
    .main {
        padding: 224px 0 104px;
    }

    .work__name {
        font-size: 1.8rem;
    }

    .work__client {
        font-size: 1.6rem;
    }
}

/* pc 1025px */