/* ========================
ページ表示時のmainフェードインアニメーション
======================== */
main {
    /* ページ読み込み時にふわっと表示 */
    animation: fadeInMain 0.7s cubic-bezier(0.77,0,0.175,1);
}

@keyframes fadeInMain {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ========================
横スクロール遷移アニメーション
======================== */

/* アニメーション中はbodyのスクロールを抑制 */
body.page-slide-out {
    overflow: hidden;
    position: relative;
}

/* NEXTボタン押下時：mainを左へスライドアウト */
body.page-slide-out-left main {
    animation: slideOutToLeft 0.7s cubic-bezier(0.77,0,0.175,1) forwards;
}

@keyframes slideOutToLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100vw);
        opacity: 0.7;
    }
}

/* PREVボタン押下時：mainを右へスライドアウト */
body.page-slide-out-right main {
    animation: slideOutToRight 0.7s cubic-bezier(0.77,0,0.175,1) forwards;
}

@keyframes slideOutToRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100vw);
        opacity: 0.7;
    }
}