@font-face {
  font-family: "Gilroy";
  src: url("https://resource.xp-pen.com/img/active_list/font/Gilroy-Light.ttf")
    format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("https://resource.xp-pen.com/img/active_list/font/Gilroy-Regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("https://resource.xp-pen.com/img/active_list/font/Gilroy-Medium.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url("https://resource.xp-pen.com/img/active_list/font/Gilroy-Bold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

#module {
  overflow: hidden;
  --br-content-width: min(73.333vw, 1408px);
  --br-content-offset: calc((100% - var(--br-content-width)) / 2);
}

#module,
#module p,
#module span,
#module h1,
#module h2,
#module h3,
#module h4,
#module div {
  font-family: "Gilroy", sans-serif !important;
}

#module .pc {
  display: block;
}

#module .mo {
  display: none;
}

/* Banner */
#module .br-banner {
  position: relative;
  width: 100%;
  height: 21.979vw;
  overflow: hidden;
  background: #000;
}

#module .br-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#module .br-banner__content {
  position: absolute;
  left: var(--br-content-offset);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 36.458vw;
}

#module .br-banner__title {
  margin: 0 0 1.042vw;
  font-weight: bold;
  font-size: 3.125vw;
  color: #fff;
  line-height: 1.2;
}

#module .br-banner__desc {
  margin: 0;
  font-weight: 500;
  font-size: 1.4375vw;
  color: #fff;
  line-height: 1.40625vw;
}

/* Partners */
#module .br-partners {
  background: #f5f9ff;
  padding: 0 0 4.167vw;
}

#module .br-partners__header {
  width: 100%;
  background: #fff;
  text-align: center;
  padding: 1.042vw 0;
  margin-bottom: 2.604vw;
}

#module .br-partners__title {
  margin: 0;
  font-weight: bold;
  font-size: 1.4375vw;
  color: #1c2024;
  line-height: 1.3;
  text-align: center;
}

#module .br-partners__inner {
  width: 73.333vw;
  max-width: 1408px;
  margin: 0 auto;
}

#module .br-partners__region {
  margin-bottom: 2.604vw;
}

#module .br-partners__region:last-child {
  margin-bottom: 0;
}

#module .br-partners__region-title {
  margin: 0 0 1.563vw;
  font-weight: bold;
  font-size: 1.458vw;
  color: #00172d;
  line-height: 1.3;
}

#module .br-partners__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.667vw;
}

#module .br-partners__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc((100% - 3.334vw) / 3);
  flex: 0 0 calc((100% - 3.334vw) / 3);
  background: #fff;
  border-radius: 0.521vw;
  box-shadow: 0 0.208vw 1.042vw rgba(0, 23, 45, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#module .br-partners__card:hover {
  transform: scale(1.03);
  box-shadow: 0 0.417vw 1.563vw rgba(0, 23, 45, 0.15);
  z-index: 2;
}

#module .br-partners__card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8.333vw;
  padding: 1.563vw;
  border-bottom: 0.052vw dashed #dcebf9;
  text-decoration: none;
  cursor: pointer;
}

#module .br-partners__card-logo img {
  width: auto;
  max-width: 80%;
  transition: transform 0.3s ease;
}

#module .br-partners__card:hover .br-partners__card-logo img {
  transform: scale(1.05);
}

#module .br-partners__card-body {
  position: relative;
  flex: 1;
  padding: 1.563vw 0.563vw 1.875vw 1.563vw;
  transition: background-color 0.2s ease;
}

#module .br-partners__store-name {
  margin: 0 0 0.833vw;
  padding-bottom: 0.833vw;
  font-weight: bold;
  font-size: 1.042vw;
  color: #00172d;
  line-height: 1.3;
  border-bottom: 0.052vw solid transparent;
  transition: border-color 0.2s ease;
}

#module .br-partners__card-body:has(.br-partners__info:hover) {
  background: #f5f5f5;
}

#module .br-partners__card-body:has(.br-partners__info:hover) .br-partners__store-name {
  border-bottom-color: #e5e5e5;
}

