#image-navigation {
  display: -webkit-box;
  display: flex;
  padding: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

#image-navigation .navi-image {
  position: relative;
  background-image: url(../images/inmap_photo01.png) no-repeat;
  background-size: cover auto;
}

#image-navigation .navi-image a {
  display: block;
}

#image-navigation .navi-image a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}

#image-navigation .navi-image a>img {
  width: 100%;
  height: auto;
}

#image-navigation .navi-image a.active {
  z-index: 10;
}

#image-navigation .navi-image a.last-active {
  z-index: 9;
}

#image-navigation img {
  border: 0;
  vertical-align: bottom;
}

#image-navigation .navi ul {
  display: -webkit-box;
  display: flex;
  /* -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column; */
  /* -webkit-box-pack: end;
  justify-content: flex-end; */
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

#image-navigation .navi ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#image-navigation .navi>ul li {
  display: block;
}

#image-navigation .navi>ul li a {
  display: block;
}

#image-navigation>.navi>ul li>a.navi-1>img,
#image-navigation>.navi>ul li>a.navi-2>img,
#image-navigation>.navi>ul li>a.navi-3>img,
#image-navigation>.navi>ul li>a.navi-4>img,
#image-navigation>.navi>ul li>a.navi-5>img,
#image-navigation>.navi>ul li>a.navi-6>img {
  width: 100% !important;
}

/*
#image-navigation .navi-image {
  float: left;
}
*/
@media screen and (min-width: 1200px) {
  #image-navigation {
    width: 100%;
    /* -webkit-box-pack: justify;
    justify-content: space-between; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  #image-navigation>.navi {
    /* width: 500px !important; */
    width: 100% !important;;
  }

  #image-navigation .navi-image {
    /* width: 565px !important; */
    /* margin-right: 45px; */
    width: 850px !important;
    padding-top: 600px;
    margin: 0 auto;
  }

  #image-navigation .navi>ul li {
    /* width: 500px;
    height: 63.28px; */
    width: 15%;
    height: auto;
  }

  #image-navigation .navi>ul li:nth-child(-n+5) {
    margin-bottom: 14px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  #image-navigation {
    width: 100%;
    /* -webkit-box-pack: justify;
    justify-content: space-between; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  #image-navigation>.navi {
    /* width: 375px !important; */
    width: 100% !important;;
  }

  #image-navigation .navi-image {
    /* width: 565px !important; */
    /* margin-right: 45px; */
    width: 700px !important;
    padding-top: 490px;
    margin: 0 auto;
  }

  /*
  #image-navigation .navi > ul li a {
    margin-bottom: 31px;
  }
*/
  #image-navigation .navi>ul li {
    /* width: 353.06px;
    height: 44.69px; */
    width: 15%;
    height: auto;
  }

  #image-navigation .navi>ul li:nth-child(-n+5) {
    margin-bottom: 31px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  #image-navigation {
    width: 100%;
    /* -webkit-box-pack: justify;
    justify-content: space-between; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  #image-navigation>.navi {
    /* width: 270px !important; */
    width: 100% !important;;
  }

  #image-navigation .navi-image {
    /* width: 450px !important; */
    /* margin-right: 45px; */
    width: 550px !important;
    padding-top: 390px;
    margin: 0 auto;
  }

  #image-navigation .navi>ul li {
    /* width: 241.88px;
    height: 30.61px; */
    width: 15%;
    height: auto;
  }

  #image-navigation .navi>ul li:nth-child(-n+5) {
    margin-bottom: 27px;
  }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
  #image-navigation {
    width: 100%;
    /* -webkit-box-pack: justify;
    justify-content: space-between; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  #image-navigation>.navi {
    /* width: 200px !important; */
    width: 100% !important;;
  }

  #image-navigation .navi-image {
    /* width: 315px !important; */
    /* margin-right: 25px; */
    width: 450px !important;
    padding-top: 320px;
    margin: 0 auto;
  }

  /*
  #image-navigation .navi > ul li a {
    margin-bottom: 18px;
  }
*/
  #image-navigation .navi>ul li {
    /* width: 188.33px;
    height: 23.84px; */
    width: 15%;
    height: auto;
  }

  #image-navigation .navi>ul li:nth-child(-n+5) {
    margin-bottom: 18px;
  }
}

@media screen and (max-width: 575px) {
  #image-navigation {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
  }

  #image-navigation>.navi {
    width: 100% !important;
  }

  #image-navigation .navi-image {
    width: 100% !important;
    padding-top: calc(79.46% + 20px);
    /* margin-right: 25px; */
  }

  #image-navigation .navi>ul li {
    /* width: 100%;
    height: calc((66.83 - 32.02)*((100vw - 300px) / (575 - 300)) + 32.02px); */
    width: 48%;
    height: auto;
  }

  #image-navigation .navi>ul li:nth-child(-n+5) {
    margin-bottom: calc((18 - 10)*((100vw - 300px) / (575 - 300)) + 10px);
  }

  /*
  #image-navigation .navi > ul li a {
    margin-bottom: 18px;
  }
*/
}