/* 全体を極限までコンパクトに */
.table-card {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;   /* ← ここで全体縮小 */
  table-layout: fixed;
  
}

.table-card th,
.table-card td {
  border: 1px solid #ccc;
   padding: 0 2px;   /* 上下0, 左右2 */
  text-align: center;
  vertical-align: middle;
  word-break: break-word; /* 折り返して収める */
}

.table-card th {
  background: #f0f8ff;
  font-weight: 600;
  color: #0653a6;
}

/* サービス欄の縦レイアウト（画像→文字） */
.cell-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

/* 他CSSの img {max-width:100%} などを無効化してサイズを“絶対化” */
.table-card .cell-flex > img {
  max-width: none;
  width: 45px;        /* PC 絶対 */
  height: 45px;       /* 縦も固定で比率崩れ/CLS防止 */
  object-fit: contain;
  border-radius: 3px;
}

/* 画像列のパディングだけ最適化（他列はそのまま） */
.table-card th:first-child,
.table-card td:first-child {
  padding-top: 2px;   /* 画像の高さがあるので上は詰める */
  padding-bottom: 2px;
  padding-left: 6px;
  padding-right: 6px;
}

/* 他列（2列目以降）は少し余白を残して読みやすく */
.table-card th:not(:first-child),
.table-card td:not(:first-child) {
  padding: 4px 6px;
}


.cell-flex .info span {
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
}
.cell-flex .info small {
  font-size: 0.65rem;
  color: #666;
  line-height: 1.1;
}

/* リンク */
.table-card td a {
  color: #067aff;
  font-weight: 600;
  font-size: 0.7rem;
}
.table-card td a:hover {
  text-decoration: underline;
}

/* スマホでも「横表」のまま維持する */
@media (max-width: 640px) {
  .table-card {
    font-size: 0.6rem;
    
  }
  .table-card th, .table-card td {
    padding: 2px 3px; /* さらに狭め */
  }
  .cell-flex img {
    width: 40px;
  }
}

@media (max-width: 640px) {
  .table-card .cell-flex > img {
    width: 40px;      /* スマホ 絶対 */
    height: 40px;
  }
  .table-card th:first-child,
  .table-card td:first-child {
    padding-top: 1px;
    padding-bottom: 1px;
  }
  .table-card th:not(:first-child),
  .table-card td:not(:first-child) {
    padding: 3px 4px;
  }
}

/* PCフィット：デスクトップだけ縮小。vwに応じて自動で少しだけ縮む */
@media (min-width: 1024px) {

  .table-card {
    max-width: 800px; /* ← お好みで 860〜980px くらいで目視調整 */
    margin: 0 auto;   /* 中央寄せ */
  }
  /* 列幅の固定（必要ならそのまま維持） */
.table-card.pc-fit colgroup col:nth-child(1) { width: 20%; } /* サービス */
.table-card.pc-fit colgroup col:nth-child(2) { width: 20%; } /* 通貨ペア数 */
.table-card.pc-fit colgroup col:nth-child(3) { width: 30%; } /* 注文/自動化 */
.table-card.pc-fit colgroup col:nth-child(4) { width: 30%; } /* 取引ツール */


  .table-card.pc-fit {
    /* 0.70rem〜0.80remの範囲で自動調整（画面が狭いほど小さく） */
    font-size: clamp(0.70rem, 0.75vw, 0.80rem);
  }
  .table-card.pc-fit th,
  .table-card.pc-fit td {
    /* 余白はemで指定＝フォント縮小に連動してさらに詰まる */
    padding: 0.28em 0.45em;
    line-height: 1.15;
  }

  /* 画像は“絶対”サイズ維持（PC=45px） */
  .table-card.pc-fit .cell-flex > img {
    width: 45px;
    height: 45px;
  }

  /* テキストも少し小さめに寄せる */
  .table-card.pc-fit .info span { font-size: 0.72rem; }
  .table-card.pc-fit .info small { font-size: 0.60rem; }

  /* 見出しセルも気持ち小さくして高さを抑える */
  .table-card.pc-fit th {
    font-weight: 600;
  }

  
}

/* さらに詰めたい“XSモード”（任意） */
@media (min-width: 1024px) {
  .table-card.pc-fit.xs {
    font-size: clamp(0.64rem, 0.6vw, 0.72rem);
  }
  .table-card.pc-fit.xs th,
  .table-card.pc-fit.xs td {
    padding: 0.22em 0.4em;
    line-height: 1.1;
  }

  .table-card.pc-fit th:first-child,
  .table-card.pc-fit td:first-child {
    padding-top: 0.15em;  /* ← 上下は詰めすぎない */
    padding-bottom: 0.15em;
    padding-left: 0.45em;
    padding-right: 0.45em;
}
  .table-card colgroup col:nth-child(1) { width: 36%; } /* サービス */
  .table-card colgroup col:nth-child(2) { width: 14%; } /* 通貨ペア数 */
  .table-card colgroup col:nth-child(3) { width: 25%; } /* 注文/自動化 */
  .table-card colgroup col:nth-child(4) { width: 25%; } /* 取引ツール */
}

/* 最後の列 左寄せを無効化 */
.table-card td:last-of-type { text-align: center !important; }

/* ストライプ無効化 */
.table-card tbody > tr:nth-of-type(even) { background: transparent !important; }

/* 余計な外枠を削除 */
.table-card { border:0 !important; }


/* ===== レスポンシブ表（改訂版） ===== */

/* ===== 比較テーブル（PC基準） ===== */
.table-responsive{
  width:100%;
  border:0;               /* 全体 table の太枠を打消し:contentReference[oaicite:3]{index=3} */
  border-collapse:collapse;
  table-layout:fixed;     /* 列幅固定化（colgroup が効く） */
  font-size:clamp(.78rem, .72rem + .2vw, .95rem);
  letter-spacing:.01em;
}
.table-responsive th,
.table-responsive td{
  border:1px solid #ccc;
  padding:8px 10px;
  text-align:center;
  vertical-align:top;
  word-break:break-word;
  line-height:1.3;
}
.table-responsive thead{ background:#005BAC; }  /* 明示上書き:contentReference[oaicite:4]{index=4} */
.table-responsive thead th{ color:#fff; white-space:normal; }

/* 列配分（合計100%） */
.table-responsive col.col-cat    { width:22%; }
.table-responsive col.col-reco   { width:29%; }
.table-responsive col.col-reason { width:31%; }
.table-responsive col.col-target { width:18%; }

/* ===== スマホ：0.6rem 固定 ===== */
@media (max-width:600px){
  .table-responsive{
    font-size:0.6rem;     /* ご指定どおり */
  }
  .table-responsive th,
  .table-responsive td{
    padding:4px 6px;      /* さらに圧縮 */
    line-height:1.25;     /* 行間も僅かに詰める */
  }
  .table-responsive td br{ display:inline; }  /* <br> を残す */
}

/* 超狭小端末の保険（任意） */
@media (max-width:360px){
  .table-responsive th,
  .table-responsive td{ padding:3px 5px; }
}