.mv {
    position: relative;
    height: 66.8vw;
    margin-bottom: var(--p100-spa);
    overflow: hidden;

    .mv-ttl {
        position: absolute;
        top: 6vw;
        left: 7.4vw;
        font-weight: var(--fw-700);
        z-index: 100;

        h2 {
            font-size: var(--25to52);
            line-height: 2;
            margin-bottom: 20px;
            letter-spacing: var(--lsp-70);
        }

        p {
            font-size: var(--16to28);
            letter-spacing: var(--lsp-110);
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
    }

    #animation_container {
        width: 104vw !important;
        height: 60.9vw !important;
        object-fit: contain;
        position: absolute;
        right: -8vw;
        top: 3.9vw;
        overflow: hidden;
        /* z-index: -1; */

        #canvas,
        #dom_overlay_container {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            /* width: 100% !important; */
            /* height: 100% !important; */
            display: block !important;
            overflow: hidden !important;
        }

    }
}

.lspa-sec {
    padding-left: var(--p60-spa);
}



.company {
    position: relative;
    padding-bottom: var(--p220-spa);
    overflow: hidden;

    .en-ttl {
        margin-bottom: var(--p50-spa);
        margin-left: auto;
        margin-right: auto;
        margin-bottom: var(--p40-spa);

        &::before {
            top: calc(50% - 6px);
            left: -24px;
        }
    }

    .company-wrap {
        text-align: center;
        position: relative;
        z-index: 10;

        h4 {
            font-size: var(--22to42);
            letter-spacing: var(--lsp-30);
            line-height: var(--lh-20);
            font-weight: var(--fw-700);
            margin-bottom: var(--p30-spa);
        }

        p {
            line-height: var(--lh-33);
            margin-bottom: var(--p80-spa);
        }
    }

    .left-anime {
        width: 25.7vw;
        height: 32.8vw;
        position: absolute;
        left: 4.1vw;
        bottom: 9.2vw;

        img {
            &:nth-child(1) {
                width: 11.6vw;
                position: absolute;
                top: 0;
                left: 6vw;
                /* animation: upperAnime 10s infinite ease-in-out forwards; */
            }

            &:nth-child(2) {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                /* animation: lowerAnime 10s infinite 1.5s ease-in-out forwards; */
            }
        }
    }

    .right-anime {
        overflow: hidden;
        width: 29.8vw;
        height: 25vw;
        position: absolute;
        right: 0;
        bottom: 12.9vw;
        z-index: 1;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: absolute;
            right: -1.3vw;
            bottom: 0;
        }
    }

}

/* @keyframes upperAnime {
    0% {
        top: 0;
    }

    25% {
        top: 1vw;
    }

    50% {
        top: 0;
    }

    75% {
        top: 1vw;
    }

    100% {
        top: 0;
    }
} */

/* @keyframes lowerAnime {
    0% {
        bottom: 0;
    }

    25% {
        bottom: -0.7vw;
    }

    50% {
        bottom: 0;
    }

    75% {
        bottom: -0.7vw;
    }

    100% {
        bottom: 0;
    }
} */

:root {
    --iso: 0.577;
    --dist: 5vw;
}

