@charset "utf-8";

/* base */


html {
	width:100%;
	background:#4c9ca7;
}

body {
	text-align:center;
	color: #5c4532;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:14px;
	position:relative;
	background:#fff5e5;
	width:100%;
}

a {
	color:#5c4532;
	text-decoration:none;
}

a:hover {
}

section {
	margin-top:40px;
	position:relative;
	width:100%;
}

.sp_v {
	display:none;
}

.w_pc {
	width:775px;
}

#head_lead {
	background:#4c9ca7;
	width:100%;
}

header {
	margin-bottom:10px;
	position:relative;
}

header h2 {
	text-align:left;
	margin: 0 auto;
	color: #f8ebdd;
	font-size:21px;
	letter-spacing:0.15em;
	padding: 10px 0;
}

header h2 span {
	color: #e9e6e4;
	font-size:16px;
	letter-spacing:0.1em;
	font-weight:bold;
}

header h1 {
	margin: 0 auto;
	display: inline-block;
}

#head_en {
	height: 30px;
	margin: 10px auto 0;
	text-align: right;
}
#head_en a {
	display: inline-block;
	padding-left: 35px;
	background: url(../img/icn_en.png) left top no-repeat;;
	font-size: 22px;
    font-weight: bold;
    color: #5c4532;
}


#head_logo {
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 50px;
	position:relative;
}

.tel {
	position: absolute;
	right:0;
	bottom:0;
}

.sp_nav,.sp_menu {
	display:none;
}

nav {
	margin:0 auto;
	font-size:21px;
	letter-spacing:0.15em;
	text-align:center;
}

header nav {
	position:abolute;
	height:30px;
}

header nav a {
	display:inline-block;
	margin:0 30px;
	font-weight:bold;
	vertical-align:top;
}

header nav a span {
	letter-spacing:0;
	font-weight:bold;
}

.fborderbottom {
	margin-top:3px;
	width:0%;
	height:1px;
	background:#4c9ca7;
}

.fborderbottom_page {
	margin-top:3px;
	width:100%;
	height:1px;
	background:#4c9ca7;
}

#wrapper {
	width:775px;
	margin:0 auto;
}


footer {
	width:100%;
	background:#4c9ca7;
	color:white;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding: 20px 0;
	margin-top:50px;
}

footer a {
	text-decoration:underline;
	color:white;
	font-size:14px;
	letter-spacing:0;
	margin:20px;
	
}

footer a:hover {
	color:#B2CDCD;
}

footer p {
	font-size:8px;
	margin-top:20px;
}

.ttl p {
	font-size:24px;
	color:#fff5e5;
	background:#4c9ca7;
	display:inline-block;
	padding:4px 20px;
	letter-spacing:0.1em;
	margin:0 35px;
}

.ttl a:hover p {
	background:#74ADAD;
}

.ttl2 p {
	font-size:24px;
	color:#4c9ca7;
	border:1px solid #4c9ca7;
	display:inline-block;
	padding:4px 20px;
	letter-spacing:0.1em;	
}

.st {
	color:#414042;
	font-weight:bold;
	font-size:16px;
}

/* top */

.top_lead {
	margin-top:30px;
	font-size:12px;
	text-align:left;
	clear:both;
	overflow:hidden;
}

.top_lead img, .top_lead p  {
	display:inline-block;
	vertical-align:top;
}

.top_lead p  {
	line-height:220%;
	width:380px;
	float:right;
}

#access {
	clear:both;
	overflow:hidden;
	text-align:left;
}

#access iframe {
	display:inline-block;
	vertical-align:top;
	width:453px;
	height:267px;
}

.gaiyou {
	width:302px;
	float:right;
}

.gaiyou img {
	width:145px;
	height:auto;
	margin:0 auto;
	vertical-align:top;
	line-height:0;
}

.table1 {
	font-size:14px;
	margin-top:15px;
	width:100%;
}

.table1 tr {
	border-bottom:1px dashed #5c4532;
}

.table1 tr th,.table1 tr td {
	padding: 15px 0  5px 0 ;
}

.table1 tr th {
	width: 20%;
	text-align:center;
}

.table1 tr td {
	width: 75%;
	padding-left: 5%;
}

/* beer */

.beerblock_wrap {
	margin-top:40px;
	clear:both;
	overflow:hidden;
}

.beerblock {
	float:left;
	padding:;
	overflow:hidden;
	position:relative;
	margin-right:23.66px;
	margin-bottom:25px;
}

.beerblock:nth-child(4n) {
	margin-right:0;
}

.beerblock:nth-child(9) {
	margin-left:199.66px;
}

.beerblock .beer_text {
	font-size:12px;
	background:rgba(0,0,0,0.6);
	color:white;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	-webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -ms-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
}

