@charset "UTF-8";
/*
	##### MFR #####
	group/css/group_pc.css
*/


.fv-area {
  margin-bottom: calc(100 / 1400 * 100vw);
}
.main-ttl {
  font-weight: 700;
  font-size: calc(35 / 1400 * 100vw);
  line-height: 1.5714285714285714;
  margin-bottom: calc(30 / 1400 * 100vw);
}
.group-map {
  display: block;
  width: 100%;
  height: calc(672 / 1400 * 100vw);
  margin-top: calc(70 / 1400 * 100vw);
  margin-bottom: calc(50 / 1400 * 100vw);
  background: url(../images/map_pc.png) no-repeat center center / contain
}
.affiliates-list {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;

  & li {
    display: block;
    width: calc(270 / 1400 * 100vw);
    height: calc(185 / 1400 * 100vw);
    background-color: #fff;
    border-radius: calc(10 / 1400 * 100vw);
    overflow: hidden;
    position: absolute;

    &.sapporo {
      top: 0;
      left: calc(230 / 1400 * 100vw);
    }
    &.touhoku {
      top: calc(253 / 1400 * 100vw);
      right: calc(37 / 1400 * 100vw);
    }
    &.chugoku {
      bottom: 0;
      right: calc(211 / 1400 * 100vw);
    }
    &.kyusyu {
      top: calc(237 / 1400 * 100vw);
      left: calc(37 / 1400 * 100vw);
    }

    & .img-box,
    & a {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    & a {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: calc(25 / 1400 * 100vw);
      font-feature-settings: "palt";
      text-align: center;
      text-decoration: none;
      background-color: rgba(var(--rgb-3), .7);

      & .name {
        font-weight: 700;
        font-size: calc(20 / 1400 * 100vw);
        line-height: 1.65;
        color: #fff;
      }
      & .popup {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(192 / 1400 * 100vw);
        height: calc(35 / 1400 * 100vw);
        font-weight: 500;
        font-size: calc(15 / 1400 * 100vw);
        line-height: 1;
        color: var(--color-3);
        border-radius: 100px;
        background-color: #fff;
        background-image: url(../../assets/images/ico-popup-2.svg);
        background-repeat: no-repeat;
        background-position: right calc(20 / 1400 * 100vw) center;
        background-size: calc(10 / 1400 * 100vw) auto;
        margin-top: calc(15 / 1400 * 100vw);

        &::after {
          content: '採用ページを見る';
          display: inline-block;
          height: 1.3em;
          translate: 0 .1em;
        }
      }

    }
  }
}
@media (hover) {
  .affiliates-list li .img-box img {
    scale: 1;
    transition: scale .3s ease-in-out;
  }
  .affiliates-list li:hover .img-box img {
    scale: 1.1;
  }
  .affiliates-list li a .popup::after {
    background-image: linear-gradient(var(--color-3), var(--color-3));
    background-repeat: no-repeat;
    background-size: 0 1px;
    background-position: 100% 100%;
    transition: background-size .3s cubic-bezier(0.23, 1, 0.320, 1)
  }
  .affiliates-list a:hover .popup::after {
    background-size: 100% 1px;
    background-position: 0 100%;
  }
}