@charset "utf-8";
/* CSS Document */
.wrapArea{
  width: 702px;
  text-align: center;
}
.wrapArea li{
  list-style: none;
  float: left;
	margin: 0;
	padding: 0 5px;
}
.wrapArea a{
  display: block;
  position: relative;
 	width: 30px;
	height: 30px;
	padding: 5px;
	border-radius: 50%;
	/**background: #3498db;アイコンの色
	text-decoration: none;**/
	transition: .3s;
}
.wrapArea a:hover{
	/**background: #196090;アイコン乗った時の色**/
}
.wrapArea a:before {
  width: 30px;
  height: 30px;
	padding: 0;
	margin: 0;
	color: #fff;
 	text-align: center;
}

#p5 a:before { content: url("../../01service_tech/sales/general/img/electric/icon.gif") ; }

.wrapArea a span{
  position: absolute;
	opacity: 0;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	top: -30px;
	left: -85px;
	width:220px;
	padding: 10px;
	background: #BCA058;/**吹き出しの色**/
	color: #fff;
	font-size: 14px;
	font-weight:bold;
	line-height: 1;
	transition: .3s;
	box-shadow: 1px 1px 5px -1px #777777;
	border-radius:3px;
	text-shadow: 0 0 3px #917839;
}
.wrapArea a span:after{
	position: absolute;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	top: 100%;
	left: 98px;
	height: 0;
	width: 0;
	border: 6px solid transparent;
	border-top: 6px solid #BCA058;/**吹き出しの下の▼の色**/
	content: "";
}
.wrapArea a:hover span{
	opacity: 1;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	top: -35px;
}
div.electric{
	position:relative;
	width: 702px;
	height: 600px;
	}
div.electric ul.wrapArea li{
	position:absolute;
}
#base{position:absolute;}

div.electric ul.wrapArea li.point01
{
    margin-left:365px;
    margin-top: 65px;
}
div.electric ul.wrapArea li.point02
{
    margin-left: 460px;
    margin-top: 58px;
}
div.electric ul.wrapArea li.point03
{
    margin-left: 370px;
    margin-top: 155px;
}
div.electric ul.wrapArea li.point04
{
    margin-left: 130px;
    margin-top: 170px;
}
div.electric ul.wrapArea li.point05
{
    margin-left: 507px;
    margin-top: 250px;
}
div.electric ul.wrapArea li.point06
{
    margin-left: 250px;
    margin-top: 350px;
}
div.electric ul.wrapArea li.point07
{
    margin-left: 395px;
    margin-top: 365px;
}
div.electric ul.wrapArea li.point08
{
    margin-left: 520px;
    margin-top: 365px;
}
div.electric ul.wrapArea li.point11
{
    margin-left: 520px;
    margin-top: 465px;
}
div.electric ul.wrapArea li.point09
{
    margin-left: 235px;
    margin-top: 446px;
}
div.electric ul.wrapArea li.point10
{
    margin-left: 390px;
    margin-top: 446px;
}


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