@charset "UTF-8";
/* CSS Document */
.saleMap{
  width: 100%;
  text-align: center;
}
.saleMap li{
  list-style: none;
  float: left;
	margin: 0;
	padding: 0 5px;
}
.saleMap a{
  display: block;
  position: relative;
 	width: 30px;
	height: 30px;
	padding: 5px;
	border-radius: 50%;
	transition: .3s;
}
.saleMap a:hover{
	z-index:99;
}
.saleMap a:before {
  width: 30px;
  height: 30px;
	padding: 0;
	margin: 0;
	color: #fff;
 	text-align: center;
}

#p5 a.cat01:before { content: url("../../01service_tech/sales/img/icon-railroad.png") ; }
#p5 a.cat02:before { content: url("../../01service_tech/sales/img/icon-general.png") ; }
#p5 a.cat03:before { content: url("../../01service_tech/sales/img/icon-info.png") ; }

.saleMap a span{/**短い吹き出し**/
  position: absolute;
	opacity: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	top: -30px;
	left: -75px;
	width:170px;
	padding: 10px;
	border-radius: 2px;
	background: #FFFFFF;/**吹き出しの色**/
	color: #fff;
	font-size: 14px;
	font-weight:bold;
	line-height: 1;
	transition: .3s;
	box-shadow: 1px 1px 5px -1px #777777;
	border-radius:3px;
}


.saleMap a span:after{/**短い吹き出しの下の▼**/
	position: absolute;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	top: 100%;
	left: 88px;
	height: 0;
	width: 0;
	border: 6px solid transparent;
	border-top: 6px solid #BCA058;
	content: "";
}

.saleMap a.long span{/**長い吹き出し**/
  position: absolute;
	left: -110px;
	width:240px;
	padding: 10px;
}
.saleMap a.long span:after{/**長い吹き出しの下の▼**/
	position: absolute;
	top: 100%;
	left: 123px;
	height: 0;
	width: 0;
}

.saleMap a.cat01 span{/**吹き出し：電車**/
	color:#0071AA;
	border:1px solid #0071AA;
}
.saleMap a.cat02 span{/**吹き出し：一般**/
	color:#006633;
	border:1px solid #006633;
}
.saleMap a.cat03 span{/**吹き出し：情報**/
	color:#CC8A33;
	border:1px solid #CC8A33;
}
.saleMap a.cat01 span:after{/**吹き出しの下の▼：電車**/
	border-top: 6px solid #0071AA;
}
.saleMap a.cat02 span:after{/**吹き出しの下の▼：一般**/
	border-top: 6px solid #006633;
}
.saleMap a.cat03 span:after{/**吹き出しの下の▼：情報**/
	border-top: 6px solid #CC8A33;
}
.saleMap a:hover span{
	opacity: 1;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	top: -35px;
}

div.sales{
	position:relative;
	height: 358px;
	}
	
div.sales ul.saleMap li{
	position:absolute;
}


#base{position:absolute;}

div.sales ul.saleMap li.point01
{
    margin-left:265px;
    margin-top: 170px;
}
div.sales ul.saleMap li.point02
{
    margin-left: 610px;
    margin-top: 230px;
}
div.sales ul.saleMap li.point03
{
    margin-left: 450px;
    margin-top: 62px;
}
div.sales ul.saleMap li.point04
{
    margin-left: 82px;
    margin-top: 220px;
}
div.sales ul.saleMap li.point05
{
    margin-left: 360px;
    margin-top: 95px;
}
div.sales ul.saleMap li.point06
{
    margin-left: 180px;
    margin-top: 100px;
}
div.sales ul.saleMap li.point07
{
    margin-left: 610px;
    margin-top: 130px;
}
div.sales ul.saleMap li.point08
{
    margin-left: 95px;
    margin-top: 35px;
}
div.sales ul.saleMap li.point09
{
    margin-left: 370px;
    margin-top: 252px;
}
div.sales ul.saleMap li.point10
{
    margin-left: 192px;
    margin-top: 229px;
}
div.sales ul.saleMap li.point11
{
    margin-left: 655px;
    margin-top: 50px;
}

div.sales ul.saleMap li.point12
{
    margin-left: 60px;
    margin-top: 148px;
}


div.sales ul.saleMap li.point13
{
    margin-left: 566px;
    margin-top: 96px;
}


div.sales ul.saleMap li.point14
{
    margin-left: 161px;
    margin-top: 192px;
}

#p5 a span{
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(90deg);
}
#p5 a:hover span{
	-webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
}