/* =========================================
   company-ranker：SWELL上書き最終確定版
   目的：
   ・table を中身基準で横に伸ばす
   ・セル内テキストを一切潰さない
   ・横スクロールで表示
========================================= */

/* -----------------------------------------
   ① 横スクロールの親（必須）
----------------------------------------- */
.post_content .company-ranker-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* -----------------------------------------
   ② テーブル本体
   SWELLの table { width:100% } を完全無効化
----------------------------------------- */
.post_content .company-ranker-viewport > table.company-ranker-table {
  width: max-content !important;
  max-width: none !important;
  table-layout: auto !important;
  border-collapse: collapse;
  background: #fff;
}

/* -----------------------------------------
   ③ セル：絶対に潰さない（最重要）
----------------------------------------- */
.post_content .company-ranker-wrap th,
.post_content .company-ranker-wrap td {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  vertical-align: middle;
}

/* -----------------------------------------
   ④ TH（見出し）共通：中央寄せ・白文字
----------------------------------------- */
.post_content .company-ranker-wrap th {
  text-align: center;
  color: #fff; /* ← 評価THも含めて白 */
}

/* -----------------------------------------
   ⑤ TD：中央寄せする列
----------------------------------------- */
.post_content .company-ranker-wrap td.cr-col-rank,
.post_content .company-ranker-wrap td.cr-col-rating,
.post_content .company-ranker-wrap td.cr-col-count,
.post_content .company-ranker-wrap td.cr-col-city {
  text-align: center;
}

/* -----------------------------------------
   ⑥ TD：左寄せを明示する列
----------------------------------------- */
.post_content .company-ranker-wrap td.cr-col-name,
.post_content .company-ranker-wrap td.cr-col-services {
  text-align: left;
}

/* -----------------------------------------
   ⑦ 会社名（1行固定）
----------------------------------------- */
.post_content .company-ranker-wrap .cr-company-name {
  display: block;
  white-space: nowrap !important;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  font-size: 14px;
}

.post_content .company-ranker-wrap .cr-company-name:hover {
  text-decoration: underline;
}

/* -----------------------------------------
   ⑧ 電話番号（2行目）
----------------------------------------- */
.post_content .company-ranker-wrap .cr-company-phone {
  display: block;
  white-space: nowrap !important;
  font-size: 12px;
  color: #475569;
  margin-top: 2px;
}

/* -----------------------------------------
   ⑨ 評価の色（TD）
----------------------------------------- */
.post_content .company-ranker-wrap td.cr-col-rating {
  color: #ea580c !important;
  font-weight: 700;
}

/* =====================================
   1位の行全体を薄くハイライト
   （王道・安心感タイプ）
===================================== */
.post_content .company-ranker-wrap tbody tr:nth-child(1) {
  background: rgba(122, 182, 61, 0.08); /* 薄いグリーン */
}

/* =====================================
   比較表 注釈テキスト調整
===================================== */

/* 全体の注釈：少し小さく・グレー */
.post_content .company-ranker-note {
  font-size: 12px;
  color: #6b7280; /* 落ち着いたグレー */
  line-height: 1.6;
}

/* 「横にスクロールできます」だけ中央寄せ */
.post_content .company-ranker-scroll-note {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
}