@charset "UTF-8";

a, a img {
  -webkit-transition: 0.2s ease all;
  transition: 0.2s ease all;
}@media screen and (min-width: 1025px) {
  .sp-only02 {
    display: none !important;
  }
  .ruby p {
  padding: 12px 8px 5px !important;
  }
}
@media screen and (max-width: 1024px) {
  .pc-only02 {
    display: none !important;
  }
}
img,
.bx-wrapper img {
  max-width: 100%;
  height: auto;
}

/*---------------------------------------------------
  crab-map
---------------------------------------------------*/
.crab-map {
  position: relative;
  margin-bottom: 150px;
  padding: 0 15px;
}
.crab-map .map img {
  width: 100%;
}
.crab-map .map-btn a {
  transition: all .3s;
}
.spot-wrap p {
  position: absolute;
  padding: 5px 8px;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 2px;
  border: none;
}
.map-btn02 .spot-wrap p {
  font-size: 2.4rem;
}
.spot-wrap .spot-mark {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.crab-map .map-btn li:nth-child(1) .spot-wrap p {
  top: 47.5%;
  left: 56.5%;
  background: #5e0d4c;
}
.crab-map .map-btn li:nth-child(1) .spot-wrap .spot-mark {
  top: 52%;
  left: 55%;
  background: #5e0d4c;
}
.crab-map .map-btn li:nth-child(2) .spot-wrap p {
  top: 44.5%;
  left: 34%;
  background: #5f3a7a;
  /*padding: 12px 8px 5px;*/
}
.crab-map .map-btn li:nth-child(2) .spot-wrap .spot-mark {
  top: 54.5%;
  left: 47.5%;
  background: #5f3a7a;
}
.crab-map .map-btn li:nth-child(2) .spot-wrap .spot-mark.spot-mark02 {
  top: 54%;
  left: 49%;
  background: #5f3a7a;
}
.crab-map .map-btn li:nth-child(3) .spot-wrap p {
  top: 60%;
  left: 37%;
  background: #5c5e0d;
}
.crab-map .map-btn li:nth-child(3) .spot-wrap .spot-mark {
  top: 58%;
  left: 40.5%;
  background: #5c5e0d;
}
.crab-map .map-btn li:nth-child(3) .spot-wrap .spot-mark.spot-mark02 {
  top: 57%;
  left: 35%;
  background: #5c5e0d;
}
.crab-map .map-btn li:nth-child(4) .spot-wrap p {
  top: 50%;
  left: 23%;
  background: #2e758d;
  /*padding: 12px 8px 5px;*/
}
.crab-map .map-btn li:nth-child(4) .spot-wrap .spot-mark {
  top: 55.5%;
  left: 32%;
  background: #2e758d;
}
.crab-map .map-btn li:nth-child(5) .spot-wrap p {
  top: 43.4%;
  left: 67%;
  background: #0d5e2e;
}
.crab-map .map-btn li:nth-child(5) .spot-wrap .spot-mark {
  top: 45%;
  left: 64%;
  background: #0d5e2e;
}
.crab-map .map-btn li:nth-child(5) .spot-wrap .spot-mark.spot-mark02 {
  top: 45.5%;
  left: 65.5%;
  background: #0d5e2e;
}
.crab-map .map-btn li:nth-child(6) .spot-wrap p {
  top: 26.5%;
  left: 41.5%;
  background: #5e370d;
  /*padding: 12px 8px 5px;*/
}
.crab-map .map-btn li:nth-child(6) .spot-wrap .spot-mark {
  top: 37.5%;
  right: 30%;
  background: #5e370d;
}
.crab-map .map-btn li:nth-child(6) .spot-wrap .spot-mark.spot-mark02 {
  top: 33.5%;
  right: 28.5%;
  background: #5e370d;
}
.crab-map .map-btn li:nth-child(6) .spot-wrap .spot-mark.spot-mark03 {
  top: 39.5%;
  right: 31.5%;
  background: #5e370d;
}
.crab-map .map-btn li:nth-child(7) .spot-wrap p {
  top: 32.5%;
  left: 75%;
  background: #00146e;
}
.crab-map .map-btn li:nth-child(7) .spot-wrap .spot-mark {
  top: 29%;
  left: 78%;
  background: #00146e;
}
.crab-map .map-btn li:nth-child(7) .spot-wrap .spot-mark.spot-mark02 {
  top: 30%;
  left: 79.5%;
  background: #00146e;
}
.crab-map .map-btn li:nth-child(7) .spot-wrap .spot-mark.spot-mark03 {
  top: 29%;
  left: 74%;
  background: #00146e;
}
.crab-map .map-btn02 li:nth-child(1) .spot-wrap p {
  top: 49.5%;
  left: 26.5%;
  background: #195D62;
}
.crab-map .map-btn02 li:nth-child(1) .spot-wrap .spot-mark {
  top: 49%;
  left: 47%;
  background: #195D62;
}
.crab-map .map-btn02 li:nth-child(1) .spot-wrap .spot-mark.spot-mark02 {
  top: 58.5%;
  left: 46.5%;
  background: #195D62;
}
.crab-map .map-btn02 li:nth-child(1) .spot-wrap .spot-mark.spot-mark03 {
  top: 58.5%;
  left: 46.5%;
  background: #195D62;
}
.crab-map .map-btn02 li:nth-child(2) .spot-wrap p {
  top: 41%;
  left: 60%;
  background: #963408;
  /*padding: 5px 8px;*/
}
.crab-map .map-btn02 li:nth-child(2) .spot-wrap .spot-mark {
  top: 38%;
  left: 63%;
  background: #963408;
}
.crab-map .map-btn02 li:nth-child(2) .spot-wrap .spot-mark.spot-mark02 {
  top: 29%;
  left: 63.5%;
  background: #963408;
}
.crab-map .map-btn02 li:nth-child(2) .spot-wrap .spot-mark.spot-mark03 {
  top: 25%;
  left: 63.5%;
  background: #963408;
}
.crab-map .map-btn02 li:nth-child(3) .spot-wrap p {
  top: 19.5%;
  left: 65.5%;
  background: #094193;
}
.crab-map .map-btn02 li:nth-child(3) .spot-wrap .spot-mark {
  top: 32.5%;
  left: 63.5%;
  background: #094193;
}
.crab-map .map-btn02 li:nth-child(3) .spot-wrap .spot-mark.spot-mark02 {
  top: 66.3%;
  left: 46.6%;
  background: #6A1E50;
}
.crab-map .map-btn02 li:nth-child(3) .spot-wrap .spot-mark.spot-mark03 {
  top: 76%;
  left: 40%;
  background: #6A1E50;
}
.crab-map .map-btn02 li:nth-child(4) .spot-wrap p {
  top: 13.5%;
  left: 56.5%;
  background: #CE4805;
}
.crab-map .map-btn02 li:nth-child(4) .spot-wrap .spot-mark {
  top: 26.5%;
  left: 58.5%;
  background: #CE4805;
}
.crab-map .map-btn a:hover .spot-wrap p {
  background: #fff;
}
.crab-map .map-btn li:nth-child(1) a:hover .spot-wrap p {
  color: #5e0d4c;
  border: 1px solid #5e0d4c;
}
.crab-map .map-btn li:nth-child(2) a:hover .spot-wrap p {
  color: #5f3a7a;
  border: 1px solid #5f3a7a;
}
.crab-map .map-btn li:nth-child(3) a:hover .spot-wrap p {
  color: #5c5e0d;
  border: 1px solid #5c5e0d;
}
.crab-map .map-btn li:nth-child(4) a:hover .spot-wrap p {
  color: #2e758d;
  border: 1px solid #2e758d;
}
.crab-map .map-btn li:nth-child(5) a:hover .spot-wrap p {
  color: #0d5e2e;
  border: 1px solid #0d5e2e;
}
.crab-map .map-btn li:nth-child(6) a:hover .spot-wrap p {
  color: #5e370d;
  border: 1px solid #5e370d;
}
.crab-map .map-btn li:nth-child(7) a:hover .spot-wrap p {
  color: #00146e;
  border: 1px solid #00146e;
}
.crab-map .map-btn li:nth-child(8) a:hover .spot-wrap p {
  color: #00146e;
  border: 1px solid #00146e;
}
.crab-map .map-btn02 li:nth-child(1) a:hover .spot-wrap p {
  color: #195D62;
  border: 1px solid #195D62;
  background: #fff;
}
.crab-map .map-btn02 li:nth-child(2) a:hover .spot-wrap p {
  color: #963408;
  border: 1px solid #963408;
  background: #fff;
}
.crab-map .map-btn02 li:nth-child(3) a:hover .spot-wrap p {
  color: #094193;
  border: 1px solid #094193;
  background: #fff;
}
.crab-map .map-btn02 li:nth-child(4) a:hover .spot-wrap p {
  color: #CE4805;
  border: 1px solid #CE4805;
  background: #fff;
}
.crab-map .map-btn a:hover .spot-wrap .spot-mark {
  opacity: .5;
}
@media screen and (max-width: 1024px) {
  .crab-map {
    position: relative;
    margin-bottom: 70px;
  }
  .crab-map .map-btn li {
    width: 100%;
  }
  .crab-map .map-btn .spot-wrap p {
    position: static;
    margin-top: 10px;
    counter-reset: mapBtn;
    border: 1px solid #0D265E;
    color: #0D265E;
    background: #fff!important;
    padding: 10px;
  }
  .crab-map .map-btn li .spot-wrap p::before {
    color: #fff;
    padding: 4px 6px;
    margin-right: 10px;
  }
  .crab-map .map-btn li:nth-child(1) .spot-wrap p::before {
    content: "1";
    background: #5e0d4c;
  }
  .crab-map .map-btn li:nth-child(2) .spot-wrap p::before {
    content: "2";
    background: #5f3a7a;
  }
  .crab-map .map-btn li:nth-child(3) .spot-wrap p::before {
    content: "3";
    background: #5c5e0d;
  }
  .crab-map .map-btn li:nth-child(4) .spot-wrap p::before {
    content: "4";
    background: #2e758d;
  }
  .crab-map .map-btn li:nth-child(5) .spot-wrap p::before {
    content: "5";
    background: #0d5e2e;
  }
  .crab-map .map-btn li:nth-child(6) .spot-wrap p::before {
    content: "6";
    background: #5e370d;
  }
  .crab-map .map-btn li:nth-child(7) .spot-wrap p::before {
    content: "7";
    background: #00146e;
  }
  .crab-map .map-btn .spot-wrap .spot-mark {
    display: none;
  }
  .crab-map .map-btn02 li:nth-child(1) .spot-wrap p::before {
    content: "1";
    background: #195D62;
  }
  .crab-map .map-btn02 li:nth-child(2) .spot-wrap p::before {
    content: "2";
    background: #963408;
  }
  .crab-map .map-btn02 li:nth-child(3) .spot-wrap p::before {
    content: "3";
    background: #094193;
  }
  .crab-map .map-btn02 li:nth-child(4) .spot-wrap p::before {
    content: "4";
    background: #CE4805;
  }
}
@media screen and (max-width: 480px) {
  .crab-map .map-btn .spot-wrap p {
    font-size: 1.5rem;
    letter-spacing: 0;
  }
  .crab-map .map-btn02 .spot-wrap p {
    font-size: 2rem;
    letter-spacing: 0;
  }
}

div[spot01] {
  display: block;
  height: 1000px;
  margin-top: 1000px;
  content: "";
}