@charset "UTF-8";
/* CSS Document */
html{
	font-size: 62.5%;
}
*{
	margin: 0;
}

body{
	 font-family: 'Noto Serif JP', serif;
/*	font-family: 'Noto Sans JP', sans-serif;
	font-family: 'Noto Sans JP', sans-serif;
*/	font-size:14px;
	font-size: 1.4rem;
	color:#665544;
	background-image: url(../images/osusumeBg.jpg);
	background-position: center;
}

h1{
	text-align: center;
	margin: 0;
}

article h1{
	padding-top: 45px;
	margin-bottom: 40px;
}


ul{
	text-decoration: none;
}
li{
	list-style-type: none;
}

a{
	text-decoration: none;
	color: #fff;
}

a :visited{
	color: #9b9584;
}

figure{
	margin: 0;
}



/**********************************************************


ヘッダー部分


**********************************************************/

header{
	display: flex;
	position: fixed;　
	z-index: 99999;
}

header h1{
	font-size: 12px;
}

header p{
	font-size: 10px;
}



.top{
	height: 500px;
	text-align: center;

}

.top img{
	margin-top: 40%;
	margin-bottom: 20px;
}

.top_menu{
	height: 500px;
	text-align: center;

}

.top_menu img{
	margin-top: 30%;
	margin-bottom: 20px;
}

.top_menu_img img{
	margin-top: 30%;
	margin-bottom: 20px;
}

/*トグルボタン */



   nav {
    width: 312px;
    height: 80%;
    transition: all 0.4s;
    transform: translate(312px);
    position: fixed !important;
    top: 0;
    right: 0;
    background-color: #551387;
   }

.open ul{
	margin-top: 20px;
}
   nav.open {
    transform: translate(0); 
   }

.btn_menu{
	margin-right: 10px;
	padding: 3px;
	border: none;
	outline: none;
	background: none;
	color: #fff;
	cursor: pointer;
	font-size: 4rem;
}
.open li{
	margin-bottom: 10px;
}

/*******************************************************************


メイン


*******************************************************************/
/**********************************************


ヒーローイメージと木目背景のナビゲーションメニュー


*************************************************/

.conA{
	background-image: url(../images/topBg.jpg);
	background-size: cover;
	background-position: center;
	font-size: 2rem;
	color: #fff;
}
.wood{
	background-image: url(../images/wood.png);
	background-position: center;
	background-size: cover;
	font-size: 2rem;
	
}
.wood .flex h1{
	font-size: 1.8rem;
	color: #f3d39c;
	padding: 5px;
	margin-bottom: 0;
}

.wood p {
	font-size: 1.6rem;
	padding: 5px;
}

.wood h3{
	background-color: #fff;
	color: #5f3033;
	text-align: center;
	margin-bottom: 5px;
}
.wood .flex{
	display: flex;
	justify-content: space-around;
	align-items: center;

}
.pc{
	display: none;
}
/*
パンくずリスト*/

.bread{
	padding-top: 40px;
	margin-bottom: 40px;
}
.bread a{
	color: gray;
}
.bread a:hover{
	text-decoration: underline;
}

.bread ul{
	display: flex;
	color: gray;
	padding-left: 5%;
}

.bread img{
	margin:0 5px 5px;
}
/**********************************************


おすすめメニュー


*************************************************/
.osusumeBg{
/*	background-image: url(../images/osusumeBg.jpg);
	background-size: cover;
	background-position: center;
*/	color: black;
	padding: 50px 15px 30px;
	color: #665544;

}

 h2{
	position: relative;
	margin-left: 3rem;
	margin-bottom: 0.5rem;
}



 h2::before{
position:absolute;
	left:0;
	content:"";
	width:1.2em;
	height:2em;
	background:url(../images/ushiIcon.png) no-repeat;
	background-size:contain;
	margin-left: -3rem;
	margin-top: 0.5rem;
}
.osusumeBg h2{
	z-index: -999;
}

.osusume a{
	text-align: center;
	
}

.osusume .flex{
	text-align: center;
	position: relative;
	z-index: -999;
	
}

.osusume .flex p{
-webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
	font-size: 1.8rem;
	color: black;
	background-color: #fff;
	padding: 20px 10px;
}
.harami {
	margin-top: 8rem;
	margin-bottom: 3rem;
	position: relative;
}
.haramiName{
	position: absolute;
	top: -20%;
	right: 20%;
}
.tan {
	margin-top: 8rem;
	margin-bottom: 8rem;
	position: relative;
}

