@charset "utf-8";

/*staging*/
/*************************************************/
/* .nav-map > ul { background: #ff0; } */
/*************************************************/


.bnr_tokuyoyaku {
	position: fixed;
	top: 60px;
	right: 8px;
	width: 80px;
}

.category-ttl{ width:30.3125%;/*194/640*/ margin:0 auto; line-height:1; padding-bottom:8.59375%;/*55/640*/}

/* shop-list */
#shop-list{ width:90%;/*576/640*/ margin:0 auto; padding-bottom:13.88888%;/*80/576*/}
#shop-list h1{ margin-bottom:10px;}
#shop-list h1 span{ display:block; font-weight:bold;}
#shop-list h1 + p{ margin-bottom:15px;}
#shop-list dl{ border:1px solid #ddd; margin-bottom:15px;}
#shop-list dt { padding:10px; cursor:pointer;}
#shop-list dt div { font-weight:bold; background: url(../img/icon_plus.png) no-repeat right center; background-size: 12px 12px; margin-right:5px;}
#shop-list dt div span{ display:block;}
#shop-list dt div.open { background: url(../img/icon_minus.png) no-repeat right center; background-size: 12px 12px; margin-right:5px;}
#shop-list dt div.alone { background: url(../img/icon_arrow.png) no-repeat right center; background-size: 12px 12px; margin-right:5px;}
#shop-list dd { display: none; padding:0 10px;}
#shop-list dd ul{}
#shop-list dd li{ border-top:1px solid #ddd;}
#shop-list dd li a{ display:block;}
#shop-list dd li div{ font-weight:bold; background: url(../img/icon_arrow.png) no-repeat right center; background-size: 12px 12px; margin-right:8px; padding:10px;}
#shop-list dd li div span{ display:block;}

/* shop-area */
#shop-area{ width:90%;/*576/640*/ margin:0 auto; padding-bottom:13.88888%;/*80/576*/}
#shop-area h1{ margin-bottom:10px;}
#shop-area h1 span{ display:block; font-weight:bold;}
#shop-area h1 + p { margin-bottom: 15px; }

