@charset "UTF-8";
/* =============================================================================

index

============================================================================= */

/* メインビジュアル
---------------------------------------- */
.mainImg h1 {text-align: center;}
.mainImg h1 img {filter: drop-shadow(1px 1px 5px #180801);}
.contents h2 {text-align: center;}

/* 枠
---------------------------------------- */
.box {
	background-image: url("../img/index/bg_box_top.webp") ,url("../img/index/bg_box_bottom.webp");
	background-position: top center, bottom center;
	background-repeat: no-repeat, no-repeat;
	background-size: 100%,100%;
	background-color: #FFF;
	color: #311507;
}

/* スライダー
---------------------------------------- */
.restaurant-img {overflow: hidden;position: relative;}
.swiper-button-prev::after,.swiper-button-next::after { color: #FFF;}
span.swiper-pagination-bullet-active {background: #FFF;}
span.swiper-pagination-bullet {background: #FFF;}

/* 店舗情報
---------------------------------------- */
h3 {margin: 8px 0 24px 0;}
table th {
	color: #bb9b59;
	vertical-align: top;
	border-bottom: 2px dotted #bb9b59;
	text-align: left;
}
table td {border-bottom: 2px dotted #bb9b59;}
.snsButton {display: flex; justify-content: center; margin-bottom: 0;}
.snsButton li {
	margin: 0 8px;
	width: 56px;
}
.snsButton li a { display: block;}


/* 総合サイトトップへ戻るボタン
-------------------------------------- */
.btnTop a {
	display: block;
	margin: 0 auto;
	padding: 16px;
	border-radius: 50px;
	background: #FFF;
	color: #311507;
	text-align: center;
}
.btnTop a::before {
	display: inline-block;
	margin-right: 32px;
	line-height: 1.8;
	font-family: "Font Awesome 5 Free";
	content: '\f054';
	font-weight: 900;
}



/*PC
________________________________________________________*/

@media only screen and (min-width: 741px) {

.contents {padding-bottom: 64px;}

/* メインビジュアル
---------------------------------------- */
.mainImg h1 img {width: 736px; margin: 160px 0 120px;}
h2 {font-size: 18px; line-height: 1.8;}

/* 枠
---------------------------------------- */
.box {margin-top:  80px; padding: 88px 64px;}
.restaurant-img,.restaurant-info {
	display: inline-block;
	vertical-align: top;
}
h3 { font-size: 40px;}
table th, table td {padding: 16px 8px;}
.snsButton {margin-top: 16px;}
.map { margin-top: 24px;}
.btnTop { margin: 88px 0 48px 0;}
.btnTop a {width: 520px;font-size: 24px;}
}

/*________________________________________________________

SP
________________________________________________________*/


@media only screen and (max-width: 740px) {

.contents {
	padding: 16px 0 40px 0;
	background-size: 200px;
}

/* メインビジュアル
---------------------------------------- */
.mainImg h1 img {width: 85%; margin: 200px 0 240px;}
.contents h2 {
	width: 95%;
	margin: 0 auto 40px auto;
	font-size: 13px;
	line-height: 2;
}

/* 枠
---------------------------------------- */
.box {margin-top: 16px; padding: 32px 16px;}
.restaurant-img { width: 100%; margin-bottom: 32px;}
.restaurant-info {font-size: 14px;}
.restaurant-info h3 {font-size: 26px;text-align: center;}
table th {width: 20%; padding-right: 8px;}
table th, table td {padding: 16px 0px;}
.snsButton {margin-top: 24px;}
.snsButton li {width: 56px;}
.map { margin-top: 24px;}
.btnTop { margin: 40px 0 24px 0;}
.btnTop a {width: 80%;font-size: 18px;}



}

/* index　店舗情報　レスポンシブ
---------------------------------------- */
@media screen and (min-width:1401px) {
	.restaurant-img { width: 540px; margin-right: 32px;}
	.restaurant-info  { width: 528px;}
}
@media screen and (min-width:1081px) and (max-width:1400px) {
	.restaurant-img { width: 50%; margin-right: 32px;}
	.restaurant-info  { width: 46%;font-size: 15px;}
	.restaurant-info h3 {font-size: 32px;}
}
@media screen and (min-width:901px) and (max-width:1080px) {
	.restaurant-img { width: 50%; margin-right: 28px;}
	.restaurant-info  { width: 46%;font-size: 14px;}
	.restaurant-info h3 {font-size: 26px;}
}
@media screen and (min-width:741px) and (max-width:900px) {
	.restaurant-img { width: 50%; margin-right: 20px;}
	.restaurant-info  { width: 46%;font-size: 14px;}
	.restaurant-info h3 {font-size: 24px;}
}
