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

/*******基本設定*******/
* {margin: 0 auto;padding: 0;}
body {
	font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	background: #fff;
	height: 100%;
	font-size: 14px;
	position: relative;
}
html {overflow-y: scroll;height: 100%;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;}
p,li,dt,dl {line-height: 1.6;}
p {margin: 0 0 1em 0;/*最初に消したマージンをふっかつ*/}
li {list-style: none;}
img {border: none;vertical-align: bottom;}

/*******table*******/
table,th,td {
	border: solid 1px;
	border-collapse: collapse;
	padding: 10px;
}

/*******リンク*******/
a:link {
	color: #000;
	text-decoration: none;
}

a:visited {
	color: #000;
	text-decoration: none;
}

a:hover {
	color: #000;
	text-decoration: none;
}

a:hover img {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";}

/*******レイアウト*******/
.left {float: left;}
.right {float: right;}

.tx-l {text-align: left;}
.tx-r {text-align: right;}
.tx-c {text-align: center;}

.ofa {overflow: auto;}
.clear {clear: both;overflow: hidden;}

.cf {display: inline-table;}
.cf:after {
  display: block;
  clear: both;
  content: "";
}

/*******余白*******/
.m0 { margin: 0 !important; }

.mb0 { margin-bottom:0px !important;}
.mb10 { margin-bottom:10px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb50 { margin-bottom:50px !important;}

.mt0 { margin-top:0px !important;}
.mt10 { margin-top:10px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}

.pb0 { padding-bottom:0 !important;}
.pb10 { padding-bottom:10px !important;}
.pb20 { padding-bottom:20px !important;}
.pb30 { padding-bottom:30px !important;}
.pb40 { padding-bottom:40px !important;}
.pb50 { padding-bottom:50px !important;}

.pt0 { padding-top:0px !important;}
.pt10 { padding-top:10px !important;}
.pt20 { padding-top:20px !important;}
.pt30 { padding-top:30px !important;}
.pt40 { padding-top:40px !important;}
.pt50 { padding-top:50px !important;}

/*******wrapper*******/
.wrapper {
	width: 980px;
}

/*******header*******/
header#header {
	position: relative;
	text-align: center;
	padding-top: 3px;
	height: 80%;
	height: -webkit-calc(100% - 20%);
	height: calc(100% - 20%);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 9;
}

.ic_about {background: url(../img/ic_about.jpg);}
.ic_menu {background: url(../img/ic_menu.jpg);}
.ic_drink {background: url(../img/ic_drink.jpg);}
.ic_access {background: url(../img/ic_access.jpg);}

#logo {
	display: inline;
}

.pr {
	font-size: 12px;
	color: #fff;
	margin-bottom: 12%;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
}

/*******nav*******/
nav#gNavi {
	width: 980px;
	height: 100px;
	background: url(../img/nav_bg.jpg) no-repeat;
	border-radius: 20px;
	margin: -45px auto 60px;
	position: relative;
	z-index: 10;
}

nav#gNavi li {
	float: left;
}

nav#gNavi li a {
	display: block;
}

nav#spNavi {
	display: none;
}

/*******contents*******/
#contents {
}

.bg01 {
	background: url(../img/row_bg.jpg);
}

.row {
	padding: 50px 0;
}

.contArea {
	overflow: auto;
	padding-bottom: 50px;
}

.contArea h1 {
	text-align: center;
	margin-bottom: 50px;
}

/*******top*******/
.gr {
	max-width: 1200px;
	text-align: center;
	background: url(../img/gr_bg.jpg) no-repeat;
	background-position: 98% 100%;
	padding-bottom: 50px;
}

.gr p {
	width: 60%;
	margin: 0 auto;
	padding-bottom: 1em;
	line-height: 2;
}

.gr h2 {
	margin-bottom: 50px;
}

.column {
	width: 46%;
	padding: 10px 2%;
	float: left;
}

.column h2 {
	text-align: center;
	margin-bottom: 50px;
}

dl.news a:link,dl.news a:visited {
	color: #01398F;
	text-decoration: underline;
}

dl.news a:hover {
	text-decoration: none;
}

