/* コンセプト：パソコンの専用寸法と配置。スマホの変更は../responsive.css。 */
/* このセクション固有の値（-sp はスマホ用） */
:where([data-section="concept"][data-ui="sui"]) {
  /* スマホで施術室写真の枠が大きくなりすぎないための上限 */
  --concept-room-max-height-sp: 672px;
}

:where([data-section="concept"][data-ui="sui"]).concept {
  padding-block: var(--space-section);
  background: var(--color-paper);
  overflow: hidden;
}

:where([data-section="concept"][data-ui="sui"]) .concept__layout {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: var(--space-card-gap);
}

:where([data-section="concept"][data-ui="sui"]) .concept__copy {
  position: relative;
  z-index: 2;
  padding-block-start: var(--space-small);
}

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

:where([data-section="concept"][data-ui="sui"]) .concept__copy .section-heading__lead {
  margin-block: var(--space-stack);
}

:where([data-section="concept"][data-ui="sui"]) .concept__hands {
  margin-block-start: var(--space-card-gap);
  aspect-ratio: 2.4;
}

:where([data-section="concept"][data-ui="sui"]) .concept__hands img {
  object-position: 50% 60%;
}

:where([data-section="concept"][data-ui="sui"]) .concept__room {
  position: relative;
  z-index: 1;
  aspect-ratio: 0.95;
  border-radius: var(--radius-arch);
  overflow: hidden;
}

:where([data-section="concept"][data-ui="sui"]) .concept__wordmark {
  position: absolute;
  z-index: 3;
  isolation: isolate;
  inset-inline-start: 46%;
  inset-block-end: 0;
  color: var(--color-wordmark);
  font-family: var(--font-latin);
  font-size: var(--font-size-wordmark);
  line-height: var(--line-tight);
  opacity: 1;
}

:where([data-section="concept"][data-ui="sui"]) .concept__wordmark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--color-paper);
}