@charset "utf-8";

.hamburger-button01 {
  border: transparent;
}
.hamburger-button01 .hamburger-bar {
  border-radius: 0;
}
.hamburger-button01 .hamburger-bar:before,
.hamburger-button01 .hamburger-bar:after {
  border-radius: 0;
}
.hamburger-button01 .hamburger-bar:before {
  -webkit-transition: bottom 300ms;
          transition: bottom 300ms;
}
.hamburger-button01 .hamburger-bar:after {
  -webkit-transition: top 300ms;
          transition: top 300ms;
}
.hamburger-button01.is-active .hamburger-bar,
.hamburger-button01.is-active .hamburger-bar:before,
.hamburger-button01.is-active .hamburger-bar:after {
  background-color: #FFF;
}
.hamburger-button01.is-active .hamburger-bar {
  margin: 0 auto;
  right: 0;
  left: 0;
  width: 6px;
  box-shadow: -7px 0 #FFF, -14px 0 #FFF, -21px 0 #FFF, 7px 0 #FFF, 14px 0 #FFF, 21px 0 #FFF, 0 7px #FFF, 0 14px #FFF, 0 21px #FFF, 0 -7px #FFF, 0 -14px #FFF, 0 -21px #FFF;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 100% 25%;
      -ms-transform-origin: 100% 25%;
          transform-origin: 100% 25%;
  -webkit-transition: width 300ms, box-shadow 300ms 300ms, -webkit-transform 300ms 300ms;
          transition: width 300ms, box-shadow 300ms 300ms, transform 300ms 300ms;
}
.hamburger-button01.is-active .hamburger-bar:before {
  bottom: 0;
}
.hamburger-button01.is-active .hamburger-bar:after {
  top: 0;
}