.column dl.news dt {
	color: #777;
	font-size: 13px;
	margin-bottom: 5px;
}

.column dl.news dd {
	margin-bottom: 20px;
}

.column li {
	text-align: center;
	margin-bottom: 27px;
}

.top-bn {
	clear: both;
	text-align: center;
	padding: 16px 0;
}

.insta {
	clear: both;
	padding: 24px 0;
}

/*******about*******/
.about {
	overflow: auto;
	background: url(../img/122168.png) no-repeat bottom right;
}

.about p {
	width: 470px;
	float: right;
	line-height: 2;
}

.photo {
	display: table;
	table-layout: fixed;
	border-spacing: 20px;
}

.photo li {
	display: table-cell;
}

.photo figcaption {
	bottom: 40px;
	left: 10px;
	position: relative;
	font-size: 20px;
	color: #fff;
}

/*******menu*******/

/* こだわり */
.feature {
	margin: 0 auto 60px auto;
	max-width: 100%;
	position: relative;
	color: #fff;
}
.feature > div{
	position: absolute;
	width: 90%;
	height: 75%;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color:rgba(0,0,0,0.35);
	
}
.feature div div{
	display:table;
	margin: auto;
	top: 0;
	left: 20px;
	right: 0;
	bottom: 0;
	position: absolute;
}
.feature img{
	display: block;
	width: 100%;
}
.feature h2 {
	width: 300px;
	margin: 0;
	display:table-cell;
	vertical-align: middle;
	font-size: 21px;
}
.feature p {
	max-width: 520px;
	margin: 0 auto;
	padding: 10px 0 10px 10px;
	display:table-cell;
	vertical-align: middle;
	font-size: 13.5px;
}


.box {
	padding-bottom: 20px;
	margin-bottom: 40px;
	border-bottom: 1px dashed #333;
}

.lunch {
	text-align: center;
	margin-bottom: 35px;
}

.lunch .img {
	margin-bottom: 10px;
}

.lunch .name {
	font-weight: bold;
	font-size: 19px;
}

.lunch .price {
	font-weight: bold;
	margin-bottom: 5px;
}

.menu {
	overflow: auto;
	margin-bottom: 40px;
}

h2.menuttl {
	font-weight: bold;
	letter-spacing: 2px;
	font-size: 30px;
	margin-bottom: 20px;
	text-align: center;
}

h2.menuttl:first-letter {
	font-size: 44px;
}

h2.menuttl + p {
	text-align: center;
	margin: 0 auto 40px;
}

.menu h3 {
	margin-bottom: 30px;
}

.menu h4 {
	float: left;
	margin-right: 20px;
}

img.food {
	float: left;
}

.menu .ttl span {
	font-size: 26px;
	color: #CB0003;
	margin-right: 15px;
}

.menu .grill {
	width: 50%;
	padding: 0 2%;
	float: left;
}

.menu .inner {
	width: 46%;
	padding: 0 2%;
	float: left;
}

.menu .inner ul {
	overflow: auto;
	margin-bottom: 30px;
}

.menu ul li {
	overflow: auto;
	margin-bottom: 12px;
}

.menu .grill .name {
	width: 30%;
}

.menu .grill .price {
	width: 70%;
}

.menu ul li .name {
	width: 80%;
	float: left;
	font-weight: bold;
}

.menu ul li .price {
	width: 20%;
	text-align: right;
	float: left;
}

.menu ul li .detail {
	width: 100%;
	float: left;
	font-size: 12px;
}



/**food**/
.foodArea {
	width: 1000px;
}

.sc01 {
	width: 900px;
	height: 1340px;
	background: url(../img/menu/1273.png) no-repeat,
	url(../img/menu/1328.png) no-repeat 100% 38%,
	url(../img/menu/1428.png) no-repeat left bottom;
	margin: 50px auto;
}

.sc01 h4.ttl01 {
	display: inline-block;
	position: relative;
	top:50px; left:400px;
}

.sc01 h4.ttl01 + p {
	display: inline-block;
	position: relative;
	top:90px; left:80px;
}

.sc01 h4.ttl02 {
	display: inline-block;
	position: relative;
	top:280px; left:70px;
}

