.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}
.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 550px) {
  /* セクション自動送り着地時にタイトルが固定ヘッダーへ潜り込まないよう、
     scrollIntoViewの着地位置にヘッダー高さ＋余白分のマージンを確保する。
     ヘッダー高さはrenewal.js側でJSからCSS変数として同期している */
  .scroll-reveal {
    scroll-margin-top: calc(var(--sticky-header-height, 60px) + 1px );
    transform: translateY(15px);
  }
}