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


/*==========================================
 body
===========================================*/
body{
	width:100%;/*画面幅いっぱいにWebページを表示させる*/
	font-size:100%;
	line-height:1.5;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h1{
	font-size : 36px;
    line-height : 1.2; /* 20px×1.2＝1行の高さ24px */
    color: #9e7400;
    font-family: "futura-pt, sans-serif, Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}

h2{
	font-size : 28px;
    line-height : 1.2; /* 20px×1.2＝1行の高さ24px */
    color: #9e7400;
    font-family: "futura-pt, sans-serif, Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
h3{
	font-size : 28px;
    line-height : 1.2; /* 20px×1.2＝1行の高さ24px */
    font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
h4{
	font-size : 16px;
    line-height : 1.2; /* 20px×1.2＝1行の高さ24px */
    font-family: "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
}
h5{
	font-size: 14px;
}

p { 
	margin: 0 0 1em 0;
	line-height:1.8;
	color: 555;
}
a {
	color: white;
    text-decoration:none;
}
a:hover {
	color: #B67286;
    text-decoration:underline;
}
/* タブレット向けレイアウト指定：768px～959px */
@media screen and (min-width: 768px) {
	
}
/*画面幅960px以上の場合　メディアクエリここから*/
@media only screen and (min-width: 960px) {
	h2{
		font-size: 36px;
		font-weight: 600;
	}
p { 
    margin: 0 0 1.8em 0;
}
}


/*==========================================
 フルードイメージ　レスポンシブに必要。　画像のサイズをついてこさせるため。
===========================================*/
img{ 
max-width : 100%; /*画像の幅の最大値を指定*/
height:auto; /*自動的に縦横を保ち拡大縮小*/
}
/*==========================================
 ヘッダーのスタイル
===========================================*/
header { 
text-align : center;
}
header h1 {
font-size : 16px;
margin-bottom:12px;
}
/*==========================================
 logoのスタイル
===========================================*/
.logo img{
	margin-top: 16px;
}
.logo-960{
	display: none;
}
/* PC向けレイアウトの指定：960px以上では固定レイアウト */
@media screen and (min-width:960px) {
/* ここに960px以上の場合のCSSを記述 */
	.logo{
	display: none;
	}
	.logo-960{
	display: block;
	}
}
/*==========================================
 フッダーのスタイル
===========================================*/
#footer{
    background-color: #76253D;
	text-align:center;
	color:#fff;
	padding : 16px 0;
	position: relative;
	z-index: 3;
}
footer small {
	font-size:12px;
}
footer p{
	margin: 0 auto;
}
/*==========================================
 共通のスタイル
===========================================*/
.inner{
	width: 80%;
	margin: 0 auto;
}
.wrap{
	padding: 32px 0;
}
.block{
	display: block;
}
li .hover img:hover {
  color: #fff;
  background-color: #333;
  text-decoration: none;
  cursor: pointer;	
  /*display: inline-block;*/
}

/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/
.pa-16{
	padding: 16px 0;
	margin: 0 auto;
}
.pa-40{
	padding: 40px 0;
}
.cover, .cover1, .cover2, .cover3{
	padding: 48px 0;
}
.cover1{
	padding-top: 0;
}
.cover2{
	padding-bottom: 0;
}

/* タブレット向けレイアウト指定：768px～959px */
@media screen and (min-width: 768px) {
	.cover, .cover1, .cover2{
		padding: 60px 0;
	}
	.cover1{
	padding-top: 0;
}
	.cover2{
	padding-bottom: 0;
}
	.pa-40{
		padding:80px 0;
	}
}

/* PC向けレイアウトの指定：960px以上では固定レイアウト */
@media screen and (min-width:960px) {
/* ここに960px以上の場合のCSSを記述 */
	.pa-16{
		padding:24px 0;
	}
	.cover, .cover1, .cover2{
		padding: 120px 0;
	}
	.cover1{
	padding-top: 0;
}
	.cover2{
	padding-bottom: 0;
}
}
/*==========================================
 グローバルナビゲーションのスタイル
===========================================*/
#gnav  {
	background-color: white;
}
#gnav ul {
	overflow:hidden; /*li要素のfloatの回り込みを解除*/
	margin-bottom:24px;
}
/*メニュー１個ごとの設定*/
#gnav ul li {
	width: 50%;
	float : left;
	border-bottom: 1px solid #2f0e18;
	box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#gnav ul li a{
	display: block;
	color: #76253D;
	text-align: center;
	text-decoration: none;
	font-family: "futura-pt, sans-serif, Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size:15px;
	line-height:48px; /*高さを確保*/
}
#gnav ul li a:hover{
	background: #76253D;
	color: white;
	transition: 0.4s;
}
/*奇数番目のメニューの設定*/
#gnav ul li:nth-child(odd) {
     border-right: 1px solid #2f0e18;
}


