@charset "UTF-8";
.shoplist{
	padding-bottom: 46px;
}
#main {
	clear: both;
}

.map {
	float: left;
	width: 768px;
	height: 835px;
	background-image: url(../common/images/shoplist/map_bg.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
}


.hokkaido {
	width: 100%;
	height: 100%;
	background-image: url(../common/images/shoplist/hokkaido.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.map ol {
	width: 100%;
	height: 100%;
	position: relative;
}
.map li {
	position: absolute;
}
.map li.pin01 {top: 46.59%; left: 51.43%;}
.map li.pin02 {top: 58.20%; left: 49.22%;}
.map li.pin03 {top: 57.13%; left: 54.56%;}
.map li.pin04 {top: 56.41%; left: 50.78%;}
.map li.pin05 {top: 60.36%; left: 49.61%;}
.map li.pin06 {top: 62.40%; left: 45.96%;}
.map li.pin07 {top: 16.29%; left: 27.73%;}
.map li.pin08 {top: 16.77%; left: 25.39%; z-index: 1;}
.map li.pin09 {top: 18.32%; left: 27.99%;}
.map li.pin10 {top: 21.32%; left: 31.51%;}
.map li.pin11 {top: 24.07%; left: 22.53%;}
.map li.pin12 {top: 22.16%; left: 19.40%;}
.map li.pin13 {top: 20.00%; left: 17.06%;}
.map li.pin14 {top: 26.47%; left: 33.59%;}
.map li.pin15 {top: 27.07%; left: 41.28%;}
.map li.pin16 {top: 31.86%; left: 30.08%;}
.map li.pin17 {top: 32.69%; left: 37.24%;}
.map li.pin18 {top: 35.21%; left: 23.31%;}
.map li.pin19 {top: 67.90%; left: 30.60%;}
.map li.pin20 {top: 68.74%; left: 27.08%;}
.map li.pin21 {top: 67.07%; left: 44.40%;}
.map li.pin22 {top: 71.14%; left: 38.15%;}
.map li.pin23 {top: 72.81%; left: 39.19%;}
.map li.pin24 {top: 77.37%; left: 40.63%;}
.map li.pin25 {top: 82.40%; left: 50.39%;}
.map li.pin26 {top: 77.60%; left: 31.64%;}
.map li.pin27 {top: 80.84%; left: 29.82%;}
.map li.pin28 {top: 78.92%; left: 26.30%;}
.map li.pin29 {top: 43.83%; left: 61.07%;}
.map li.pin30 {top: 55.09%; left: 70.44%;}
.map li.pin31 {top: 74.49%; left: 59.77%;}
.map li.pin32 {top: 70.78%; left: 75.78%;}
.map li.pin33 {top: 72.22%; left: 79.30%;}
.map li.pin34 {top: 72.22%; left: 85.81%;}
.map li.pin35 {top: 69.34%; left: 95.96%;}
.map li.pin36 {top: 90.42%; left: 23.05%;}
.map li.pin37 {top: 91.38%; left: 26.56%;}
.map li.pin38 {top: 64.31%; left: 45.96%;}
.map li.pin39 {top: 66.47%; left: 33.85%;}
.map li.pin40 {top: 13.77%; left: 12.50%; z-index: 0;}

.map li:before, .map li:after {
	content: "";
	display: inline-block;
	height: 0;
	border-style: solid;
	border-color: #333;
	position: absolute;
}
.map li:before {
	border-width: 4.5px;
	border-radius: 50%;
	top: -4px;
	left: -4px;
}
.map li:after {
	width: 0;
	border-color: #333333;
}
.map li:hover:before, .map li:hover:after,
.map li.active:before, .map li.active:after {
	border-color :#b50081;
}

.map li div {
	display: inline-block;
	white-space: nowrap;
	width: auto;
	height: 20px;
	line-height: 20px;
	border-radius: 6px;
	box-sizing: border-box;
	font-size: 11px;
	vertical-align: middle;
	position: absolute;
	z-index: 3;
}
.map li div span {
	display: inline-block;
	height: 100%;
}
.map li div .number {
	width: 21px;
	border-radius: 3px 0 0 3px;
	font-size: 0px;
	vertical-align: top;
	background-image: url(../common/images/shoplist/number.gif);
	background-repeat: no-repeat;
}
.map li div .name {
	width: auto;
	box-sizing: border-box;
	padding-left: 4px;
	padding-right: 7px;
	border: 1px solid #333;
	background-color: #fff;
	border-radius: 0 3px 3px 0;
}
.map li:hover div .name,
.map li.active div .name {
	border: 1px solid #b50081;
	background-color: #b50081;
	color: #fff;
}
.list ol li.active a {
    background-color: #333;
}


.map li.pin01:after {
	border-width: 0 6px 12px 6px;
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0; left: -6px;
}
.map li.pin01 div {top: 12px; left: -38px;}

.map li.pin02:after {
	border-width: 6.5px 0 6.5px 15px;
	/*border-color: transparent transparent transparent #333333;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom: transparent;
	top: -4.5px; left: -9px;
}
.map li.pin02 div {top: -11px; right: 9px;}

.map li.pin03:after {
	border-width: 9px 15px 1px 0;
/*	border-color: transparent #333333 transparent transparent;*/
	border-top-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -8px; left: 0px;
}
.map li.pin03 div {top: -12px; left: 11px;}

.map li.pin04:after {
	border-width: 16px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -16px; left: -8px;
}
.map li.pin04 div {bottom: 10px; left: -38px;}

.map li.pin05:after {
	border-width: 13px 8.5px 8px 0;
/*border-color: transparent #333333 transparent transparent;*/
	border-top-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
transform: rotate(-135deg);
	top: -8px; left: 6px;
}
.map li.pin05 div {top: -17px; left: 11px;}

.map li.pin06:after {
	border-width: 6.5px 15px 6.5px 0;
/*border-color: transparent #333333 transparent transparent;*/
	border-top-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -4.5px; left: 0px;
}
.map li.pin06 div {top: -10px; left: 12px;}

.map li.pin07:after {
	border-width: 16px 12px 0 4px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -16px; left: -4px;
}
.map li.pin07 div {bottom: 11px; left: -7px;}

.map li.pin08:after {
	border-width: 0 14px 10px 10px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
transform: rotate(47deg);
	top: -17px; left: -16px;
}
.map li.pin08 div {bottom: 12px; left: -85px;}

.map li.pin09:after {
	border-width: 5px 15px 5px 0;
	/*border-color: transparent #333333 transparent transparent;*/
		border-top-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -5px; left: 0px;
}
.map li.pin09 div {top: -12px; left: 12px;}

.map li.pin10:after {
	border-width: 0 9px 16px 6px;
	/*border-color: transparent transparent #333333 transparent;*/
		/* border-top-color: transparent; */
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -6px;
}
.map li.pin10 div {top: 12px; left: -11px;}

.map li.pin11:after {
	border-width: 0 12px 10px 9px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
transform: rotate(-43.2deg);
	top: -2px; left: -20px;
}
.map li.pin11 div {top: -3px; right: 8px;}

.map li.pin12:after {
	border-width: 6.5px 0 6.5px 15px;
/*border-color: transparent transparent transparent #333333;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom: transparent;
	top: -6.5px; left: -13px;
}
.map li.pin12 div {top: -11px; right: 8px;}

.map li.pin13:after {
	border-width: 15px 6.5px 0 6.5px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -15px; left: -6.5px;
}
.map li.pin13 div {bottom: 9px; left: -46px;}

.map li.pin14:after {
	border-width: 6.5px 0 6.5px 15px;
/*border-color: transparent transparent transparent #333333;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom: transparent;
	top: -6.5px; left: -13px;
}
.map li.pin14 div {top: -11px; right: 7px;}

.map li.pin15:after {
	border-width: 0 9px 16px 6px;
	/*border-color: transparent transparent #333333 transparent;*/
		border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -6px;
}
.map li.pin15 div {top: 13px; left: -67px;}

.map li.pin16:after {
	border-width: 6.5px 0 6.5px 15px;
/*border-color: transparent transparent transparent #333333;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom: transparent;
	top: -6.5px; left: -13px;
}
.map li.pin16 div {top: -10px; right: 8px;}

.map li.pin17:after {
	border-width: 0 9px 16px 6px;
/*border-color: transparent transparent #333333 transparent;*/
	border-bottom-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -6px;
}
.map li.pin17 div {top: 12px; left: -56px;}

.map li.pin18:after {
	border-width: 0 8px 15px 8px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -8px;
}
.map li.pin18 div {top: 11px; left: -44px;}

.map li.pin19:after {
	border-width: 0 8px 21px 8px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -8px;
}
.map li.pin19 div {top: 19px; left: -39px;}

.map li.pin20:after {
	border-width: 0 11px 6px 11px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
transform: rotate(-121deg);
	top: -10px; left: -18px;
}
.map li.pin20 div {top: -22px; right: 7px;}

.map li.pin21:after {
	border-width: 0 9px 10px 12px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
transform: rotate(42.5deg);
	top: -2px; left: 0px;
}
.map li.pin21 div {top: -3px; left: 11px;}

.map li.pin22:after {
	border-width: 11px 15px 0px 0;
/*border-color: transparent #333333 transparent transparent;*/
	border-top-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -11px; left: 0px;
}
.map li.pin22 div {top: -16px; left: 15px;}

.map li.pin23:after {
	border-width: 0 9px 10px 11px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
transform: rotate(38.1deg);
	top: -3px; left: 3px;
}
.map li.pin23 div {top: -5px; left: 14px;}

.map li.pin24:after {
	border-width: 0 8px 21px 8px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -8px;
}
.map li.pin24 div {top: 16px; left: -39px;}

.map li.pin25:after {
	border-width: 0 8px 21px 8px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -8px;
}
.map li.pin25 div {top: 15px; left: -33px;}

.map li.pin26:after {
	border-width: 16px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -16px; left: -8px;
}
.map li.pin26 div {bottom: 11px; left: -33px;}

.map li.pin27:after {
	border-width: 0 8px 21px 8px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -8px;
}
.map li.pin27 div {top: 15px; left: -34px;}

.map li.pin28:after {
	border-width: 6.5px 0 6.5px 15px;
/*border-color: transparent transparent transparent #333333;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom: transparent;
	top: -5.5px; left: -12px;
}
.map li.pin28 div {top: -11px; right: 9px;}

.map li.pin29:after {
	border-width: 15px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -15px; left: -8px;
}
.map li.pin29 div {bottom: 11px; left: -32px;}

.map li.pin30:after {
	border-width: 15px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -15px; left: -8px;
}
.map li.pin30 div {bottom: 11px; left: -31px;}

.map li.pin31:after {
	border-width: 15px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -15px; left: -8px;
}
.map li.pin31 div {bottom: 9px; left: -34px;}

.map li.pin32:after {
	border-width: 15px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -15px; left: -8px;
}
.map li.pin32 div {bottom: 11px; left: -43px;}

.map li.pin33:after {
	border-width: 0 8px 15px 8px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -8px;
}
.map li.pin33 div {top: 13px; left: -40px;}

.map li.pin34:after {
	border-width: 0 8px 15px 8px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
	top: 0px; left: -8px;
}
.map li.pin34 div {top: 11px; left: -20px;}

.map li.pin35:after {
	border-width: 15px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -15px; left: -8px;
}
.map li.pin35 div {bottom: 9px; left: -43px;}

.map li.pin36:after {
	border-width: 16px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -16px; left: -8px;
}
.map li.pin36 div {bottom: 12px; left: -55px;}

.map li.pin37:after {
	border-width: 16px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -16px; left: -8px;
}
.map li.pin37 div {bottom: 12px; left: -12px;}

.map li.pin38:after {
	border-width: 0 9px 10px 12px;
/*border-color: transparent transparent #333333 transparent;*/
	border-top-color: transparent;
	border-right-color: transparent;
	border-left-color: transparent;
transform: rotate(42.9deg);
	top: -2px; left: 0px;
}
.map li.pin38 div {top: -4px; left: 13px;}

.map li.pin39:after {
	border-width: 16px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -16px; left: -8px;
}
.map li.pin39 div {bottom: 14px; left: -69px;}

.map li.pin40:after {
	border-width: 16px 8px 0 8px;
/*border-color: #333333 transparent transparent transparent;*/
	border-right-color: transparent;
	border-bottom: transparent;
	border-left-color: transparent;
	top: -16px; left: -8px;
}
.map li.pin40 div {bottom: 13px; left: -32px;}

.map li.pin01 .number {background-position: 0 0;}
.map li.pin02 .number {background-position: 0 calc(100% / 39 * 1);}
.map li.pin03 .number {background-position: 0 calc(100% / 39 * 2);}
/* .map li.pin04 .number {background-position: 0 calc(100% / 39 * 3);} */
.map li.pin05 .number {background-position: 0 calc(100% / 39 * 3);}
.map li.pin06 .number {background-position: 0 calc(100% / 39 * 4);}
.map li.pin07 .number {background-position: 0 calc(100% / 39 * 5);}
.map li.pin08 .number {background-position: 0 calc(100% / 39 * 6);}
.map li.pin09 .number {background-position: 0 calc(100% / 39 * 7);}
.map li.pin10 .number {background-position: 0 calc(100% / 39 * 8);}
.map li.pin11 .number {background-position: 0 calc(100% / 39 * 9);}
.map li.pin12 .number {background-position: 0 calc(100% / 39 * 10);}
.map li.pin13 .number {background-position: 0 calc(100% / 39 * 11);}
.map li.pin14 .number {background-position: 0 calc(100% / 39 * 12);}
.map li.pin15 .number {background-position: 0 calc(100% / 39 * 13);}
.map li.pin16 .number {background-position: 0 calc(100% / 39 * 14);}
.map li.pin17 .number {background-position: 0 calc(100% / 39 * 15);}
.map li.pin18 .number {background-position: 0 calc(100% / 39 * 16);}
.map li.pin19 .number {background-position: 0 calc(100% / 39 * 17);}
.map li.pin20 .number {background-position: 0 calc(100% / 39 * 18);}
.map li.pin21 .number {background-position: 0 calc(100% / 39 * 19);}
.map li.pin22 .number {background-position: 0 calc(100% / 39 * 20);}
.map li.pin23 .number {background-position: 0 calc(100% / 39 * 21);}
.map li.pin24 .number {background-position: 0 calc(100% / 39 * 22);}
.map li.pin25 .number {background-position: 0 calc(100% / 39 * 23);}
.map li.pin26 .number {background-position: 0 calc(100% / 39 * 24);}
.map li.pin27 .number {background-position: 0 calc(100% / 39 * 25);}
.map li.pin28 .number {background-position: 0 calc(100% / 39 * 26);}
.map li.pin29 .number {background-position: 0 calc(100% / 39 * 27);}
.map li.pin30 .number {background-position: 0 calc(100% / 39 * 28);}
.map li.pin31 .number {background-position: 0 calc(100% / 39 * 29);}
.map li.pin32 .number {background-position: 0 calc(100% / 39 * 30);}
.map li.pin33 .number {background-position: 0 calc(100% / 39 * 31);}
.map li.pin34 .number {background-position: 0 calc(100% / 39 * 32);}
.map li.pin35 .number {background-position: 0 calc(100% / 39 * 33);}
.map li.pin36 .number {background-position: 0 calc(100% / 39 * 34);}
.map li.pin37 .number {background-position: 0 calc(100% / 39 * 35);}
.map li.pin38 .number {background-position: 0 calc(100% / 39 * 36);}
.map li.pin39 .number {background-position: 0 calc(100% / 39 * 37);}
.map li.pin40 .number {background-position: 0 calc(100% / 39 * 38);}



.list {
	width: 410px;
	float: right;
}
.list ol {
	columns: 2;
}
.list ol li {
	width: 200px;
	display: inline-block;
}
.list ol li a {
	display: block;
	border-radius: 6px;
	line-height: 21px;
	letter-spacing: 0.1em;
	/*padding-top: 10px;*/
	/*padding-bottom: 7px;*/
	margin-bottom: 5px;
	color: #fff;
	position: relative;
	padding: 8px 0 8px calc(1em + 37px);
	background-color: #b50081;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.list ol li a:hover {
	background-color: #333;
}
.list li span {
	display: block;
	width: 37px;
	height: 100%;
	border-radius: 5px 0 0 5px;
	font-size: 16px;
	background-color: #333;
	font-weight: bold;
	text-align: center;
	/*margin-right: 1em;*/
	line-height: 37px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.list ul {
	overflow: hidden;
	margin-top: 15px;
}
.list ul li {
	width: 50%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.list ul li:nth-child(odd) {
	float: left;
	padding-right: 5px;
}
.list ul li:nth-child(even) {
	float: right;
	padding-left: 5px;
}
.list ul li:nth-child(2) ~ li {
	margin-top: 10px;
}
.list ul li img { width: 100%; }


/* 231020追加 */

@media (min-width:769px){
	#main{
		margin-bottom: 18px;
		margin-top: 12px;
	}
	.mapcont{
		background: url(../common/images/shoplist/map_bg2.jpg);
		background-repeat: repeat-x;
		overflow: hidden;
		max-width: 100%;
	}
	
	.map{
		background-image: none;
		float: none;
		margin: 0 auto;
		padding-top: 0px;
	}
}
/* 231020追加ここまで */



@media (max-width:1200px){
	.map {
		width: calc(100% - 420px);
		height: auto;
		padding-bottom: 50px;
	}
	.hokkaido ol {
		height: 0;
		padding-bottom: 108.5%;
	}
	.map li {
		transform: scale(0.9);
		transform-origin: center center;
	}
	.map li div {
    display: inline-block;
    white-space: nowrap;
    width: auto;
    height: 20px;
    line-height: 20px;
    border-radius: 3px;
    font-size: 10px;
	}
}

@media (max-width:1155px){
	.map li { transform: scale(0.8); }
}

@media (max-width:1000px){
	.map li { transform: scale(0.7); }
}

@media (max-width:768px){
	.mainHeader ~ * {
		padding-left: 13px;
		padding-right: 13px;
	}
	#main { margin-top: 20px; }
	.map, .list { float: none; }
	.map {
		width: auto;
		height: auto;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.hokkaido { height: auto; }
	.map li { transform: scale(0.8); }
	.list { width: auto; }
	.list ol { width: auto; }
	.list ol li { width: 100%; }
}
@media (max-width:645px){
	.map li { transform: scale(0.7); }
}
@media (max-width:570px){
	.map li { transform: scale(0.6); }
	.list ol li a {
		padding-left: calc(1em + 30px);
	}
	.list ol li a,
	.list li span {
		font-size: 10px;
		line-height: 15px;
	}
	.list li span {
		width: 30px;
		line-height: 31px;
	}
}
@media (max-width:375px){
	.map li { transform: scale(0.5); }
}
@media (max-width:345px){
	.list ol { columns: 1; }
}