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

/* 全体 */
.gibier-preview2{
  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;

  left: var(--pc-left);
  top: var(--pc-top);
}

/* 既存の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%;

}
.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_restaurant2.svg");
  background-repeat:no-repeat;
}
.area-icons .ico-shop{
  background-image:url("../common/images/lp/icon_gibier_shop2.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{
    left: var(--sp-left);
    top: var(--sp-top);
  }

  /* スマホ時のアイコンサイズ調整は子要素でOK */
  .area-icons .ico,
  .area-icons .ico3{
    width:28px;
    height:28px;
  }

  .hanrei{ font-size:12px; }

}

/* 凡例テキストを強制的に横書きへ（縦書き/回転の影響を打ち消す） */
.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;
}

.box2 {
/*
    padding: 0.0em 0.8em;
*/
    padding: var(--pc-box21) var(--pc-box22);
    margin: 0 0;
    font-weight: bold;
    color: #6091d3;/*文字色*/
    background: #FFF;
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}

@media (max-width:600px){
  .box2 {
    padding: var(--sp-box21) var(--sp-box22);
  }
}

.box3 {
    padding: 0.0em 0.2em;
    margin: 0 0;
    font-weight: bold;
/*
    color: #6091d3;
    background: #C1F080;
 */
    border: solid 2px #FFA500;/*線*/
    border-radius: 0px;/*角の丸み*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

.legend-wrap{
  display:flex;
  flex-direction:row;      /* 横並び指定 */
  flex-wrap:nowrap;        /* 折り返さない */
  align-items:center;      /* 高さ中央 */
  gap:12px;
  white-space:nowrap;
}

.legend-item{
  display:inline-flex;     /* アイコン+文字も横並び */
  align-items:center;      /* 高さ中央 */
  gap:6px;
}
.legend-item img{
  display:block;           /* imgの下の謎余白対策 */
  height:20px;             /* widthだけより安定 */
  width:20px;
}