/* =====================================================================
   横スクロール比較表 — wbs-mock/styles.css より
   ===================================================================== */

.scroller-hint {
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.scroller-hint .swipe {
  animation: swipe 1.6s ease-in-out infinite;
}

.cmp-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
}

.cmp-wrap::-webkit-scrollbar { height: 6px; }
.cmp-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

table.cmp {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
  min-width: 640px;
  width: 100%;
}

table.cmp th,
table.cmp td {
  padding: 9px 10px;
  text-align: center;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

table.cmp thead th {
  background: var(--blue-deep);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  position: sticky;
  top: 0;
}

table.cmp .col-name {
  position: sticky;
  left: 0;
  z-index: 3;
  text-align: left;
  background: #fff;
  box-shadow: 2px 0 6px rgba(20, 34, 59, .06);
  min-width: 132px;
}

table.cmp thead .col-name {
  background: var(--blue-ink);
  z-index: 4;
}

table.cmp tbody tr:nth-child(even) td { background: #fafcff; }
table.cmp tbody tr:nth-child(even) td.col-name { background: #fafcff; }

table.cmp .pname {
  font-weight: 800;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

table.cmp .big {
  color: var(--cta);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

table.cmp .mini-cta {
  display: inline-block;
  background: var(--cta);
  color: #fff;
  font-weight: 800;
  font-size: 10.5px;
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
}

table.cmp .rk {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  margin-right: 5px;
  vertical-align: middle;
}

@keyframes swipe {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}