*{
 margin: 0px;
 padding: 0px;
}
li{
 list-style: none;
}
body {
 font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P Gothic","Osaka",arial,sans-serif;
 background:#000;
 color: #ffffff;
 padding:0;
 margin:0;
 overflow:hidden;
}
a{
 color: #ffffff;
 text-decoration: none;
 font-weight: normal;
}
#container{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 overflow: hidden;
}
#menuArea1{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100px;
 height: 100%;
 background: rgba(0,0,0,0.5);
 box-shadow: 0px 0px 15px rgba(0,0,0,0.5) inset;
 box-sizing: border-box;
 border-right: solid 1px #333;
 text-align: center;
 padding: 15px 4px;
 z-index: 2;
}
#menuArea1 a{
 display: block;
 transition: .5s;
 padding: 5px 20px;
 border-bottom: solid 1px transparent;
 user-select: none;
 font-size: 18px;
}
#menuArea1 a.active {
 border-bottom: solid 1px #f00;
}
#menuArea1 a:hover {
 background: rgba(200,200,200,0.2);
}
#menuArea1 li{
 margin-bottom: 10px;
}
#menuArea2{
 position: absolute;
 background: rgba(0,0,0,0.5);
 box-shadow: 0px 0px 15px rgba(0,0,0,0.5) inset;
 box-sizing: border-box;
 border-top: solid 1px #333;
 width: calc(100% - 100px);
 height: 130px;
 bottom: -5px;
 left: 100px;
 padding: 20px;
 user-select: none;
 z-index: 2;
}
#menuArea2 .menu{
 display: none;
 height: 100%;
 overflow-y: auto;
}
#menuArea2 .menu.active{
 display: block;
}
#menuArea2 li{
 display: inline-block;
 cursor: pointer;
 margin:0px 15px 2px 0px;
 position: relative;
}
#menuArea2 li:before{
 display: block;
 content: "";
 width: 100%;
 height: 1px;
 position: absolute;
 bottom: -1px;
 left: 0px;
 transition: .5s;
 opacity: 0;
}
#menuArea2 li.active:before{
 background: #f00;
 opacity: 1;
}
#menuArea2 li p{
 padding: 1px 5px;
 transition: .5s;
 border-radius: 3px;
}
#menuArea2 li p:hover{
 background: rgba(200,200,200,0.2);
}
#menuArea2 li .data{
 display: none;
}
#detail{
 position: absolute;
 background: rgba(0,0,0,0.5);
 box-shadow: 0px 0px 15px rgba(0,0,0,0.5) inset;
 box-sizing: border-box;
 border-top: solid 1px #333;
 border-left: solid 1px #333;
 border-bottom: solid 1px #333;
 width: 500px;
 height: 150px;
 right: 0px;
 bottom: 124px;
 padding: 20px;
 transition:.4s;
 opacity: 0;
 transform: scale(0);
 z-index: 2;
}
#detail.active{
 opacity: 1;
 transform: scale(1);
}
#detail .close{
 position: absolute;
 right: 15px;
 top: 5px;
 cursor: pointer;
}
#detail .data{
 width: 100%;
 height: 100%;
 display: flex;
 margin-top: 10px;
}
#detail .data .img{
 width: 30%;
 margin: 7px;
}
#detail .data .img img{
 width: 100%;
 height: auto;
 box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
#detail .data .text{
 width: 70%;
 height: 100px;
 overflow-y: auto;
 font-size: 12px;
 margin: 5px;
}
#detail .data .text a{
 color: #66ffff;
 transition: .5s;
}
#detail .data .text a:hover{
 opacity: 0.5;
}

