/**
 * 広告ユニット用スタイル
 *
 * 広告枠のレイアウトとレスポンシブ対応を管理
 */

/* 広告ユニット共通スタイル */
.ad-unit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px auto;
  max-width: 100%;
  overflow: hidden;
}

/* ホームページ用 */
.ad-unit--home_below_hero {
  margin: 24px auto 48px;
}

.ad-unit--home_after_featured {
  margin: 48px auto;
}

.ad-unit--home_after_popular {
  margin: 48px auto;
}

.ad-unit--home_before_footer {
  margin: 48px auto 32px;
}

/* ツールページ用 */
.ad-unit--tool_top {
  margin: 16px auto 24px;
}

.ad-unit--tool_after_result {
  margin: 32px auto;
}

.ad-unit--tool_before_related {
  margin: 32px auto 0;
}

/* ツール一覧ページ用 */
.ad-unit--tools_list_top {
  margin: 16px auto 32px;
}

.ad-unit--tools_list_middle {
  margin: 32px auto;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .ad-unit {
    margin: 24px auto;
  }

  .ad-unit--home_below_hero {
    margin: 16px auto 32px;
  }

  .ad-unit--home_after_featured,
  .ad-unit--home_after_popular {
    margin: 32px auto;
  }

  .ad-unit--tool_top {
    margin: 12px auto 20px;
  }

  .ad-unit--tool_after_result {
    margin: 24px auto;
  }
}

/* 広告がロードされるまでの最小高さ（CLS対策） */
.ad-unit ins.adsbygoogle {
  min-height: 90px;
}

.ad-unit ins.adsbygoogle[data-ad-format="rectangle"] {
  min-height: 250px;
}

@media screen and (max-width: 768px) {
  .ad-unit ins.adsbygoogle {
    min-height: 50px;
  }

  .ad-unit ins.adsbygoogle[data-ad-format="rectangle"] {
    min-height: 250px;
  }
}