.about {

    .bg-gray {
        background-color: var(--l-gray);
        border-radius: var(--p80-spa) 0 0 var(--p80-spa);
        padding-top: var(--p200-spa);
        padding-left: var(--p250-spa);
        padding-bottom: var(--p220-spa);
        overflow: hidden;

        .about-upper {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--p100-spa);
            margin-bottom: var(--p160-spa);

            .p-en__wrap {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                flex-direction: column;
                gap: var(--p30-spa);
                writing-mode: vertical-lr;

                .en-ttl {
                    padding-top: 27px;
                    position: relative;

                    &::before {
                        position: absolute;
                        top: 0;
                        left: calc(50% - 6px);
                    }
                }

                .jp-ttl {
                    font-size: var(--22to38);
                    letter-spacing: var(--lsp-200);
                    font-weight: var(--fw-700);
                }
            }

            .about-wrap {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                gap: var(--p50-spa);

                .inner {
                    background-color: #fff;
                    border-radius: 25px;
                    padding: var(--p40-spa) 0 var(--p65-spa) 0;
                    max-width: 17.5vw;

                    img {
                        border-radius: 25px;
                        margin-bottom: var(--p30-spa);
                    }

                    p {
                        text-align: center;
                        line-height: var(--lh-20);
                        font-weight: var(--fw-700);
                    }
                }
            }
        }

        .about-lower {
            position: relative;

            .planning-ttl {
                width: fit-content;
                margin-left: 23.4vw;
                text-align: center;
                font-weight: var(--fw-700);
                margin-bottom: var(--p80-spa);

                p {
                    font-size: var(--14to24);
                    margin-bottom: var(--p25-spa);
                    letter-spacing: var(--lsp-60);
                }

                h4 {
                    font-size: var(--22to38);
                    letter-spacing: var(--lsp-120);
                }
            }

            .planning-slider {
                --gap: clamp(20px, 2vw, 40px);
                --peek: clamp(6px, 1vw, 16px);
                position: relative;
                margin: 0 auto var(--p65-spa);
                width: calc((15.3vw * 5) + (var(--gap) * 4) - var(--peek));

                .slick-list {
                    overflow: hidden;
                }

                .slick-prev,
                .slick-next {
                    position: absolute;
                    top: 38%;
                    width: var(--p50-spa);
                    min-width: 40px;
                    height: var(--p50-spa);
                    min-height: 40px;
                    text-indent: -9999px;
                    cursor: pointer;
                    z-index: 2;
                }

                .slick-prev {
                    left: -1.5vw;
                    background: transparent url(../images/common/prev-btn.png) no-repeat center / contain;
                }

                .slick-next {
                    right: 15.2vw;
                    background: transparent url(../images/common/next-btn.png) no-repeat center / contain;
                }

                .inner {
                    width: 15.3vw;
                    margin-right: var(--gap);

                    a {

                        img {
                            margin-bottom: var(--p30-spa);
                            height: auto;
                            transition: 0.3s;

                            &:hover {
                                opacity: 0.7;
                                transition: 0.3s;
                            }
                        }

                        h5 {
                            font-size: var(--14to20);
                            text-align: center;
                            font-weight: var(--fw-700);
                            line-height: var(--lh-22);
                        }
                    }
                }
            }

            .dn-btn {
                margin-left: 23.4vw;
            }

            .car-anime {
                width: 13.9vw;
                height: 7.6vw;
                position: absolute;
                right: var(--p150-spa);
                top: -3.8vw;

                img {

                    will-change: transform;
                    animation-timing-function: linear;
                    animation-fill-mode: forwards;
                    animation-iteration-count: infinite;
                    /* animation-direction: alternate; */

                    &:nth-child(1) {
                        width: 6.8vw;
                        position: absolute;
                        top: 0;
                        left: 0;
                        animation-name: blue-go-left-up;
                        animation-duration: 5s;
                        /* animation-delay: -2s; */
                    }

                    &:nth-child(2) {
                        width: 6.3vw;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        animation-name: red-go-right-down;
                        /* animation-duration: 4.5s; */
                        animation-duration: 5s;
                    }
                }
            }

        }
    }

}

@keyframes blue-go-left-up {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    90% {
        opacity: 0.5;
    }

    95% {
        opacity: 0;
    }

    100% {
        transform: translate(calc(-1 * var(--dist)),
                calc(var(--dist) * var(--iso)));
        opacity: 0;
    }
}

@keyframes red-go-right-down {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    90% {
        opacity: 0.5;
    }

    95% {
        opacity: 0;
    }

    100% {
        transform: translate(var(--dist),
                calc(-1 * var(--dist) * var(--iso)));
        opacity: 0;
    }
}

