:root {
    /*ウィジェット高さ*/
    --widget-height: calc(100vh - 150px);
}
.bot-area {
    border: 1px solid #000;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 500px;
    height: var(--widget-height);
    margin: 0;
    padding: 0;
    max-width: none;
    max-height: none;
    display: block !important;
    z-index: 9999;
}

    .bot-area .bot-switch {
        opacity: 1;
        position: absolute;
        right: 10px;
        bottom: var(--widget-height);
        transform: translateY(var(--widget-height));
        animation-name: BtnfadeIn;
        animation-duration: 1s;
        animation-fill-mode: forwards;
    }
    .bot-area iframe {
        width: 100%;
        height: 100%;
    }
    .bot-area.loaded {
        animation-name: fadeIn;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }

    .bot-area.hide {
        animation-name: fadeOut;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
    }
    .bot-area.init {
        bottom: calc( var(--widget-height) * -1);
    }

/* フェードインアニメーション */
@keyframes BtnfadeIn {
    0% {
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
}
@keyframes fadeIn {
    0% {
        transform: translateY(var(--widget-height));
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes fadeOut {
    0% {
    }

    100% {
        opacity: 1;
        transform: translateY(var(--widget-height));
    }
}