@charset "utf-8";


#kv h1 span{
    opacity:0;
    transform:translate(100px,-10px);
 }

 

 body.loaded #kv h1 span{
    opacity:1;
    transform:translate(0px);
    transition-duration: 600ms;
    transition-property:opacity,transform ;
    transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
 }


 body.loaded #kv h1 span:nth-child(1){
    transition-delay: 400ms;
 }
 body.loaded #kv h1 span:nth-child(2){
    transition-delay: 600ms;
 }
 body.loaded #kv h1 span:nth-child(3){
    transition-delay: 800ms;
 }


 #kv .lead{
    opacity:0;
    transform:translateY(50px);
 }

 
 body.loaded #kv .lead{
    opacity:1;
    transform:translateY(0px);
    transition-duration: 600ms;
    transition-property:opacity,transform ;
    transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition-delay: 1000ms;
 }


 #kv .body{
    opacity:0;
    transform:translateY(50px);
 }

 
 body.loaded #kv .body{
    opacity:1;
    transform:translateY(0px);
    transition-duration: 600ms;
    transition-property:opacity,transform ;
    transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition-delay: 1200ms;
 }






 #kv .images .image{
    transform:scale(0);
 }

 
 body.loaded #kv .images .image{
    transform:scale(1);
    transition-duration: 600ms;
    transition-property:transform ;
    transition-timing-function:cubic-bezier(0.175, 0.885, 0.320, 1.275);
 }

 body.loaded #kv .images .image:nth-child(2){
    transition-delay: 200ms;
 }





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

    #kv{
        height: 550px;
        background-color: #fff;
        background-image: url(../img/kv/back.png);
        background-size: cover;
        background-position: center center;
        position: relative;
    }

    #kv .logo{
        background-image: url(../img/kv/logo.png);
        background-size: 100% 100%;
        width: calc(340px / 2);
        height: calc(146px / 2);
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
        left: 20px;
        top: 20px;
    }

    #kv .inner{
        width: 900px;
        margin-left: auto;
        margin-right: auto;
        justify-content: space-between;
        padding-top: 50px;
        position: relative;
    }

    #kv h1{
    
        width: 785px;
        height: 194px;
        position: relative;
    }

    #kv h1 span{
        position: absolute;
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
     }

     #kv h1 span:nth-child(1){
        background-image: url(../img/kv/title1.png);
        width: 438px;
        height: 87px;
        left: 0;
        top: 0;
      }

      #kv h1 span:nth-child(2){
        background-image: url(../img/kv/title2.png);
        width: 403px;
        height: 119px;
        left: 162px;
        top:75px;
      }
      #kv h1 span:nth-child(3){
        background-image: url(../img/kv/title3.png);
        width: 217px;
        height: 88px;
        left: 568px;
        top:53px;
      }
 

    #kv .lead{
        margin-top: 30px;
        background-image: url(../img/kv/lead.png);
        background-size: 100% 100%;
        width: 469px;
        height: 123px;
        text-indent: -9999px;
        overflow: hidden;
    }

    #kv .body{
        margin-top: 20px;
        font-size: 20px;
        line-height: 1.75em;
    }

    #kv .images .image1{
        width: 190px;
        position: absolute;
        right: 160px;
        top: 280px;
}

#kv .images .image2{
    width: 282px;
    position: absolute;
    right: -150px;
    top: 120px;
}


  
}



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


    #kv{
        height: 140vw;
        background-color: #fff;
        background-image: url(../img/kv/back_sp.png);
        background-size: cover;
        background-position: center center;
        position: relative;
    }

    #kv .logo{
        background-image: url(../img/kv/logo.png);
        background-size: 100% 100%;
        width: calc(30vw);
        height: calc(30vw / 340 * 146 );
        text-indent: -9999px;
        overflow: hidden;
        position: absolute;
        left: 3vw;
        top: 3vw;
    }

    #kv .inner{
        margin-left: 6vw;
        margin-right: 6vw;
        justify-content: space-between;
        padding-top: 24vw;
        position: relative;
    }

    #kv h1{
        width: calc(88vw);
        height: calc(88vw / 707 * 320 );
        z-index: 1;
        position: relative;
    }



    #kv h1 span{
        position: absolute;
        display: block;
        background-size: 100% 100%;
        text-indent: -9999px;
        overflow: hidden;
     }

     #kv h1 span:nth-child(1){
        background-image: url(../img/kv/title1_sp.png);
        width: calc(70vw);
        height: calc(70vw / 558 * 112 );
        left: 0;
        top: 0;
      }

      #kv h1 span:nth-child(2){
        background-image: url(../img/kv/title2_sp.png);
        width: calc(64vw);
        height: calc(64vw / 513 * 153 );
        left: 17.5vw;
        top:12.5vw;
      }
      #kv h1 span:nth-child(3){
        background-image: url(../img/kv/title3_sp.png);
        width: calc(34vw);
        height: calc(34vw / 278 * 113 );
        left: 54vw;
        top:26vw;
      }






    #kv .lead{
        margin-top: 3vw;
        background-image: url(../img/kv/lead_sp.png);
        background-size: 100% 100%;
        width: calc(50vw);
        height: calc(50vw / 384 * 297 );
        text-indent: -9999px;
        overflow: hidden;
    }

    #kv .body{
        margin-top: 6vw;
        font-size: 3.4vw;
        line-height: 1.75em;
    }

    #kv .images .image1{
        width: 30vw;
        position: absolute;
        right: 2vw;
        top: 75vw;
}

#kv .images .image2{
    width: 38vw;
    position: absolute;
    right: -8vw;
    top: -1vw;
}

}