@charset "utf-8";



#kv .scroll .bar{
    animation-name: anm-scroll;
    animation-iteration-count: infinite;
    animation-duration: 1500ms;
    animation-timing-function: ease-in-out;
}


#kv h1{
    opacity:0;
}

body.loaded #kv h1{
    opacity:1;
    transition-duration: 750ms;
    transition-property: opacity,filter;
    transition-timing-function: linear;
}


#kv .texts p{
    opacity:0;
}

body.loaded #kv .texts p{
    opacity:1;
    transition-duration: 750ms;
    transition-property: opacity,filter;
    transition-timing-function: linear;
}

body.loaded #kv .texts p:nth-child(2){
    transition-delay: 300ms;
}
body.loaded #kv .texts p:nth-child(3){
    transition-delay: 600ms;
}
body.loaded #kv .texts p:nth-child(4){
    transition-delay:900ms;
}







@keyframes anm-scroll{
    0%{
        height: 0;
        transform: translateY(0);
    }
    50%{
        transform: translateY(0);
        height: 100%;
    }
    100%{
        height: 0;
        transform: translateY(100px);
    }
}

/* #kv .images .main span{
    transform-origin: center bottom ;
    transform: rotate3d(1, 0,0, 0deg);
    transition-duration: 1000ms;
    transition-property:transform ;
}

#kv.open .images .main span{
    animation-duration: 1300ms;
    animation-name:anm-main-open ;
    transform: rotate3d(1, 0,0, -90deg);
} */


@keyframes anm-main-close{
    0%{
        transform: rotate3d(1, 0,0, -90deg);
    }
  
    100%{
        transform: rotate3d(1, 0,0, 0deg);
    }
}

@keyframes anm-main-open{
    0%{
        transform: rotate3d(1, 0,0, 0deg);
        animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    }
    40%{
        transform: rotate3d(1, 0,0, 10deg);
        animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    }
 
    100%{
        transform: rotate3d(1, 0,0, -90deg);
    }
}



