/* c-heading-001: セクション見出し */

.c-heading-001 {
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--lg);
}

.c-heading-001__en {
  font-size: var(--wp--preset--font-size--tiny);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--letter-spacing--widest);
  color: var(--wp--preset--color--gray);
  margin-bottom: var(--wp--preset--spacing--2-xs);
}

.c-heading-001__title {
  font-size: var(--wp--preset--font-size--2-xl);
}

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

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

/** @element root  @group 配置  @label 右寄せ  @order 2 */
.c-heading-001--align-right {
  text-align: right;
}

/* ══════════════════════════════════════════════════
   英字スタイル
   ══════════════════════════════════════════════════ */

/** @element root  @group 英字スタイル  @label セリフ体  @order 1 */
.c-heading-001--en-serif .c-heading-001__en {
  font-family: var(--wp--preset--font-family--noto-serif);
  font-style: italic;
  letter-spacing: var(--wp--custom--letter-spacing--normal);
  text-transform: none;
}

/** @element root  @group 英字スタイル  @label 非表示  @order 2 */
.c-heading-001--en-hidden .c-heading-001__en {
  display: none;
}

/* ══════════════════════════════════════════════════
   英字カラー
   ══════════════════════════════════════════════════ */

/** @element root  @group 英字カラー  @label プライマリ  @order 1 */
.c-heading-001--en-primary .c-heading-001__en {
  color: var(--wp--preset--color--primary);
}

/** @element root  @group 英字カラー  @label セカンダリ  @order 2 */
.c-heading-001--en-secondary .c-heading-001__en {
  color: var(--wp--preset--color--secondary);
}

/* ══════════════════════════════════════════════════
   タイトルサイズ
   ══════════════════════════════════════════════════ */

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

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

/** @element root  @group タイトルサイズ  @label 特大  @order 3 */
.c-heading-001--title-xl .c-heading-001__title {
  font-size: var(--wp--preset--font-size--4-xl);
}

/* ══════════════════════════════════════════════════
   装飾
   ══════════════════════════════════════════════════ */

/** @element root  @group 装飾  @label 下線  @order 1 */
.c-heading-001--deco-underline .c-heading-001__title {
  padding-bottom: var(--wp--preset--spacing--xs);
  border-bottom: 2px solid var(--wp--preset--color--primary);
  display: inline-block;
}

/** @element root  @group 装飾  @label ドット  @order 2 */
.c-heading-001--deco-dot::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--wp--custom--border--radius--full);
  background-color: var(--wp--preset--color--primary);
  margin: var(--wp--preset--spacing--xs) auto 0;
}