@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

:root {
    font-size: calc(max(10 / 1440 * 100vw, 10px));
    --display-font: 'Poppins', sans-serif;
    --kachiiro: #223B80;
    --section-width: calc(max(1080 / 1440 * 100vw, 1080px));
    --r10: 1.0rem 0 1.0rem 0;
    --r16: 1.6rem 0 1.6rem 0;
    --r20: 2.0rem 0 2.0rem 0;
    --vw: calc(1 / 1440 * 100vw);
    --vwsp: calc(1 / 375 * 100vw);
    --delay-unit: 0.2s;
    --top-fadein-index: 6;
}

html {
    scroll-padding-top: 92px;
}

.l-service {
    background-image:
        url(/service/images/bg_texture.webp),
        linear-gradient(21.5deg, #0B1F53 0%, #274696 20%, #1F59B1 77%, #2D6BBC 100%);
    background-repeat: repeat, no-repeat;
    color: #fff;
    position: relative;
    overflow: hidden;

    h2 {
        font-size: 2.4rem;
        line-height: 1.5;
        font-weight: 500;

        @media (width < 768px) {
            font-size: 1.8rem;
            line-height: calc(28 / 18);
        }
    }

    p {
        font-weight: 400;
    }

}

.l-service-section {
    width: var(--section-width);
    margin-inline: auto;
    position: relative;
    z-index: 2;

    @media (width <=1240px) {
        width: auto;
        margin-inline: max(calc(20px + (60 - 20) * ((100vw - 768px) / (1240 - 768))), 20px);
    }

    h2 {
        margin-block-end: 1.6rem;
        font-weight: 600;
        text-align: center;

        @media (width < 768px) {
            margin-block-end: 1.9rem;
        }

        .subTitle {
            display: block;
            font-size: 2.0rem;
            line-height: 1.6;

            @media (width < 768px) {
                font-size: 1.7rem;
                line-height: calc(28 / 17);
            }
        }

        .mainTitle {
            display: block;
            font-size: 3.2rem;
            line-height: 1.5;

            @media (width < 768px) {
                font-size: 2.2rem;
                line-height: calc(32 / 22);
            }
        }
    }
}

.l-leaf {
    border-radius: var(--r20);
    margin-block: 1.6rem;

    @media (width < 768px) {
        margin-block: 0.8rem;
    }

    &.-solid {
        background: var(--kachiiro);
    }

    &.-glass {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
    }
}

#service-header {
    padding-block: calc(192 * var(--vw)) 0;
    height: calc(683 * var(--vw));

    @media (width < 768px) {
        height: 360px;
        padding-block: 7.9rem 12.2rem;
        aspect-ratio: auto;
    }

    .eyebrow {
        font-size: calc(18 * var(--vw));
        line-height: 1.5;
        margin-block: 0 calc(100 * var(--vw));

        @media (width < 768px) {
            font-size: 1.6rem;
            margin-block: 0 3.2rem;
        }
    }

    h1 {
        .mainTitle {
            display: block;
            font-family: var(--display-font);
            font-weight: 500;
            font-size: calc(100 * var(--vw));
            line-height: 0.96;
            margin-block: 0 calc(18 * var(--vw));

            @media (width < 768px) {
                font-size: 3.8rem;
                margin-block: 0 0.5rem;
            }
        }

        .subTitle {
            display: block;
            font-size: calc(26 * var(--vw));
            font-weight: 500;
            line-height: 1.5;

            @media (width < 768px) {
                font-size: 1.7rem;
            }
        }
    }
}

