@charset "utf-8";

@import url("reset.css");
@import url("bootstrap.css");
@import url("fontawesome-all.min.css");
@import url("jquery.fatNav.css");
@import url("colorbox/colorbox.css");

/* ==================================================
   basic design
*/

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

html,
body {
	color: #222;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	-webkit-font-smoothing: antialiased;
	letter-spacing: 0.1rem;
}

header, footer, section, nav, h1, h2, h3, h4, h5, p, ul, ol, li, table, thead, tbody, tr, th, td {
	line-height: 1.6;
}


/* ==================================================
   font
================================================== */

.font_bold {
	font-weight: 600 !important;
}
.font_large {
	font-size: 1.5rem !important;
}
.font_ml {
	font-size: 1.13rem !important;
}
.font_small {
	font-size: .81rem !important;
}
.font_underline {
	text-decoration: underline;
}


/* ==================================================
   color
================================================== */

.white_text {
	color: #fff !important;
}
.red_text {
	color: #c00 !important;
}
.gray_text {
	color: #808080 !important;
}


/* ==================================================
   Anchor
================================================== */

a,
a:link,
a:visited,
a:active {
	color: #222;
	text-decoration: none;
}

a,
a > img {
	opacity: 1;
	filter: alpha(opacity=100);

	-webkit-transition: opacity 0.3s ease-in-out 0s;	
	   -moz-transition: opacity 0.3s ease-in-out 0s;
		 -o-transition: opacity 0.3s ease-in-out 0s;
		    transition: opacity 0.3s ease-in-out 0s;	
}

a:hover,
a:hover > img {
	opacity: 0.8;
	filter: alpha(opacity=80);
}

a:focus, *:focus { outline:none; }

@media (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

.a_link::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da\0020";
}

.a_map::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f3c5\0020";
}


/* ==================================================
   Button
================================================== */

.button {
	text-align: center;
	display: inline-block;
	cursor: pointer;
	letter-spacing: 2px;
	position:relative;
	overflow:hidden;
	margin-top: 1.5rem;
	padding: 15px 40px;
	font-weight: bold;
	border: 1px solid #222;
}
.button::before {
	content: "";
	position: absolute;
	height: 150px;
	width: 50px;
	background : #222;
	left: -55px;
	top: -40px;
	transform: rotate(37deg);
	transition: all .3s;
	opacity: 0.3;
}
.button:hover:before {
	left:95%;
}
.button:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

.button_white {
	color: #fff !important;
	border: 1px solid #fff;
}
.button_white::before {
	background : #fff;
}

/* ==================================================
   Header
================================================== */

header {
  display: none;
}

@media (min-width: 1200px) {
	.hamburger {
		display: none;	
	}
	header {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		transition: .3s;
		width: 100%;
    height: 112px;
		display: flex;
		justify-content: center;
		background: url(../img/site/bg_header.png) repeat-x bottom center;
	}
  header > div {
    position: relative;
    width: 100vw;
  }
  header h1 {
    position: absolute;
    left: 2%;
    padding-top: 6px;
  }
  header h1 img{
    max-width: 164px;
  }
	.gnav_menu_item {
		font-family: 'Caveat Brush', cursive;
		font-size: 1.5rem;
		display: inline-block;
	}
	.gnav_menu_item a {
		display: block;
		padding: 1.8rem 1.2rem 1.8rem 1.2rem;
		text-decoration: none;
	}
}

@media (min-width: 1360px) {
   header h1 {
    left: 4%;
  }
  header h1 img{
    max-width: 220px;
  }
  
}


/* ==================================================
   Contents
================================================== */

#contents a,
#contents a:link,
#contents a:visited,
#contents a:active {
	color: #222;
	text-decoration: none;
}

.pagetitle {
	padding: 70px 0;
}

.bg_concept {
	background: url(../img/toppage/slider02.jpg) no-repeat center center;
}

.bg_craftbeer {
	background: url(../img/toppage/slider03.jpg) no-repeat center center;
}

.bg_coffee {
	background: url(../img/toppage/slider05.jpg) no-repeat center center;
	background-size: cover;
}

.bg_food {
	background: url(../img/toppage/slider09.jpg) no-repeat center center;
}

.bg_information {
	background: url(../img/toppage/slider01.jpg) no-repeat center center;
}

.bg_concept,
.bg_craftbeer,
.bg_coffee,
.bg_food,
.bg_information {
	background-size: cover;
}

