/* 料金：パソコンの専用寸法と配置。スマホの変更は../responsive.css。 */
/* このセクション固有の値（表の列幅、スマホのカードのラベル幅） */
:where([data-section="prices"][data-ui="lumiere"]) {
  --prices-option-columns: 1.7fr 0.4fr 1.3fr;
  --prices-option-label-width: 0.7fr;
  --prices-label-width-sp: 5.5em;
}

:where([data-section="prices"][data-ui="lumiere"]).prices {
  padding-block: var(--space-section);
  background: var(--color-paper);
}

:where([data-section="prices"][data-ui="lumiere"]) .split-layout .button {
  margin-block-start: var(--space-stack);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  font-size: var(--font-size-body);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-table thead {
  background: var(--color-warm);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-table :is(th, td) {
  padding: var(--space-stack) var(--space-small);
  border-block-end: var(--size-line) solid var(--color-line);
  font-weight: var(--weight-body);
  text-align: start;
}

:where([data-section="prices"][data-ui="lumiere"]) .price-table thead th {
  padding-block: var(--space-small);
  text-align: center;
}

:where([data-section="prices"][data-ui="lumiere"]) .price-table tbody td:is(:nth-child(2), :nth-child(3)) {
  text-align: center;
}

:where([data-section="prices"][data-ui="lumiere"]) .price-table tbody th {
  font-size: var(--font-size-lead);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-option {
  display: grid;
  grid-template-columns: var(--prices-option-label-width) 2.6fr;
  margin-block-start: var(--space-stack);
  background: var(--color-surface);
  font-size: var(--font-size-body);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-option__label {
  display: grid;
  place-items: center;
  padding: var(--space-small);
  background: var(--color-warm);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-option__list {
  padding: var(--space-small);
  list-style: none;
}

:where([data-section="prices"][data-ui="lumiere"]) .price-option__list li {
  display: grid;
  grid-template-columns: var(--prices-option-columns);
  gap: var(--space-small);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-option__list li span:first-child {
  padding-inline-start: 1em;
  text-indent: -1em;
  font-size: var(--font-size-lead);
}

:where([data-section="prices"][data-ui="lumiere"]) .price-option + .prices__note {
  margin-block-start: var(--space-small);
}