@charset "utf-8";
/* CSS Document */

.drawer_menu * {margin: 0; padding: 0; outline: none; border: none; font: inherit; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: left; text-decoration: none; list-style: none;
}
.drawer_menu {background-color: #FFF; width: 100%; height: 74px; position: fixed; z-index: 1000; border-bottom: 1px #DDD solid; margin: 0; padding: 0 10px; box-sizing: border-box;}

@media screen and (max-width:599px) {
    .drawer_menu {height: 68px;}
}
    
    
.drawer_menu a {color: inherit; text-decoration: none;
}s

.drawer_menu a:visited {color: inherit;}

.drawer_menu .drawer_bg {width: 100%; height: 100%; position: fixed; z-index: 999; background-color: rgba(51, 51, 51, 0.5); display: none; top: 0; left: 0;}

.drawer_container {
    width: 100%;
    max-width: 1080px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
@media screen and (max-width:599px) {
    .drawer_container {
    max-width: 100%;
}
}
.drawer_menu .drawer_button {display: block; background: none; border: none; padding: 0; width: 40px; letter-spacing: 0; /*letter-spacing: 0.1em;*/ cursor: pointer; /*position: fixed; top: 5px; right: 20px;*/ z-index: 1001; text-align: center; outline: none;}

@media screen and (max-width:599px) {
    .drawer_menu .drawer_button {margin-right: 12px; margin-top: 10px;}
}

.drawer_menu .drawer_button.active .drawer_bar {width: 40px;}

.drawer_menu .drawer_button.active .drawer_bar1 {transform: rotate(15deg);}

/*.drawer_menu .drawer_button.active .drawer_bar2 {opacity: 0;}*/

.drawer_menu .drawer_button.active .drawer_bar3 {transform: rotate(-15deg);}

.drawer_menu .drawer_button.active .drawer_menu_text {display: none;}

.drawer_menu .drawer_button.active .drawer_close {display: block;}

.drawer_menu .drawer_bar {display: block; height: 2px; margin: 8px 0; transition: all 0.2s; transform-origin: 0 0;}

.drawer_menu .drawer_text {text-align: center; font-size: 10px;}

.drawer_menu .drawer_close {letter-spacing: 0; /*letter-spacing: 0.08em;*/ display: none;}

.drawer_menu .drawer_menu_text {display: block;}

.drawer_menu .drawer_nav_wrapper {width: 500px; height: 100%; transition: all 0.2s; transform: translate(500px); position: fixed; top: 0; right: 0; z-index: 1000; background-color: #FFF;}

.drawer_menu .drawer_nav_wrapper.open {transform: translate(0);}

.drawer_menu.left .drawer_button {right: auto; left: 32px;}

.drawer_menu.left .drawer_nav_wrapper {transform: translate(-500px); right: auto; left: 0;}

.drawer_menu.left .drawer_nav_wrapper.open {transform: translate(0);}

@media screen and (max-width:599px) {
    .drawer_menu .drawer_nav_wrapper {width: 340px; transform: translate(340px);}
    .drawer_menu.left .drawer_nav_wrapper {transform: translate(-340px);}
}

/*+++ Default Navigation CSS +++*/
.drawer_menu .drawer_nav {padding: 112px 50px;}

.drawer_menu .drawer_nav li {font-size: 1.8rem;  margin-bottom: 12px; position: relative;}

.drawer_menu .drawer_nav li a::after{content: "〉"; position: absolute;
  margin-left: 1.5em; font-size: 70%; top: 0.5em; color: #999999;}

/*+++ Default Button Color +++*/
.drawer_menu .drawer_button { color: #222222;}

.drawer_menu .drawer_button .drawer_bar {background-color: #222222;}

/*@media screen and (min-width:890px) {.drawer_menu{display: none;}}*/
