#loading {
        background: rgba(0, 0, 0, .5);
        z-index: 10000;
    }
    /* タブをコンパクトにしたい場合 */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
      font-size: 0.875rem; /* 小さめのフォント */
      padding: 0.25rem 0.5rem; /* 上下左右の余白を減らす */
    }

    /* アクティブタブの仕上げ */
    .nav-tabs .nav-link.active,
    .nav-pills .nav-link.active {
      padding: 0.25rem 0.5rem;
    }

    /* select2関連 */
    .select2-container--default .select2-selection--single .select2-selection__rendered img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
      vertical-align: middle;
    }

    .select2-results__option img {
      width: 20px;
      height: 20px;
      margin-right: 6px;
      vertical-align: middle;
    }

    /* Select2 選択中の表示部分の高さをBootstrapのform-controlに合わせる */
    .select2-container--default .select2-selection--single {
      height: 38px;
      /* Bootstrap 5のform-controlの高さ */
      padding: 6px 12px;
      display: flex;
      align-items: center;
      border: 1px solid #ced4da;
      border-radius: 0.375rem;
      /* Bootstrapのrounded */
    }

    /* 画像の縦位置も調整 */
    .select2-selection__rendered img,
    .select2-results__option img {
      vertical-align: middle;
      height: 20px;
      width: 20px;
      margin-right: 6px;
    }

    .select2-container--default .select2-selection--single {
      width: 100% !important;
    }

    #jouSelect.select2-hidden-accessible+.select2-container {
      width: 100% !important;
      min-width: 220px;
    }

    .rotate-45 {
      transform: rotate(45deg); display: inline-block;
    }

    .rotate-90 {
      transform: rotate(90deg); display: inline-block;
    }

    .rotate-270 {
      transform: rotate(270deg); display: inline-block;
    }

    /* 艇番色関連 */
    .is-boatColorText1 {
      /*color: #ebebeb !important;*/
      color: #c9c9c9 !important;
    }

    .is-boatColorText2 {
      color: #505050 !important;
    }

    .is-boatColorText3 {
      color: #f04141 !important;
    }

    .is-boatColorText4 {
      color: #4184d0 !important;
    }

    .is-boatColorText5 {
      color: #ece962 !important;
    }

    .is-boatColorText6 {
      color: #54b74d !important;
    }

    .is-boatColor1 {
      background-color: #ebebeb !important;
      color: #666 !important;
    }

    .is-boatColor2 {
      background-color: #505050 !important;
      color: white !important;
    }

    .is-boatColor3 {
      background-color: #f04141 !important;
      color: white !important;
    }

    .is-boatColor4 {
      background-color: #4184d0 !important;
      color: white !important;
    }

    .is-boatColor5 {
      background-color: #ece962 !important;
    }

    .is-boatColor6 {
      background-color: #54b74d !important;
      color: white !important;
    }

    /* DatePicker */
    .ui-datepicker {
      z-index: 1055 !important;
      /* Bootstrap モーダルより上にしたい場合 */
    }

    /* 出走表テーブル関連 */
    .table-wrapper {
      width: 100%;
      min-width: 400px;
      max-width: 800px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overflow-y: hidden;
      height: 723px;
      /* 必要に応じて高さを調整 */
      position: relative;
    }

    table th {
      background-color: #4184d0;
      color: white;
      font-weight: bold;
    }

    .table-fixed td {
      height: 12px;
    }
/*
    .table-fixed {
      background-color: #DEE2E6;
    }
*/
    .table-fixed th {
      background-color: #4184d0;
      color: white;
      font-weight: bold;
    }

    .table-fixed th,
    .table-fixed td {
      white-space: nowrap;
      margin: 0;
      padding: 0 2px;
    }

    thead th {
      top: 0;
      position: sticky;
      z-index: 2;
    }

    /* 固定カラム */
    .sticky-col-1 {
      position: sticky;
      left: 0;
      z-index: 3;
    }

    .sticky-col-2 {
      position: sticky;
      left: 19px;
      /* カラム幅に合わせて調整 */
      z-index: 3;
    }

    .sticky-col-3 {
      position: sticky;
      left: 39px;
      /* 同様に調整 */
      z-index: 3;
    }

    .sticky-col-4 {
      position: sticky;
      left: 99px;
      /* 同様に調整 */
      z-index: 3;
    }

    .sticky-col-5 {
      position: sticky;
      left: 198px;
      /* 同様に調整 */
      z-index: 3;
    }

    table#result,
    table#rsultList,
    table#refund {
      width: 100%;
      white-space: nowrap;
    }

    table.toban-history th,
    table.toban-history td {
      font-size: 0.8em;
    }
    table#boatboy-table td {
      padding: 7px !important;
      margin: 3px !important;
    }
    table#boatboy-table th,
    table.toban-history th,
    table#result th,
    table#justBefor th,
    table#resultList th,
    table#refund th {
      background-color: #4184d0;
      color: white;
      padding: 5px !important;
      margin: 5px !important;
    }

    table#result td,
    table#resultList td {
      padding: 5px !important;
      margin: 5px !important;
    }

    table#justBefor th {
      height: 80px;
    }

    .slit-00 {
      padding-right: 0;
      margin-right: 0;
    }

    th.small-text {
      font-size: 0.8em !important;
    }
    td.small-text {
      font-size: 0.6em !important;
    }

    th.x-small-text {
      font-size: 0.7em !important;
    }
    td.x-small-text {
      font-size: 0.5em !important;
    }

    h1 {
      font-size: 0.8em;
    }

    .navbar,
    #shareBtn {
      padding-bottom: 0;
      margin-bottom: 10px;
    }

    #loading .raindrops-canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;               /* canvas を一番下へ */
      pointer-events: none;     /* クリック透過 */
    }

    #loading-image {
      position: relative;
      z-index: 1;               /* 表示を上に持ってくる */
    }

    .tab-pane {
      padding-top: 0px !important;
    }

    p.margin0 {
      margin: 0 !important;
    }