.shop-area-list{}
.shop-area-list li{ border-bottom:1px solid #ddd; margin-bottom:6.94444%;/*40/576*/}
.shop-area-list li:last-child{ border-bottom:none;}
.shop-area-list li .area-header{}
.shop-area-list li span{ margin-right:5px;}
.shop-area-list li h2{ display:block; font-weight:bold; font-size:12px;}
.shop-area-list li h2 span{ display:block; font-size:14px;}
.shop-area-list li h2 em{ font-weight:bold; color:#cf0000;}
.shop-area-list li table{ width:100%; margin-top:12px;}
.shop-area-list li th{ font-size:10px; font-weight:normal; white-space:nowrap; vertical-align:top;}
.shop-area-list li td{ vertical-align:top; padding-left:15px;}
.shop-area-list li tr.tel td{ color:#666;}

.detail-btn{ border:1px solid #000; font-weight:bold; text-align:center; height:30px; line-height:30px; width:126px; margin:6.94444% auto;/*40 auto/576*/}
.detail-btn a{ display:block; color:#000;}

/*20220218　来店予約ボタン追加*/
.area-button { display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 32px; }
.area-button-cont {}
.area-button-cont a { display: block; color: #000; border: 1px solid #000; font-weight: bold; text-align: center; width: 126px; line-height: 30px; margin: 0 10px; }


/* shop-detail */
#shop-detail{ width:90%;/*576/640*/ margin:0 auto; padding-bottom:13.88888%;/*80/576*/}
.detail-header{ padding-bottom:15px;}
.detail-header span.icon-new{ margin-right:5px;}
.detail-header h1{ display:block; font-weight:bold; font-size:12px;}
.detail-header h1 span{ display:block; font-size:14px;}
.detail-header h1 em{ font-weight:bold; color:#cf0000;}
#shop-detail table{ width:100%; margin-top:12px;}
#shop-detail th{ display:block; font-weight:normal; white-space:nowrap; vertical-align:top; text-align:left; margin-bottom:5px;}
#shop-detail td{ display:block; vertical-align:top; padding:0 0 20px 20px;}
#Gmap{ width:100%; height:300px;}
.view-map{ text-align:right; padding:10px 0;}

ul.shop-btn-list{ margin:30px 0;}
ul.shop-btn-list li{ border:1px solid #000; font-weight:bold; text-align:center; height:30px; line-height:30px; width:215px; margin:0 auto 15px auto;}
ul.shop-btn-list li a{ display:block; color:#000;}
ul.shop-btn-list li.shop-btn-onlineshop a:before{
	position: relative;
	top: 0.2em;
	content:"";
	display: inline-block;
	width: 2em;
	height: 1.3em;
	background:url(../img/icon_menu_onlineshop.png) no-repeat;
	background-size:contain;
}
ul.shop-btn-list li.shop-btn-onlineshop a:hover { background-image: url(../img/icon_header_onlineshop.png); }

.google-map {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.shop_notice { width: 90%; margin: 0 auto 8.59375%;/*55/640*/ }
.shop_notice a { padding: 10px; display: block; border: 1px solid #ddd; text-align: center; color: #F00; }

.shop-type{
	display: flex;
}
.shop-type li{
	text-align: center;
	font-size: 11px;
  background: #000;
  color: #FFF;
  font-weight: bold;
  min-width: 45px;
  margin: 0 0 10px;
  padding: 3px 7px !important;
}
.shop-type li.gray{
	background: #e6e5e5;
	color: #000;
}
.shop-type li:not(:last-of-type){
	margin-right: 10px;
}

.payment-icon{
	display: flex;
	flex-wrap: wrap;
}
.payment-icon li{
	text-align: center;
	font-size: 11px;
  background: #495061;
  color: #FFF;
  font-weight: bold;
  min-width: 45px;
  margin: 0 0 10px;
  padding: 3px 7px !important;
}
.payment-icon li:not(:last-of-type){
	margin-right: 10px;
}

/* PC */
@media only screen and (min-width:641px){
	.google-map {
	  position: relative;
	  width: 100%;
	  height: 0;
	  padding-bottom: 465px;
	  overflow: hidden;
	}
	.google-map iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}

	.bnr_tokuyoyaku {
		position: fixed;
		top: 100px;
		right: 20px;
		width: 140px;
	}

	.category-ttl{ width:142px; padding-bottom:30px;}

	/* shop-list */
	#shop-list{ width:924px; padding-bottom:145px;}
	#shop-list h1{ margin-bottom:10px;}
	#shop-list h1 span{ font-size:18px;}
	#shop-list h1 + p{ margin-bottom:40px;}
	#shop-list dl{ margin:0 auto 15px auto;}
	#shop-list dt { padding:10px 15px;}
	#shop-list dt div span{ display:inline-block; width:175px;}

	#shop-list dd li div{padding:10px 10px 10px 20px;}
	#shop-list dd li div span{ display:inline-block; width:160px;}

	/* shop-area */
	#shop-area{ width:auto; padding-bottom:145px;}
	#shop-area h1{ margin-bottom: 10px;}
	#shop-area h1 span{ font-size:18px;}
	#shop-area h1 + p { margin-bottom: 40px; }

	.shop-area-list{}
	.shop-area-list li{ margin-bottom:12px; padding-bottom:30px;}
	.shop-area-list li .area-header{ width:260px; float:left; padding-right:30px;}
	.shop-area-list li h2{ font-size:14px;}
	.shop-area-list li h2 span{font-size:18px;}

	.shop-area-list li table{ width:590px; margin-top:18px; float:left; padding-right:30px;}
	.shop-area-list li tr{ display: block; float:left;}
	.shop-area-list li tr.address{ width:235px; padding-right:30px;}
	.shop-area-list li tr.tel{ width:110px; padding-right:30px;}
	.shop-area-list li tr.open{ width:155px; padding-right:30px;}
	.shop-area-list li th{ display:block; font-size:12px;}
	.shop-area-list li td{ display:block; padding:0;}

	.detail-btn{ width:120px; height:30px; line-height:30px; margin:18px 0 0 0; float:right;}
	.detail-btn a{ transition:.3s;}
	.detail-btn a:hover{ background-color:#000; color:#FFF; opacity:1;}

	/*20220218　来店予約ボタン追加*/
	.area-button { padding: 18px 0 0 0; }
	.area-button-cont a { display: block; color: #000; border: 1px solid #000; font-weight: bold; text-align: center; width: 126px; line-height: 30px; margin: 0 10px; }
	.area-button-cont:nth-child(n+2) a { margin-top: 10px; }


	/* shop-detail */
	#shop-detail{ width:924px; padding-bottom:145px;}
	.detail-header{ padding-bottom:30px;}
	.detail-header span.icon-new{ margin-right:5px;}
	.detail-header h1{ display:block; font-weight:bold; font-size:14px;}
	.detail-header h1 span{ display:block; font-size:18px;}
	#shop-detail table{ width:100%; margin-top:0;}
	#shop-detail th{ display:table-cell; font-size:12px; width:120px;}
	#shop-detail td{ display:table-cell;}
	#Gmap{ height:465px;}

	ul.shop-btn-list{ text-align:center;}
	ul.shop-btn-list li{ width:200px; height:46px; line-height:46px; display:inline-block; margin:0 15px;}
	ul.shop-btn-list li a{ transition:.3s;}
	ul.shop-btn-list li a:hover{ background-color:#000; color:#FFF; opacity:1;}

	.shop_notice { width: 924px; margin: 0 auto 30px; }
	.shop_notice a { padding: 10px 15px; }

	.detail-wrap{
		display: flex;
	}
	.detail-left{
		width: 50%;
	}
	.detail-right{
		width: 50%;
	}

}