@charset "UTF-8";

/*========
共通
=========*/
body{
	margin:0;
	padding:0;
	
	}

ul{
	list-style-type:none;
	
	}

/*========
ブロック
=========*/
/*ヘッダー*/
header{
	padding:25px 3%;
	background-color:#cd853f;
	
	}

.header-in{
	display:flex;
	align-items:center;
	flex-direction:column;
	
	}

.header-neme{
	font-family: "Nanum Gothic Coding", monospace;
	font-weight: 600;
	font-style: normal;
	font-size:190%;
	padding:16px 0;
	color:#fff;
	
	}

/*ナビ*/
nav ul{
	display:flex;
	justify-content:center;
	padding:16px 0 0;
	margin:0;
	color:#fff;
	
	}

nav li{
	font-size:83%;
	padding-left:10px;
	padding-right:12px;
	border-right:1px solid #fff;
	
	}

nav li:first-child{
	border-left:1px solid #fff;
	
	}


/*リンク*/
a{
	color:inherit;
	text-decoration:none;
	
	}

/*ヒーローイメージ*/
.hero{
	background:url(img/hero.jpg);
	background-size:cover;
	background-position:center;
	height:480px;
	color:#fff;
	padding:15px;
	box-sizing:border-box;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-direction:column;
	position:relative;
	
	
	}

.catch{
	position:absolute;
	transform: translate(-50%,-50%);
	top:10%;
	left:50%;
	
	}

.catch h1{
	font-size:160%;
	font-family:serif;
	width:400px;
	text-align:center;
	text-shadow:0px 0px 20px #fff;
	color:#800000;
	
	}

/*流れる写真*/
#streaming-img{
	position: relative;
	background-image:url(img/store.jpg);
	background-repeat: repeat-x;
	background-size: cover;
	width: 100%;
	height: 150px;
	margin-top:15px;

	}


/*最新情報*/
.news{
	padding:8% 0% 9%;
	
	}

.news h2{
	font-size:120%;
	text-align:center;
	margin:0% 0% 2%;
	color:#daa520;
	
	}

.news ul{
	padding:0;
	
	}

.news li{
	margin:0% 6%;
	padding:3% 0% 3% 2%;
	border-bottom:0.5px solid #ffdead;
	font-size:95%;
	color:#000;
	
	}

/*ブロック*/
.conteiner{
	color:#fff;
	
	}

.conteiner h3{
	margin:0;
	font-family: "Kiwi Maru", serif;
	font-weight: 400;
	font-style: normal;
	font-size:160%;
	
	}

.conteiner p{
	margin:0;
	padding-top:15px;
	font-family: "Kiwi Maru", serif;
	font-weight: 400;
	font-style: normal;
	font-size:100%;
	
	}

.orennji{
	background-color:#f4a460;
	padding:25px 4%;
	display:flex;
	justify-content:space-between;
	
	}

.midori{
	background-color:#bdb76b;
	padding:25px 4%;
	display:flex;
	justify-content:space-between;

	}

.ao{
	background-color:#4682b4;
	padding:25px 4%;
	display:flex;
	justify-content:space-between;
	
	}

/*フッター*/
footer{
	text-align:center;
	margin:8% 0 0;
	padding:5% 0;
	background-color:#cd853f;
	color:#fff;
	
	}

/*============
pic.htmlに追加
=============*/
/*pic.html 共通*/
.pic h1{
	font-size:180%;
	padding-left:10px;
	border-left:20px solid #cd853f;
	
	}

.pic h2{
	font-size:150%;
	padding:0 0 0 10px;
	margin:25px 0 5px;;
	border-left:10px solid #deb887;
	
	}

.jyouhoutext{
	margin:0;
	padding:0 0 8px 5px;
	font-size:88%;
	
	}


/*pic.html　ブロック*/
.pic{
	padding:0 4%;
	
	}

.picbox{
	margin-top:50px;
	
	}

.title{
	margin-top:80px;
	
	}

.picimg{
	background-size:cover;
	background-position:center;
	width:100%;
	height:270px;
	margin:0;
	
	}

.i{
	background:url(img/soba.jpg);
	
	}
.j{
	background:url(img/baguette.jpg);
	
	}

.k{
	background:url(img/flower.jpg);
	
	}

.m{
	background:url(img/beer.jpg);
	
	}

.n{
	background:url(img/glasses.jpg);
	
	}


.pege{
	margin-top:80px;
	
	}

/*お店情報*/
table{
	border-collapse:collapse;
	
	}

th,td{
	border:solid 1px #ccc;
	padding:18px;
	
	}

