@charset: utf-8;


/* ===== header ===== */
header {
}
header h1 {
	position: relative;
	display: inline-block;
	width: 100%;
	margin-top: 5%;
	padding: 2.0rem 0 0 0;
	text-align: center;
}

header nav {
	position: fixed;
	bottom: 7.0rem;
	left: 0;
	width: 100%;
	margin-bottom: 3%;
	padding: 0;
	text-align: center;
	background-image: none;
}
header nav ul {
	display: block;
}
header nav ul li {
	display: inline-block;
	margin: 0 auto;
	float: none;
	max-width: 15.0rem;
}
header nav ul li:first-child {
	display: none;
}
header nav ul li:nth-child(odd) {
}
header nav ul li:nth-child(odd) {
}
header nav ul li img {
	width: 100%;
}


/* ===== footer ===== */

footer {
	display: block;
	position: fixed;
	bottom: 0;
	left: 0;
	clear: both;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	padding: 0.5rem;
	z-index: 1002;
}

footer section {
	margin: 0 auto;
}


footer section div.address {
	display: inline-block;
	float: left;
	font-size: 1.0rem;
	font-weight: 100;
	line-height: 1.4rem;
}
footer section div.address span {
	display: block;
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 2.0rem;
}

footer section div.reserve {
	display: inline-block;
	float: right;
	margin: 0.2rem 1.0rem;
	padding: 0.2rem 0.5rem;
	font-size: 1.0rem;
	font-weight: 100;
	text-align: center;
	background-color: rgba(255,255,255,0.4);
	border-radius: 1.0rem;
	-webkit-border-radius: 1.0rem;
	-moz-border-radius: 1.0rem;
}
footer section div.reserve span {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
}

@media screen and (min-width:481px) {

	footer section div.address {
		font-size: 1.4rem;
		line-height: 2.0rem;
	}

	footer section div.address span {
		font-size: 1.8rem;
		line-height: 3.0rem;
	}
	footer section div.reserve {
		font-size: 1.4rem;
		padding: 0.4rem 1.0rem;
	}
	footer section div.reserve span {
		font-size: 2.0rem;
	}

}


/* ===== 画面の縦横による切り分け ===== */

/* == 横 == */

@media screen and (orientation: landscape) {

	.landscape {
		display: block;
	}
	.portrait {
		display: none;
	}

	header h1 img {
		width: 30%;
		max-width: 320px;
	}
	header nav ul li {
		width: 15%;
	}

}


/* == 縦 == */

@media screen and (orientation: portrait) {

	.landscape {
		display: none;
	}
	.portrait {
		display: block;
	}

	header h1 img {
		width: 50%;
		max-width: 320px;
	}
	header nav ul li {
		width: 30%;
	}

}