/* ページボディ部 */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

/* ページヘッダ部 */
header {
    background-color: #333;
    color: white;
    padding: 5px;
    font-size: 18px;
}

/* ナビゲーション、無順序リスト*/
nav ul {
    list-style: none;
    padding: 0;
}

/* ナビゲーション、無順序リスト、リスト要素*/
nav ul li {
    display: inline-block;
    margin: 10px;
}

nav ul li a {
    text-decoration: none;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
}


/* メイン部の余白設定 */
main {
    padding: 20px;
}


/* テーブル全体定義 */
table {
    width: 60%;
    margin: 20px auto;
    border-collapse: collapse;
}

/* テーブル罫線 */
table, th, td {
    border: 1px solid #555;
}

/* テーブルヘッダ、データ部 */
th, td {
    padding: 10px;
    text-align: center;
}

/* テーブルヘッダ部 */
th {
    background-color: #007bff;
    color: white;
}

/* テキストのスクロール表示 */
  <style>
    .scroll-text {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .scroll-text span {
      display: inline-block;
      padding-left: 100%;
      animation: scroll-left 20s linear infinite;
      white-space: nowrap;  /* 念のためここにも書く */
      font-size: 32px;      /* ← 文字を大きく */
      color: red;           /* ← 赤色に設定 */
    }
    @keyframes scroll-left {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }
  </style>
/*
    .tournament {
      display: flex;
      flex-direction: column-reverse;   /* 箱の並び(row:横並び、column:縦並び) reverse:下から上
      gap: 80px;                        /* A－a⑤の横間隔
      position: relative;
      margin: 40px;                     /* 余白(左上からの位置)
      font-family: sans-serif;
    }
*/
    .tournament {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        display: block;
        white-space: nowrap;
        max-width: 100%;
        margin: 40px;                    /* ← 既存から保持 */
        font-family: sans-serif;         /* ← 既存から保持 */
        /* 重要: SVGが追従するようにコンテナとして機能 */
    }

    .winner-round {
      display: flex;
      flex-direction: column;           /* ← 縦方向に配置 */
      align-items: center;              /* 中央揃え */
      gap: 40px;                        /* a⑤とA/B間の距離 */
      min-width: 1000px;                /* ←ここを試合表に合わせて調整。たとえば800pxでも可 */
      position: relative;               /* ← 追加 */
      z-index: 2;                       /* ← 追加 */
    }
    .loser-round {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40px;                 /* 上から十分スペースを空ける */
      min-width: 1000px;                /* ←ここを試合表に合わせて調整。たとえば800pxでも可 */
      position: relative;               /* ← 追加 */
      z-index: 2;                       /* ← 追加 */
    }

    .match {
      width: 60px;                      /* 箱の幅 */
      padding: 10px;                    /* 文字間隔(大きくすると箱のサイズも変わる) */
      background: #f5f5f5;
      border: 2px solid #aaa;
      border-radius: 0px;               /* 箱の角の丸さ */
      text-align: center;
      font-weight: bold;
      position: relative;               /* ← 追加 */
      z-index: 3;                       /* ← 追加 */
    }
    .svg-lines {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        /* 重要: コンテナのスクロールと一緒に動くように */
    }

    #connections {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: visible;
        /* 重要: SVGがトーナメントコンテナ内で動作 */
    }

    .loser-lines {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }

/* ブロック成績表専用（Table_a & Table_b） */
.block-table {
  min-width: 600px; /* 横スクロールされるように */
  table-layout: fixed;
}

/* スケジュール表（schadule_a）は内容に合わせて可変 */
.schedule-table {
  min-width: unset;
  font-size: 0.95rem;
  table-layout: auto;
}

/* レスポンシブル設定追加*/

/* レスポンシブ基本調整 */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* スクロールテキスト（お知らせ帯）のスタイル */
.scroll-text {
  background-color: transparent;
  color: red;
  font-weight: bold;
  padding: 0.5rem 1rem;
  overflow-x: auto;
  white-space: nowrap;
}

/* ナビゲーション全体の余白 */
nav {
  padding: 1rem;
}

/* 各セクションの余白 */
nav section {
  margin-bottom: 2rem;
}

/* リンクのスタイル */
a {
  color: blue;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* 見出しとリストの余白 */
h1, h2, h3 {
  margin: 1rem 0 0.5rem 1rem;
}
ul {
  padding-left: 2rem;
}

/* モバイル向けレスポンシブ対応 */
@media (max-width: 600px) {
  header h1 {
    font-size: 1.2rem;
    padding: 0.5rem;
  }

  h2 {
    font-size: 1rem;
  }

  .scroll-text {
    font-size: 0.9rem;
  }

  nav {
    padding: 0.5rem;
  }

  ul {
    padding-left: 1.2rem;
  }

  a {
    font-size: 0.95rem;
  }
}

/* レスポンシブ画像対応 */
img {
  max-width: 100%;
  height: auto;
}

/* テーブルの基本スタイル */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  min-width: 600px; /* スマホで横スクロールされるサイズ */
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

/* テーブル2つ並列の調整（スマホ対応） */
.table-container {
  display: flex;
  flex-wrap: wrap; /* スマホでは縦並びになる */
  gap: 20px;
}

.table-container table {
  flex: 1 1 400px; /* 横幅が狭い場合は折り返す */
}

/* スマホ画面サイズの調整 */
@media (max-width: 600px) {
  body {
    padding: 0.5rem;
    font-size: 0.95rem;
  }

  h1, h2 {
    font-size: 1.2rem;
  }

  table {
    font-size: 0.85rem;
    min-width: unset;
  }

  th, td {
    padding: 6px;
  }

}
/*
.tournament {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  white-space: nowrap;
  max-width: 100%;
}
*/