/*------------------------------------------
				リセット
------------------------------------------*/

* {
	padding:0;
	margin:0;
}


/*------------------------------------------
				スタイル設定
------------------------------------------*/

/*****headerのスタイル設定*****/

.header {
	background:#CCC;
	width:100%;
	height:50px;
	position:fixed;
	filter:drop-shadow(0 0 10px rgba(0,0,0,.5));
}


/*****クリックできる範囲を拡張＆配置*****/

.ham-wrapper {
	display:block;
	width:40px;
	height:30px;
	position:absolute;
	top:7px;
	right:7px;
}


/*****三本線のスタイル設定*****/

.ham-icon , 
.ham-icon::before , 
.ham-icon::after {
	background-color:#333;
	width:40px;
	height:4px;
	right:0;
}

.ham-icon {
	position:relative;
	top:15px;
}

.ham-icon::before , 
.ham-icon::after {
	content:"";
	display:block;
	position:absolute;
}

.ham-icon::before {
	top:-15px;
}

.ham-icon::after {
	top:15px;
}


/*****ナビゲーションのスタイル設定*****/

.ham-nav {
	transform:scale(1,0);
	background-color:#CCC;
	position:fixed;
	width:100%;
	height:calc(100vh - 50px);
	top:50px;
	left:0;
  overflow-y:auto;
}

.ham-nav ul {
	padding:0 10%;
	border-top:1px solid #333;
}

.ham-nav li {
	list-style:none;
	border-bottom:1px solid #333;
}

.ham-nav a {
	display:block;
	padding:20px 0;
	text-align:center;
	text-decoration:none;
}


/*------------------------------------------
		.activeが付いた時の設定
------------------------------------------*/

/*****Ｘの設定*****/

.ham-wrapper.active .ham-icon {
	background-color:rgba(0,0,0,0);
}

.ham-wrapper.active .ham-icon::before , 
.ham-wrapper.active .ham-icon::after {
	top:0;
}

.ham-wrapper.active .ham-icon::before {
	transform:rotate(45deg);
}

.ham-wrapper.active .ham-icon::after {
	transform:rotate(-45deg);
}


/*****ナビゲーションの設定*****/

.ham-nav.active {
	transform:scale(1,1);
}

$('#js-ham-toggle').on('click', function () { //#js-ham-toggleをクリックしたら
  $('#js-ham-toggle').toggleClass('active'); //#js-ham-toggleにactiveクラスを付け外し
  $('#js-ham-nav').toggleClass('active'); //js-ham-navにactiveクラスを付け外し
});