body {
  background-color:#000;
  color:#000;
  letter-spacing:1px;
  opacity:0;
}

#map {z-index:0;
  height:100vh;
  filter: invert();
}
#top_contents{
  z-index:555;
  color:#fff;
  font-size:20px;
  position:fixed;
  top:0;
  right:0px;
  display:none;
}
#top_reset{
  z-index:1;
  color:#666;
  font-size:12px;
  position:fixed;
  top:70px;
  left:5px;
}
#top_reset:hover {
    color: #888;
    }

#top_contents_m{
  z-index:555;
  color:#ccc;
  font-size:18px;
  position:fixed;
  top:0;
  right:0px;
  display:none;

}

#top_back {
  color:#fff;
  background:#000;
  opacity:0;
  font-size:25px;
  z-index:1;
  height:100vh;
  width:100%;
  position: fixed;
}
#top1 {
  color:#fff;
  font-size:25px;
  z-index:1;
  height:100vh;
  width:100%;
  position: fixed;
}

#top2 {
  padding:40px;
  border-radius: 10px;
  background:#222;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.top3{
  font-size:16px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 6px 3px 6px;
}
.top4{
  font-size:16px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 8px 3px 8px;
}
button:hover {
  background-color: #333;
}


#sound_b_on{
  font-size:8px;
  background:#000;
  border: 1px solid;
  border-color: #444;
  border-radius: 1px;
  padding:0px 4px 2px 3px;
}
#sound_b_off{
  font-size:8px;
  background:#000;
  border: 1px solid;
  border-color: #444;
  border-radius: 1px;
  padding:0px 4px 2px 4px;
}





@media screen and (min-width: 1201px){#top1 {
  color:#fff;
  font-size:25px;
  z-index:1;
  height:100vh;
  width:100%;
  position: fixed;
}
#top2 {
  padding:40px;
  border-radius: 10px;
  background:#222;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.top3{
  font-size:16px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 6px 3px 6px;
}
.top4{
  font-size:16px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 8px 3px 8px;
}
}


@media screen and (max-width: 1200px) and (min-width: 761px){#top1 {
  color:#fff;
  font-size:25px;
  z-index:1;
  height:100vh;
  width:100%;
  position: fixed;
}
#top2 {
  padding:40px;
  border-radius: 10px;
  background:#222;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.top3{
  font-size:16px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 6px 3px 6px;
}
.top4{
  font-size:16px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 8px 3px 8px;
}
}


@media screen and (max-width: 760px) {
  #top1 {
  color:#fff;
  font-size:18px;
  z-index:1;
  height:100vh;
  width:100%;
  position: fixed;
}
#top2 {
  padding:18px;
  border-radius: 10px;
  background:#222;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.top3{
  font-size:12px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 6px 1px 6px;
}
.top4{
  font-size:12px;
  background:#222;
  border: 1px solid;
  border-color: #aaa;
  border-radius: 3px;
  padding:1px 8px 1px 8px;
}

}


.main {
  width:100%;
  margin:0 auto;
}

.main_m {
  width:100%;
  margin:0 auto;
}



.center {
text-align:center;
}
.left {
  text-align:left;
}
.right {
  text-align:right;
}
a {
  padding-top:20px;
  position: absolute;
}

a {outline: none;}
a:focus {outline:0;}
a img{outline: none;}
a:link { color: #B0C4DE; }
a:visited { color: #B0C4DE; }
a:hover { color: #eeeeee; text-decoration: none;}
a:active { color: #B0C4DE; }


/* leaflet */

.leaflet-bar.leaflet-control-zoom a.leaflet-control-zoom-in{
  font-size:20px;margin-top:0px;color:#999;
}
.leaflet-bar.leaflet-control-zoom a.leaflet-control-zoom-out{
  font-size:20px;margin-top:-25px;color:#999;
}

.leaflet-bar.leaflet-control-zoom a {
  background-color:rgba(0,0,0,0);
}
.leaflet-bar.leaflet-control-zoom a:link {
  background-color:rgba(0,0,0,0);
}
.leaflet-bar.leaflet-control-zoom a:visited {
  background-color:rgba(0,0,0,0);
}

.leaflet-bar.leaflet-control-zoom a:hover  {
  background-color:rgba(0,0,0,0);
}
.leaflet-bar.leaflet-control-zoom a:active  {
  background-color:rgba(0,0,0,0);
}