.data_pos{
 display: none;
}
.data_icon{
 display: none;
}
#loading{
 position: fixed;
 width: 100%;
 height: 100%;
 background: #000;
 transition: opacity 1s;
 z-index: 3;
}
#loading.complete{
 opacity: 0;
}
.dNone{
 display: none;
}
#loading .ring
{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width:  150px;
 height: 150px;
 background: transparent;
 border: 3px solid #3c3c3c;
 border-radius: 50%;
 text-align: center;
 align-items: center;
 line-height: 150px;
 font-family: sans-serif;
 font-size: 11px;
 color: #fff;
 letter-spacing: 2px;
 text-transform: uppercase;
 text-shadow: 0px 0px 3px #fff;
 box-shadow: 0 0 0 20px rgba(0,0,0,.5);
 background: linear-gradient(0deg, #222, #000);
 box-shadow: 0 0 0 4px  #353535, 0 0 0 5px #3e3e3e,inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,5), inset 0 0 15px rgba(0,0,0,.2);
}
#loading .ring:before
{
 content: '';
 position:absolute;
 top: -3px;
 left: -3px;
 height: 100%;
 width: 100%;
 border: 2px solid transparent;
 border-top: 2px solid #66ffff;
 border-right: 2px solid #66ffff;
 border-radius: 50%;
 animation: animateCircle 2s linear infinite;
}
#loading span
{
 display: block;
 position: absolute;
 top: calc(50% - 2px);
 left: 50%;
 width: 50%;
 background: transparent;
 height: 4px;
 transform-origin: left;
 animation: animate 2s linear infinite;
}
#loading span:before
{
 content: '';
 position: absolute;
 width: 5px;
 height: 5px;
 border-radius: 50%;
 top: 3px;
 right: -3px;
 background: #66ffff;
 box-shadow: 0 0 5px #66ffff , 0 0 5px #66ffff, 0 0 10px #66ffff, 0 0 15px #66ffff;
}
@keyframes animateCircle
{
 0%
 {
  transform: rotate(0deg);
 }
 100%
 {
  transform: rotate(360deg);
 }
}

@keyframes animate
{
 0%
 {
  transform: rotate(45deg);
 }
 100%
 {
  transform: rotate(405deg);
 }
}
#menuArea2 .menu::-webkit-scrollbar,
#detail .spotList li .inner .text::-webkit-scrollbar,
.scrollBar::-webkit-scrollbar{
 width: 10px;
}
#menuArea2 .menu::-webkit-scrollbar-track,
#detail .spotList li .inner .text::-webkit-scrollbar-track,
.scrollBar::-webkit-scrollbar-track{
 background-color: #ccc;
 border:solid 1px #999;
}
#menuArea2 .menu::-webkit-scrollbar-thumb,
#detail .spotList li .inner .text::-webkit-scrollbar-thumb,
.scrollBar::-webkit-scrollbar-thumb{
 background-color: #555;
 border:solid 1px #999;
}
.yellow{
 color: #ff0;
}
.red{
 color: #f00;
}
.orange{
 color: #f60;
}
.khaki{
 color: #BFAA80;
}
.pink{
 color: #FFE0F7;
}
.mt10{
 margin-top: 10px;
}
.num{
 background: #111155;
 display: inline-block;
 width: 1.5em;
/* border-radius: 50%;*/
 text-align: center;
}
.full{
 position: fixed;
 right: 15px;
 top: 15px;
 color: #fff;
 width: 1em;
 height: 1em;
 font-size: 25px;
 cursor: pointer;
 z-index: 3;
}
.full i{
 display: none;
 transition: .5s;
}
.full i:hover{
 opacity: 0.7;
}
.full i.active{
 display: block;
}
/*
===================================================
     sp
===================================================
*/
@media screen and (max-width: 1000px) {
 #menuArea1{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
  padding: 2px;
  border-right:none;
  border-bottom: solid 1px #333;
 }
 #menuArea1 li{
  display: inline-block;
  margin: 2px;
 }
 #menuArea1 a{
  padding: 5px 10px;
 }
 #menuArea2{
  width: 100%;
  height: 130px;
  bottom: -5px;
  left: 0px;
 }
 #menuArea3{
  width: 500px;
  height: 150px;
  right: 0px;
  top: auto;
  bottom: 126px;
  padding: 20px 10px 10px;
  border-top: solid 1px #333;
 }
 .full{
  right: 12px;
  top: 58px;
 }
}
@media screen and (max-width: 500px) {
 #detail{
  width: 100%;
  border-left: none;
 }
 #menuArea3{
  width: 100%;
  border-left: none;
 }
}
