/* ==================================================
   Gibier preview page only
   地図上に Dashicons（飲食店/販売店）を配置
   ================================================== */

/* 全体 */
.gibier-preview{
  max-width:1100px;
  margin:0 auto;
  padding:20px 16px;
}

/* 確認用バッジ */
.preview-badge{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9999;
  background:rgba(0,0,0,.75);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
}

/* 地図ラッパー */
.map-wrap{
  position:relative;
  max-width:520px;
}

/* 地図画像 */
.map-img{
  width:100%;
  height:auto;
  display:block;
}

/* 各地域のアイコンセット（2アイコン） */
.area-icons{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  gap:6px;
  pointer-events:auto;
}

/* 既存のDashicons設定は削除してOK（::before不要） */
.area-icons .ico{
  width:28px;
  height:28px;
  display:inline-block;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.18);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  background-repeat:no-repeat;
  background-position:center;
  background-size:78% 78%;
text-align: left;
}
.ico3{
  width:28px;
  height:28px;
  display:inline-block;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.18);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  background-repeat:no-repeat;
  background-position:center;
  background-size:78% 78%;
}

/* css/gibier-preview.css から見た相対パス */
.area-icons .ico-restaurant{
  background-image:url("../common/images/lp/icon_gibier_restaurant.svg");
  background-repeat:no-repeat;
}
.area-icons .ico-shop{
  background-image:url("../common/images/lp/icon_gibier_shop.svg");
  background-repeat:no-repeat;
}

.area-icons .ico-restaurant,
.area-icons .ico-shop {
  transition: all .2s ease;
}

/* hover */
.area-icons .ico-restaurant:hover,
.area-icons .ico-shop:hover {
  background-color: #eee;
  filter: brightness(0.85);
transform: scale(1.25);
}


/* スマホ時もタップしやすく */
@media (max-width:600px){
  .area-icons .ico{
    width:28px;
    height:28px;
  }
}

/* 凡例テキストを強制的に横書きへ（縦書き/回転の影響を打ち消す） */
.gibier-legend,
.gibier-legend * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none !important;
  white-space: nowrap;
  pointer-events: none !important;
}

/* 地図エリアのアイコンだけ hover 有効（凡例は除外） */
.area-icons .ico-restaurant:not(.legend .ico-restaurant),
.area-icons .ico-shop:not(.legend .ico-shop) {
  transition: all .2s ease;
}