/* ============================================
   c-heading-03 - Icon Text Heading
   アイコン + テキスト（左寄せ）
   ::before = ピンク円, ::after = 白アイコン
   ============================================ */
.c-heading-03 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-wide);
  position: relative;
  padding-left: calc(var(--space-3-xl) + var(--space-sm));
  margin-block-start: var(--space-6-xl) !important;
  margin-block-end: var(--space-3-xl) !important;
}

/* ピンク円 */
.c-heading-03::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-3-xl);
  height: var(--space-3-xl);
  background-color: var(--color-primary);
  border-radius: 50%;
}

/* 白アイコン */
.c-heading-03::after {
  content: "";
  position: absolute;
  left: calc((var(--space-3-xl) - 16px) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1);
}

/* --- Icon modifiers --- */
.c-heading-03--price::after {
  background-image: url("../../images/icon/icon--price-01.svg");
}

.c-heading-03--treatment::after {
  background-image: url("../../images/icon/icon--treatment-01.svg");
}

.c-heading-03--doctor::after {
  background-image: url("../../images/icon/icon--doctor-01.svg");
}

.c-heading-03--risk::after {
  background-image: url("../../images/icon/icon--risk-01.svg");
}

.c-heading-03--time::after {
  background-image: url("../../images/icon/icon--time-01.svg");
}

@container (max-width: 599px) {
  .c-heading-03 {
    font-size: var(--font-size-lg);
    padding-left: calc(var(--space-2-xl) + var(--space-xs));
  }

  .c-heading-03::before {
    width: var(--space-2-xl);
    height: var(--space-2-xl);
  }

  .c-heading-03::after {
    left: calc((var(--space-2-xl) - 13px) / 2);
    width: 13px;
    height: 13px;
  }
}