/*　ハンバーガーメニューボタン　*/
.l-header__nav-btn {
  display : block;
  position: fixed;
  z-index : 3;
  right : 10px;
  top   : 7px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.l-header__nav-btn span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #ffffff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.is-fixed .l-header__nav-btn span {
  background : #7f7f7f;
}

.l-header__nav-btn span:nth-child(1) {
  top: 10px;
}
.l-header__nav-btn span:nth-child(2) {
  top: 20px;
}
.l-header__nav-btn span:nth-child(3) {
  top: 30px;
}

/* スマホメニューを開いてる時のボタン */
.l-header__nav-btn.is-open-nav span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.l-header__nav-btn.is-open-nav span:nth-child(2),
.l-header__nav-btn.is-open-nav span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

@media screen and (min-width:768px){
	.l-header__nav-btn{
		display: none;
	}
}

/* メニュー背景　*/
@media screen and (max-width:767px){
	.l-header__nav-list {
		position: fixed;
		z-index : 2;
		top  : 0;
		left : 0;
		padding: 70px 40px 0;
		background: #000000;
		width: 100%;
		height: 100vh;
		color: #ffffff;
		opacity: 0;
		transform: translateX(100%);
		transition: all .3s cubic-bezier(.6, .2, .2, .9);
	}

	.l-header__nav-item,
	.nav-submenu__item{
		transition: .5s all;
		opacity: 0;
		transform: translateX(35px);
	}

	.l-header__nav-list .l-header__nav-item > a {
		display: inline-block;
		color: #ffffff;
		margin: 1em 0;
		text-decoration: none;
		font-size: 1.25rem;
	}

	.nav-submenu-sp{
		margin-top: -8px;
	}
	.nav-submenu-sp .nav-submenu__item > a{
		display: inline-block;
		margin: .8em 12px;;
		font-size: .9375rem;
		color: #cecece;
	}

	.l-header__nav-list.is-open-sp .l-header__nav-item,
	.l-header__nav-list.is-open-sp .nav-submenu__item{
		opacity: 1;
		transform: translateX(0);
	}

	.l-header__nav-list .l-header__nav-item:nth-of-type(1){
		transition-delay: .25s;
	}
	.l-header__nav-list .l-header__nav-item:nth-of-type(2){
		transition-delay: .3s;
	}
	.l-header__nav-list .l-header__nav-item:nth-of-type(3){
		transition-delay: .35s;
	}
	.l-header__nav-list .l-header__nav-item:nth-of-type(4){
		transition-delay: .4s;
	}
	.l-header__nav-list .l-header__nav-item:nth-of-type(5){
		transition-delay: .45s;
	}

	.nav-submenu-sp-contact .nav-submenu__item:nth-of-type(1){
		transition-delay: .5s;
	}
	.nav-submenu-sp-contact .nav-submenu__item:nth-of-type(2){
		transition-delay: .55s;
	}

/* クリックでjQueryで追加・削除 */
	.l-header__nav-list.is-open-sp {
		opacity: 100;
		display: block;
		transform: translateX(0%);
	}

}