/* ------------------------------------------------------------
   1) テーブル本体
   border-collapse がテーマ側で separate にされていると
   セル枠が出ないことがあるため、明示的に collapse を強制。
------------------------------------------------------------ */
table.svc-table,
.elementor table.svc-table,
.elementor-widget-html table.svc-table {
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  font-size: .95rem;
  line-height: 1.7;
}

/* 行の縞模様(zebra striping)を無効化 ------------------------ */
table.svc-table tr,
.elementor table.svc-table tr,
.elementor table.svc-table tbody tr:nth-child(odd),
.elementor table.svc-table tbody tr:nth-child(even) {
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
}

/* ------------------------------------------------------------
   2) セル共通(枠線)
   var() には必ず第2引数のフォールバックを入れています。
   変数が解決できない環境でも確実に色が出ます。
------------------------------------------------------------ */
table.svc-table th,
table.svc-table td,
.elementor table.svc-table th,
.elementor table.svc-table td,
.elementor-widget-html table.svc-table th,
.elementor-widget-html table.svc-table td {
  padding: .9em 1em !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: var(--svc-border, #dcdcdc) !important;
  text-align: left !important;
  vertical-align: top !important;
  background-color: transparent !important;
  background-image: none !important;
  word-break: break-word;
}

/* ------------------------------------------------------------
   3) 見出しセル(背景色)
   background ショートハンドはテーマの background-image 指定に
   負けることがあるため、色と画像を分けて指定します。
------------------------------------------------------------ */
table.svc-table thead th,
.elementor table.svc-table thead th,
.elementor-widget-html table.svc-table thead th {
  background-color: var(--svc-bg-head, #f4f2ee) !important;
  background-image: none !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

table.svc-table tbody th[scope="row"],
.elementor table.svc-table tbody th[scope="row"],
.elementor-widget-html table.svc-table tbody th[scope="row"] {
  background-color: var(--svc-bg-soft, #faf9f7) !important;
  background-image: none !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

/* 料金表の金額列を折り返さない ------------------------------- */
table.svc-table--fee td:last-child,
.elementor table.svc-table--fee td:last-child {
  white-space: nowrap;
}

/* ------------------------------------------------------------
   4) 変数のフォールバック定義
   .svc の外に  を置いた場合や、
   .svc ラッパーが失われている場合の保険として
   :root にも同じ変数を定義しておきます。
------------------------------------------------------------ */
:root {
  --svc-text: #333;
  --svc-border: #dcdcdc;
  --svc-bg-head: #f4f2ee;
  --svc-bg-soft: #faf9f7;
  --svc-accent: #8a7a5c;
}

/* ------------------------------------------------------------
   5) スマートフォン表示(カード化)
   上の !important 指定を打ち消さないよう、
   モバイル側でも同じ強さで指定し直しています。
------------------------------------------------------------ */
@media screen and (max-width: 767px) {

  table.svc-table,
  table.svc-table thead,
  table.svc-table tbody,
  table.svc-table tr,
  table.svc-table th,
  table.svc-table td,
  .elementor table.svc-table,
  .elementor table.svc-table thead,
  .elementor table.svc-table tbody,
  .elementor table.svc-table tr,
  .elementor table.svc-table th,
  .elementor table.svc-table td {
    display: block !important;
    width: 100% !important;
  }

  table.svc-table thead,
  .elementor table.svc-table thead {
    display: none !important;
  }

  table.svc-table tr,
  .elementor table.svc-table tr {
    margin-bottom: 1em !important;
    border: 1px solid var(--svc-border, #dcdcdc) !important;
  }

  table.svc-table th,
  table.svc-table td,
  .elementor table.svc-table th,
  .elementor table.svc-table td {
    border-width: 0 0 1px 0 !important;
    border-style: solid !important;
    border-color: #ececec !important;
  }

  table.svc-table tr > *:last-child,
  .elementor table.svc-table tr > *:last-child {
    border-bottom-width: 0 !important;
  }

  table.svc-table tbody th[scope="row"],
  .elementor table.svc-table tbody th[scope="row"] {
    background-color: var(--svc-bg-head, #f4f2ee) !important;
    white-space: normal !important;
  }

  table.svc-table td[data-label]::before,
  .elementor table.svc-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .2em;
    font-size: .78rem;
    font-weight: 600;
    color: var(--svc-accent, #8a7a5c);
  }

  table.svc-table--fee td:last-child,
  .elementor table.svc-table--fee td:last-child {
    white-space: normal !important;
  }
}