/*CSS REST*/
*{
	margin: 0; 
	padding: 0;
}
img{border: 0;}
body {
	font-family: "Arial", "メイリオ", "MS Pゴシック" ;
	font-size: 14px;
}

/*スマホ用のcssを記述*/

@media screen and (max-width: 500px){
	header{
		position: fixed;
		width: 100%;
		height: 70px;
		background: #d2b48c;
		z-index: 1000;
		}

	#logo{
		margin: 0px auto;
		text-align : center
	}
	#logo img{
	height: 60px;
	}

	#photobox{
		padding-top: 70px;
		z-index: -9000;

	}
	a {
 	 text-decoration: none;
 	 color: #000;
	}
	
	#kanban{
		height: 100%;
	}

	#address{
			position: fixed;
			width: 100%;
			bottom: 0px;
	   		opacity: 0.9;
	}
	#sns{
		padding-top: 5px;
		position:absolute; top:10px;
	}
	#sns img{
	height: 40px;
	padding: 0 5px 0 5px;

	}	
	#tenpobox{
		display: inline-block;
		width: 100%;
		margin: 5px 4%;
	}

	.tenpo,.round2{
		line-height: 30px;
		text-align: center;
		background-color:#290702; 
		float: left;
		font-size: 12px;
		color: #fff;
		margin-right: 2%;
		}
	.tenpo{
		width:20%;	
	}
	.round2{
		width:70%;
		font-size: 16px;
	}
	
	#navbox{
		clear: both;
		opacity:0.9; 
	}
	.round1{
		display:none;
	}

	#time{
		display:none;
	}
	#newsbox{
		width: 100%;
		margin:0px auto;
	}
	#news{
		width: 90%;
		height: 100px;
		margin: 10px auto 10px;
		padding: 10px;
		background: #e9dacb;
	}
	#news_p{
		width: 90%;
		height: 350px;
		margin: 10px auto;
		text-align: center;
	}
	p.newsText{
		font-size: 12px;
		padding-bottom: 5px;
		margin-top:15px;
		border-bottom: 1px dashed #000;
	}
	h3{
		font-size: 16px;
		color: #000;
		border-bottom:3px solid;
	}
	#menu{
		width: 100%;
		height: 250px;
		margin-top: 20px;
	}
	


	ul.nav{
		width: 100%;
		height: 60px;
		color: #000;
		clear: both;

	}

     #nav-content ul{
     	padding-top: 5px;
     }
     #nav-content ul li{
     	list-style-type: none;
     	font-size: 15px;
         	}
 
     #nav-content ul li > ul li{

    	padding-left:1em;
		text-indent:1em;
     }


     #nav-content a{
     	display: block;
     	text-decoration: none;
     	color:#000;
     	margin: 0 15px;
     	padding: 10px;
     	transition: .5s;
     }
     #nav-content li a:hover{
     	color: #ff8c00;
     
     }	
	.nav li li{/*子階層以降共通*/
		height: 0;
		overflow: hidden;/*はみでた要素の表示方法 */
		transition: .5s;
	}

	.nav li:hover > ul >li{
		height: 30px;
		overflow: visible;/*はみ出して表示*/
	}
	.nav > li > ul:before{/*子階層*/
    	border: 10px solid transparent;
    	border-top: 15px solid #ffa500;
    	content: "";
    	position: absolute;
    	right: 15px;
   		transform: translateY(-30px);
   	}

    .parent {
        margin: 5px auto;
        height: 500px;
     }
    .child{
    	display: inline-block;
    	width: 45%;
    	height: 200px;
 		margin: 0 2%;
      }
     
 
    .menu_name{
        clear: both;
    	padding:0px;
    	width: 100%;
    	font-size: 15px;
    	text-align: center;
    	margin-top: 10px;

    }
    .menu_photo{
    	float: left;
    	width: 100%;
    	height: 135px;
     	margin: 0px 0%;
    }
    .menu_img {
    	width: 100%;
    } 

    .price{
    	width: 100%;
    	float: left;
    	color:#ff0000;
    	text-align: center;
    	font-size: 16px;
     	margin-right: 3%;    	
    }
    .more{
    	width: 50%;
    	float: right;
    	background-color: #ffa500;
    	text-align: center;
    	margin-right: 3%;    	
    }    
    .other{
    	line-height: 30px;
    	font-size: 14px;
        background: #583822; 
    	text-align: center;
    	margin: 10px;
    	padding: 1%;

    } 
     #nav-content{
     	position: absolute;
     	top:0;
     	/*ナビメニューを左に隠した状態*/
     	left:-60%;
     	width: 60%;
     	height: 100vh;
     	background-color: #fff;
     	/*0.7秒かけてナビメニューがスライドする*/
     	transition: .7s;
     }

     /*ハンバーガーメニュー位置・幅・高さ*/
     #hamburger{
     	display: block;
     	position: absolute;
     	top:10px;
     	right: 30px;
     	width: 40px;
     	height: 44px;
     	cursor: pointer;
     	transition: 1s;
     }
      /*ハンバーガーメニュー線幅・色*/
     .inner_line{
     	display: block;
     	position: absolute;
     	left: 0;
     	width: 50px;
     	height: 3px;
     	background-color: #000;
     	transition: 1s;
     	border-radius: 4px;
     }
     #line1{
     	top: 0;
     }
     #line2{
     	top:20px;
     }
     #line3{
     	bottom:0px;
     }
     /*ハンバーガーメニュー動き*/
     .in{
     	transform: translateX(100%);
     }
     .line_1,.line_2,.line_3{
     	background:#000;
     }
    .line_1 {
  		transform: translateY(20px) rotate(-45deg);
  		top: 0;
     }
     .line_2{
     	opacity: 0;
     }
     .line_3 {
  		transform: translateY(-20px) rotate(45deg);
 		 bottom: 0;
     }
     footer{
     	display: none;
	 }
	h1{
		font-size: 15px;
		padding: 0.5em;/*文字周りの余白*/
  		color: #494949;/*文字色*/
  		background: #e9dacb;/*背景色*/
 		border-left: solid 10px #290702;/*左線（実線 太さ 色）*/
 		margin: 5px;
		}
	a {/*電話番号*/
 	 text-decoration: none;
 	 color: #fff;
	}		
}

