nav{
    width: 100%;
}
    nav span.open{
	display: none;
    }
    nav span.close{
	display: none;
    }
    nav ul{
	text-align: center;
	width: 100%;
    }
    nav.header ul{
	background-color: #775555;
    }
    nav.footer ul{
	background-color: #555577;
    }
	nav ul li{
	    display: inline-block;
	    padding: 0 1em;
	    margin: 0.5em 0;
	    color: #FFFFFF;
	    width: 12%;
	    vertical-align: top;
	}
	    nav ul li img{
		width: 70%;
	    }
	    nav ul li small{
		display: block;
		font-size: 0.8em;
		margin-top: 0.5em;
		opacity: 0.5;
	    }
	    nav ul li a{
		color: #FFFFFF;
		opacity: 0.7;
	    }
	    nav ul li a:hover{
		opacity: 1;
	    }
	nav.footer ul li{
	    vertical-align: bottom;
	}


/*スマホ用*/
@media screen and (max-width: 500px){
    nav{
	position: fixed;
	bottom: 0;
	z-index: 10;
    }
    nav.header span.open{
	display: block;
	position: absolute;
	z-index: 11;
	color: #FFFFFF;
	bottom: 0;
	left: 0;
	border: 1px solid #FFFFFF;
	border-radius: 10px;
	background-color: rgba(200,150,150,0.7);
	padding: 0.5em;
	width: 9%;
	font-size: 0.9em;
	text-align: center;
    }
	nav.header span.open img{
	    width: 100%;
	}
    nav.header span.close{
	display: none;
	position: absolute;
	font-size: 1.5em;
	border: 1px solid #FFFFFF;
	right: 0.2em;
	bottom: 0.2em;
	border-radius: 2em;
	padding: 0.2em 0.5em;
	color: #FFFFFF;
	background-color: rgba(255,150,150,0.6);
	cursor: pointer;
    }
	nav.header ul{
	    display: none;
	    background-color: rgba(100,50,50,0.8);
	    text-align: right;
	}
	nav.header ul{
	}
	    nav.header ul li{
		width: 38%;
		border: 1px solid rgba(255,255,255,0.9);
		padding: 1em 0.3em;
		background-color: rgba(180,130,130,0.9);
		margin-right: 1%;
		text-align: center;
	    }
	
	nav.footer ul{
	    display: none;
	}
}