可変ヘッダーの高さ分のネガティブマージンを設定

 document.addEventListener("DOMContentLoaded", () => {
  const header = document.querySelector("header"); // ヘッダー要素を取得
  const headerHeight = header.offsetHeight; // ヘッダーの高さを取得

  // CSS変数を設定
  document.documentElement.style.setProperty("--header-height", `${headerHeight}px`);
});

:root {
  --header-height: 0px; /* 初期値 */
}

body {
  margin-top: var(--header-height); /* ヘッダーの高さを適用して余白を設定 */
}

header {
  margin-top: calc(-1 * var(--header-height, 0px)); /* マイナス値を指定 */
}

 document.addEventListener("DOMContentLoaded", () => {
  const header = document.querySelector("header");

  // 初期のヘッダー高さを取得してCSS変数に設定
  updateHeaderHeight();

  // ウィンドウのリサイズ時にも高さを更新
  window.addEventListener("resize", updateHeaderHeight);

  function updateHeaderHeight() {
    const headerHeight = header.getBoundingClientRect().height;
    document.documentElement.style.setProperty("--header-height", `${headerHeight}px`);
    console.log(`ヘッダーの高さ: ${headerHeight}px`); // 確認用のログ
  }
});