/*共通*/
/* サイト全体のフォント指定 */


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

	header{
		position: fixed;
		background: #fff;
		width: 100%;
		top: 0;
		z-index: 9999;
		 }
	header,	#kanban{
		height: 150px;
	} 
	#kanban{
		width: 960px;
		margin: 0px auto;
	}

	#container{
		width: 960px;
		height: auto;
		margin: 0px auto;
	}
	#photobox{
		padding-top: 200px;
		z-index: -9999;

	}
	
	#logo{
		width: 200px;
		height: 109px;
		float: left;
		margin-top: 11px;
	}
	#sns{
		float: right;
		padding-bottom: 0;
		height:60px;
		margin: 40px 10px 10px 0;
		}
	#sns img{
		margin-right: 20px;
		height: 60px;
	}
	#address{
		width: 385px;
		float: right;
		color: #000;
	}


	#tenpobox{
		margin-top: 30px;
		width:390px;
		height: 40px;
		float: left;
		}
	#time,.tenpo,.round1, .round2{
		background-color: #d2b48c;
		color: #000;
		text-align: center;
		float: left;	
	}
	#time,.round1, .round2{
		border-radius: 5px;
		font-size: 16px;
	}	
	#time{
		width: 385px;
		margin:5px auto;
	}	
	.tenpo{
		width:70px;
		line-height: 20px;
		border-radius: 10px;
		margin: 12px auto;
		font-size: 12px;
	}

	.round1, .round2{
		width:150px;
		line-height: 30px;
		margin:7px 5px;
		}

	.tenpo:hover,.round1:hover,.round2:hover {
			color:#fff; 
			transition: all  0.3s ease;
	}		
	.tenpo a,.round2 a{
		color:#000; 
	}
	#navbox{
		width: 100%;
		background-color: #290702;
	}
	#navbox,.nav,.nav li a{
			height: 50px;
	}
	.nav{
		display: flex;/*フレックスボックス*/
		width: 960px;
		margin:0px auto;
		}
	.nav > li{/*親階層のみ*/
		width: 192px;
		}
	.nav li{/*全てのリスト・リンク共通*/
		list-style: none;
		position: relative;
	}
	li {
	 	border-left: 1px solid #fff;
		border-right: 1px solid #fff;
	}
	li+ li {
		border-left: 0;
    	border-right:1px solid #fff;
    }
	.nav li a{	
		display: block;
		line-height: 50px;
		text-align: center;
		text-decoration: none;
		width: 100%;
		font-size: 14px;
		color:#fff;
	}
	.nav li li{/*子階層以降共通*/
		height: 0;
		overflow: hidden;/*はみでた要素の表示方法 */
		transition: .5s;
	}
	.nav li li a{
		border-top: 1px solid #fff;
		background-color: #e9dacb;
		color: #6f5436 ;
	}
	.nav li:hover > ul >li{
		height: 50px;
		overflow: visible;/*はみ出して表示*/
		background-color: #ff6347;
	}

	.nav li li:hover a {
    background: #c49a6a;
    color: #fff;
}

	.nav > li > ul:before{/*子階層*/
    	border: 5px solid transparent;
    	border-top: 5px solid #fff;
    	content: "";
    	right: 1rem;
    	position: absolute;
    	top: 1rem;
    	transform: translateY(-40%);
	}

	a {/*電話番号*/
 	 text-decoration: none;
 	 color: #fff ;
	}

    .parent {
      		margin-bottom: 50px;
      		width: 100%;
      		height: 300px;
      		font-size:0;/*display: inline-block;で隙間ができちゃうのでサイズを0に指定*/
           }

      .child {
      	display: inline-block;
        width: 25%;
      	font-size:14px;
    
      }
     .child-box{
    	display: inline-block;
    	width: 45%;
    	height: 250px;
 		margin: 0 2%;
 		background-color: #d3d3d3
      }  
      .menu_img {
    	width: 100%;
    } 
      
    .menu_photo{
    	float: left;
    	width: 95%;
    	height: 155px;
    	margin: 5px 2%;
    }

    .number{
    	float:left;
    	width: 15%;
    	padding:2%;
    	margin-left: 2%;
    	background-color: #d2b48c;
    	border-radius:5px;
    }

    .menu_name{
    	float: left;
       	width: 92%;
       	margin: 2%;
       	padding: 2%;
     	text-align: center; 
     	background-color: #d2b48c;	 	
    } 
    .price{
    	width: 100%;
    	float: left;
    	color:#ff0000;
    	text-align: center;
    	font-size: 16px;
     	margin-right: 3%;    	
    }
    .more{
    	width: 50%;
    	float: right;
    	background-color: #ffa500;
    	text-align: center;
    	margin-right: 3%;    	
    }    
    .other{

    	line-height: 30px;
    	font-size: 14px;
    	clear: both;
    	color: #fff;
    	width: 100%;
        background: #583822; 
    	text-align: center;
    	margin-top:30px;
    
    } 
	.clear{
		clear: both;
	}
	#mainVisual{
		width: 960px;
		height: 260px;
		margin-top:30px;
	}

	#newsbox{
		width: 800px;
		height: 217px;
		margin:-top:30px;
		margin:10px auto;
	
	}
	#news{
		clear: both;
		width: 700px;
		height: 150px;
		margin: 0px auto 30px;
		padding: 10px;
		background: #e9dacb ;
	}
	#news_p{
	
		width: 200px;
		height: 300px;
		background-color: #fff;		
	}	
	h3{
		font-size: 16px;
		color: #000;
		border-bottom:3px solid;
	}
	p.newsText{
		font-size: 12px;
		padding-bottom: 5px;
		margin-top:15px;
		border-bottom: 1px dashed #000;
	}
	#menu{
		width: 960px;
		height: 250px;
		margin-top: 20px;
	}
	.photo{
		width: 460px;
		height: 250px;
		float: left;
	
	}
	.photo2{
		width: 460px;
		height: 250px;
		float: left;
		margin-left:40px;
	
	}
    footer{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        font-size: 15px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        background: #290702;
    }
	h1 {
		font-size: 20px;
		padding: 0.5em;/*文字周りの余白*/
  		color: #000;/*文字色*/
  		background: #e9dacb;/*背景色*/
 		border-left: solid 10px #290702;/*左線（実線 太さ 色）*/
 		margin-bottom: 5px;

    }
    h1.top{
        margin-top: 200px;    	
    }
    #barsha{
     	margin-top: 200px;

 
   }
}
/*画面サイズ768以上では発信しない*/
@media screen and (min-width: 768px) {
 	a[href^="tel:"]{
    pointer-events: none;
  }
}