.l--flow {
  // コンテンツ間の余白バリエーションを定義
  --flow--base: var(--s30);
  --flow--s: var(--s20);

  display: flow-root;

  > * + * {
    --flow: var(--flow--base);
    margin-block-start: var(--flow);
  }

  // flow 直下のメディア要素は block に初期リセット
  > :where(img, video, iframe) {
    display: block;
  }
}

.-flow\:s > * {
  --flow: var(--flow--s);
}

.-flow\: > * {
  --flow: inherit;
}

// 見出しの上部の余白は広くする.
.l--flow > :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: calc(var(--flow) * var(--flow-hScale, 2));
}

// 打ち消し
.is--skipFlow + *,
.l--flow > :first-child {
  --flow: 0px;
}