@charset "UTF-8";
/* ==========
main
========== */
/* common pc */
@media screen and (min-width: 960px) {
    .main {
        margin-top: 0;
    }
}/* pc 960px */

/* article header */
.article__content {
    margin-top: 70px;
    padding: 0 var(--contentPadding-sp);
}

.article__title {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.066rem;
}

.article__tag {
    color: var(--primary-orange);
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
    margin-top: 4px;
}

.article__txt {
    font-size: 1.4rem;
    letter-spacing: 0.042rem;
    margin-top: 24px;
}

/* article header pc */
@media screen and (min-width: 960px) {
    .article__header {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        padding: 0 var(--contentPadding-pc);
    }

    .mainImg {
        width: 52.8vw;
    }

    .article__content {
        width: 24.5vw;
        margin: 0 -32px 40px;
        padding: 0;
        z-index: 10;
    }

    .article__title {
        font-size: 3.4rem;
        font-weight: 700;
        letter-spacing: 0.1rem;
    }

    .article__tag {
        color: var(--primary-orange);
        font-size: 1.4rem;
        letter-spacing: 0.042rem;
        margin-top: 8px;
    }

    .article__txt {
    font-size: 1.8rem;
    letter-spacing: 0.054rem;
    margin-top: 36px;
}
}/* pc 960px */

/* bannerDesign */
.section--bannerDesign {
    padding: 110px var(--contentPadding-sp) 100px;
}

.topic__small {
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
}

.topic__txt {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 4px;
}

.bannerDesign__list {
    margin: 70px auto 0;
    max-width: 633px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.bannerDesign__item {
    max-width: 300px;
    display: flex;
    align-items: center;
}

/* bannerDesign pc */
@media screen and (min-width: 960px) {
    .section--bannerDesign {
        padding: 120px var(--contentPadding-pc);
    }

    .topic__small {
        font-size: 1.4rem;
        letter-spacing: 0.042rem;
    }

    .topic__txt {
        font-size: 4.8rem;
        margin-top: 4px;
    }

    .bannerDesign__list {
        margin: 80px auto 0;
        max-width: 1600px;
        grid-template-columns: repeat(
            auto-fit,
            minmax(280px, 1fr)
        );
        gap: 40px;
    }
}/* pc 960px */