@charset "utf-8";



.svgLogo{

    width: 900px;
    height: 230px;
    margin: 0 auto 200px;
    position: relative;
    top: 200px;

    background: linear-gradient(90deg, #80003f,  #fff, #c00463);
    background-size: 600% 300%;

    animation: AnimationName 20s ease infinite;
} 


@keyframes AnimationName {
    0%{background-position:100% 50%}
    50%{background-position:0% 50%}
    100%{background-position:100% 50%}
}


@media(max-width:750px){

}






.maskImg {
    mask-image: url("/common/images/beyond.svg");
    mask-repeat: no-repeat;
    mask-position: 0 0;
    mask-size: 100%;
  }

  
svg{ 
    width: auto;
    height: auto;    
    }


    @media(max-width:750px){

        .svgLogo{

            width: 680px;
            height: 150px;
            margin: 0 auto 100px;
            position: relative;
            top: 150px;
        
            background: linear-gradient(90deg, #80003f,  #fff, #c00463);
            background-size: 600% 300%;
        
            animation: AnimationName 20s ease infinite;
        } 
        
    }



#mainVisual{ height: 800px; overflow: hidden; position:relative; background:url(/common/images/top/mvBG.jpg) no-repeat center bottom; background-size: cover;}
#mainVisual ul{ position: relative; width:100%; height: 800px;}
#mainVisual ul li{ position: absolute; width: 100%; height: 100%;top: 0; left:0;}
#mainVisual ul li img{ width: 100%; position: relative; top: 0; left:0;}
#mainVisual >.inner{ position:absolute; z-index: 2; height: 300px; width: 900px; margin: 0 auto;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    margin: auto;
}

.svCatch{ display: inline-block; position: absolute; right: 0; top: 197px; font-size: 26px;font-weight: 900;}

#mainVisual >.inner .svgLogo{ position:absolute;  top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;}


    @media(max-width:750px){
        #mainVisual{ height: 650px; background:url(/common/images/top/mvBG_sp.jpg) no-repeat center bottom; background-size: cover;}
        #mainVisual ul { position:absolute; width: 100%; height:500px;top: 50px; left: 0; }
        #mainVisual >.inner{  width: auto; height: 650px;}
        .svCatch{top: 387px; font-size: 22px;}
    }

    .ar01 img{transform-origin: 80% 0;animation: yurayura3 8s ease-in-out infinite;}
    .ar02 img{transform-origin: 30% 30%;animation: yurayura2 7.7s ease-in-out infinite;}
    .ar03 img{transform-origin: 50% 50%;animation: yurayura 7.6s ease-in-out infinite;}
    .ar04 img{transform-origin: 50% 20%;animation: yurayura2 7.5s ease-in-out infinite;}
    .ar05 img{transform-origin: 50% 10%;animation: yurayura 7.23s ease-in-out infinite;filter: blur(1px);}
    .ar06 img{transform-origin: 50% 60%;animation: yurayura2 7s ease-in-out infinite;}

    #mainVisual ul li.ar01{animation: zure 8s ease-in-out infinite;}
    #mainVisual ul li.ar02{animation: zure 9s ease-in-out infinite;}
    #mainVisual ul li.ar03{animation: zure 10s ease-in-out infinite;}
    
    #mainVisual ul li.ar04{animation: zure2 8s ease-in-out infinite;}
    #mainVisual ul li.ar05{animation: zure3 9s ease-in-out infinite;}
    #mainVisual ul li.ar06{animation: zure2 8s ease-in-out infinite;}

@keyframes zure {
        0% , 100%{transform: translate(10px, 10px);}
        50%{transform: translate(0, 0);}
}
@keyframes zure2 {
      0% , 100%{transform: translate(0, 0);}
      50%{transform: translate(30px, 5px);}
}
@keyframes zure3 {
      0% , 100%{transform: translate(0, 0);}
      50%{transform: translate(80px, 5px);}
}




    @keyframes yurayura {
        0% , 100%{transform: rotate3d(0, 1, 0, 0deg); height: 90%;}
        50%{transform: rotate3d(0, 1, 0, 20deg); height: 100%;}
    }
    @keyframes yurayura2 {
          0% , 100%{transform: rotate3d(0, 1, 0, 20deg); height: 100%;}
          50%{transform: rotate3d(0, 1, 0, 0deg); height: 90%;}
    }
    @keyframes yurayura3 {
            0% , 100%{transform: rotate3d(1, 0, 0, 20deg); height: 100%;}
            50%{transform: rotate3d(0, 1, 0, 0deg); height: 90%;}
    }

    






    @media(max-width:750px){

    }