@charset "UTF-8";

@keyframes pickUpSlideIn {
    to {
        transform: translateX(0);
    }
}
.fade-in {
    opacity: 0;
    animation: fadeIn 3s ease-in forwards;
}

/********** トップビジュアル **********/
.section_top {
    position: relative;
    z-index: 2;

    .cs_keyvisual {
        position: relative;
        overflow: hidden;
    }

    /********** ピックアップ **********/
    .pick-up {
        animation: pickUpSlideIn 0s ease-in forwards;
        animation-delay: 0s;
        margin: 30px 0;
        padding: 0 20px;

        .pu-container {
            position: relative;
			box-shadow: 0px 0px 10px 1px rgba(181, 225, 233, 0.8);

            .pu-label {
                position: absolute;
                background: #009bff;
                color: #fff;
                font-weight: bold;
                padding: 1px 20px;
                top: -19px;
                border-radius: 4px 4px 0 0;
            }

            .swiper {
                background: #fff;
                height: 34vw;

                .swiper-wrapper {
                    .swiper-slide {
                        padding: 4px;

                        a { display: flex; }
                        .pu-img {
                            flex: 1;

                            img {
                                border-radius: 4px;
                                height: 100%;
                                width: 100%;
                                object-fit: contain;
                            }
                        }
                        .pu-content {
                            flex: 1.5;
                            margin: auto 30px auto 12px;
                            overflow: hidden;

                            .pu-title {
                                font-size: 3.2vw;
                                font-weight: bold;
                                margin: 4px 0;
                                overflow: hidden;
                                display: -webkit-box;
                                text-overflow: ellipsis;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                            }
                            .pu-text {
                                font-size: 2.9333vw;
                                margin-bottom: 6px;
                                overflow: hidden;
                                display: -webkit-box;
                                text-overflow: ellipsis;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3;
                            }
                            .pu-tag {
                                display: flex;
                                flex-wrap: wrap;
                                font-size: 2.9333vw;
                                gap: 2px 8px;

                                dt {
                                    border: 1px solid #4a5a6b;
                                    padding: 0 8px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media all and (min-width: 1250px) {
    .section_top {
        .pick-up {
            animation: pickUpSlideIn 0.5s ease-in forwards;
            animation-delay: 2s;
            position: absolute;
            height: 360px;
            width: 250px;
            margin: 0;
            padding: 0;
            right: 0;
            bottom: calc(100vw * 5 / 1280);
            z-index: 5;
            transform: translateX(calc(100% + 32px));

            .pu-container {
                .pu-label {
                    top: -25px;
                }

                .swiper {
                    height: auto;
                    padding-bottom: 32px;

                    .swiper-wrapper {
                        .swiper-slide {
                            a { flex-direction: column; }
                            .pu-content {
                                flex: 1;
                                margin: 0 12px;

                                .pu-title {
                                    font-size: 18px;
                                }
                                .pu-text {
                                    font-size: 12px;
                                }
                                .pu-tag {
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media all and (min-width: 1601px) {
    .section_top {
        .pick-up {
            bottom: 25px;
        }
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
.fade-in {
    opacity: 0;
    animation: fadeIn 3s ease-in forwards;
}
@keyframes infinity-scroll-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes infinity-scroll-right {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
    height: 430px;
}
.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0;
}
.scroll-infinity__list--left {
    animation: infinity-scroll-left 80s infinite linear 0.5s both;
    .scroll-infinity__item {
        background-image: url('/assets/img/sp/top/cs_top_image.png');
        background-repeat: no-repeat;
        background-position: left bottom 52px;
        margin-left: 10px;
        width: 2508px; /* 画像のサイズに合わせ */
    }
}
.scroll-infinity__list--right {
    animation: infinity-scroll-right 80s infinite linear 0.5s both;
    .scroll-infinity__item {
        background-image: url('/assets/img/sp/top/cs_top_image.png');
        background-repeat: no-repeat;
        background-position: left bottom 76px;
        width: 2508px; /* 画像のサイズに合わせ */
        filter: blur(6px);
    }
}
.scroll-infinity.is_front {
    position: absolute;
    z-index: 3;
}
.scroll-infinity.back {
    position: absolute;
    z-index: 1;
}

.section_contact {
    position: relative;

    .scroll-infinity {
        position: absolute;
        bottom: 0;
        z-index: -1;

        .scroll-infinity__wrap {
            display: flex;
            overflow: hidden;

            .scroll-infinity__list--right {
                animation: infinity-scroll-right 30s infinite linear 0.5s both;
                .scroll-infinity__item {
                    background-image: url('/assets/img/top/cs_contact_bg.png');
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;
                    width: 100vw;
                }
            }
        }
    }
}

@media all and (min-width: 1250px) {
    .scroll-infinity__wrap {
        height: calc(100vw * 280 /1280);
        .section_contact & {
            height: 640px;
        }
    }
    .scroll-infinity__list--left {
        .scroll-infinity__item {
            background-image: url('/assets/img/top/cs_top_image.png');
            background-size: contain;
            background-position: left top 12px;
            margin-left: 20px;
            width: calc(100vw * 1840 /1280); /* 画像のサイズに合わせ */
        }
    }
    .scroll-infinity__list--right {
        .scroll-infinity__item {
            background-image: url('/assets/img/top/cs_top_image.png');
            background-size: contain;
            background-position: left bottom 72px;
            margin-left: 12px;
            width: calc(100vw * 1450 /1280); /* 画像のサイズに合わせ */
            .section_contact & {
                margin-left: -8px;
            }
        }
    }
}
@media all and (min-width: 1601px) {
    .scroll-infinity__wrap {
        height: 450px;
    }
    .scroll-infinity__list--left {
        .scroll-infinity__item {
            width: 3000px; /* 画像のサイズに合わせ */
        }
    }
    .scroll-infinity__list--right {
        .scroll-infinity__item {
            width: 2460px; /* 画像のサイズに合わせ */
        }
    }
}

/********** 取り組み事例 カルーセル **********/
.cs_body_caseStudy {
    .swiper-parent {
        position: relative;

        .swiper {
            --swiper-navigation-size: 32px;
            padding-bottom: 60px;
        }
        .swiper-slide {
            a::after {
                content: '';
            }
        }

        .swiper-button-prev,
        .swiper-button-next {
            --swiper-navigation-top-offset: auto;
            bottom: 28px;
            padding-top: 28px;
        }
        /* 次ページボタンのスタイル */
        .swiper-button-next:after {
            content: url('/assets//img/top/cs_caseStudy_swiper_next_btn.png');
        }
        /* 前ページボタンのスタイル */
        .swiper-button-prev:after {
            content: url('/assets//img/top/cs_caseStudy_swiper_next_btn.png');
            transform: scale(-1, 1); /* 左右反転 */
        }
        .swiper-scrollbar {
            /* プログレス */
            --progress-width: 0%;
            --swiper-scrollbar-sides-offset: 60px;
            --swiper-scrollbar-bottom: 30px;
            background: repeating-linear-gradient(
                to right,
                #bfdced 0,
                #bfdced 4px,
                transparent 8px,
                transparent 12px
            );
            &::before {
                content: '';
                width: var(--progress-width);
                height: 4px;
                display: block;
                background: #007aff;
                position: absolute;
            }
        }
        .swiper-scrollbar-drag {
            position: relative;
            /* 丸 */
            &::after {
                content: '';
                width: 15px;
                height: 15px;
                display: block;
                background: #007aff;
                border-radius: 100px;
                position: absolute;
                right: 0;
                top: -6px;
            }
        }
    }
}

@media all and (min-width: 1250px) {
    .cs_body_caseStudy {
        .swiper-parent {
            .swiper {
                margin-right: -20vw;

                .swiper-items {
                    position: relative;
                    height: 60px;
                    margin-top: 20px;
                    margin-right: 20vw;
                }
            }
        }
    }
}

/********** 各セクション アニメーション **********/
.lottie-container-fv-back {
    position: absolute;
    top: 0;
    left: 0;
}
.lottie-container-fv-front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.section_num {
    position: relative;

    .cs_num_img {
        opacity: 0;
        position: relative;
        z-index: 1;
        background-color: #FFF;
    }
}
.lottie-container-data {
    position: absolute;
    height: 100%;
    /* left: 0; */
    transform: scale(2, 2.5);
}
.cs_body_caseStudy {
    position: relative;
    z-index: 1;
}
.lottie-container-case-pc {
    display: none;
}
.lottie-container-case-sp {
    position: absolute;
    height: 100%;
    left: 0;
}
.section_sol {
    position: relative;
}
.lottie-container-sol-pc {
    display: none;
}
.lottie-container-sol-sp {
    position: absolute;
    height: 100%;
    left: 0;
}
.section_vision {
    position: relative;
}
.lottie-container-vision-pc {
    display: none;
}
.lottie-container-vision-sp {
    /* position: absolute;
    left: 0;
    margin-top: -50px; */
    position: absolute;
    right: 0;
    top: -22vw;
    width: 100%;
}
.lottie-container-vision-ribbon {
    display: none;
}
.lottie-container-news-pc {
    display: none;
}
.lottie-container-news-sp {
    position: absolute;

    left: 0;
    top: -122px;
    width: 100%;
}

@media all and (min-width: 1250px) {
    .lottie-container-fv-back,
    .lottie-container-fv-front {
        width: 100%;
        height: 640px;
    }
    .lottie-container-data {
        height: auto;
        top: -140px;
        transform: scale(1);
    }
    .lottie-container-case-pc {
        display: block;
        position: absolute;
        left: 220px;
        top: 240px;
        transform: scale(1.7);
    }
    .lottie-container-case-sp {
        display: none;
    }
    .lottie-container-sol-pc {
        display: block;
        position: absolute;
        left: 0;
        height: 100%;
    }
    .lottie-container-sol-sp {
        display: none;
    }
    .lottie-container-vision-pc {
        display: block;
        position: absolute;
        right: 0;
        transform: scale(1.3);
    }
    .lottie-container-vision-sp {
        display: none;
    }
    .lottie-container-vision-ribbon {
        display: block;
        position: absolute;
        /* bottom: 240px; */
        /* top: 200px; */
        height: 95%;
        left: -10px;
        transform: translateX(11px);
        z-index: 1;
    }
    .lottie-container-news-pc {
        display: block;
        position: absolute;
        left: 5%;
        top: -152px;
        transform: scaleX(1.4);
    }
    .lottie-container-news-sp {
        display: none;
    }
}

/********** 背景全体の水玉 **********/
.particles_js {
    position: fixed;
    width: 100%;
    height: 100%;
}

/********** ソリューション **********/
@keyframes solutionFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes solutionFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.1);
    }
}

@media (min-width: 769px) {
    .section_sol {
        & .cs_body_sol_pc {
            .cs_sol_main_wrap {
                position: relative;
                .cs_sol_item {
                    position: absolute;
                    left: 0;
                    top: 0;
                    transform: scale(0.9);
                    opacity: 0;
                    transition: opacity 0.5s, transform 0.5s;
                    &.fade-in {
                        animation: solutionFadeIn 0.5s forwards;
                        z-index: 2;
                    }
                    &.fade-out {
                        animation: solutionFadeOut 0.5s forwards;
                    }
                }
            }
        }
        .cs_linkBtn_wrap--sol {
            margin-top: 140px;
        }
    }
}

.cs_keyvisual {
    background-image: none !important;
}
.section_caseStudy {
    & .cs_caseStudy_thum {
        & .cs_caseStudy_carousel {
            & li {
                + li {
                    margin-left: 0 !important;
                }
            }
        }
    }
}

/* 画面 */
.cs_wrapper {
    background-image: url('/assets/img/sp/top/cs_top_bg002.png') !important;
    background-size: cover;
}
.section_contact {
    background: none !important;
}
@media (min-width: 1250px) {
    .cs_wrapper {
        background-image: url('/assets/img/top/cs_top_bg002.png') !important;
        background-position: left top;
        background-size: contain;
    }
    .section_vision {
        padding-bottom: 800px;

        .cs_vision_wrap {
            position: relative;
            height: 500px;
            width: 100%;
            justify-content: center;
        }
    }
}

/********** 中央寄せ **********/
/*.section_num {
    display: flex;
    justify-content: center;
}*/
.section_sol {
    margin: 15vw auto 0 auto;
}

/********** ソリューション 右パネル可変 **********/
.section_vision {
    .cs_vision_wrap {
        padding-bottom: 46vw;
        position: relative;
    }
}
.section_num {
    .pc_none {
        width: 100%;
    }
}
@media (min-width: 1250px) {
    .section_sol {
        min-width: calc(1280px - 64px);

        .cs_body_sol_pc {
            min-width: calc(1280px - 64px);

            .cs_sol_main_wrap {
                width: 100%;

                .cs_sol_item {
                    width: 100%;
                    max-width: 1227px;

                    .cs_sol_main {
                        background-color: inherit !important;
                        background-size: contain !important;
                        .cs_sol_main_body {
                            background-color: inherit;
                            flex: 1;
                            margin-left: clamp(244px, 22vw, 366px) !important;
                        }
                    }
                }
            }
        }
    }

    .section_vision {
        background-size: contain;
        background-image: none;
        padding: 0 0 100px 0;
        width: 100%;
        min-width: calc(1280px - 64px);
        max-width: 1667px;

        .cs_vision_wrap {
            padding-top: 100px;
            padding-bottom: 0;

            .cs_body_vision {
                padding-left: 4vw;

                p {
                    width: 35vw;
                    max-width: 675px;
                }
            }
        }

        .cs_vision_img {
            height: 643px;

            .cs_vision_img_inner {
                position: relative;
                background-color: #fff;
                height: 643px;

                img {
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    object-fit: contain;
                    height: 100%;
                    width: 100%;
                }
            }
        }
    }
}