#chat-container {
  width: 400px;
  border: 1px solid #ccc;
  overflow: hidden;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  height: 500px; /* 必要に応じて調整 */
  background-color: #f9f9f9; /* シンプルな背景色 */
  display: none; /* 初期状態で非表示 */
  position: fixed; /* 必要に応じて固定表示 */
  bottom: 20px;
  right: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000; /* 他の要素より前面に表示 */
  flex-direction: column;
  font-size: 14px;
}
#chat-header {
  background-color: #000;
  height: 30px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  font-size: 14px;
}
#close-btn-naka {
  cursor: pointer;
  font-size: 20px;
}
#chat-history {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
}

.user-message {
  background-color: #cdf5e8; /* 薄い背景色 */
  color: #000;
  padding: 8px 12px;
  margin: 0 auto 1rem;
  border-radius: 5px;
  text-align: right;
  word-break: break-word;
  align-self: flex-end; /* 右寄せ */
  max-width: 90%; /* 長文で幅を取りすぎないように */
}

.bot-message {
  background-color: #f0f0f0; /* 薄い背景色 */
  color: #000;
  padding: 8px 12px;
  margin: 0 auto 1rem;
  border-radius: 5px;
  text-align: left;
  word-break: break-word;
  align-self: flex-start; /* 左寄せ */
  max-width: 90%;
  display: flex;
}

.user-message .icon {
  display: none;
}

.bot-message .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 16px;
  border-radius: 50%;
  background-color: #aed581; /* アイコンの背景色 */
  color: white;
  margin-right: 5px;
  vertical-align: middle;
  flex: 0 0 24px;
}

.interaction-area {
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.question {
  display: none;
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.options button {
  background-color: #00bfa5; /* フラットなボタンの背景色 */
  border: none;
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  flex-grow: 1; /* ボタンの幅を均等にする */
  text-align: center;
}

.options button:hover {
  opacity: 0.7;
}

.answer-area {
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #eee;
  font-style: italic;
  color: #777;
  margin-top: 10px;
  text-align: left;
}

.bot-message > span:not(.icon) {
  flex-grow: 1;
  text-align: left;
  opacity: 0; /* 初期状態を非表示 */
  animation: fadeIn 0.5s forwards; /* フェードインアニメーションを適用 */
}

.user-message > span:not(.icon) {
  flex-grow: 1;
  text-align: right;
  opacity: 0; /* 初期状態を非表示 */
  animation: fadeIn 0.5s forwards; /* フェードインアニメーションを適用 */
}
input[type="text"]{
  padding: .4rem;
  margin-top: .4rem;
}

@media screen and (max-width: 740px) {

}

@keyframes slightShake {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  90% {
    transform: translateX(0) rotate(0deg);
  }
  100% {
    transform: translateX(3px) rotate(2deg);
  }
}
@keyframes fadeIn {
  to {
    opacity: 1; /* 最終的に表示 */
  }
}
@keyframes arcMove {
  0% {
    transform: translate(
      0,
      0
    ); /* 開始位置 (要素の初期位置からの相対移動なし) */
    opacity: 1; /* 必要であれば初期表示 */
  }
  50% {
    transform: translate(-500px, -100px); /* 下方向に円弧の中間点 */
    /* opacity: 1; */
  }
  100% {
    transform: translate(0, 0); /* 最終的な右方向の位置 */
  }
}