@charset "UTF-8";
/* ==================== アニメーション ==================== */
body{
  opacity: 0;
  -webkit-animation-name :fadein;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.1s;
  animation-name :fadein;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
}
.grade01Fade,
.grade02Fade,
.grade03Fade{
  opacity: 0;
  -webkit-animation-name :fadein;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0.4s;
  animation-name :fadein;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-delay: 0.4s;
}
.grade02Fade{
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
.grade03Fade{
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
.sdChara{
  -webkit-animation: sd_animation 2s infinite;
  animation: sd_animation 2s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.sdChara01{
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 1s;
  animation-delay: 0.2s;
  animation-duration: 1s;
}
.sdChara02{
  -webkit-animation-delay: 0.1s;
  -webkit-animation-duration: 1.7s;
  animation-delay: 0.1s;
  animation-duration: 1.7s;
}
.sdChara03{
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 1.2s;
  animation-delay: 0.2s;
  animation-duration: 1.2s;
}
.sdChara04{
  -webkit-animation-delay: 0.4s;
  -webkit-animation-duration: 1.4s;
  animation-delay: 0.4s;
  animation-duration: 1.4s;
}
.sdChara05{
  -webkit-animation-delay: 0.2s;
  -webkit-animation-duration: 1.3s;
  animation-delay: 0.2s;
  animation-duration: 1.3s;
}
.sdChara06{
  -webkit-animation-delay: 0.3s;
  -webkit-animation-duration: 1.1s;
  animation-delay: 0.3s;
  animation-duration: 1.1s;
}
.sdChara07{
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}
.sdChara08{
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
}
.sdChara09{
  -webkit-animation-delay: 0;
  -webkit-animation-duration: 1.6s;
  animation-delay: 0;
  animation-duration: 1.6s;
}
#release,
.left,
.right,
.itemList,
.chara,
.pickup10,
.loCol,
.campaignCol01,
.campaignCol02{
  opacity: 0;
}
.fadeinUnder{
  -webkit-animation-name: fadein_under;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-delay:0;
  -webkit-animation-iteration-count:1;
  -webkit-animation-direction:normal;
  -webkit-animation-fill-mode: forwards;
  animation-name: fadein_under;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay:0;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}
.fadeinLeft{
  -webkit-animation-name: fadein_left;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-delay:0;
  -webkit-animation-iteration-count:1;
  -webkit-animation-direction:normal;
  -webkit-animation-fill-mode: forwards;
  animation-name: fadein_left;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay:0;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}
.fadeinRight{
  -webkit-animation-name: fadein_right;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-delay:0;
  -webkit-animation-iteration-count:1;
  -webkit-animation-direction:normal;
  -webkit-animation-fill-mode: forwards;
  animation-name: fadein_right;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-delay:0;
  animation-iteration-count:1;
  animation-direction:normal;
  animation-fill-mode: forwards;
}
.mvCircle div{
  -webkit-animation-name: bounce;
  -webkit-animation-duration: 8s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-delay:0;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:normal;
  -webkit-animation-fill-mode: forwards;
  animation-name: bounce;
  animation-duration: 8s;
  animation-timing-function: ease-out;
  animation-delay:0;
  animation-iteration-count:infinite;
  animation-direction:normal;
  animation-fill-mode: forwards;
}
@media screen and (min-width: 600px) and (max-width: 1480px){
  .btnShopFadeout{
    -webkit-animation-name: fadeout_shop;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay:0;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode: forwards;
    animation-name: fadeout_shop;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode: forwards;
    pointer-events: none;
  }
  .btnShopFadein{
    -webkit-animation-name: fadein_shop;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay:0;
    -webkit-animation-iteration-count:1;
    -webkit-animation-direction:normal;
    -webkit-animation-fill-mode: forwards;
    animation-name: fadein_shop;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay:0;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-fill-mode: forwards;
  }
}
@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadein_shop {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadeout_shop {
  0% {opacity: 1}
  100% {opacity: 0}
}
@keyframes fadein_under {
  0% {opacity: 0; transform: translate3d(0,30px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
@keyframes fadein_left {
  0% {opacity: 0; transform: translate3d(-30px,0,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
@keyframes fadein_right {
  0% {opacity: 0; transform: translate3d(30px,0,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}
@keyframes sd_animation {
  0% {transform: translate(0px, 0px) rotateZ(4deg)}
  100% {transform: translate(1px, 0px) rotateZ(0deg)}
}
@keyframes bounce{
  0%, 100% { -webkit-transform: scale(1.05) }
  50% { -webkit-transform: scale(1.0) }
}