@media screen and (max-width: 1024px) {
    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: #000000;
        transition: 0.5s;
        position: absolute;
    }
    /* 三本線のうち一番上の棒の位置調整 */
    .drawer-open span:before {
        background: #000000;
        bottom: 8px;
    }
    /* 三本線のうち一番下の棒の位置調整 */
    .drawer-open span:after {
        background: #000000;
        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: #000000;
    }
    #drawer-check:checked ~ .drawer-open span::after {
        top: 0;
        transform: rotate(-45deg);
        background: #000000;
    }
    /* メニューのデザイン*/
    .drawer-content {
        width: 300px; /* 300px */
        height: 100%;
        position: fixed;
        top: 0;
        right: -100%;/* メニューを画面の外に飛ばす */
        z-index: 99;
        background: #FCC800;
        border-left: 1px solid #ffffff;
        transition: .5s;
        overflow-y: scroll;
        box-sizing: border-box;
    }
    /* アイコンがクリックされたらメニューを表示 */
    #drawer-check:checked ~ .drawer-content {
        top: 0;
        right: 0;/* メニューを画面に入れる */
    }
    .drawer-content h1 {
        width: 230px; /* 180px */
        margin: 0 15px; /* 0 auto */
        /*padding: 25px 0 0;*/
    }
    .drawer-content h1 img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
    }
    .drawer-content .txt {
        width: 96%;
        margin: 0 auto;
        padding: 15px 0 0;
        box-sizing: border-box;
    }
    .drawer-content .txt p {
        font-weight: 700;
    }
    .drawer-content .menu {
        width: 96%;
        margin: 20px auto 10px; /* 20px auto */
        display: block;
        overflow: hidden;
    }
    .drawer-content .menu ul {
        overflow: hidden;
    }
    .drawer-content .menu ul li {
        list-style: none;
        width: 100%;
        /*float: left;*/
        border-bottom: 1px solid #ffffff;
        box-sizing: border-box;
    }
    .drawer-content .menu ul li:last-child {
        border-bottom: none;
    }
    .drawer-content .menu ul li a {
        color: #000000; /* 000000 */
        font-size: 94%;
        padding: 15px;
        text-align: left;
        text-transform: uppercase;
        font-weight: 600;
        font-style: normal;
        display: block;
        text-decoration: none;
        box-sizing: border-box;
        background-color: #f5f5f5;
        position: relative;
    }
    .drawer-content .menu ul li a:after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f105';
        float: right;
    }
    .drawer-content .menu2 {
        width: 96%;
        margin: 10px auto;
        display: block;
        overflow: hidden;
    }
    .drawer-content .menu2 ul {
        overflow: hidden;
    }
    .drawer-content .menu2 ul li {
        list-style: none;
        width: 100%;
        box-sizing: border-box;
    }
    .drawer-content .menu2 ul li a {
        color: #ffffff;
        font-weight: 700;
        font-size: 94%;
        padding: 15px;
        text-align: left;
        display: block;
        text-decoration: none;
    }
    .drawer-content .menu2 ul li:nth-child(1) a {
        background-color: #E70013;
        margin: 0 0 10px;
    }
    .drawer-content .menu2 ul li:nth-child(2) a {
        background-color: #00A1FF;
    }
    .drawer-content .menu2 ul li a:after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        content: '\f105';
        float: right;
    }
    .drawer-content .res_office2 {
        width: 96%;
        margin: 0 auto 10px;
        padding: 15px;
        font-weight: 500;
        background-color: #ffffff;
        box-sizing: border-box;
    }
    .drawer-content .res_office2 p.title {
        color: #000000;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
    }
    .drawer-content .res_office2 p.tel a {
        color: #000000;
        font-size: 2.5rem;
        font-weight: 700;
        display: block;
        text-align: center;
        text-decoration: none;
    }
    .drawer-content .res_office2 .rece_time {
        margin: 15px auto 0;
    }
    .drawer-content .res_office2 .rece_time span {
        font-size: 2rem;
    }
    .drawer-content .info {
        width: 96%;
        margin: 0 auto 10px;
        padding: 15px;
        font-weight: 400;
        background-color: #000000;
        box-sizing: border-box;
    }
    .drawer-content .info p {
        color: #ffffff;
        font-style: normal;
    }
    .drawer-content .info p span {
        display: block;
    }
    .drawer-content .info p a {
        color: #ffffff;
        display: inline-block;
        text-decoration: none;
    }
}

@media screen and (max-width: 480px) {
    .drawer {
        top: 3px;
    }
    .drawer-content {
        width: 100%; /* 300px */
        border-left: none;
    }
    .drawer-content h1 {
        margin: 0 auto;
    }
}