/* ---------------------------------------------------------------------------
   ロゴアニメーション
   ---------------------------------------------------------------------------*/

   
.anime_wrapper {
  position: absolute;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  width: 100%;
  height: 100vh;
}


 #anime-top-logo{
   position:fixed;
	width:100%;
	height:100vh;
	top:0;
   background-color: rgba(255,255,255,1.00);
   animation: logo 2s; 
	animation-delay: 4.0s;
   background-image: url("https://perquirere.jp/mew-mew/images/bg_001.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
}


#wrapper-anime{
}

.logo-inner{
 	position: absolute;
	width:40%;
   min-width: 600px;
  	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
   z-index: 1;
}

.logo-inner2{
 	position: absolute;
	width:25%;
  	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
}

.op_ch_wrap{
   position: relative;
}

.op_ch01{
   background-image:url("https://perquirere.jp/mew-mew/images/top/op/p_001_bg.png");
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: center;
   z-index: 3;
}

.op_ch02{
   background-image:url("https://perquirere.jp/mew-mew/images/top/op/p_002_bg.png");
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: center;
   z-index: 4;
}

.op_ch03{
   position: absolute;
   background-image:url("https://perquirere.jp/mew-mew/images/top/op/p_003_bg.png");
   background-repeat: no-repeat;
   background-size: 100% auto;
   background-position: center;
   width: 28%;
   bottom: 0;
   right: -15%;
   z-index: 5;
}



.op_ch01 img{
   opacity: 0;
}

.op_ch02 img{
   opacity: 0;
}

.op_ch03 img{
   opacity: 0;
}


.loading_txt{
 	position: absolute;
	width:180px;
   text-align: center;
  left: 0;
  right: 0;
  top: 60%;
  font-weight: 600;
  color: rgba(255,44,137,1.00);
  margin: auto;
  }

.en01{
   position: absolute;
	width: 100px;
 	top: 50%;
 	left: 48%;
	transform: scale(0);
   z-index: 13;
}

.en02{
	position: absolute;
	width: 100px;
 	top: 50%;
 	left: 48%;
	transform: scale(0);
   z-index: 14;
}

.en03{
	position: absolute;
	width: 100px;
 	top: 50%;
 	left: 48%;
	transform: scale(0);
   z-index: 15;
}

.en04{
	position: absolute;
	width: 100px;
 	top: 50%;
 	left: 48%;
	transform: scale(0);
   z-index: 16;
}

.en05{
	position: absolute;
	width: 100px;
 	top: 50%;
 	left: 48%;
	transform: scale(0);
   z-index: 17;
}

.en06{
	position: absolute;
	width: 100px;
 	top: 50%;
 	left: 48%;
	transform: scale(0);
   z-index: 18;
}




.opchg01{
   animation: en 2s; 
   animation-iteration-count: 1;
	animation-delay: .5s;
	transform: scale(0);
}

.opchg02{
   animation: en 2s; 
   animation-iteration-count: 1;
	animation-delay: .7s;
	transform: scale(0);
}

.opchg03{
   animation: en 2s; 
   animation-iteration-count: 1;
	animation-delay: .9s;
	transform: scale(0);
}

.opchg04{
   animation: en 2s; 
   animation-iteration-count: 1;
	animation-delay: 1.1s;
	transform: scale(0);
}

.opchg05{
   animation: en 2s; 
   animation-iteration-count: 1;
	animation-delay: 1.3s;
	transform: scale(0);
}

.opchg06{
   animation: en 2s; 
   animation-iteration-count: 1;
	animation-delay: 1.5s;
	transform: scale(0);
}

.logoani01{
  animation: optx1 linear infinite 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  }

.logoani02{
  animation: optx2 linear infinite 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
	animation-delay: 0.8s;
}
  
.logoani03{
  animation: optx3 linear infinite 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
	animation-delay: 2.0s;
}



@keyframes en {
	0% {transform: scale(0);}
	100% {transform: scale(80);}
}

@keyframes la {
	0% {transform:rotateY(0deg);}
	100% {transform:rotateY(1080deg);}
}

@keyframes la2 {
	0% {transform:rotateY(0deg);}
	100% {transform:rotateY(1080deg);}
}

@keyframes optx1 {
  0% {
     opacity: 0;
  }
  
  49% {
     opacity: 0;
  }  
  50% {
     opacity: 1;
  }

  78% {
    opacity: 0;
  }
  79%{
     opacity: 1;
  }
  
  82% {
    opacity: 0;
  }
  83%{
     opacity: 1;
  }  100% {
     opacity: 1;
  }

}


@keyframes optx2 {
  0% {
     opacity: 0;
  }
  
  39% {
     opacity: 0;
  }  
  40% {
     opacity: 1;
  }

  48% {
    opacity: 0;
  }
  49%{
     opacity: 1;
  }
  
  67% {
    opacity: 0;
  }
  68%{
     opacity: 1;
  }
  
  100% {
     opacity: 1;
  }

}

@keyframes optx3 {
  0% {
     opacity: 0;
  }
  
  29% {
     opacity: 0;
  }  
  30% {
     opacity: 0.6;
  }

  40% {
    opacity: 0;
  }
  41%{
     opacity: 0.8;
  }
  
  48% {
    opacity: 0;
  }
  49%{
     opacity: 1;
  }  
  57% {
    opacity: 0;
  }
  58%{
     opacity: 1;
  }
  
  100% {
     opacity: 1;
  }

}


.logo-inner-fix{
 	position: absolute;
	width:100%;
  	top: 0;
  	left: 0;
}

.logo-inner-fix img{
   width:100%;
	height:auto;
	filter: blur(0);
}




/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   スマホ版
   〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

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


.logo-inner{
 	position: absolute;
	width:75%;
   min-width: 75%;
  	top: 50%;
  	left: 50%;
  	transform: translateY(-50%) translateX(-50%);
   z-index: 1;
}

.en01{
 	left: 42%;
}

.en02{
 	left: 42%;
}

.en03{
 	left: 42%;
}

.en04{
 	left: 42%;
}

.en05{
 	left: 42%;
}

.en06{
 	left: 42%;
}



}