/* CSS Document */
#navi{
	display: none;
	position:fixed;
	top:130px;
	background: rgba(255,255,255,1);
	padding: 10px;
	width: 100%;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: scroll;
	z-index: 1100;
	padding-bottom: 50px;
}
@media (max-width:680px){
	#navi{
		top: 105px;
	}
}
@media (max-width:580px){
	#navi{
		top: 112px;
	}
}
@media (max-width:380px){
	#navi{
		top: 125px;
	}
}

ul.menu{
	display: block;
}
ul.menu li{
	border-bottom: #CCC 1px dotted;
}
ul.menu li a{
	display: block;
	padding: 10px;
	color: #333;
	text-decoration: none;
}
#navi ul.menu li a:hover{
	background: rgba(0,0,0,0.2);
}
#navi ul.menu__second-level{
	display: none;
	padding-bottom: 15px;
}
#navi ul.menu li.menu__single a:hover{
	background: rgba(225,225,225,0.2);
}
#navi ul.menu li.menu__single a{
	display: block;
	padding: 10px;
	color: #FFF;
	text-decoration: none;
}

#navi ul.menu li.menu__single > a:after{
	content:"+";
	padding-left: 10px;
}
#navi ul.menu li.menu__single > a.active:after{
	content:"-";
}

#navi ul.menu li.menu__single ul.menu__second-level{
	margin: 0 0 0 30px;
}
#navi ul.menu li.menu__single ul.menu__second-level li{
	border-bottom: none;
}

#navi ul.menu li.menu__single ul.menu__second-level li a{
	border-bottom: none;
	padding: 5px;
}
#navi ul.menu li.menu__single ul.menu__second-level li a:before{
	content: "・";
}
#navi ul.menu li.menu__single ul.menu__second-level li a:hover{
	background: none;
	color: #CCC;
}
#navi li.close{
	display: block;
	text-align: center;
	padding-top: 20px;
	border-bottom: none;
}
#navi li.close img{
	max-width:200px;
	height: auto;
}