/* ============================================
   c-heading-08 - Dash Prefix Heading
   ダッシュ + テキスト
   ============================================ */
.c-heading-08 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wide);
  margin-block-start: var(--space-6-xl) !important;
  margin-block-end: var(--space-3-xl) !important;
}

.c-heading-08::before {
  content: "";
  width: var(--space-2-xl);
  height: 2px;
  flex-shrink: 0;
  background-color: var(--color-primary);
}

@container (max-width: 599px) {
  .c-heading-08 {
    font-size: var(--font-size-lg);
  }

  .c-heading-08::before {
    width: var(--space-xl);
  }
}