/* Diver MAX — 広告の配置（z-index 99980: 相談ボタン 99970 より上、DMF モーダル 99990 より下）
 * 画像広告の共通ルール: 枠の横幅いっぱいに、縦横比を保って自動縮小（切り抜かない）。元の幅より大きくは広げない
 *（PHP/JS が img に max-width:min(100%, 元の幅 or 設定の最大幅) を入れる）。PC 用の画像をスマホで見ても見切れない。 */
.dm-ad{box-sizing:border-box;text-align:center;line-height:1.4;max-width:100%;overflow:hidden}
.dm-ad *{box-sizing:border-box}
.dm-ad-label{display:block;font-size:11px;color:#8A94A3;letter-spacing:.08em;margin:0 0 4px}
/* ヘッダー: body 直下なら幅100%で全幅。Diver のコンテナ幅に閉じ込められている時は JS が dm-ad-bleed を付けて端から端まで広げる（--dm-sbw はスクロールバー幅。横スクロールを出さない） */
.dm-ad-header{margin:0;padding:8px 12px;overflow:hidden;background:transparent;width:100%}
.dm-ad-bleed{width:calc(100vw - var(--dm-sbw,0px));max-width:none;margin-left:calc(50% - 50vw + var(--dm-sbw,0px) / 2);margin-right:calc(50% - 50vw + var(--dm-sbw,0px) / 2)}
/* 記事内: 本文カラムの横幅いっぱい */
.dm-ad-in-article{margin:1.8em 0;clear:both;width:100%}

/* ---- 画像広告（PHP が組み立てる <span class="dm-ad-rot"><a class="dm-ad-img-link"><img class="dm-ad-img"></a></span>） ---- */
.dm-ad img,.dm-ad-overlay-body img,.dm-ad-card-body img,.dm-ad-fs-body img{display:block;max-width:100%;height:auto;object-fit:contain;margin:0 auto}
.dm-ad-img{width:100%}
.dm-ad-img-link,.dm-ad-rot{display:block;max-width:100%;line-height:0;margin:0 auto}
/* 画像の枠: 幅は画像と同じ（PHP/JS が min(100%, 上限) を入れる）。重ねる文字の基準（container query 単位 cqw の基準にもなる） */
.dm-ad-fig{position:relative;display:block;max-width:100%;margin:0 auto;line-height:0;container-type:inline-size}
.dm-ad-fig .dm-ad-img{margin:0}
/* 画像の上に重ねる文字（見出し・ボタン）。文字の大きさは枠の幅に比例して縮む。ボタンは装飾のみ（リンクは画像全体） */
.dm-ad-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(3px,2cqw,14px);padding:clamp(6px,3cqw,24px);pointer-events:none;line-height:1.25;text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif}
.dm-ad-ov-bl{align-items:flex-start;justify-content:flex-end;text-align:left}
.dm-ad-ov-h{font-weight:800;font-size:clamp(11px,6cqw,44px);letter-spacing:.02em}
.dm-ad-ov-b{display:inline-block;font-weight:700;font-size:clamp(10px,3.6cqw,22px);padding:.35em 1.1em;border-radius:999px;line-height:1.3}
.dm-ad-ov-white{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.dm-ad-ov-white .dm-ad-ov-b{background:#fff;color:#111827;text-shadow:none;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.dm-ad-ov-black{color:#111827;text-shadow:0 1px 3px rgba(255,255,255,.6)}
.dm-ad-ov-black .dm-ad-ov-b{background:#111827;color:#fff;text-shadow:none;box-shadow:0 2px 8px rgba(0,0,0,.2)}
/* 複数画像のローテーション（JS が interval ごとに img を差し替える。差し替え中は 300ms フェード） */
.dm-ad-rot .dm-ad-fig{transition:opacity .3s ease}
.dm-ad-rot.dm-ad-fading .dm-ad-fig{opacity:0}
/* コード広告（AdSense など）が枠からはみ出さないように */
.dm-ad iframe,.dm-ad ins,.dm-ad-overlay-body iframe,.dm-ad-overlay-body ins,.dm-ad-card-body iframe,.dm-ad-card-body ins,.dm-ad-fs-body iframe,.dm-ad-fs-body ins{max-width:100%}

/* スクロール固定（全画面・ポップアップ表示中のみ） */
body.dm-ad-lock{overflow:hidden!important;touch-action:none}

/* ---- オーバーレイ（画面下に固定・端から端まで） ---- */
.dm-ad-overlay{position:fixed;left:0;right:0;bottom:0;width:100%;z-index:99980;background:rgba(255,255,255,.97);box-shadow:0 -4px 20px rgba(17,24,39,.15);border-top:1px solid #E5E7EB;display:flex;align-items:center;justify-content:center;padding:6px 44px 6px 8px;transform:translateY(100%);transition:transform .25s ease;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
.dm-ad-overlay.on{transform:none}
.dm-ad-overlay-body{max-width:100%;overflow:hidden;text-align:center;flex:1;min-width:0}
.dm-ad-overlay-body>*{max-width:100%}
.dm-ad-overlay .dm-ad-label{margin:0 0 2px}

/* × ボタン */
.dm-ad-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:1px solid #D1D5DB;background:#fff;color:#374151;font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.15);z-index:1}
.dm-ad-x:hover{background:#F3F4F6}
.dm-ad-overlay .dm-ad-x{top:50%;transform:translateY(-50%);right:8px}

/* ---- 共通の背景レイヤー（ポップアップ・全画面）: 画面全体を覆う ---- */
.dm-ad-back{position:fixed;inset:0;z-index:99980;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s ease;overscroll-behavior:contain}
.dm-ad-back.on{opacity:1}

/* ---- ポップアップ（中央カード）: 画像広告はカード幅 = min(100vw - 32px, 画像の元幅 + 余白)（JS が設定）。画像は幅100% ---- */
.dm-ad-popup{background:rgba(10,12,20,.6);backdrop-filter:blur(2px)}
.dm-ad-card{position:relative;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);width:auto;max-width:calc(100vw - 32px);max-height:88vh;overflow:auto;padding:36px 16px 16px;transform:translateY(10px) scale(.98);transition:transform .2s ease}
.dm-ad-card.dm-ad-card-code{max-width:min(92vw,720px)}
.dm-ad-back.on .dm-ad-card{transform:none}
.dm-ad-card-body{text-align:center}
.dm-ad-card-body>*{max-width:100%}
.dm-ad-card .dm-ad-x{top:8px;right:8px}

/* ---- 全画面（インタースティシャル）: 画像は 100vw × (100vh − 閉じるボタンの帯) に収めて中央に。閉じるボタンは右上で画像に被らない ---- */
.dm-ad-fullscreen{background:rgba(255,255,255,.98);flex-direction:column;padding:0}
.dm-ad-fs-body{width:100%;height:100%;max-width:none;max-height:none;overflow:auto;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(64px + env(safe-area-inset-top,0px)) 0 env(safe-area-inset-bottom,0px)}
.dm-ad-fs-body>*{max-width:100%}
.dm-ad-fs-body .dm-ad-rot,.dm-ad-fs-body .dm-ad-img-link{width:100%}
.dm-ad-fs-body img{width:auto;max-width:100vw;max-height:calc(100vh - 64px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.dm-ad-fs-body .dm-ad-fig{max-height:calc(100vh - 64px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 64px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.dm-ad-fs-close{position:fixed;top:12px;right:12px;padding:10px 16px;border-radius:999px;border:1px solid #D1D5DB;background:#fff;color:#374151;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);min-width:110px;line-height:1.4;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:1}
.dm-ad-fs-close:disabled{cursor:default;opacity:.7;color:#6B7280}
.dm-ad-fs-close.ready{background:#111827;color:#fff;border-color:#111827}
.dm-ad-fs-close.ready:hover{background:#000}

@media (max-width:768px){
  .dm-ad-card{max-width:calc(100vw - 32px);padding:40px 8px 10px;border-radius:12px}
  .dm-ad-card.dm-ad-card-code{max-width:96vw}
  .dm-ad-overlay{padding-right:40px}
  .dm-ad-fs-close{min-width:96px;padding:9px 14px}
}
@media (prefers-reduced-motion:reduce){
  .dm-ad-overlay,.dm-ad-back,.dm-ad-card,.dm-ad-rot .dm-ad-fig{transition:none}
}