/* =================================================================
 * c-section-heading — 製品ページのセクション見出し
 * タイポは c-heading（--h2 / --h3）を内部利用し、ここでは装飾を担当する。
 *
 *   bar    : 左グラデ縦バー＋全幅罫線（見た目 h2 / 36px）
 *   accent : タイトル＋アクセント罫線（橙100px＋グレー線）（見た目 h3 / 28px）
 *
 * 使い方: front.components.section-heading（Blade）経由
 * =================================================================*/

.c-section-heading {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ---------- bar: 縦バー型 ---------- */
.c-section-heading--bar {
  gap: 28rem;
}
.c-section-heading--bar .c-section-heading__title {
  padding: 4rem 0 4rem 28rem;
  border-left: 5rem solid transparent;
  border-image: linear-gradient(90deg, var(--color-orange-01) 0%, var(--color-key) 100%) 1;
}
.c-section-heading--bar .c-section-heading__rule {
  width: 100%;
  height: 1px;
  background: var(--color-neutral-04);
}

/* ---------- accent: アクセント罫線型 ---------- */
.c-section-heading--accent {
  gap: 0;
}
.c-section-heading--accent .c-section-heading__title {
  padding-bottom: 16rem;
}

/* ---------- accent-sm: 検索・フォーム用の小型アクセント見出し ----------
 * Figma「h3 検索・フォーム用」5515:88621。accent との差は字サイズ(h3 28→h4 24/SP20)
 * と文字下余白(16→8px)、行間を常に 1.5 に固定（h4 の SP lh=1.8 を上書き）。罫線は
 * accent と共通（橙100×2px＋残り1px グレー線）。SP も左寄せ（Figma 準拠）。*/
.c-section-heading--accent-sm {
  gap: 0;
}
.c-section-heading--accent-sm .c-section-heading__title {
  padding-bottom: 8rem;
  line-height: 1.5;   /* Figma: PC/SP とも 1.5（h4 の SP 既定 1.8 を上書き）*/
}

/* ---------- accent-dot: 先頭ドット型（TOP新着/人気の見出し） ---------- */
.c-section-heading--accent-dot {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8rem;
  row-gap: 32rem;
}
.c-section-heading--accent-dot .c-section-heading__dot {
  flex: 0 0 auto;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, var(--color-orange-01) 0%, var(--color-key) 100%);
}
.c-section-heading--accent-dot .c-section-heading__title {
  white-space: nowrap;
}
.c-section-heading--accent-dot .c-section-heading__rule {
  flex: 0 0 100%;   /* 改行して全幅 */
}

/* ---------- accent / accent-sm / accent-dot 共通の罫線 ---------- */
.c-section-heading--accent .c-section-heading__rule,
.c-section-heading--accent-sm .c-section-heading__rule,
.c-section-heading--accent-dot .c-section-heading__rule {
  display: flex;
  align-items: flex-end;
  width: 100%;
}
.c-section-heading--accent .c-section-heading__rule-accent,
.c-section-heading--accent-sm .c-section-heading__rule-accent,
.c-section-heading--accent-dot .c-section-heading__rule-accent {
  width: 100rem;
  height: 2rem;
  background: var(--color-key);
}
.c-section-heading--accent .c-section-heading__rule-line,
.c-section-heading--accent-sm .c-section-heading__rule-line,
.c-section-heading--accent-dot .c-section-heading__rule-line {
  flex: 1;
  height: 1px;
  background: var(--color-neutral-04);
}