/* サービス案内：パソコンの専用寸法と配置。スマホの変更は../responsive.css。 */
/* このセクション固有の値（小さいカードの写真の幅・アイコンの大きさ） */
:where([data-section="services"][data-ui="nexa"]) {
  --services-photo-width: 44%;
  --services-icon-size: 56px;
  --services-photo-ratio-sp: 16 / 9;
}

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

/* 左に見出しと大きいカード、右にボタンと小さいカード3つ */
:where([data-section="services"][data-ui="nexa"]) .services__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--space-card-gap);
  row-gap: var(--space-heading);
}

:where([data-section="services"][data-ui="nexa"]) .services__button {
  justify-self: end;
  align-self: start;
}

:where([data-section="services"][data-ui="nexa"]) .services__list {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: var(--space-stack);
}

:where([data-section="services"][data-ui="nexa"]) .service {
  display: flex;
  overflow: hidden;
}

:where([data-section="services"][data-ui="nexa"]) .service__content {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-small);
  padding: var(--space-stack);
}

:where([data-section="services"][data-ui="nexa"]) .service__head {
  display: flex;
  align-items: center;
  gap: var(--space-stack);
  color: var(--color-primary);
}

:where([data-section="services"][data-ui="nexa"]) .service__number {
  font-family: var(--font-latin);
  font-size: var(--font-size-number);
  font-weight: var(--weight-title);
  line-height: var(--line-tight);
}

:where([data-section="services"][data-ui="nexa"]) .service__title {
  font-family: var(--font-title);
  font-size: var(--font-size-card);
  font-weight: var(--weight-title);
  line-height: var(--line-heading);
}

:where([data-section="services"][data-ui="nexa"]) .service__body {
  color: var(--color-text-muted);
}

:where([data-section="services"][data-ui="nexa"]) .service__photo {
  flex: none;
  width: var(--services-photo-width);
}

/* 01の大きいカード（写真の上に文字） */
:where([data-section="services"][data-ui="nexa"]) .service--feature {
  position: relative;
  min-width: 0;
  border-radius: var(--radius-card);
  background: var(--color-background);
  color: var(--color-text);
}

:where([data-section="services"][data-ui="nexa"]) .service--feature .service__photo {
  position: absolute;
  inset: 0;
  width: 100%;
}

:where([data-section="services"][data-ui="nexa"]) .service--feature .service__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-background) 30%, var(--color-transparent));
}

:where([data-section="services"][data-ui="nexa"]) .service--feature .service__content {
  position: relative;
  max-width: 60%;
  padding: var(--space-card);
}

:where([data-section="services"][data-ui="nexa"]) .service__catch {
  color: var(--color-text);
  font-size: var(--font-size-lead);
  font-weight: var(--weight-title);
}

:where([data-section="services"][data-ui="nexa"]) .service--feature .text-link {
  justify-self: start;
  margin-block-start: var(--space-small);
}

/* 小さいカードは、アイコンを文字の幅の中央に */
:where([data-section="services"][data-ui="nexa"]) .services__list .service__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

:where([data-section="services"][data-ui="nexa"]) .services__list .service__number {
  justify-self: start;
}

/* 小さいカードのアイコン */
:where([data-section="services"][data-ui="nexa"]) .services__list .service__head .icon {
  width: var(--services-icon-size);
  height: var(--services-icon-size);
}

/* カード全体をリンクにする形（03） */
:where([data-section="services"][data-ui="nexa"]) .service__link {
  display: flex;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

:where([data-section="services"][data-ui="nexa"]) .service--link {
  transition: border-color var(--motion-duration) var(--motion-easing);
}

:where([data-section="services"][data-ui="nexa"]) .service--link:has(.service__link:is(:hover, :focus-visible)) {
  border-color: var(--color-primary);
}

:where([data-section="services"][data-ui="nexa"]) .service__link:is(:hover, :focus-visible) .service__title {
  color: var(--color-primary);
}