/* 2004年ごろの広告バナー枠のパロディ（templates/_ads.html）。本文の箱の外側の左右に置く。
   バナーは CSS と文字だけで作る（画像も外の素材も読まない）。文字と地の明暗比は 4.5:1 以上 */

.shell { display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
.ads { width: 124px; flex: none; margin-top: 4px; font-family: "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif; }
.ads-head, .ads-foot { margin: 0 0 6px; font-size: 10px; text-align: center; color: #333333; background: #ffffff; border: 1px solid #999999; padding: 1px 0; }
.ads-foot { margin-top: 6px; line-height: 1.4; }

.bn { margin: 0 auto 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; line-height: 1.2; cursor: default; }
.bn-120x60 { width: 120px; height: 60px; border: 2px outset #dddddd; }
.bn-88x31 { width: 58px; height: 31px; font-size: 9px; border: 1px solid #333333; }   /* 本来は88×31。2つ並べるため幅を詰める */
.bn-120x240 { width: 120px; height: 240px; border: 3px double #333333; gap: 6px; padding: 6px 4px; }
.bn-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 8px; }
.bn-row .bn { margin: 0; }
.bn-l1 { font-size: 13px; font-weight: bold; }
.bn-l2 { font-size: 11px; }
.bn-l3 { font-size: 9px; }

.bn-server { background: linear-gradient(to bottom, #fff36b, #ffb300); color: #5a2a00; }
.bn-server b { color: #b00020; font-size: 15px; }
.bn-chaku { background: linear-gradient(135deg, #2b0a4a, #6a1b9a); color: #ffffff; }
.bn-chaku .bn-l1 { color: #fff36b; }
.bn-blog { background: linear-gradient(to bottom, #e0f7e9, #9fe0b8); color: #0b4d2a; }
.bn-seo { background: #000000; color: #00ff66; font-family: "ＭＳ ゴシック", "MS Gothic", monospace; }
.bn-packet { background: linear-gradient(to right, #00539c, #1f8fe0); color: #ffffff; }
.bn-packet .bn-l1 { color: #ffe680; }

.bn-counter { background: #111111; color: #ffffff; }
.seg-mini { font-family: "ＭＳ ゴシック", "MS Gothic", monospace; color: #ff5252; letter-spacing: 1px; }
.bn-dot { background: #fff0f6; color: #8a1450; }
.bn-link { background: #ffffcc; color: #663300; }
.bn-bbs { background: #e6efff; color: #1b3a7a; }
.bn-empty { background: repeating-linear-gradient(45deg, #ffffff 0 4px, #eeeeee 4px 8px); color: #444444; border-style: dashed; }

.bn-wanted { background: #ffffee; color: #333333; font-size: 11px; }
.bn-wanted-b { background: #eef6ff; }
.bn-big { font-size: 17px; font-weight: bold; color: #c00000; }
.bn-wanted-b .bn-big { color: #1b3a7a; }
.bn-price b { font-size: 26px; color: #c00000; font-family: Arial, Helvetica, sans-serif; }
.bn-note { font-size: 9px; color: #555555; }
.bn-blink { font-weight: bold; color: #c00000; animation: bn-blink 1s steps(1) infinite; }
@keyframes bn-blink { 50% { visibility: hidden; } }

/* 左右に置く場所が無い幅では出さない（本文を狭めない） */
@media (max-width: 1060px) { .ads { display: none; } }
.lp .ads { margin-top: 30px; }
@media (max-width: 1100px) { .lp .ads { display: none; } }
@media (prefers-reduced-motion: reduce) { .bn-blink { animation: none; } }