.wrapper {
  height: 100%;
  overflow-x: hidden;
  position: relative;
}

main {
  transition: all .5s;
  /*
  display: flex;
  flex-direction: column;
  justify-content: center;
  */
}
main.open {
  transform: translateX(-400px);
}
.menu-trigger {
  display: inline-block;
  width: 36px;
  height: 28px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 1vw;
  right: 20px;
  z-index: 100;
/*   transform: translateX(0);
  transition: transform .5s;
 */}
/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transition: all .5s;
}
.menu-trigger.active span {
  background-color: #fff;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 13px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-15px) rotate(45deg);
}


nav {
  width: 400px;
  height: 100%;
  position: fixed;
  box-sizing: border-box;
  padding-top: 58px;
  top: 0;
  right: 0;
  z-index: 50;
  transform: translate(400px);
  transition: all .5s;
}
nav.open {
  transform: translateZ(0);
}

  nav li a{
    cursor: pointer;
    color: #fff;
    display: block;
    padding:3px 0 0 30px;
    box-sizing: border-box;
    margin-bottom: 1px;
  }

  nav li a:hover{
    color: #fff;
    text-decoration: none;
    background: #e60012;
  }


  nav ul li.m3{
    color: #fff!important;
    padding:3px 0 0 31px;
  }

  nav ul li.m3 ul{
    color: #fff!important;
    padding:3px 0 0 0;
  }
    nav ul li.m3 ul li a{
      padding:0 15px 0 15px!important;
    }


body#top nav li.m0 a,
body.history nav li.m1 a,
body.guide nav li.m2 a,
body.intervew nav li.m3 a,
body.product nav li.m4 a,
body.event nav li.m5 a{
  background: #e60012;
}

nav li.m3 ul li a:hover,
body.intervew nav li.m3 ul li.m3_1 a,
body.intervew nav li.m3 ul li.m3_2 a,
body.intervew nav li.m3 ul li.m3_3 a,
body.intervew nav li.m3 ul li.m3_4 a,
body.intervew nav li.m3 ul li.m3_5 a{
  background: none!important;
}


nav li.m3 ul li a:hover,
body.intervew.int01 nav li.m3 ul li.m3_1 a,
body.intervew.int02 nav li.m3 ul li.m3_2 a,
body.intervew.int03 nav li.m3 ul li.m3_3 a,
body.intervew.int04 nav li.m3 ul li.m3_4 a,
body.intervew.int05 nav li.m3 ul li.m3_5 a{
  background: none!important;
  color: #ff9900;
}


/* campaign */
body.camtop nav li.cm1 a,
body.camtyp nav li.cm2 a,
body.campre nav li.cm3 a{
  background: #e60012;
}

body nav li.cm2 a,
body.camtyp nav li.cm2 a{
  line-height: 160%!important;
}


@media screen and (max-width: 768px) {
  nav {
    width: 100%;
    transform: translate(100%);
    background: #000!important;
    padding:55px 20px;
  }
  main.open {
    transform: translateX(0);
  }
  .menu-trigger {
    top: 15px;
    right: 17px;
    }

  nav ul li.m3{
    color: #fff!important;
    padding-left:10px;
  }

  nav li a{
    padding:0 10px 0 10px;
  }
  nav li a:hover{
    background:none!important;
  }

}