#future {
  margin-top: 0;
}

.future-grid {
  display: grid;
  background-image: url(../img/background.webp);
  background-size:cover;
}
.future-grid > * {
  grid-area: 1 / 1;
}

.future-grid > .future__inner {
  position: relative;
  place-self: center;
}

.future__inner {
padding: var(--space--4) 0;
}

/* 上部と下部の２行分確保 */
.future__container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-row-gap: var(--space--8);
  grid-template-areas:
    "future__hero"
    "future__content";
  width: 100%;
  align-items: center;
  color: var(--color--text);

}

.future__hero {
  grid-area: future__hero;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
  "future__hero-title"
  "future__hero_sub-title";
  width: 100%;
  align-items: center;
  justify-items: center;
  color: var(--color--text);
  gap: var(--space--2);
}

.future__hero-title {
  grid-area: future__hero-title;
  font-size: var(--font-size--2xl);
}
.future__hero-title span {
  color: var(--color--text-accent);
  font-weight: 600;
}
.future__hero_sub-title {
  grid-area: future__hero_sub-title;
  font-size: var(--font-size--lg);
}

.future__hero_sub-title {
  background: var(--gradation-color--bg);
  color: #fcfcfc;
  padding: 10px 20px;
  border-radius: var(--radius--full);
}

.future__content {
  grid-area: future__content;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "future__header"
    "future__grid";
  width: 100%;
  color: var(--color--text);
  gap: var(--space--6);
}

.future__header {
  grid-area: future__header;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-template-areas:
    "future__title"
    "future__lead";
  width: 100%;
  align-items: center;
  justify-items: center;
  row-gap: var(--space--2);
}
.future__title {
  grid-area: future__title;
  font-size: var(--font-size--xl);
}
.future__lead {
  grid-area: future__lead;
  font-size: var(--font-size--md);
}

.future__grid {
  grid-area: future__grid;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "future-card1 future-card2 future-card3";
  width: 100%;
  color: var(--color--text);
}
.future-card1 {
  grid-area: future-card1;
}
.future-card2 {
  grid-area: future-card2;
}
.future-card3 {
  grid-area: future-card3;
}
.future__background {
  width: 100%;
  height: stretch;
  aspect-ratio: 3 / 2;
}

.path-card__media img{
  aspect-ratio: 3 / 2;
}
.path-card {
  padding: var(--space--4);
}

.path-card__title {
  display: grid;
  justify-items: center;

}

@media (width <= 768px) {
  .future__grid {
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, auto);
    grid-template-areas:
      "future-card1"
      "future-card2"
      "future-card3";
    align-items: center;
    justify-content: center;
  }

  .path-card__media img {
    max-width: 500px;
    width: 100%;
  }
}

@media (width <= 620px) {
  .future__hero-title {
    font-size: var(--font-size--xl);
  }
  .future__hero_sub-title {
    font-size: var(--font-size--sm);
    line-height: 1;
  }

  .future__title {
    font-size: var(--font-size--lg);
  }

  .future__lead {
    font-size: var(--font-size--sm);
  }

}

@media (width <= 480px) {
  .future__container {
      grid-row-gap: var(--space--4);
  }

  .future__hero-title {
    font-size: var(--font-size--xl);
  }

  .future__hero_sub-title {
    font-size: var(--font-size--sm);
  }

  .future__title {
    font-size: var(--font-size--lg);
  }

  .future__lead {
    font-size: var(--font-size--sm);
  }
}