.none {
    display: none;
}

@media screen and (max-width: 764px) {
    /*メニュー*/
    /* 690px以下に適用されるCSS（スマホ用） */

    .none {
        display: none;
    }

    #nav-content {
        /* border: 0px; */
        transform: translateX(-130%);
    }

    #nav-open {
        border: 0px solid cyan;
        background-color: rgb(0, 0, 0, 0.5);
        display: inline-block;
        vertical-align: middle;
        position: fixed;
        top: 10px;
        right: 20px;
        z-index: 130;
        width: 35px;
        height: 35px;
    }

    #nav-open span,
    #nav-open span:before,
    #nav-open span:after {
        border-radius: 3px;
        background-color: #777;
        position: absolute;
        top: 16px;
        left: 0;
        content: "";
        width: 100%;
        height: 3px;
        transition: 0.5s;
    }

    #nav-open span:before {
        top: -8px;
    }

    #nav-open span:after {
        top: 8px;
    }

    #drawer_input:checked~#nav-open span:before {
        top: 0;
        transform: rotate(45deg);
    }

    #drawer_input:checked~#nav-open span:after {
        top: 0;
        transform: rotate(-45deg);
    }

    #drawer_input:checked~#nav-open span {
        background-color: rgb(0, 0, 0, 0);
        transition: 0.5s;
    }

    #drawer_input:checked~#nav-open span {
        background-color: rgb(0, 0, 0, 0);
        transition: 0.5s;
    }

    #drawer_input:checked~#nav-close {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 110;
        background-color: rgba(0, 0, 0, 0.8);
        transition: 0.3s ease-in-out;
        cursor: pointer;
    }

    #drawer_input:checked~#nav-content {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        gap: 0 0;
        grid-template-areas:
            "logo logo"
            "top top"
            "about about"
            "contact contact"
            "sns sns"
            "pixiv x";
        border: 0px solid purple;
        position: fixed;
        top: 64px;
        left: 0;
        width: 60%;
        min-width: 140px;
        max-width: 200px;
        /* height: 300px; */
        z-index: 120;
        background-color: rgb(0, 0, 0, 0);
        /* transform: translateX(0%); */
        /* transition: 0.3s ease-in-out; */
        transform: scale(1);
  opacity: 1;
  /* pointer-events: auto; */
    }

    #drawer_input:checked~#nav-content li {
        border: 0px solid yellow;
        margin: 8px 0;
    }
}