th{
	width:5em;
	text-align:center;
	background-color:#cd853f;
	color:#fff;
	
	}

td{
	background-color:#faf0e6;
	
	}



/*サブ記事*/
.sab ul{
	padding:3%;
	margin:0;
	border:1px solid #cd853f;
	
	}

.sab{
	max-width:395px;
	margin-top:80px;
	
	}

.sab a{
	display:flex;
	text-align:center;
	align-items:center;
	margin-bottom:10px;
	
	}

.sab h3{
	font-size:140%;
	padding:0 0 8px 5px;
	margin:35px 0 0;
	padding:0 0 0 10px;
	margin:25px 0 5px;;
	border-left:10px solid #deb887;
	
	}

.sab h4{
	font-size:115%;
	font-weight:400;
	margin:0 0 0 15px;
	
	}

span.site{
	display:inline-block;

	}

.sab figure{
	width:100px;
	flex:none;
	margin:0;
	
	}

.sab img{
	vertical-align:bottom;
	
	}

/*イベント*/
.ibento{
	padding:0 4%;
	
	}

.ibentotxt h1{
	font-size:180%;
	padding-left:10px;
	border-left:20px solid #cd853f;
	margin:20px 0 0;
	
	}

.bideo h2{
	font-size:125%;
	padding:0 0 0 10px;
	margin:25px 0 5px;;
	border-left:10px solid #deb887;
	
	}

/*問い合わせ*/
.tel{
	padding:0 4% 0 8%;
	
	}

.tel ul{
	padding-left:5px;
	margin:1%;
	
	}

.telbox{
	margin:30px 0 50px;
	
	}

.new{
	padding:0 0 0 10px;
	margin:25px 0 5px;;
	border-left:10px solid #deb887;
	
	}

.form{
	display:block;
	width:300px;
	
	}

textarea{
	display:block;
	width:300px;
	height:120px;
	
	}

button{
	width:150px;
	height:40px;
	padding:10px;
	
	}

/*==========
pc(1024px以上の時)
===========*/
@media(min-width:1024px){
	/*ヘッダー*/
	header{
	padding:33px 4%;
	
	}
	
	.header-in{
		display:flex;
		justify-content:space-between;
		flex-direction:row;
		
		}
	
	.header-neme{
		font-size:230%;
		
		}
	
	/*ヒローイメージ*/
	.hero{
		background:url(img/heropc.jpg);
		background-size:cover;
		background-position:center;
		height:775px;
		
		}
	
	/*流れる写真*/
	#streaming-img{
		height: 300px;

		}

	
	/*最新情報*/
	.news{
		width:870px;
		margin:0 auto;
		padding:6% 0;
		
		}
	
	.news h2{
		font-size:190%;
		
		}

	.news ul{
		padding:0;
		
		}

	.news li{
		margin:0 6% 10px;
		padding:1% 0% 1% 2%;
		font-size:120%;
		
		}
	
	/*トップページ色分け*/
	.conteiner{
		display:flex;
		justify-content:center;
		
		}
	
	.conteiner h3{
		text-align:center;
		font-size:180%;
		
		}
	
	.conteiner p{
		font-size:150%;
		
		}
	
	.orennji{
		width:20%;
		height:350px;
		padding:2%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:space-around;
		
		}
	
	.midori{
		width:20%;
		height:350px;
		padding:2%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:space-around;
		
		}
	
	.ao{
		width:20%;
		height:350px;
		padding:2%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:space-around;
		
		}
	
	/*フッター*/
	footer{
		font-size:120%;
		
		}
	
	/*ピックアップ品*/
	.pic{
		display:flex;
		justify-content:space-around;
		
		}
	
	.picbox{
		width:60%;
		
		}
	
	.picimg{
		background-repeat:no-repeat;
		background-size:cover;
		width:400px;
		height:270px;
		
		}
	
	.hp{
		display:flex;
		
		}
	
	.hp :nth-child(2){
		width:60%;
		padding-left:15px;
		
		}
	
	.pege{
		margin-top:60px;
		
		}
	
	.sab{
		width:60%;
		padding-top:118px;
		
		}
	
	aside a:hover{
		background-color:#dcdcdc;
		
		}
	
	/*イベント*/
	.ibento{
		max-width:700px;
		margin:0 auto;
		
		}
	
	.bideo{
		margin-top:50px;
		
		}
	
	video{
		margin-top:20px;
		
		}
	
	/*問い合わせ*/
	.tel{
		padding:0 4%;
		margin:0 auto;
		max-width:700px;
		
		}
	

}