@keyframes Opening1{
      0%   {background-position: 100%   0%;  background-image: url("a-yatou.png"   );       background-size:30%;        background-color:black;  }
     10%   {background-position: -20% 100%;  background-image: url("a-yatou.png"   );       background-size:30%;        background-color:black;  }
     20%   {background-position: 120% 120%;  background-image: url("a-yatou.png"   );       background-size:30%;        background-color:black;  }
     50%   {background-position:  50% -20%;  background-image: url("a-yatou.png"   );       background-size:30%;        background-color:red;    }
     50.1% {background-position: 100%   0%;  background-image: url("a-kintyou.jpg" );       background-size:contain;    background-color:red;    }
     60%   {background-position:   0%   0%;  background-image: url("a-kintyou.jpg" );       background-size:contain;    background-color:red;    }
     60.1% {background-position:   0%   0%;  background-image: url("a-baku2.png"   );       background-size:contain;    background-color:red;    }
     70%   {background-position:   0%   0%;  background-image: url("a-baku2.png"   );       background-size:contain;    background-color:red;    }
     70.1% {background-position:  50%   0%;  background-image: url("a-yatou.png"   );       background-size:30%;        background-color:red;   transform: translate(  0px,   0px) rotateX(  0deg); }
    100%   {background-position:  50% 150%;  background-image: url("a-yatou.png"   );       background-size:30%;        background-color:black; transform: translate(300px, 600px) rotateX(360deg); }
}

@keyframes Opening2{
      0%  {background-position:  50%  50%;  background-image: url("a-c4.jpg"   );       background-size:auto;       background-color:red;                       transform:rotate(0deg);     }
    100%  {background-position:-150%  200%; background-image: url("a-c4.jpg"   );       background-size:contain;    background-color:transparent;   Opacity:1;                              }
}

.Opening{
    background-image: url("a-kokkai.png" );             /* アニメーション終了後に表示させる画像 */
    background-size:contain;
    width:  358px;
    height: 200px;
    background-repeat: no-repeat;                   /* 連続再生の例     animation: Opening1 3s 0s, Opening1 22s 3s;                                                                     */
                                                    /*                  animation: animation forwards 3s infinite ease 5s alternate;                                                    */
                                                    /*                  animation: 名前 終了時の状態 アニメーションの秒数 ループの回数 進行度 開始までの秒数 アニメーションの向き;      */
                                                    /*                  指定の順番は特にありませんが、durationとdelayについては先に記述した数値がdurationとなるので注意しましょう。     */
    animation-name:             Opening1;
    animation-duration:         10s;        /* 時間                 22                                                                                                                          */
    animation-timing-function:  ease-in-out;
                                            /* 緩急を指定                                                                                                                                       */
                                            /* linear 等速      ease 開始時と終了時の動きをなめらかにする       ease-in 開始時だけなめらかにする        ease-out 終了時だけなめらかにする       */
                                            /* ease-in-out easeよりもゆっくり変化させる                                                                                                         */
                                            /* step-start 最初から終了時の状態に変化する        step-end 指定した時間の最後で一気に終了時の状態に変化する                                       */
                                            /* steps(n , start)n(整数)の回数でコマ送りする。1段階目に変化した状態で開始する。                                                                   */
                                            /* steps(n , end)n(整数)の回数でコマ送りする。最初のインターバルを経過した直後に1段階目に変化する。endは初期値であり、省略可。                      */
                                            /* cubic-bezier緩急をベジェ曲線により、cubic-bezier(x1,y1,x2,y2)の形で任意に指定できる。                                                            */
    animation-delay:            0s;         /* 起動までの遅延時間                                                                                                                               */
    animation-iteration-count:  var(--FlagColonyDrop);  /* 再生回数 「infinite」だと無限                                                                                                                    */  
    animation-fill-mode:        none;       /* アニメーション終了時の状態を指定     none（初期値）指定なし      forwards 終了時の状態を維持     backwards 開始時の状態に戻る    both 開始時に"forwards"、終了時に"backwards"を適用  */
    !important;                             /* 最も優先度が高い。 スタイル指定の最後に!important を付けると、他のどのスタイルよりも優先される。筈だが、犬帯・点滅文字より下のまま変わらなかった */
}