.sec_title {
	color: #fff;
	background: #000 url(../img/site/bg_blackboad.jpg);
	padding: .5rem 15px;
}

.sec_title h2 {
	font-family: 'Caveat Brush', cursive;
	font-size: 2rem;
	font-weight: 500;
	text-align: center;
}

.sec_basic {
	background: url(../img/site/bg_site.jpg);
}

@media (min-width: 1200px) {
	.pagetitle {
		padding: 270px 0 200px 0;
	}
	.sec_title {
		padding: .75rem 15px;
	}
	.sec_title h2 {
		font-size: 3rem;
	}
}

.box_black {
	padding: 15px;
	color: #fff;
	background: #000 url(../img/site/bg_blackboad.jpg);
}
.box_black a {
	color: #fff !important;
}


/* ==================================================
   Toppage
================================================== */

.bg_slider {
    position: relative;
    width: 100%;
	background: #fff;
  min-height: 72vh;
}

.bg_slider_inner {
  position: relative;
  width: 100%;
  text-align: center;
}
.bg_slider_inner > div {
  position: absolute;
  width: 120px;
  top: 8px;
  left: 12px;
}
.sec_black {
	color: #fff;
	background: #000 url(../img/site/bg_blackboad.jpg);
}

.about_area {
	background: url(../img/toppage/bg_about.jpg) no-repeat top left;
	background-size: contain;
}

.about_wrap h2 {
	display: none;
}

.fb-container {
	width: 100%;
	max-width: 500px;
}

.h_instagram {
	font-family: 'Caveat Brush', cursive;
	font-size: 3rem !important;
	text-align: center;
}


.trimming {
	position: relative;
}
.trimming:before {
    display: block;
    content: '';
    padding-top: 100%;
}
.trimming a {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}
.trimming a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#btn_more {
	cursor: pointer;
	font-size: 1.25rem;
	background: none;
	border: none;
}

@media (min-width: 768px) {
  .bg_slider {
    min-height: unset;
  }
  .bg_slider_inner > div {
    width: 150px;
  }
	.box_black {
		padding: 30px;
	}
	.about_wrap {
		position: relative;
		margin-top: 4.5rem;
		margin-bottom: 3rem;
	}
	.about_wrap h2 {
		display: block;
		position: absolute;
		top: -1.5rem;
		left: -1.5rem;
	}
	#map {
		width: 100%;
		height: 280px;
	}
}
/* ==================================================
   Craft Beer
================================================== */

.bg_mind {
	background: #fff url(../img/craftbeer/bg_mind.jpg) no-repeat center left;
	background-size: cover;
}

@media (max-width: 768px) {
	.bg_mind {
		height: 300px;
	}
}


/* ==================================================
   Food
================================================== */

.h_menu {
	text-align: center;
	position:relative;
}
.h_menu:before{
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #222;
}

.bg_burgers {
	background: url(../img/food/bg_burgers.jpg) no-repeat center left;
	background-size: cover;
}
.bg_dishes {
	background: url(../img/food/bg_dishes.jpg) no-repeat center right;
	background-size: cover;
}
.bg_dessert {
	background: url(../img/food/bg_dessert.jpg) no-repeat top right;
	background-size: cover;
}
.bg_alcohol {
	background: url(../img/food/bg_alcohol.jpg) no-repeat center left;
	background-size: cover;
}
.bg_drink {
	background: url(../img/food/bg_drink.jpg) no-repeat center center;
	background-size: cover;
}
.bg_lunch {
	background: url(../img/food/bg_lunch.jpg) no-repeat center right;
	background-size: cover;
}
.bg_cafe {
	background: url(../img/food/bg_cafe.jpg) no-repeat center right;
	background-size: cover;
}
.bg_happy {
	background: url(../img/food/bg_happy.jpg) no-repeat center right;
	background-size: cover;
}
.bg_dinner {
	background: url(../img/food/bg_dinner.jpg) no-repeat center right;
	background-size: cover;
}

.table_menu {
	margin-bottom: 10px;
	width: 100%;
	border-bottom: 1px solid #ccc;
}
.table_menu th,
.table_menu td {
	padding: 0.5rem 0;
	font-weight: 600;
}
.table_menu th {
	text-align: left;
}
.table_menu th span {
	font-weight: 500;
}
.table_menu th .fa-star {
	font-size: .88rem;
}
.table_menu td {
	white-space: nowrap;
	text-align: right;
	padding-left: 1rem;
}

