/*
 * 質問見出し。 インタビュー記事などで質問を切り出す h4。
 * 左に 40x2px のブランドグリーンの水平線を marker として置き、右に太字の
 * 質問文が続く。 marker は 32px の枠内で垂直中央、テキスト先頭行の中心と
 * ほぼ揃うので align-items: flex-start で自然に揃う。
 *
 * Figma 参照: 826:9389 (interviewer)
 */
.lazyblock-qa-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);

  & .marker {
    flex: 0 0 40px;
    height: calc(var(--font-size-body-middle) * 1.75);
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      background: var(--color-brand-primary-green);
    }
  }

  & .text {
    margin: 0;
    font-weight: var(--font-weight-bold);
    line-height: 1.75;
    min-width: 0;
    flex: 1 1 0;
  }
}