.tanName{
	position: absolute;
	top: -15%;
	right: 25%;
}

.menuButton{
	text-align: center;
	background-color: #c65837;
	color: #fff;
	padding: 2rem 4rem;
	display: inline-block;
    width: 80%;
    margin-left: 10%;}

.menuButton2 a{
	position: relative;
}

.menuButton a{
	position: relative;
}

.menuButton:hover{
	background-color: #fff;
	color: #c65837;
	border: 1px solid #c65837;
	
}
.menuButton2{
	text-align: center;
}

/*下から出てくる*/
.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}
/**********************************************


店情報


*************************************************/
.storeBg{
	padding:0px 15px 20px;
	background-image: url(../images/storeBG.jpg);
		background-repeat: repeat;
	background-size: contain;
	background-position: center;
    position: relative;
    z-index: -9999;	}

.storeBg.flex{
	padding:0px 15px 20px;
	background-image: url(../images/storeBG.jpg);
		background-repeat: repeat;
	background-size: contain;
	background-position: center;
	
}

.store{
	margin: auto;
	padding-top: 50px;
	
}
.store p{
/*letter-spacing: 0.2em;*/
font-weight:bold;
padding: 0 0 0.2em;
border-bottom:1px solid #513600;
position: relative;
margin:10px 0 10px 0;
	display: inline-block;
	width: 80%;
}
 
.store p:before{
content:"";
display:block;
width:20%;
border-bottom:2px solid #f43737;
position:absolute;
bottom:0;
margin-bottom:-2px;
}

.storeCon1{
	margin-bottom: 3rem;
}

.storeCon1 h3{
	line-height: 1.7;
}

.storeCon2{
	margin-top: 3rem;
}
.storeCon2 h3{
	line-height: 1.7;
}


.sp2 {
	background-image: url(../images/storeBG.jpg);
	background-size: cover;
	background-position: center;
	padding-bottom: 30px;
}
/**********************************************


リンク


*************************************************/

.link{
	padding: 30px 15px 50px;
}

.link p{
	margin-bottom: 3rem;
}
.linkbox{
	margin-bottom: 25px;
}

.link a:hover{
	opacity: 0.5;
}

/**********************************************


メニューページ


*************************************************/


.menuConA{
	background-image: url(../images/menuBg.png);
	background-size: cover;
	background-position: center;
	font-size: 2rem;
	color: #fff;
}

.top p{
	font-size: 4rem;
	font-weight: bold;
	color: white;
	margin-bottom: 40px;
}

.menu .midashi h1{
	font-size: 20px;
	font-weight: bold;
	padding-left: 5%;
}

.top a{
	text-align: center;
	margin:auto: 
}


/*メニューナビボタン*/
.menuNav{
	text-align: center;
	background-image: url(../images/storeBG.jpg);
	background-size: cover;
	background-position: center;
}
.menuNav2{
	text-align: center;
	padding: 20px 0;
}



.menuNav a{
	display: inline-block;
	margin-top: 2rem;
	margin: 10px;
	color: #fff;
	background-color:#991113;
	padding: 1.5rem 1.5rem;
	text-align: center;
	width: 150px;
	

}
.menuNav a:hover{
	color: #991113;
	background-color:#fff;
	border: solid 1px #991113;
}

/*メニュー内容*/
.menu_wood{
		background-image: url(../images/menu_wood.jpg);
	background-repeat: repeat;
	padding-top: 20px;
	background-size: contain;
	padding-bottom: 20px;
}
.menu_paper{
		background-image: url(../images/menu_paper.jpg);
	width: 90%;
	margin: auto;
	background-repeat: repeat;
	background-size: contain;
	padding-top: 5px;
	padding-bottom: 40px;
}

.menu h1{
	background-color: #fff;
	font-size: 18px;
	margin: 10px 0px;
	padding: 10px ;
	text-align: left;
}

.menu h1 img{
margin-right: 7px;
	height: 30px;
	vertical-align: bottom;

}

.menu p{
	
color: #bd4848;
padding-bottom: 5px;
}

	.menu_img{
		margin-bottom: 25px;
}

/*セット*/