/*==========================================
 コンテンツエリア全体のスタイル
===========================================*/
.wrap-con{
		width: 80%;
		margin: 0 auto;
}
.info{
	border: #333 1px solid;
	border-radius: 2px;
}
.info p {
	margin-bottom: 0px;
	padding: 8px;
}
.top-page h2{
	font-size: 28px;
	margin-bottom: 16px;
}
.top-page h2 .small{
	font-size: 20px;
	color: #9e7400;
	margin-left: 8px;
}
.menu11{
	display: none;/*非表示*/
}
.menu-con ul{
	display: flex;
	flex-wrap: wrap;
}
.menu-con li{
    width: calc( ( 100% - 24px ) / 2 );
    margin-right: 24px;
	margin-bottom: 12px;
	}
.menu-con li:nth-child( even ) {
    margin-right: 0;
}
.newsbox{
	margin-bottom: 48px;
}
.newsbox .free{
    margin-bottom: 0;
}


/**ボタン基本クラス　サイズ*/*/
.btn{
	font-size:14px;
  border-radius: 2px;/*角丸にする*/
  color:#fff;
  background: #333;
  display: inline-block;/*インラインを保ちながら表示はブロック要素に見せる*/
  text-decoration: none;
  padding:8px 16px;
	 margin: 16px 0 0;
}
/*ボタンスタイル 見た目*/
.btn-style {
  color: #fff;
  background-color: #777;
  font-size:14px;
  padding: 8px 16px;
}
.btn-style:hover {
  color: #fff;
  background-color: #333;
  text-decoration: none;
}
.gift-con li{
	margin-bottom: 48px;
}
.anni-con li{
	margin-bottom: 48px;
}
.address-text{
	margin: 16px auto;
}
.address-text img{
	margin: 0 auto;
	padding-bottom: 4px;
}
.table{
	/*width: 80%;*/
	border-collapse: collapse;
	margin: 16px auto 0 auto;
}
.table th,
.table td {
	padding: 10px;
	border-bottom: 1px solid #dddddd;
}
.table th {
	width: 30%;
	text-align: left;
	/*background: #f4f4f4;*/
}
.map {
position: relative;
width: 100%;    /* 左右に余白が必要なら値を変更してもOK */
height: 0;
padding-bottom: 56.25%;/*これの数字は決まっています。Googleマップはアスペクト比16:9の場合9/16*100=56.25*/
overflow: hidden;	
}
.map iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;/*親要素の縦幅100％*/
width: 100%;/*親要素の横幅100％*/
}



/* タブレット向けレイアウト指定：768px～959px */	
@media screen and (min-width: 768px) {
	#gnav {
		margin-top: 10px;
        margin-bottom: 10px;
	}
	#gnav ul li {
		border: none;
	} 
/*メニュー１個ごとの設定*/
    #gnav ul li {
		width: 16.6666667%;
		border-right: 1px solid #513900;
  }  
