.bg-wrap {
    background-image: url(../images/top/about-bg_pc.png);
    background-position: left bottom 32.8vw;
    background-repeat: no-repeat;
    background-size: 43.7vw 46.4vw;

    .mv {
        position: relative;
        height: 64vw;
        margin-bottom: var(--p150-spa);
        background-image: url(../images/common/pt-bg_pc.png);
        background-position: right top;
        background-size: 50vw 29vw;
        background-repeat: no-repeat;
        overflow: hidden;

        .mv-ttl {
            position: absolute;
            top: calc(110px + 12.7vw);
            left: var(--p160-spa);
            z-index: 100;

            h2 {
                font-size: var(--20to48);
                letter-spacing: var(--lsp-70);
                font-weight: var(--fw-700);
                line-height: var(--lh-16);

                .bigger {
                    font-size: var(--28to65);
                    letter-spacing: var(--lsp-120);
                }
            }
        }

        .anime-area {
            width: 68.9vw;
            height: 56vw;
            position: absolute;
            top: 7.8vw;
            right: -3.7vw;
            overflow: hidden;

            #animation_container {
                width: 68.9vw!important;
                height: 56vw!important;
                position: relative;

                #canvas,#dom_overlay_container {
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: block;
                }

            }
        }

    }

    .about {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-direction: row-reverse;
        padding-left: var(--p160-spa);
        padding-right: var(--p310-spa);
        padding-bottom: var(--p80-spa);

        .desc-wrap {
            width: 29.6vw;

            h3 {
                img {
                    width: 15.7vw;
                }
            }

        }

        .cont-wrap {
            position: relative;
            width: 37.5vw;
            height: 40vw;

            .circle {
                width: 16.7vw;
                position: absolute;

                &::before {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 16.7vw;
                    background-color: var(--yellow);
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    z-index: -1;
                }

                img {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: -14vw;
                }

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

                &:nth-child(1) {
                    top: 0;
                    left: 0;

                    img {
                        width: var(--p160-spa);
                    }
                }

                &:nth-child(2) {
                    top: 9.3vw;
                    right: 0;

                    img {
                        width: var(--p130-spa);
                    }
                }

                &:nth-child(3) {
                    bottom: 5.7vw;
                    left: 0;

                    img {
                        width: var(--p140-spa);
                    }
                }

                &:nth-child(4) {
                    bottom: 0;
                    right: 0;

                    img {
                        width: 12.6vw;
                    }
                }
                

            }

        }

    }

}

.company {
        .container {
            padding-top: 12.7vw;
            padding-left: var(--p310-spa);
            padding-bottom: 13vw;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            gap: var(--p80-spa);
            position: relative;

            .desc-wrap {
            width: 29.7vw;

                h3 {
                    img {
                        width: 23.5vw;
                    }
                }
            }

            > img {
                width: 50vw;
                height: 39.2vw;
                object-fit: contain;
                position: absolute;
                right: 0;
                top: var(--p80-spa);
            }
        }
}

.faq {
    padding-top: 12.7vw;
    padding-right: var(--p310-spa);
    padding-bottom: 19.8vw;
    background-color: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row-reverse;
    gap: 5.9vw;
    position: relative;


    .desc-wrap {
        width: 29.7vw;

        h3 {
            img {
                width: 9.3vw;
            }
        }
        
    }

    > img {
        width: 44vw;
        position: absolute;
        top: 8.1vw;
        left: 4.1vw;
        animation: faqAnime 10s infinite ease-in-out forwards;
    }
}

@keyframes faqAnime {
    0% {
        top: 8.1vw;
    }

    25% {
        top: 9.1vw;
    }

    50% {
        top: 8.1vw;
    }

    75% {
        top: 9.1vw;
    }

    100% {
        top: 8.1vw;
    }
}


