/* ============ 7. 競合比較テーブル（詳細版・5項目） ============
   index.html に組み込み済み。 */

/* 評価アイコン（○△✕形状。色を使うのは「できる」の緑だけ。△✕はグレーの線画） */
.ri{display:inline-block;width:20px;height:20px;flex:none}
.ri svg{width:100%;height:100%;display:block}
.ri--g{color:var(--teal)}   /* ◎ 特に強い：緑の塗りつぶし丸 */
.ri--o{color:var(--teal)}   /* ○ 一定できる：緑の線画丸 */
.ri--m{color:var(--ink-soft)} /* △ 部分的・条件次第：グレーの線画三角 */
.ri--b{color:var(--ink-soft)} /* ✕ 基本的にできない：グレーの線画バツ */

.compare-legend{
  margin-top:clamp(28px,3.5vw,36px);
  display:flex;flex-wrap:wrap;gap:.6em 1.6em;
  font-size:.82rem;color:var(--ink-soft);
}
.compare-legend .item{display:inline-flex;align-items:center;gap:.5em}

.compare-table-wrap{
  margin-top:14px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:16px;
  -webkit-overflow-scrolling:touch;
}
.compare-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
.compare-table th,.compare-table td{
  text-align:left;
  vertical-align:top;
  padding:clamp(16px,2.2vw,22px) clamp(16px,2.2vw,22px);
}

/* 見出し行（TYPE A / TYPE B / 組織開発ハマる） */
.compare-table thead th{
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}
.compare-table thead th.us{background:var(--ink)}
.compare-table thead .cat{
  font-family:var(--latin);font-size:.68rem;letter-spacing:.16em;font-weight:600;
  color:var(--ink-soft);margin-bottom:.5em;
}
.compare-table thead th.us .cat{color:#5FD4C5}
.compare-table thead h3{
  font-family:var(--mincho);font-weight:700;font-size:1.05rem;color:var(--ink);
}
.compare-table thead th.us h3{color:#fff}

/* 行見出し（項目名：タイトル＋補足） */
.compare-table tbody th{
  width:9em;
  font-family:var(--mincho);font-weight:700;font-size:.9rem;color:var(--ink);
  background:var(--paper);border-right:1px solid var(--line);
  position:sticky;left:0;
  line-height:1.6;
}
.compare-table tbody th .sub{
  display:block;margin-top:.3em;font-family:var(--gothic);font-weight:500;
  font-size:.72rem;color:var(--ink-soft);line-height:1.6;
}

/* データセル：アイコンは独立した行、説明文はその下（同じ行に並べない） */
.compare-table tbody td{
  font-size:.87rem;color:var(--ink-soft);line-height:1.85;border-top:1px solid var(--line);
}
.compare-table tbody tr:first-child td,
.compare-table tbody tr:first-child th{border-top:1px solid var(--line)}

.compare-table tbody td .ri{display:block;margin-bottom:.6em}
.compare-table tbody td p{margin:0}

.compare-table tbody td.us{background:var(--ink);color:#C7DAD7}
.compare-table tbody td.us .ri--g,
.compare-table tbody td.us .ri--o{color:#5FD4C5}
.compare-table tbody td.us .ri--m,
.compare-table tbody td.us .ri--b{color:rgba(255,255,255,.55)}

/* モバイルでの横スクロール気づきヒント */
.compare-scroll-hint{
  display:none;margin-top:.9em;font-size:.78rem;color:var(--ink-soft);
  align-items:center;gap:.4em;letter-spacing:.02em;
}
@media(max-width:760px){
  .compare-scroll-hint{display:flex}
}
.compare-scroll-hint svg{width:1em;height:1em;flex:none}