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

/****メニュー開閉ボタン****/
#menu div{
	/*デザイン*/
	width: 40px;
	height: 48px;
	/*配置*/
	overflow: hidden;
	position: absolute;
	top: 20px;
	right: 20px;
}

#menu .menuopen{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: block;
	width: 100%;
	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{
	/*デザイン*/
	width: 320px;
	/*配置*/
	overflow: hidden;
	position: absolute;
	top: 60px;
	right: 0;
}

#menu li{
	/*デザイン*/
	background: rgba(255,221,170,1);
	padding: 10px;
	color: rgba(20,168,59,1);
	font-size: 14px;
	border-bottom: 1px rgba(0,153,255,1) solid;
	list-style: none;
	/*配置*/
	pointer-events: auto;
	position: relative;
	right: -100%;
}

#menu li a{
	text-decoration: none;
	color: rgba(0,153,255,1);
}

#menu li a:hover {
	text-decoration: none;
	background: rgba(0,153,255,1);
	color: rgba(255,221,170,1);
}

/****#menu liの数だけずれたタイミングでアニメーション開始****/
#menu li:nth-child(1){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

#menu li:nth-child(2){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.03s;
	transition: all 0.3s ease 0.03s;
}

#menu li:nth-child(3){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.06s;
	transition: all 0.3s ease 0.06s;
}

#menu li:nth-child(4){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.09s;
	transition: all 0.3s ease 0.09s;
}

#menu li:nth-child(5){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.12s;
	transition: all 0.3s ease 0.12s;
}

#menu li:nth-child(6){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.15s;
	transition: all 0.3s ease 0.15s;
}

#menu li:nth-child(7){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.18s;
	transition: all 0.3s ease 0.18s;
}

#menu li:nth-child(8){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.21s;
	transition: all 0.3s ease 0.21s;
}

#menu li:nth-child(9){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.24s;
	transition: all 0.3s ease 0.24s;
}

#menu li:nth-child(10){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.27s;
	transition: all 0.3s ease 0.27s;
}

#menu li:nth-child(11){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.3s;
	transition: all 0.3s ease 0.3s;
}

#menu li:nth-child(12){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.33s;
	transition: all 0.3s ease 0.33s;
}

#menu li:nth-child(13){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.36s;
	transition: all 0.3s ease 0.36s;
}

#menu li:nth-child(14){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.39s;
	transition: all 0.3s ease 0.39s;
}

#menu li:nth-child(15){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.42s;
	transition: all 0.3s ease 0.42s;
}

#menu li:nth-child(16){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.45s;
	transition: all 0.3s ease 0.45s;
}

#menu li:nth-child(17){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.48s;
	transition: all 0.3s ease 0.48s;
}

#menu li:nth-child(18){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.51s;
	transition: all 0.3s ease 0.51s;
}

#menu li:nth-child(19){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.54s;
	transition: all 0.3s ease 0.54s;
}

#menu li:nth-child(20){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.57s;
	transition: all 0.3s ease 0.57s;
}

#menu li:nth-child(21){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.6s;
	transition: all 0.3s ease 0.6s;
}

#menu li:nth-child(22){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.63s;
	transition: all 0.3s ease 0.63s;
}

#menu li:nth-child(23){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.66s;
	transition: all 0.3s ease 0.66s;
}

#menu li:nth-child(24){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.69s;
	transition: all 0.3s ease 0.69s;
}

#menu li:nth-child(25){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.72s;
	transition: all 0.3s ease 0.72s;
}

#menu li:nth-child(26){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.75s;
	transition: all 0.3s ease 0.75s;
}

#menu li:nth-child(27){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.78s;
	transition: all 0.3s ease 0.78s;
}

#menu li:nth-child(28){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.81s;
	transition: all 0.3s ease 0.81s;
}

#menu li:nth-child(29){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.84s;
	transition: all 0.3s ease 0.84s;
}

#menu li:nth-child(30){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.87s;
	transition: all 0.3s ease 0.87s;
}

#menu li:nth-child(31){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.9s;
	transition: all 0.3s ease 0.9s;
}

#menu li:nth-child(32){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.93s;
	transition: all 0.3s ease 0.93s;
}

#menu li:nth-child(33){
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0.96s;
	transition: all 0.3s ease 0.96s;
}

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

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

#menu:target li{
	/*配置*/
	right: 0;
}

/*** メインエフェクト ***/