.filter-div {
  background-color: #efefef;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 80px 0 35px;
}
@media (max-width: 991px) {
  .filter-div {
    padding: 0 20px;
  }
}
.filter-div-2 {
  display: flex;
  margin-top: 37px;
  width: 100%;
  max-width: 912px;
  align-items: center;
  justify-content: start;
  gap: 40px;
}
@media (max-width: 991px) {
  .filter-div-2 {
    max-width: 100%;
    flex-wrap: wrap;
  }
}
.filter-div-3 {
  color: #000;
  text-align: center;
  margin: auto 0;
  font: 700 24px/125% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
.filter-div-4 {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
@media (max-width: 991px) {
  .filter-div-4 {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 450px) {
  .filter-div-4 {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: start;
  }
}

img.filter-img {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 56px;
  overflow: hidden;
  max-width: 100%;
  background-color: #fff;
  border-radius: 30px;
  border: 2px solid #e2e2e2;
}
img.filter-disabled {
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 56px;
  overflow: hidden;
  max-width: 100%;
  opacity: 0.6;
}
.filter-div-5 {
  display: flex;
  margin-top: 25px;
  width: 100%;
  max-width: 912px;
  align-items: center;
  justify-content: start;
  gap: 40px;
}
@media (max-width: 991px) {
  .filter-div-5 {
    flex-wrap: wrap;
  }
}
.filter-div-6 {
  color: #000;
  text-align: center;
  margin: auto 0;
  font: 700 24px/125% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
.filter-div-7 {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
@media (max-width: 991px) {
  .filter-div-7 {
    justify-content: center;
  }
}
.filter-div-8 {
  display: flex;
  margin-top: 25px;
  width: 100%;
  max-width: 912px;
  align-items: center;
  justify-content: start;
  gap: 40px;
}
@media (max-width: 991px) {
  .filter-div-8 {
    max-width: 100%;
    flex-wrap: wrap;
  }
}
.filter-div-9 {
  color: #000;
  text-align: center;
  margin: auto 0;
  font: 700 24px/125% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
.filter-div-10 {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
@media (max-width: 991px) {
  .filter-div-10 {
    justify-content: center;
  }
}

.filter-div-11 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  /*display: flex;*/
  width: 100%;
  max-width: 923px;
  justify-content: space-between;
  gap: 10px;
  margin: 25px 0 25px;
  font-size: 15px;
}
@media (max-width: 991px) {
  .filter-div-11 {
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.filter-div-12 {
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  background-color: #fff;
  flex-grow: 1;
  align-items: start;
  padding: 8px 12px;
  font: 700 16px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
  border: 2px solid rgb(226, 226, 226);
}
@media (max-width: 991px) {
  .filter-div-12 {
    white-space: initial;
    padding: 15px 12px;
  }
}
.filter-div-13 {
  color: #d70c18;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  background-color: #fff;
  flex-grow: 1;
  align-items: start;
  padding: 16px 20px;
  font: 700 20px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .filter-div-13 {
    white-space: initial;
  }
}
.filter-div-14 {
  color: #0066de;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  background-color: #fff;
  flex-grow: 1;
  align-items: start;
  padding: 16px 20px;
  font: 700 20px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .filter-div-14 {
    white-space: initial;
  }
}
.filter-div-15 {
  color: #d70c18;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  background-color: #fff;
  flex-grow: 1;
  align-items: start;
  padding: 16px 20px;
  font: 700 20px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .filter-div-15 {
    white-space: initial;
  }
}
.filter-div-16 {
  color: #0066de;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  background-color: #fff;
  flex-grow: 1;
  align-items: start;
  padding: 16px 20px;
  font: 700 20px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .filter-div-16 {
    white-space: initial;
  }
}
.filter-div-17 {
  color: #d70c18;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  background-color: #fff;
  flex-grow: 1;
  align-items: start;
  padding: 16px 20px;
  font: 700 20px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .filter-div-17 {
    white-space: initial;
  }
}

.filter-div-reset {
  color: #2d2d2d;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  flex-grow: 1;
  align-items: start;
  padding: 5px 20px;
  font: 700 16px/100% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #e2e2e2;
}
@media (max-width: 991px) {
  .filter-div-reset {
    white-space: initial;
  }
}

.mc-div,
.mc-pickup-div {
  /* gap: 20px;*/
  display: block;
  margin-top: 20px;
}
.mc-div:hover {
  transform: scale(1.02);
  transition: 0.8s;
}

@media (max-width: 991px) {
  .mc-div,
  .mc-pickup-div {
    flex-direction: column;
    align-items: stretch;
    gap: 0px;
    margin-top: 30px;
  }
}
.mc-column {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 100%;
  margin-left: 0px;
}
@media (max-width: 991px) {
  .mc-column {
    width: 100%;
  }
}
.mc-div-2 {
  border: 1px solid #e9e9e9;
  background-color: #fff;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 991px) {
  .mc-div-2 {
    max-width: 100%;
  }
}
.mc-div-3 {
  color: #fff;
  text-align: center;
  background-color: #000;
  align-items: center;
  padding: 13px 20px;
  font: 700 18px/100% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .mc-div-3 {
    max-width: 100%;
  }
}
.mc-img {
  aspect-ratio: 3.92;
  object-fit: contain;
  object-position: center;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
@media (max-width: 991px) {
  .mc-img {
    max-width: 100%;
  }
}
.mc-column-2 {
  display: flex;
  flex-direction: column;
  line-height: normal;
  width: 45%;
}
@media (max-width: 991px) {
  .mc-column-2 {
    width: 100%;
  }
}
.mc-div-4 {
  border: 1px solid #e9e9e9;
  background-color: #fafafa;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: -1px -2px 23px 0;
}
@media (max-width: 991px) {
  .mc-div-4 {
    max-width: 100%;
  }
}
.mc-div-5 {
  color: #fff;
  text-align: center;
  background-color: #000;
  z-index: 1;
  align-items: center;
  padding: 13px 20px;
  font: 700 18px/100% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .mc-div-5 {
    max-width: 100%;
  }
}
.mc-div-6 {
  display: flex;
  margin: 15px 0;
  flex-direction: column;
  align-items: center;
  padding: 15px 55px;
}
@media (max-width: 991px) {
  .mc-div-6 {
    max-width: 100%;
    margin-right: 2px;
    padding: 0 20px;
  }
}
.mc-div-7 {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
@media (max-width: 991px) {
  .mc-div-7 {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}
.mc-div-8 {
  color: #fff;
  text-align: center;
  background: linear-gradient(to right, #d2781e, #c97311, #dc9d5a, #da8627, #cd7f32);
  flex-grow: 1;
  align-items: center;
  font: 700 16px/205% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (min-width: 991px) {
  .mc-div-8 {
    min-width: 160px;
    max-width: 160px;
  }
  .mc-div-7 {
    justify-content: left;
  }
}
.grade2 {
  background: linear-gradient(to right, #353880, #3b447d, #466184, #3b447d, #355796);
}
.grade1 {
  background: linear-gradient(to right, #ffd700, #e6c200, #c8a20a, #d1b30a, #ffd700);
}
.grade4 {
  background: linear-gradient(to right, #06730b, #208a61, #208a61, #208a61, #06730b);
}

.mc-div-9 {
  color: #000;
  text-align: center;
  align-self: center;
  white-space: initial;
  margin: auto 0;
  font: 700 21px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .mc-div-8 {
    width: 100%;
    flex-grow: initial;
  }
  .mc-div-9 {
    white-space: initial;
  }
  .mc-div-9 {
    color: #000;
    text-align: center;
    align-self: center;
    white-space: nowrap;
    margin: auto 0;
    font: 700 20px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
  }
}
.mc-div-10 {
  color: #000;
  text-align: left;
  align-self: stretch;
  white-space: nowrap;
  font: 700 14px/150% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
  line-height: 1.5;
  margin: 5px auto;
}
@media (max-width: 991px) {
  .mc-div-10 {
    max-width: 100%;
    margin-right: auto;
    white-space: initial;
  }
}
.mc-div-11 {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border-radius: 30px;
  background-color: #d70c18;
  width: 300px;
  max-width: 100%;
  align-items: start;
  font: 700 14px/343% Noto Sans JP, -apple-system, Roboto, Helvetica, sans-serif;
}
@media (max-width: 991px) {
  .mc-div-11 {
    white-space: initial;
  }
}
@media (max-width: 640px) {
  .mc-div-11 {
    width: 300px;
  }
}

div.match-cards {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}