@charset "utf-8";
/* ▼PC▼ */
/*チェックボックス等は非表示に*/
.nav-unshown {
    display: none;
}
.nav-drawer-toggle {
    display: none;
}

/* ▲PC▲ */

/* ------------------------------------------------------------------------------------------------------------ */

/* ▼Smartphone▼ */

@media screen and (max-width: 767px) {
    /* -- .nav-drawer ------------------------- */

    /*toggleボタン*/
    .nav-drawer-toggle {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        z-index: 15000;
        background-color: #fff;
        border-radius: 20px;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        -webkit-box-shadow: 0px 0px 2px 1px #dbdbdb;
        box-shadow: 0px 0px 2px 1px #dbdbdb;
    }

    .fixed .nav-drawer-toggle {
        position: fixed;
    }

    .nav-drawer-toggle span {
        display: block;
        position: absolute;
        height: 2px;
        width: 16px;
        background: #44464f;
        left: 8px;
        border-radius: 1px;
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }
    .nav-drawer-toggle span:nth-child(1) {
        top: 10px;
    }
    .nav-drawer-toggle span:nth-child(2) {
        top: 15px;
    }
    .nav-drawer-toggle span:nth-child(3) {
        top: 20px;
    }
    #nav-drawer-input:checked ~ .nav-drawer-toggle span:nth-child(1) {
        top: 15px;
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    #nav-drawer-input:checked ~ .nav-drawer-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    #nav-drawer-input:checked ~ .nav-drawer-toggle span:nth-child(3) {
        top: 15px;
        -webkit-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    /*閉じるボタン*/
    .nav-drawer-close-btn {
        display: block;
        position: absolute;
        right: 14px;
        top: 14px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        z-index: 15000;
        background-color: #fff;
        border-radius: 20px;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        -webkit-box-shadow: 0px 0px 2px 1px #dbdbdb;
        box-shadow: 0px 0px 2px 1px #dbdbdb;
    }
    .nav-drawer-close-btn span {
        display: block;
        position: absolute;
        height: 2px;
        width: 16px;
        background: #44464f;
        left: 8px;
        border-radius: 1px;
    }
    .nav-drawer-close-btn span:nth-child(1) {
        top: 15px;
        -webkit-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .nav-drawer-close-btn span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .nav-drawer-close-btn span:nth-child(3) {
        top: 15px;
        -webkit-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }

    /*閉じる用の薄黒カバー*/
    .nav-drawer-close {
        display: none;
        position: fixed;
        z-index: 16000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }
    #nav-drawer-input:checked:checked ~ .nav-drawer-close {
        display: block;
        opacity: 0.5;
    }

    /*中身*/
    .nav-drawer-body {
        overflow: auto;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 20000;
        width: 90%;
        max-width: 330px;
        height: 100%;
        background: #fff;
        -webkit-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
        padding: 56px 0 0 0;
    }

    #nav-drawer-input:checked ~ .nav-drawer-body {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    /* ------------------------------------------------ */
}

/* ▲Smartphone▲ */