/* ============================================
   c-heading-10 - Short Accent Underline
   テキスト下に短いアクセントライン（中央）

   構造: <h2 class="c-heading-10">見出しテキスト</h2>
   ============================================ */
.c-heading-10 {
  text-align: center;
  font-size: var(--font-size-2-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-wide);
  padding-bottom: var(--space-xl);
  position: relative;
  margin-block-start: var(--space-7-xl) !important;
  margin-block-end: var(--space-4-xl) !important;
}

.c-heading-10::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--space-6-xl);
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
}

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