@charset "utf-8";
/* CSS Document */

/* ---------- Strengths ---------- */
.strengths {
  background: var(--color-bg-gray);
  padding:50px 0 200px;
}

.strengths__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--container);
  margin-inline: auto;
  /* padding-inline: var(--pad-inline); */
  display: flex;
  flex-direction: column;
 gap: clamp(64px, 10vw, 140px);
}

.strengths__item {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
}

.strengths__item--reverse {
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
}

.strengths__item--reverse .strengths__photo {
  order: -1;
}

.strengths__card {
  position: relative;
  color: var(--color-white);
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(var(--color-navy-light-rgb), 0.75),rgba(var(--color-navy-dark-rgb), 0.9));
}

.strengths__card--accent {
  background: linear-gradient(180deg, rgba(var(--color-red-light-rgb), 0.75),rgba(var(--color-red-dark-rgb), 0.9));
}

.strengths__num {
  position: absolute;
  top: 5px;
  left: 5px;
}

.strengths__heading {
	font-family: var(--font-title);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 800;
  margin: 0 0 0.8em;
	text-align: center;
}

.strengths__text {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.85;
  margin: 0;
}

.strengths__text:last-child {
  position: relative;
  margin: 3rem auto;
  padding: 3rem 0 0;
}

.strengths__text:last-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--color-blue), var(--color-red));
}

.strengths__photo {
  margin-inline-start: -90px;   /* 横に90px重ねる */
  transform: translateY(70px);  /* 縦に70px下へずらす */
}

.strengths__item--reverse .strengths__photo {
  margin-inline-end: -90px;   /* 横に90px重ねる */
  margin-left: 0;
}
.strengths__card  { z-index: 2; } /* 手前 */
.strengths__photo { z-index: 1; } /* 奥 */

.strengths__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (width <= 760px) {
.strengths {
  padding:50px 0;
}

  .strengths__item,
  .strengths__item--reverse {
    grid-template-columns: 1fr;
  }
	.strengths__heading {
		margin: 0 auto 1rem;
	}
  .strengths__item--reverse .strengths__photo {
    order: 0;
  }

  .strengths__photo {
    aspect-ratio: 16 / 9;
  }
	.strengths__photo,
  .strengths__item--reverse .strengths__photo {
    margin-inline: 0;
    transform: none;
  }

}