#map {
  max-width: 1020px;
  padding: 0 10px;
  margin: 0 auto;
}
#map .mapContainer {
  position: relative;
}
#map .mapContainer .btnAreaTop {
  position: absolute;
  right: 25px;
  bottom: 25px;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px 30px;
  text-align: center;
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
#map .mapContainer .btnAreaTop span:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 10px;
  background-image: url(../img/map/btn_arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 5px;
}
#map .mapContainer .areaContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: contain;
}
#map .mapContainer .areaContainer .areaTitle {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
}
#map .mapContainer .areaContainer .areaTitle.deco {
  border-left: 3px solid #e60012;
  padding-left: 5px;
  font-weight: bold;
  top: 40px;
  left: 50px;
  line-height: 1.3;
  font-size: 18px;
}
#map .mapContainer .areaContainer > img {
  display: none;
}
#map .mapContainer .areaContainer ul {
  -webkit-transform-origin: left top;
  transform-origin: left top;
  width: 1000px;
  height: 512px;
  padding: 0;
  margin: 0;
}
#map .mapContainer .areaContainer ul .prefectureContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 83px;
  display: table;
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 100% 100%;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  line-height: 1.3;
  padding: 5px 30px;
  -webkit-tap-highlight-color: transparent;
  word-break: break-all;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a > div {
  display: table-cell;
  vertical-align: middle;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a > div p {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  text-align: left;
  font-size: 11px;
  position: relative;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a > div p.name {
  color: #666;
  font-weight: bold;
  font-size: 13px;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a > div p.place {
  text-indent: -3em;
  padding-left: 3em;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a > div p.place a {
  text-decoration: underline;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a > div p.link {
  color: #0000ee;
  text-decoration: underline;
}
#map .mapContainer .areaContainer ul .prefectureContainer > a > div p.link:hover {
  color: #fa0014;
}
#map .mapContainer .areaContainer ul .prefectureContainer.on:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/map/prefecture_arrow_00.png);
  background-repeat: no-repeat;
  background-position: left 8px center;
  background-size: 6px;
}
#map .mapContainer .areaContainer ul .prefectureContainer.on a {
  background-size: 8px;
  background-repeat: no-repeat;
  background-position: right 25px center;
}
#map .mapContainer .areaContainer ul .prefectureContainer.off:after {
  content: "";
  display: block;
  width: 101%;
  height: 101%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url(../img/map/prefecture_off.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
  box-sizing: border-box;
}
#map .mapContainer .areaContainer.area_0 {
  background-image: url(../img/map/area_00.png);
}
#map .mapContainer .areaContainer.area_0 .areaTitle {
  top: 40px;
  left: 60px;
  padding: 0;
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer {
  width: 184px;
  height: 60px;
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer a {
  background-repeat: no-repeat;
  background-position: right 25px center;
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_0 {
  background-image: url(../img/map/prefecture_01.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_0 a {
  background-image: url(../img/map/prefecture_arrow_01.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_1 {
  background-image: url(../img/map/prefecture_02.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_1 a {
  background-image: url(../img/map/prefecture_arrow_02.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_2 {
  background-image: url(../img/map/prefecture_03.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_2 a {
  background-image: url(../img/map/prefecture_arrow_03.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_3 {
  background-image: url(../img/map/prefecture_04.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_3 a {
  background-image: url(../img/map/prefecture_arrow_04.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_4 {
  background-image: url(../img/map/prefecture_05.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_4 a {
  background-image: url(../img/map/prefecture_arrow_05.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_5 {
  background-image: url(../img/map/prefecture_06.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_5 a {
  background-image: url(../img/map/prefecture_arrow_06.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_6 {
  background-image: url(../img/map/prefecture_07.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_6 a {
  background-image: url(../img/map/prefecture_arrow_07.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_7 {
  background-image: url(../img/map/prefecture_08.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_7 a {
  background-image: url(../img/map/prefecture_arrow_08.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_8 {
  background-image: url(../img/map/prefecture_09.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_8 a {
  background-image: url(../img/map/prefecture_arrow_09.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_9 {
  background-image: url(../img/map/prefecture_10.png);
}
#map .mapContainer .areaContainer.area_0 .prefectureContainer.pref_0_9 a {
  background-image: url(../img/map/prefecture_arrow_10.png);
}
#map .mapContainer .areaContainer.area_1 {
  background-image: url(../img/map/area_01.png);
}
#map .mapContainer .areaContainer.area_1 .prefectureContainer {
  background-image: url(../img/map/prefecture_01.png);
}
#map .mapContainer .areaContainer.area_1 .prefectureContainer.on:after {
  background-color: #9BD5DD;
}
#map .mapContainer .areaContainer.area_2 {
  background-image: url(../img/map/area_02.png);
}
#map .mapContainer .areaContainer.area_2 .prefectureContainer {
  background-image: url(../img/map/prefecture_02.png);
}
#map .mapContainer .areaContainer.area_2 .prefectureContainer.on:after {
  background-color: #77C5A6;
}
#map .mapContainer .areaContainer.area_3 {
  background-image: url(../img/map/area_03.png);
}
#map .mapContainer .areaContainer.area_3 .prefectureContainer {
  background-image: url(../img/map/prefecture_03.png);
}
#map .mapContainer .areaContainer.area_3 .prefectureContainer.on:after {
  background-color: #F5B557;
}
#map .mapContainer .areaContainer.area_4 {
  background-image: url(../img/map/area_04.png);
}
#map .mapContainer .areaContainer.area_4 .prefectureContainer {
  background-image: url(../img/map/prefecture_04.png);
}
#map .mapContainer .areaContainer.area_4 .prefectureContainer.on:after {
  background-color: #62b52f;
}
#map .mapContainer .areaContainer.area_5 {
  background-image: url(../img/map/area_05.png);
}
#map .mapContainer .areaContainer.area_5 .prefectureContainer {
  background-image: url(../img/map/prefecture_05.png);
}
#map .mapContainer .areaContainer.area_5 .prefectureContainer.on:after {
  background-color: #E7D02E;
}
#map .mapContainer .areaContainer.area_6 {
  background-image: url(../img/map/area_06.png);
}
#map .mapContainer .areaContainer.area_6 .prefectureContainer {
  background-image: url(../img/map/prefecture_06.png);
}
#map .mapContainer .areaContainer.area_6 .prefectureContainer.on:after {
  background-color: #CB7FB3;
}
#map .mapContainer .areaContainer.area_7 {
  background-image: url(../img/map/area_07.png);
}
#map .mapContainer .areaContainer.area_7 .prefectureContainer {
  background-image: url(../img/map/prefecture_07.png);
}
#map .mapContainer .areaContainer.area_7 .prefectureContainer.on:after {
  background-color: #7ACAD3;
}
#map .mapContainer .areaContainer.area_8 {
  background-image: url(../img/map/area_08.png);
}
#map .mapContainer .areaContainer.area_8 .prefectureContainer {
  background-image: url(../img/map/prefecture_08.png);
}
#map .mapContainer .areaContainer.area_8 .prefectureContainer.on:after {
  background-color: #C4B716;
}
#map .mapContainer .areaContainer.area_9 {
  background-image: url(../img/map/area_09.png);
}
#map .mapContainer .areaContainer.area_9 .prefectureContainer {
  background-image: url(../img/map/prefecture_09.png);
}
#map .mapContainer .areaContainer.area_9 .prefectureContainer.on:after {
  background-color: #E94645;
}
#map .mapContainer .areaContainer.area_10 {
  background-image: url(../img/map/area_10.png);
}
#map .mapContainer .areaContainer.area_10 .prefectureContainer {
  background-image: url(../img/map/prefecture_10.png);
}
#map .mapContainer .areaContainer.area_10 .prefectureContainer.on:after {
  background-color: #609AD2;
}

@media screen and (min-width: 769px) {
  #map .areaContainer.area_0 .prefectureContainer.pref_0_0 {
    top: 60px;
    left: 760px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_1 {
    top: 140px;
    left: 760px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_2 {
    top: 220px;
    left: 760px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_3 {
    top: 185px;
    left: 70px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_4 {
    top: 320px;
    left: 580px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_5 {
    top: 400px;
    left: 580px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_6 {
    top: 265px;
    left: 70px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_7 {
    top: 420px;
    left: 300px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_8 {
    top: 400px;
    left: 70px;
  }
  #map .areaContainer.area_0 .prefectureContainer.pref_0_9 {
    top: 100px;
    left: 70px;
  }
  #map .areaContainer.area_1 .prefectureContainer.pref_1_0 {
    top: 170px;
    left: 650px;
  }
  #map .areaContainer.area_1 .prefectureContainer.pref_1_1 {
    top: 285px;
    left: 650px;
  }
  #map .areaContainer.area_2 .prefectureContainer.pref_2_0 {
    top: 170px;
    left: 65px;
  }
  #map .areaContainer.area_2 .prefectureContainer.pref_2_1 {
    top: 100px;
    left: 695px;
  }
  #map .areaContainer.area_2 .prefectureContainer.pref_2_2 {
    top: 275px;
    left: 65px;
  }
  #map .areaContainer.area_2 .prefectureContainer.pref_2_3 {
    top: 205px;
    left: 695px;
  }
  #map .areaContainer.area_2 .prefectureContainer.pref_2_4 {
    top: 375px;
    left: 65px;
  }
  #map .areaContainer.area_2 .prefectureContainer.pref_2_5 {
    top: 305px;
    left: 695px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_0 {
    top: 195px;
    left: 65px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_1 {
    top: 95px;
    left: 65px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_2 {
    top: 220px;
    left: 695px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_3 {
    top: 40px;
    left: 695px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_4 {
    top: 395px;
    left: 65px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_5 {
    top: 130px;
    left: 695px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_6 {
    top: 310px;
    left: 695px;
  }
  #map .areaContainer.area_3 .prefectureContainer.pref_3_7 {
    top: 295px;
    left: 65px;
  }
  #map .areaContainer.area_4 .prefectureContainer.pref_4_0 {
    top: 85px;
    left: 65px;
  }
  #map .areaContainer.area_4 .prefectureContainer.pref_4_1 {
    top: 175px;
    left: 695px;
  }
  #map .areaContainer.area_4 .prefectureContainer.pref_4_2 {
    top: 205px;
    left: 65px;
  }
  #map .areaContainer.area_4 .prefectureContainer.pref_4_3 {
    top: 275px;
    left: 695px;
  }
  #map .areaContainer.area_4 .prefectureContainer.pref_4_4 {
    top: 305px;
    left: 65px;
  }
  #map .areaContainer.area_5 .prefectureContainer.pref_5_0 {
    top: 95px;
    left: 65px;
  }
  #map .areaContainer.area_5 .prefectureContainer.pref_5_1 {
    top: 235px;
    left: 695px;
  }
  #map .areaContainer.area_5 .prefectureContainer.pref_5_2 {
    top: 235px;
    left: 65px;
  }
  #map .areaContainer.area_5 .prefectureContainer.pref_5_3 {
    top: 335px;
    left: 695px;
  }
  #map .areaContainer.area_6 .prefectureContainer.pref_6_0 {
    top: 95px;
    left: 65px;
  }
  #map .areaContainer.area_6 .prefectureContainer.pref_6_1 {
    top: 75px;
    left: 695px;
  }
  #map .areaContainer.area_6 .prefectureContainer.pref_6_2 {
    top: 205px;
    left: 65px;
  }
  #map .areaContainer.area_6 .prefectureContainer.pref_6_3 {
    top: 175px;
    left: 695px;
  }
  #map .areaContainer.area_6 .prefectureContainer.pref_6_4 {
    top: 310px;
    left: 65px;
  }
  #map .areaContainer.area_6 .prefectureContainer.pref_6_5 {
    top: 275px;
    left: 695px;
  }
  #map .areaContainer.area_7 .prefectureContainer.pref_7_0 {
    top: 95px;
    left: 65px;
  }
  #map .areaContainer.area_7 .prefectureContainer.pref_7_1 {
    top: 140px;
    left: 695px;
  }
  #map .areaContainer.area_7 .prefectureContainer.pref_7_2 {
    top: 195px;
    left: 65px;
  }
  #map .areaContainer.area_7 .prefectureContainer.pref_7_3 {
    top: 240px;
    left: 695px;
  }
  #map .areaContainer.area_7 .prefectureContainer.pref_7_4 {
    top: 340px;
    left: 695px;
  }
  #map .areaContainer.area_8 .prefectureContainer.pref_8_0 {
    top: 165px;
    left: 65px;
  }
  #map .areaContainer.area_8 .prefectureContainer.pref_8_1 {
    top: 125px;
    left: 695px;
  }
  #map .areaContainer.area_8 .prefectureContainer.pref_8_2 {
    top: 295px;
    left: 65px;
  }
  #map .areaContainer.area_8 .prefectureContainer.pref_8_3 {
    top: 220px;
    left: 695px;
  }
  #map .areaContainer.area_9 .prefectureContainer.pref_9_0 {
    top: 80px;
    left: 65px;
  }
  #map .areaContainer.area_9 .prefectureContainer.pref_9_1 {
    top: 40px;
    left: 695px;
  }
  #map .areaContainer.area_9 .prefectureContainer.pref_9_2 {
    top: 200px;
    left: 65px;
  }
  #map .areaContainer.area_9 .prefectureContainer.pref_9_3 {
    top: 140px;
    left: 695px;
  }
  #map .areaContainer.area_9 .prefectureContainer.pref_9_4 {
    top: 300px;
    left: 65px;
  }
  #map .areaContainer.area_9 .prefectureContainer.pref_9_5 {
    top: 240px;
    left: 695px;
  }
  #map .areaContainer.area_9 .prefectureContainer.pref_9_6 {
    top: 340px;
    left: 695px;
  }
  #map .areaContainer.area_10 .prefectureContainer.pref_10_0 {
    top: 210px;
    left: 695px;
  }
}
@media screen and (max-width: 768px) {
  #map {
    padding: 0;
  }
  #map .mapContainer {
    padding: 20px 7px 0;
    background-image: none;
  }
  #map .mapContainer > img {
    display: none;
  }
  #map .mapContainer .btnAreaTop {
    right: 7px;
    bottom: 15px;
    font-size: 12px;
    padding: 7px 20px;
  }
  #map .mapContainer .areaContainer {
    background-image: none !important;
    position: static !important;
    padding-bottom: 70px;
  }
  #map .mapContainer .areaContainer .areaTitle {
    position: static !important;
    margin-bottom: 15px;
    margin-left: 7px;
  }
  #map .mapContainer .areaContainer .areaTitle.deco {
    border-left: 2px solid #e60012;
    font-size: 13px;
    margin-bottom: 20px;
  }
  #map .mapContainer .areaContainer > img {
    display: block;
  }
  #map .mapContainer .areaContainer ul {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer {
    position: relative;
    float: left;
    background-size: 100% 100%;
    width: 50% !important;
    height: 65px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer:nth-of-type(n+3) {
    margin-top: 10px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer.on:after {
    width: 12px;
    height: 12px;
    right: 12px;
    background-size: 4px;
    background-position: center center;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer.on > a {
    background-position: right 15px center;
    background-size: 3px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer.on > a > div p {
    font-size: 9px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer.on > a:after {
    right: 25px;
    font-size: 9px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer.off:after {
    background-size: 100% 100%;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer > a {
    font-size: 10px;
    padding: 5px 25px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer > a > div {
    display: table-cell;
    vertical-align: middle;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer > a > div p {
    line-height: 1.3;
    font-size: 9px;
  }
  #map .mapContainer .areaContainer ul .prefectureContainer > a > div p.name {
    font-size: 11px;
  }
  #map .mapContainer .areaContainer.area_0 {
    padding-bottom: 20px;
  }
  #map .mapContainer .areaContainer.area_0 .prefectureContainer {
    height: 47px;
  }
  #map .mapContainer .areaContainer.area_0 .prefectureContainer a {
    background-position: right 15px center;
    background-size: 3px;
  }
}