@charset "utf-8";

/*====================================================================
**** ハンバーガーメニュー ****
====================================================================*/
/****メニュー全体****/
#menu{
	/*配置*/
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
}

/****メニュー開閉ボタン****/
#menu div{
	/*デザイン*/
	width: 50px;
	height: 50px;
	background: ;
	background-image: url(../img/mene.png);
	background-repeat: no-repeat;  /* 画像並び方設定 */
	background-position: center;  /* 画像位置設定 */
	/*配置*/
	overflow: hidden;
	position: absolute;
}

#menu .menuopen{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: block;
	width: 80%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

#menu .menuclose{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

/****メニュー一覧****/
#menu ul{
	/*デザイン*/
	background: rgba(200,200,200,1);
	width: 80%;
	/*max-width: 80%;*/
	/*配置*/
	position: absolute;
	top: 30px;/*#menu divの高さ*/
	left: 0;
	display: none;
}

#menu li{
	/*デザイン*/
	padding: 10px;
	color: rgba(0,0,0,1);
	border-bottom: 1px rgba(255,255,255,1) solid;
	/*配置*/
	pointer-events: auto;
}

/****メニューオープン時****/
#menu:target .menuopen{
	/*配置*/
	display: none;
}

#menu:target .menuclose{
	/*配置*/
	display: block;
}

#menu:target ul{
	/*配置*/
	display: block;
}

/*** メインエフェクト ***/
#main{
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

#menu:target ~ #main{
	-webkit-filter:sepia(100%);
	-moz-filter:sepia(100%);
	-ms-filter:sepia(100%);
	filter:sepia(100%);
}