@media print,screen and (min-width: 813px) {

  
    #kv{
        position: relative;
        padding-top: 40px;
        padding-bottom: 200px;
        padding-left: 80px;
        padding-right: 80px;
    }
    

    #kv .inner{
        position: relative;
        min-width: 1040px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

 
    
    
    #kv .texts{
        flex:1;
        display: flex;
        flex-direction: row-reverse;
    }
    #kv .texts h1{
        background-image: url(../img/title.svg);
        background-size: 100% 100%;
        width: calc(172px);
        height: calc(172px / 171.688 * 337.463 );
        display: block;
        text-indent: -9999px;
        overflow: hidden;
        margin-left: 30px;

    }
    #kv .texts p{
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-family: 'Shippori Mincho', serif;
        font-size: 18px;
        line-height: 1.5em;
        margin-left: 25px;
        letter-spacing: 0.1em;
    }

    #kv .images{
        margin-top: 100px;
        position: relative;
        height: 1400px;
        width: calc(1120px / 2);
        margin-left: 40px;
    }
 
    #kv .images .set{
        position: absolute;
        left: 0;
        top: 0;
        width: calc(1120px / 2);
        height:calc(740px / 2);
    }

    #kv.fixed .images .set{
        position: fixed;
    }

    #kv.fixed.end .images .set{
        position: absolute;
        left: 0;
        bottom: 0;
    }


    #kv .images .canvasarea{
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
        width: calc(1200px / 2);
        height:calc(840px / 2);
    }

    #kv .images .canvasarea canvas{
        position: relative;
        width: 100%;
        height: 100%;
    }

    /* #kv .images .main{
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
        width: calc(1120px / 2);
        height:calc(740px / 2);
        perspective : 2000;
        -webkit-perspective : 2000;
    }
    #kv .images .main span{
        display: block;
        position: relative;
        width: calc(1120px / 2);
        height:calc(740px / 2);
        background-image: url(../img/kv_ill.png);
        background-size: calc(1120px / 2 * 2) calc(740px / 2 * 8);
        background-position: 0 0;
    }

    
    
    #kv .images .sub{
        position: absolute;
        left: calc(50% - (320px / 2));
        top: 100px;
        width: calc(320px);
        height: calc(320px / 809.25 * 489.76 );
        background-image: url(../img/kv_ill_2.svg);
        background-size: 100% 100%;
        visibility: hidden;
    }

      
    #kv.comp .images .sub{
        visibility: inherit;
    } */
   
 
    

    #kv .scroll{
        position: absolute;
        left: 0;
        top: calc(100vh - 80px - 100px - 40px);
        overflow: hidden;
        display: flex;
        flex-direction: row-reverse;
        height: 100px;
    }
    #kv .scroll .tit{
        background-image: url(../img/scroll.svg);
        background-size: 100% 100%;
        width: 7.35px;
        height: 39.33px;
        text-indent: -9999px;
        overflow: hidden;
        margin-left: 10px;
    }
    #kv .scroll .bar{
        position: relative;
        width: 2px;
        background-color: #000;
    }

  
    


}








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




    #kv{
        padding-top: 20px;
        padding-bottom: 100px;
    }
    

    #kv .inner{
        position: relative;
        margin-left: 20px;
        margin-right: 20px;
    }

  
    
    #kv .texts{
        flex:1;
        display: flex;
        justify-content: center;
        flex-direction: row-reverse;
    }
    #kv .texts h1{
        background-image: url(../img/title.svg);
        background-size: 100% 100%;
        width: calc(30vw);
        height: calc(30vw / 171.688 * 337.463 );
        display: block;
        text-indent: -9999px;
        overflow: hidden;
        margin-left: 6vw;

    }
    #kv .texts p{
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-family: 'Shippori Mincho', serif;
        font-size: 3.6vw;
        line-height: 1.5em;
        margin-left: 2vw;
        letter-spacing: 0.1em;
    }

    #kv .images{
        margin-top: 20px;
        position: relative;
        height: calc(82vw * 3);
        width: calc(82vw);
        margin-left: auto;
        margin-right: auto;
    }
 
    #kv .images .set{
        position: absolute;
        left: 0;
        top: 0;
        width: calc(82vw);
        height: calc(82vw / 1200 * 840 );
    }

    #kv.fixed .images .set{
        position: fixed;
    }

    #kv.fixed.end .images .set{
        position: absolute;
        left: 0;
        bottom: 0;
    }




    #kv .images .canvasarea{
        pointer-events: none;
        position: absolute;
        left: 0;
        top: 0;
        width: calc(82vw);
        height: calc(82vw / 1200 * 840 );
    }

    #kv .images .canvasarea canvas{
        position: relative;
        width: 100%;
        height: 100%;
        /* background-color: #f90; */
    }




    /*
    


    #kv .images .main{
        pointer-events: none;
        width: calc(82vw);
        height: calc(82vw / 1120 * 740 );
        perspective : 2000;
        -webkit-perspective : 2000;
    }

    #kv .images .main span{
        display: block;
        position: relative;
        width: calc(82vw);
        height: calc(82vw / 1120 * 740 );
        background-image: url(../img/kv_ill.png);
        background-size: calc(82vw * 2) calc(82vw / 1120 * 740 * 8);
        background-position: 0 0;
    }

    

       
    #kv .images .sub{
        position: absolute;
        left: calc(50% - (50vw / 2));
        top: 14%;
        background-image: url(../img/kv_ill_2.svg);
        background-size: 100% 100%;
        width: calc(50vw);
        height: calc(50vw / 809.25 * 489.76  );
        visibility: hidden;
    }

    #kv.comp .images .sub{
        visibility: inherit;
    } */



    #kv .scroll{
        position: absolute;
        left: -10px;
        top: calc(100vh - 80px - 20px - 175px * 0.3 );
        overflow: hidden;
        display: flex;
        flex-direction: row-reverse;
        height: 80px;
    }
    #kv .scroll .tit{
        background-image: url(../img/scroll.svg);
        background-size: 100% 100%;
        width: 7.35px;
        height: 39.33px;
        text-indent: -9999px;
        overflow: hidden;
        margin-left: 5px;
    }
    #kv .scroll .bar{
        position: relative;
        width: 1px;
        background-color: #000;
    }





}