/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/
.drawer-hamburger {
  position: absolute;
  z-index: 5400;
  top: 0;
	right: 0;
  display: block;
  box-sizing: content-box;
  width: 2rem;
  padding: 0;
  padding-top: 3px;
  padding-right: .75rem;
  padding-bottom: 0;
  padding-left: .75rem;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  border: 0;
  outline: 0;
  background-color: transparent;
}

.drawer-hamburger:hover {
  cursor: pointer;
  /*background-color: transparent;*/
}

.drawer-hamburger .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.drawer-hamburger-icon {
  position: relative;
  display: block;
  margin-top: 10px;
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 100%;
  height: 2px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #fff;
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  position: absolute;
  top: -10px;
  left: 0;
  content: ' ';
}

.drawer-hamburger-icon:after {
  top: 10px;
}

.drawer-open .drawer-hamburger-icon {
  background-color: transparent;
}

.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
  top: 0;
}

.drawer-open .drawer-hamburger-icon:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/**/
.drawer-nav {
	background: #fff;
	position: absolute;
	top: -500px; /* 開いてないときは画面外に配置 */
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	width: 100%;
	z-index: 998;
}
@media screen and (min-width: 992px) {
	.drawer-nav {
		position: static;
		-webkit-transition: none;
		-moz-transition: none;
		transition: none;
		z-index: auto;
	}
}

/* .drawer-nav スライドアニメーション */
.drawer-open .drawer-nav {
	/* .nav-content top + .nav-header height */
	-moz-transform: translateY(555px);
	-webkit-transform: translateY(555px);
	transform: translateY(555px);
}

#modal-overlay{
	background-color: rgba(0, 0, 0, 0.8);
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 100;
}

@media screen and (min-width: 992px) {
	.drawer-hamburger {
		display: none;
	}
}

/* drawer-nav */
.drawer-nav {
  position: static;
	width: 100%;
	overflow: visible;
}
.drawer-menu {
	position: relative;
	z-index: 999;
}
@media screen and (max-width: 991px) {
	.drawer-nav {
		position: absolute;
	}
	.drawer-menu {
		padding-bottom: 10px;
	}
}

/* drawer-toggle */
.drawer-toggle {
	display: none;
}
@media screen and (max-width: 991px) {
	.drawer-toggle {
		position: absolute;
		display: block;
		height: 55px;
	}
	.drawer-nav {
		margin: 0 5%;
		width: 90%;
		background-color: transparent;
	}
	.drawer-hamburger-icon {
		margin-top: 0;
	}
}