/* drawer.js用 */


.drawer--right .drawer-nav{
    right: -30rem;
}

.drawer-nav {
    width: 30rem !important;
    font-size: 2rem;
    text-align: left;
    z-index: 200;
}

.drawer--right.drawer-open .drawer-hamburger {
    display: block;
    right: 30rem;
     animation: fadeIn 0.5s;
}
@keyframes fadeIn {
    0% {opacity: 0; right: 0rem;}
    100% {opacity: 1; right:30rem;}
}

.drawer-hamburger {
    display: none;
    width: 3rem;
    padding: 18px .75rem 29px!important;
}

.drawer-hamburger {
    background:rgba(255,255,255,0.92);
}
.drawer-nav {
    background:rgba(255,255,255,0.97);
}

#drawer-wrapper {
/*    padding-bottom: 4rem;*/
}

#drawer-wrapper #top {
    background: url(https://hanger.itembox.design/item/img/sp/icon_drawer_menu.png) no-repeat 1rem/2rem;
    padding: 2rem 1rem 2rem 4rem;
}

#drawer-wrapper #top a {
    color: #f4a744;
}

#drawer-wrapper #category {
    color: white;
    background: #535353;
    padding: 1rem;
}

#drawer-wrapper > ul > li {
    border-bottom: 2px dotted #999;
    padding: 1rem 0;
}

#drawer-wrapper .title {
    background: url(https://hanger.itembox.design/item/img/sp/icon_drawer_menu.png) no-repeat 1rem/2rem;
    padding: 1rem 1rem 1rem 4rem;
    font-size: 1.7rem;
    font-weight: bold;
}

#drawer-wrapper .box {
    display: flex;
}

#drawer-wrapper .box li.menu2 {
    width: 50%;
}

#drawer-wrapper .box li.menu2 img {
    padding: auto;
}

#drawer-wrapper .box img {
    width: 12rem;
    margin: 0 0.5rem 0 1rem;
    border: 1px solid #ccc;
}

#drawer-wrapper > ul > li.menu3 {
    background: url(https://hanger.itembox.design/item/img/sp/icon_drawer_menu.png) no-repeat 1rem/2rem;
    padding: 1rem 1rem 1rem 4rem;
    font-size: 1.7rem;
}