@charset "utf-8";


/* ---------------------------------------------------------------------------------
Mainvisual */





@media(min-width:641px){

#mainVisual2{ width: auto; height: 750px; overflow: hidden; background:url(/sng/2020/common/images/mv/background.jpg) no-repeat center top; background-size: cover;}
#mainVisual2 >.inner{ width: 1000px; margin: 0 auto; position: relative;}

#moviecover{ height: 750px; width: 100%; position: absolute; }

#mainVisual2 .logo,
#mainVisual2 .mem,
#mainVisual2 .mem .text,
#mainVisual2 .date,
#mainVisual2 .sma{ position: absolute;}

#mainVisual2 .mem .face{ opacity: 0; top: -10px;}
#mainVisual2 .mem .text{ opacity: 0;}

#mainVisual2 .logo{ width:300px; top: 90px; left:350px; opacity: 0;}
    /* 
#mainVisual2 .logo{ width:300px; top: 50px; left:350px; opacity: 0;}
    */
    
    
#mainVisual2 .mem.m01{ width: 340px;}
#mainVisual2 .mem.m02{ width: 300px;}
#mainVisual2 .mem.m03{ width: 320px;}
    
#mainVisual2 .mem >.inner{ position: relative;}
#mainVisual2 .mem .face{ position: absolute;}
#mainVisual2 .mem .text{ position: absolute; width: 50%;  top: 100px; left: 20px;}

#mainVisual2 .mem.m01 .medal{ position: absolute; width: 90px; top: 230px; opacity: 0; right: 50px;}
#mainVisual2 .mem.m02 .medal{ position: absolute; width: 70px; top: 170px; opacity: 0; left: 20px;}
#mainVisual2 .mem.m03 .medal{ position: absolute; width: 70px; top: 190px; opacity: 0; right: 0;}

#mainVisual2 .m01 .text{ top: 323px; left: 80px;}
#mainVisual2 .m02 .text{ top: 270px; left: 20px;}
#mainVisual2 .m03 .text{ top: 290px; left: 200px;}

#mainVisual2 .m01{ top:220px; left:360px;}
#mainVisual2 .m02{ top:280px; left:160px;}
#mainVisual2 .m03{ top:260px; left:560px;}

#mainVisual2 .date{ width: 700px; left: 150px; top: 620px; opacity: 0;}
#mainVisual2 .sma{ width: 150px; left: 425px; top: 690px; opacity: 0;}

#mainVisual2 .white{ display: none;}

}


@media(max-width:640px){

#mainVisual2{ width: auto; height: 750px; overflow: hidden; background:url(/sng/2020/common/images/mv/background_sp.jpg) no-repeat center top; background-size: cover;}
#mainVisual2 >.inner{ width: auto; margin: 0 auto; position: relative;}

#moviecover{ height: 750px;; width: 100%; position: absolute; }
    
#mainVisual2 .logo,
#mainVisual2 .mem,
#mainVisual2 .mem .text,
#mainVisual2 .date,
#mainVisual2 .sma{ position: absolute;}

    #mainVisual2 .mem .face{ opacity: 0; top: -10px;}
    #mainVisual2 .mem .text{ opacity: 0;}
    

#mainVisual2 .white{ width: 100%; position: absolute;opacity: 0.7; top: -70px; z-index: 4}
    
#mainVisual2 .logo{ width:350px; top: 70px; left:135px; z-index: 20; opacity: 0;}
        /* 
#mainVisual2 .logo{ width:350px; top: 80px; left:135px; z-index: 20; opacity: 0;}
    */
#mainVisual2 .mem.m01{ width: 320px;}
#mainVisual2 .mem.m02{ width: 250px;}
#mainVisual2 .mem.m03{ width: 250px; top: 285px;}
    
#mainVisual2 .mem.m01 .medal{ position: absolute; width: 80px; top: 210px; left: 70px;opacity: 0;}
#mainVisual2 .mem.m02 .medal{ position: absolute; width: 70px; top: 150px; left: 20px;opacity: 0;}
#mainVisual2 .mem.m03 .medal{ position: absolute; width: 70px; top: 170px; right: 20px; opacity: 0;}
    
#mainVisual2 .mem >.inner{ position: relative;}
#mainVisual2 .mem .face{ position: absolute;}
#mainVisual2 .mem .text{ position: absolute; width: 70%;  top: 100px; left: 20px;}

#mainVisual2 .m01 .text{ top: 330px; left: 60px}
#mainVisual2 .m02 .text{ top: 255px; left: 40px; width: 80%;}
#mainVisual2 .m03 .text{ top: 270px;z-index: 10; left:auto; right: -90px; width: 80%}


#mainVisual2 .m01{ top:220px; left:180px;}
#mainVisual2 .m02{ top:300px; left:00px;}
#mainVisual2 .m03{ top:310px; left:390px;}

#mainVisual2 .date{ width: 100%; left: 0; top: 680px; opacity: 0; z-index: 4}
#mainVisual2 .sma{ width: 130px; left: 250px; top: 630px; opacity: 0; z-index: 4;}

    
}