.receipt_partner_index {
  margin: var(--space-ll) auto;
  h2 {
    margin: auto;
    max-width: 560px;
  }
  .receipt_partner_wrap {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-l);
  }
  .receipt_card {
    width: calc((100% - 90px) / 6);
    margin-right: var(--space-sl);
    margin-bottom: var(--space-s);
    color: var(--color-white);
    background-color: var(--color-partner);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    &:nth-child(6n) {
      margin-right: 0;
    }
    .receipt_card_area {
      position: absolute;
      top: 5px;
      left: 5px;
      padding: 0 8px;
      font-size: var(--fs-ss);
      &.hokkaido {
        background-color: #408acc;
      }
      &.tohoku {
        background-color: #46baeb;
      }
      &.chubu {
        background-color: #99cd55;
      }
      &.kanto {
        background-color: #7cd1cc;
      }
      &.kinki {
        background-color: #fbd73a;
      }
      &.chugoku,
      &.chu-shikoku {
        background-color: #ffab33;
      }
      &.shikoku {
        background-color: #f58260;
      }
      &.kyusyu {
        background-color: #ff655a;
      }
      &.net,
      &.wide-area {
        background-color: #9770a5;
      }
    }
    .receipt_card_bottom {
      padding: var(--space-s);
      font-size: var(--fs-ss);
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          max-width: 8px;
          height: 100%;
        }
      }
    }
  }
}

.receipt_partner_btn {
  margin: 0 auto var(--space-ll) auto;
  a {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 360px;
    padding: var(--space-ss) var(--space-m);
    background-color: var(--color-partner);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    font-size: var(--fs-m);
  }
}

/* 応援店動画用モーダル*/
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: 24px;
}
.modal-overlay.is-open {
  display: flex;
}

/* モーダル */
#modal_video01,
#modal_video02,
#modal_video03,
#modal_video04,
#modal_video05,
#modal_video06,
#modal_video07,
#modal_video08,
#modal_video09,
#modal_video10 {
  align-items: center;
  justify-content: center;
  background: rgba(17, 13, 26, 0.56);
}
#modal_video01.is-closing,
#modal_video02.is-closing,
#modal_video03.is-closing,
#modal_video04.is-closing,
#modal_video05.is-closing,
#modal_video06.is-closing,
#modal_video07.is-closing,
#modal_video08.is-closing,
#modal_video09.is-closing,
#modal_video10.is-closing {
  animation: overlay-out 260ms ease-in forwards;
}
#modal_video01 .modal,
#modal_video02 .modal,
#modal_video03 .modal,
#modal_video04 .modal,
#modal_video05 .modal,
#modal_video06 .modal,
#modal_video07 .modal,
#modal_video08 .modal,
#modal_video09 .modal,
#modal_video10 .modal {
  width: min(450px, 100%);
  max-height: 100%;
  padding: 0;
  border-radius: 20px;
  background: #fff;
  animation: fade 260ms ease-out;
}
#modal_video01.is-closing .modal,
#modal_video02.is-closing .modal,
#modal_video03.is-closing .modal,
#modal_video04.is-closing .modal,
#modal_video05.is-closing .modal,
#modal_video06.is-closing .modal,
#modal_video07.is-closing .modal,
#modal_video08.is-closing .modal,
#modal_video09.is-closing .modal,
#modal_video10.is-closing .modal {
  animation: fade 260ms ease-in forwards;
}
#modal_video01 .modal__close,
#modal_video02 .modal__close,
#modal_video03 .modal__close,
#modal_video04 .modal__close,
#modal_video05 .modal__close,
#modal_video06 .modal__close,
#modal_video07 .modal__close,
#modal_video08 .modal__close,
#modal_video09 .modal__close,
#modal_video10 .modal__close {
  z-index: 1000;
}

@media screen and (max-width: 999px) {
}

@media screen and (max-width: 767px) {
  .receipt_partner_index {
    margin: var(--space-l) auto;
    h2 {
      max-width: 100%;
    }
    .receipt_card {
      width: calc((100% - 30px) / 3);
      &:nth-child(6n) {
        margin-right: var(--space-sl);
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  .receipt_partner_btn {
    margin: 0 auto var(--space-l) auto;
  }
}

@media screen and (max-width: 480px) {
  .receipt_partner_index {
    .receipt_card {
      width: calc((100% - 15px) / 2);
      &:nth-child(6n) {
        margin-right: var(--space-sl);
      }
      &:nth-child(3n) {
        margin-right: var(--space-sl);
      }
      &:nth-child(2n) {
        margin-right: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .receipt_partner_btn {
    a {
      max-width: 100%;
      font-size: var(--fs-m);
    }
  }
}