@charset "UTF-8";

.pattern {
    margin-top: 16rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;

    @media screen and (max-width: 767px) {
        margin-top: 8rem;
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .left-img {
        clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
    }

    .right-txt {

        .blue-title {
            font-family: 'Zen Kaku Gothic Antique';
            font-weight: 700;
            font-size: 4rem;
            line-height: 1.38;
            letter-spacing: 0.05em;
            color: var(--blue);

            @media screen and (max-width: 767px) {
                font-size: 2.1rem;
            }
        }

        .desc {
            margin-top: 2.7rem;

            @media screen and (max-width: 767px) {
                margin-top: 1.5rem;
            }
        }

        .sign {
            margin-top: 3rem;
            font-family: 'Noto Sans JP';
            font-weight: 600;
            font-size: 2rem;
            text-align: right;

            @media screen and (max-width: 767px) {
                margin-top: 2rem;
                font-size: 1.7rem;
            }
        }
    }
}

.preference {
    margin: 15rem 0 1.7rem;

    @media screen and (max-width: 767px) {
        margin: 8rem 0 1rem;
    }

    .items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6rem;

        @media screen and (max-width: 767px) {
            grid-template-columns: 1fr;
            gap: 5rem;
        }

        .item {
            & img {
                width: 25rem;
                margin: auto;

                @media screen and (max-width: 767px) {
                    width: 70%;
                }
            }

            .title {
                margin-top: 1.2rem;
                font-weight: 700;
                font-size: 2.5rem;
                text-align: center;
                letter-spacing: 0.05em;
                color: var(--blue);

                @media screen and (max-width: 767px) {
                    font-size: 2rem;
                }
            }

            .text {
                margin-top: 0.5rem;
                font-size: 1.6rem;
                line-height: 1.88;
                letter-spacing: 0.05em;

                @media screen and (max-width: 767px) {
                    margin-top: 0;
                }
            }
        }
    }
}