.t-sec {
    h3 {
        font-size: var(--16to24);
        font-weight: var(--fw-700);
        margin-bottom: var(--p60-spa);
        letter-spacing: var(--lsp-80);

        img {
            margin-bottom: var(--p40-spa);
        }
    }

    p {
        font-size: var(--14to20);
        letter-spacing: var(--lsp-40);
        line-height: var(--lh-30);
        margin-bottom: var(--p80-spa);
    }
}


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

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

    .bg-wrap {

        background-image: url(../images/top/about-bg_sp.png);
        background-size: 100% 147vw;
        background-position: left bottom 89vw;
        
        .mv {
            background-image: url(../images/common/pt-bg_sp.png);
            background-size: 89.6vw 68.2vw;
            height: calc(60px + 179vw);
            margin-bottom: var(--p90-spa);

            .mv-ttl {
                text-align: center;
                top: calc(60px + var(--p40-spa));
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
            }

            .anime-area {
                top: calc(60px + 50.6vw);
                right: -42.6vw;
                left: -14.4vw;
                width: 157.3vw!important;
                height: 128vw!important;

            #animation_container {
                width: 157.3vw!important;
                height: 128vw!important;
                position: relative;
            }
        }

        }

        .about {
            flex-direction: column;
            padding-left: var(--p25-spa);
            padding-right: var(--p25-spa);
            padding-bottom: var(--p100-spa);

            .desc-wrap {
                width: 100%;

                h3 {
                    img {
                        width: 39.7vw;
                        margin-bottom: var(--p10-spa);
                    }
                }

                p {
                    margin-bottom: var(--p30-spa);
                }

            }

            .cont-wrap {
                width: 100%;
                height: 116vw;
                margin-bottom: var(--p60-spa);

                .circle {
                    width: 41.3vw;

                    &::before {
                        height: 41.3vw;
                        top: 9.3vw;
                    }

                    img {
                        top: 0;
                    }

                    p {
                        position: absolute;
                        bottom: var(--p25-spa);
                        left: 50%;
                        transform: translateX(-50%);
                        margin-bottom: 0;
                    }

                    &:nth-child(1) {
                        height: 50.6vw;
                        top: 0;

                        img {
                            width: 21vw;
                        }
                    }

                    &:nth-child(2) {
                        height: 49.3vw;
                        top: 14.6vw;

                        &::before {
                            top: var(--p30-spa);
                        }

                        img {
                            width: 17.6vw;
                        }
                    }

                    &:nth-child(3) {
                        height: 45.3vw;
                        top: 56.4vw;

                        &::before {
                            top: var(--p15-spa);
                        }

                        img {
                            width: 17.8vw;
                        }
                    }

                    &:nth-child(4) {
                        height: 46.6vw;
                        top: 68.6vw;

                        &::before {
                            top: var(--p20-spa);
                        }

                        img {
                            width: 31.7vw;
                        }
                    }
                }
            }
        }
    }

    .t-sec {
        h3 {
            margin-bottom: var(--p40-spa);

            img {
                margin-bottom: var(--p20-spa);
            }
        }

        p {
            margin-bottom: var(--p40-spa);
        }
    }

    .company {
        .container {
            padding-top: var(--p90-spa);
            padding-bottom: var(--p100-spa);
            padding-left: 0;
            flex-direction: column;
            gap: 14.5vw;
            overflow: hidden;

            .desc-wrap {
                width: 100%;
                padding-left: var(--p25-spa);
                padding-right: var(--p25-spa);

                h3 {
                    img {
                        width: 59.4vw;
                    }
                }
            }

            > img {
                position: static;
                width: 144.5vw;
                height: 94.6vw;
                max-width: none;
                transform: translateX(3vw);
            }

        }
    }

    .faq {
        padding-top: var(--p90-spa);
        padding-right: 0;
        padding-bottom: var(--p100-spa);
        flex-direction: column;
        gap: 14.6vw;

        .desc-wrap {
            width: 100%;
            padding-left: var(--p25-spa);
            padding-right: var(--p25-spa);

            h3 {
                img {
                    width: 23.4vw;
                }
            }
        }

        > img {
            position: static;
            width: 100%;
            height: 84vw;
        }

    }

    @keyframes faqAnime {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}


}

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