@charset "UTF-8";
/* =====================
      title
===================== */
.page__sdgs {
  .sub-mv {
    background-image: url(/assets/img/sdgs/sp-sub-mv.webp);
  }
}

/* =====================
      sdgs-introduction
===================== */
.sdgs-introduction {
  background: url(/assets/img/sdgs/sp-sdgs-bg.webp) no-repeat center bottom / 100vw 166.41vw;
}
.sdgs-support {
  margin-bottom: 48rem;
}
.sdgs-support__image {
  --position: 70rem;
  display: grid;
  grid-template-rows: repeat(2, auto);
  align-items: center;
  row-gap: var(--position);
  position: relative;
  &::before,
  &::after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 40rem;
    height: 2rem;
    background-color: var(--color-list-border02);
    left: calc(50% - 40rem / 2);
    top: calc(31rem + var(--position) / 2);
    z-index: 1;
  }
  &::before {
    transform: rotate(45deg);
  }
  &::after {
    transform: rotate(-45deg);
  }
}
.corporate-logo__image,
.sdgs-logo__image {
  margin-inline: auto;
}
.corporate-logo__image {
  width: 296rem;
  aspect-ratio: 296 / 31;
}
.sdgs-logo__image {
  width: 269rem;
  aspect-ratio: 269 / 34;
}
.sdgs-support__text {
  font-size: 12rem;
  margin-top: 24rem;
}
.sdgs__image {
  width: 100%;
  aspect-ratio: 960 / 612;
}
.sdgs-introduction__text {
  margin-top: 24rem;
}

/* =====================
      initiative
===================== */
.initiative-item {
  border-bottom: var(--border) var(--color-list-border);
  padding-block: 40rem;
  &:first-of-type {
    border-top: var(--border) var(--color-list-border);
  }
  .sdgs-goal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: min-content;
    gap: 8rem;
  }
}
.sdgs-goal__icon {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.initiative-item__content {
  margin-bottom: 32rem;
}
.initiative-item__title {
  font-size: 22rem;
  line-height: 1.7;
  margin-top: 24rem;
  margin-bottom: 16rem;
}
.main-initiatives__title {
  margin-top: 16rem;
}
.initiative-item__image {
  width: 100%;
  aspect-ratio: 342 / 236;
}