#change {
    margin-block: 0 6.4rem;
    padding: 3.2rem 2.4rem;
    display: grid;
    gap: 2.4rem;
    grid-template-columns: 535fr 473fr;

    @media (width < 768px) {
        margin-block: 0 2.2rem;
        padding: 1.6rem 1.6rem 2.6rem;
        grid-template-columns: 1fr;
    }

    h2 {
        text-align: left;

        @media (width < 768px) {
            text-align: center;
            margin-block-end: 1.3rem;
        }
    }


    .image {
        img {
            width: 100%;
            border-radius: var(--r16);

            @media (width < 768px) {
                aspect-ratio: 303 / 160;
                object-fit: cover;
            }
        }
    }

    .text {
        padding: 3.2rem;

        @media (width < 768px) {
            padding: 0;
        }

        .lead {
            font-size: 1.6rem;
            line-height: 2;

            @media (width < 768px) {
                font-size: 1.5rem;
                line-height: calc(24 / 15);
            }

        }
    }

}

#about {
    padding: 8rem 2rem;

    @media (width < 768px) {
        padding: 3.2rem 1.6rem;
    }

    .lead {
        text-align: center;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: 2;

        @media (width < 768px) {
            text-align: left;
            font-size: 1.5rem;
            line-height: calc(24 / 15);
        }

    }

    picture {
        display: block;
        max-width: 71.2rem;
        margin-inline: auto;
        margin-block: 4.9rem 6.2rem;

        @media (width < 768px) {
            margin-block: 1.5rem 3.2rem;
            text-align: center;
        }

        img {
            width: 100%;
            height: auto;

            @media (width < 768px) {
                max-width: 30.3rem;
            }
        }
    }

    .c-leaf-border-block {
        max-width: 71.2rem;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 13.7rem auto;

        @media (width < 768px) {
            grid-template-columns: 1fr;
        }

        h3 {
            font-size: 1.6rem;
            line-height: calc(28 / 16);

            @media (width < 768px) {
                text-align: center;
                font-size: 1.5rem;
                line-height: calc(28 / 15);
                margin-block-end: 0.2rem;
            }
        }

        p {
            font-size: 1.4rem;
            line-height: calc(24 / 14);

            @media (width < 768px) {
                line-height: 1.5;
            }
        }
    }
}

#features {
    padding: 8rem 2rem 6.4rem;

    @media (width < 768px) {
        padding: 3.2rem 1.6rem 0.4rem;

        h2 {
            margin-block-end: 1rem;
        }
    }

    .c-triplet-list {
        --overlap: 3.6rem;
        margin-inline: 4.6rem;


        @media (width < 768px) {
            --overlap: 1.7rem;
            width: auto;
            max-width: 30.4rem;
            margin-inline: auto;
        }
    }
}

#capabilities {
    padding: 8rem 2.4rem 2.4rem;

    @media (width < 768px) {
        padding: 3.2rem 1.6rem 2.4rem;
    }

    h2 {
        margin-block-end: 3.9rem;

        @media (width < 768px) {
            margin-block-end: 2.4rem;
        }
    }
}

#values {
    margin-inline: max(calc((100vw - 77rem) / 2), 3.2rem);
    padding-block: 13.2rem 6.9rem;
    position: relative;
    z-index: 2;

    @media (width < 768px) {
        padding-block: 6.7rem 3.2rem;
    }

    h2 {
        line-height: 1.5;
        font-weight: 500;
        margin-block-end: 5.7rem;

        @media (width < 768px) {
            margin-block-end: 2.5rem;
        }

        .mainTitle {
            display: block;
            font-family: var(--display-font);
            font-size: 6.8rem;

            @media (width < 768px) {
                font-size: 4.6rem;
                line-height: 1.2;
                margin-block-end: 0.7rem;
            }
        }

        .subTitle {
            display: block;
            font-size: 2.8rem;

            @media (width < 768px) {
                font-size: 1.8rem;
                line-height: 1.5;
            }
        }
    }

    p {
        font-size: 1.8rem;
        line-height: 2.5;
        margin-block-end: 4.5rem;

        @media (width < 768px) {
            font-size: 1.5rem;
            line-height: 1.9;
            margin-block-end: 2.4rem;
        }
    }
}

