#op_anime_cover{
    position: absolute;
    top:30;
    left:0;
    width:100%;
    height:100%;
    margin:0 auto;
    overflow: hidden;
    background:url("../images/bg_content.jpg");
    background-size: cover;
    z-index:1000;
    animation:delete_cover 3s forwards;
    animation-delay: 18s;
}

#sp_anime_cover{
    display: none;
}

@keyframes delete_cover {
  0% {
    height:100%:
    opacity:1;
  }

  80% {
    height:100%;
    opacity:0;
  }
    
  100%{
    height:0%;
    opacity:0;
    }
}

#op_anime{
    position: relative;
    width:1000px;
    height:900px;
    margin:0 auto;
    overflow: hidden;
}



@media screen and (max-width: 414px)
{
    #op_anime_cover{display: none}
    
    #sp_anime_cover{
        display: block;
        position: absolute;
        width:100%;
        height:100%;
        margin:0 auto;
        overflow: hidden;
        background:url("../images/bg_content.jpg"); 
        background-size: cover;
        z-index:1000;
        animation:delete_cover 3s forwards;
        animation-delay: 18s;
    }
}


/*猫*/
.cat{
position: absolute;
width:330px;
height:150px;
top:300px;
left:450px;
overflow:hidden;
background:url(../images/anime_cat.png) no-repeat;
    
animation:para 1s steps(2) 6;

}

@keyframes para {
  to {
    background-position: -660px 0;
  }
}



.slide {
    position: absolute;
    top:0px;
    width:330px;
    height:150px;
    animation: slide_cat 6s ,
        fadeOut 2s 6s forwards;
}

@keyframes slide_cat {
  from {
    -webkit-transform: translate(400px, 300px);
    transform: translate(400px, 0px);
  }

  to {
    -webkit-transform: translate(0px, 300px);
    transform: translate(0px, 0px);
  }
}

@keyframes fadeOut {
    from {
        opacity:1;
    }
    to {
        opacity:0;
    }
}


/*犬*/
.dog{
position: absolute;
width:330px;
height:150px;
top:0px;
left:225px;
overflow:hidden;
background:url(../images/anime_dog.png) no-repeat;
    
animation:para 1s steps(2) 6;

}

@keyframes para {
  to {
    background-position: -640px 0;
  }
}



.slide2 {
    position: absolute;
    top:300px;
    width:330px;
    height:150px;
    animation: slide_dog 6s ,
        fadeOut 2s 6s forwards;
}

@keyframes slide_dog {
  from {
    -webkit-transform: translate(-330px, 0px);
    transform: translate(-330px, 0px);
  }

  to {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}







.stop_fade{
    position: absolute;
    top:307px;
    left:200px;
    animation: fadeIn 2s backwards, fadeOut2  6s forwards;
    animation-delay: 6s;
}

.stop_fade_sp{
    position: absolute;
    top:307px;
    left:50px;
    animation: fadeIn 3s, fadeOut2 3s 4s forwards;
}

.stop_fade_syamon{
    position: absolute;
    top:45px;
    left:405px;
    animation: fadeIn2 2s  backwards,
        syamon_up 5s, fadeOut2  8s forwards;
    animation-delay: 6s;
}

.stop_fade_syamon_sp{
    position: absolute;
    top:45px;
    left:155px;
    animation: fadeIn2 2s backwards,
        syamon_up 5s, fadeOut2 10s forwards;
    animation-delay: 1s;
}

.logo_fadeIn{
    position: absolute;
    top:40px;
    left:270px;
    animation:fadeIn 3s backwards;
    animation-delay: 13s;
}



.logo_fadeIn_sp{
    position: relative;
    top:inherit;
    left:inherit;
    width:100vw;
    text-align: center;
    animation:fadeIn 4s backwards;
    animation-delay:9s;
}


@keyframes fadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

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

@keyframes fadeOut2 {
    0% {
        opacity:1;
    }
    80% {
        opacity:1;
    }
    
    100% {
        opacity:0;
    }
}


@keyframes syamon_up {
  0% {
    -webkit-transform: translate(0px, 270px);
    transform: translate(0px, 270px);
  }
    
  50% {
    -webkit-transform: translate(0px, 270px);
    transform: translate(0px, 270px);
  }

  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }
}



.minna_fadein{
    position: absolute;
    top:150px;
    left:50px;
    animation: fadeIn 2s  backwards;
    animation-delay: 12s;
}

.minna_fadein_sp{
    position: absolute;
    top:75px;
    left:10px;
    animation: fadeIn 4s  backwards;
    animation-delay: 7s;
}

/* ページが読み込まれるまでアニメーションを止める */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}