body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

header {
    background-color: #333;
    color: white;
    padding: 0;
    text-align: center;
}

.content {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
}

/* アニメーションの初期状態 */
.fade-up {
    /* アニメーションの速度と種類を指定 */
    transition: 
        opacity 0.8s ease-out, 
        transform 0.8s ease-out;
}

/* 画面外にあるときの非表示状態 */
.fade-up.is-hidden {
    opacity: 0; /* 透明 */
    transform: translateY(20px); /* 下から20pxの位置 */
}

/* 画面内に入り、アニメーションが適用された状態 */
.fade-up.is-visible {
    opacity: 1; /* 不透明 */
    transform: translateY(0); /* 本来の位置 */
}