/* ========== 基本：幅100%（ブロックにフィット） ========== */
.cct-front{
  width: 100%;
  overflow-x: auto; /* PCで崩れたら横スクロールできる保険 */
}

.cct-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #2f8fce;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
  /* min-width: 760px; ← これがあると100%になりにくいので削除/無効化 */
}

/* 見出し */
.cct-table thead th{
  background: #2a86c4;
  font-weight: 700;
  padding: 14px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* 本文セル */
.cct-table tbody td{
  padding: 16px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  font-size: 18px;   /* ← 追加（今より少し大きく） */
  line-height: 1.5;
}
.cct-table tbody tr:nth-child(even) td{
  background: rgba(255,255,255,0.02);
}

.cct-th-course, .cct-course{
  text-align: left !important;
  padding-left: 14px !important;
  white-space: nowrap;
}


/* ========== スマホ：縦並び（カード表示） ========== */
@media (max-width: 700px){
  .cct-table{
    border-radius: 10px;
  }

  .cct-table thead{
    display: none;
  }

  .cct-table,
  .cct-table tbody,
  .cct-table tr,
  .cct-table td{
    display: block;
    width: 100%;
  }

  .cct-table tbody tr{
    background: rgba(255,255,255,0.04);
    margin: 10px 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .cct-table tbody td{
    text-align: left;
    padding: 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    white-space: normal;
  }

  .cct-table tbody td:last-child{
    border-bottom: none;
  }

  /* ラベル（左）＋値（右） */
  .cct-table tbody td::before{
    content: attr(data-label);
    display: inline-block;
    min-width: 4.5em;
    opacity: .85;
    font-weight: 700;
    margin-right: 10px;
  }

  .cct-course{
    background: #ff3b3b !important;
    color: #ffffff !important;
    font-weight: 700;
    border-bottom: none;
    text-align: center !important;
    font-size: 18px;      /* 好みで 17〜20px */
    letter-spacing: .02em;
    padding: 14px 12px;   /* 少しゆったり */
  }

  .cct-course::before{
    content: none !important;
    display: none !important;
    color: rgba(255,255,255,0.9);
  }
}

/* ===== 残り5人以下は同じ色に固定 ===== */
.cct-cap.is-remain[data-remain="5"],
.cct-cap.is-remain[data-remain="4"],
.cct-cap.is-remain[data-remain="3"],
.cct-cap.is-remain[data-remain="2"],
.cct-cap.is-remain[data-remain="1"]{
  color: #f2a23a;   /* 見やすいオレンジ寄り */
  font-weight: 600; /* 太くしすぎない（滲み防止） */
}

/* 満は赤のまま */
.cct-cap.is-full{
  color: #d93a3a;
  font-weight: 600;
}