@charset "UTF-8";
/* ------------------------------------------------------------------
   AIチャット バナー / キャラクター

   チャットパネル本体（.chatbot-container の中身）はベンダー標準の
   デザインをそのまま使うため、ここでは一切スタイルを当てない。
   このファイルが受け持つのは「閉じているときのバナーとキャラクター」
   と「その配置」だけ。
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   ラッパー
   .chatbot-container はベンダーCSSで position:fixed のため、
   ラッパーは幅0の空箱になる。バナーの基準として右下に固定する。
   ------------------------------------------------------------------ */
.chatbot-wrapper {
    position: fixed;
    right: 20px;
    left: auto;
    bottom: 58px;
    width: 300px; /* バナー幅 */
    z-index: 10000;
}
[data-browse-mode="S"] .chatbot-wrapper {
    right: 10px;
    left: auto;
    bottom: 60px;
    width: 153px;
    z-index: 100000;
}

/* ------------------------------------------------------------------
   バナー
   ------------------------------------------------------------------ */
.bnr-chat {
    position: absolute;
    bottom: 60px;
    width: 300px;
    right: 0;
    left: auto;
    cursor: pointer;
}
[data-browse-mode="S"] .bnr-chat {
    width: auto;
    bottom: 0px;
    right: 0;
    left: auto;
}
[data-browse-mode="S"] .bnr-chatimgbox {
    width: 153px;
}

.bnr-closebtn {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: #081570;
    border: 1px solid #081570;
    border-radius: 100vh;
    top: 15px;
    left: -7px;
    cursor: pointer;
}
[data-browse-mode="S"] .bnr-closebtn {
    width: 25px;
    height: 25px;
}
.bnr-closebtn::before,
.bnr-closebtn::after {
    content: "";
    background-color: #FFFFFF;
    width: 20px;
    height: 2px;
    display: inline-block;
    position: absolute;
    top: 14px;
    left: 4px;
    margin: auto;
    transition: .2s;
    transform: rotate(315deg);
}
[data-browse-mode="S"] .bnr-closebtn::before,
[data-browse-mode="S"] .bnr-closebtn::after {
    top: 10.5px;
    width: 14px;
    height: 1.5px;
}
.bnr-closebtn::after {
    transform: rotate(45deg);
    top: 14px;
}

/* ------------------------------------------------------------------
   キャラクター
   ------------------------------------------------------------------ */
.chat-ai {
    position: absolute;
    bottom: -60px;
    width: 167px;
    right: 0;
    left: auto;
    z-index: 10000;
}
[data-browse-mode="S"] .chat-ai {
    width: 100px;
    right: -10px;
    left: auto;
}

/* ------------------------------------------------------------------
   開閉に応じた表示切り替え

   ・閉じているとき : ベンダー標準の起動ボタン（小さいピル）を隠し、
                      代わりにバナーとキャラクターを見せる
   ・開いているとき : バナーとキャラクターを隠し、
                      パネルはベンダー標準のまま表示する
   ------------------------------------------------------------------ */
.chatbot-container:not(.is-open) {
    opacity: 0;
    pointer-events: none;
}
.bnr-chat,
.chat-ai {
    opacity: 1;
    transition: opacity .3s ease;
}
.chatbot-wrapper.is-open .bnr-chat,
.chatbot-wrapper.is-open .chat-ai {
    opacity: 0;
    pointer-events: none;
}

/* バナーの×で閉じたとき */
.chatbot-wrapper.is-close {
    display: none;
}

.block-page-top a{
    display: none;
}