/* ============================================
   広告バナー（記事詳細ページ）
   - .maneki-banner を基点にスコープを限定する
   - 角丸・影・枠線などの装飾は付けない（添付画像のデザインをそのまま活かす）
   - 画像は親要素幅に合わせて縮小し、縦横比を保持する（トリミングしない）
   ============================================ */

.maneki-banner {
  margin: 40px 0;
}

/* 記事上：アイキャッチ／導入文の直後に置く。
   前後要素の margin と二重にならないよう、バナー前後の間隔をここで一元管理する
   （PC 32px / SP 24px。空要素・br・負マージンは使わない）。
   実DOM順（single.php）: .article-eyecatch → .article-intro → .maneki-banner--article-top → .article-body */
.maneki-banner--article-top {
  margin: 0 0 32px;
}

/* バナー直前のアイキャッチ／導入文の下マージンを消し、間隔をバナーの上マージンへ一本化する。
   （導入文があるときは .article-eyecatch の次要素が .article-intro になるため、
     eyecatch → intro の 32px は従来どおり維持される） */
.article-eyecatch:has(+ .maneki-banner--article-top),
.article-intro:has(+ .maneki-banner--article-top) {
  margin-bottom: 0;
}

.article-eyecatch + .maneki-banner--article-top,
.article-intro + .maneki-banner--article-top {
  margin-top: 32px;
}

/* バナー直後が目次ボックスの場合、その margin-top（!important 指定）を打ち消し、
   バナーの下マージン 32px だけを間隔として使う（二重化を防ぐ） */
.maneki-banner--article-top + .article-body > #ez-toc-container:first-child {
  margin-top: 0 !important;
}

/* サイドバー：.sidebar（flex, gap:32px）の子として並ぶため個別マージンは持たせない */
.maneki-banner--sidebar {
  margin: 0;
}

.maneki-banner__link {
  display: block;
  text-decoration: none;
  border: 0;
}

/* the_content 内に挿入される記事内バナーが .article-body a の
   下線・色を継承しないように打ち消す（!important は使わない） */
.article-body .maneki-banner__link {
  border-bottom: 0;
}

.maneki-banner picture,
.maneki-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  .maneki-banner {
    margin: 32px 0;
  }

  .maneki-banner--article-top {
    margin: 0 0 24px;
  }

  .article-eyecatch + .maneki-banner--article-top,
  .article-intro + .maneki-banner--article-top {
    margin-top: 24px;
  }
}