/*ページ開け1番目効果*/
    .shutter{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#1e1e1e;
        z-index:9999;
    }
    /*ページ開け2番目効果*/
    .shutter::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background-color: white;
        width: 0;
        height: 1px;
    }
    .shutter {
        -webkit-animation: byeShutter 1s forwards;
                animation: byeShutter 1s forwards;
    }
    .shutter::before {
        -webkit-animation: shutterOpen 1s forwards;
                animation: shutterOpen 1s forwards;
    }
    /*最初画面アニメーション黒画面*/
    @keyframes byeShutter {
        70% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            display: none;
            z-index: -1;
        }
    }
    /*二番目画面のアニメション開け画面*/
    @keyframes shutterOpen {
        0% {
            width: 0;
            height: 1px;
        }
        50% {
            width: 100%;
            height: 1px;
        }
        90% {
            width: 100%;
            height: 100%;
        }
        100% {
            width: 100%;
            height: 100%;
        }
    }
    /*PC用レイアウト作成　画面が720px以上になると適用*/
    @media screen and (min-width:720px){
                /*page-open効果色*/
                .shutter::before {
                    background-color: orange;
                }
            }