@charset "UTF-8";
/*==============
    shop
================*/
#p_shop{
}
body{
}
@media screen and (min-width: 769px) {

}
@media screen and (max-width: 768px) {
}
/* ------------------------------
    shopbox
------------------------------ */
.shopbox{
	padding: 77px 0 104px;
}

@media screen and (max-width: 768px) {
	.shopbox{
		padding: 8vw 0 10vw;
	}
}


/* ------------------------------
    shop_area
------------------------------ */
.shop_area{
	justify-content: center;
	margin-bottom: 55px;
}
.shop_area li{
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: 0.2em;
}
/*---- --------------------*/
@media screen and (min-width: 769px) {
	.shop_area a{
		display: block;
		position: relative;
	}
	.shop_area a:before{
		content: "";
		display: block;
		position: absolute;
		height: 3px;
		width: 0;
		background: #C89EA0;
		bottom: -16px;
		left: 0;
		transition: .6s;
	}
	.shop_area a:hover:before{
		width: 100%;
	}
	.shop_area li+li{
		margin-left: 16px;
		padding-left: 16px;
		border-left: 1px solid #4d4d4d;
	}

}
@media screen and (max-width: 768px) {
	.shop_area{
		justify-content: center;
		flex-wrap: wrap;
		margin-bottom: 8vw;
	}
	.shop_area li{
		width: 20%;
		text-align: center;
		font-size: 3.7vw;
		line-height: 1;
		letter-spacing: 0.2em;
		border-left: 1px solid #4d4d4d;
	}
	.shop_area li:nth-child(4), .shop_area li:last-child{
		border-right: 1px solid #4d4d4d;
	}
	.shop_area li:nth-child(n+5){
		margin-top: 4vw;
	}
	.shop_area li:nth-child(1), .shop_area li:nth-child(7){
		width: auto;
		padding: 0 3%;
	}

	.shop_area li a{
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

}


/* ------------------------------
    areawrap
------------------------------ */
.areawrap{
}
.areawrap + .areawrap{
	margin-top: 35px;
}
.area_name{
	text-align: center;
	position: relative;
	font-size: 1.8rem;
	line-height: 1;
	padding-bottom: 28px;
	margin-bottom: 30px;
	letter-spacing: 0.2em;
	margin-top: 30px;
	padding-top: 30px;
}
.area_name:before{
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	width: 35px;
	background: #4D4D4D;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

/*----shop_list--------------------*/
.shop_list{
	flex-wrap: wrap;
}
.shop_list li{
	width: 28%;
	position: relative;
}
.shopname{
	font-size: 1.8rem;
	line-height: 1.2;
	margin-bottom: 0.8em;
}
.shop_list:after{
	content:"";
  	display: block;
  	width:28%;
}
@media screen and (min-width: 769px) {
	.shop_list li+li:before{
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		height: 90%;
		top: 5%;
		left: -14%;
		background: #666666;
	}
	.shop_list li:nth-child(3n+1):before{
		display: none;
	}
	.shop_list li:nth-child(n+4){
		margin-top: 54px;
	}



}
@media screen and (max-width: 768px) {
	.areawrap{
	}
	.areawrap + .areawrap{
		margin-top: 10vw;
	}
	.area_name{
		text-align: center;
		position: relative;
		font-size: 4.2vw;
		line-height: 1;
		padding-bottom: 3.2vw;
		margin-bottom: 5.3vw;
		margin-top: 3vw;
		padding-top: 3vw;
	}
	.area_name:before{
		height: 2px;
		width: 1.5em;
	}

	/*----shop_list--------------------*/
	.shop_list li{
		width: 48%;
	}
	.shopname{
		font-size: 4vw;
		margin-bottom: 0.6em;
	}
	.shop_list:after{
		content:"";
	  	display: block;
	  	width:48%;
	}
	.shop_list li:nth-child(n+3){
		margin-top: 6vw;
	}
	.shop_list li:nth-of-type(even):before{
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		height: 90%;
		top: 5%;
		left: -4%;
		background: #666666;
	}
}

.shop_att{
	padding-top: 20px;
	margin-bottom: 60px;
	text-align: center;
	font-size: 1.2rem;
}

.shop_att a {
  border-bottom: solid 1px #666;
}
.shop_att a:hover {
  opacity: .6;
}
@media screen and (max-width: 768px) {
	.shop_att{
		padding-top: 0;
		margin-bottom: 8vw;
		font-size: 2.8vw;
	}
}