@charset "utf-8"; 
/*hambargermenu*/
.navbar {
width; 100%; 
height: 45px; 
background: #4169e1;
}

.globalMenuSp {  /*menu liをnabbar height分上へ上げる*/
margin-top: -45px;
}

ul {
width: 75%;
height: 45px;
margin: 0 auto;
}
/*menu end*/

@media screen and (max-width: 764px) {/*hambarger menu*/

/*sm menu*/
	.navbar{
		display: none;
	}

	.globalMenuSp {
		margin-top: 0;
	}

	ul {
		width: 100%%;
		height: auto;
	}

	.hamburger {
  	display : block;
  	position: fixed;
  	z-index : 3;
  	right : 20px;
  	top   : 20px;
  	width : 42px;
  	height: 42px;
  	cursor: pointer;
  	text-align: center;
	}

	.hamburger span {
  	display : block;
  	position: absolute;
  	width   : 30px;
  	height  : 4px ;
  	left    : 6px;
  	//background : #BBBBBB;
  	background :red;
  	-webkit-transition: 0.3s ease-in-out;
  	-moz-transition   : 0.3s ease-in-out;
  	transition        : 0.3s ease-in-out;
	}

	.hamburger span:nth-child(1) {
  top: 10px;
	}

	.hamburger span:nth-child(2) {
  	top: 20px;
	}

	.hamburger span:nth-child(3) {
  	top: 30px;
	}

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

	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
  	top: 16px;
  	background :#fff;
  	-webkit-transform: rotate(45deg);
  	-moz-transform   : rotate(45deg);
  	transform        : rotate(45deg);
	}

/* メニュー背景　*/
	nav.globalMenuSp {
  	position: fixed;
  	z-index : 2;
  	top  : 0;
  	left : 0;
  	color: #fff;
		background: rgba( 71,70,73,0.6 );
  	text-align: center;
  	width: 100%;
  	transform: translateY(-100%);
  	transition: all 0.6s;
	}

	nav.globalMenuSp ul {
  	margin: 0 auto;
  	padding: 0;
  	width: 100%;
	}

	nav.globalMenuSp ul li {
  	list-style-type: none;
 	 padding: 0;
  	width: 100%;
  	transition: .4s all;
	}

	nav.globalMenuSp ul li:last-child {
  	padding-bottom: 0;
	}	

	nav.globalMenuSp ul li:hover{
  	background :#ddd;
	}

	nav.globalMenuSp ul li a {
  	display: block;
  	//color: #fff;
  	color: red;
  	padding: 1em 0;
  	text-decoration :none;
	}

/* クリックでjQueryで追加・削除 */
	nav.globalMenuSp.active {
	  opacity: 100;
 	 display: block;
   transform: translateY(0%);
	}
}