/*@keyframes loading{
  0% {opacity:0;}
  100% {opacity:1;}
}*/
@keyframes fadeout{
  0% {opacity:1; display: block;}
  100% {opacity:0; display: none;}
}
@keyframes fadeIn{
  0%{opacity:0;}
  100%{opacity:1}
}
@keyframes ttlzoom{
  0%{transform: translateY(-30px) scale(0.9); opacity:0;}
  50%{transform: translateY(50px) scale(0.7); opacity:0.5;}
  100%{transform: translateY(0) scale(1); opacity: 1;}
}
@keyframes ttlzoom2{
  0%{transform: translateY(30px); opacity:0;}
  70%{transform: translateY(-10px); opacity:1;}
  100%{transform: translateY(0); opacity: 1;}
}
@keyframes poptest{
  0%{transform: translateY(0px) scaleY(0.5); opacity:0.3;}
  50%{transform: translateY(-30px) scaleY(1); opacity:0.7;}
  80%{transform: translateY(10px) scaleY(1); opacity:1;}
  100%{transform: translateY(0) scaleY(1); opacity:1;}
}
/*ゾロリ下からでる*/
@keyframes zororipop{
  0%{transform: translateY(100px); opacity:0;}
  100%{transform: translateY(0); opacity: 1;}
}
/*ゾロリたち飛ぶ*/
@keyframes zororiskymove{
  0%{transform: translate(50px,-100px); opacity:0;}
  100%{transform: translate(0,0); opacity:1;}
}
/*横のびタイトル*/
@keyframes taishittl{
  0%{transform: scaleX(0.1);}
  90%{transform: scaleX(1.1)}
  100%{transform: scaleX(1)}
}
/*大使の背景*/
@keyframes bgmove01{
  0%{background-position-y:0 }
  100%{background-position-y:100% }
}
/*フッターの画像出る*/
@keyframes footerviewimg{
  0%{transform: translateY(5px);}
  100%{transform: translateY(0);}
}




/**
*基本表示
**/
/*#loading.load{
  animation: loading 1s linear forwards;
}*/
.view #loading{
  animation: fadeout 0.2s linear forwards;
  display: none;
}
.view .outline{
  display: block;
  opacity:0;
  animation: fadeIn 1s linear forwards;
}


/*メインタイトル表示*/
.view #cont_contents #ttl h1{
  animation:ttlzoom 0.5s ease-out forwards;
}
.view #cont_contents #ttl .main_img{
  animation:ttlzoom2 0.7s ease-out forwards;
}
/*#ttl h2 img{
  transform: scaleX(0.1);
}
#ttl.view  h2 img{
  animation:taishittl 0.7s 0.3s ease-out forwards;
}*/


/*ゾロリ新聞タイトル表示*/
#newspaper.view h2 span.h201{
  display: none;
  animation:poptest 0.7s 0.3s ease-out forwards;
}
#newspaper.view h2 span.h202{
  display: none;
  animation:poptest 0.7s 0.5s ease-out forwards;
}
#newspaper.view h2 span.h203{
  display: none;
  animation:poptest 0.7s 0.7s ease-out forwards;
}
#newspaper .mainimg{
  opacity:0;
}
#newspaper.view .mainimg{
  animation:zororipop 0.3s 0.5s ease-out forwards;
}


/*イベントタイトル表示*/
#event.view h2 span.h201{
  display: none;
  animation:poptest 0.7s 0.3s ease-out forwards;
}
#event.view h2 span.h202{
  display: none;
  animation:poptest 0.7s 0.5s ease-out forwards;
}
#event.view h2 span.h203{
  display: none;
  animation:poptest 0.7s 0.7s ease-out forwards;
}
#event .mainimg{
  opacity:0;
}
#event.view .mainimg{
  animation:zororiskymove 0.5s 0.5s ease-out forwards;
}


/*大使*/
#taishi.view h2 img{
  animation:taishittl 0.7s 0.3s ease-out forwards;
}
#taishi .inner{
  animation:bgmove01 30s linear infinite;
}
#taishi .inner2{
  animation:bgmove01 30s linear infinite reverse;
}

/*コンテンツフッター*/
#contfooter .mainimg{
  /*transform: translateY(30px);*/
}
#contfooter.view .mainimg{
  animation:footerviewimg 0.5s linear alternate infinite;
}