@charset "UTF-8";
/*初期設定CSS*/
.l_chatbot{
  color:#333;
  font:400 14px "Helvetica Neue", "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, メイリオ, Meiryo, sans-serif;
  line-height:1.6;
  letter-spacing: 1px;
}
[v-cloak]{
  display: none;
}
/* ================
module
================*/
/* チャットボットラッパー */
.m_chatbotWrap{}
@media screen and (max-width: 768px){
  .m_chatbotWrap{
    display: none;
  }
}
/* チャットボット */
.m_chatbot{
  position: fixed;
  bottom: 0;
  z-index: 100000;
  right: 0;
  width: 320px;
}
.m_chatbot__open{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 32px;
  line-height: 1;
  color: inherit;
  font-weight: bold;
  transform: translateY(-100%);
}
.m_chatbot__open:hover{}
.m_chatbot__open::after{
  content: url("/resource/img/new_bup/chatbot/up-arrow.png");
  margin-left: 12px;
}
.m_chatbot__open--colorTheme{
  background: #008cff;
  color: #fff;
}
.m_chatbot__inner{
  overflow: hidden;
}
.m_chatbot__item{
  position: relative;
  height: 520px;
  border: 1px solid;
  overflow: hidden;
}
.m_chatbot__item--colorTheme{
  background: #aedeff;
}
.m_chatbot__item--top{
  height: auto;
  border: none;
}
.m_chatbot__thumbnail{
  display: block;
  line-height: 0;
}
.m_chatbot__thumbnail:hover{}
.m_chatbot__thumbnail img{
  width: 100%;
  height: auto;
}
.m_chatbot__header{
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
.m_chatbot__headerSub{
  flex: 0 0 32px;
  display: flex;
  height: 32px;
}
.m_chatbot__prev{}
.m_chatbot__prev:hover{
  opacity: .7;
}
.m_chatbot__prev::before{
  content: url("/resource/img/new_bup/chatbot/return.png");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #fff;
  line-height: 0;
}
.m_chatbot__ttl{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  letter-spacing: 0;
  font-size: 13px;
}
.m_chatbot__ttl--colorIns{
  background: #e5002d;
  color: #fff;
}
.m_chatbot__close{}
.m_chatbot__close:hover{
  opacity:.7;
}
.m_chatbot__close::before{
  content: url("/resource/img/new_bup/chatbot/close.png");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  line-height: 0;
  background: #333;
}
.m_chatbot__close--top::before{
  background: #999;
}
.m_chatbot__cont{
  padding: 24px 12px;
}
.m_chatbot__answer{
  position: relative;
  margin-left: 64px;
  padding: 8px;
  border-radius: 0 12px 12px 12px;
  background: #fff;
  font-size: 13px;
}
.m_chatbot__answer::before{
  content: url("/resource/img/new_bup/chatbot/icon.png");
  position: absolute;
  top: -8px;
  left: -64px;
  display: block;
}

.m_chatbot__answer::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(to left bottom, #fff 50%, rgba(255, 255, 255, 0) 0);
  transform: translateX(-100%);
}
.m_chatbot__answer + .m_chatbot__answer{
  margin-top: 24px;
}
.m_chatbot__answer p + p{
  margin-top: 12px;
}
.m_chatbot__answer a{
  text-decoration: underline;
}
.m_chatbot__answer a:hover{
  text-decoration: underline;
}
.m_chatbot__answer--colorTheme a{
  text-decoration: underline;
  color: #0033cc;
}
.m_chatbot__answer--colorTheme a:hover{
  text-decoration: underline;
  color: #cc9900;
}
.m_chatbot__answer + .m_chatbot__question{
  margin-top: 12px;
}
.m_chatbot__answerInner{
  max-height: 400px;
  overflow: auto;
}
.m_chatbot__question{
  position: relative;
  margin-right: 16px;
  padding: 16px 12px;
  border-radius: 12px 0 12px 12px;
}
.m_chatbot__question::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -23px;
  width: 12px;
  height: 10px;
  transform: translateX(-100%);
}
.m_chatbot__question--colorUser{
  background: #0a3b77;
}
.m_chatbot__question--colorUser::after{
  border-color: #00b9a7;
  background: linear-gradient(to right bottom, #0a3b77 50%, rgba(255, 255, 255, 0) 0);
}
.m_chatbot__listItem + .m_chatbot__listItem{
  margin-top: 8px;
}

.m_chatbot__selector{
  position: relative;
  display: block;
  padding: .2em 24px .2em .5em;
  color: inherit;
  letter-spacing: 0;
  background: #fff;
}
.m_chatbot__selector:hover{
  font-weight: bold;
}
.m_chatbot__selector:hover::after{
  content: url("/resource/img/new_bup/chatbot/go.png");
  position: absolute;
  top: 50%;
  right: 4px;
  display: block;
  line-height: 0;
  transform: translateY(-50%);
}
.m_chatbot__selector--colorUser:hover{
  background: #008cff;
  color: #fff;
}
.m_chatbot__footer{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
.m_chatbot__toTop{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 32px;
  line-height: 1;
  color: inherit;
  font-weight: bold;
}
.m_chatbot__toTop--colorTheme{
  background: #008cff;
  color: #fff;
}
.m_chatbot__keyword{
  display: flex;
  align-items: stretch;
  border-radius: 2px;
  overflow: hidden;
}
.m_chatbot__inputField{
  flex: 1 1 auto;
  display: block;
  width: 100%;
  height: 24px;
  border: none;
  border-radius: 0;
  outline: none; 
  background: #fff;
  line-height: 24px;
  text-indent: .5em;
  box-sizing: border-box;
}
.m_chatbot__searchBtn{
  flex: 0 0 24px;
  display: block;
  background: url("/resource/img/new_bup/chatbot/search.png") no-repeat center center, #fff;
}
/* ================
state
================*/
.js_chatbot{
  transition: .5s all;
}
.js_chatbot--isHide{
  transform: translateY(100%);
}
.js_chatbot__body-enter-active,
.js_chatbot__body-leave-active{
  transition: .5s transform, .5s opacity;
}
.js_chatbot__body-leave-active{
  position: absolute;
  visibility: hidden;
}
.js_chatbot__body-enter{
  opacity: 0;
}
.js_chatbot__body-enter{
  transform: translateX(100%);
}
.js_chatbot__body-leave-to{
  transform: translateX(-100%);
}
.js_chatbot__body-enter.js_chatbot__body--rev{
  transform: translateX(-100%);
}
.js_chatbot__body-leave-to.js_chatbot__body--rev{
  transform: translateX(100%);
}