/*
theme Name: blank child
Template: blank
Author: tsukuruhito
Description: ここにテーマの説明が入ります
version： 1.0.0
*/
/* ポップアップバナーのスタイル */
.popup-banner {
    display: none; /* 初期は非表示 */
    position: fixed; /* 固定表示 */
    bottom: 20px; /* PCでは画面下部に配置 */
    right: 20px;
    width: 300px;
    height: auto;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    opacity: 0; /* フェードイン用に初期値を0に設定 */
    transition: opacity 1s ease-in-out; /* フェードインのトランジション */
}

/* バナーが表示されたときのスタイル */
.popup-banner.show {
    opacity: 1; /* フェードイン時に最終的に表示される */
}

/* 閉じるボタンのスタイル */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/* スマートフォン向けのスタイル */
@media (max-width: 768px) {
    .popup-banner {
        width: 90%; /* 幅をスマホ画面に合わせる */
        left: 50%; /* 横方向中央に */
        top: 50%; /* 縦方向中央に */
        transform: translate(-50%, -50%); /* 中央寄せ */
        bottom: auto; /* bottomの値を無効化 */
        right: auto; /* rightの値を無効化 */
    }

    /* スマホでのみ背景マスクを表示 */
    .overlay {
        display: none; /* 初期状態は非表示 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒マスク */
        z-index: 1000;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .overlay.show {
        display: block;
        opacity: 1;
    }
}