body {
    height: 100vh;
    overflow: hidden;
}
body.set_fix2 {
    height:auto;
    overflow: inherit;
}

.loading_wrapp {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 1000;
    transition: 0.5s ease;
}
.loading_wrapp.set3 {
    transition: 0.9s ease;
}

.loading_wrapp .logo {
    position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
    width: 23%;
    max-width: 406px;
    overflow: hidden;
}
.loading_wrapp .logo img {
    transform: translateY(100%);
    transition: 0.5s ease;
}
.loading_wrapp.set-1 .logo img {
    transform: translateY(0%);
}

.loading_wrapp.set-2 .logo {
    animation: logo-bounce 500ms alternate infinite ease;
    animation-delay: 900ms;
}

.loading_wrapp .logo_kage {
    width: 21%;
    max-width: 370px;
    height: 13px;
    position: absolute;
    top: 52%;
   left: 50%;
   transform: translate(-50%,-52%);
    border-radius: 40%;
    filter: blur(5px);
    background: #dddddd;
    opacity: 0;
    transition: 0.5s ease;
}

.loading_wrapp.set-1 .logo_kage {
 opacity: 0.4;
}

.loading_wrapp.set-2 .logo_kage {
    animation: logo-kage 500ms alternate infinite ease;
    animation-delay: 900ms;
}

@keyframes logo-bounce {
  0% {
   top: 50%;
    transform:translate(-50%, -50%);
  }
  50% {
    transform:translate(-50%, -50%);
  }
  100% {
    top: 48.5%;
  }
}

@keyframes logo-kage {
  0% {
    transform: translate(-50%,-52%)scaleX(0.5);
  }
  50% {
    transform:translate(-50%,-52%) scaleX(1);
  }
  100% {
  right: 31.5%;
  }
}



.loading_wrapp .cara_1 {
    width: 6%;
    max-width: 106px;
    position: absolute;
    z-index: 2;
    top: 48%;
    left: 33%;
    transform: translate(-33%, -48%);
    overflow: hidden;
}

.loading_wrapp .cara_2 {
    width: 6%;
    max-width: 106px;
    position: absolute;
     z-index: 2;
    top: 48%;
    right: 30%;
    transform: translate(-30%, -48%);
    overflow: hidden;
}

.loading_wrapp .cara_1 img, .loading_wrapp .cara_2 img {
    transform: translateY(102%);
    transition: 0.5s ease;
}
.loading_wrapp.set-1 .cara_1 img, .loading_wrapp.set-1 .cara_2 img {
    transform: translateY(0%);
}

.loading_wrapp.set-2 .cara_1, .loading_wrapp.set-2 .cara_2 {
    animation: bounce 500ms alternate infinite ease;
}



@keyframes bounce {
  0% {
top: 48%;
  }
  35% {
    height: 8%;
    transform:translate(-34%, -48%) scaleX(1);
  }
  100% {
    
          top: 30%;
   height: 12%;
    border-radius: 60px 60px 20px 20px;
    transform:translate(-34%, -48%) scaleX(1.2);
  }
}


.loading_wrapp .cara_1_kage {
    width: 4%;
    max-width: 71px;
    height: 13px;
    position: absolute;
    top: 53%;
    left: 33.5%;
    transform: translate(-33.5%, -52%);
    border-radius: 40%;
    filter: blur(4px);
    background: #dddddd;
    opacity:0;
    transition: 0.5s ease;
}
.loading_wrapp .cara_2_kage {
    width: 4%;
    max-width: 71px;
    height: 13px;
    position: absolute;
    top: 53%;
    right: 31.5%;
    transform: translate(-31.5%, -52%);
    border-radius: 40%;
    filter: blur(4px);
    opacity: 0;
    background: #dddddd;
    transition: 0.5s ease;
}

.loading_wrapp.set-1 .cara_1_kage, .loading_wrapp.set-1 .cara_2_kage {
   opacity: 0.8;
}


.loading_wrapp.set-2 .cara_1_kage, .loading_wrapp.set-2 .cara_2_kage {
    animation: kage 500ms alternate infinite ease;
}

@keyframes kage {
  0% {
      right: 31.5%;
  }
  35% {
    transform:translate(-31.5%, -53%) scaleX(0.6);
  }
  100% {
  transform: translate(-31.5%, -53%)scaleX(1);
      opacity: 0.4;
  }
}


.loading_wrapp.set-3 .logo img {
opacity: 0;
}
.loading_wrapp.set-3 .logo_kage {
opacity: 0;
}
.loading_wrapp.set-3 .cara_1 img, .loading_wrapp.set-3 .cara_2 img {
 opacity: 0;
}
.loading_wrapp.set-3 .cara_1_kage, .loading_wrapp.set-3 .cara_2_kage {
animation-play-state: paused; 
 opacity: 0;
}

.loading_wrapp.set_fix {
opacity: 0;
}
.loading_wrapp.set_fix.set_fix2 {
display: none;
}


@media screen and (max-width: 767px) {
  
.loading_wrapp .logo {
    width: 60vw;
    max-width: inherit;
} 
.loading_wrapp .logo_kage {
    width: 55vw;
    max-width: inherit;
}  
.loading_wrapp .cara_1 {
    width: 12vw;
    max-width: inherit;
    top: 48%;
    left: 9vw;
} 
.loading_wrapp .cara_2 {
    width: 12vw;
    max-width: inherit;
    top: 48%;
    right: 5vw;
}  
    
    
@keyframes bounce {
  0% {
top: 48%;
  }
  35% {
    height: 8%;
    transform:translate(-34%, -48%) scaleX(1);
  }
  100% {
    
          top: 40%;
   height: 12%;
    border-radius: 60px 60px 20px 20px;
    transform:translate(-34%, -48%) scaleX(1.2);
  }
}  
    
    
    
.loading_wrapp .cara_1_kage {
        width: 10vw;
        max-width: inherit;
        left: 9vw;
        top: 52%;
        height: 8px;
} 
.loading_wrapp .cara_2_kage {
    width: 10vw;
    max-width: inherit;
    height: 8px;
    top: 52%;
    right: 8vw;
}
.loading_wrapp.set-2 .cara_2_kage {
    animation: kage2 500ms alternate infinite ease;
}

@keyframes kage2 {
  0% {
      right: 8vw;
  }
  35% {
    transform:translate(-0%, -52%) scaleX(0.6);
  }
  100% {
  transform: translate(-0%, -52%)scaleX(1);
      opacity: 0.4;
  }
}
    
    
}