@charset "UTF-8";

/************************************
** FANZA（DMMアフィリエイト）広告のスタイル
**
** 参考サイト（helahela / cosmos / sakusaku / piran）に倣い、
** ヘッダー下・記事本文中・記事下・サイドバー・フッターに広告を置く。
** バナーはビルド時に実寸が確定しているので、読み込み中のレイアウト
** シフトは起きない（inc/ads.php / scripts/build_ads.js を参照）。
************************************/

/* ==== 広告枠の共通スタイル ==== */
.eb-ad {
  margin: 1.8em 0;
  text-align: center;
}

.eb-ad-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
  color: #999;
}

.eb-ad-banner {
  display: inline-block;
  max-width: 100%;
  margin: 5px;
  line-height: 0;
}

.eb-ad-banner img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* PC用・モバイル用の出し分け。
   PHP側で端末判定するとページキャッシュに片方が焼き付いてしまうため、
   両方出力しておいてCSSで切り替える。 */
.eb-ad-pc {
  display: block;
}

.eb-ad-sp {
  display: none;
}

/* モバイル用バナーしか登録していない枠は、PC幅では枠ごと出さない
   （ラベルだけが残るのを防ぐ） */
.eb-ad--sp-only {
  display: none;
}

/* ==== ヘッダー下（全ページ） ==== */
.eb-header-ad-wrap {
  margin: 0 auto;
  padding: 0 16px;
}

.eb-header-ad-wrap .eb-ad {
  margin: 12px 0;
}

/* ステマ規制（景品表示法）対応の表記 */
.eb-promo-notice {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #888;
  text-align: center;
}

/* ==== フッター ==== */
.eb-ad-footer-wrap {
  margin: 0 auto;
}

.eb-ad-footer-wrap .eb-ad {
  margin: 16px 0;
}

/* ==== サイドバー ==== */
.sidebar .eb-ad {
  margin: 0 0 1.4em;
}

/* ==== FANZA導線ボタン（テキストリンク広告） ==== */
.eb-cta {
  margin: 2em 0;
}

.eb-cta-title {
  margin: 0 0 .6em;
  font-size: 1.1em;
}

.eb-cta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.eb-cta-item {
  display: inline-block;
  padding: .5em 1em;
  border: 1px solid #d94f70;
  border-radius: 3px;
  color: #d94f70;
  font-size: .9em;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.eb-cta-item:hover {
  background: #d94f70;
  color: #fff;
  text-decoration: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* Cocoonがモバイルレイアウト（サイドバーが本文の下に回る）に切り替わる幅 */
@media screen and (max-width: 834px) {
  .eb-ad-pc {
    display: none;
  }

  .eb-ad-sp {
    display: block;
  }

  .eb-ad--sp-only {
    display: block;
  }

  /* PC用バナーしか登録していない枠（サイドバー広告など）はモバイルで隠す */
  .eb-ad--pc-only {
    display: none;
  }

  .eb-ad {
    margin: 1.4em 0;
  }

  .eb-cta-list {
    gap: 6px;
  }

  .eb-cta-item {
    padding: .45em .8em;
    font-size: .85em;
  }
}