/* Common styles for modals */

.ad-modal {
  position: fixed;
  top: 42%;
  transform: translateY(-50%);
  width: 400px;
  min-height: 300px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;

  /* ✅ ここが変更点：display:none をやめる */
  /* display: none; */ /* Hide by default */

  /* 代わりに “見た目そのまま非表示” */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 9999;
  padding: 15px;
  border-radius: 8px;

  transition: opacity .25s ease, visibility .25s ease;
}

/* ✅ 開いた状態（JSで is-open を付ける） */
.ad-modal.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Left side ad */
.ad-content img {
  margin: 10px 0;
}

.left-ad {
  left: 0;
  margin-left: 24px;
}

/* Right side ad */
.right-ad {
  right: 0;
  margin-right: calc(var(--scrollbar-w, 0px) + 7px);
}

/* Content inside the ad */
.ad-content h2 {
  font-size: 18px;
}
.ad-content p {
  font-size: 14px;
  margin-bottom: 20px;
}
.ad-content button {
  background-color: rgba(15, 23, 42, 0.85);
  color: white;
  padding: 5px 5px;
  border: none;
  cursor: pointer;
  border-radius: 40px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ AdSense幅0事故の保険（見た目変えない） */
.ad-content{
  min-width: 300px;
}
.ad-content ins.adsbygoogle{
  display: block;
  width: 100%;
  min-width: 300px;
}

/* スマホ表示（768px以下）のときは右下に固定 */
@media screen and (max-width: 768px) {
  .ad-modal {
    top: auto;
    bottom: 20px;
    right: 20px;
    left: auto;

    transform: none; /* translateY解除 */
    width: calc(100% - 40px); /* 余白込みで横幅調整 */
    min-height: auto;
  }

  /* 左・右指定を無効化 */
  .left-ad,
  .right-ad {
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .right-ad {
    display: none!important;
  }
}


/* =========================
   AdSense を親 ad-content に収める
   ========================= */

/* 親を基準にする */
.ad-content{
  position: relative;
  overflow: hidden;            /* はみ出し完全防止 */
}

/* AdSense本体を強制的に縮める */
.ad-content ins.adsbygoogle{
  display: block !important;
  width: auto !important;      /* 430px を無効化 */
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 auto;              /* 中央寄せ */
}

/* iframe も同様に閉じ込める（超重要） */
.ad-content iframe{
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}


/* =========================
   CENTER｜全画面モーダル
   ========================= */
.ad-modal.center-ad {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.ad-modal.center-ad.is-open {
  display: block;
}

/* 背景暗転 */
.center-ad .ad-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
}

/* 中央コンテンツ */
.center-ad .ad-content.full {
  position: relative;
  z-index: 2;
  max-width: 900px;
  max-height: 90vh;
  margin: 5vh auto;
  background: #000;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

.center-ad img {
  width: 100%;
  height: auto;
  display: block;
}

/* ラベル（Sponsored等） */
.ad-label {
  top: 10px;
  left: 12px;
  font-size: 12px;
  color: #aaa;
  letter-spacing: .08em;
  z-index: 3;
  font-weight: 900;
}

/* 閉じるボタン */
.ad-close {
  position: fixed;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
}