@media screen and (max-width: 900px) {

    nav {
        display: none;
    }

    .drawer {
        display: block;
        position: fixed;
        top: 8px; /* 15px */
        right: 0;
        z-index: 9;
    }

    /* チェックボックスは非表示に */
    .drawer-hidden {
        display: none;
    }

    /* ハンバーガーアイコンの設置スペース */
    .drawer-open {
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 100;/* 重なり順を一番上に */
        cursor: pointer;
    }

    /* ハンバーガーメニューのアイコン */
    .drawer-open span,
    .drawer-open span:before,
    .drawer-open span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background: #007e31; /* 007e31 */
        transition: 0.5s;
        position: absolute;
    }

    /* 三本線のうち一番上の棒の位置調整 */
    .drawer-open span:before {
        bottom: 8px;
    }

    /* 三本線のうち一番下の棒の位置調整 */
    .drawer-open span:after {
        top: 8px;
    }

    /* アイコンがクリックされたら真ん中の線を透明にする */
    #drawer-check:checked ~ .drawer-open span {
        background: rgba(255, 255, 255, 0);
    }

    /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
    #drawer-check:checked ~ .drawer-open span::before {
        bottom: 0;
        transform: rotate(45deg);
        background: #ffffff;
    }

    #drawer-check:checked ~ .drawer-open span::after {
        top: 0;
        transform: rotate(-45deg);
        background: #ffffff;
    }

    /* メニューのデザイン*/
    .drawer-content {
        width: 300px; /* 300px */
        height: 100%;
        position: fixed;
        top: 0;
        right: -100%;/* メニューを画面の外に飛ばす */
        z-index: 99;
        background: #007e31;
        transition: .5s;
        overflow-y: scroll;
    }

    /* アイコンがクリックされたらメニューを表示 */
    #drawer-check:checked ~ .drawer-content {
        right: 0;/* メニューを画面に入れる */
    }

    .drawer-content .drawer_logo {
        width: 200px; /* 300px */
        margin-left: 15px;
        padding: 9px 0;
    }

    .drawer-content .txt {
        width: 100%;
        padding: 10px 2%;
        font-size: 100%; /* 80% */
        text-align: center;
        background-color: #ffffff;
        box-sizing: border-box;
    }

    .drawer-content .txt span {
        display: block;
    }

    .drawer-content .snssp {
        width: 96%;
        margin: 15px auto;
    }

    .drawer-content .snssp ul {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .drawer-content .snssp ul li {
        width: calc(25% - 10px);
        margin: 0 10px 0 0;
        text-align: center;
        list-style: none;
    }

    .drawer-content .snssp ul li:last-child {
        margin: 0;
    }

    .drawer-content .snssp ul li a {
        display: block;
        text-decoration: none;
    }

    .drawer-content .snssp ul li a img {
        width: 40px; /* 50px */
        height: auto;
        vertical-align: bottom;
    }

    .reservesp a {
        width: 96%;
        margin:0 auto;
        color: #ffffff;
        display: block;
        text-decoration: none;
        text-align: center;
        background-color: #ea8f0b;
        padding: 12px 0;
    }

    .reservesp a:hover {
        transition: 0.8s;
        background-color: #EBA030;
    }

    .menu {
        width: 96%;
        margin: 10px auto 15px;
        display: block;
        overflow: hidden;
    }

    .menu ul {
        overflow: hidden;
    }

    .menu ul li {
        list-style: none;
        width: 100%; /* 50% */
        /*float: left;*/
        border: 1px solid #ffffff;
        border-bottom: none;
        box-sizing: border-box;
    }

    .menu ul li:last-child {
        border-bottom: 1px solid #ffffff;
    }

    /*
    .menu ul li:nth-child(2),
    .menu ul li:nth-child(4),
    .menu ul li:nth-child(6),
    .menu ul li:nth-child(8),
    .menu ul li:nth-child(10),
    .menu ul li:nth-child(12),
    .menu ul li:nth-child(14),
    .menu ul li:nth-child(16) {
        border-left: none;
    }

    .menu ul li:nth-child(3),
    .menu ul li:nth-child(4),
    .menu ul li:nth-child(5),
    .menu ul li:nth-child(6),
    .menu ul li:nth-child(7),
    .menu ul li:nth-child(8),
    .menu ul li:nth-child(9),
    .menu ul li:nth-child(10),
    .menu ul li:nth-child(11),
    .menu ul li:nth-child(12),
    .menu ul li:nth-child(13),
    .menu ul li:nth-child(14),
    .menu ul li:nth-child(15),
    .menu ul li:nth-child(16) {
        border-top: none;
    }
    */

    .menu ul li a {
        color: #ffffff;
        padding: 15px;
        text-align: center;
        display: block;
        text-decoration: none;
        box-sizing: border-box;
    }

    /***** ログイン・ログアウト *****/
    .menu ul li form input[type="submit"] {
        font-size: 100%;
        cursor: pointer;
        color: #ffffff;
        margin: 0 auto;
        display: block;
        padding: 15px;
        text-align: center;
        border: none;
        background-color: transparent;
        letter-spacing: 2px;
        outline: none;
        -webkit-appearance: none;
    }

}

@media screen and (max-width: 480px) {

    .drawer {
        top: -2px;
    }

    .drawer-content {
        width: 100%; /* 300px */
    }

    .drawer-content h1 {
        width: 150px; /* 300px */
    }

}


@media screen and (max-width: 375px) {

    .drawer-content .txt span {
        display: block;
    }

    /*
    .menu ul li:nth-child(4) a,
    .menu ul li:nth-child(7) a,
    .menu ul li:nth-child(14) a {
        padding: 3px 15px;
    }

    .menu ul li span {
        display: block;
    }
    */

}


@media screen and (max-width: 360px) {

    .drawer-content h1 {
        margin-bottom: 10px;
    }

}