/* K's Blocks: editorial simple table ---------------------------------- */
.wp-block-table.is-style-ks-simple,
.wp-block-table.is-style-ks-header-row,
.wp-block-table.is-style-ks-first-column {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 30px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.wp-block-table.is-style-ks-simple table,
.wp-block-table.is-style-ks-header-row table,
.wp-block-table.is-style-ks-first-column table {
  width: 100%;
  min-width: 520px;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  color: var(--ks-text, #31343a);
  background: var(--ks-surface, #ffffff);
  font-size: 14px;
  line-height: 1.65;
}

.wp-block-table.is-style-ks-simple table th,
.wp-block-table.is-style-ks-simple table td,
.wp-block-table.is-style-ks-header-row table th,
.wp-block-table.is-style-ks-header-row table td,
.wp-block-table.is-style-ks-first-column table th,
.wp-block-table.is-style-ks-first-column table td {
  box-sizing: border-box;
  min-width: 160px;
  padding: 12px 14px;
  border: 1px solid var(--ks-border, #e3e7ef);
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
}

.wp-block-table.is-style-ks-simple table th,
.wp-block-table.is-style-ks-header-row table th,
.wp-block-table.is-style-ks-first-column table th {
  font-weight: 700;
}

.wp-block-table.is-style-ks-header-row table thead th,
.wp-block-table.is-style-ks-header-row table tbody tr:first-child > * {
  background: color-mix(in srgb, var(--ks-primary, #223070) 8%, var(--ks-surface, #ffffff));
  color: var(--ks-primary, #223070);
  font-weight: 700;
}

/* First-column tables use the same 142px minimum as comparison tables,
 * but the column may grow when its label needs more room. */
.wp-block-table.is-style-ks-first-column table tr > *:first-child {
  width: 1%;
  min-width: 142px;
  background: color-mix(in srgb, var(--ks-primary, #223070) 8%, var(--ks-surface, #ffffff));
  color: var(--ks-primary, #223070);
  font-weight: 700;
  white-space: nowrap;
}

.wp-block-table.is-style-ks-simple figcaption,
.wp-block-table.is-style-ks-header-row figcaption,
.wp-block-table.is-style-ks-first-column figcaption {
  margin-top: 8px;
  color: var(--ks-muted, #667085);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
}

/* Comparison table follows the same policy as simple tables:
 * preserve readable column widths on desktop and mobile, then scroll. */
.ks-comparison-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.ks-comparison {
  table-layout: auto;
}

.ks-comparison tr > *:not(:first-child) {
  min-width: 205px;
}

/* 142px is only the minimum. Long labels such as "こんな人におすすめ"
 * stay on one line and make the first column wider instead of wrapping. */
.ks-comparison__corner,
.ks-comparison__row-label {
  width: 1%;
  min-width: 142px;
}

.ks-comparison__row-label {
  white-space: nowrap;
}

.ks-comparison__product-title,
.ks-comparison__value {
  word-break: normal;
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  .wp-block-table.is-style-ks-simple,
  .wp-block-table.is-style-ks-header-row,
  .wp-block-table.is-style-ks-first-column {
    margin: 26px 0;
  }

  .wp-block-table.is-style-ks-simple table,
  .wp-block-table.is-style-ks-header-row table,
  .wp-block-table.is-style-ks-first-column table {
    min-width: 520px;
    font-size: 13px;
  }

  .wp-block-table.is-style-ks-simple table th,
  .wp-block-table.is-style-ks-simple table td,
  .wp-block-table.is-style-ks-header-row table th,
  .wp-block-table.is-style-ks-header-row table td,
  .wp-block-table.is-style-ks-first-column table th,
  .wp-block-table.is-style-ks-first-column table td {
    min-width: 150px;
    padding: 10px 12px;
  }

  .wp-block-table.is-style-ks-first-column table tr > *:first-child {
    width: 1%;
    min-width: 142px;
    white-space: nowrap;
  }
}