@media (max-width: 768px) {
	.bg_burgers,
	.bg_dishes,
	.bg_dessert,
	.bg_alcohol,
	.bg_drink,
	.bg_lunch,
	.bg_cafe,
	.bg_happy,
	.bg_dinner {
		height: 300px;
	}
	.table_menu th,
	.table_menu td {
		width: 100%;
		display: block;
	}
	.table_menu th {
		padding: 0.5rem 0 0 0;
		border-top: 1px dotted #ccc;
	}
	.table_menu td {
		padding: 0 0 0.5rem 0;
		text-align: left;
	}
}


/* ==================================================
   Coffee
================================================== */

.ggmap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap rembed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* ==================================================
   Information
================================================== */

.table_info {
	width: 100%;
}
.table_info th {
	width: 25%;
	text-align: left;
}
.table_info th,
.table_info td {
	font-weight: 500;
	padding: 0.5rem;
	border-bottom: 1px solid #ccc;
}

@media (max-width: 768px) {
	.table_info th,
	.table_info td {
		width: 100%;
		display: block;
	}
	.table_info th {
		padding: 0.5rem 0.5rem 0 0.5rem;
		border-bottom: none;
	}
}

.bg_livingroom {
	background: url(../img/information/bg_livingroom.jpg) no-repeat center left;
	background-size: cover;
}

@media (max-width: 768px) {
	.bg_livingroom {
		height: 300px;
	}
}

.shop_list div {
  text-align: center;
}
.shop_list img {
  max-width: 100%;
  width: 200px;
}

/* ==================================================
   h2 h3 h4 h5
================================================== */

.h_center {
	font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	text-align: center;
	position: relative;
	padding: .5rem 0 1rem 0;
}
.h_center::before {
    content: '';
    position: absolute;
	top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    margin: 0 auto;
    text-align: center;
    background-image: -webkit-linear-gradient(left, transparent, #ccc 25%, #ccc 75%, transparent);
    background-image: linear-gradient(to right, transparent, #ccc 25%, #ccc 75%, transparent);
    background-position: center;
    background-repeat: no-repeat;
}
.h_center::after {
	position: absolute;
	top: -2px;
	left: 35%;
	z-index: 2;
	content: '';
	width: 30%;
	height: 3px;
	background-color: #ff8022;;
}
@media (min-width: 576px) {
	.h_center {
		font-size: 2rem;
	}
}

.h_basic {
	position: relative;
	padding: 1rem 0;
	font-size: 1.25rem;
}
.h_basic::before,
.h_basic::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
.h_basic::before {
	top: 0;
	border-top: 2px solid #d0d0d0;
	border-bottom: 1px solid #d0d0d0;
}
.h_basic::after {
	bottom: 0;
	border-top: 1px solid #d0d0d0;
	border-bottom: 2px solid #d0d0d0;
}
@media (min-width: 576px) {
	.h_basic {
		font-size: 1.5rem;
	}
}

.h_border {
	overflow: hidden;
	text-align: center;
}
.h_border span {
	position: relative;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	text-align: left;
}
.h_border span::before,
.h_border span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 400%;
	height: 1px;
	background-color: #ccc;
}
.h_border span::before {
	right: 100%;
}
.h_border span::after {
	left: 100%;
}

.h_subtitle {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
.h_subtitle span {
	display: block;
	margin-bottom: .2em;
	color: #aaa;
	font-size: .9em;
}


/* ==================================================
   ul / ol
================================================== */

ul {
	list-style: none;
}

.ul_basic {
	margin-left: 1rem;
}
.ul_basic li {
	margin-top: 0.25rem;
	list-style-type: disc;
}

.ul_notice {
	padding-left: 1rem;
	text-indent: -1rem;
}
.ul_notice li {
	margin-top: 0.25rem;
	border: none !important;
}
.ul_notice li::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 400;
	content: "\f005";
	font-size: .81rem;
}

.ol_basic {
	margin-left: 1.5rem;
}
.ol_basic li {
	margin-top: 0.25rem;
	list-style-type: decimal;
}


/* ==================================================
   Table
================================================== */

.table_basic {
	width: 100%;
	background: #fff;
}
.table_basic th {
	width: 25%;
	text-align: left;
}
.table_basic thead th,
.table_basic thead td,
.table_basic tbody th,
.table_basic tbody td {
	padding: 0.5rem;
	border: 1px solid #d0d0d0;
}
.table_basic thead th,
.table_basic thead td {
	font-weight: 600;
	text-align: center;
}
.table_basic tbody th {
	font-weight: 500;
	background: #f6f6f6;
}

@media (max-width: 768px) {
	.table_basic {
		border: 1px solid #d0d0d0;
	}
	.table_basic th,
	.table_basic td {
		width: 100%;
		display: block;
		padding: 5px 10px;
		border: none !important;
	}
	.table_basic th {
		background: #f6f6f6;
	}
}

.table_noborder th,
.table_noborder td {
	padding-right: 1rem;
	font-weight: 500;
	text-align: left;
	vertical-align: top;
}


/* ==================================================
   Box
================================================== */

.box_basic {
    position: relative;
    padding: 10px 20px;
	background: #fff;
	border: 3px double #f0f0f0;
}
a > .box_basic {
	background: #f6f6f6;
	border: 3px double #fff;
}
.box_basic:before,
.box_basic:after{ 
    content:'';
    width: 30px;
    height: 30px;
    position: absolute;
    display: inline-block;
}
.box_basic:before{
    border-left: solid 1px #d0d0d0;
    border-top: solid 1px #d0d0d0;
    top: 0;
    left: 0;
}
.box_basic:after{
    border-right: solid 1px #d0d0d0;
    border-bottom: solid 1px #d0d0d0;
    bottom: 0;
    right: 0;
}
.box_basic img {
	margin: .5rem 0;
}
.box_basic h4 {
	font-size: 1.2rem;
}
a > .box_basic h4::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0da\0020";
	color: #ff8022;
}
a > .box_basic h4,
a > .box_basic p,
a > .box_basic ul {
	color: #222 !important;
}
@media (min-width: 1281px) {
	.box_basic {
		font-size: 0.93rem;
	}
}


