/* c-heading-sub-001: 見出し + サブタイトル */

.c-heading-sub-001 {
  text-align: center;
}

.c-heading-sub-001__title {
  font-size: var(--wp--preset--font-size--2-xl);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}

.c-heading-sub-001__subtitle {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-dark);
}

/* ══════════════════════════════════════════════════
   配置
   ══════════════════════════════════════════════════ */

/** @element root  @group 配置  @label 左寄せ  @order 1 */
.c-heading-sub-001--align-left {
  text-align: left;
}

/* ══════════════════════════════════════════════════
   サイズ
   ══════════════════════════════════════════════════ */

/** @element root  @group サイズ  @label 小  @order 1 */
.c-heading-sub-001--size-sm .c-heading-sub-001__title {
  font-size: var(--wp--preset--font-size--lg);
}

/** @element root  @group サイズ  @label 大  @order 2 */
.c-heading-sub-001--size-lg .c-heading-sub-001__title {
  font-size: var(--wp--preset--font-size--3-xl);
}

/* ══════════════════════════════════════════════════
   サブタイトルカラー
   ══════════════════════════════════════════════════ */

/** @element root  @group サブタイトルカラー  @label プライマリ  @order 1 */
.c-heading-sub-001--sub-primary .c-heading-sub-001__subtitle {
  color: var(--wp--preset--color--primary);
}

/** @element root  @group サブタイトルカラー  @label セカンダリ  @order 2 */
.c-heading-sub-001--sub-secondary .c-heading-sub-001__subtitle {
  color: var(--wp--preset--color--secondary);
}