/* ****************************** */
/* カメラ一覧上のカメラサムネイル画像のスタイル */
/* ****************************** */
div.high-light {
    /* box-shadow: 0 3px 3px rgba(223, 245, 29, 0.932); */
    /* box-shadow: 0 0 8px rgba(223, 245, 29, 0.932); */
    /* box-shadow: 3px 3px 6px -2px #555,
        3px 3px 8px rgba(255,255,255,0.8) inset; */
    border: 4px solid #FE9803;
}
[id^="js_relay_camera"] img.high-light {
    border: 3px solid #FE9803;
}
/* ****************************** */
/* 地図上のカメラサムネイル画像のスタイル */
/* ****************************** */
/* [id^="js_relay_camera"] img {
    border: solid 1px white;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
} */ /* カメラのマークはアイコン化 */
[id^="js_relay_toire"] img {
    border: solid 1px white;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

/* ****************************** */
/* 地図上のカメラアイコンのスタイル */
/* ****************************** */
.map-marker {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50% 50% 50% 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* ツヤ感 */
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.05)
  );
  box-shadow:
    0 2px 2px rgba(0,0,0,0.3),
    inset 0 2px 2px rgba(255,255,255,0.5);

  transform: translate(-50%, -100%); /* 地図の座標に合わせる */
}

/* ピンの下の尖り部分 */
.map-marker::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
}

/* 中の画像 */
.map-marker img {
  width: 22px;
  height: 22px;
}

/* 中のテキスト */
.map-marker span {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

/* カラーバリエーション */
.map-marker.green { background-color: #6cc24a; }
.map-marker.blue  { background-color: #4aa3df; }
.map-marker.red   { background-color: #e74c3c; }
.map-marker.orange{ background-color: #f39c12; }


/* ****************************** */
/* 施設名のスタイル */
/* ****************************** */
.js_facility {
    display: block;
    width: 150px;
}
.outline1 {
    width: 150px;
    /* display: ruby-text; */
    display: block;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 
        2px 2px 1px #fff,
        -2px 2px 1px #fff,
        2px -2px 1px #fff,
        -2px -2px 1px #fff,
        2px 0px 1px #fff,
        0px 2px 1px #fff,
        -2px 0px 1px #fff,
        0px -2px 1px #fff;
}
.outline2 {
    display: ruby-text;
    color: #000;
    font-size: 1.7vw;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 
        3px 3px 1px #fff,
        -3px 3px 1px #fff,
        3px -3px 1px #fff,
        -3px -3px 1px #fff,
        3px 0px 1px #fff,
        0px 3px 1px #fff,
        -3px 0px 1px #fff,
        0px -3px 1px #fff;
}
.outline3 {
    display: ruby-text;
    color: #000;
    font-size: 1.7vw;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 
        4px 4px 1px #fff,
        -4px 4px 1px #fff,
        4px -4px 1px #fff,
        -4px -4px 1px #fff,
        4px 0px 1px #fff,
        0px 4px 1px #fff,
        -4px 0px 1px #fff,
        0px -4px 1px #fff;
}
.outline4 {
    display: ruby-text;
    color: #000;
    font-size: 1.7vw;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 
        5px 5px 1px #fff,
        -5px 5px 1px #fff,
        5px -5px 1px #fff,
        -5px -5px 1px #fff,
        5px 0px 1px #fff,
        0px 5px 1px #fff,
        -5px 0px 1px #fff,
        0px -5px 1px #fff;
}
.outline5 {
    display: ruby-text;
    color: #000;
    font-size: 1.7vw;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 
        6px 6px 1px #fff,
        -6px 6px 1px #fff,
        6px -6px 1px #fff,
        -6px -6px 1px #fff,
        6px 0px 1px #fff,
        0px 6px 1px #fff,
        -6px 0px 1px #fff,
        0px -6px 1px #fff;
}