#thought {
    padding-block: 10rem;
    text-align: center;

    @media (width < 768px) {
        padding: 3.2rem 1.6rem 2.2rem;
    }

    .c-service-logo {
        margin-block: 7.2rem;

        @media (width < 768px) {
            margin-block: 2.9rem 3.2rem;
        }

        img {
            width: min(29rem, 100%);

            @media (width < 768px) {
                width: min(19rem, 100%);
            }
        }
    }

    h3 {
        font-size: 2.0rem;
        line-height: 1.6;
        margin-block-end: 1.2rem;

        @media (width < 768px) {
            font-size: 1.7rem;
            line-height: calc(28 / 17);
            margin-block-end: 0.8rem;
        }
    }

    .lead {
        font-size: 1.6rem;
        line-height: calc(28 / 16);

        @media (width < 768px) {
            text-align: left;
            font-size: 1.5rem;
            line-height: calc(24 / 15);
        }
    }
}

#platform {
    padding: 10rem 2rem;

    @media (width < 768px) {
        padding: 3.2rem 1.6rem;
    }

    h2 {
        margin-block-end: 3.1rem;

        @media (width < 768px) {
            margin-block-end: 2.0rem;
        }
    }

    .c-triplet-list {
        --overlap: 1rem;
        margin-inline: 13.5rem;

        @media (width < 768px) {
            max-width: 26.6rem;
            margin-inline: auto;
            --overlap: 4.1rem;
        }
    }
}

#kachiiro {
    padding: 7.2rem 9.4rem;
    position: relative;
    border-radius: var(--r20);

    @media (width < 768px) {
        padding: 3.2rem 1.6rem 1.3rem;
    }

    .c-kachiiro-column {
        display: grid;
        grid-template-columns: 25rem auto;
        gap: 2.4rem;
        margin-block-end: 1.0rem;

        @media (width < 768px) {
            display: block;
        }
    }

    h2 {

        @media (width >=768px) {
            text-align: left;
        }

        @media (width < 768px) {
            margin-block-end: 1.8rem;
        }

        .subTitle {
            display: block;
            font-size: 1.8rem;
            line-height: calc(28 / 18);
            font-weight: 500;
            margin-block-end: 0.8rem;

            @media (width < 768px) {
                font-size: 1.5rem;
                line-height: calc(24 / 15);
                font-weight: 400;
                margin-block-end: 0;
            }
        }

        .mainTitle {
            display: block;
            font-size: 2.4rem;
            line-height: 1.5;

            @media (width < 768px) {
                font-size: 1.8rem;
                line-height: calc(28 / 18);
            }
        }
    }

    .lead {
        font-size: 1.6rem;
        line-height: 2;

        @media (width < 768px) {
            font-size: 1.5rem;
            line-height: calc(24 / 15);
        }
    }
}

.c-link-underline:any-link {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: calc(28/15);
    display: inline-block;
    border-block-end: solid 1px;
    padding-inline-end: 5.3em;
    background: transparent url(../images/icon_arrow_down_01.svg) no-repeat right 0.5em center;

    @media (width < 768px) {
        display: block;
    }

    &:hover {
        background-position: right 0.5em bottom 0.3em;
    }

    :has(>&) {
        margin-block-start: 4.4rem;

        @media (width < 768px) {
            margin-block-start: 2.5rem;
        }
    }
}

.c-text-display {
    font-family: var(--display-font);
    font-weight: 600;
}

.c-leaf-border-block {
    border: solid 1px;
    border-radius: var(--r10);
    padding: 2.0rem 4.5rem;

    @media (width < 768px) {
        padding: 1.6rem;
    }
}

.c-triplet-list {
    display: flex;
    gap: 0;
    justify-content: center;
    padding-block-start: 1rem;
    padding-inline: var(--overlap);

    @media (width < 768px) {
        display: block;
        padding-inline: 0rem;
        padding-block: var(--overlap);
        margin-inline: auto;
    }

    li {
        margin-inline: calc(var(--overlap) * -1);
        flex-grow: 1;

        @media (width < 768px) {
            margin-inline: 0;
            margin-block: calc(var(--overlap) * -1);
        }

        img {
            width: 100%;
        }
    }
}

