@charset "UTF-8";

/* 共通 */
a {
  text-decoration: none;
  color: #435ea9;
}

a:hover {
  text-decoration: none;
  color: #0E2D96;
  transition: 0.3s all;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/******* 地図成形 *******/
#japan-map {
  display: block;
  width: 777px;
  height: 482px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
  margin-bottom: 3em;
  position: relative;
}

/* 各エリア共通 */
#japan-map > div {
  position: absolute;
}

#japan-map .area-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

#japan-map .area-box {
  width: 100%;
  height: 100%;
  border: 1px #ffffff solid;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  box-sizing: border-box;
  transition: 0.2s;
  color: #ffffff;
  line-height: 1.4;
  padding: 0.5em;
}

#japan-map .area-box:hover {
  opacity: 0.75;
  transition: 0.2s;
}

#japan-map .area-box p {
  margin: 0;
}

/* 北海道・東北 */
#hokkaido-touhoku {
  width: 136px;
  height: 265px;
  left: 638px;
  top: 0;
}
#hokkaido-touhoku .area-box {
  background-color: #7478c2;
}

/* 関東 */
#kantou {
  width: 158px;
  height: 174px;
  top: 265px;
  left: 623px;
  z-index: 2;
}
#kantou .area-box {
  background-color: #31beca;
}

/* 中部 */
#tyubu {
  width: 270px;
  height: 211px;
  position: absolute;
  left: 438px;
  top: 223px;
}
#tyubu .area-box {
  background-color: #4ab969;
}

/* 近畿 */
#kinki {
  width: 186px;
  height: 211px;
  left: 320px;
  top: 223px;
}
#kinki .area-box {
  background-color: #b0b72f;
}

/* 中国 */
#tyugoku {
  width: 151px;
  height: 98px;
  left: 169px;
  top: 223px;
}
#tyugoku .area-box {
  background-color: #ef9f27;
}

/* 四国 */
#shikoku {
  width: 184px;
  height: 84px;
  left: 169px;
  top: 350px;
}
#shikoku .area-box {
  background-color: #d08f68;
}

/* 九州・沖縄 */
#kyusyu {
  width: 152px;
  height: 247px;
  left: 0;
  top: 235px;
}
#kyusyu .area-box {
  background-color: #ff7575;
}

/****************************************
  レスポンシブ
****************************************/
@media screen and (max-width: 776px) {
  #japan-map {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    height: auto;
    gap: 12px;
  }

  #japan-map > div {
    position: static;
    width: calc(50% - 6px);
    height: 100px;
    margin: 0;
  }

  #japan-map .area-box {
    font-size: 16px;
    border-radius: 8px;
  }
}

@media screen and (max-width: 500px) {
  #japan-map {
    display: block;
    width: 100%;
    height: auto;
  }

  #japan-map > div {
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
  }

  #japan-map .area-box {
    font-size: 15px;
    padding: 0.8em;
  }
}