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


.fv-area {
  margin-bottom: calc(100 / 750 * 100vw);
}
.main-ttl {
  font-weight: 700;
  font-size: calc(44 / 750 * 100vw);
  line-height: 1.6363636363636365;
  margin-bottom: calc(60 / 750 * 100vw);
}
.group-map {
  display: block;
  width: 100%;
  height: calc(1050 / 750 * 100vw);
  margin-top: calc(90 / 750 * 100vw);
  margin-bottom: calc(70 / 1400 * 100vw);
  background: url(../images/map_sp.png) no-repeat center center / contain
}
.affiliates-list {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;

  & li {
    display: block;
    width: calc(330 / 750 * 100vw);
    height: calc(210 / 750 * 100vw);
    background-color: #fff;
    border-radius: calc(20 / 750 * 100vw);
    overflow: hidden;
    position: absolute;

    &.sapporo {
      top: 0;
      left: 0;
    }
    &.touhoku {
      bottom: calc(240 / 750 * 100vw);
      right: 0;
    }
    &.chugoku {
      bottom: 0;
      right: 0;
    }
    &.kyusyu {
      top: calc(240 / 750 * 100vw);
      left: 0;
    }

    & .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(26 / 750 * 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(26 / 750 * 100vw);
        line-height: 1.5769230769230769;
        color: #fff;
      }
      & .popup {
        display: flex;
        justify-content: center;
        align-items: center;
        width: calc(253 / 750 * 100vw);
        height: calc(50 / 750 * 100vw);
        font-weight: 500;
        font-size: calc(24 / 750 * 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(29 / 750 * 100vw) center;
        background-size: calc(22 / 750 * 100vw) auto;
        margin-top: calc(20 / 750 * 100vw);

        &::after {
          content: '詳細を見る';
          display: inline-block;
          height: 1.3em;
          translate: 0 .1em;
        }
      }

    }
  }
}