/*
**  マップ用のアイコンを設定しているCSS
*/

div.mapIcon1 {
  width:16px !important;
  height:16px !important;
  border-radius:8px;
  border:2px solid #aaf;
  background:#44E;
  box-shadow: 3px 3px 3px #222;
  opacity: 0.7;
  transform: rotate( 40deg );
  transition : 1s ;
}

div.mapIcon1:hover {
  border:2px solid #Fcc;
  transform: rotate( 45deg );
}

div.mapIcon2 {
  width:20px !important;
  height:20px !important;
  border-radius:10px;
  border:1px solid #D22;
  background: linear-gradient( 190deg , #Fee , #E00 );
  box-shadow: 3px 3px 3px #222;
  opacity: 0.7;
  transition : 0.5s ;
}

div.mapIcon2:hover {
  border:1px solid #FFF;
}

div.mapIcon3 {
  /* 赤い三角マーク */
  width:30px !important;
  height:30px !important;
  background:
      linear-gradient(to top right, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top left/50% 100%,
      linear-gradient(to top left, rgba(255,255,255,0) 50%, #f00 50.5%) no-repeat top right/50% 100%;
  opacity: 0.7;
  transform: rotate( 40deg );
}

.routeIcon {
  width:20px !important;
  height:20px !important;
  border:3px solid #eee;
  background:#22f;
  display:block;
  font-size:12px; color:#fff; font-weight:800; line-height:20px;
  text-align:center; vertical-align:bottom;
  margin:auto;
  overflow: hidden;
  border-radius: 8px;
  opacity:0.60;
}

.straightMarker {
  /* ルート歩行時間計測用マーカーアイコンのベース */
  width:16px !important;
  height:16px !important;
  border:3px solid #544; background:#fff;
  border-radius:8px;
  font-size:12px; text-align:center; vertical-align:bottom;
  overflow: hidden;
  font-weight:900;
  opacity:0.7;
}