@charset "utf-8";
/* CSS Document */

h1 {
  padding: 0;
  text-align: center;
  font-size: 20px;
}

h1 span.orange,
h1 span.orange a {
  background-color: #ffa31a;
  color: #000;
  border-radius: 4px;
  padding: 6px 6px;
}

main {
  padding: 60px 0 0 0;
}

#mapcontainer {
  width: 100%;
  height: 66VH;
}

#mapId,
#mapPosition {
  text-align: center;
}

#mapId,
#mapPosition,
#mapDescription {
  padding: 1rem;
}


/* loader */
.loader-bg {
  align-items: center;
  background-color: #000;
  display: flex;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 999999;
}

.loader-bg .js-loader {
  width: 90%;
  text-align: center;
}

.loader-bg .js-loader img {
  margin: 0 auto;
}

.drzmaploading {
  font-size: 50px;
}

/* aboutMap */
#aboutMap,
#aboutMapAll {
  width: 96%;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

#aboutMap h2,
#aboutMapAll h2 {
  font-size: 150%;
  text-align: center;
  margin: 1rem 0;
}

.intdMap {
  margin: 3rem 0;
}

#aboutMap p,
#aboutMapAll p {
  line-height: 2.2;
}

/* 地点数 */
#countPoint {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  bottom: 0;
  color: #FFF;
  position: absolute;
  top: 2px;
  right: 0px;
  width: auto;
  height: 32px;
}


/* 凡例　*/
#legendSwt {
  display: inline-block;
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #FFF;
  text-align: center;
  padding: 0.5rem 1rem;
  border: 1px solid #FFF;
  border-radius: 4px;
  z-index: 9999;
}

#legend {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 0.5rem 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
  bottom: 0;
  display: none;
}

#legend ul {
  list-style: none;
}

#legend ul li {
  display: inline-block;
  margin: 0 0.5rem;
}

#legend ul li img {
  vertical-align: middle;
  padding: 0 4px;
  height: 36px;
  width: auto;
}

/* クラスタON/OFF */
#clusterswt {
  width: 64px;
  height: 64px;
  border: 1px solid #FFF;
  border-radius: 6px;
  position: absolute;
  top: 40px;
  right: 6px;
  background: url("/img/markers/clusterSwt.png") no-repeat center center;
  background-size: 48px 48px;
  z-index: 999;
}

#clusterswt:hover {
  cursor: pointer;
}

#clusterswt.clston {
  background-color: #FF0;
}

#clusterswt.clstoff {
  background-color: #FFF;
}

/* 現在位置 */
#btnCurLocation {
  width: 64px;
  height: 64px;
  border: 1px solid #FFF;
  border-radius: 6px;
  position: absolute;
  top: 110px;
  right: 6px;
  background: url("/img/markers/locateSwt.png") no-repeat center center;
  background-size: 48px 48px;
  z-index: 999;
}

#btnCurLocation:hover {
  cursor: pointer;
}

#btnCurLocation {
  background-color: #FF0;
}

/* フキダシ高さ制限　*/
.leaflet-popup-content {
  margin: 13px 19px;
  line-height: 1.4;
  height: 100%;
  max-height: 36vh;
  overflow-scrolling: touch;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}



/* 制限回数 */
#cantSend,
#cantSend2 {
  margin: 1rem 0;
  padding: 2rem;
  border: 1px solid #FFF;
  border-radius: 6px;
}

.limitmess {
  margin-bottom: 2rem;
}

.limitnote {
  font-size: 125%;
  text-align: center;
}

.limitnote span {
  font-size: 200%;
}

.limitsub {
  text-align: center;
}

.limitLeft {
  margin: 1rem 0;
  font-size: 150%;
}

/* 地図注意書き */
.mapnotice {
  width: 80%;
  max-width: 800px;
  margin: 1rem auto 2rem;
  text-align: center;
  color: #FF0;
}

/* 新規 */
#addMarker,
#editMarker {
  width: 80%;
  max-width: 800px;
  margin: 2rem auto;
  display: none;
}

