/* =================================================================
 * c-heading — 見出し h1〜h6
 * Figma: スタイルガイド 3874:94542（タイポグラフィ）
 *
 * 使い方:
 *   <h1 class="c-heading c-heading--h1">タイトル</h1>
 *   <p  class="c-heading c-heading--h2">セマンティックはp、見た目はh2</p>
 *
 * セマンティックタグと見た目はモディファイア（--h1〜--h6）で独立して
 * 指定する。<h2 class="c-heading--h3"> のように使えるので、
 * 「見出しレベルは h2 だが小さく見せたい」場合にも対応。
 * =================================================================*/

.c-heading {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-text-default);
  letter-spacing: var(--letter-spacing-heading);
  /* 'pwid' (proportional widths) を Figma で指定しているのでここでも有効化 */
  font-feature-settings: "pwid";
}

/* ---------- 見た目バリアント (PC基準値) ---------- */
.c-heading--h1 { font-size: var(--fs-h1-pc); line-height: var(--lh-h1-pc); }
.c-heading--h2 { font-size: var(--fs-h2-pc); line-height: var(--lh-h2-pc); }
.c-heading--h3 { font-size: var(--fs-h3-pc); line-height: var(--lh-h3-pc); }
.c-heading--h4 { font-size: var(--fs-h4-pc); line-height: var(--lh-h4-pc); }
.c-heading--h5 { font-size: var(--fs-h5-pc); line-height: var(--lh-h5-pc); }
.c-heading--h6 { font-size: var(--fs-h6-pc); line-height: var(--lh-h6-pc); }

/* ---------- SP上書き (1023.98px 以下) ---------- */
@media (max-width: 1023.98px) {
  .c-heading--h1 { font-size: var(--fs-h1-sp); line-height: var(--lh-h1-sp); }
  .c-heading--h2 { font-size: var(--fs-h2-sp); line-height: var(--lh-h2-sp); }
  .c-heading--h3 { font-size: var(--fs-h3-sp); line-height: var(--lh-h3-sp); }
  .c-heading--h4 { font-size: var(--fs-h4-sp); line-height: var(--lh-h4-sp); }
  .c-heading--h5 { font-size: var(--fs-h5-sp); line-height: var(--lh-h5-sp); }
  .c-heading--h6 { font-size: var(--fs-h6-sp); line-height: var(--lh-h6-sp); }
}

/* ---------- カラーバリアント ---------- */
.c-heading--key       { color: var(--color-key); }
.c-heading--secondary { color: var(--color-secondary); }
.c-heading--white     { color: var(--color-white); }

/* ---------- テキスト揃えモディファイア ---------- */
.c-heading--align-center { text-align: center; }
.c-heading--align-right  { text-align: right; }

/* ---------- 強調用 first-letter（Figma "(::first-letter)" パターン） ---------- */
/* 使い方: <h2 class="c-heading c-heading--h2 c-heading--first-emph">安心な商品・サービスの提供</h2> */
.c-heading--first-emph::first-letter {
  color: var(--color-key);
  font-size: 1.4em;
  vertical-align: baseline;
}

/* =================================================================
 * 見出しの装飾（Figma: 見出しの装飾 5382:103903 ／ h4〜h6 で使用）
 * 装飾はサイズ系モディファイア（--h4〜--h6）と併用する。
 *   <h4 class="c-heading c-heading--h4 c-heading--deco-dotted">タイトル</h4>
 * =================================================================*/

/* ---------- 下線（点線）: 左寄せ / 中央寄せ ---------- */
/* Figma 5382:103906 — 2px dashed / Orange01 / 文字下 8px */
.c-heading--deco-dotted {
  display: block;
  width: fit-content;
  padding-bottom: 8rem;
  border-bottom: 2rem dashed var(--color-orange-01);
}
/* 中央寄せ時のみブロックを中央に寄せる（左寄せはデフォルト） */
.c-heading--deco-dotted.c-heading--align-center {
  margin-inline: auto;
}

/* ---------- 下線（吹き出し風）: 中央寄せのみ ---------- */
/* Figma 5382:103908 — 全幅 2px 線＋中央に下向きの切り欠き / Key Color
 * 線は gradient、切り欠きは外部 SVG を mask 化し、色は background-color から透過させる */
.c-heading--deco-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
  width: fit-content;
  margin-inline: auto;
  text-align: center;
}
.c-heading--deco-bubble::after {
  content: "";
  width: 100%;
  height: 11rem;
  background-color: var(--color-key);
  -webkit-mask:
    url("/img/common/icons/heading-bubble.svg") center top / 18rem 11rem no-repeat,
    linear-gradient(#000, #000) left top / 100% 2rem no-repeat;
          mask:
    url("/img/common/icons/heading-bubble.svg") center top / 18rem 11rem no-repeat,
    linear-gradient(#000, #000) left top / 100% 2rem no-repeat;
}

/* ---------- 両端に線: 中央寄せのみ ---------- */
/* Figma 5382:103914 — 55px×2px（角丸）/ Key Color / 文字との間隔 8px。SP は 30px */
.c-heading--deco-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  width: fit-content;
  margin-inline: auto;
}
.c-heading--deco-line::before,
.c-heading--deco-line::after {
  content: "";
  flex-shrink: 0;
  width: 55rem;
  height: 2rem;
  border-radius: 1px;
  background: var(--color-key);
}
@media (max-width: 1023.98px) {
  .c-heading--deco-line::before,
  .c-heading--deco-line::after { width: 30rem; }
}