/**
 * エリアTOP下部「エリアから探す」ナビ（est_home/area-search）.
 *
 * 直上に並ぶ「◯◯の駅からメンズエステ店を探す」（k1est の .area-station-section）と
 * 見た目を揃えてある。あちらは common.scss で管理されているので、共通の見た目を
 * 変えるときは両方直すこと。
 *
 * このファイルは SCSS ではなく素の CSS。サーバー上に sass が無いため、
 * ここを直して drush cr すれば反映される（common.scss のようなローカル
 * コンパイル往復が要らない）。
 */

.area-nearby-area-section,
.area-other-pref-section,
.area-store-type-section {
  margin-top: 15px !important;
}

.area-nearby-area-title,
.area-other-pref-section-title,
.area-store-type-section-title {
  background-color: #fff;
  color: #12cf57;
  padding: 0px 15px 10px 15px;
  font-size: 18px;
  font-weight: 700;
}

.area-nearby-area-section-list,
.area-other-pref-section-list,
.area-store-type-section-list {
  padding: 0 15px 15px 15px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
  gap: 5px 0;
  margin: 0;
  list-style: none;
}

.area-nearby-area-section-list li,
.area-other-pref-section-list li,
.area-store-type-section-list li {
  padding: 0;
  font-size: 14px;
}

/* 区切りの「｜」。最後の項目には出さない。 */
.area-nearby-area-section-list li::after,
.area-other-pref-section-list li::after,
.area-store-type-section-list li::after {
  content: "｜";
  color: #333;
  padding: 0 5px;
}

.area-nearby-area-section-list li:last-child::after,
.area-other-pref-section-list li:last-child::after,
.area-store-type-section-list li:last-child::after {
  content: none;
}

.area-nearby-area-section-item-link,
.area-other-pref-section-item-link,
.area-store-type-section-item-link {
  color: #333;
}

.area-nearby-area-section-item-link:hover,
.area-other-pref-section-item-link:hover,
.area-store-type-section-item-link:hover {
  color: #1F68FF;
  text-decoration: underline;
}