/* 初期スタイル */
#main-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  transition: background-color 0.3s ease;
  text-align: center;
  z-index: 998;
}

/* 固定ヘッダーの高さ分、本文を下げる（数値は実際のヘッダー高さに合わせて調整） */
:root{ --main-header-h: 90px; }

body{
  padding-top: var(--main-header-h);
}

/* スマホ用のレイアウト */
@media screen and (max-width: 768px) {
#main-header{
    text-align: left;
  }
}


#main-header.scrolled {
    background-color: rgba(255, 255, 255, 1.0); /* スクロール時に半透明 */
    text-align: left;
}

.content {
    margin-top: 50px; /* header の高さ分マージンを確保 */
}