/* c-heading-simple-001: シンプル見出し */

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

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

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

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

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

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

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

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

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

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

/** @element root  @group 装飾  @label 下線  @order 1 */
.c-heading-simple-001--deco-underline .c-heading-simple-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-simple-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;
}

/** @element root  @group 装飾  @label 左ボーダー  @order 3 */
.c-heading-simple-001--deco-left-border {
  text-align: left;
  padding-left: var(--wp--preset--spacing--sm);
  border-left: 4px solid var(--wp--preset--color--primary);
}
