/* ================================================================
   ads.css
   AdSense 広告配置用 CSS（BEM 修飾子のみ、Phase 6 以降）。

   広告ユニットは全て ads/ パーシャル経由で読み込む：
       ads/sidebar_vertical.php  → .ad_container--sidebar
       ads/in_content.php        → .ad_container--in_content
       ads/bottom_horizontal.php → .ad_container--bottom
       ads/anchor_mobile.php     → .ad_container--anchor

   ブレークポイント：768px（共通）
   ================================================================ */


/* ==========================================================================
   レイアウトコンテナ（サイドレール対応の 3 列グリッド）
   ========================================================================== */

.content_wrapper {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  gap: 20px;
  padding: 0 20px;
}

.main_content_area {
  flex: 1;
  min-width: 0;
}


/* ==========================================================================
   広告コンテナ共通
   ========================================================================== */

.ad_container {
  width: 100%;
  overflow: hidden;
  margin: 20px auto;
  text-align: center;
  clear: both;
  position: relative;
  z-index: 5;
}

/* AdSense 広告ユニット共通 */
ins.adsbygoogle {
  display: block;
  overflow: hidden;
  background-color: transparent;
}


/* ==========================================================================
   BEM 修飾子 — ads/ パーシャル用
   ========================================================================== */

.ad_container--sidebar {
  width: 300px;
  min-width: 300px;
  margin: 0;
  position: sticky;
  top: 140px;
  height: fit-content;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.ad_container--in_content {
  margin: 20px 0;
  max-width: 100%;
}

.ad_container--bottom {
  margin-top: 40px;
  margin-bottom: 20px;
  max-width: 970px;
}

.ad_container--anchor {
  display: none;  /* PC 非表示、モバイルで表示 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0;
  max-width: none;
  background-color: #fff;
  border-top: 1px solid #dadce0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   レスポンシブ（ブレークポイント 768px 統一）
   ========================================================================== */

@media (max-width: 768px) {

  /* 3 列レイアウトを縦積みに */
  .content_wrapper {
    flex-direction: column;
  }

  /* サイドレール広告を非表示 */
  .ad_container--sidebar {
    display: none;
  }

  /* アンカー広告を表示 */
  .ad_container--anchor {
    display: block;
  }

  /* アンカー広告の高さぶん body 下部に余白を確保
     （コンテンツがアンカー広告に隠れないようにする） */
  body {
    padding-bottom: 120px;
  }

  /* コンテンツ内広告の余白を縮小 */
  .ad_container,
  .ad_container--in_content {
    margin: 15px auto;
  }
}

/* タブレット横〜小型 PC：サイドレールの幅を縮める */
@media (max-width: 1200px) and (min-width: 769px) {

  .content_wrapper {
    gap: 10px;
  }

  .ad_container--sidebar {
    width: 250px;
    min-width: 250px;
  }
}