/* メイン */

/* 地域から探す */

/* svgのcss */
.cls-1 {
  fill: rgba(150, 155, 149, 0.5);
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cls-2 {
  fill: #fff;
  opacity: 0.686;
}

.cls-3 {
  fill: #1f1915;
}

.cls-4 {
  fill: none;
  stroke: #707070;
  stroke-width: 0.25px;
}

a.hokkaido:hover .prefecture {
  fill: rgba(54, 152, 35, 0.6);
}

a.kanto:hover .prefecture {
  fill: rgba(223, 32, 22, 0.6);
}

a.tohoku:hover .prefecture {
  fill: rgba(141, 55, 135, 0.6);
}

a.tyugoku:hover .prefecture {
  fill: rgba(255, 217, 0, 0.6);
}

a.shikoku:hover .prefecture {
  fill: rgba(0, 93, 171, 0.6);
}

a.kinki:hover .prefecture {
  fill: rgba(240, 119, 13, 0.6);
}

a.kyusyu:hover .prefecture {
  fill: rgba(220, 58, 134, 0.6);
}

a.okinawa:hover .prefecture {
  fill: rgba(6, 124, 120, 0.6);
}

a.tyubu:hover .prefecture {
  fill: rgba(140, 184, 8, 0.6);
}

@media (max-width: 768px) {
  a.hokkaido .prefecture {
    fill: rgba(54, 152, 35, 0.6);
  }

  a.kanto .prefecture {
    fill: rgba(223, 32, 22, 0.6);
  }

  a.tohoku .prefecture {
    fill: rgba(141, 55, 135, 0.6);
  }

  a.tyugoku .prefecture {
    fill: rgba(255, 217, 0, 0.6);
  }

  a.shikoku .prefecture {
    fill: rgba(0, 93, 171, 0.6);
  }

  a.kinki .prefecture {
    fill: rgba(240, 119, 13, 0.6);
  }

  a.kyusyu .prefecture {
    fill: rgba(220, 58, 134, 0.6);
  }

  a.okinawa .prefecture {
    fill: rgba(6, 124, 120, 0.6);
  }

  a.tyubu .prefecture {
    fill: rgba(140, 184, 8, 0.6);
  }
}
/* svg終わり */

.chiikikarasagasu-wrapper {
  margin: 50px 0;
}

.chiikikarasagasu-title {
  max-width: 396px;
  width: 100%;
  padding-left: 15%;
}

.map {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.map-area {
  position: relative;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 0 20%;
}

.nami1 {
  position: absolute;
  top: 77%;
  left: 8.3%;
  width: 6.5%;
}

.nami2 {
  position: absolute;
  top: 66%;
  left: 19%;
  width: 6.5%;
}

.nami3 {
  position: absolute;
  top: 75%;
  left: 75%;
  width: 6.5%;
}

.nami4 {
  position: absolute;
  top: 64%;
  left: 67%;
  width: 6.5%;
}

.map svg {
  max-width: 604px;
  width: 100%;
  height: auto;
}

.chiiki-sp {
  display: none;
}

.chiiki-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 7% 0;
  max-width: 350px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.chiiki-grid a {
  font-size: 13px;
  text-indent: 1em;
  letter-spacing: 1em;
  margin: 0 auto;
  padding: 2% 0;
  box-sizing: border-box;
  border: 1px dotted #bcbcbc;
  border-radius: 7px;
  width: 95%;
}

a.hokkaido-grid {
  text-indent: 0.3em;
  letter-spacing: 0.3em;
}

/* レスポンシブ------------------------------------------------------------- */
@media (max-width: 768px) {
  .chiiki-sp {
    display: block;
  }

  .map svg {
    margin: 20px 0;
  }

  .chihou {
    display: none;
  }

  .nami1 {
    display: none;
  }

  .nami2 {
    display: none;
  }

  .nami3 {
    top: 70%;
    left: 71%;
    width: 8.5%;
  }

  .nami4 {
    top: 40%;
    left: 44%;
    width: 8.5%;
  }
}

@media (max-width: 640px) {
  .chiikikarasagasu-wrapper {
    padding: 0 40px;
  }

  .chiikikarasagasu-title {
    padding-left: 0;
  }

  .chiiki-sp {
    display: block;
  }

  .map-area {
    padding: 0 10%;
  }
}

@media (max-width: 480px) {
  .chiikikarasagasu-wrapper {
    padding: 0 20px;
  }
}