@charset "UTF-8";
body {
  background: none;
  margin: 0;
  min-width: 1300px;
  font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background: black;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body {
    min-width: auto;
  }
}

.img-wrap {
  position: relative;
}

.img-wrap.on {
  background: red;
  -webkit-transition: 1s ease-in;
  transition: 1s ease-in;
}

.test {
  background: yellow;
}

.img-wrap {
  position: relative;
}

#preview {
  position: absolute;
  display: none;
}

#one {
  position: absolute;
  top: 49.5%;
  left: 24.7%;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

#one:hover {
  -webkit-transform: scale(2, 2);
          transform: scale(2, 2);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  z-index: 50;
}

#two {
  position: absolute;
  top: 49.5%;
  left: 35%;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

#two:hover {
  -webkit-transform: scale(2, 2);
          transform: scale(2, 2);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  z-index: 50;
}

#three {
  position: absolute;
  top: 49.5%;
  left: 46.5%;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

#three:hover {
  -webkit-transform: scale(2, 2);
          transform: scale(2, 2);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  z-index: 50;
}

#four {
  position: absolute;
  top: 54%;
  left: 56%;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

#four:hover {
  -webkit-transform: scale(2, 2);
          transform: scale(2, 2);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  z-index: 50;
}

div.bg {
  width: 100vw;
  height: 100vh;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

div.bg.on {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1;
}

.first-on {
  -webkit-transform: scale(0.99) !important;
          transform: scale(0.99) !important;
}

.first-attack {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition-timing-function: cubic-bezier(0.01, 0.93, 0.3, 0.99) !important;
          transition-timing-function: cubic-bezier(0.01, 0.93, 0.3, 0.99) !important;
}

#mapimg {
  display: block;
  /*opacity: 0.8;*/
  margin: 0 auto;
  max-width: 100%;
}

@media (max-width: 767px) {
  max-width: 100%;
}

#mapimg.on {
  /*transition: opacity 0.4s ease-in, -webkit-transform 4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: transform 4s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.4s ease-in;
  transition: transform 4s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 0.4s ease-in, -webkit-transform 4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);*/
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  -webkit-transition: 3s ease;
  transition: 3s ease;
}

#mapimg.on.on-2 {
  -webkit-transition: 2s ease;
  transition: 2s ease;
}

#mapimg.blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transition: 3s ease;
  transition: 3s ease;
}

#mapimg {
  -webkit-transition: 3s ease;
  transition: 3s ease;
}

#btn {
  position: relative;
  z-index: -1;
}

.blur-onload {
  -webkit-filter: blur(5px);
  filter: blur(10px);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

#area:hover {
  cursor: pointer;
}

.p_box {
  display: none;
}

.p_box {
  width: 100px;
  position: absolute;
  background: #e95519;
  padding: 5px 10px 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 10px 10px 10px 10px;
  -webkit-box-shadow: 0px 2px 2px #e6e6e6;
          box-shadow: 0px 2px 2px #e6e6e6;
  line-height: 1;
  color: white;
  text-align: center;
}

.device {
  display: none;
}

@media (min-width: 0px) and (max-width: 480px) {
  .device {
    display: block;
    width: 100%;
    margin: 50% auto;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-align: left;
    width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .device p {
    margin: 0;
  }
}

@media (min-width: 0px) and (max-width: 480px) {
  .sec-sp {
    display: none;
  }
}
/*# sourceMappingURL=style.css.map */