@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * BODY................ボディ
 * HEADER..............ヘッダーパーツ
 * FOOTER..............フッターパーツ
 * MAIN................メインコンテンツ
 */





/*------------------------------------*\
    $BODY
\*------------------------------------*/
body {
}

.wrap {
    max-width: 699px;
    margin-inline: auto;
    background-image:
        url(../../assets/images/sketchpiston/decoration-splash-1.svg),
        url(../../assets/images/sketchpiston/decoration-splash-2.svg),
        url(../../assets/images/sketchpiston/decoration-splash-3.svg),
        url(../../assets/images/sketchpiston/decoration-splash-4.svg);
    background-repeat: no-repeat;
    background-position:
        3.2% 0,
        50% 21%,
        50% 52%,
        50% 71%;
    background-size:
        50%,
        200%,
        200%,
        200%;
    overflow: hidden;
}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    padding-top: calc(100% * (48 / 375));
    background-image: url(../../assets/images/sketchpiston/decoration-heart.svg);
    background-repeat: no-repeat;
    background-position: 80% 0;
    background-size: 30%;
}

    .header__title {
        width: 92%;
        margin-inline: auto;
        margin-bottom: 12%;
    }

        .header__title h1 {
            width: calc(100% * (266.6074 / 345));
            margin-inline: auto;
            margin-bottom: 4%;
        }

        .header__title h2 {
            width: calc(100% * (337.2793 / 345));
            margin-inline: auto;
        }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
    padding-bottom: 16%;
}

    .footer__image {
        aspect-ratio: 5 / 2;
        width: 100%;
    }

        .footer__image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }


    .footer__content {
        padding-top: 16%;
        padding-inline: 4%;
        background-image:
            url(../../assets/images/sketchpiston/decoration-cow.svg),
            url(../../assets/images/sketchpiston/decoration-smiley.svg);
        background-repeat: no-repeat;
        background-position:
            4% 40%,
            88% 48%;
        background-size:
            40%,
            24%;
    }

        .footer__title {
            width: 100%;
            margin-bottom: 8%;
        }

        .footer__button {
            display: block;
            width: calc(100% * (315 / 345));
            margin-inline: auto;
        }
        @media (any-hover: hover) {
            .footer__button {
                transition: filter .3s ease-out;
            }
            .footer__button:hover {
                filter: contrast(0.75) opacity(0.8);
            }
        }





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
.main {
    margin-block: 16%;
}


.section {
    padding-inline: 4%;
    margin-top: 8%;
    margin-bottom: 16%;
}

    .section__title {
        padding-top: 30%;
        margin-bottom: 8%;
        background-image: url(../../assets/images/sketchpiston/icon-star.png);
        background-image:
            -webkit-image-set(
                url(../../assets/images/sketchpiston/icon-star.png) 1x,
                url(../../assets/images/sketchpiston/icon-star@2x.png) 2x
            );
        background-image:
            image-set(
                url(../../assets/images/sketchpiston/icon-star.png) 1x,
                url(../../assets/images/sketchpiston/icon-star@2x.png) 2x
            );
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: 30%;
    }

    .section__text {
        margin-bottom: 12%;
    }

    .section__list {
        width: calc(100% * (315 / 345));
        margin-inline: auto;
        margin-bottom: 12%;
    }

        .section__item + .section__item {
            margin-top: 12%;
        }