.card-body {
      background-image: url("top.png");
      background-size: 23rem;
    }
    .card-header {
      background-color: #ffffff; 
      border-color: #0f0f0f;
    }
    .card-footer {
      background-color: #ffffff; 
      border-color: #0f0f0f;
    }
    .btnx--outline-green{
    color: var(--bs-green); background:var(--bs-white); border: 1px solid #ffffff; 
    }
    /* ****************************************primary  #cfddbd;*/
    .btn-primary,
    .btn-primary.disabled, 
    .btn-primary:disabled {
      color: #000000;
      background-color: #dbf709;
      border-color: #dbf709;
    }
    /* focusされた時の枠線の色 */
    .btn-primary:focus, 
    .btn-primary.focus,
    .btn-primary:not(:disabled):not(.disabled):active:focus, 
    .btn-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-primary.dropdown-toggle:focus {  
        box-shadow: 0 0 0 0.2rem rgba(35, 51, 147, 0.5);
    }
    /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）073d3d*/
    .btn-primary:hover {
      color: #ffffff;
      background-color: #007848;
      border-color: #819546;
    }
    /* active時の色（hover時と同等かさらに濃いor暗めの色を指定）#222b79 */
    .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
      color: #ffffff;
      background-color: #007848;
      border-color: #f5f5f5;
    }
    /* ****************************************Orenge  #e44607; */
    .btn-danger,
    .btn-danger.disabled, .btn-danger:disabled {
      color: #000000;
      background-color: #ff9313;
      border-color: #ffffff;
    }
    /* focusされた時の枠線の色 */
    .btn-danger:focus, .btn-danger.focus,
    .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
    .show > .btn-danger.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.8rem rgba(114,114,114);
    }
    /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
    .btn-danger:hover {
      color: #ffffff;
      background-color: #ff6e00;
      border-color: #959595;
    }
    /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
    .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
    .show > .btn-danger.dropdown-toggle {
      color: #0A0A0A;
      background-color: #ff6e00;
      border-color: #959595;
    }
    /*  ****************************************light Blue */
    .btn-info,
    .btn-info.disabled, .btn-info:disabled {
      color: #ffffff;
      background-color: #9dc209;
      border-color: #ffffff;
    }
    /* focusされた時の枠線の色 */
    .btn-info:focus, .btn-info.focus,
    .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
    .show > .btn-info.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(54,155,185, 0.5);
    }
    /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
    .btn-info:hover {
      color: #ffffff;
      background-color: #568203;
      border-color: #9dc209;
    }
    /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
    .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
    .show > .btn-info.dropdown-toggle {
      color: #ffffff;
      background-color: #568203;
      border-color: #000000;
    }
    /*  ****************************************light */
    .btn-light,
    .btn-light.disabled, .btn-light:disabled {
      color: #000000;
      background-color: #C8F169;
      border-color: #ffffff;
    }
    /* focusされた時の枠線の色 */
    .btn-light:focus, .btn-light.focus,
    .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
    .show > .btn-light.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(238,238,238, 0.5);
    }
    /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
    .btn-light:hover {
      color: #ffffff;
      background-color: #9dc209;
      border-color: #959595;
    }
    /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
    .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
    .show > .btn-light.dropdown-toggle {
      color: #ffffff;
      background-color: #9dc209;
      border-color: #959595;
    }
    /*  ****************************************Red success*/
    .btn-success,
    .btn-success.disabled, .btn-success:disabled {
      color: #000000;
      background-color: #ceff00;
      border-color: #ffffff;
    }
    /* focusされた時の枠線の色 */
    .btn-success:focus, .btn-success.focus,
    .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
    .show > .btn-success.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem rgba(203,232,150, 0.5);
    }
    /* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定）*/
    .btn-success:hover {
      color: #ffffff;
      background-color: #d1e231;
      border-color: #959595;
    }
    /* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
    .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
    .show > .btn-success.dropdown-toggle {
      color: #ffffff;
      background-color: #d1e231;
      border-color: #959595;
    }