/*
@keyframes は CSS のアットルールで、アニメーションの流れに沿ったキーフレーム（または中間地点）のスタイルを定義することによって、一連の CSS アニメーションの中間ステップを制御します。
これにより、アニメーションの中間ステップをトランジションよりも詳細に制御できます。

アットルールは CSS の文のうち、CSS の動作を既定するものです。
アットルールはアットマーク、'@' (U+0040 COMMERCIAL AT) で始まり、それに続く識別子から、次のセミコロン、 ';' (U+003B SEMICOLON) もしくは次の CSS ブロックのどちらかが現れるまでの部分からなります。

重複の解決
複数のキーフレームに同じ名前が付けられている場合、最後に宣言されたものが使用されます。
@keyframes ルールがカスケード的に継承されることはないため、アニメーションが複数のルールセットによるキーフレームをもとにして行われることはありません。
*/

@keyframes Opening1{
      0%   {background-position:  50%   50%;  background-image: url("a-subtitle.png");    background-size:auto;       background-color:red;                       transform:rotate(0deg);     }
     13%   {background-position:  50%   50%;  background-image: url("a-subtitle.png");    background-size:auto;       background-color:black;                     transform:rotate(0deg);     }
     15%   {background-position: 110%  100%;  background-image: url("a-subtitle.png");    background-size:auto;       background-color:black;                     transform:rotate(-160deg);  }
     15.01%{background-position: 110%  100%;  background-image: url("a-inu-l.png");       background-size:10%;        background-color:black;                                                 }
     38%   {background-position:  20%    0%;  background-image: url("a-inu-l.png");       background-size:10%;        background-color:red;                                                   }
     38.01%{background-position:   0%    0%;  background-image: url("a-gun.jpg"  );       background-size:contain;    background-color:red;                                                   }
     45%   {background-position:   0%    0%;  background-image: url("a-gun.jpg"  );       background-size:contain;    background-color:red;                                                   }
     45.01%{background-position:   0%    0%;  background-image: url("a-baku.png" );       background-size:contain;    background-color:red;                                                   }
     52%   {background-position:   0%    0%;  background-image: url("a-baku.png" );       background-size:contain;    background-color:red;           Opacity:1;  transform:rotate(0deg);     }
     57%   {background-position: 250%    0%;  background-image: url("a-baku.png" );       background-size:contain;    background-color:black;         Opacity:0;                              }
     57.01%{background-position: 100%    0%;  background-image: url("a-c2.jpg"   );       background-size:contain;    background-color:transparent;   Opacity:1;                              }
     67%   {background-position: 100%    0%;  background-image: url("a-c2.jpg"   );       background-size:contain;    background-color:transparent;   Opacity:1;                              }
     67.01%{background-position: 200%    0%;  background-image: url("a-c3.jpg"   );       background-size:contain;    background-color:red;           Opacity:1;                              }
     77%   {background-position:-100%    0%;  background-image: url("a-c3.jpg"   );       background-size:contain;    background-color:red;           Opacity:1;                              }
     77.01%{background-position: 250% -100%;  background-image: url("a-c4.jpg"   );       background-size:contain;    background-color:transparent;   Opacity:1;                              }
     87%   {background-position:-150%  200%;  background-image: url("a-c4.jpg"   );       background-size:contain;    background-color:transparent;   Opacity:1;                              }
     87.01%{background-position:   0%    0%;  background-image: url("a-c5.jpg"   );       background-size:contain;    background-color:transparent;   Opacity:1;                              }
    100%   {background-position:   0%    0%;  background-image: url("a-c5.jpg"   );       background-size:contain;    background-color:transparent;   Opacity:1;                              }
}

@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-c5.jpg" );             /* アニメーション終了後に表示させる画像 */
    background-size:contain;
    width:  var(--anime-haba);                      /* 画面幅によってアニメ幅を切替える     */
    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:         22s;        /* 時間                 22                                                                                                                          */
    animation-timing-function: linear;      /* 緩急を指定                                                                                                                                       */
                                            /* 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 を付けると、他のどのスタイルよりも優先される。筈だが、犬帯・点滅文字より下のまま変わらなかった */
}