.sport-facility-section {
  z-index: 10 !important;
}

.sport-facility-selection {
  --box-padding: calc(var(--gap) * 2.5) calc(var(--padding-on-side) * 1.5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 3;
}
.sport-facility-selection__map {
  background-color: var(--color-white);
}
.sport-facility-selection__map .sport-facility-map {
  height: 100%;
  min-height: 400px;
}
.sport-facility-selection__selection {
  --text-color: var(--color-white);
  padding: var(--box-padding);
  background-color: var(--color-purple-dark);
  z-index: 5;
}
.sport-facility-selection__selection::before {
  --icon-size: 70em;
  content: "";
  position: absolute;
  top: calc(var(--icon-size) * -0.5);
  right: calc(var(--icon-size) * -0.65);
  width: var(--icon-size);
  aspect-ratio: 1/1;
  mask: var(--icon-arrow-right) center/contain no-repeat;
  background-color: var(--color-white);
  transform: rotate(-90deg);
  z-index: 1;
  opacity: 0.12;
  pointer-events: none;
  z-index: 1;
}
.sport-facility-selection__selection-inner {
  max-width: calc(var(--content-small) / 2);
}
.sport-facility-selection__selection-inner > *:first-child {
  margin-top: 0;
}
.sport-facility-selection__selection-inner > *:last-child {
  margin-bottom: 0;
}
.sport-facility-selection__selection .wp-block-heading small {
  font-size: 0.5em;
  font-weight: var(--font-weight-light);
  display: block;
}
.sport-facility-selection__selection p {
  color: var(--text-color);
  font-size: var(--font-size-20);
}
.sport-facility-selection__selection hr {
  margin: 1em 0;
  max-width: 320px;
  background-color: var(--color-white);
  opacity: 0.25;
}
.sport-facility-selection .wp-block-heading {
  font-weight: var(--font-weight-medium);
}
.sport-facility-selection .wp-block-heading strong {
  text-transform: uppercase;
  display: block;
  color: var(--color-secondary);
  font-size: 1em;
}
.sport-facility-selection .is-style-arrow::before {
  opacity: 0.25;
}
@media screen and (max-width: 768px) {
  .sport-facility-selection {
    grid-template-columns: 1fr;
  }
  .sport-facility-selection__map {
    order: 2;
  }
}

.sport-facility-list {
  margin-top: 1em;
}
.sport-facility-list:hover .sport-facility-list__label {
  background-color: var(--color-secondary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.sport-facility-list:hover .sport-facility-list__items {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sport-facility-list__label {
  background-color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  padding: 0.6em 1em 0.5em;
  border-radius: 1em;
  font-size: var(--font-size-18);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  cursor: pointer;
  transition: var(--transition);
}
.sport-facility-list__label::after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  mask: var(--icon-arrow-right) center/contain no-repeat;
  background-color: var(--color-white);
  transform: rotate(90deg);
}
.sport-facility-list__items {
  display: flex;
  flex-direction: column;
  background-color: var(--color-secondary);
  border-radius: 1em;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.25em 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition);
  position: absolute;
  width: 100%;
}
.sport-facility-list__item a {
  color: var(--color-white);
  padding: 0.25em 1em;
  display: block;
}
.sport-facility-list__item a:hover {
  background-color: var(--color-primary);
}