/* ======== 全体設定 ======== */
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #000; /* 背景黒 */
      color: #fff;
    }

    /* ======== 横スクロール/中央寄せ設定 ======== */
    .container {
      display: flex;
      flex-wrap: wrap; /* ボタンを複数行に配置 */
      justify-content: center; /* 中央揃え */
      gap: 15px; /* ボタン間の隙間 */
      padding: 20px;
      max-width: 1200px; /* 最大幅を1200pxに制限 */
      margin: 0 auto; /* 中央寄せ */
    }

    /* ======== スクロールバーのデザイン（スマホで有効） ======== */
    .container::-webkit-scrollbar {
      height: 8px; /* スクロールバーの高さ */
    }
    .container::-webkit-scrollbar-thumb {
      background: #444; /* スクロールバーの色 */
      border-radius: 4px; /* スクロールバーの端を丸く */
    }
    .container::-webkit-scrollbar-track {
      background: #222; /* スクロールバー背景 */
    }

    /* ======== ボタンデザイン ======== */
    .sport-btn {
      background-color: gray; /* 初期状態の背景色 */
      color: #fff; /* テキスト色 */
      border: none;
      border-radius: 30px; /* 角丸ボタン */
      padding: 15px 25px; /* ボタンのサイズ */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem; /* ボタン文字サイズ */
      text-align: center;
      white-space: nowrap; /* テキストを折り返さない */
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .sport-btn:hover {
      background-color: #666; /* マウスホバー時の色 */
      transform: scale(1.05); /* マウスホバー時の拡大 */
    }

    .sport-btn.active {
      background-color: #b11a26; /* 選択時の色 */
    }

    .sport-btn .material-icons {
      font-size: 1.5rem; /* アイコンサイズ */
      margin-right: 5px;
    }

    /* ======== レスポンシブ対応 ======== */
    @media (min-width: 1024px) {
      .container {
        padding: 30px 20px;
      }

      .sport-btn {
        flex: 1 0 calc(25% - 30px); /* 4列表示用 */
        max-width: calc(25% - 30px); /* 各ボタンの最大幅 */
      }
    }

    @media (max-width: 1024px) {
      /* タブレットやスマホ時（1024px以下） */
      .container {
        flex-wrap: nowrap; /* 横スクロールに設定 */
        justify-content: flex-start; /* 左寄せ */
        padding-left: 10px; /* スクロール開始に余白 */
        overflow-x: auto; /* 横スクロール */
      }

      .sport-btn {
        flex: 0 0 auto; /* サイズを自動調整 */
        padding: 10px 20px; /* ボタンサイズを小さめに */
        font-size: 0.9rem; /* テキストサイズを小さめに */
        max-width: none;
      }
    }
    
    .content {
      display: none; /* 初期は非表示 */
    }

    .content.active {
      display: block; /* アクティブなコンテンツのみ表示 */
    }