.set1 dl {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    line-height: 2.5;
    margin: 0 auto;
	width: 95%;
	margin-bottom: 20px;
}


.set1 dt{
	width: 70%;
	font-weight: bold;
	padding-left: 8px;
	font-size: 16px;
}
.set1 dd {
	line-height: 2.5;
	width: 25%;
	font-weight: bold;
	margin:0;
	font-size: 16px;
	text-align: right;
}
.set1 p{
	color: #665544;
	font-size: 13px;
	border-bottom: dotted 1px rgba(118,118,118,1.00);
	padding-left: 8px;
	width: 100%;
	padding-bottom: 5px;
}

/*ファミリーセット*/

.set2 dl{
    display: flex;
    flex-wrap: wrap;
	
    font-size: 1.4rem;
    line-height: 2.5;
    margin: 0 auto;
	width: 95%;
	margin-bottom: 20px;
}


.set2 dt{
	width:60%;
	font-weight: bold;
	padding-left: 8px;
	font-size: 16px;
}
.set2 dd {
	width: 40%;
	font-weight: bold;
	margin:0;
	font-size: 16px;
	text-align: center;
}

.set2 p{
	color: #665544;
	font-size: 13px;
	border-bottom: dotted 1px rgba(118,118,118,1.00);
	padding-left: 8px;
	width: 100%;
}

/*ご飯物*/
.set3 dl{
    display: flex;
    flex-wrap: wrap;
	
    font-size: 1.4rem;
    line-height: 2.5;
    margin: 0 auto;
	width: 95%;
	margin-bottom: 20px;
}


.set3 dt{
	width:45%;
	font-weight: bold;
	padding-left: 8px;
	font-size: 16px;
}
.set3 dd {
	width: 55%;
	font-weight: bold;
	margin:0;
	font-size: 16px;
	text-align: center;
}

.set3 p{
	color: #665544;
	font-size: 13px;
	border-bottom: dotted 1px rgba(118,118,118,1.00);
	padding-left: 8px;
}
/*ワイン*/
.set4 dl{
	display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    line-height: 2.5;
    margin: 0 auto;
	width: 95%;
	margin-bottom: 20px;
	
	
}


.set4 dt{
	width:75%;
	font-weight: bold;
	padding-left: 8px;
	font-size: 16px;
}
.set4 dd {
	width: 25%;
	font-weight: bold;
	margin:0;
	font-size: 16px;
	text-align: center;
}

.set4 p{
	color: #665544;
	font-size: 16px;
	border-bottom: dotted 1px rgba(118,118,118,1.00);
	width: 90%;
	margin: auto;
	padding-bottom: 5px;
}
.set6 dl{
	display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    line-height: 2.5;
    margin: 0 auto;
	width: 95%;
	margin-bottom: 20px;
	
	
}


.set6 dt{
	width:75%;
	font-weight: bold;
	padding-left: 8px;
	font-size: 14px;
}
.set6 dd {
	width: 25%;
	font-weight: bold;
	margin:0;
	font-size: 16px;
	text-align: center;
}

.set6 p{
	color: #665544;
	font-size: 13px;
	border-bottom: dotted 1px rgba(118,118,118,1.00);
	width: 90%;
	margin: auto;
	padding-bottom: 5px;
}

/*ワイン長い名前用*/
.set5 dl{
	display: flex;
    flex-wrap: wrap;
    font-size: 1.4rem;
    line-height: 1.8;
    margin: 0 auto;
	width: 95%;
	
	
}
.set5 dt{
	width:80%;
	font-weight: bold;
	padding-left: 8px;
	font-size: 14px;
	padding-top: 10px;
}
.set5 dd {
	width: 20%;
	font-weight: bold;
	margin:0;
	font-size: 16px;
	margin-top: 30px;
	text-align: center;
}

.set5 p{
	color: #665544;
	font-size: 13px;
	border-bottom: dotted 1px rgba(118,118,118,1.00);
	padding-left: 8px;
}

.menu_paper .red{
	color:#bd4848;
	font-size: 18px;
	border-bottom: none;
	margin-top: 10px;
	padding-left: 8px;
	font-weight: bold;
}

	.chuushaku p{
		width: 90%;
		margin: auto;
		font-size: 13px;
		color: #bd4848;
		border-bottom: none;
		}
/**********************************************


メニューページここまで


*************************************************/

