@charset "UTF-8";

/*2*/
@media screen and (max-width:767px) { /*SP*/
}
@media screen and (min-width:768px) , print { /*PC&TB*/
}

/*3*/
@media screen and (max-width:767px) { /*SP*/
}
@media screen and (min-width:768px) and ( max-width:1023px) { /*TB*/
}
@media screen and (min-width:1024px) , print { /*PC*/
}



/*KEY VISUAL*/
@media screen and (max-width:767px) { /*SP*/
    /* #animation_container,#canvas,#dom_overlay_container{
        width: 100%!important; height: auto;
    } */
}
@media screen and (min-width:768px) , print { /*PC&TB*/
    /* div#animation_container,canvas#canvas,div#dom_overlay_container{
        width: 100%!important; height: 712px;
    } */
}

/* KYV */
@media screen and (max-width:767px) { /* SP [375] */
    .KYV_lines,.KYV_gradient,.KYV_triangleWrap,.KYV_logo,.KYV_debris1,.KYV_debris2,.KYV_debris3,.KYV_debris4,.KYV_debris5,.KYV_debris6,.KYV_debris7{
        visibility: visible;
    }
    /* ------------ */
    #KYV{
        width: 100%;
        aspect-ratio: 375 / 510;
        position: relative;
        overflow: hidden;
    }
    .KYV_lines{
        width: 100%;
        position: absolute;
        top: 0; left: 0;
        transform-origin: 0% 0%;
        z-index: 10;
    }
    .KYV_gradient{
        /* width: 950px; */
        width: 253.33vw;
        position: absolute;
        /* top: -204px; */
        top: -54.40vw;
        /* left: -116px; */
        left: -30.93vw;
        transform-origin: 50% 50%;
        z-index: 0;
    }
    /* ------------ */
    .KYV_triangleWrap{
        position: absolute;
        top: 0;
        left: 0;
    }
    .KYV_logoWrap{
        position: relative;
        display: inline-block;
        position: absolute;
        /* top: 15px; */
        top: 4.00vw;
        /* left: 15px; */
        left: 4.00vw;
        /* width: 50px; */
        width: 13.33vw;
        /* height: 50px; */
        height: 13.33vw;
        transition: 0.3s;
        z-index: 25;
    }
    .KYV_logoWrap:hover{
        opacity: 0.5;
    }
    .KYV_logo{
    }
    .KYV_triangle{
        /* width: 375px; */
        width: 100.00vw;
        position: absolute;
        /* top: 115px; */
        top: 30.67vw;
        left: 0;
        z-index: 12;
        clip-path: inset(0 0 0 100%);
        transition: clip-path 0.5s;
    }
    .KYV_text1{
        /* width: calc( 332px * 0.4 ); */
        width: calc( 88.53vw * 0.4 );
        position: absolute;
        /* top: 225px; */
        top: 60.00vw;
        /* left: 20px; */
        left: 5.33vw;
        z-index: 13;
    }
    .KYV_text2{
        /* width: calc( 661px * 0.4 ); */
        width: calc( 176.27vw * 0.4 );
        position: absolute;
        /* top: 260px; */
        top: 69.33vw;
        /* left: 20px; */
        left: 5.33vw;
        z-index: 13;
    }
    .KYV_text3{
        /* width: calc( 561px * 0.4 ); */
        width: calc( 149.60vw * 0.4 );
        position: absolute;
        /* top: 298px; */
        top: 79.47vw;
        /* left: 20px; */
        left: 5.33vw;
        z-index: 13;
    }
    .KYV_nav1,.KYV_nav2,.KYV_nav3,.KYV_nav4,.KYV_nav5{display: none;}
    .KYV_debris1,.KYV_debris2,.KYV_debris3,.KYV_debris4,.KYV_debris5,.KYV_debris6,.KYV_debris7{
        width: 100%;
        position: absolute;
        /* top: 0; left: 0px; */
        top: 0; left: 0.00vw;
        z-index: 1;
    }
    .KYV_debris1{
        opacity: 0.13;
    }
    .KYV_debris2{
        opacity: 0.30;
    }
    .KYV_debris3{
        opacity: 0.42;
    }
    .KYV_debris4{
        opacity: 0.60;
    }
    .KYV_mask1{
        width: auto;
        /* height: 280px; */
        height: 74.67vw;
        position: absolute;
        /* top: 0px; */
        top: 0.00vw;
        /* left: -660px; */
        left: -176.00vw;
        z-index: 20;
    }
    .KYV_mask2{
        width: auto;
        /* height: 280px; */
        height: 74.67vw;
        position: absolute;
        /* bottom: -30px; */
        bottom: -8.00vw;
        /* left: -660px; */
        left: -176.00vw;
        z-index: 20;
        transform: scaleY(-1);
    }
    .KYV_firstLine{
        position: absolute;
        /* bottom: calc( 50% - 16.5px ); */
        bottom: calc( 50% - 4.40vw );
        width: 0%;
        /* height: 3px; */
        height: 0.80vw;
        background-color: #fff;
        z-index: 21;
    }
}
@media screen and (min-width:768px) , print { /* PC [1670]→[1500] */
    .KYV_lines,.KYV_gradient,.KYV_triangleWrap,.KYV_logo,.KYV_debris1,.KYV_debris2,.KYV_debris3,.KYV_debris4,.KYV_debris5,.KYV_debris6,.KYV_debris7{
        visibility: visible;
    }


    /* ------------ */
    .KYV_draft{
        position: absolute;
        top: 0; left: 0;
        z-index: 99;
        mix-blend-mode: darken;
        display: none;
    }
    /* ------------ */
    #KYV{
        width: 100%;
        aspect-ratio: 1500 / 712;
        position: relative;
        overflow: hidden;
    }
    .KYV_lines{
        width: 100%;
        position: absolute;
        top: 0; left: 0;
        transform-origin: 0% 0%;
        z-index: 10;
    }
    .KYV_gradient{
        /* width: 2820px; */
        width: 188.00vw;
        position: absolute;
        /* top: -1040px; left: -260px; */
        top: -69.33vw; left: -17.33vw;
        transform-origin: 50% 50%;
        z-index: 0;
    }
    /* ------------ */
    .KYV_triangleWrap{
        position: absolute;
        /* top: 80px; */
        top: 5.33vw;
        /* left: 100px; */
        left: 6.67vw;
    }
    .KYV_logoWrap{
        position: relative;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        /* width: 71px; */
        width: 4.73vw;
        /* height: 71px; */
        height: 4.73vw;
        transition: 0.3s;
        z-index: 25;
    }
    .KYV_logoWrap:hover{
        opacity: 0.5;
    }
    .KYV_logo{
        width: 100%;
    }
    
    .KYV_triangle{
        /* width: 1019px; */
        width: 67.93vw;
        position: absolute;

        top: -9.9vw;
        /* left: -116px; */
        left: -7.73vw;
        z-index: 12;
        clip-path: inset(0 0 0 100%);
        transition: clip-path 0.5s;
    }
    .KYV_text1{
        position: absolute;
        /* width: 332px; */
        width: 22.13vw;
        /* top: 130px; */
        top: 8.67vw;
        /* left: 0px; */
        left: 0.00vw;
        z-index: 13;
    }
    .KYV_text2{
        position: absolute;
        /* width: 661px; */
        width: 44.07vw;
        /* top: 203px; */
        top: 13.53vw;
        /* left: 0px; */
        left: 0.00vw;
        z-index: 13;
    }
    .KYV_text3{
        position: absolute;
        /* width: 561px; */
        width: 37.40vw;
        /* top: 278px; */
        top: 18.53vw;
        /* left: 0px; */
        left: 0.00vw;
        z-index: 13;
    }
    .KYV_text1j{
        position: absolute;
        /* width: 346px; */
        width: 23.07vw;
        /* top: 125px; */
        top: 8.33vw;
        /* left: 0px; */
        left: 0.00vw;
        z-index: 13;
    }
    .KYV_text2j{
        position: absolute;
        /* width: 436px; */
        width: 29.07vw;
        /* top: 199px; */
        top: 13.27vw;
        /* left: -5px; */
        left: -0.33vw;
        z-index: 13;
    }
    .KYV_text3j{
        position: absolute;
        /* width: 593px; */
        width: 39.53vw;
        /* top: 272px; */
        top: 18.13vw;
        /* left: -4px; */
        left: -0.27vw;
        z-index: 13;
    }
    .KYV_nav1{
        position: absolute;
        /* width: 142px; */
        width: 9.47vw;
        /* top: 360px; */
        top: 24.00vw;
        /* left: -4px; */
        left: -0.27vw;
        z-index: 14;
    }
    .KYV_nav2{
        position: absolute;
        /* width: 222px; */
        width: 14.80vw;
        /* top: 399px; */
        top: 26.60vw;
        /* left: -4px; */
        left: -0.27vw;
        z-index: 14;
    }
    .KYV_nav3{
        position: absolute;
        /* width: 90px; */
        width: 6.00vw;
        /* top: 438px; */
        top: 29.20vw;
        /* left: -4px; */
        left: -0.27vw;
        z-index: 14;
    }
    .KYV_nav4{
        position: absolute;
        /* width: 73px; */
        width: 4.87vw;
        /* top: 474px; */
        top: 31.60vw;
        /* left: -4px; */
        left: -0.27vw;
        z-index: 14;
    }
    .KYV_nav5{
        position: absolute;
        /* width: 77px; */
        width: 5.13vw;
        /* top: 517px; */
        top: 34.47vw;
        /* left: -4px; */
        left: -0.27vw;
        z-index: 14;
    }
    /* ------------ */
    .KYV_debris1,.KYV_debris2,.KYV_debris3,.KYV_debris4,.KYV_debris5,.KYV_debris6,.KYV_debris7{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
        opacity: 0;
    }
    .KYV_debris1{
        opacity: 0.13;
    }
    .KYV_debris2{
        opacity: 0.30;
    }
    .KYV_debris3{
        opacity: 0.42;
    }
    .KYV_debris4{
        opacity: 0.60;
    }
    .KYV_debris7{
        display: none;
    }
    .KYV_mask1{
        /* width: 2640px; */
        width: 176.00vw;
        position: absolute;
        top: 0;
        /* left: -980px; */
        left: -65.33vw;
        z-index: 20;
    }
    .KYV_mask2{
        /* width: 2640px; */
        width: 176.00vw;
        position: absolute;
        /* bottom: -1px; */
        bottom: -0.07vw;
        /* left: -980px; */
        left: -65.33vw;
        z-index: 20;
        transform: scaleY(-1);
    }
    .KYV_firstLine{
        position: absolute;
        bottom: 50%;
        width: 0%;
        /* height: 3px; */
        height: 0.20vw;
        background-color: #fff;
        z-index: 21;
    }
}