@charset "utf-8";

/* ボシュロムプラス取扱い施設検索ページ - エリアから探す専用CSS */

/* 検索トップへボタン */
#MapiContainer > .m-b-20 {
  width: 1000px;
  padding: 15px 30px;
  text-align: left;
  margin: 0 auto;
}

#MapiContainer > .m-b-20 a {
  display: inline-flex;
  align-items: center;
  background-color: #fff;
}

/* エリア検索 */
.area-search {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
.m-b-20 a.btn:hover {
    color: #17a2b8;
}

.area-group {
  margin-bottom: 20px;
}

h3 {
    background:none;
    padding-left: 0;
}

.area-group-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 10px;
}

.area-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.area-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #17a2b8;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 18px;
  text-align: center;
  min-width: 60px;
  transition: background-color 0.3s;
}
a:link.area-btn  {
    color: #fff;
}

.area-btn:hover {
  background-color: #138496;
}

/* 非活性状態 */
.area-btn-disabled {
  background-color: rgb(188, 227, 232);
  color: #999999;
  cursor: default;
  pointer-events: none;
}

/* キーワード検索フォーム */
#MapFreewordText {
  width: 745px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .area-search {
    grid-template-columns: 1fr;
  }

  .area-buttons {
    justify-content: flex-start;
  }

  .area-btn {
    min-width: calc(33.333% - 10px);
  }
}