body{
    background-color: #fff;
}
#whole{
    position: relative;
    height: 100vh;
    z-index: 0;
    img{
        height: auto;
        width: 100%;
    }
    #header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }
    #footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }

    #btn{
        position: fixed;
        top: 0;
        right: 0;
        z-index: 3;
        img{
            width: 31.5vw;
            height: auto;
            cursor: pointer;
        }
    }

    .menu-fade {
        /* 初期状態では完全に非表示にし、画面外に配置 */
        opacity: 0;
        transform: translateY(0);
        transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 4;
    }
    .menu-fade.active {
        /* activeクラスが付いたら表示 */
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        z-index: 6;
    }

    /* IntersectionObserver 用の .fade クラスはそのまま */
    .fade {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.5s, transform 1s;
    }
    .fade.active {
        opacity: 1;
        transform: translateY(0px);
        z-index: 5;
        position: fixed;
    }
}