#white-box {display: none; background-color: white;height: 90px;
    -webkit-box-shadow: 0px 4px 10px -5px black;
    -moz-box-shadow: 0px 4px 10px -5px black;
    box-shadow: 0px 4px 10px -5px black;
    /* border-bottom:4px solid#acacacb5; */
}
#active {display: none;}
.wrapper {display: block;height: 80px;
    position: sticky;
    top: 0;
    background-color: rgb(255, 255, 255);
    -webkit-box-shadow: 0px 4px 10px -5px black;
    -moz-box-shadow: 0px 4px 10px -5px black;
    box-shadow: 0px 4px 10px -5px black;
    z-index: 99;
    /* border-bottom:4px solid#acacacb5; */
}
.logo{float: left; height: 60px;width: 100px;margin-top: 10px; margin-left: 5%;transition:0.4s;}
.wrapper ul {height: 100%; width: 50%;margin: auto;

    /* background-color: aqua; */
    justify-content: center;
    text-align: center;
    /* font-family: 'CourierPrime','Courier New', Courier, monospace; */
}
.wrapper li {
    display:inline-block;
    text-align: center;
    list-style: none;
    margin: auto;
    width: 10%;
    padding: 24px;
}
.wrapper li a {
    text-decoration: none;
    color: black;
    transition: .3s;
    font-size: 20px;
}
.wrapper li a:hover {
    color: red;
}
.surelol {background-color: red; float: right;text-decoration: none; color: white; padding: 10px 28px; text-align: center;
    position: fixed;
    top: 2.5%;
    right: 2%;
    transition: .3s;
}
.surelol:hover{
    background-color: #b30e0e;
}

@media screen and (max-width: 800px) {
    #white-box {display: block;z-index: 5;}
    .surelol {display: none;}
    .wrapper{
        position: fixed;
        top: 0;
        /*left: -100%;*/
        right: -100%;
        height: 100%;
        width: 100%;
        background: #ffffff;
        transition: all 0.6s ease-in-out;
    }
    #active:checked ~ .wrapper{
        /*left: 0;*/
        display:initial;
        right:0;
    }
    .menu-btn{
        position: absolute;
        z-index: 100;
        right: 20px;
        /*left: 20px; */
        top: 20px;
        height: 50px;
        width: 50px;
        text-align: center;
        line-height: 50px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        /*color: #fff;*/
        /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
        /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
    /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
        transition: all 0.3s ease-in-out;
    }
    .menu-btn span,
    .menu-btn:before,
    .menu-btn:after{
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        left: 30%;
        width: 40%;
        border-bottom: 2px solid #ff0000;
        transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .menu-btn:before{
        transform: translateY(-8px);
    }
    .menu-btn:after{
        transform: translateY(8px);
    }
    .close {
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        transition: background .6s;
    }

    /* closing animation */
    #active:checked + .menu-btn span {
        transform: scaleX(0);
    }
    #active:checked + .menu-btn:before {
        transform: rotate(45deg);
        border-color: #ff0000;
    }
    #active:checked + .menu-btn:after {
        transform: rotate(-45deg);
        border-color: #ff0000;
    }
    .wrapper ul{
        position: absolute;
        top: 60%;
        left: 50%;
        height: 90%;
        transform: translate(-50%, -50%);
        list-style: none;
        text-align: center;
    }
    .wrapper ul li{
        text-align: center;
        width: 100%;
        height: 10%;
        margin: 15px 0;
    }
    .wrapper ul li a{
        float: left;
        /* position: absolute; */
        text-decoration: none;
        font-size: 30px;
        font-weight: 500;
        padding: 5px 30px;
        color: #ff0000;
        border-radius: 50px;
        line-height: 50px;
        margin: 5px 30px;
        opacity: 0;
        transition: all 0.3s ease;
        transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .wrapper ul li a:after{
        position: absolute;
        content: "";
        background: #ff0000;
            /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
        /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 50px;
        transform: scaleY(0);
        z-index: -1;
        transition: transform 0.3s ease;
    }
    .wrapper ul li a:hover:after{
        transform: scaleY(1);
        
    }
    .wrapper ul li a:hover{
        color: #ffffff;
    }
    input[type="checkbox"]{
        display: none;
    }

    #active:checked ~ .wrapper ul li a{
        opacity: 1;
    }
    .wrapper ul li a{
        transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
        transform: translateX(100px);
    }
    #active:checked ~ .wrapper ul li a{
        transform: none;
        transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); /* easeOutBackを緩めた感じ */
        transition-delay: .6s;
        transform: translateX(-100px);
    }
}