@charset "UTF-8";

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





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

.wrap {
    max-width: 1366px;
    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:
        min(55.8476px, 100vw * (55.8476 / 1366)) min(1px, 100vw * (1 / 1366)),
        0 min(696.3674px, 100vw * (696.3674 / 1366)),
        0 min(2025.5206px, 100vw * (2025.5206 / 1366)),
        0 min(2482.3674px, 100vw * (2482.3674 / 1366));
    background-size:
        calc(100% * (330.6519 / 1366)),
        100%,
        100%,
        100%;
    overflow: hidden;
}





/*------------------------------------*\
    $HEADER
\*------------------------------------*/
.header {
    padding-top: calc(100% * (125.1426 / 1366));
    background-image: url(../../assets/images/sketchpiston/decoration-heart.svg);
    background-repeat: no-repeat;
    background-position: min(876.6987px, 100vw * (876.6987 / 1366)) 0;
    background-size: calc(100% * (231.3563 / 1366));
}

    .header__title {
        width: calc(100% * (643.6064 / 1366));
        margin-inline: auto;
        margin-bottom: calc(100% * (68.0654 / 1366));
    }

        .header__title h2 {
            width: calc(100% * (505.9248 / 643.6064));
            margin-top: calc(100% * (23.8604 / 643.6064));
            margin-inline: auto;
        }


    .header__image {
        width: calc(100% * (980 / 1366));
        margin-inline: auto;
    }





/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.footer {
    padding-bottom: calc(100% * (153.5 / 1366));
}

    .footer__image {
        width: 100%;
    }

    .footer__content {
        padding-top: calc(100% * (99.5 / 1366));
        background-image:
            url(../../assets/images/sketchpiston/decoration-cow.svg),
            url(../../assets/images/sketchpiston/decoration-smiley.svg);
        background-repeat: no-repeat;
        background-position:
            min(178px, 100vw * (178 / 1366)) min(59px, 100vw * (59 / 1366)),
            min(991.75px, 100vw * (991.75 / 1366)) min(119px, 100vw * (119 / 1366));
        background-size:
            calc(100% * (316.83 / 1366)),
            calc(100% * (156.3425 / 1366));
    }

        .footer__title {
            width: calc(100% * (640.2295 / 1366));
            margin-inline: auto;
            margin-bottom: calc(100% * (45.1182 / 1366));
        }

        .footer__button {
            display: block;
            width: calc(100% * (344.5542 / 1366));
            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 {
    padding-top: calc(100% * (56.2482 / 1366));
    padding-bottom: calc(100% * (77.5 / 1366));
}


.section {
    width: calc(100% * (980 / 1366));
    margin-inline: auto;
}
.section + .section:not(:last-of-type) {
    margin-top: calc(100% * (69.849 / 1366));
    margin-bottom: calc(100% * (76.3795 / 1366));
}

    .section__title {
        width: calc(100% * (790.2021 / 980));
        padding-top: calc(100% * (131.2332 / 980));
        margin-inline: auto;
        margin-bottom: calc(100% * (52.5034 / 980));
        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: calc(100% * (148 / 790.2021));
    }

    .section__text {
        width: calc(100% * (949.6705 / 980));
        margin-inline: auto;
        margin-bottom: calc(100% * (40.6924 / 980));
    }

    .section__remarks {
        width: calc(100% * (937 / 980));
        margin-inline: auto;
    }

    .section__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: calc(100% * (39.9702 / 936.3979));
        width: calc(100% * (936.3979 / 980));
        margin-inline: auto;
        margin-bottom: calc(100% * (51.917 / 980));
    }