/**
 * Google AdSense 広告設定ファイル
 * このファイルで広告コンテナのスタイルをカスタマイズできます
 */

/* ==========================================================================
   広告コンテナの基本設定
   ========================================================================== */

.adsense-container {
  width: 100%;
  max-width: 800px;
  margin: 30px auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 10px;
  
  /* 高さの設定（インフィード広告対応） */
  /* 以下のいずれかを選択してコメントアウトを外してください */
  
  /* オプション1: 自動高さ（デフォルト） */
  min-height: 100px;
  /* height: auto; */
  
  /* オプション2: 固定高さ（インフィード広告推奨） */
  /* height: 250px; */     /* レクタングル（中） */
  /* height: 280px; */     /* レクタングル（大） */
  /* height: 400px; */     /* インフィード広告 */
  /* height: 600px; */     /* インフィード広告（大） */
  
  /* オプション3: カスタム高さ */
  /* height: 500px; */     /* 任意の高さを設定 */
  
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ddd;
  overflow: hidden;
}

/* 広告が配置されていない場合のプレースホルダー */
.adsense-container:empty::before {
  content: 'AdSense 広告エリア';
  color: #999;
  font-size: 14px;
  font-style: italic;
}

/* ==========================================================================
   広告タイプ別プリセット
   以下のクラスをHTMLに追加して使用できます
   例: <div class="adsense-container infeed-ad">
   ========================================================================== */

/* インフィード広告（小） */
.adsense-container.infeed-small {
  height: 300px;
  padding: 15px;
}

/* インフィード広告（中） */
.adsense-container.infeed-medium {
  height: 400px;
  padding: 20px;
}

/* インフィード広告（大） */
.adsense-container.infeed-large {
  height: 600px;
  padding: 25px;
}

/* レクタングル広告（中） */
.adsense-container.rectangle-medium {
  height: 250px;
  padding: 15px;
}

/* レクタングル広告（大） */
.adsense-container.rectangle-large {
  height: 280px;
  padding: 15px;
}

/* ビッグバナー広告 */
.adsense-container.big-banner {
  height: 90px;
  padding: 10px;
}

/* レスポンシブ広告（高さ自動調整） */
.adsense-container.responsive {
  height: auto;
  min-height: 100px;
  max-height: 600px;
}

/* カスタムサイズ（必要に応じて追加） */
.adsense-container.custom-size {
  height: 450px;  /* お好みの高さに変更 */
  padding: 20px;
}

/* ==========================================================================
   モバイル対応
   ========================================================================== */

@media (max-width: 768px) {
  .adsense-container {
    margin: 20px 0;
    padding: 15px;
    /* モバイルでの高さ調整 */
    min-height: 100px;
  }
  
  /* インフィード広告のモバイル最適化 */
  .adsense-container.infeed-small,
  .adsense-container.infeed-medium {
    height: 280px;
  }
  
  .adsense-container.infeed-large {
    height: 400px;
  }
  
  /* レクタングル広告のモバイル最適化 */
  .adsense-container.rectangle-medium,
  .adsense-container.rectangle-large {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .adsense-container {
    padding: 10px;
    border-radius: 8px;
  }
  
  /* 小型デバイスでの高さ調整 */
  .adsense-container.infeed-small,
  .adsense-container.infeed-medium,
  .adsense-container.infeed-large {
    height: 250px;
  }
}

/* ==========================================================================
   背景・デザインのカスタマイズ
   ========================================================================== */

/* 背景を透明にする場合 */
.adsense-container.transparent {
  background: transparent;
  border: none;
}

/* 背景を白にする場合 */
.adsense-container.white-bg {
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

/* シャドウを追加する場合 */
.adsense-container.with-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 角丸を変更する場合 */
.adsense-container.rounded-none {
  border-radius: 0;
}

.adsense-container.rounded-more {
  border-radius: 20px;
}

/* ==========================================================================
   余白の調整
   ========================================================================== */

/* 上下の余白を広くする */
.adsense-container.spacing-large {
  margin: 50px auto;
}

/* 上下の余白を狭くする */
.adsense-container.spacing-small {
  margin: 15px auto;
}

/* 上下の余白をなくす */
.adsense-container.spacing-none {
  margin: 0 auto;
}

/* ==========================================================================
   使用例
   ========================================================================== */

/*
  HTML例1: インフィード広告（中サイズ）
  <div class="adsense-container infeed-medium">
    <!-- AdSenseコード -->
  </div>

  HTML例2: レクタングル広告（大サイズ）
  <div class="adsense-container rectangle-large">
    <!-- AdSenseコード -->
  </div>

  HTML例3: カスタムサイズ + シャドウ + 白背景
  <div class="adsense-container custom-size with-shadow white-bg">
    <!-- AdSenseコード -->
  </div>

  HTML例4: 高さ500pxのインフィード広告
  <div class="adsense-container" style="height: 500px;">
    <!-- AdSenseコード -->
  </div>
*/