div.eyecatch {
    position: relative;
}

    div.eyecatch > div.eyecatch-background {
        position: relative;
    }

        div.eyecatch > div.eyecatch-background > img {
            display: block;
            width: 100%;
            max-height: calc(100dvh - 100px);
            object-fit: cover;
        }

            div.eyecatch > div.eyecatch-background > img:last-child {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                opacity: 0;
                animation: fadeIn 2s ease 1s forwards;
            }

    div.eyecatch > .eyecatch-title {
        position: absolute;
        right: 32px;
        bottom: 0;
        width: max-content;
        white-space: nowrap;
        font-size: 5em;
        text-shadow: 0.05em 0.05em 0.25em #000000a0;
    }

        div.eyecatch > .eyecatch-title rb {
            font-weight: bold;
        }

        div.eyecatch > .eyecatch-title rt {
            font-size: 0.3em;
        }

ol.features {
    padding: 0;
    counter-reset: feature-num;
}

    ol.features > li {
        display: flex;
        position: relative;
        margin: 48px 0;
        gap: 24px;
        counter-increment: feature-num;
    }

        ol.features > li::before {
            content: counter(feature-num);
            position: absolute;
            margin: 0 24px;
            line-height: 0.6;
            font-size: 15em;
            font-weight: bold;
            font-style: italic;
            color: #ffffff30;
        }

        ol.features > li:nth-child(2n+1) {
            flex-direction: row-reverse;
        }

        ol.features > li:nth-child(2n) {
            flex-direction: row;
        }

        ol.features > li:last-child {
            margin-bottom: 0;
        }

        ol.features > li > div {
        }

            ol.features > li > div > h2 {
                margin-top: 4px;
            }

        ol.features > li > img {
            width: 45%;
        }

div.download-container {
    margin: 32px auto;
    padding: 24px 32px;
    width: 800px;
    border: 1px solid color-mix(in srgb, var(--text-color) 50%, transparent);
    border-radius: 10px;
    text-align: center;
}

    div.download-container > p {
        margin: 0;
        line-height: 2;
        text-align: inherit;
    }

        div.download-container > p > strong {
            font-size: 1.25em;
            font-weight: normal;
        }

    div.download-container > a.button {
        margin: 12px auto;
        padding: 4px 48px;
        font-weight: bold;
        font-size: 1.5em;
        border: none;
        background: linear-gradient(105deg, hsl(from var(--main-color) h s 45%) 0%, hsl(from var(--main-color) h s 35%) 100%);
    }

    div.download-container > a > img {
        height: 0.6em;
    }

div.download-notice {
    position: relative;
    margin: 48px 0;
    padding: 8px 32px 8px 80px;
    font-size: 0.95em;
    text-align: justify;
    background-color: #00000020;
}

    div.download-notice::before {
        content: "!";
        position: absolute;
        top: 24px;
        left: 32px;
        margin: auto 0;
        font-weight: bold;
        font-size: 3em;
        line-height: 1;
    }

h1 {
    margin-bottom: 64px;
    text-align: center;
}

    h1::before, h1::after {
        content: "—";
        margin: 0 0.4em;
        font-weight: normal;
        opacity: 0.25;
    }

.copy {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.5;
}

@media screen and (max-width: 959px) {
    div.eyecatch > div.eyecatch-background > img {
        height: 70dvw;
    }

    div.eyecatch > .eyecatch-title {
        right: 16px;
        font-size: 4em;
    }

    ol.features > li {
        margin-bottom: 80px;
        flex-direction: column !important;
    }

        ol.features > li::before {
            right: 0;
            margin: 0 4px;
        }

        ol.features > li > img {
            width: 75%;
        }

    div.download-container {
        margin: 0 32px;
        width: unset;
    }

    h1::before, h1::after {
        display: none;
    }
}

@media screen and (max-width: 639px) {
    div.eyecatch > div.eyecatch-background > img {
        height: 80dvw;
    }

    div.eyecatch > .eyecatch-title {
        font-size: 3em;
    }

    ol.features > li > img {
        width: unset;
    }

    div.download-container {
        margin: 0;
    }

        div.download-container > a.button {
            padding: 4px 32px;
            font-size: 1.25em;
        }
}