@charset "utf-8";
/* CSS Document */

#opening_anime{
 position: fixed;
 
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 padding: 0;
 margin: 0;
 
 background-color: #ffffff;
 z-index: 100;
}

#opening_anime .op_inner{
 position: fixed;
 width: auto;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 transform-origin:50% 50%;
 padding: 0;
 margin: 0;
 /*margin-top: 300px;*/
 
 opacity: 0;
}



@media screen and (max-width: 640px) {
 #opening_anime .op_inner{
  width: 60vw;
 }
}

/*----------------*/
#opening_anime .txt_anime {
 position: relative;
 width: 460px;
 height: 0;
 padding-top: 12%;
 background-image: url("../img/op_text.svg");
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
 /*opacity: 0;*/
}

@media screen and (max-width: 640px) {
 #opening_anime .txt_anime {
  width: 100%;
  height:0;
  padding-top: 12%;
 }
}


/*-----------*/
#opening_anime #loop_anime{

 width: 128px;
 margin: 50px auto 0;
}

@media screen and (max-width: 640px) {
 #opening_anime #loop_anime{
  width: 40%;
  margin: 15% auto 0;
  
 }
}


#opening_anime #loop_anime.ready{
 opacity: 0;
}

#opening_anime #loop_anime.play{
 opacity: 1;
}

#opening_anime #loop_anime.play .op_logo {
 -webkit-animation: korokoro 2.5s linear 0s 1;
 animation: korokoro 2.5s linear 0s 1;
 /*animation-iteration-count:infinite;*/
}

#opening_anime #loop_anime img.op_logo{
 width: 100%;
 height: auto;
}



/*
@-webkit-keyframes korokoro {
 0%   { -webkit-transform: translate(0%, 0%); }
 5%   { -webkit-transform: translate(10%, 0%) rotate(10deg); }
 25%  { -webkit-transform: translate(20%, 0%) rotate(20deg); }
 30%  { -webkit-transform: translate(-10%, 0%) rotate(-10deg); }
 35%  { -webkit-transform: translate(-15%, 0%) rotate(-15deg); }
 45%  { -webkit-transform: translate(10%, 0%) rotate(10deg); }
 50%  { -webkit-transform: translate(15%, 0%) rotate(15deg); }
 60%  { -webkit-transform: translate(-5%, 0%) rotate(-5deg); }
 65%  { -webkit-transform: translate(-7%, 0%) rotate(-7deg); }
 75%  { -webkit-transform: translate(0%, 0%) rotate(0deg); }
 100% { -webkit-transform: translate(0%, 0%) rotate(0deg); }
}
*/
@keyframes korokoro {
 0%   { transform: translate(0%, 0%); }
 5%   { transform: translate(10%, 0%) rotate(10deg); }
 25%  { transform: translate(20%, 0%) rotate(20deg); }
 30%  { transform: translate(-10%, 0%) rotate(-10deg); }
 35%  { transform: translate(-15%, 0%) rotate(-15deg); }
 45%  { transform: translate(10%, 0%) rotate(10deg); }
 50%  { transform: translate(15%, 0%) rotate(15deg); }
 60%  { transform: translate(-5%, 0%) rotate(-5deg); }
 65%  { transform: translate(-7%, 0%) rotate(-7deg); }
 75%  { transform: translate(0%, 0%) rotate(0deg); }
 100% { transform: translate(0%, 0%) rotate(0deg); }
}