.map {
  font-weight: 500;
}

.area-color-1 {
  fill: #1e50a2;
}

.area-color-2 {
  fill: #00a3af;
}

.area-color-3 {
  fill: #007b43;
}

.area-color-4 {
  fill: #cee4ae;
}

.area-color-5 {
  fill: #ffd900;
}

.area-color-6 {
  fill: #f6ad49;
}

.area-color-7 {
  fill: #ca8269;
}

.area-color-8 {
  fill: #ec6d71;
}

.area-color-9 {
  fill: #7058a3;
}

.area {
  transition: .3s;
}

/* 現在準備中のエリアへの着色 */
.preparing {
  fill: #ccc
}

@media (hover:hover) {
  .area:hover,
  .map-area-name:hover + a > .area {
    fill: #d9333f;
  }
}

@media (hover:none) {
  .area:active,
  .map-area-name:active + a > .area {
    fill: #d9333f;
  }
}