@charset "utf-8";







/*--------------------*/

/*　以下メニューCSS　*/

/*--------------------*/



nav {

	position: fixed;

	top: 0;

	right:0;

	width: 300px;

	height: 100%;

	background-color: #333;

	transition: all 0.1s;

	transform: translate(300px);

	z-index: 1000;

}

nav.open {

	transform: translate(0); 

}

nav ul {

	margin: 0;

	padding: 1em;

	list-style-type: none;

	overflow: auto;

}

nav ul li {

	padding: 1em 0;

	border-bottom: 1px solid #fff;

	text-align: left;

}

nav ul li a {

	display: block;

	text-decoration: none;

	color: #fff;

}



/* 開閉ボタン */



.navBtn button {

  display: block;

  background:#333;

  border: none;

  padding: 3px 10px;

  width: 48px;

  color: #333;

  letter-spacing: 0.1em;

  cursor: pointer;

  position: fixed;

  top: 10px;

  right:10px;

  z-index: 1001;

  text-align: center;

  outline: none;

}

/* ハンバーガーボタン3本線 */

.navBtn button span.bar {

  display: block;

  height: 3px;

  background-color: #fff;

  margin: 8px 0;

  transition: all 0.1s;

  transform-origin: 0 0;

}

/* メニューアクティブ時 */

.navBtn button.active{

	background-color:#666;

}



.navBtn button.active span.bar {

  width: 36px;

}

.navBtn button.active .bar1 {

  transform: rotate(38deg);

}

.navBtn button.active .bar2 {

  opacity: 0;

}

.navBtn button.active .bar3 {

  transform: rotate(-38deg);

  margin-left:-2px;

}









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

	/* PCでメニュボタン非表示 */

	.navBtn{display:none;}

	

	/*　PCでメニュー常時表示　*/

	nav{

		position: static;

		transform:none;

		width:100%;

		background-color:transparent;

        font-family: "NSans-B",sans-serif;

        letter-spacing: 0.1em;

	}

	nav ul{

		width:100%;

		margin:auto;

        padding: 0;

	}

	nav ul:after{

		content:"";

		clear:both;

	}

	nav ul li {

		padding: 0;

		/*width: 20%;*/

		width: 15%;

		float:left;

		border-bottom: none;

		text-align:center;

	}

	nav ul li:last-child {

		width: 25%;

	}

	

	

	nav ul li a{

		color:#000;

        padding-bottom: 0.5em;

	}

	nav ul li.stay a,

    nav ul li a:hover{

		color:#000;

        background-image: url(../images/bg_navi_bar.png);

        background-position: center bottom;

        background-repeat: no-repeat;

	}

    nav ul li.sp{display: none;}











}