.group-map {
  width: 100%;
}
.group-map__pc {
  display: block;
}
.group-map__sp {
  display: none;
}
.group-map__image-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}
.group-map__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.group-map__hotspot {
  position: absolute;
  display: block;
  background: rgba(255, 255, 255, 0.001);
  outline-offset: 2px;
}
.group-map__hotspot::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 2px;
  background: var(--group-map-line, #173f7a);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.group-map__hotspot:hover::after,
.group-map__hotspot:focus-visible::after {
  transform: scaleX(1);
}
.group-map__hotspot:focus-visible {
  outline: none;
}
.group-map__hotspot--chugoku {
  --group-map-line: #94ba40;
}
.group-map__hotspot--kyoto {
  --group-map-line: #5fa9ac;
}
.group-map__hotspot--osaka {
  --group-map-line: #6baf80;
}
.group-map__hotspot--kanto {
  --group-map-line: #68b1da;
}
.group-map__hotspot--sdx {
  --group-map-line: #093270;
}
.group-map__sdx {
  display: none;
}

@media screen and (max-width: 768px) {
  .group-map__pc {
    display: none;
  }
  .group-map__sp {
    display: block;
  }
  .group-map__sp > img {
    display: block;
    width: 100%;
    height: auto;
  }
  .group-map__accordions {
    margin: 20px 0 0;
  }
  #group_tab_area.group-map__accordions {
    margin-bottom: 0;
  }
  #group_tab_area.group-map__accordions::after {
    display: none;
  }
  #group_tab_area.group-map__accordions .group-map__heading {
    padding: 7px;
  }
  .group-map__heading {
    --group-map-heading-dark: #59b5df;
    --group-map-heading-light: #a6d2e8;
    position: relative;
    scroll-margin-top: 70px;
    overflow: hidden;
    margin: 0;
    padding: 7px;
    background: var(--group-map-heading-light) !important;
    color: #fff !important;
    border: 0 !important;
    text-align: left !important;
  }
  .group-map__heading .tab {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    padding: 0 28px 0 12px;
  }
  .group-map__heading::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 36%;
    height: 100%;
    background: var(--group-map-heading-dark);
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
    content: "";
  }
  .group-map__heading--chugoku {
    --group-map-heading-dark: #94ba40;
    --group-map-heading-light: #b4cf62;
  }
  .group-map__heading--kyoto {
    --group-map-heading-dark: #59aaa9;
    --group-map-heading-light: #8ac5c4;
  }
  .group-map__heading--osaka {
    --group-map-heading-dark: #6baf80;
    --group-map-heading-light: #9fc9aa;
  }
  .group-map__heading--kanto {
    --group-map-heading-dark: #59b5df;
    --group-map-heading-light: #a6d2e8;
  }
  .group-map__heading-ja {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
  }
  .group-map__heading-en {
    position: absolute;
    bottom: -4px;
    left: 35%;
    overflow: hidden;
    width: 58%;
    margin: 0;
    padding: 0;
    font-size: clamp(7px, 2.6vw, 9px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .group-map__heading .arrowtoggle {
    position: absolute;
    top: 50%;
    right: 1px;
    z-index: 2;
    width: auto;
    height: auto;
    color: #fff !important;
    font-size: 10px;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
  }
  .group-map__heading .arrowtoggle::before {
    display: inline-block !important;
    width: auto;
    height: auto;
    margin: 0 !important;
    border: 0;
    color: inherit !important;
    content: "\f054" !important;
    transform: none;
  }
  .group-map__heading .arrowtoggle::after {
    display: none !important;
    content: none !important;
  }
  .group-map__accordions input:checked + .group-map__heading .arrowtoggle {
    transform: translateY(-50%) rotate(90deg);
  }
  .group-map__accordions .tab-content {
    height: 0;
    max-height: 0;
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, padding-top 0.5s ease, padding-bottom 0.5s ease, opacity 0.5s ease;
  }
  #group_tab_area.group-map__accordions .tab-switch:checked + .group-map__heading + .tab-content {
    height: auto;
    max-height: var(--group-map-content-height, 2000px);
    margin-bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    overflow: hidden;
    opacity: 1;
  }
  .group-map__accordions .tab-content h4 {
    margin: 10px 0 14px;
  }
  .group-map__accordions .group_box li.group_item {
    overflow: visible;
    margin-bottom: 0.6em;
    padding-bottom: 0.6em;
  }
  .group-map__accordions .group_box a {
    display: inline-block;
    max-width: 100%;
    font-size: clamp(10px, 3.4vw, 14px);
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
  }
  .group-map__accordions .group_box a::before {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.5em;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    content: "";
  }
  .group-map__sdx {
    display: block;
    margin: 0;
  }
  .group-map__sdx a {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 7px;
    background: #113b79;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
  }
  .group-map__sdx a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 36%;
    height: 100%;
    background: #062d69;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
    content: "";
  }
  .group-map__sdx .tab {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    padding: 0 28px 0 12px;
  }
  .group-map__sdx-ja {
    flex: 0 0 auto;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    white-space: nowrap;
  }
  .group-map__sdx-en {
    display: none;
  }
  .group-map__sdx-arrow {
    position: absolute;
    top: 50%;
    right: 1px;
    z-index: 2;
    width: auto;
    height: auto;
    border: 0;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    transform: translateY(-50%);
  }
}