/* ベース設定 (モバイルファースト) */
:root {
    --dark-saturate-level: 1.3; 
}


.adsense_wrap{
    margin: 0 1em;
}

.adsense_display_top{
    margin: 0em auto 2em auto; /* 中央揃え */
    text-align: center;
    max-width: 300px; /* モバイル向け最大幅 */
    min-height: 250px; /* 最小高さでCLSを防止 */
    /* border: 1px solid red; */
}

.adsense_display_mid {
    margin: 1em auto 1em auto; /* スマホでの余白 */
    text-align: center; /* インライン要素の中央揃え */
    max-width: 300px; /* モバイル向け最大幅 */
    min-height: 250px; /* 最小高さでCLSを防止 */
    /* border: 1px solid red; */
}

.adsense_multiplex {
    margin: 0.5em 0 0em 0;
    text-align: center;
    /* border: 1px solid red; */
}

.adsense_display_bottom {
    margin: 0.5em auto 0.5em auto;
    text-align: center;
    max-width: 300px; /* モバイル向け最大幅 */
    min-height: 250px; /* 最小高さでCLSを防止 */
    /* border: 1px solid red; */
}


@media (min-width: 768px) {
    .adsense_display_top{
        max-width: 728px; /* PC向けの横長広告サイズ */
        margin: 0em auto 2em auto;
        min-height: 90px; /* 横長広告の高さに最適化 */
    }

    .adsense_display_mid {
        max-width: 728px; /* PC向けの横長広告サイズ */
        margin: 1em auto 1em auto; /* 中央揃え */
        min-height: 90px; /* 横長広告の高さに最適化 */
    }

    .adsense_display_bottom {
        max-width: 728px; /* PC向けの横長広告サイズ */
        margin: 0.5em auto 0.5em auto; /* 中央揃え */
        min-height: 90px; /* 横長広告の高さに最適化 */
    }    
}


@media screen and (min-width: 1200px) { /* デスクトップ以上のスタイル */
    .adsense_display_top {
        max-width: 970px; /* デスクトップ向けの大型広告サイズ */
        margin: 1em auto 2em auto; /* 中央揃え */
        min-height: 250px; /* 大型広告に合わせる */
    }

    .adsense_display_mid {
        max-width: 970px; /* デスクトップ向けの大型広告サイズ */
        margin: 0 auto 1em auto; /* 中央揃え */
        min-height: 250px; /* 大型広告に合わせる */
    }

    .adsense_display_bottom {
        max-width: 970px; /* デスクトップ向けの大型広告サイズ */
        margin: 1em auto 1em auto; /* 中央揃え */
        min-height: 250px; /* 大型広告に合わせる */
    }
}

html.dark-mode .adsense_display_top, html.dark-mode .adsense_display_mid, html.dark-mode .adsense_display_bottom, html.dark-mode .adsense_multiplex {
    filter: brightness(0.8) contrast(1.1);
}

html.dark-mode .adsense_display_top:hover, html.dark-mode .adsense_display_mid:hover, html.dark-mode .adsense_display_bottom:hover, html.dark-mode .adsense_multiplex:hover {
    filter: saturate(var(--dark-saturate-level));
}

/* ----------------------------------------
タッチデバイス環境でのhoverスタイル無効化
----------------------------------------- */
@media (hover: none), (pointer: coarse) {
    /* Dark-mode images and ad hover effects */
    html.dark-mode .adsense_display_top:hover,
    html.dark-mode .adsense_display_mid:hover,
    html.dark-mode .adsense_display_bottom:hover,
    html.dark-mode .adsense_multiplex:hover {
      filter: none;
    }
}