/* ==================================================
   Google Maps API
================================================== */

#map_canvas_wrap {
	position: relative;
	width: 100%;
  height: 916px;
  
	background: #000 url(../img/site/bg_blackboad.jpg);
}

#map_canvas {
	height: 464px;
}

#map_canvas_overlay {
	position: absolute;
	bottom: /*0*/-2px;
	left: 0;
	z-index: 99;
	width: 100%;
	height: 24px;
	background: url(../img/site/bg_contents.png) repeat-x bottom center;
}

@media (min-width: 768px) {
	#map_canvas_wrap {
		/*min-height: 424px;*/
    height: 464px;
	}
	#map_canvas {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 464px;
	}
}

/*アクセスマップ修正分*/

.access_map_wrap {
  height: 464px;
  /*margin-bottom: 5px;*/
}
.access_map_wrap iframe {
  height: 465px;
  margin-left: 0;
}
.home_map_wrap {
  position: relative;
  overflow: hidden;
  height: 280px;
}
@media (min-width: 768px) {
  .access_map_wrap {
    display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 464px;
  }
  .access_map_wrap iframe {
    height: 450px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .home_map_wrap {
    display: none;
  }
}
@media (max-width: 440px) {
  .access_map_wrap iframe {
    height: 95%;
  }
}

/* ==================================================
   Facebook Page Plugin
================================================== */

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


/* ==================================================
   Footer
================================================== */

footer {
	position: relative;
	background: url(../img/site/bg_site.jpg);
}

.footer_inner {
	height: 200px;
	background: url(../img/site/bg_footer.jpg) no-repeat bottom center;
	background-size: contain;
}

footer nav {
	display: none;
}

#credits {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	font-family: sans-serif;
	font-size: .75rem;
	line-height: 3rem;
	text-align: center;
	z-index: 0;
}

@media (min-width: 576px) {
	footer {
		padding-top: 3rem;
	}
	.footer_inner {
		height: 300px;
	}
}

@media (min-width: 768px) {
	.footer_inner {
		height: 400px;
	}
}

@media (min-width: 992px) {
	.footer_inner {
		height: 500px;
	}
}

@media (min-width: 1200px) {
	.footer_inner {
		height: 600px;
	}
	footer nav {
		display: block;
		position: absolute;
		bottom: 0;
		left: 1rem;
		z-index: 99;
	}
	footer nav ul li {
		display: inline-block;
		margin: 0 .25rem;
	}
	footer nav ul li a {
		display: block;
		line-height: 3rem;
	}
}


/* ==================================================
   instagram
================================================== */

#instafeed.row {
  margin: 0!important;
}
#instafeed li {
  padding-left: 2px!important;
  padding-right: 2px!important;
  margin-top: 4px!important;
}