/* ===== Mame Ads Banner Maker (front) ===== */

.mab-link { display:block; text-decoration:none; color:inherit; }
.mab-link img { width:100%; height:auto; display:block; border-radius:8px; }
.mab-micro { margin:.6em 0 0; font-size:12px; color:#999; text-align:center; }

/* テキスト/カード */
.mab-card { text-align:center; padding:18px 16px; border:1px solid #eee; border-radius:12px; background:#fff; }
.mab-lead { margin:0 0 .4em; font-size:15px; color:#666; }
.mab-body { margin:0 0 1em; font-size:17px; font-weight:700; line-height:1.6; color:#222; }
.mab-btn  { display:inline-block; width:100%; max-width:420px; padding:16px 24px; border-radius:10px;
            background:#06c755; color:#fff; font-size:17px; font-weight:700; box-sizing:border-box;
            text-align:center; line-height:1.4; transition:transform .1s, box-shadow .1s; }
/* 文字幅に合わせるボタン */
.mab-btn--auto { width:auto; max-width:none; }
/* 立体的な影（参考の赤ボタン風） */
.mab-btn--shadow { box-shadow:0 5px 0 rgba(0,0,0,.22); }
.mab-link:active .mab-btn--shadow { transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.22); }
/* ボタンのみスタイル */
.mab-style-button { text-align:center; }

/* 追従バナー（下部）をボタン型にしたら、必ず右向きシェブロン(›)を自動表示 */
.mab--floating .mab-style-button .mab-btn { position:relative; padding-right:46px; }
.mab--floating .mab-style-button .mab-btn::after {
  content:""; position:absolute; right:22px; top:50%;
  width:9px; height:9px;
  border-top:2px solid currentColor; border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.mab-wp-items { list-style:none; padding:0; margin:0 0 1em; text-align:left; max-width:340px; margin-inline:auto; }
.mab-wp-items li { padding:6px 0 6px 26px; position:relative; }
.mab-wp-items li::before { content:"✓"; position:absolute; left:4px; color:#06c755; font-weight:700; }

/* 記事内・サイドバー系の余白 */
.mab--inline, .mab--cta, .mab--toc_after, .mab--sidebar {
  margin:28px 0;
}

/* 目次の直下に配置したサイドバーバナーは、目次とのギャップを詰める */
.mab-aftertoc-widget { margin-top:8px !important; }
.mab-aftertoc-widget .mab { margin-top:0; margin-bottom:0; }

/* ===== モーダル ===== */
.mab--modal {
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.mab--modal.is-open { opacity:1; visibility:visible; }
.mab-modal-box {
  position:relative; width:100%; max-width:420px; background:#fff; border-radius:14px; padding:18px;
  box-shadow:0 12px 48px rgba(0,0,0,.28); transform:translateY(24px); transition:transform .35s;
}
.mab--modal.is-open .mab-modal-box { transform:translateY(0); }
.mab-modal-box .mab-card { border:none; padding:8px 4px; }

/* 画像バナーのモーダル：白余白なし（画像＋×だけ） */
.mab-modal-box--image { padding:0; background:transparent; box-shadow:none; border-radius:0; }
.mab-modal-box--image .mab-link img { border-radius:12px; display:block; }
.mab-modal-box--image .mab-close { top:-16px; right:-16px; }

/* ===== 追従バナー（full width） ===== */
.mab--floating {
  position:fixed; left:0; right:0; bottom:0; z-index:9999; width:100%;
  background:#fff; box-shadow:0 -4px 20px rgba(0,0,0,.15); padding:10px 48px 10px 16px;
  transform:translateY(100%); transition:transform .35s; max-height:30vh; overflow:hidden;
}
.mab--floating.is-shown { transform:translateY(0); }
.mab--floating .mab-card { border:none; padding:6px; }
.mab--floating .mab-btn { padding:10px 16px; font-size:14px; }
.mab--floating img { max-height:18vh; width:auto; margin:0 auto; }

/* ===== ホワイトペーパー（コーナー固定バナー） ===== */
.mab--whitepaper {
  position:fixed; bottom:16px; z-index:9998; width:300px; max-width:46vw;
  background:#fff; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), visibility .45s;
}
/* 表示アニメーションの初期状態（隠れている時の位置） */
.mab--whitepaper.mab-anim-up    { transform:translateY(24px); }
.mab--whitepaper.mab-anim-right { transform:translateX(56px); }
.mab--whitepaper.mab-anim-left  { transform:translateX(-56px); }
.mab--whitepaper.mab-anim-fade  { transform:none; }
/* 表示後は定位置へ（全アニメ共通） */
.mab--whitepaper.is-shown { opacity:1; visibility:visible; transform:none; }
.mab-corner-left  { left:16px; }
.mab-corner-right { right:16px; }
.mab--whitepaper img { border-radius:12px; }
.mab--whitepaper .mab-card { border:none; padding:14px; }
.mab--whitepaper .mab-close { top:-12px; right:-12px; }
@media (max-width:600px){
  .mab--whitepaper { width:auto; left:12px; right:12px; max-width:none; bottom:12px; }
  .mab-corner-left, .mab-corner-right { left:12px; right:12px; }
}

/* 閉じる/×・いまはいい */
.mab-close {
  position:absolute; width:34px; height:34px; border:none; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
}
.mab--modal .mab-close { top:-14px; right:-14px; }
.mab--floating .mab-close { top:8px; right:8px; box-shadow:none; }
.mab-close::before, .mab-close::after {
  content:""; position:absolute; top:50%; left:50%; width:15px; height:2px; background:#333;
}
.mab-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.mab-close::after  { transform:translate(-50%,-50%) rotate(-45deg); }
.mab-dismiss { display:block; margin:.6em auto 0; padding:4px 8px; border:none; background:none;
  color:#aaa; font-size:13px; cursor:pointer; text-decoration:underline; }

body.mab-modal-open { overflow:hidden; }

/* ===== デバイス出し分け ===== */
@media (max-width:600px){ .mab-device-pc { display:none !important; } }
@media (min-width:601px){ .mab-device-sp { display:none !important; } }