/* 事務所案内：パソコンの専用寸法と配置。左に写真、中央に表、右に地図。スマホの変更は../responsive.css。 */
/* このセクション固有の値（3列の幅の割合・表の見出しの幅） */
:where([data-section="access"][data-ui="shiraki"]) {
  --access-columns: 1fr 1.3fr 1fr;
  --access-label-width: 112px;
}

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

:where([data-section="access"][data-ui="shiraki"]) .access__layout {
  display: grid;
  grid-template-columns: var(--access-columns);
  align-items: center;
  gap: var(--space-card-gap);
}

:where([data-section="access"][data-ui="shiraki"]) .access__photo {
  overflow: hidden;
  border-radius: var(--radius-card);
}

:where([data-section="access"][data-ui="shiraki"]) .access__list {
  margin-block-start: var(--space-stack);
  border-block-start: var(--size-line) solid var(--color-line);
}

:where([data-section="access"][data-ui="shiraki"]) .access__list > div {
  display: grid;
  grid-template-columns: var(--access-label-width) minmax(0, 1fr);
  gap: var(--space-stack);
  padding-block: var(--space-small);
  border-block-end: var(--size-line) solid var(--color-line);
}

:where([data-section="access"][data-ui="shiraki"]) .access__list dt {
  font-weight: var(--weight-title);
}

:where([data-section="access"][data-ui="shiraki"]) .access__list address {
  font-style: normal;
}

:where([data-section="access"][data-ui="shiraki"]) .access__media {
  display: grid;
  gap: var(--space-small);
}

:where([data-section="access"][data-ui="shiraki"]) .access__map {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
}

:where([data-section="access"][data-ui="shiraki"]) .access__map-label {
  position: absolute;
  inset: 30% 14% auto auto;
  padding: var(--space-tiny) var(--space-small);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--font-size-small);
  font-weight: var(--weight-title);
  line-height: var(--line-heading);
}