/**********************************************


こだわり


*************************************************/
.bgWhite{
	background-color: #fff;
}
.kodawari_first{
		padding:15px;
	padding-bottom: 50px;
}
.kodawariConA{
	background-image: url(../images/../images/kodawari_topimage.png);
	background-size: cover;
	background-position: center;
	font-size: 2rem;
	color: #fff;
	height: 500px;
}
.top_kodawari{
	height: 500px;
	text-align: center;

}

.top_kodawari img{
	margin-top: 30%;
	margin-bottom: 20px;
}

.top_kodawari_img img{
	margin-top: 30%;
	margin-bottom: 20px;
}

.kodawariBg{
padding: 0px 15px 20px;
    background-image: url(../images/storeBG.jpg);
    background-repeat: repeat;
    background-size: contain;
    background-position: center;
}
.kodawari_button{
	margin-top: 15px;
}

.kodawari_button a{
display: inline-block;
    margin-top: 2rem;
    margin: 10px;
    color: #fff;
    background-color: #991113;
    padding: 1.5rem 1.5rem;
    text-align: center;
width: 80%;}

.kodawari_button a:hover
{
color: #991113;
background-color: #fff;
border: solid 1px #991113;}


.kodawari_button{
	text-align: center;
}

.kodawari_naiyou{
	padding-top: 30px;
	padding-bottom: 30px;
}

.kodawari_right{
	margin-top: 15px;
	margin-bottom: 15px;
}
.kodawariFlex{
	margin-bottom: 50px;
}.kodawariFlex2{
	margin-bottom: 50px;
}
/**********************************************


こだわりここまで


*************************************************/

/*ページトップボタン*/

#pageTop {
  position: fixed;
  bottom: 25px;
  right: 55px;
}

 

#pageTop i {
  padding-top: 6px
}

 

#pageTop a {
  display: block;
  padding: 8px 0 0 8px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #fff;
  color: #a49e8f;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

 

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}









/**********************************************


フッター


*************************************************/
footer{
	background-image: url(../images/footerBg.jpg);
	background-size: cover;
	background-position: center;
	margin: auto;
	color: #fff;
	padding-top: 2rem;
	padding-bottom: 2rem;
}

footer .flex{
	display: flex;
	align-items: center;
	justify-content: center;
}

footer li{
	margin: 0 1rem;
}

footer p{
	margin-top: 1rem;
	text-align: center;
}

footer a:hover{
	text-decoration: underline;
}


