.loading {
   visibility: visible;
   z-index: 500;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #FDFBFB;
   opacity: 1;
}
body .loaded {
   visibility: hidden;
   opacity: 0;
   transition: 2s ease-in-out;
}
.loading-img {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
  animation: fadeIn 0.7s ;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.loading-img img { 
    width: 150px;
    height: auto;
}

.loading-img_illust { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  margin: auto;
  animation: fadeIn2 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.loading-img_illust img { 
  width: 200px;
  height: auto;
  animation: OpasityInfinity0 2s ease infinite;
}
/*薄くなったりする動き*/
@keyframes OpasityInfinity0  {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  100%{
    opacity: 0.7;
  }  
}