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

* {
	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));
}


/*****checkboxを見えなくする*****/

.ham-checkbox {
	display:none;
}


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

.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;
}


/*------------------------------------------
		checkboxがonの時の設定
------------------------------------------*/

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

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

.ham-checkbox:checked ~ .ham-wrapper .ham-icon::before , 
.ham-checkbox:checked ~ .ham-wrapper .ham-icon::after {
	top:0;
}

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

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


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

.ham-checkbox:checked ~ .ham-nav {
	transform:scale(1,1);
}