.ourtown {
    padding-top: var(--p200-spa);
    padding-left: var(--p310-spa);
    padding-bottom: var(--p250-spa);
    position: relative;
    z-index: 100;

    .text-wrap {

        .p-en__wrap {
            margin-bottom: var(--p50-spa);

            .jp-ttl {
                font-size: var(--18to32);
                font-weight: var(--fw-700);
                margin-bottom: var(--p25-spa);
            }

            .en-ttl {
                padding-left: 27px;

                &::before {
                    left: 0;
                    top: calc(50% - 6px);
                }
            }
        }

        h4 {
            font-size: var(--22to42);
            line-height: var(--lh-22);
            font-weight: var(--fw-700);
            margin-bottom: var(--p80-spa);
            letter-spacing: var(--lsp-60);
        }

        .lg-btn {
            margin-left: 0;
        }
    }

    .anim2-frame {
        position: absolute;
        right: var(--p100-spa);
        top: -4.7vw;
        width: 45.4vw;
        height: 55.2vw;
        z-index: -1;
        overflow: hidden;
        display: block;
    }

    .anim2_sp-frame {
        display: none;
    }

    .people-anime {
        width: 13.5vw;
        height: 14.3vw;
        position: absolute;
        top: -11vw;
        left: var(--p250-spa);

        img {
            &:nth-child(1) {
                width: 6.1vw;
                position: absolute;
                top: 0;
                left: 0;
                /* animation: womanAnime 3s linear infinite forwards; */
            }

            &:nth-child(2) {
                width: 6.4vw;
                position: absolute;
                bottom: 0;
                right: 0;
                /* animation: manAnime 3s linear 1.5s infinite forwards; */
            }
        }
    }
}

/* @keyframes womanAnime {
    0% {
        top: 0;
    }

    50% {
        top: 0.5vw;
    }

    100% {
        top: 0;
    }
} */

/* @keyframes manAnime {
    0% {
        top: 0;
    }

    50% {
        top: 0.3vw;
    }

    100% {
        top: 0;
    }
} */


@media screen and (max-width:1400px) {

    .mv {
        .mv-ttl {
            top: 9vw;
            left: 5.4vw;
        }

        #animation_container {
            top: 4.9vw;
        }
    }

    .ourtown {
        padding-left: var(--p220-spa);
    }
}

