@keyframes Opening-Engin{
      0%   {background-position:   0px  100%;  background-image:url("g-hangyojin.png");     background-size: 10%;       background-color:red;         }
      8%   {background-position: 250px  100%;  background-image:url("g-hangyojin.png");     background-size: 10%;       background-color:black;       }
     16%   {background-position:   0px  100%;  background-image:url("g-hangyojin.png");     background-size: 10%;       background-color:red;         }
     24%   {background-position: 250px  100%;  background-image:url("g-hangyojin.png");     background-size: 10%;       background-color:black;       }
     30%   {background-position:   0px    0%;  background-image:url("g-hangyojin.png");     background-size: 60%;       background-color:transparent; }
     40%   {background-position:   0px    0%;  background-image:url("g-hangyojin.png");     background-size: 60%;       background-color:transparent; }
     40.1% {background-position:   0px    0%;  background-image:url("g-hangyojin.gif");     background-size:contain;    background-color:transparent; }
    100%   {background-position:   0px    0%;  background-image:url("g-hangyojin.gif");     background-size:contain;    background-color:transparent; }
}

.Opening{
    background-image: url("g-hangyojin.gif");  /* アニメーション終了後に表示させる画像 */
    animation-name:            Opening-Engin;
    animation-duration:        12s;         /* 時間
    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(--FlagHANGYOJIN);
    animation-fill-mode:        none;       /* アニメーション終了時の状態を指定     none（初期値）指定なし      forwards 終了時の状態を維持     backwards 開始時の状態に戻る    both 開始時に"forwards"、終了時に"backwards"を適用  */
    !important;                             /* 最も優先度が高い。 スタイル指定の最後に!important を付けると、他のどのスタイルよりも優先される。筈だが、犬帯・点滅文字より下のまま変わらなかった */
}