/* =======================================
   駅家土地フェアLP208-2 エリアボタンレイアウト
   背景 area.webp (1338x2225) 内の点線枠6つ（3行2列）に合わせて配置
   ======================================= */

/* =======================================
   共通（全デバイス）
   ======================================= */
.area-buttons {
  position: absolute;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 7.5%;
  column-gap: 3%;
  padding: 0;
}

/* 各ボタンのスタイル */
.area-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  max-width: 100%;
  position: relative;
}

.area-btn img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s, transform 0.2s;
}

/* ホバー効果（PCとタブレットのみ） */
@media (hover: hover) and (pointer: fine) {
  .area-btn:hover img {
    transform: scale(1.05);
    opacity: 0.95;
  }
}

/* クリック/タップ効果 */
.area-btn:active img {
  opacity: 0.8;
  transform: scale(0.98);
}

/* =======================================
   背景画像のレスポンシブ対応
   ======================================= */
.area-section {
  position: relative;
  width: 100%;
}

.area-bg {
  width: 100%;
  height: auto;
  display: block;
}