@charset "utf-8";

/* NEWSLETTER CSS ============================== */
/* newsletter ---------------------------------- */
#newsletter__lead p {
    text-align: center;
    line-height: 2;
    margin: 0;
    padding: 0;
}

#newsletter {
    padding-bottom: 120px;
    font-family: "Roboto", "Zen Kaku Gothic Antique", sans-serif;
    font-weight: 500;
}

@media (max-width: 576px) {
    #newsletter__lead p {
        text-align: left;
        font-size: 14px;
    }

    #newsletter {
        padding-bottom: 60px;
    }
}

.newsletter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 80px 32px;
}

.newsletter__item {
    text-align: center;
}

.newsletter__item--img {
    max-width: 256px;
    margin: 0 auto;
}

.newsletter__item--img img {
    max-width: 256px;
    aspect-ratio: 11.3 / 16;
}

.newsletter__item--txt {
    text-align: center;
    margin: 16px 0;
}

.newsletter__item--btn {
    color: #666;
    background: #e9e4d4;
}

.newsletter__item--btn:hover {
    opacity: 1;
    background: #dcd3b2;
}

@media (max-width: 1168px) {
    .newsletter {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 48px 24px;
        width: calc(256px * 3 + 48px);
        margin: 0 auto;
    }
}

@media (max-width: 864px) {
    .newsletter {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 24px;
        width: calc(256px * 2 + 48px);
        margin: 0 auto;
    }
}

@media (max-width: 584px) {
    .newsletter {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 48px 24px;
        font-size: 14px;
        width: 256px;
        margin: 0 auto;
    }
}

/* Mobile L */
@media (max-width: 425px) {
    .newsletter {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 48px 24px;
        font-size: 14px;
    }

    .newsletter__item--img img {
        background: #ccc;
        max-width: 200px;
        margin: 0 auto;
    }
}