#addNewMarker,
#editMarkerStart {
  text-align: center;
  padding: 1rem;
  border: 1px solid #FFF;
  border-radius: 5px;
  margin: 0 0 3rem;
}

#addNewMarker:hover,
#editMarkerStart:hover {
  cursor: pointer;
}

#addNewForm,
#editForm {
  display: none;
}

form p {
  margin-bottom: 2rem;
}

form span.inputErr {
  display: block;
  margin: 1rem 5% 1rem;
  font-size: 100%;
  font-weight: 800;
  color: #F00;
}

form input[type="text"],
form input[type="number"] {
  width: 90%;
  margin: 0 5%;
  font-size: 16px;
  padding: 0.5rem;
  border-radius: 6px;
}

form textarea {
  width: 90%;
  height: 6rem;
  margin: 0 5%;
  font-size: 16px;
  padding: 0.5rem;
  border-radius: 6px;
}

form ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

form ul li {
  display: inline-block;
  margin: 0 3rem 1rem 5%;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  color: #000;
  font-size: 22px;
  width: 26px;
  padding-right: 0.5rem;
}

input[type="radio"]:checked+label:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  color: #17bcdf;
  width: 26px;
  padding-right: 0.5rem;
}

.inputcount {
  display: block;
  text-align: right;
  padding: 0 0.5rem;
  margin: 0 5%;
}

.inputcount.over {
  color: #F00;
}

.agreement {
  text-align: center;
}

#sendPoint,
#editsendPoint {
  width: 100%;
  background-color: #CC7824;
  color: #FFF;
  padding: 0.5rem;
  text-align: center;
  border-radius: 5px;
  border: none;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  cursor: pointer;
}

#sendPoint:hover,
#editsendPoint:hover {
  cursor: pointer;
}

#sendPoint.locked,
#editsendPoint.locked {
  opacity: 0.3;
}

#sendPoint.locked:hover,
#editsendPoint.locked:hover {
  cursor: auto;
}

.sendMessage {
  width: 96%;
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 0;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

.ngerr {
  background-color: #A00;
  color: #FFF;
}

/* check */
#checkCoordinate {
  width: 90%;
  margin: 1rem auto;
}

#checkLetLng {
  width: 80%;
  font-size: 16px;
  display: inline-block;
  padding: 0.5rem;
  border-radius: 6px;
}

#checkPoint {
  font-size: 16px;
  padding: 0.5rem;
  border-radius: 6px;
}

/* google */
.gmnoprint {
  pointer-events: auto;
}


/* 汎用ページ　*/
.content {
  width: 98%;
  max-width: 1000px;
  margin: 2rem auto 10rem;
  padding: 0 0;
  line-height: 1.8;
}

.content h1 {
  text-align: left;
  margin-bottom: 2rem;
  font-size: 125%;
}

.content h2 {
  margin: 1rem 0 0.5rem;
  font-size: 120%;
}

.content p {
  margin-bottom: 2rem;
}

.content ol {
  padding-left: 3rem;
}

/* マガジン */
.magazine {
  padding-top: 5rem;
}



@media screen and (max-width:800px) {

  h1 {
    padding: 1VW 0 0;
    text-align: center;
    font-size: 3VW;
  }

  main {
    padding: 40px 0 0;
    overflow-x: hidden;
  }

  /*　凡例　*/
  #legend {
    width: 100%;
    text-align: left;
    padding-left: 100px;
  }

  #legend ul li {
    display: block;
    margin: 0;
  }

  /* クラスタON/OFF */
  #clusterswt {
    width: 48px;
    height: 48px;
    border: 1px solid #FFF;
    border-radius: 6px;
    position: absolute;
    top: 40px;
    right: 6px;
    background: url("/img/markers/clusterSwt.png") no-repeat center center;
    background-size: 36px 36px;
    z-index: 999;
  }

  /* 現在位置 */
  #btnCurLocation {
    width: 48px;
    height: 48px;
    border: 1px solid #FFF;
    border-radius: 6px;
    position: absolute;
    top: 95px;
    right: 6px;
    background: url("/img/markers/locateSwt.png") no-repeat center center;
    background-size: 36px 36px;
    z-index: 999;
    background-color: #FF0;
  }


}