/* 初期スタイル */
body {
    margin: 0;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0); /* 初期は透明 */
    transition: background-color 0.3s ease;
    padding: 10px;
    text-align: center;
    z-index: 998;
}

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


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

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