@charset "utf-8";
/* CSS Document */

.header{
	background: #ededec;
}
/*↓ハンバーガーメニュー↓*/
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}
.wrapper{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.logo{
	margin: 30px 0;
}
.headerNav a{
		text-decoration: none;
		color: #0d0804;/*文字色*/
}
.headerNav  a:hover{
	background: #96b021;
	color: #fff;
	}
.footer{
	background: #ededec;
	text-align: center;
	height: 200px;
	padding: 30px;
}
.footerNav a{
	text-decoration: none;
	color: #0d0804;/*文字色*/
}
.footerNav a:hover{
	background: #96b021;
	color: #fff;
}
.footerCopy{
	margin-top: 50px;
}
/*:---------------------↑全ページ共通部分↑----------------------*/
main{
	margin: auto;
	text-align: center;
	}
	h1{
	width: 70%;
	height: 90px;
	margin: 20px auto;
	border: 2px solid #775023;
	line-height: 90px;
	font-size: 2em;
	color: #775023;
	font-family: 'Zen Kurenaido', sans-serif;
}
.menuNav{
	text-align: center;
	margin: 35px auto;
}
.menuNav{
	padding-bottom: 25px;
}
.menuNav li{
	text-align: center;
	display: inline-block;
	width: 160px;
	font-size: 1em;
}
.menuNav a{
	display: table-cell;
	width: 100px;
	height: 30px;
	 vertical-align: middle;
	color: #fff;
	text-decoration: none;
	background: #96b021;
}
.menuItem p{
		width: 200px;
		height: 50px;
		padding-top: 14px;
		padding-right: 0px;
		padding-left: 20px;
		padding-bottom: 20px;
		text-align:center;
		letter-spacing: 0px;
		font-family: 'Klee One', cursive;
	}
.menuItem h3{
	color: #0d0804;
}
#drink{
		clear: both;
		margin: auto;
		width: 100%;
		padding-top: 20px;
	}
#drink h2,#food h2{
	font-family: 'Cardo', serif;
	font-size: 2em;
	color: #775023;
}
#food{
	clear: both;
	padding-top: 40px;
}
.bdr{
		border-top: 5px solid #775023;
}
.footer{
		clear: both;
}


@media(max-width:959px){/*ーーーーーーーーーーーーーーーースマホ版*/
		.headerNav a{
		width: 210px;
		padding: 0px 20px;
		line-height: 1.5em;
	}
	.nav_item{
		text-align: center;
		margin: 40px;
	}
	.nav_content{
		padding-top: 50px;
	}
	/*↓ハンバーガーメニュー↓*/
	/* ↓ハンバーガーアイコンの設置スペース ↓*/
	.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}
/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #96b021;
  transition: 0.5s;
  position: absolute;
}
	/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #ededec;
  transition: .5s;
}
/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}
/*↑ハンバーガーメニュー↑*/
	.footerNav{
		display: inline-block;
		text-align: left;
	}
	.footerNav a{
		padding-left: 20px;
		padding-right: 40px;
		line-height: 1.5em;
	}
	
/*:---------------------↑全ページ共通部分↑----------------------*/
	.menuItem{
		width: 225px;
		float: left;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: 0px;
	}
	.menuItem img{
		margin-bottom: 10px;
	}
	.menuItem p{
		width: 205px;
		height: 50px;
		padding-top: 14px;
		padding-right: 0px;
		padding-left: 20px;
		padding-bottom: 20px;
		font-size:12px;
		text-align:center;
		letter-spacing: 0px;
	}
}

@media(min-width:960px){/*ーーーーーーーーーーーーーーーーーーーPC版*/
	.headerNav{
		display: flex;
	}
	.headerNav a{
		padding: 10px 20px;
		margin: 0 10px;
	}
	main{
	width: 960px;
	}
	.footerNav{
		width: 960px;
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
		padding: 20px;
	}
	.footerNav a{
		padding: 10px 20px;
		margin: 0 10px;
	}
	
/*:---------------------↑全ページ共通部分↑----------------------*/
	.menuItem{
		width: 300px;
		height: 500px;
		float: left;
		margin-left: 10px;
		margin-right: 0px;
	}
	.menuItem img{
		margin-bottom: 10px;
	}
	.menuItem p{
		width: 280px;
		height: 50px;
		padding-top: 14px;
		padding-right: 0px;
		padding-left: 20px;
		padding-bottom: 20px;
		font-size:12px;
		text-align:center;
		letter-spacing: 0px;
	}
}