.c-capabilities-list {
    li {
        padding-block: 3.2rem 3.1rem;
        border-block-end: solid 1px;
        display: grid;
        grid-template-columns: 530fr 482fr;
        gap: 2.0rem;
        position: relative;

        &:first-child {
            border-block: solid 1px;
        }

        @media (width < 768px) {
            display: block;
            padding-block: 2.4rem;
        }

        .text {
            padding: 6.4rem 4.6rem 0 4.6rem;

            @media (width < 768px) {
                padding: 0;
            }

            h3 {
                font-size: 2.4rem;
                line-height: calc(35 / 24);
                margin-block-end: 1.6rem;

                @media (width < 768px) {
                    font-size: 1.8rem;
                    line-height: calc(28 / 18);
                    margin-block-end: 0.8rem;
                }
            }

            p {
                font-size: 1.6rem;
                line-height: 2;

                @media (width < 768px) {
                    font-size: 1.5rem;
                    line-height: calc(24 / 15);
                    margin-block-end: 1.4rem;
                }
            }
        }

        .image {
            img {
                width: 100%;
                border-radius: var(--r10);
            }
        }

        .num {
            position: absolute;
            bottom: 0;
            font-size: 12rem;
            font-weight: 100;
            letter-spacing: -0.07em;
            opacity: 0.2;
            font-family: var(--display-font);
            line-height: 0.8;

            &.-wide {
                letter-spacing: 0.06em;
            }

            @media (width < 768px) {
                position: static;
                font-size: 7.0rem;
                display: block;
                text-align: right;
            }
        }
    }
}

.c-service-notes {
    font-size: 1.4rem;
    line-height: calc(24 / 14);
    margin-block: 2.4rem;

    li {
        display: grid;
        grid-template-columns: max-content auto;

        @media (width < 768px) {
            margin-block-end: 0.4rem;
        }
    }
}

.c-service-cta {
    margin-block-start: 10rem;
    padding-block: 4.6rem 7.2rem;
    color: #1e1e1e;
    text-align: center;
    background: #c2e8f6 url(../images/bg_cta_pc.webp) no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 2;

    @media (width < 768px) {
        padding-block: 4.1rem;
        margin-block-start: 4.0rem;
        background-image: url(../images/bg_cta_sp.webp);
    }

    h2 {
        font-size: 2.8rem;
        line-height: 1.8;
        margin-block: 0 1.4rem;

        @media (width < 768px) {
            font-size: 2.4rem;
            line-height: 1.8;
            margin-block: 0 1.6rem;
        }
    }

    .lead {
        font-size: 1.6rem;
        line-height: 1.8;
        margin-block: 0 1.6rem;

        @media (width < 768px) {
            font-size: 1.5rem;
            line-height: calc(24 / 15);
            margin-block-end: 2.6rem;
        }
    }
}

.c-service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1.5rem;
    line-height: calc(28 / 15);
    font-weight: bold;
    width: 24.0rem;
    height: 4.2rem;
    background-color: #0022E9;
    background-image: linear-gradient(32deg, #bfe3f8 var(--colorstop1), #57A0FF var(--colorstop2), #0022E9 var(--colorstop3));
    background-size: 100% 100%;
    background-position: 0% 0%;
    border-radius: 2.1rem;
    color: #fff;
    --colorstop1: 0%;
    --colorstop2: 18.13%;
    --colorstop3: 38.54%;
    transition: .4s;
    transition-property: color, --colorstop1, --colorstop2, --colorstop3;

    &:hover {
        color: #0022E9;
        --colorstop1: 61.46%;
        --colorstop2: 79.59%;
        --colorstop3: 100%;
    }

    .c-icon {
        background-color: #fff;

        a:hover & {
            background-color: #0022E9;
        }

    }

    .p-service__inquiry & {
        height: 4.5rem;
        width: 19rem;
        border-radius: 2.25rem 0 0 2.25rem;

        @media (width < 768px) {
            width: 100%;
            border-radius: 2.25rem;
        }
    }

}