/*1番左のメニューの設定*/
	#gnav ul li:nth-child(1){
		border-left: 1px solid #2f0e18;
	}
	.menu-con li{
    width: calc( ( 100% - 48px ) / 3 );
    margin-right: 24px;
	}
	.menu-con li:nth-child( even ) {
    margin-right: 24px;
	}
	.menu-con li:nth-child( 3n ) {
    margin-right: 0;
	}
	.gift-con ul{
		display: flex;
		flex-wrap: wrap;
	}
	.gift-con li{
    width: calc( ( 100% - 48px ) / 3 );
    margin-right: 24px;
	margin-bottom: 0;	
	}
	.gift-con li:nth-child( 3n ) {
    margin-right: 0;
	}
	.gift-con li p,
	.anni-con li p{
		margin-bottom: 0;	
	}
	.anni-con ul{
		display: flex;
		flex-wrap: wrap;
	}
	.anni-con li{
    width: calc( ( 100% - 48px ) / 3 );
    margin-right: 24px;
		margin-bottom: 0;
	}
	.anni-con li:nth-child( 3n ) {
    margin-right: 0;
	}
	.table th {
	width: 30%;
	}

	

}
/* PC向けレイアウトの指定：960px以上では固定レイアウト */
@media screen and (min-width:960px) {
/* ここに960px以上の場合のCSSを記述 */
	#gnav {
		margin-top: 0px;;
        margin-bottom: 0px;
	}
	/*メニュー１個ごとの設定*/
	#gnav ul li {
		border: none;
		width: 100%;
		border-right: none;
		float : none;
	/*border-bottom: none;*/
	/*box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;*/	
  }  
/*1番左のメニューの設定*/
	#gnav ul li:nth-child(1){
		border-left: none;
	}
#gnav ul {
	margin-bottom: 0;
	background:#090305;
	box-sizing: border-box;
}
#gnav ul li a{
	display: block;
	color: white;
	text-align: center;
}	
#gnav ul li a:hover{
	background: #76253D;
	transition: 0.4s;
	}
/*奇数番目のメニューの設定*/
	#gnav ul li:nth-child(odd) {
     border-right: none;
	}		
	header{
		width: 170px;
		background-color: #090305;
		position: fixed;
		height: 100%;
		z-index: 1;
		margin-bottom: 0;
		padding-bottom: 0px;
	}	
	#gnav{
		width: 170px;
		position: fixed;
		background-color: red;
		position: absolute;
	}
	header{
		margin-top: 0;
		padding-top: 0;
		border-left: #9e7400 1px solid;
		border-right: #9e7400 1px solid;
		padding-top: 40px;
        box-shadow: 0px 10px 0px 10px #090305;
	}
	.wrap-all{
		max-width: 1400px;
		width: 90%;
		margin: 0 auto;
	}
	.wrap-con{
		width: 100%;
	}
	.wrap-main{
		width: calc(100% - 260px);/*calcで幅100%から画像とマージン分を引いている*/
		margin: 0 0 0 auto;
		padding-top: 40px;
	}
	.top-page h2{
		font-size: 36px;
		font-weight: 500;
	}
	.top-page h2 .small{
		font-size: 24px;
	}
	.menu-con ul{
		display: none;/*非表示*/
	}
	.menu11{
	display: block;/*表示*/
}
	#news{
		display: flex;
		flex-wrap: wrap;
	}
	.newsbox{
		width: calc( ( 100% - 32px ) / 3 );
        margin-right: 16px;
		margin-top: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 0;
	}
	.newsbox:nth-child( 3n ) {
		margin-right: 0;
	}
	.address-con{
		/*display: flex;
		flex-wrap: wrap;*/
		/*width: 80%;*/
		margin: 0 auto;
		/*padding: 80px 0;*/ 
	}
	.address-text{
		margin-top: 0;
	}
	.map{
		margin: auto;
	}
	.table th {
	width: 30%;
	}
}

/*==========================================
MENU

===========================================*/
.menu-page h1{
	text-align: center;
	border-bottom: #777 1px solid;
}
.menu-page h1 .small{
	font-size: 20px;
	color: #9e7400;
}
.titile-sub{
	text-align: center;
	color: #777;
	margin-bottom: 0px;
}
.menu-page h2{
	font-size: 28px;
	margin-bottom: 16px;
}
.menu-page h2 .small{
	font-size: 20px;
	color: #9e7400;
	margin-left: 8px;
}
.meal .btn{
  width: 100%;
  font-size:14px;
  border-radius: 2px;/*角丸にする*/
  color:#fff;
  background: #333;
  display: inline-block;/*インラインを保ちながら表示はブロック要素に見せる*/
  text-decoration: none;
  padding: 8px 0px;
  margin: 16px 0 0;	
}
/*ボタンスタイル 見た目*/
.meal .btn-style {
  color: #fff;
  background-color: #777;
  font-size:14px;
 /* padding: 8px 16px;*/
}
.meal .btn-style:hover {
  color: #fff;
  background-color: #333;
  text-decoration: none;
}
.meal .free{
	padding-left: 16px;
}
.meal .btn-style::after{
	content:'  >>';
}