#module .br-partners__info {
  display: flex;
  align-items: flex-start;
  gap: 0.521vw;
  margin-bottom: 0.425vw;
  padding: 0.313vw 0.417vw;
  font-weight: 500;
  font-size: 1vw;
  color: #666;
  line-height: 1.40625vw;
  text-decoration: none;
  border-radius: 0.208vw;
  transition: color 0.2s ease, background-color 0.2s ease;
}

#module .br-partners__info:last-child {
  margin-bottom: 0;
}

#module .br-partners__info:hover,
#module .br-partners__info:focus {
  color: #3159e3;
}

#module .br-partners__info:hover .br-partners__icon,
#module .br-partners__info:focus .br-partners__icon {
  background-color: #3159e3;
}

#module .br-partners__info--instagram:hover span:last-child,
#module .br-partners__info--instagram:focus span:last-child {
  text-decoration: underline;
}

#module .br-partners__icon {
  flex-shrink: 0;
  width: 0.938vw;
  height: 0.938vw;
  margin-top: 0.156vw;
  background-color: #999;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transition: background-color 0.2s ease;
}

#module .br-partners__icon--location {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E");
}

#module .br-partners__icon--phone {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.07 21 3 13.93 3 5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.07 21 3 13.93 3 5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.2 2.2z'/%3E%3C/svg%3E");
}

#module .br-partners__icon--instagram {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm6.5-.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm6.5-.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z'/%3E%3C/svg%3E");
}

@media screen and (max-width: 768px) {
  #module .pc {
    display: none;
  }

  #module .mo {
    display: block;
  }

  #module .br-banner {
    height: auto;
    min-height: 116.4vw;
  }

  #module .br-banner__content {
    left: 50%;
    top: 12vw;
    transform: translateX(-50%);
    width: 88vw;
    max-width: 88vw;
    text-align: center;
  }

  #module .br-banner__title {
    margin-bottom: 4vw;
    font-size: 8vw;
  }

  #module .br-banner__desc {
    font-size: 3.733vw;
    line-height: 5.6vw;
  }

  #module .br-partners {
    padding: 0 0 10.667vw;
  }

  #module .br-partners__header {
    padding: 4vw 0;
    margin-bottom: 8vw;
  }

  #module .br-partners__title {
    font-size: 3vw;
  }

  #module .br-partners__inner {
    width: 92vw;
    max-width: none;
  }

  #module .br-partners__region {
    margin-bottom: 8vw;
  }

  #module .br-partners__region-title {
    margin-bottom: 4vw;
    font-size: 5.333vw;
    text-align: center;
  }

  #module .br-partners__grid {
    flex-direction: column;
    gap: 4vw;
  }

  #module .br-partners__card {
    width: 100%;
    flex: 0 0 100%;
    flex-direction: row;
    align-items: stretch;
    border-radius: 2.667vw;
    transform: none !important;
    box-shadow: 0 0.208vw 1.042vw rgba(0, 23, 45, 0.08) !important;
  }

  #module .br-partners__card:hover .br-partners__card-logo img {
    transform: none;
  }

  #module .br-partners__card-logo {
    flex-shrink: 0;
    width: 28vw;
    min-height: auto;
    padding: 4vw 2.667vw;
    border-bottom: none;
    border-right: 0.267vw dashed #dcebf9;
  }

  #module .br-partners__card-logo img {
    max-width: 100%;
    max-height: 16vw;
  }

  #module .br-partners__card-body {
    padding: 4vw 3.2vw;
  }

  #module .br-partners__store-name {
    margin-bottom: 2.667vw;
    font-size: 4vw;
  }

  #module .br-partners__info {
    gap: 2.133vw;
    /* margin-bottom: 2.133vw; */
    font-size: 2.4vw;
    line-height: 3.8vw;
  }

  #module .br-partners__icon {
    width: 3.733vw;
    height: 3.733vw;
    margin-top: 0.533vw;
  }
}
