@charset "utf-8";

.chat-bot-switch {
    position: absolute;
    top: -80px;
    right: 10px;
    display: block;
    background: url(/common/img/chat/chat-bot-switch01.png);
    width: 122px;
    height: 80px;
    transition: 1s;
    cursor: pointer;
}

#chat-bot-checkbox {
	display:none;
}

#chat-container {
    width: 80%;
    max-width: 500px;
    border: 1px solid #990000;
    border-radius: 10px;
    padding: 10px;
    position: fixed;
    bottom: -580px;
    right: 10px;
    background: rgb(255 240 240);
    z-index: 300;
    transition:.5s;
}

#chat-bot-checkbox:checked + #chat-container {
    bottom: 20px;
}

#chat-bot-checkbox:checked + #chat-container .chat-bot-switch {
    top: 0;
    right: 10px;
    background: url(/common/img/chat/chat-bot-switch02.png);
}

.chat-bot-ttl {
    padding: 2%;
    margin-bottom: 4px;
    color: #333;
    font-family: 'lato';
    font-weight: bold;
    font-size: 1.4em;
    text-align: center;
    border-bottom: 1px solid #990000;
}

.chat-ex {
    display: none;
}
#chat-bot-checkbox:checked + #chat-container .chat-ex {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.chat-ex li {
    width: calc(50% - 4px);
    background: #990000;
    color: #fff;
    border-radius: 5px;
    padding: 0.5em 1em;
    font-size: 80%;
    margin: 0 4px 4px 0;
    cursor: pointer;
}

.chat-content.bot span .chat-ex li {
    background: #385865;
}

#chat-box {
    height: 100vh;
    max-height: 450px;
    overflow-y: auto;
    border-bottom: 1px solid #990000;
    margin-bottom: 10px;
    padding: 5px 0;
}
#chat-inputarea {
    display:flex;
}
#chat-input {
    flex-grow: 1;
    height: 22px;
    padding: 6px;
    margin-right: 6px;
    border: 1px solid #990000;
    border-radius: 4px;
    background: #ffffff;
}
#send-btn {
    width: 20%;
    height: 36px;
    color: #000;
    border: 1px solid #990000 ;
    border-radius: 4px;
    background: #ffc8c8;
}

.chat-message {
    display: flex;
}
.chat-message.bot {
    justify-content: flex-end;
    flex-direction: row-reverse;
}
.chat-message img {
    width: 40px;
    height: 40px;
    margin: 0.2em;
}
.chat-content {
	position:relative;
    padding: 0.5em;
    width: 80%;
    border-radius: 10px;
}

.chat-content.user {
    background: #ccc;
    margin: 0.3em auto 0.3em 0;
}

.chat-content.user:after {
    content: "";
    position: absolute;
    top: 1em;
    left: -5px;
    width: 10px;
    height: 10px;
    background: #ccc;
    transform: translate(0, -50%) rotate(45deg);
}

.chat-content.bot {
    background: #d2e0b1;
    margin: 0.3em 0 0.3em auto;
}

.chat-content.bot:after {
	content:"";
	position:absolute;
    top: 1em;
    right: -5px;
    width: 10px;
    height: 10px;
    background: #d2e0b1;
    transform: translate(0, -50%) rotate(45deg);
}

/* ---------------- メディアクエリ ---------------- */

@media screen and (max-width: 768px) {
	#chat-container {
	    bottom: -73.2%;
	}
	#chat-bot-checkbox:checked + #chat-container .chat-bot-switch {
	    top: -33px;
	}
/* ---------------- メディアクエリ ---------------- */
}