/* ============================================
   s-table-07 — 比較テーブル（自施術列ハイライト）
   Figma: 施術詳細「他の施術との比較」
   flexible-table-block の figure に className="s-table-07" を付与。
   2列目 = 自施術（当ページの施術）として強調表示する。
   ============================================ */

.s-table-07 {
  overflow-x: auto;
}

.s-table-07 table {
  width: 100%;
  border-collapse: collapse;
}

.s-table-07 th,
.s-table-07 td {
  padding: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-md);
  text-align: center;
  vertical-align: middle;
}

/* データセルは左寄せ（ヘッダー行は中央のまま） */
.s-table-07.s-table-07.s-table-07 > table tbody th,
.s-table-07.s-table-07.s-table-07 > table tbody td {
  text-align: left;
}

.s-table-07 thead th {
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-table-header);
  color: var(--color-white);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

/* テーマのftb統一CSS（クラス3連）より優先させるため同イディオムで詳細度を確保 */
.s-table-07.s-table-07.s-table-07 > table thead th:first-child {
  background: var(--color-table-header-light);
}

.s-table-07.s-table-07.s-table-07 > table thead th:nth-child(2) {
  background: var(--color-primary);
}

.s-table-07.s-table-07.s-table-07 > table tbody td:nth-child(2) {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-medium);
}

/* --- SP: 横スクロール＋スクロールヒント --- */
@media (max-width: 767px) {
  .s-table-07 {
    position: relative;
  }

  .s-table-07 table {
    min-width: 72rem;
  }

  .s-table-07::before {
    content: "横にスクロールできます →";
    position: sticky;
    left: 0;
    display: inline-block;
    margin-bottom: var(--space-xs);
    padding: var(--space-2-xs) var(--space-md);
    background: var(--color-text);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-2-xs);
    line-height: var(--line-height-none);
    animation: s-table-07-hint 4.5s ease-in-out 1 forwards;
  }
}

@keyframes s-table-07-hint {
  0%, 30%, 70% {
    transform: translateX(0);
    opacity: 1;
  }
  15%, 50% {
    transform: translateX(var(--space-xs));
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}