.beerblock:hover .beer_text {
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.beer_text h3 {
	margin:20px 10px;
	letter-spacing:0.1em;
}

.beer_text p {
	text-align:left;
	margin:0 auto;
	margin:10px;
	line-height:150%;
}

.beer_lead {
	margin:0 auto;
	margin-top:20px;
	line-height:150%;
	letter-spacing:0.1em;
	color:#727171;
}

.beer_list {
	font-size:12px;
	width:100%;
	line-height:150%;
	letter-spacing:0.12em;
}

.beer_list .table-row {
	border-bottom:1px dashed  #5c4532;
	display: table;
	width:100%;
}

.beer_list .table-column {
	padding-bottom:5px;
	padding-top:28px;
	vertical-align:bottom;
	text-align:left;
	display: table-cell;
}

.beer_list .table-column:nth-child(1)  {
	width:27%;
}

.beer_list .table-column:nth-child(2) {
	width:55%;
}

.beer_list .table-column:nth-child(3) {
	width:10%;
	text-align:right;
	font-size:16px;
}

.beer_list .table-column:nth-child(4) {
	width:8%;
	text-align:right;
	font-size:16px;
}

#other_drink .beer_lead {
	font-size:12px;
	color: #5c4532;
}

.table_od_wrap {
	clear:both;
	width:100%;
	overflow:hidden;
	font-size:12px;
	display: table;
	margin-top:30px;
}

.table_od {
	float:left;
	width:33%;
	display: table;
	border-collapse: collapse;
}

.table-row_od {
	width:100%;
	display: table-row;
}

.table-column_od {
	text-align:left;
	display: table-cell;
	padding:10px 15px;
	border:1px dashed  #5c4532;
	font-weight:bold;
}

.table-row_od:nth-child(1) {
	color:#4c9ca7;
}

.table-column_od:nth-child(1) {
	width:66.666%;
}

.table_od:nth-child(2) .table-row_od .table-column_od:nth-child(1),
.table_od:nth-child(3) .table-row_od .table-column_od:nth-child(1) {
	border-left:none;
}

/* foods */

.fl, .table_fmenu {
	display:table;
	font-size:0;
	width:100%;
	position:relative;
}

.table_fmenu h3 {
	display:table-caption;
}

.table-row_fmenu {
	display:table-row;
}

.table-column_fl,.table-column_fmenu {
	display:table-cell;
	text-align:left;
	font-size:12px;
	vertical-align:top;
	border-collapse: collapse;
	box-sizing: border-box;
	position:relative;
}

.width_l {
	width:57%;
}

.width_l img,.width_l2 img {
	width:100%;
	height:auto;
}

.width_s {
	width:40%;
}

.width_l2 {
	width:53.5%;
}

.width_s2 {
	width:43.5%;
}

.fl .table-column_fl:last-child {
	padding-left:3%;
}

.table_fmenu h3 {
	display:table-caption;
	font-size:22px;
	color:#4c9ca7;
	line-height:1.3em;
	padding-bottom:0.3em;
	letter-spacing:0.05em;
}

.table_fmenu h3 span {
	font-size:12px;
	line-height:1em;
	display:inline-block;
}

.table-column_fmenu {
	padding-top:1em;
	line-height:130%;
}

.table-column_fmenu span {
	font-size:10px;
}

.table-column_fmenu:first-child {
	width:74%;
}

.table-column_fmenu:last-child {
	width:26%;
	text-align:right;
}

.fm_s {
	white-space: nowrap;
}

.fmenu-img_absolute_left {
	position:absolute;
	width:43.3%;
	left:0;
	bottom:0;
	font-size:0;
}

.fmenu-img_absolute_left2 {
	position:absolute;
	width:46.9%;
	left:0;
	bottom:0;
	font-size:0;
}

.fmenu-img_bottom {
	width:100%;
	margin-top:5px;
	display:block;
}

.div_fl {
	font-size:0;
	width:100%;
	position:relative;
	box-sizing: border-box;
}

.div_fl .fl {
	margin-top:0;
}

.table_fmenu h3 span.komoji {
	font-size:14px;
}

/* reservation */

.reservation_text {
	margin-top:2em;
	font-size:12px;
	line-height:200%;
	letter-spacing:0.1em;
}

.reservation_text .red {
	font-size:110%;
	font-weight:bold;
}

.error {
	margin:10px;
	color:red;
}

p.error {
	font-size:19px;
	color:inherit;
	border-bottom:1px solid;
	display:inline-block;
}

ul.error {
	font-size:12px;
	line-height:180%;
	letter-spacing:0.1em;
}

div.error {
	font-size:10px;
	color:white;
}

#form form {
	margin-top:2em;
}

#form table {
	width:100%;
	background:#4C9CA7;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:white;
	text-align:left;
}

#form table td {
	vertical-align:middle;
	padding:0.5em 0.7em;
	border:2px solid rgb(53,110,118);
	box-sizing:border-box;
}

#form table td .text {
	width:90%;
	height:1.5em;
}

#form table td .textarea {
	width:95%;
	max-width:95%;
	min-width:95%;
	height:15em;
}

#form table td .aligncenter {
	margin:0 auto;
}

#form table td .aligncenter form, #form table td .aligncenter form input {
	display:inline-block;
	margin:0.3em;
}

#form table td.vt {
	vertical-align:top;
}

#reservation h2 {
	font-size:19px;
	color:inherit;
	border-bottom:1px solid;
	display:inline-block;
	margin-top:2.5em;
}