/*****************************************************************************************************************


PC


*****************************************************************************************************************/
@media(min-width:768px){
	.sp{
		display: none;
	}
	.sp2{
		display: none;
	}
	.pc{
		display: inline-block;
	}	
	.pc ul{
		display: -webkit-inline-box;
	}
	.pc li{
writing-mode: tb-rl;
  /* IE独自仕様 */
  writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -o-writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
	font-size: 2rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
		margin-left: 3rem;
		margin-right: 3rem;
	}
.pc a:hover{
	text-decoration: underline;}
	
	.top{
		height: 600px;
	}
	.top img{
		width: 350px;
	margin-top: 10%;
	margin-bottom: 20px;
	}
	/*おすすめ*/
	.osusume{
		width: 930px;
		margin: auto;
		font-size: 1.8rem;
	}
	.osusume img{
		width: 350px;
	}
	.osusume h2{
		font-size: 2.7rem;
	}
	.osusume .flex{
		display: flex;
	align-items: center;
	justify-content: space-around;
	}
	
	.menuButton{
		width: 400px;
		margin-left: 30%;
	
	}
	/*店舗情報*/
	.storeBg{
	background-image: url(../images/storeBG.jpg);
		background-repeat: repeat;
	background-size: contain;
	background-position: center;
		font-size: 1.6rem;
	}
	.store{
		width: 930px;
		margin: auto;

	}
	.sp2{
	background-image: url(../images/storeBG.jpg);
		background-repeat: repeat;
	background-size: contain;
	background-position: center;
		
	}
	.store h2{
		font-size: 2.7rem;
	}
	.storeCon1 img{
		width: 400px;
		height: auto;
	}
	.store .flex{
		display: flex;
	align-items: center;
		margin: 2rem auto;
	justify-content: space-around;
		width: 850px;
		
	}
	.store .flex .cloud{
		width: 300px;
	}
	
	.store .flex2{
		display:flex;
		flex-direction: row-reverse;
	align-items: center;
				margin: 3rem auto;
	justify-content: space-around;
		width: 850px;
	}
	.storeCon2 img{
		width: 300px;
		height: auto;
	}
	
.top_menu{
	height: 500px;
	text-align: center;

}

.top_menu img{
	margin-top: 10%;
	margin-bottom: 40px;
}
.top_menu p{
	font-size: 36px;
}
	.menu .h1 h1{
		width: 90%;
		margin: auto;
		font-size: 26px;
	}
/*	h1の牛アイコン*/
	.menu h1 img{
		width: 25px;
	}
	
/*	メニューの赤ボタン*/
	.menuNav p{
padding-bottom: 30px;
	}
	.menuNav a{
		width: 250px;
	}
	
	.menuNav2{
		display: flex;
		flex-wrap: wrap;
		margin: auto;
		justify-content: center;
	}
.menuNav2{
	width: 900px;

}
.menu_paper .red{
	width: 90%;
	margin: auto;
	margin-top: 40px;
}
	
	/*リンク*/
	.link{
	    width: 930px;
    margin: auto;
	font-size: 1.8rem;
		
	
		}
	
	.link h2{
		font-size: 2.7rem;
	}
	
	.linkflex{
		    display: flex;
    justify-content: space-between;
	}
	
/*	メニュー内容*/
	.menu p{
	font-size: 1.6rem;		
	}
	.menu_paper{
		width: 85%;
	}
	
	.menu_paper img{
		width: 400px;		
	}
	
	.menu_paper dd{
		font-size: 18px;
	}

	.menu_paper dt{
		font-size: 18px;
	}
	
	.menu h1{
		font-size: 2.4rem;
	}
	
	.menu_img{
		width: 90%;
		margin: auto;
		margin-bottom: 40px;
	}
	
	.set1.set2{
		width: 900px;
		margin: auto;
	}
	.set_menuhyou{
		width: 700px;
	}
	.flex_menuhyou{
		width: 380px;
		margin-right: 40px;
	}
	
	.set1.flex_menuhyou.red{
		padding-bottom: 5px;
	}
	
	.flex_menuhyou2{
	display: flex;
		width: 90%;
		margin: auto;
		flex-wrap: wrap;
	}
	.set1 dt{
		padding-left: 20px;
	}
	.set1 p{
		padding-left: 0px;
		margin-left: 20px;
	}
	
	.set2 dt{
		padding-left: 20px;
	}
	.set3 dt{
		width: 40%;
		padding-left: 20px;
	}
	.set3 dd{
		width: 60%;
		padding-left: 20px;
	}
	.set4 p{
		width: 610px;
		margin: auto;
	}
	.set4 dt{
		padding-left: 20px;
	}
	
	.set5 p{
		width: 610px;
		margin: auto;
	}
	.set5 dt{
		width: 75%;
		margin: auto;
	}
	.set5 dd{
		width: 25%;
		margin: auto;
	}
	.set6 p{
		width: 610px;
		margin: auto;
	}
	.set6 dt{
		padding-left: 20px;
	}
	.menu_paper .red{
		margin-bottom: 10px;
	}
	.chuushaku p{
		width: 610px;
		margin-bottom: 50px;
	}	
/*ここからこだわり*/	
	.kodawari_first{
width: 930px;
    margin: auto;		
	}
.top_kodawari{
	height: 500px;
	text-align: center;

}

.top_kodawari img{
	margin-top: 10%;
	margin-bottom: 40px;
}
.top_kodawari p{
	font-size: 36px;
}
	.kodawari_right {
		width: 400px;
	}
	
	.kodawari_left{
		width: 350px;
		margin-left: 40px;
		margin-top: 30px;
	}
	
	.kodawariFlex{
		display: flex;
		justify-content: flex-start;
		padding-bottom: 70px;
	}
	.kodawariFlex2{
		display: flex;
		justify-content: flex-end;
		flex-flow: row-reverse;
		margin-bottom: 70px;
	}
	.kodawari_left2{
		width: 350px;
		margin-top: 30px;
		margin-right: 40px;
	}
	
	.kodawari_naiyou{
		width: 930px;
		margin: auto;
	}
	.center{
		text-align: center;
		margin-bottom: 20px;
		font-size: 18px;
	}
	}