@charset "UTF-8";

/* =====================================================
   MUST BUY セレクションキャンペーン
   背景 = 画像1枚（PC: main_bg.png 2600x4346 / SP: main_bg-sp.png 700x4516）
   ボタン = 画像を背景の上にオーバーレイ（リンク化）
   PC/SP切替 : <picture><source media="(max-width:640px)">（必要な画像のみロード）
   PC座標 : Figma 390:15（main_bg.png 2600x4346）基準の割合(%)
   SP座標 : Figma 362:2（main_bg-sp.png 700x4516）実測の割合(%)
   ===================================================== */

.main-content {
  width: 100%;
}

/* 背景ラッパー（この幅を基準に子要素を%配置） */
.mustbuy-bg {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  line-height: 0;
}

.mustbuy-bg .bg,
.mb-imgbtn picture {
  display: block;
  line-height: 0;
}

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

/* --- 画像ボタン共通 ------------------------------------- */
.mb-imgbtn {
  position: absolute;
  display: block;
  line-height: 0;
  transition: opacity 0.3s ease;
}

.mb-imgbtn img {
  display: block;
  width: 100%;
  height: auto;
}

.mb-imgbtn:hover {
  opacity: 0.85;
}

/* --- PC：各ボタンの配置（Figma 390:15 基準／main_bg.png 2600x4346内の座標→%） ----
   imp   : x=180  y=3300 1012x227（左カラムにflush）
   cross : x=1408 y=3300 1012x227（右カラムにflush・impと左右対称）
   shop  : x=740  y=3662 1120x246（中央）
--------------------------------------------------------- */
.mb-imgbtn--imp {
  left: 6.92%;
  top: 75.93%;
  width: 38.92%;
}
.mb-imgbtn--cross {
  left: 54.15%;
  top: 75.93%;
  width: 38.92%;
}
.mb-imgbtn--shop {
  left: 28.46%;
  top: 84.26%;
  width: 43.08%;
}

/* =====================================================
   SP レイアウト（画面幅 640px 以下 / 背景 main_bg-sp.png 700x4516 基準）
   背景・ボタン画像は <picture> が自動で -sp に切替。
   ここではボタン位置のみ上書き（Figma 362:2 実測・中心 top% / 高さ非依存）
   ===================================================== */
@media (max-width: 640px) {
  .mb-imgbtn {
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* imp   : Figma cy 1004 → 41.81% */
  .mb-imgbtn--imp {
    top: 41.81%;
    width: 90%; /* btn1-sp 630 / bg 700 */
  }
  /* cross : Figma cy 1845 → 79.05% */
  .mb-imgbtn--cross {
    top: 79.05%;
    width: 90%; /* btn2-sp 630 / bg 700 */
  }
  /* shop  : Figma cy 1970 → 84.59% */
  .mb-imgbtn--shop {
    top: 84.59%;
    width: 91.43%; /* btn3-sp 640 / bg 700 */
  }
}