/***********************************
* SP_NAV *
***********************************/

@media screen and (min-width:980px) { 

	.bt_spnavi{
		display: none;
	}
}
@media (max-width:979px) {

 /* ------------------ */
 /* humberger-menu */
 /* ------------------ */


.bt_spnavi{
	 
}

.burger-btn{
	display: block;
	width: 39px;
	height: 39px;
	position: relative;
	z-index: 1003;
/*   codepenの挙動のため */
  background-color:transparent;
  border:none;
  }
  .bar{
	width: 20px;
	height: 1px;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-color: #000;
  }
  .bar_top{
	top: 10px;
  }
  .bar_mid{
	top: 50%;
	transform: translate(-50%,-50%);
  }
  .bar_bottom{
	bottom: 10px;
  }
  .burger-btn.close .bar_top{
	transform: translate(-50%,10px) rotate(45deg);
	transition: transform .3s;
  }
  .burger-btn.close .bar_mid{
	opacity: 0;
	transition: opacity .3s;
  }
  .burger-btn.close .bar_bottom{
	transform: translate(-50%,-8px) rotate(-45deg);
	transition: transform .3s;
  }
  .nav-wrapper{      
	transform: translateX(100%);      
	transition: .3s;      
	width: 100vw;      
	height: 100vh;      
	position: fixed;      
	top: 0;      
	left: 0;      
	z-index: 1002;/*キービジュアルと.btn_triggerとの重なりの前後関係を調整*/     
	}     
	.nav-wrapper.slide-in{      
	  transform: translateX(0);      
	  transition: .3s;     
	}
   .header-nav{
	  width: 100%;
	  height: 100%;
	  background-color:rgba(255,255,255,0.9);
	  z-index: 1002;
	}
   .header-nav .nav-list{
	  display: block;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	  text-align: center;
	}
	.header-nav .nav-item{
	  margin-right: 0;
	  margin-bottom: 40px;
	}
}
  
}