#chatbot-toggle {
 position: fixed;
 bottom: 10px;
 right: 10px;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 8px;
 width: 200px;
 height: 45px;
 /*font-size: 24px;*/
 cursor: pointer;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 z-index: 99;
}

#close-btn {
 background: none;
 border: none;
 color: white;
 font-size: 20px;
 cursor: pointer;
}
#close-btn span {
 font-size: 30px;
 text-align: right;
 position: absolute;
 right: 12px;
 top: -4px;
}

#chatbot-toggle:hover {
 background-color: #0056b3;
}

#chatbot {
 position: fixed;
 bottom: 10px;
 right: 10px;
 width: 320px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 border-radius: 10px;
 overflow: hidden;
 display: none;
 flex-direction: column;
 background-color: #ffffff; /* 背景色を白に設定 */
 z-index: 99;
}

#chatbot-header {
 background-color: #007bff;
 color: white;
 padding: 10px 20px;
 /*text-align: center;*/
}

#chatbot-body {
 background-color: white;
 padding: 10px;
 height: 300px;
 /*max-height: 50vh;*/
 overflow-y: auto;
 border-bottom: 1px solid #ddd;
 background-color: #ffffff; /* 背景色を白に設定 */
}

#chatbot-footer {
 display: flex;
 padding: 10px;
 background-color: #f9f9f9;
}

#user-input {
 flex: 1;
 padding: 10px;
 border: 1px solid #ddd;
 border-radius: 5px;
 margin-right: 10px;
}

#send-btn {
 background-color: #007bff;
 color: white;
 border: none;
 padding: 10px;
 border-radius: 5px;
 cursor: pointer;
}

#send-btn:hover {
 background-color: #0056b3;
}

.chat-message {
 margin: 10px 0;
 padding: 10px;
 border-radius: 5px;
 max-width: 85%;
 word-wrap: break-word;
}
.chat-message ul li {
 border: solid #ccc 1px;
 border-radius: 8px;
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
 padding: 5px;
 text-align: center;
 margin: 5px;
}

.chat-message ul li:hover {
 background: #505050;
 color: #fff;
 cursor: pointer;
}

.chat-message ul li a:hover {
 color: #fff;
}

.user-message {
 margin: 10px 5px 10px 30px;
 /*background-color: #dcf8c6;*/
 background-color: #d4e9fb;
 align-self: flex-end;
}

.bot-message {
 margin: 10px 30px 10px 5px;
 background-color: #f1f1f1;
 align-self: flex-start;
 border-radius: 5px;
 padding: 10px;
}


@media (max-width:469px) {
 #chatbot {
  width: 100%;
  height: 100%;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  display: none;
  z-index: 10000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
 }
 #chatbot-toggle {
  bottom: 7%;
  right: 5px;
  width: 100px;
  padding: 5px;
  height: 50px;
  font-size: 13px;
  z-index: 98;
  font-weight: bold;
 }
 #chatbot-footer {
  bottom: 0;
  position: absolute;
  width: 95%;
 }
 #chatbot-body {
  padding: 10px;
  height: 85%;
  max-height: 100%;
 }
}