@charset "utf-8";

.l-contents {
    letter-spacing: 0.03em;
}

.l-service {
    background-image:
        url(/images/service/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 {
      margin-top: 0;
        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 (1024px <= width < 1200px) {
          translate: 0 2em;
        }
        @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 {
    max-width: 1080px;
    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 {
    max-width: 1080px;
    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-weight: bold;
            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 {
    max-width: 1080px;
    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 {
    max-width: 1080px;
    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;
        }
    }
}

#menu {
    max-width: 1080px;
    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);
        }
    }
}


#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 {
    max-width: 1080px;
    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 {
    max-width: 1080px;
    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 {
    max-width: 1080px;
    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/service/icon_arrow_down_01.svg') no-repeat right 0.5em center;
    text-decoration: none;
    transition: 0.2s;

    @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-service-notes {
  display: block;
  width: min(1080px, 100% - 80px);
  margin-inline: auto;
  margin-block: 2.4rem;

   @media (width < 768px) {
    width: calc(100% - 40px);
   }
}

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

    @media (width < 768px) {
        padding: 4.1rem 20px;
        margin-block-start: 4.0rem;
        background-image: url('/images/service/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;
        }
    }
}

.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/service/bg_mv_01@1x.webp');

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

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

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

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

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

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

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

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

    &.-line01 {
        background-image: url('/images/service/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/service/bg_line_01sp.svg');
        }
    }

    &.-line02 {
        background-image: url('/images/service/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/service/bg_line_02sp.svg');
        }
    }

    &.-line03 {
        background-image: url('/images/service/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/service/bg_line_03sp.svg');
        }

    }

    &.-line04 {
        right: 0;
        transform: translateY(calc(360 * var(--vw)));
        background-image: url('/images/service/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/service/bg_line_04sp.svg');
            transform: translateY(calc(-600 * var(--vwsp)));
        }
    }

    &.-line05 {
        left: 0;
        transform: translateY(calc(-300 * var(--vw)));
        background-image: url('/images/service/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/service/bg_line_05sp.svg');
            transform: translateY(calc(-178 * var(--vwsp)));
        }
    }

    &.-line06 {
        right: 0;
        transform: translateY(calc(-784 * var(--vw)));
        background-image: url('/images/service/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/service/bg_line_06sp.svg');
            transform: translateY(calc(-364 * var(--vwsp)));
        }
    }

    &.-line07 {
        left: 0;
        transform: translateY(calc(-126 * var(--vw)));
        background-image: url('/images/service/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/service/bg_line_07sp.svg');
            transform: translateY(calc(-85 * var(--vwsp)));
        }
    }

    &.-line08 {
        right: 0;
        transform: translateY(calc(-130 * var(--vw)));
        background-image: url('/images/service/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/service/bg_line_08sp.svg');
            transform: translateY(calc(4 * var(--vwsp)));
        }
    }

    &.-line09 {
        left: 0;
        transform: translateY(calc(191 * var(--vw)));
        background-image: url('/images/service/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/service/bg_line_09sp.svg');
            transform: translateY(calc(360 * var(--vwsp)));
        }
    }

    &.-line10 {
        right: 0;
        transform: translateY(calc(-445 * var(--vw)));
        background-image: url('/images/service/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/service/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);
}