section.resolution-grid {
  margin-top: 0px;
}

.resolution-grid {
  display: grid;
  background-color: var(--color--bg--2);
}
.resolution-grid > * {
  grid-area: 1 / 1;
}
.resolution-grid > .resolution__inner {
  position: relative;
  place-self: center;
}
.resolution__inner {
  padding: var(--space--4) 0;
}

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

.resolution__hero {
  grid-area: resolution__hero;
  text-align: center;
}

.resolution__cards-grid {
  grid-area: resolution__cards-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  gap: var(--space--2);
  padding: var(--space--4);
}

.resolution__card.small-step {
  grid-area: 1 / 1 / 3 / 4;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1920px;
}
.resolution__card.habit {
  grid-area: 1 / 4 / 2 / 5;
  position: relative;
  background-image: url(../img/section4-bg.webp);
  background-size: cover;
  border-radius: var(--radius--lg);
  width: 100%;
  height: 100%;
}
.resolution__card.support {
  grid-area: 2 / 4 / 3 / 5;
  position: relative;
  background-image: url(../img/section4-bg.webp);
  background-size: cover;
  border-radius: var(--radius--lg);
  width: 100%;
  height: 100%;
}

.resolution__cards-grid img {
  border-radius: var(--space--8);
  width: 100%;
}
.resolution__card-media {
  position: relative;
}
.resolution__card-media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* オーバーレイを作成 */
  background: var(--color--overlay);
  border-radius: var(--space--8);
}
.resolution__card-media img {
  width: 100%;
  height: 100%;
}

.resolution__card.habit::before,
.resolution__card.support::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: var(--color--overlay);
  border-radius: var(--radius--lg);
}

.resolution__eyebrow {
  font-size: var(--font-size--lg);
  font-weight: 600;
  color: var(--color--text-accent);

}
.resolution__title {
  font-size: var(--font-size--2xl);
  font-weight: 600;

}
.resolution__title span {
  background-image: var(--gradation--text-marker--3);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;
}

.resolution__lead {
  font-size: var(--font-size--xl);
  font-weight: 500;
  margin-top: var(--space--4);
}
.resolution__lead span {
  background-image: var(--gradation--text-marker--1);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;
}

.small-step .resolution__card-contents {
  position: absolute;
  top: 15%;
  left: 10%;
  font-size: var(--font-size--xl);
}

.resolution__card-title {
  font-weight: 500;

}

.small-step__title-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "small-step--row1"
    "small-step--row2";
  width: 100%;
}

.small-step--row1 {
  grid-area: small-step--row1;
  font-size: var(--font-size--xl);
}

.small-step--row2 {
  grid-area: small-step--row2;
}
.small-step--row21 {
  font-size: var(--font-size--2xl);
  color: var(--color--text-accent);
}
.small-step--row22 {
  font-size: var(--font-size--xl);
}

.resolution__card-wrapper {
  margin-top: 5%;
}
.resolution__card-content {
  font-size: var(--font-size--xl);

}
.small-step--row3 {
  line-height: 2;
}

.small-step--row3 span {
  font-size: var(--font-size--2xl);
  font-weight: 600;
  color: var(--color--text-accent);
  margin-top: 5%;

  text-emphasis-style: dot;  /* 点の種類: dot(点), circle(丸) */
  text-emphasis-position: over;  /* 点の位置: under(下), over(上) */
  text-emphasis-color: var(--color--text-dot);  /* 点の色（省略すると文字色と同じ） */
}
.small-step--row4 {
margin-top: 5%;
line-height: 2;
}
.small-step--row4 span {
  font-size: var(--font-size--2xl);
  font-weight: 600;
  color: var(--color--text-accent);
}

.habit .resolution__card-contents {
  position: absolute;
  top: 7%;
  left: 5%;
  font-size: var(--font-size--xl);
}
.habit__title-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "habit--row1"
    "habit--row2";
  width: 100%;
}
.habit--row1 {
  font-size: var(--font-size--lg);
  grid-area: habit--row1;
}
.habit--row2 {
  grid-area: habit--row2;
  font-size: var(--font-size--lg);
  color: var(--color--text-accent);
  font-weight: 700;
}
.habit .resolution__card-content {
  font-size: var(--font-size--lg);
  margin-top: 8%;
  line-height: 2;
}

.habit .resolution__card-content span {
  background-image: var(--gradation--text-marker--1);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;
}

.support .resolution__card-contents {
  position: absolute;
  top: 7%;
  left: 5%;
  font-size: var(--font-size--xl);
}
.support .support__title-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, auto);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "support--row1"
    "support--row2";
  width: 100%;
}
.support__title-grid .support--row1 {
  grid-area: support--row1;
  font-size: var(--font-size--lg);

}
.support__title-grid .support--row2 {
  grid-area: support--row2;
  font-size: var(--font-size--lg);
  color: var(--color--text-accent);
  font-weight: 700;
}
.support .resolution__card-content {
  font-size: var(--font-size--lg);
  margin-top: 8%;
  line-height: 2;
}

.support .resolution__card-content span {
  background-image: var(--gradation--text-marker--1);
  background-position: left bottom;
  background-size: 100% 0.6em;
  background-repeat: no-repeat;
}

@media (width <= 1200px) {
  .resolution__cards-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }

  .resolution__container {
    gap: var(--space--4);
  }

  .resolution__card.small-step {
    grid-area: 1 / 1 / 5 / 7;

  }
  .resolution__card.habit {
    grid-area: 5 / 1 / 7 / 4;
  }
  .resolution__card.support {
    grid-area: 5 / 4 / 7 / 7;
  }

  .small-step--row3 {
    font-size: var(--font-size--lg);
  }

  .small-step--row4 {
    font-size: var(--font-size--lg);
    margin-top: 3%;
  }

  .small-step .resolution__card-contents {
    top: 10%;
    left: 7%;
  }
}

