/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/
@keyframes textWave {
 0% {
 top: 0;
 /*text-shadow: 0em .75em -0.2em rgba(150,180,220,0.1);*/
 text-shadow: 0em .4em .05em rgba(150,180,220,0.05);
 }
 100% {
 top: -0.25em;
 /*text-shadow: 0em .5em .1em rgba(150,180,220,0.4);*/
 text-shadow: 0em -.4em .05em rgba(150,180,220,0.4);
 }
}
@keyframes sprite-rotate-portrait {
 0% {
 transform:translateX(0)
 }
 100% {
 transform:translateX(-100%)
 }
}
@keyframes appealRising {
0% {
 transform: translateY(20px);
 opacity: 0;
 }
100% {
 transform: translateY(0px);
 opacity: 1;
 }
}
@keyframes logoFalling {
0% {
 transform: translateY(-20px);
 opacity: 0;
 }
100% {
 transform: translateY(0px);
 opacity: 1;
 }
}
@keyframes headerLine {
0% {
 width: 0;
 height: 0;
 opacity: 0;
 }
100% {
 width: 47%;
 height: 4px;
 opacity: 0.65;
 }
}
@keyframes logoLine {
0% {
 width: 0;
 height: 0;
 opacity: 0;
 }
100% {
 width: 50%;
 height: 80px;
 opacity: 0.65;
 }
}
@keyframes slideShow {
 0% {opacity: 0}
 5% {opacity: 1}
 15% {opacity: 1}
 30% {opacity: 0}
}
@keyframes slideShow-2 {
 0% {opacity: 0}
 5% {opacity: 1}
 30% {opacity: 1}
 33% {opacity: 0}
}
@keyframes vibration {
 0% {transform: translate(0px, 0px) rotateZ(0deg)}
 25% {transform: translate(2px, 2px) rotateZ(1deg)}
 50% {transform: translate(0px, 2px) rotateZ(0deg)}
 75% {transform: translate(2px, 0px) rotateZ(-1deg)}
 100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
@keyframes NaviItem {
0% {
 background: transparent;
 }
100% {
 /*background: #1e73be;*/
 background: #fff;
 }
}
@keyframes NaviText {
0% {
 background: transparent;
 }
100% {
 background: #fff;
 }
}
@keyframes NaviLine {
0% {
 transform: scaleX(0);
 opacity: 0;
 }
100% {
 transform: scaleX(1);
 opacity: 1.0;
 }
}
@keyframes youtube-banner-rotate {
 0% {
 transform: rotate(0);
 }
 20% {
 transform: rotate(90deg);
 }
 25% {
 transform: rotate(90deg);
 }
 45% {
 transform: rotate(180deg);
 }
 50% {
 transform: rotate(180deg);
 }
 70% {
 transform: rotate(270deg);
 }
 75% {
 transform: rotate(270deg);
 }
 95% {
 transform: rotate(360deg);
 }
 100% {
 transform: rotate(360deg);
 }
}
@keyframes youtube-banner-sprite {
 0% {
 transform:translateX(0)
 }
 100% {
 transform:translateX(-100%)
 }
}
@keyframes logoTransformV {
0% {
 transform: scale(0);
 opacity: 0;
 }
100% {
 transform: scale(1.0);
 opacity: 1;
 }
}
@keyframes logoTransformSain {
0% {
 transform: scale(0);
 opacity: 0;
 }
100% {
 transform: scale(1.0);
 opacity: 1;
 }
}
@keyframes logoTransformText {
0% {
 transform: translateY(-20px);
 opacity: 0;
 }
100% {
 transform: translateY(0px);
 opacity: 1;
 }
}
/* 泡アニメーション */
@keyframes stretch {
  0% {
    transform: scaleX(1) scaleY(1); }
  33% {
    transform: scaleX(0.9) scaleY(1); }
  66% {
    transform: scaleX(1) scaleY(0.9); }
  100% {
    transform: scaleX(1) scaleY(1); } }
@keyframes shake {
  0% {
    transform: translateX(10px); }
  50% {
    transform: translateX(-10px); }
  100% {
    transform: translateX(10px); } }
@keyframes move {
  0% {
    transform: translateY(0px); }
  100% {
    transform: translateY(-1000px);
    opacity: 0; } }
@keyframes NewIcon {
0% {
 opacity: 0;
 }
100% {
 opacity: 1.0;
 }
}