body {
      font-family: sans-serif;
      background-color: #1a1a1a;
      color: #fff;
      margin: 0;
      padding: 0;
    }
    .container {
      max-width: 1000px;
      margin: 0 auto;
    }
    .tab-buttons, .sub-tab-buttons {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      background: #2c2c2c;
      padding: 0.5em;
    }
    .tab-buttons button, .sub-tab-buttons button {
      flex: 0 0 auto;
      margin-right: 5px;
      padding: 0.5em 1em;
      background: #444;
      color: #fff;
      border: none;
      cursor: pointer;
      white-space: nowrap;
    }
    .tab-buttons button.active, .sub-tab-buttons button.active {
      background: #f9b000;
      color: #000;
      font-weight: bold;
    }
    .tab-content {
      display: none;
      padding: 1em;
    }
    .tab-content.active {
      display: block;
      padding:0px;
    }
    .responsive-table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    table {
      /* width: 100%; */
      border-collapse: collapse;
      margin-top: 1em;
      font-size: 0.85em;
      min-width: 750px;
    }
    @media (max-width: 600px) {
      table {
        min-width: 300px;
      }
      table td{
        width: 15%;
      }
    }
    th, td {
      border: 1px solid #555;
      padding: 0.4em;
      text-align: center;
      white-space: nowrap;
    }
    th {
      font-size: 0.75em;
      height: 15px;
    }
    .note {
      font-size: 0.75em;
      margin-top: 1em;
      color: #ccc;
    }
    /* カラム幅設定 */
    .col-waku { width: 5px;}
    .col-photo { width: 55px;}
    .col-player { width: 120px;}
    .col-fl { width: 40px; }
    .col-st { width: 60px; }
    .col-num { width: 40px; }
    .col-rank { width: 80px; }
    .col-rank2 { width: 60px; }
    .col-rank50 { width: 55px; }
    .col-rank70 { width: 70px; }
    .col-10 { width: 40px; }
    .col-player_time { width: 200px;}
    .col-st_tenji { width: 500px; }
    .col-st_tenji2 { width: 100px; }
    .col-graff { width: 300px; }

    th.col-waku, td.col-waku {
      position: sticky;
      left: 0;
      z-index: 10;
    }
    /* 枠色（艇色） */
    .waku-1 { background-color: #ffffff; color: #000; }
    .waku-2 { background-color: #444444; color: #fff; }
    .waku-3 { background-color: #ff0000; color: #fff; }
    .waku-4 { background-color: #1d4b9d; color: #fff; }
    .waku-5 { background-color: #ECE962; color: #000; }
    .waku-6 { background-color: #54B74D; color: #fff; }
    .photo-img {
      width: 100%;
      height: auto;
      display: block;
      padding:0px;
    }
    .video-wrapper {
      position: relative;
      width: 100%;
      max-width: 640px;
      margin: 0 auto 60px;
    }
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 2;
    }
    .race-title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      background-color: rgba(0, 0, 0, 0.75);
      color: white;
      padding: 6px 0;
    }
    .boat-names {
      display: flex;
      height: 40px;
    }
    .boat {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
      color: white;
      opacity: 0.9;
      padding: 4px;
    }

    .boat1 { background-color: #ffffff; color: #000; border-right: 1px solid #ccc; }
    .boat2 { background-color: #000000; }
    .boat3 { background-color: #ff0000; }
    .boat4 { background-color: #0000ff; }
    .boat5 { background-color: #ffff00; color: #000; }
    .boat6 { background-color: #008000; }
    video {
      width: 100%;
      display: block;
      border: 4px solid #333;
      z-index: 1;
      position: relative;
    }
    .vertical-button-wrapper {
      display: flex;
      align-items: stretch;
      margin-right: 5px;
    }

    .vertical-button {
      padding: 0 10px;
      background-color: #888;
      color: white;
      border: none;
      font-weight: bold;
      cursor: pointer;
      width: 100px;
    }
    .vertical-button.active{
      background: #f9b000;
      color: #000;
      font-weight: bold;
    }
    .container_plot {
      max-width: 1000px;
      margin: auto;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      margin-top:20px;
    }
    @media (max-width: 600px) {
      .container_plot {
        padding-left: 5px;
        padding-right: 5px;
      }
      .echart-box {
        height: 1000px;
      }
      .photo-img {
        width: 45px;
      }
    }
    @media (min-width: 601px) {
      .echart-box {
        height: 500px;
      }
    }
    h1 {
      text-align: center;
      font-size: 20px;
      margin-bottom: 15px;
    }
    .tabs {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .tab {
      padding: 6px 16px;
      background-color: deepskyblue;
      border-radius: 16px;
      cursor: pointer;
    }
    .tab.active {
      background-color: #007bff;
      color: white;
    }
    .chart-container {
      display: none;
      margin-top:-10px;
    }
    .chart-container.active {
      display: block;
    }
    .echart-box {
      width: 100%;
    }
    .dash-label {
      background-color: #ff6699; /* 濃いピンク */
      color: black;
      text-align: center;
      font-weight: bold;
      padding: 10px 0;
      margin: 10px 10px 30px 10px;
      font-size: 1.2em;
    }
    .menu_btn{
      width:100px;
    }
    .race_btn{
      width:65px;
    }
    tr.row-course {
      height: 18px;
    }
    tr.row-course td {
      padding-top: 2px;
      padding-bottom: 2px;
      line-height: 1.2;
    }
    #chart1_1 {
      position: relative;
      height: 600px;
      overflow: hidden;
    }
    #chart1_2 {
      position: relative;
      height: 300px;
      overflow: hidden;
    }
    .vertical-text {
      writing-mode: vertical-rl;
      /* 右から左へ縦書き（通常の和文レイアウト） */
      text-orientation: mixed;
      /* 横組み用文字も縦に回転 */
      border: 1px solid #ccc;
      padding: 10px;
    }
     .player_name {
      font-size: 8px;;
    }