/* cssファイル*/

@charset "UTF-8";
       html { outline: 4px solid #0a0; }
       
 body {
          font-family: Arial, sans-serif;
          background-color: #f7f7f7;
          padding: 5px;
        }
        .container {
          max-width: 1200px;
          margin: auto;
          background-color: #fff;
          padding: 5px;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        
       .block{
        margin-top: 10px; 
        margin-bottom: 30px;
        
       }

       /*タイトル部分----------------------------------------------------*/
      .block_title {
          display: flex;
          flex-direction: column;
          margin-top: 10px; 
          margin-bottom: 30px;
          align-items: center;
          letter-spacing: 1.2em;
          line-height: 1.6;
          background-color: hsl(276, 100%, 89%);
      }

      /* PC用フォントサイズ */
      .block_title h1 {
          font-size: 2.4rem;
      }
      .block_title h2 {
          font-size: 1.6rem;
      }

      /* スマホ向け */
      @media (max-width: 768px) {
        .block_title {
            letter-spacing: 0.1em;
            line-height: 1.2;
            margin-top: 4px;
            margin-bottom: 10px;
        }

        .block_title h1, 
        .block_title h2 {
          font-size: 5vw;           /* 画面幅の5%のサイズ */
          white-space: nowrap;      /* 折り返し防止 */
          text-align: center;       /* 中央寄せ */
          letter-spacing: 0.05em;   /* 文字間少し狭く */
        }
       /*タイトル部分 ここまで----------------------------------------------------*/

      }

     /* 更新ボタン */
      #btnFetch.update{
        -webkit-appearance: none;
        appearance: none;
        border: none;
        border-radius: 9999px;
        padding: 10px 18px;
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: .02em;
        color: #fff;
        background: linear-gradient(180deg, #9e7be0 0%, #8a60da 100%); /* タイトルの色味に合わせる */
        box-shadow: 0 6px 16px rgba(84,104,199,.35);
        cursor: pointer;
        transition: transform .06s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
      }

      /* ホバー・フォーカス */
      #btnFetch.update:hover { filter: brightness(1.06); }
      #btnFetch.update:focus-visible{
        outline: 3px solid #b9c7ff;
        outline-offset: 2px;
      }

      /* 押下感 */
      #btnFetch.update:active{ transform: translateY(1px) scale(0.99); }

      /* 無効時（取得中などでdisabledにしたとき） */
      #btnFetch.update:disabled{
        opacity: .6;
        cursor: not-allowed;
        box-shadow: none;
      }

      
      /* 見た目（文字色・背景色・レイアウト） */
      .disclosure > summary {
        background: #6d81cf;      /* ← 背景色 */
        color: #fff;               /* ← 文字色 */
        padding: 5px 5px;
        margin-top: 20px;
        margin-bottom: 30px;
        margin-right: 30px;
        font-size: 1.4rem;
        font-weight: 700;
        border-radius: 20px;       /* 見た目の角丸 */
        cursor: pointer;
        display: flex;             /* アイコンなどと横並びにしたい時に便利 */
        align-items: center;
        gap: .5rem;
        transition: background .2s ease, color .2s ease;
      }

       /* 既定のマーカーを消す（そのまま流用OK） */
      .disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; }
      .disclosure > summary::-webkit-details-marker { display: none; }

      /* ▼▲ のルールをやめて、＋/－の丸アイコンに変更 */
      .disclosure > summary::before {
        content: "+";                      /* 閉じているときは＋ */
        display: inline-grid;
        place-items: center;
        width: 1.3em;
        height: 1.3em;
        border-radius: 9999px;
        border: 2px solid currentColor;    /* 文字色と合わせる */
        background: rgba(255,255,255,.15); /* うっすら背景（任意） */
        font-weight: 700;
        line-height: 1;

        color: #ffffff;                 /* ＋の色 */
        background-color:#1a3fd3 ;      /* 背景色（例: グリーン） */
        border: 2px solid #ffffff;      /* 枠色（任意） */
      }

      /* 開いたときは － に変える（見栄えの良いU+2212のマイナス記号） */
      .disclosure[open] > summary::before {
        content: "−";
      }

      /* 末尾の▼▲は不要なら消す */
      .disclosure > summary::after { content: none; }

      .name_dance{
        color: #1e8641;  
        padding: 5px 5px;
        margin-top: 20px;
        margin-bottom: 0px;
        margin-right: 30px;
        font-size: 1.6rem;
        font-weight: 700;
        
      }

      /* スマホ向け */
      @media (max-width: 768px) {

        /* 見た目（文字色・背景色・レイアウト） */
        .disclosure > summary {
          background: #6d81cf;      /* ← 背景色 */
          color: #fff;               /* ← 文字色 */
          padding: 5px 5px;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-right: 10px;
          font-size: 1.0rem;
          font-weight: 400;
          border-radius: 20px;       /* 見た目の角丸 */
          cursor: pointer;
          display: flex;             /* アイコンなどと横並びにしたい時に便利 */
          align-items: center;
          gap: .5rem;
          transition: background .2s ease, color .2s ease;
        }

        /* 既定のマーカーを消す（そのまま流用OK） */
        .disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; }
        .disclosure > summary::-webkit-details-marker { display: none; }

        /* ▼▲ のルールをやめて、＋/－の丸アイコンに変更 */
        .disclosure > summary::before {
          content: "+";                      /* 閉じているときは＋ */
          display: inline-grid;
          place-items: center;
          width: 1.3em;
          height: 1.3em;
          border-radius: 9999px;
          border: 2px solid currentColor;    /* 文字色と合わせる */
          background: rgba(255,255,255,.15); /* うっすら背景（任意） */
          font-weight: 700;
          line-height: 1;

          color: #ffffff;                 /* ＋の色 */
          background-color:#1a3fd3 ;      /* 背景色（例: グリーン） */
          border: 2px solid #ffffff;      /* 枠色（任意） */
        }

        /* 開いたときは － に変える（見栄えの良いU+2212のマイナス記号） */
        .disclosure[open] > summary::before {
          content: "−";
        }

        /* 末尾の▼▲は不要なら消す */
        .disclosure > summary::after { content: none; }

        

        .name_dance{
          color: #1e8641;  
          padding: 5px 5px;
          margin-top: 10px;
          margin-bottom: 0px;
          margin-right: 20px;
          font-size: 1.0rem;
          font-weight: 500;
          
        }
        

      }

    
    /* ========== テーブル共通（このページの表全般に適用） ========== */
    .table-wrap {
      max-width: 100%;
      overflow-x: auto;              /* スマホで横スクロール */
      -webkit-overflow-scrolling: touch;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;              /* 角丸を有効化 */
      box-shadow: 0 4px 14px rgba(0,0,0,.08);
    }

    /* ヘッダー */
    thead {
      background: #90c5b4;          /* お好みで変更 */
      color: #fff;
    }
    td {
      padding: 12px 14px;
      border-bottom: 1px solid #e9ecf3;
      white-space: nowrap;           /* 長い氏名は折り返したいなら外す */
      font-size: 1.2rem;
    }
    th {
      padding:2px 4px;              /* 必要なら余白も少し詰める */
      border-bottom: 1px solid #ecf0fa;
      white-space: nowrap;
      font-size: 1.2rem;            /* ← 小さく */
      font-weight: 700;              /* 見出し感は残す（任意） */
      letter-spacing: .02em;         /* 任意 */
    }

    /* 最後の行の罫線消し */
    tbody tr:last-child td { border-bottom: none; }

    /* 行ホバー・ゼブラ */
    tbody tr:nth-child(even) { background: #f3f4fc; }

    /* 列ごとの整列（順位・得点・背番号は右寄せ、氏名は左） */
    tbody td:nth-child(1) { 
      font-weight: 500;
      text-align: center;
       width: 10ch;
      font-size: 1.6rem; }
    thead th:nth-child(1) { font-weight: 500; text-align: center;}
    thead th:nth-child(2) { font-weight: 500; text-align: center;}
    tbody td:nth-child(2) { 
      font-weight: 500;
      text-align: center;
      width: 10ch;
      font-size: 1.4rem; }
    thead th:nth-child(3) { font-weight: 500; text-align: center;}
    tbody td:nth-child(3) {
      font-weight: 500;
      text-align: center;
      width: 18ch;
      font-variant-numeric: tabular-nums;  /* 桁揃え */
      font-size: 1.6rem;
    }
    thead th:nth-child(4) { font-weight: 500; text-align: center;}
    tbody td:nth-child(4) { font-weight: 500; width: 35%; text-align: center;font-size: 1.6rem;}
    thead th:nth-child(5) { font-weight: 500; text-align: center;}
    tbody td:nth-child(5) {
      font-weight: 500;
      text-align: center;
      width: 35%;
      font-size: 1.6rem;
    }

    /* 視認性アップ：順位列を太字に */
    tbody td:nth-child(1) { font-weight: 700; }

    /* 見出しセル */
    th {  letter-spacing: .02em; }

    /* モバイル微調整 */
    @media (max-width: 768px) {
      .result-table thead th{
        font-size: 0.6rem !important;  /* 必要なら !important で確実に上書き */
        padding: 1px 1px;
        white-space: normal !important; /* 以前の nowrap を上書き */
        overflow-wrap: anywhere;        /* 英数字が長い時も折り返す */
        line-height: 1.4;
      }
      .result-table tbody td {
        font-size: 0.8rem !important;  /* 必要なら !important で確実に上書き */
        padding: 6px 8px;
        white-space: normal !important; /* 以前の nowrap を上書き */
        overflow-wrap: anywhere;        /* 英数字が長い時も折り返す */
        line-height: 1.4;
      }
    }