/* src/public/css/ad-skyscraper.css
 *
 * PC用の縦長広告（160x600）。本文（最大1000px）の左右に、画面に固定して出します。
 * 出す・隠すの切り替えは public/js/ad-skyscraper.js が .is-visible を付け外しします。
 */

.ad-skyscraper {
    position: fixed;
    /* 縮んだヘッダーの下 */
    top: 80px;
    z-index: 900;
    width: 160px;
    height: 600px;
    overflow: hidden;
    /* 💡 display:none にすると広告が正しく読み込まれないことがあるため、
          見えなくするだけにしています（クリックもできない状態） */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, visibility 0.25s;
}

/* 本文の右端（中央 ＋ 500px）から 16px 空けた位置 */
.ad-skyscraper-right {
    left: calc(50% + 500px + 16px);
}

/* 本文の左端（中央 − 500px）から 16px 空けた位置 */
.ad-skyscraper-left {
    right: calc(50% + 500px + 16px);
}

.ad-skyscraper.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* 画面が狭い・低いときは出しません（本文や画面からはみ出すため） */
@media (max-width: 1359px), (max-height: 719px) {
    .ad-skyscraper { display: none; }
}