@layer page {
  .page-group__map {
    position: relative;
  }
  @media screen and (min-width: 768px) {
    .page-group__map-txt {
      position: absolute;
      top: 0;
      left: 20px;
    }
  }
  .page-group__map-txt .map-txt-en {
    font-size: 2.125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--green01);
  }
  @media screen and (max-width: 767px) {
    .page-group__map-txt .map-txt-en {
      font-size: 1.25rem;
    }
  }
  .page-group__map-txt .map-txt-jp {
    margin-top: 10px;
  }
  @media screen and (min-width: 768px) and (min-width: 768px) {
    .page-group__map-txt .map-txt-jp {
      font-size: 1rem;
    }
  }
  .page-group__map-col {
    display: flex;
    flex-direction: row-reverse;
    gap: 0 14px;
  }
  @media (961px <= width <= 1060px) {
    .page-group__map-col {
      padding-top: 60px;
    }
  }
  @media (768px <= width <= 960px) {
    .page-group__map-col {
      padding-top: 120px;
    }
  }
  @media screen and (max-width: 767px) {
    .page-group__map-col {
      flex-direction: column-reverse;
      gap: 30px 0;
    }
  }
  .page-group__map-col .list-group-map {
    width: 24.0740740741%;
    max-width: 260px;
  }
  @media screen and (max-width: 767px) {
    .page-group__map-col .list-group-map {
      width: 100%;
      max-width: none;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 5px;
    }
  }
  .page-group__map-col .group-map-btn {
    background: none;
    border-top: none;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-left: none;
    border-right: none;
    width: 100%;
    min-height: 60px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray04);
    line-height: 1.6;
    text-decoration: none;
    display: grid;
    place-items: center;
    transition: 0.3s;
  }
  @media screen and (max-width: 767px) {
    .page-group__map-col .group-map-btn {
      font-size: 0.875rem;
    }
  }
  .page-group__map-col .group-map-btn:nth-child(n+2) {
    margin-top: 5px;
  }
  .page-group__map-col .group-map-btn.btn-g-pink {
    border-bottom-color: var(--g-pink01);
  }
  .page-group__map-col .group-map-btn.btn-green {
    border-bottom-color: var(--green01);
  }
  .page-group__map-col .group-map-btn.btn-g-green {
    border-bottom-color: var(--g-green01);
  }
  .page-group__map-col .group-map-btn.btn-g-orange {
    border-bottom-color: var(--g-orange01);
  }
  .page-group__map-col .group-map-btn.btn-g-blue {
    border-bottom-color: var(--g-blue01);
  }
  @media (any-hover: hover) {
    .page-group__map-col .group-map-btn:hover {
      color: var(--base);
    }
    .page-group__map-col .group-map-btn:hover.btn-g-pink {
      background: var(--g-pink01);
    }
    .page-group__map-col .group-map-btn:hover.btn-green {
      background: var(--green01);
    }
    .page-group__map-col .group-map-btn:hover.btn-g-green {
      background: var(--g-green01);
    }
    .page-group__map-col .group-map-btn:hover.btn-g-orange {
      background: var(--g-orange01);
    }
    .page-group__map-col .group-map-btn:hover.btn-g-blue {
      background: var(--g-blue01);
    }
  }
  .page-group__map-col .pict-group-map {
    width: 74.6296296296%;
    max-width: 806px;
    position: relative;
  }
  @media screen and (max-width: 767px) {
    .page-group__map-col .pict-group-map {
      width: 100%;
      max-width: none;
      margin-top: 30px !important;
    }
  }
  .page-group__map-col .area-map-02,
  .page-group__map-col .area-map-03,
  .page-group__map-col .area-map-04,
  .page-group__map-col .area-map-05,
  .page-group__map-col .area-map-06,
  .page-group__map-col .area-map-07,
  .page-group__map-col .area-map-08,
  .page-group__map-col .area-map-09 {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }
  @media screen and (min-width: 768px) {
    .page-group__map-col .area-map-02.js-map,
    .page-group__map-col .area-map-03.js-map,
    .page-group__map-col .area-map-04.js-map,
    .page-group__map-col .area-map-05.js-map,
    .page-group__map-col .area-map-06.js-map,
    .page-group__map-col .area-map-07.js-map,
    .page-group__map-col .area-map-08.js-map,
    .page-group__map-col .area-map-09.js-map {
      opacity: 1;
      transition: 0.3s;
    }
  }
  @media screen and (max-width: 767px) {
    .page-group__map-col .area-map-02 {
      opacity: 1;
    }
  }
  .page-group__list .p-ttl__small {
    margin-bottom: 0;
  }
}