/* この範囲のみ */
@media (1200px < width <= 1440px) {
  .small-step--row3 {
    line-height: 1.5;
  }
  .small-step--row4 {

    line-height: 1.5;
  }

  .habit .resolution__card-content {
    margin-top: 4%;
    line-height: 1.5;
  }
  .support .resolution__card-content {
    margin-top: 4%;
    line-height: 1.5;
  }
}

@media (width <= 900px) {
  .resolution__card-wrapper {
    margin-top: 2%;
  }
  .habit .resolution__card-contents {
    font-size: var(--font-size--lg);
  }
  .habit .resolution__card-content {
    font-size: var(--font-size--sm);
    margin-top: 2%;
    line-height: 1.5;
  }
  .support .resolution__card-contents {
    font-size: var(--font-size--lg);
  }
  .support .resolution__card-content {
    font-size: var(--font-size--sm);
    margin-top: 2%;
    line-height: 1.5;
  }

  .small-step--row1 {
    font-size: var(--font-size--lg);
  }
  .small-step--row2 {
    font-size: var(--font-size--xl);
  }
  .small-step--row3 {
    font-size: var(--font-size--md);
    margin-top: 4%;
    line-height: 2;
  }
  .small-step--row3 span {
    font-size: var(--font-size--lg);
  }
  .small-step--row4 {
    font-size: var(--font-size--md);
    margin-top: 4%;
    line-height: 2;
  }
  .small-step--row4 span {
    font-size: var(--font-size--lg);
  }
}

@media (width <= 668px) {
  .resolution__eyebrow {
    font-size: var(--font-size--lg);
  }

  .resolution__title {
    font-size: var(--font-size--xl);
  }
  .resolution__lead {
    font-size: var(--font-size--lg);
    margin-top: var(--space--2);
  }

  .small-step .resolution__card-title {
  font-size: var(--font-size--md);
  }

  .small-step--row3 {

    line-height: 1.5;
  }
  .small-step--row4 {
    line-height: 1.5;
  }

  .habit__title-grid {
    line-height: 1.3;
  }
  .habit .habit--row1 {
    font-size: var(--font-size--sm);
  }
  .habit .habit--row2 {
    font-size: var(--font-size--sm);
  }
  .habit .resolution__card-content {
    font-size: var(--font-size--sm);
    line-height: 1.3;
  }

  .support__title-grid {
    line-height: 1.3;
  }
  .support .support--row1 {
    font-size: var(--font-size--sm);
  }
  .support .support--row2 {
    font-size: var(--font-size--sm);
  }
  .support .resolution__card-title {
    font-size: var(--font-size--sm);
  }
  .support .resolution__card-content {
    font-size: var(--font-size--sm);
    line-height: 1.3;
  }

}

@media (width <= 500px) {
  .resolution__eyebrow {
    font-size: var(--font-size--md);
    text-align: center;
  }
  .resolution__title {
    font-size: var(--font-size--xl);
  }
  .resolution__lead {
    font-size: var(--font-size--md);
  }

  .small-step .resolution__card-contents {
    top: 5%;
  }

  .small-step .resolution__card-title {
    font-size: var(--font-size--md);
  }
  .small-step--row1 {
    font-size: var(--font-size--md);
  }
  .small-step--row21 {
    font-size: var(--font-size--lg);
  }
  .small-step--row22 {
    font-size: var(--font-size--md);
  }

  .small-step--row3 {
    font-size: var(--font-size--sm);
    margin-top: -3%;
    line-height: 1.5;
  }
  .small-step--row3 span {
    font-size: var(--font-size--md);
  }
  .small-step--row4 {
    font-size: var(--font-size--sm);
    margin-top: 3%;
    line-height: 1.5;
  }
  .small-step--row4 span {
    font-size: var(--font-size--md);
  }

  .habit__title-grid {
    font-size: var(--font-size--sm);
    line-height: 1;
  }

  .habit .resolution__card-content {
    font-size: var(--font-size--sm);
    line-height: 1;
  }

  .support__title-grid {
    font-size: var(--font-size--sm);
    line-height: 1;
  }
  .support .resolution__card-content {
    font-size: var(--font-size--sm);
    line-height: 1;
  }

}

@media (width <= 400px) {
  .small-step .resolution__card-contents {
    top: 2%;
  }

  .small-step .resolution__card-title {
    font-size: var(--font-size--sm);
  }
  .small-step--row1 {
    font-size: var(--font-size--sm);
  }
  .small-step--row2 {
    font-size: var(--font-size--md);
  }

  .small-step--row3 {
    font-size: var(--font-size--xs);
    line-height: 1.2;
  }
  .small-step--row3 span {
    font-size: var(--font-size--sm);
  }

  .small-step--row4 {
    font-size: var(--font-size--xs);
    margin-top: 2%;
    line-height: 1.2;
  }
  .small-step--row4 span {
    font-size: var(--font-size--sm);
  }

  .habit .habit--row1,
  .habit .habit--row2 {
    font-size: var(--font-size--xs);
  }

  .habit .resolution__card-content {
    font-size: var(--font-size--xs);
    line-height: 1.2;
  }

  .support__title-grid {
    line-height: 1;
  }
  .support .support--row1,
  .support .support--row2 {
    font-size: var(--font-size--xs);
  }
  .support .resolution__card-content {
    font-size: var(--font-size--xs);
    line-height: 1.2;
  }
}