@charset "utf-8";
@import url("./common.css");

.value-section {
  border-bottom: 1px solid var(--color-primary); /* 薄いグレーの線 */
  padding-bottom: 30px; /* 線との間隔 */
}

.value-section:not(:first-child) {
  margin-top: 4%; /* 次のセクションとの間隔 */
}

.value-card {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: start;
  gap: 20px;
}

.value-card-text {
  flex: 3;
}

.value-card-image {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-card-image img {
  width: 100%;
  max-width: 400px;
}

.value__heading {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: var(--font-size-pc-large);
  margin: 0;
}

.value-subtitle {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: var(--font-size-pc-middle);
  margin: 0;
}

.value__description-area {
  margin-top: 16px;
}

.value-description {
  margin: 8px 0 0;
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  font-size: var(--font-size-pc-base);
}

.value-cta-margin {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}

.value-note {
  font-size: var(--font-size-pc-note);
  margin-bottom: 0;
}

/*  ~ 768px */
@media (768px > width) {
  .value-card {
    flex-direction: column;
  }
}