body {
  padding: 1rem 0;  /* ←左右のパディングを0に */
  background: #f9fafb;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
}



/* トーナメント全体の親要素（スクロール付き） */
.tournament-wrapper {
  width: 100%;        /* 画面幅いっぱい */
  overflow-x: auto;    /* 横スクロール有効 */
  -webkit-overflow-scrolling: touch; /* スマホの慣性スクロール */
  padding: 1rem 0;
  box-sizing: border-box;
}

/* トーナメント本体 */
.tournament {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  min-width: 1200px;   /* 必要な横幅を確保 */
   justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}


/* スクロールバーのスタイル（Webkitブラウザ用） */
.tournament::-webkit-scrollbar {
  height: 8px;
}
.tournament::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.tournament::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 各ラウンド列 */
.round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 150px;
  padding: 1rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.1);
}

/* 各試合ブロック */
.match {
  width: 120px;
  padding: 0.75rem 1rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.25s ease;
}

/* ホバー時の色変化 */
.match:hover {
  background-color: #e9ecef;
}

/* 矢印ライン（右側に線を伸ばす） */
/* .match::after {
  display: none !important;
} */

/* 最終ラウンドの矢印を非表示 */
/* .round.final .match::after {
  display: none;
} */

/* チーム名入力欄 */
.team-input {
  width: 100%;
  border: none;
  background: transparent;
  font-weight: 400;
  font-size: 0.8rem;
  outline: none;
  cursor: text;
}

/* 優勝ラベル */
.champion-label {
  font-weight: bold;
  text-align: center;
  margin: 1rem 0 0.5rem;
  font-size: 1.2rem;
  color: #444;
}

/* ジャンボトロン（トップ画像） */
.jumbotron-image {
  background-image: url("../images/top_02.jpg");
  background-size: cover;
  background-position: center;
  height: 300px; /* 必要に応じて調整 */
  display: flex;
  align-items: flex-start;     /* ← 上寄せ */
  justify-content: center;     /* ← 横中央 */
  padding-top: 1rem;           /* ← 上の余白調整（任意） */
}

.jumbotron-image h1 {
  font-size: 1.5rem; /* お好みのサイズに調整 */
}

/* ナビゲーション */
.navbar-brand img {
  border-radius: 6px;
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: #333;
}

.navbar-nav .nav-link:hover {
  color: #0d6efd;
}