@property --colorstop1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --colorstop2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

@property --colorstop3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.c-icon {
    display: inline-block;
    width: 1.6rem;
    height: 1.6rem;
    background-color: #fff;
    mask-size: contain;
    mask-repeat: no-repeat;

    &.-mail {
        mask-image: url(../images/icon_mail.svg);
    }
}

.p-mv,
.p-bg {
    z-index: 1;
}

.p-gr {
    z-index: 0;
}

.p-mv,
.p-bg,
.p-gr {
    position: absolute;
    background: transparent no-repeat 0% 0%;
    background-size: cover;
    transition-delay: calc(var(--delay-unit) * var(--index));

    &.-mv01 {
        width: 48.2vw;
        height: 35.5vw;
        top: 0;
        right: 0;
        --index: 0;
        background-image: url(../images/bg_mv_01@1x.webp);

        @media (width >=768px) and (resolution >=2dppx) {
            background-image: url(../images/bg_mv_01@2x.webp);
        }

        @media (width < 768px) {
            width: calc(497 / 2 * var(--vwsp));
            height: calc(668 / 2 * var(--vwsp));
            background-image: url(../images/bg_mv_01@sp.webp);
        }
    }

    &.-mv02 {
        width: 41.2vw;
        height: 46.3vw;
        top: 0;
        right: 0;
        background-image: url(../images/bg_mv_02@1x.webp);
        --index: 1;

        @media (width >=768px) and (resolution >=2dppx) {
            background-image: url(../images/bg_mv_02@2x.webp);
        }

        @media (width < 768px) {
            width: calc(422 / 2 * var(--vwsp));
            height: calc(711 / 2 * var(--vwsp));
            background-image: url(../images/bg_mv_02@sp.webp);
        }
    }

    &.-mv03 {
        width: 55.9vw;
        height: 52.3vw;
        top: 0;
        right: 0;
        background-image: url(../images/bg_mv_03@1x.webp);
        --index: 3;

        @media (width >=768px) and (resolution >=2dppx) {
            background-image: url(../images/bg_mv_03@2x.webp);
        }

        @media (width < 768px) {
            width: calc(566 / 2 * var(--vwsp));
            height: calc(800 / 2 * var(--vwsp));
            background-image: url(../images/bg_mv_03@sp.webp);
        }
    }

    &.-line01 {
        background-image: url(../images/bg_line_01.svg);
        width: 28.5vw;
        height: 22.8vw;
        top: 0;
        left: calc(746 * var(--vw));
        --index: var(--top-fadein-index);

        @media (width < 768px) {
            left: calc(153 * var(--vwsp));
            /* 191x162 */
            width: calc(191 * var(--vwsp));
            height: calc(162 * var(--vwsp));
            background-image: url(../images/bg_line_01sp.svg);
        }
    }

    &.-line02 {
        background-image: url(../images/bg_line_02.svg);
        width: 20.9vw;
        height: 14.0vw;
        top: calc(582 * var(--vw));
        right: 0;
        --index: var(--top-fadein-index);

        @media (width < 768px) {
            /* 100x95 */
            width: calc(100 * var(--vwsp));
            height: calc(95 * var(--vwsp));
            background-image: url(../images/bg_line_02sp.svg);
        }
    }

    &.-line03 {
        background-image: url(../images/bg_line_03.svg);
        width: 22.5vw;
        height: 59.7vw;
        top: calc(411 * var(--vw));
        left: 0;
        --index: var(--top-fadein-index);

        /* 111x338 */
        @media (width < 768px) {
            top: calc(188 * var(--vwsp));
            width: calc(111 * var(--vwsp));
            height: calc(338 * var(--vwsp));
            background-image: url(../images/bg_line_03sp.svg);
        }

    }

    &.-line04 {
        right: 0;
        transform: translateY(calc(360 * var(--vw)));
        background-image: url(../images/bg_line_04.svg);
        width: 21.5vw;
        height: 59.7vw;

        /* 135x337 */
        @media (width < 768px) {
            width: calc(135 * var(--vwsp));
            height: calc(337 * var(--vwsp));
            background-image: url(../images/bg_line_04sp.svg);
            transform: translateY(calc(-600 * var(--vwsp)));
        }
    }

    &.-line05 {
        left: 0;
        transform: translateY(calc(-300 * var(--vw)));
        background-image: url(../images/bg_line_05.svg);
        width: 20.9vw;
        height: 59.7vw;

        /* 153x357 */
        @media (width < 768px) {
            width: calc(153 * var(--vwsp));
            height: calc(357 * var(--vwsp));
            background-image: url(../images/bg_line_05sp.svg);
            transform: translateY(calc(-178 * var(--vwsp)));
        }
    }

    &.-line06 {
        right: 0;
        transform: translateY(calc(-784 * var(--vw)));
        background-image: url(../images/bg_line_06.svg);
        width: 21.5vw;
        height: 59.7vw;

        /* 145x377 */
        @media (width < 768px) {
            width: calc(145 * var(--vwsp));
            height: calc(377 * var(--vwsp));
            background-image: url(../images/bg_line_06sp.svg);
            transform: translateY(calc(-364 * var(--vwsp)));
        }
    }

    &.-line07 {
        left: 0;
        transform: translateY(calc(-126 * var(--vw)));
        background-image: url(../images/bg_line_07.svg);
        width: 16.1vw;
        height: 14.0vw;

        /* 116x115 */
        @media (width < 768px) {
            width: calc(116 * var(--vwsp));
            height: calc(115 * var(--vwsp));
            background-image: url(../images/bg_line_07sp.svg);
            transform: translateY(calc(-85 * var(--vwsp)));
        }
    }

    &.-line08 {
        right: 0;
        transform: translateY(calc(-130 * var(--vw)));
        background-image: url(../images/bg_line_08.svg);
        width: 22.6vw;
        height: 36.7vw;

        /* 115x165 */
        @media (width < 768px) {
            width: calc(115 * var(--vwsp));
            height: calc(165 * var(--vwsp));
            background-image: url(../images/bg_line_08sp.svg);
            transform: translateY(calc(4 * var(--vwsp)));
        }
    }

    &.-line09 {
        left: 0;
        transform: translateY(calc(191 * var(--vw)));
        background-image: url(../images/bg_line_09.svg);
        width: 21.0vw;
        height: 63.1vw;

        /* 139x357 */
        @media (width < 768px) {
            width: calc(139 * var(--vwsp));
            height: calc(357 * var(--vwsp));
            background-image: url(../images/bg_line_09sp.svg);
            transform: translateY(calc(360 * var(--vwsp)));
        }
    }

    &.-line10 {
        right: 0;
        transform: translateY(calc(-445 * var(--vw)));
        background-image: url(../images/bg_line_10.svg);
        width: 36.2vw;
        height: 36.7vw;

        /* 157x249 */
        @media (width < 768px) {
            width: calc(157 * var(--vwsp));
            height: calc(249 * var(--vwsp));
            background-image: url(../images/bg_line_10sp.svg);
            transform: translateY(calc(-214 * var(--vwsp)));
        }
    }

    &.-gradation01 {
        width: calc(789 * var(--vw));
        height: calc(1026 * var(--vw));
        background-image: radial-gradient(farthest-side ellipse at 2.01% 30.41%, #223B80, transparent);
        opacity: 0.8;

        @media (width < 768px) {
            /* 322x351 */
            width: calc(322 * var(--vwsp));
            height: calc(351 * var(--vwsp));
            background-image: radial-gradient(farthest-side ellipse at 18.48% 25%, #223B80, transparent);
        }
    }

    &.-gradation02 {
        right: 0;
        transform: translateY(calc(-277 * var(--vw)));
        width: calc(1315 * var(--vw));
        height: calc(3296 * var(--vw));
        background-image: radial-gradient(farthest-side ellipse at 110.34% 50%, #1B3373 39%, rgba(34, 59, 128, 0.5) 75%, transparent);

        @media (width < 768px) {
            /* 375x1473 */
            width: calc(375 * var(--vwsp));
            height: calc(1473 * var(--vwsp));
            background-image: radial-gradient(farthest-side ellipse at 172.93% 50%, #1B3373 39%, rgba(34, 59, 128, 0.5) 75%, transparent);
            transform: translateY(calc(230 * var(--vwsp)));
        }
    }

    &.-gradation03 {
        left: 0;
        transform: translateY(calc(-413 * var(--vw)));
        width: calc(824 * var(--vw));
        height: calc(1252 * var(--vw));
        background-image: radial-gradient(farthest-side ellipse at -10.19% 50%, #0E1B41 28%, transparent);
        opacity: 0.6;

        /* 375x611 */
        @media (width < 768px) {
            width: calc(375 * var(--vwsp));
            height: calc(611 * var(--vwsp));
            background-image: radial-gradient(farthest-side ellipse at -18.13% 50%, #0E1B41 28%, transparent);
            transform: translateY(calc(-170 * var(--vwsp)));
        }
    }

    &.-gradation04 {
        left: 0;
        transform: translateY(calc(309 * var(--vw)));
        width: calc(824 * var(--vw));
        height: calc(1252 * var(--vw));
        background-image: radial-gradient(farthest-side ellipse at -10.19% 50%, #0E1B41 28%, transparent);
        opacity: 0.6;

        /* 375x611 */
        @media (width < 768px) {
            width: calc(375 * var(--vwsp));
            height: calc(611 * var(--vwsp));
            background-image: radial-gradient(farthest-side ellipse at -18.13% 50%, #0E1B41 28%, transparent);
            transform: translateY(calc(223 * var(--vwsp)));
        }
    }

    &.-gradation05 {
        right: 0;
        width: calc(936 * var(--vw));
        height: calc(1539 * var(--vw));
        background-image: radial-gradient(farthest-side ellipse at 83.17% 50%, #0E1B41 28%, transparent);
        opacity: 0.6;

        /* 293x769 */
        @media (width < 768px) {
            width: calc(293 * var(--vwsp));
            height: calc(769 * var(--vwsp));
            background-image: radial-gradient(farthest-side ellipse at 132.59% 50%, #0E1B41 28%, transparent);
            transform: translateY(calc(718 * var(--vwsp)));
        }
    }
}

/* .p-gr {
    z-index: 10;
    outline: solid 1px #f0f;
} */



.js-top-reveal,
.p-bg.js-reveal,
.p-bg.js-reveal-group01 {
    mask-image: linear-gradient(#000, #000);
    mask-repeat: no-repeat;
    mask-size: 100% 0%;
    mask-position: 0% 0%;
    transition: mask-size 2s;

    &.-active {
        mask-size: 100% 100%;
    }

    &.p-mv {
        transition-duration: 1s;
    }
}

.js-top-reveal {
    transition-delay: calc(var(--delay-unit) * var(--index));
}

.js-top-fadein,
.js-fadein,
.js-reveal-group01:not(.p-bg) {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s, transform 1s;

    &.-active {
        opacity: 1;
        transform: translateY(0);
    }
}

.js-top-fadein {
    transition-delay: calc(var(--delay-unit) * var(--index));
    --index: var(--top-fadein-index);
}

.p-service__inquiry {
    position: fixed;
    bottom: 9.0rem;
    right: 0;
    z-index: 5;

    @media (width < 768px) {
        width: calc(100vw - 56 * var(--vwsp));
        bottom: calc(28 * var(--vwsp));
        right: calc(28 * var(--vwsp));
    }
}