@charset "UTF-8";
#answerChan {
  visibility: hidden;
  opacity: 0;
  transition: 0.4s linear;
  position: fixed;
  right: 50px;
  bottom: 16px;
  width: 50px;
  height: 50px;
  z-index: 99999; }
  #answerChan .bubbleButton {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 50px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    background-color: #2faa3b;
    text-align: center;
    font-size: 20px;
    color: #05479b;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
    transition: 0.1s linear; }
    #answerChan .bubbleButton:hover {
      color: #f0e8e4; }
    #answerChan .bubbleButton .question, #answerChan .bubbleButton .arrowDown {
      position: absolute;
      width: 30px;
      height: 30px;
      transition: 0.2s linear; }
    #answerChan .bubbleButton .arrowDown {
      opacity: 0;
      margin-top: 3px; }
  #answerChan .menuBlock, #answerChan .chatBlock {
    visibility: hidden;
    opacity: 0;
    transition: 0.2s linear;
    position: fixed;
    right: 54px;
    bottom: 86px;
    background: #fff;
    box-shadow: rgba(150, 150, 150, 0.2) 0px 10px 30px 0px, rgba(150, 150, 150, 0.2) 0px 0px 0px 1px;
    width: 24rem;
    max-width: calc(100vw - 36px); }
    #answerChan .menuBlock::before, #answerChan .chatBlock::before {
      content: "";
      position: absolute;
      bottom: 0;
      right: 1px;
      border-style: solid;
      border-width: 16px 10px 0 10px;
      border-color: #aaa transparent transparent;
      translate: -50% 100%; }
    #answerChan .menuBlock::after, #answerChan .chatBlock::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 2px;
      border-style: solid;
      border-width: 15.2px 9.5px 0 9.5px;
      border-color: #ffffff transparent transparent;
      translate: -50% 100%; }
  #answerChan .menuBlock ul {
    width: 100%; }
    #answerChan .menuBlock ul li {
      width: 100%;
      text-align: left;
      border-bottom: solid 1px #c4d1d9; }
      #answerChan .menuBlock ul li:last-child {
        border-bottom: none; }
      #answerChan .menuBlock ul li a, #answerChan .menuBlock ul li button {
        box-sizing: border-box;
        min-height: 60px;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 1.4em;
        color: #444;
        font-size: 14px;
        font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック体", "Yu Gothic", YuGothic, "sans-serif"; }
        #answerChan .menuBlock ul li a:hover, #answerChan .menuBlock ul li button:hover {
          background: #cbe8cc;
          color: #444;
          text-decoration: none; }
        #answerChan .menuBlock ul li a .icon, #answerChan .menuBlock ul li button .icon {
          display: inline-block;
          width: 24px;
          height: 24px;
          vertical-align: middle; }
      #answerChan .menuBlock ul li button {
        position: relative;
        min-height: 70px;
        text-align: left;
        appearance: none;
        border: none;
        background: none;
        cursor: pointer; }
        #answerChan .menuBlock ul li button .icon {
          margin-right: 4px; }
        #answerChan .menuBlock ul li button .aiChat {
          display: block;
          margin-bottom: 2px;
          padding: 1px 0 0;
          width: 86px;
          background-color: #2faa3b;
          border-radius: 9px;
          color: #fff;
          text-align: center;
          font-size: 13px;
          line-height: 18px; }
        #answerChan .menuBlock ul li button .answerChanIcon {
          display: inline-block;
          width: 38px;
          height: 38px;
          margin-left: 12px;
          vertical-align: middle; }
  #answerChan .chatBlock {
    height: 40rem;
    max-height: calc(100dvh - 100px); }
    #answerChan .chatBlock iframe {
      width: 100%;
      height: 100%;
      border: none; }
  #answerChan[data-state] {
    visibility: visible;
    opacity: 1; }
  #answerChan:not([data-state="closed"]) .bubbleButton .question {
    opacity: 0; }
  #answerChan:not([data-state="closed"]) .bubbleButton .arrowDown {
    opacity: 1; }
  #answerChan[data-state="opened-menu"] .menuBlock {
    visibility: visible;
    opacity: 1; }
  #answerChan[data-state="opened-chat"] .chatBlock {
    visibility: visible;
    opacity: 1; }

@media only screen and (max-width: 767px) {
  #answerChan {
    right: 16px;
    bottom: 16px; }
    #answerChan .bubbleButton {
      right: 16px;
      bottom: 16px; }
    #answerChan .menuBlock, #answerChan .chatBlock {
      right: 18px;
      bottom: 85px; } }