/* タブレット向けレイアウト指定：768px～959px */
@media screen and (min-width: 768px) {
	.meal ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.meal ul li{
		width: calc( ( 100% - 24px ) / 2 );
        margin-right: 24px;
		margin-top: 0;
	}
	.meal ul li:nth-child( even ) {
		margin-right: 0;
	}
	.meal .btn{
		padding: 12px 0px;
	}
	
}
/* PC向けレイアウトの指定：960px以上では固定レイアウト */
@media screen and (min-width:960px) {
/* ここに960px以上の場合のCSSを記述 */
	.menu-page h1{
	font-size: 52px;
	line-height: 1em;
	font-weight: 600;
	}
	.menu-page h1 .small{
	font-size: 24px;
	}
	.menu-page h2{
		font-size: 36px;
		font-weight: 500;
	}
	.menu-page h2 .small{
		font-size: 24px;
	}
	}



/*==========================================
NEWS

===========================================*/
.news h3{
	margin-bottom: 6px;
}
.news p{
	margin-bottom: 0px;
}
.back{
	text-align: center;
}

/* タブレット向けレイアウト指定：768px～959px */
@media screen and (min-width: 768px) {
}
/* PC向けレイアウトの指定：960px以上では固定レイアウト */
@media screen and (min-width:960px) {
/* ここに960px以上の場合のCSSを記述 */
	.news h3{
	margin-bottom: 18px;
}
}








/*==========================================
 RESERVATION
===========================================*/
.red{
	color: #76253D;
}

.reserv-text{
	margin-bottom: 40px;
}


/*=form==form==form==form=*/
#formWrap {
	max-width:960px;
	margin:0 auto;
	color: #555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	padding: 10px;
	vertical-align: middle;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

input[type="text"],
input[type="email"] {
		width:50%;
	padding:8px 5px;
	margin:0px;
	color:#666;
	border: solid 1px #ccc;
    background: #fff;/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
	box-shadow: 2px 3px 5px -2px #ddd inset;
	border-radius:6px;/*角丸にする*/
}
select{
	padding:8px 5px;
	margin:0px;
	color:#666;
	border: solid 1px #ccc;
    background: #fff;	/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
	box-shadow: 2px 3px 5px -2px #ddd inset;
	border-radius:6px;/*角丸にする*/
}
textarea {
		width:96%;
	padding:8px 5px;
	margin:0px;
	color:#666;
	border: solid 1px #ccc;
    background: #fff;/*テキストエリア内にシャドウをつける。最初にbackground初期化が必要*/
	box-shadow: 2px 3px 5px -2px #ddd inset;
	border-radius:6px;/*角丸にする*/
}



/*送信・リセットボタンの体裁を指定（[type="○○"]で属性の値でセレクト）*/
input[type="submit"],
input[type="reset"]{
	width:40%;
padding:10px 0px;
margin:30px 30px 0 0;
	background: #ccc;
	border:0;
	color:#555;
	font-size:14px;
	font-weight:bold;
  border-radius: 5px;
	max-width: 150px;
}
input[type="submit"]:hover,
input[type="reset"]:hover
{ 
opacity:0.8; 
cursor:pointer; /*←これでカーソルを指先型に変化させる*/
}









/* タブレット向けレイアウト指定：768px～959px */
@media screen and (min-width: 768px) {

	
/*==========================================
RESERVATION
===========================================*/	
	#formWrap {
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}	
}	
	


	
/* PC向けレイアウトの指定：960px以上では固定レイアウト */
@media screen and (min-width:960px) {}
/* ここに960px以上の場合のCSSを記述 */


	
	
	
/*画面幅1200px以上の場合　メディアクエリここから*/
@media only screen and (min-width: 1400px) {
	/*.wrap-1400{
		max-width: 1400px;
		margin: 0 auto;*/
	}}