/* ページボディ部 */
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 {
    .loser-connections {
      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%;
}
*/

/* ===========================
   固定レイアウト（レスポンシブ解除）
   body.tournament-fixed が付いたページ限定
=========================== */

/* 画像・SVGは拡縮させない（max-width:100% を無効化） */
.tournament-fixed img,
.tournament-fixed svg {
  max-width: none !important;
  height: auto;
}

/* ページ横幅を固定（必要なら調整） */
.tournament-fixed .page-wrap,
.tournament-fixed body {
  /* ページ全体の最小幅（必要なら外してOK） */
  min-width: 1100px;
}

/* トーナメント本体：固定サイズ＆スクロールなし */
.tournament-fixed .tournament {
  position: relative;
  width: 1000px;         /* ← トーナメントの横幅（任意に調整） */
  margin: 40px auto;     /* 中央寄せ */
  overflow: visible;     /* 横/縦スクロールを出さない */
  white-space: normal;   /* 固定レイアウトなので nowrap 不要 */
  font-family: sans-serif;
}

/* 行の最小幅はトーナメント幅に合わせる（既存の min-width を統一） */
.tournament-fixed .winner-round,
.tournament-fixed .loser-round {
  min-width: 1000px;     /* ← 上の .tournament width と揃える */
  position: relative;
  z-index: 2;
}

/* 試合ボックスは線より前面に */
.tournament-fixed .match {
  position: relative;
  z-index: 3;
}

/* SVGは親（.tournament）の中で全面にフィットさせて固定表示 */
.tournament-fixed .svg-lines,
.tournament-fixed .loser-lines {
  position: absolute;
  inset: 0;              /* top:0; right:0; bottom:0; left:0; と同義 */
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* 上下の表（スケジュールなど）も固定幅に */
.tournament-fixed table {
  width: 1000px;         /* ← 必要に合わせて固定幅 */
  min-width: 1000px;
  margin: 20px auto;
  font-size: 1rem;       /* メディアクエリの縮小を上書き */
}

/* スマホ向けの縮小や折返しを打ち消す（このページでは無効化） */
.tournament-fixed .table-container {
  display: block;        /* 横並び解除、崩れ防止 */
}

@media (max-width: 600px) {
  /* メディアクエリの影響をこのページでは無効化 */
  .tournament-fixed header h1,
  .tournament-fixed h1,
  .tournament-fixed h2,
  .tournament-fixed .scroll-text,
  .tournament-fixed nav,
  .tournament-fixed a,
  .tournament-fixed table {
    font-size: inherit;
    padding: initial;
  }

  .tournament-fixed table {
    min-width: 1000px;   /* スマホでも固定幅維持＝横スクロールは“ページ全体”で */
  }
}

/* もしどこかに overflow-x:auto; が残っていたら無効化しておく */
.tournament-fixed .tournament,
.tournament-fixed .winner-round,
.tournament-fixed .loser-round {
  overflow-x: visible !important;
  -webkit-overflow-scrolling: auto !important;
}