@charset "utf-8";
/*   企業情報　事業所一覧
------------------------------------*/
.officePage .mapWrap {
  position: relative;
  text-align: center;
}
.officePage .mapPins li a {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  background: rgb(230, 0, 18);
  background: linear-gradient(180deg, rgba(230, 0, 18, 1) 0%, rgba(240, 71, 66, 1) 100%);
  border-radius: 100px;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  padding: 0 26px 0 22px;
  font-weight: 700;
  -webkit-box-shadow: 0px 3px 0px 0px rgba(184, 0, 14, 1);
  box-shadow: 0px 3px 0px 0px rgba(184, 0, 14, 1);
}
.officePage .mapPins li a span {
  position: relative;
  z-index: 1;
}
.officePage .mapPins li a::after {
  content: '';
  display: inline-block;
  background: url("../images/icon_arrow_white.svg") no-repeat center center;
  width: 0.4375em;
  height: 0.75em;
  fill: currentColor;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.75rem;
  margin: auto 0;
}
.officePage .borderTable .table-map {
  display: inline-block;
  text-decoration: none;
  color: var(--fontColor);
  padding: 0.375em 1.25em;
  position: relative;
  padding-right: 2rem;
  background: #ffffff;
  border: var(--border);
  font-size: .875rem;
  margin-top: 0.8em;
}
.officePage .borderTable .table-map::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: .875em;
  margin: auto 0;
  background: url(../images/icon_map.svg) no-repeat center center / 1.1em 1.1em;
  width: 1.1em;
  height: 1.1em;
}
.officePage .mapPins {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.officePage .mapPins li {
  position: absolute;
}
.officePage .mapPins li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(184, 0, 14, 1) 0%, rgba(184, 0, 14, 1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.pge-office .borderTable thead th:first-child {
  width: 20em;
}
.officePage .borderTable .table-map:hover {
  background: var(--bgGray);
  color: var(--mainColor);
}
.officePage .noneTxt {
  margin-top: 5em;
  text-align: center;
}
@media (min-width:1250px) { /* for PC */
  .officePage .mapWrap {
    min-height: 760px;
  }
  .officePage .office-sp_display {
    display: none;
  }
  .officePage .mapPins {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .officePage .mapPins li {
    position: absolute;
  }
  .officePage .mapPins li a {
    width: 8.75em;
    height: 2.5em;
    position: relative;
    overflow: hidden;
  }
  .officePage .mapPins li a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(184, 0, 14, 1) 0%, rgba(184, 0, 14, 1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
  .officePage .mapPins li a:hover {
    top: 2px;
    box-shadow: inset 0px 3px 0px rgba(0, 0, 0, 0.1);
  }
  .officePage .mapPins li a:hover::before {
    opacity: 1;
  }
  .officePage .mapPins .pin_hokkaido{
    left: 31.75em;
    top: 7em;
  }
  .officePage .mapPins .pin_tohoku {
    right: 15.125em;
    bottom: 21.9375em;
  }
  .officePage .mapPins .pin_honten{
    right: 17.6875em;
    bottom: 13.4375em;
  }
  .officePage .mapPins .pin_kanto {
    right: 8.375em;
    bottom: 13.4375em;
  }
  .officePage .mapPins .pin_tokyo {
    right: 17.6875em;
    bottom: 10.4375em;
  }
  .officePage .mapPins .pin_yokohama {
    right: 8.375em;
    bottom: 10.4375em;
  }
  .officePage .mapPins .pin_hokuriku {
    left: 27.625em;
    top: 22.8125em;
  }
  .officePage .mapPins .pin_chubu {
    right: 28.9375em;
    bottom: 7.1875em;
  }
  .officePage .mapPins .pin_kansai {
    right: 28.9375em;
    bottom: 4.125em;
  }
  .officePage .mapPins .pin_chushikoku {
    left: 17.1875em;
    bottom: 15.9375em;
  }
  .officePage .mapPins .pin_kyushu {
    left: 6.4375em;
    bottom: 9.4375em;
  }
}
@media (max-width:1249px) { /* Tab + SP */
  .officePage .office-pc_display {
    display: none;
  }
  /*.officePage .mapPins {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
  }
  .officePage .mapPins li {
    width: calc((100% - 30px) / 4);
  }
  .officePage .mapPins li a {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
  }*/
  .officePage .mapWrap {
    max-width: 885px;
    width: 100%;
    margin: 0 auto;
  }
  .officePage .borderTable {
    font-size: 0.875rem;
  }
  .officePage .borderTable thead {
    display: none;
  }
  .officePage .mapPins li a {
    width: 8.125em;
    height: 2.5em;
    padding: 0;
  }
  .officePage .mapPins li a::after {
    right: 0.75em;
  }
  .officePage .mapPins .pin_hokkaido{
    left: 46%;
    top: 14.5%;
  }
  .officePage .mapPins .pin_tohoku {
    right: 12%;
    bottom: 45.88%;
  }
  .officePage .mapPins .pin_honten{
    right: 17%;
    bottom: 28%
  }
  .officePage .mapPins .pin_kanto {
    right: 0;
    bottom: 28%;
  }
  .officePage .mapPins .pin_tokyo {
    right: 17%;
    bottom: 21%;
  }
  .officePage .mapPins .pin_yokohama {
    right: 0;
    bottom: 21%;
  }
  .officePage .mapPins .pin_hokuriku {
    left: 39.46%;
    top: 47%;
  }
  .officePage .mapPins .pin_chubu {
    right: 38%;
    bottom: 15%;
  }
  .officePage .mapPins .pin_kansai {
    right: 38%;
    bottom: 8.5%;
  }
  .officePage .mapPins .pin_chushikoku {
    left: 19.5%;
    bottom: 33%;
  }
  .officePage .mapPins .pin_kyushu {
    left: 0;
    bottom: 20%;
  }
  
  
}
@media (max-width:768px) { /* for SP */
  .officePage .mapPins li a {
    width: 14vw;
    height: 4vw;
    padding: 0;
    font-size: .5rem;
  }
  .officePage .mapPins .pin_hokkaido a,
  .officePage .mapPins .pin_chushikoku a{
    width: 16vw;
  }
}