.sc01 h4.ttl02 + p {
	display: inline-block;
	position: relative;
	top:330px; right:165px;
}

.sc01 h4.ttl03 {
	display: inline-block;
	position: relative;
	top:550px; left:420px;
}

.sc01 h4.ttl03 + p {
	display: inline-block;
	position: relative;
	top:600px; left:110px;
}

.sc02 {
	height: 750px;
	padding: 0 180px;
	background: url(../img/menu/1263.png) no-repeat,
	url(../img/menu/1380.png) no-repeat top right,
	url(../img/menu/1374.png) no-repeat 0% 83%;
	margin: 50px auto;
}

.sc02 h4.ttl01 {
	display: inline-block;
	position: relative;
	top:225px;
}

.sc02 h4.ttl02 {
	display: inline-block;
	position: relative;
	top:225px;
	float: right;
}

.sc02 h4.ttl03 {
	display: inline-block;
	position: relative;
	top:500px;
}

.sc02 h4.ttl04 {
	display: inline-block;
	position: relative;
	top:500px;
	float: right;
}

.sc03 {
	width: 900px;
	height: 840px;
	background: url(../img/menu/1338.png) no-repeat top right,
	url(../img/menu/1481.png) no-repeat bottom left;
	margin: 50px auto;
}

.sc03 h4.ttl01 {
	display: inline-block;
	position: relative;
	top:80px; left:70px;
}

.sc03 h4.ttl02 {
	display: inline-block;
	position: relative;
	top:400px; left:350px;
}

.sc03 h4.ttl02 + p {
	display: inline-block;
	position: relative;
	top:470px; right:40px;
}

/*******drink*******/
.drink {
	overflow: auto;
	margin-bottom: 40px;
}

.drink h2 {
	text-align: center;
	margin-bottom: 30px;
}

.drink ul li {
	overflow: auto;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px dashed #aaa;
}

.drink ul li:last-child {
	border-bottom: 1px solid #333;
}

.drink  ul li .name {
	width: 68%;
	padding-left: 1%;
	float: left;
}

.drink  ul li .country {
	width: 15%;
	float: left;
}

.drink  ul li .glass {
	width: 7%;
	padding-right: 1%;
	float: left;
	text-align: right;
}

.drink  ul li .price {
	width: 7%;
	padding-right: 1%;
	float: right;
	text-align: right;
}

.drink  ul li:first-child {
	font-weight: bold;
	border-bottom: 1px solid #333;
	padding-bottom: 5px;
}

.drink  ul li:first-child .glass,.drink  ul li:first-child .price {
	text-align: center;
}

/*******access*******/
.access dl {
	width: 70%;
	overflow: auto;
	margin-bottom: 20px;
}

.access dt,.access dd {
	float: left;
	padding: 0 5%;
	margin-bottom: 20px;
}

.access dt {
	width: 20%;
	border-right: 2px solid #005B8A;
	text-align: right;
}

.access dd {
	width: 59%;
}

/*******footer*******/
footer {
	overflow: auto;
	background: url(../img/f_b_bg.png) repeat-x bottom, url(../img/f_bg.jpg) no-repeat center center;
	background-size: auto, cover;
	color: #fff;
	padding-top: 30px;
}

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

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

footer a:hover {
	color: #fff;
	text-decoration: underline;
}

#pan {
	text-align: center;
	margin-bottom: 50px;
}

#pan li {
	padding-left: 32px;
	display: inline;
}

#pan li + li {
	border-left: 1px solid #fff;
}

#pan li a {
	margin-right: 30px;
}

footer .wrap {
	width: 850px;
	margin-bottom: 20px;
	position: relative; left: 3%;
	overflow: auto;
}

.f_column {
	width: 33%;
	float: left;
}

.f_column:nth-child(2) {
	margin-top: 20px;
}

.f_column ul li {
	text-shadow: 3px 3px 4px rgba(58,21,10,0.5);
}

.copy {
	clear: both;
	font-size: 12px;
	text-align: center;
	padding-bottom: 5px;
	margin: 0;
}

.tabelog {
	float: right;
}