#big-small-test {
    font-size: 14px;
}

table.controlpanel{
        height:             var(--ControlPanelheight);
        background-color:   #302e2b;
        background-image:   url("a-zeon-mark-2.png");
        background-size:    contain;                /* 背景画像の大きさ                                                                     */
                                                    /*  auto    元の大きさのまま                                                            */
                                                    /*  contain 元画像の縦横比は保持して、要素に元画像が全て収まるように調整してくれます。  */
                                                    /*  cover   元画像の縦横比は保持して、要素をちょうどよく覆うサイズにしてくれます。      */
        background-repeat:      no-repeat;          /* 背景画像は繰り返さない                   */
        background-position:    center top;         /* 背景画像は中央の上                       */
        /*
            border:             var(--ControlPanelborder) solid white;
        */
}

details.zaku summary {                  /* close時 */
    background-image:       url("a-zeon-mark-3.png");
    background-size:        contain;                /* 背景画像の大きさ                         */
    background-repeat:      no-repeat;              /* 背景画像は繰り返さない                   */
    background-position:    right top;              /* 背景画像は中央の上                       */
    color:      yellow;
    padding: 2px 6px;
    box-shadow: 5px 5px 6px red;
    border:     none;
    text-align: center;
    list-style: none;               /* 三角形を表示しない               */
    cursor:     pointer;            /* カーソルを指ポインターにする     */
    transition: 0.9s;               /* 変化時間                         */
    animation: ControlAAA 3.0s;             /* animation CALL   */
    animation-iteration-count: infinite;    /*                  */
}
        @keyframes ControlAAA {
            0% { color:yellow; background-color: black; }
          100% { color:white;  background-color: blue;  }
        }

details.zaku summary:hover {                        /* ホバー時 */
  cursor:   pointer;
  color:    red;
  background-color: blue;
  box-shadow: 5px 5px 6px yellow;
  transition: 0.9s;
}

details.zaku[open] summary {                /* open時 */
  /*
      --ControlPanelborder: 1px;        /* テーブル枠線を表示させる　　枠線を広げた窓全体に適用したいが、上部分にしか適用されない
        border:             var(--ControlPanelborder) solid white;
  */
    color:          white;
    background-color: transparent;
    box-shadow: 5px 5px 6px white;
    transition: 0.9s;
    animation: ControlBBB 0.3s;         /* animation CALL   */
    animation-iteration-count: 1;
}
        @keyframes ControlBBB {
             0%  { color:black; background-color: blue;         }
             20% { color:white; background-color: black;        }
             40% { color:black; background-color: blue;         }
             60% { color:white; background-color: black;        }
             80% { color:black; background-color: blue;         }
            100% { color:white; background-color: black;        }
        }

details.zaku[open] .details-content { animation: fadeIn 2.0s ease; }        /* open時のアニメ処理。一発しか効かない */
@keyframes fadeIn {
    0% {    opacity: 0;                     /* 透明 */
            transform: translateY(-10px);   /* 上から表示 */
        }
  100% {    opacity: 1;
            transform: none;
        }
}