@charset "UTF-8";

.agent-popup-wrapper .agent-popup__link {
  white-space: normal !important;
}
.agent-popup-wrapper .agent-popup__link {
   background-color: #b3f2ff !important;
  /* 起動背景色 */
}

.agent-public-content {
  position: relative;
  padding: 10px 15px;
  border: 1px solid #d3d3d3;
  /* チャット枠色 */
  border-top: 0;
  background-color: #fff;
}

.agent-public-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: calc(100% + 2px);
  height: 4px;
  background-color: #5db8cb;
  /* 上部帯色 */
}

.agent-public-content .agent-public-header {
  position: relative;
  padding: 15px 10px 15px 26px;
}

.agent-public-content .agent-public-header h2 {
  font-size: 1rem;
}

.agent-public-content .agent-public-header::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: #70dd53;
  /* #1e88e5 */
}

.agent-public-content .agent-public-header::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 12px;
  width: 8px;
  height: 8px;
  background-color: #43ca20;
  /* #42a5f5 */
}

.agent-public-content .agent-public-body {
  padding: 0;
}

.agent-public-content .agent-public-body ul {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: stretch;
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
}

.agent-public-content .agent-public-body ul li {
  flex-basis: calc(100% - 2px);
  width: calc(100% - 2px);
  padding: 0;
}

.agent-public-content .agent-public-body ul li a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px 0;
  text-align: center;
  text-decoration: none !important;
  color: #333;
  background-color: #a4ed91;
  border-radius: 6px;
  /* カテゴリ背景 */
}

.agent-public-content .agent-public-body ul li a:hover,
.agent-public-content .agent-public-body ul li a:focus {
  color: #fff;
  background-color: #2d871b;
  /* カテゴリhover */
}

.agent-public-content .agent-public-body ul li a img {
  display: block;
  width: 70px;
  margin: 0 auto 10px;
}

@media screen and (max-width: 960px) {
  .agent-wrapper.agent-wrapper--popup.agent-wrapper--expand .agent-content-wrapper .agent-content .agent-dialogue {
    height: calc(100dvh - 25px) !important;
  }
}

@media screen and (max-width: 480px),
(min-width: 961px) {
  .agent-wrapper.agent-wrapper--popup.agent-wrapper--expand .agent-content-wrapper .agent-content .agent-dialogue {
    height: calc(100dvh - 116px) !important;
  }
}