.c-map-001 {
  max-width: 650px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--base);
  position: relative;
}

.c-map-001__area {
  display: grid;
  grid-template-areas:
    "sea sea sea hokkaido hokkaido"
    "sea sea sea tohoku tohoku"
    "sea sea kanto kanto kanto"
    "sea chubu chubu chubu sea"
    "sea kinki kinki kinki sea"
    "sea chugoku chugoku sea sea"
    "sea shikoku shikoku sea sea"
    "kyushu kyushu kyushu okinawa sea";
  gap: var(--wp--preset--spacing--2-xs);
}

.a-01_hokkaido {
  grid-area: hokkaido;
}

.a-02_tohoku {
  grid-area: tohoku;
}

.a-03_kanto {
  grid-area: kanto;
}

.a-04_chubu {
  grid-area: chubu;
}

.a-05_kinki {
  grid-area: kinki;
}

.a-06_chugoku {
  grid-area: chugoku;
}

.a-07_shikoku {
  grid-area: shikoku;
}

.a-08_kyushu {
  grid-area: kyushu;
}

.a-09_okinawa {
  grid-area: okinawa;
}

.c-map-001__area-group {
  margin: var(--wp--preset--spacing--2-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--2-xs);
}

.c-map-001__area-item {
  min-width: 5rem;
  width: 100%;
  max-width: 15%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--wp--preset--color--gray-lighter);
  border-radius: var(--wp--preset--border-radius--base);
  font-size: var(--wp--preset--font-size--sm);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.3s ease;
}

.c-map-001__area-item:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 地域別色分け */
.a-01_hokkaido .c-map-001__area-item {
  background: #4a90e2;
  color: white;
}

.a-02_tohoku .c-map-001__area-item {
  background: #5cb85c;
  color: white;
}

.a-03_kanto .c-map-001__area-item {
  background: #f0ad4e;
  color: white;
}

.a-04_chubu .c-map-001__area-item {
  background: #d9534f;
  color: white;
}

.a-05_kinki .c-map-001__area-item {
  background: #9c27b0;
  color: white;
}

.a-06_chugoku .c-map-001__area-item {
  background: #ff7043;
  color: white;
}

.a-07_shikoku .c-map-001__area-item {
  background: #26a69a;
  color: white;
}

.a-08_kyushu .c-map-001__area-item {
  background: #ab47bc;
  color: white;
}

.a-09_okinawa .c-map-001__area-item {
  background: #66bb6a;
  color: white;
}