@charset "utf-8";

#mvv{
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
 }


 
 #mvv .inner{
    position: relative;
}



 #mvv .text{
    position: relative;
    margin-left: auto;
}




#mvv .text h2{
   position: relative;
    display: block;
line-height: 1.35em;
color: #ff5810;
}



 

 
 #mvv .text .body{
    position: relative;
    line-height: 1.75em;
    color: #ff5810;
    
 }
 

 #mvv .cloud{
    position: absolute;
    background-image: url(../img/movie_cloud.png);
    background-size: 100% 100%;
   }

   




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

    #mvv{
        height: 100vh;
     }
    
    
     

  
       
   #mvv .inner{
    width: 1040px;
    margin-left: auto;
    margin-right: auto;
}


    #mvv .text{
        width: 720px;
    }


    
     #mvv .text h2{
        margin-top: 30px;
       font-size: 56px;
    }
    
    
    #mvv .text .body{
        margin-top: 10px;
       font-size: 18px;
       
    }


    
 
    #mvv .text .more{
        margin-top: 50px;
        margin-left: auto;
    }

    #mvv .cloud{
        right: -900px;
      bottom: -250px;
      width: calc(3760px / 2);
      height: calc(1508px / 2);
      transition-property: transform;
      transition-duration: 1000ms;
      transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */
       }
     
       #movie.over .cloud{
        transform:translateX(-50px);
          
       }

}



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

  

    #mvv{
        height: calc(100vw / 768 * 1100 * 1);
        
     }
    
    
     #mvv .inner {
        margin-top: 30vw;
        width: 88vw;
        margin-left: auto;
        margin-right: auto;
     }

     
  
     
  
    
     #mvv .text h2{
        margin-top: 3vw;
       font-size: 9vw;
    }
    
    
    #mvv .text .body{
        margin-top: 3vw;
       font-size: 4vw;
       
    }
    
    #mvv .text .more{
        margin-top: 6vw;
        margin-left: auto;
    }

    #mvv .cloud {
        left: -140vw;
        bottom: -30vw;
        width: calc(300vw);
        height: calc(300vw / 3760 * 1508);
  
     }

}