@media screen and (max-width:768px) {

    .lspa-sec {
        padding-left: 0;
    }

    .mv {
        height: 192vw;
        margin-bottom: var(--p20-spa);

        .mv-ttl {
            top: 80px;
            left: var(--p25-spa);

            p {
                line-height: var(--lh-20);
            }
        }

        #animation_container {
            width: 246vw !important;
            height: 144vw !important;
            right: -85.6vw;
            top: calc(60px + 37.3vw);
            overflow: hidden;
            z-index: -1;


        }
    }

    .company {
        padding-bottom: 95vw;
        position: relative;
        z-index: 100;
        overflow: visible;
        z-index: 10;

        .en-ttl {
            margin-bottom: var(--p25-spa);
        }

        .company-wrap {
            h4 {
                margin-bottom: var(--p20-spa);
                line-height: var(--lh-24);
            }

            p {
                padding: 0 var(--p25-spa);
                text-align: left;
                margin-bottom: var(--p50-spa);
                line-height: 3;
            }
        }

        .left-anime {
            width: 61.6vw;
            height: 100vw;
            left: 0;
            bottom: -8vw;
            overflow: hidden;

            img {
                &:nth-child(1) {
                    width: 44.5vw;
                    left: -9.9vw;
                }

                &:nth-child(2) {
                    left: -11.7vw;
                }
            }
        }

        .right-anime {
            width: 65.3vw;
            height: 54.7vw;
            right: 0;
            bottom: 29.3vw;

            img {
                right: -5.3vw;
                bottom: 0;
            }
        }
    }

    .about {
        position: relative;

        &::after {
            content: "";
            display: block;
            background-image: url(../images/top/trees.png);
            background-size: contain;
            background-repeat: no-repeat;
            width: var(--p90-spa);
            height: 12.8vw;
            position: absolute;
            bottom: 0;
            right: var(--p25-spa);
        }

        .bg-gray {
            padding-top: var(--p80-spa);
            padding-left: 0;
            padding-bottom: 50vw;
            border-radius: var(--p35-spa) 0 0 var(--p35-spa);

            .about-upper {
                flex-direction: column;
                align-items: center;
                gap: var(--p40-spa);
                margin-bottom: var(--p80-spa);

                .p-en__wrap {
                    flex-direction: column-reverse;
                    align-items: center;
                    gap: var(--p15-spa);
                    writing-mode: inherit;

                    .en-ttl {
                        padding-top: 0;

                        &::before {
                            width: 6px;
                            height: 6px;
                            left: -16px;
                            top: calc(50% - 3px);
                        }
                    }
                }

                .about-wrap {
                    flex-direction: column;
                    gap: var(--p30-spa);

                    .inner {
                        width: 73vw;
                        min-width: 275px;
                        max-width: none;
                        padding: var(--p30-spa) 0 var(--p40-spa) 0;

                        p {
                            font-size: 4.2vw;
                        }

                        img {
                            margin-left: auto;
                            margin-right: auto;
                            margin-bottom: var(--p25-spa);
                        }
                    }
                }
            }

            .about-lower {
                .planning-ttl {
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: var(--p60-spa);
                }

                .planning-slider {
                    width: 100%;
                    --gap: clamp(12px, 3.5vw, 20px);
                    --peek: 0;
                    /* 見切れさせない */
                    margin: 0 auto var(--p35-spa);

                    .inner {
                        width: 100%;
                        margin-right: 0;

                        a {
                            img {
                                margin-bottom: var(--p25-spa);
                                margin-left: auto;
                                margin-right: auto;
                            }
                        }
                    }

                    .slick-track {
                        gap: var(--gap);
                    }

                    .slick-prev,
                    .slick-next {
                        width: 40px;
                        height: 40px;
                    }

                    .slick-prev {
                        left: 10vw;
                    }

                    .slick-next {
                        right: 10vw;
                    }
                }

                .dn-btn {
                    margin-left: auto;
                    margin-right: auto;
                }

                .car-anime {
                    width: 18.9vw;
                    height: 17vw;
                    right: var(--p25-spa);
                    top: -289vw;

                    img {

                        &:nth-child(1) {
                            width: 100%;
                        }

                        &:nth-child(2) {
                            display: none;
                        }
                    }
                }

            }
        }
    }

    .ourtown {
        padding-top: var(--p90-spa);
        padding-bottom: var(--p60-spa);
        position: relative;

        .text-wrap {
            text-align: center;
            margin-bottom: var(--p50-spa);

            .p-en__wrap {
                margin-bottom: var(--p35-spa);

                .jp-ttl {
                    margin-bottom: var(--p15-spa);
                }

                .en-ttl {
                    margin-left: auto;
                    margin-right: auto;
                }
            }

            h4 {
                margin-bottom: var(--p50-spa);
            }

            .lg-btn {
                margin-left: auto;
                margin-right: auto;
            }
        }

        .anim2-frame {
            display: none;
        }

        .anim2_sp-frame {
            width: 100%;
            height: auto;
            overflow: hidden;
            display: block;
            aspect-ratio: 227 / 276;
            transform: translateX(-2.7vw);
        }

        .people-anime {
            width: 42.6vw;
            height: 44vw;
            top: -38vw;
            left: var(--p50-spa);

            img {
                &:nth-child(1) {
                    width: 18.9vw;
                }

                &:nth-child(2) {
                    width: 19.7vw;
                }
            }
        }
    }

}

@keyframes womanAnime {
    0% {
        top: 0;
    }

    50% {
        top: 1vw;
    }

    100% {
        top: 0;
    }
}

@keyframes manAnime {
    0% {
        top: 0;
    }

    50% {
        top: 0.6vw;
    }

    100% {
        top: 0;
    }
}


@media screen and (max-width:500px) {

    .about {
        .bg-gray {
            .about-lower {
                .car-anime {
                    top: -317vw;
                }
            }
        }
    }

}

@media screen and (max-width:390px) {
    .about {
        .bg-gray {
            .about-lower {
                .planning-slider {
                    .slick-prev {
                        left: 4vw;
                    }

                    .slick-next {
                        right: 4vw;
                    }
                }
            }
        }
    }

    @keyframes womanAnime {
        0% {
            top: 0;
        }

        50% {
            top: 1.2vw;
        }

        100% {
            top: 0;
        }
    }

    @keyframes manAnime {
        0% {
            top: 0;
        }

        50% {
            top: 0.9vw;
        }

        100% {
            top: 0;
        }
    }
}