/* 医師・スタッフ：パソコンの専用寸法と配置。スマホの変更は../responsive.css。 */
/* このセクション固有の値（写真帯の高さ。-sp はスマホ用） */
:where([data-section="staff"][data-ui="sui"]) {
  --staff-band-height: 460px;
  --staff-band-height-sp: 352px;
  --staff-backdrop-opacity: 0.25;
}

:where([data-section="staff"][data-ui="sui"]) .staff__backdrop {
  opacity: var(--staff-backdrop-opacity);
  position: absolute;
  inset: 0;
}

:where([data-section="staff"][data-ui="sui"]) .staff__band {
  position: relative;
  min-height: var(--staff-band-height);
  background: var(--color-warm);
}

:where([data-section="staff"][data-ui="sui"]) .staff__band-layout {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: var(--space-grid);
}

:where([data-section="staff"][data-ui="sui"]) .staff__portrait {
  position: relative;
  height: var(--staff-band-height);
  border-radius: 0 var(--radius-photo) 0 0;
  overflow: hidden;
}

:where([data-section="staff"][data-ui="sui"]) .staff__portrait img {
  object-position: 50% 25%;
}

:where([data-section="staff"][data-ui="sui"]) .staff__portrait figcaption {
  position: absolute;
  inset-inline-start: var(--space-small);
  inset-block-end: var(--space-small);
  padding-inline: var(--space-small);
  background: var(--color-surface);
  font-size: var(--font-size-small);
}

:where([data-section="staff"][data-ui="sui"]) .staff__band .section-heading__eyebrow {
  margin-block-end: var(--space-stack);
}

:where([data-section="staff"][data-ui="sui"]) .staff__band-lead {
  margin-block: var(--space-stack);
  color: var(--color-text-muted);
}

:where([data-section="staff"][data-ui="sui"]) .staff__profile {
  padding-block: var(--space-section);
}

:where([data-section="staff"][data-ui="sui"]) .staff__team {
  margin-block-start: var(--space-grid);
  padding-block-start: var(--space-stack);
  border-block-start: var(--size-line) solid var(--color-line);
  color: var(--color-primary);
  font-family: var(--font-latin);
  font-size: var(--font-size-card);
  letter-spacing: var(--track-eyebrow);
}

:where([data-section="staff"][data-ui="sui"]) .staff__details {
  padding-block-start: var(--space-card-gap);
  border-block-start: var(--size-line) solid var(--color-line);
}

:where([data-section="staff"][data-ui="sui"]) .staff__details .section-heading__eyebrow {
  margin-block-end: var(--space-small);
}

:where([data-section="staff"][data-ui="sui"]) .staff__role {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
}

:where([data-section="staff"][data-ui="sui"]) .staff__name {
  font-family: var(--font-title);
  font-size: var(--font-size-heading);
  font-weight: var(--weight-title);
}

:where([data-section="staff"][data-ui="sui"]) .staff__latin {
  margin-block: var(--space-small) var(--space-heading);
  color: var(--color-primary);
  font-family: var(--font-title);
  font-size: var(--font-size-body);
  font-weight: var(--weight-title);
  letter-spacing: var(--track-heading);
}

:where([data-section="staff"][data-ui="sui"]) .staff__message {
  font-family: var(--font-title);
  font-size: var(--font-size-card);
}

:where([data-section="staff"][data-ui="sui"]) .staff__history {
  margin-block-start: var(--space-heading);
  padding-block-start: var(--space-stack);
  border-block-start: var(--size-line) solid var(--color-line);
  color: var(--color-text-muted);
}

:where([data-section="staff"][data-ui="sui"]) .staff__history h3 {
  margin-block-end: var(--space-stack);
  font-family: var(--font-title);
  font-size: var(--font-size-lead);
  font-weight: var(--weight-title);
}

:where([data-section="staff"][data-ui="sui"]) .staff__history ul {
  list-style: none;
}

:where([data-section="staff"][data-ui="sui"]) .staff__note {
  grid-column: 1 / -1;
}