@charset "utf-8";
/* ==============================

    Sample page design

================================= */

html,body,#obotai_contents,#obotai_contents2 {
    margin: 0;
    padding: 0
    }

body {
    overflow-x: hidden;
    font-size: 15px;
    font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif
    }

/* Contents */
#obotai_contents {
    background: url('../img/pc_wall.jpg') no-repeat;
    background-size: cover;
    width : 100%;
    height: 100vh
    }


/* Mobile */
@media (max-width:767px) {

#obotai_contents {
    background: url('../img/sp_wall.jpg') no-repeat;
    background-size: cover;}

}



/* ====================================
      Toggle Button
========================================= */
/* PC */
        @media (min-width:768px) {
            .chatbot_pc { display: block; }
            .chatbot_sp { display: none; } }
/* Mobile */
        @media (max-width:767px){
            .chatbot_pc { display: none; }
            .chatbot_sp { display: block; } }


/* ===================================== */
#bot_toggle > div {
    position: fixed;

    right : 0;
    top: calc( 10% + 50px); }

#bot_toggle > div {
    position: fixed;
    background: #000;
    transition: .5s;
    -webkit-transition: .5s;
    cursor: pointer; 
z-index:1000;}

#bot_toggle p {
    margin: 0.2em auto;
    color:#fff;
    font-size: 01em;
    font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-weight: 900;
 }

 #bot_toggle p.icon:before {
    color:#fff;
    font-size: 2em;
    margin-left:0.5em;
    font-family: "Font Awesome 5 Free";
    content: '\f4ad';
    font-weight: 900;
 }

.chatbot_pc { padding: 1.5em 2em; }


#bot_toggle > div.active p.icon:before {
    content: '\f00d';
    color: #000;
     margin-left: 0.3em;
     margin-right: 0.3em;
   }

#bot_toggle > div.active p:last-child {
    color:#000;
    text-indent: -9999px;
    display: none;
}

#bot_toggle > div.active {
    transform: translateX(-2em);
    transform: translateY(-5em);
    z-index: 10000;
    background: white;
    padding: 0.5em;
    margin-right: 2.5em;
    border-radius: 50%;
    box-shadow: 0 0 .5em .2em #000}














/* -------------------------------
    Smart Phone
---------------------------------- */
@media screen and (max-width:767px) {

#bot_toggle > div {
    right: 1em;
    top: auto;
    bottom: 5em; }

#bot_toggle > div {
    padding: 1em}

 #bot_toggle p.icon:before {
    color:#fff;
    font-size: 2.5em;
    margin: 0 .25em}

#bot_toggle > div.active p.icon:before {
    font-size: 1em;
     margin-left: 0.3em;
     margin-right: 0.3em;
   }

#bot_toggle > div.active {
    transform: translateX(-.2em);
    transform: translateY(-.2em);
    margin-right: 0;
}

}


/* for IE10,11 */
@media all and (max-width:767px) and
(-ms-high-contrast: none) {

    #bot_toggle p.icon:before {
        font-size: 50%
        }
    #bot_toggle > div.active p.icon:before {
        font-size: 40%;
        }
}