@charset "utf-8";
/* CSS Document */

/* ////////////////////////////////////////
  marchat reset
//////////////////////////////////////// */
#marchat_area,
#marchat_area *,
#marchat_area_open,
#marchat_area_open * {
  margin: 0;
  padding: 0;
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
  font-family: -apple-system, "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
}
#marchat_area::before,
#marchat_area::after,
#marchat_area *::before,
#marchat_area *::after,
#marchat_area_open::before,
#marchat_area_open::after,
#marchat_area_open *::before,
#marchat_area_open *::after {
  margin: 0;
  padding: 0;
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/* ////////////////////////////////////////
  初期バー
//////////////////////////////////////// */
/*
#marchat_area_open {
  position: fixed;
  left:0px;
  bottom: 10%;
  z-index: 2147483646;
  width:60%;
  background-image:url(../img/mct-boot_sp.png);
  background-size:100% auto;
  transition: all .3s;
}
#marchat_area_open:before {
	content:"";
	display:block;
	padding-bottom:21.23%;
}
#marchat_area_open.min {
	left:-53.7%;
}

#marchat_area_open a.btn_marchat_open {
  display:block;
  position:absolute;
  top:0;
  left:0;
  
  width:90%;
  height:100%;
}
*/
#marchat_area_open a.marchat_area_open_close {
  display:block;
  position:absolute;
  top:0;
  right:0;
  
  width:35px;
  height:35px;
  border-radius:50%;
  background-color:rgba(0,0,0,0.2);
  z-index:15;
  transition: transform .3s;
}
#marchat_area_open a.marchat_area_open_close:before {
	content:"×";
	display:block;
	color:#FFF;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-decoration:none;
	font-size:28px;
}
#marchat_area_open a.mini_btn {
	display:none;
}

#marchat_area_open.min {
	    right:-10px;
    	
	transition: transform .3s;
}
#marchat_area_open.min:hover {
	    right:0px;
    }
#marchat_area_open.min a.btn_marchat_open {
	display:block;
	width:55px;
	height:55px;
	    border-radius:50% 0 0 50%;
	background-position:10px 15px;
    	background-color: #80a1d4;
	background-image:url(../img/fukidashi.svg);
	background-size: 30px auto;
	background-repeat:no-repeat;
	
}
#marchat_area_open.min a.marchat_area_open_close {
	display:none;
}
#marchat_area_open.min .fluid-wrap {
	display:none;
}

/* ////////////////////////////////////////
  ウィンドウ
//////////////////////////////////////// */
#marchat_area {
  width: 100%;
  height: 100%;
  background-color: rgba(230,236,246,.95);
  overflow: hidden;
  position: fixed;
  
    right: 0px;
  /* 最初は画面外（左下）に隠しておく */
  -webkit-transform: translate(200%, 100%) scale(0);
  transform: translate(200%, 100%) scale(0);
    
    bottom: 0px;
    
  z-index: 2147483647;
  box-shadow: 0 0 7px rgba(0,0,0, .2);
  opacity: 1;

}

#marchat_area.open { /* 展開。元の位置へ。 */

  -webkit-transform: translate(0,0) scale(1);
  transform: translate(0,0) scale(1);
  transition: transform .3s;
  
}
#marchat_area.opened { /* #marchat_area本体をtransitionするとサイト表示時にアニメーションするので、JSで後付け */
  transition: transform .3s;
}
@media screen and ( min-width: 769px ) { /* タブレット以上のサイズ */
  #marchat_area { /* ウィンドウの最大サイズ */
    max-width: 380px;
    max-height: calc(100vh - 100px - 70px);
	    bottom: 70px;
      }
}

/* header */
#marchat_area #marchat_header {
  width: 100%;
  height: 35px;
  background-color: #fff;
  box-shadow: 0 2px 2px rgba(0,0,0, .1);
  position:absolute;
  top:0;
  z-index: 9000;
}
#marchat_area #marchat_header .name {
  display: block;
  width:calc(100% - 200px);
  text-align:center;
  color: #666;
  font-size: 12px;
  width: calc(100% - 50px - 80px);
  position:absolute;
  top:12px;
  left:50px;
  line-height:1em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#marchat_area #marchat_header .logo { /* logo */
  position: absolute;
  top: 10px;
  right: 10px;
  width:70px;
}
#marchat_area #marchat_header .logo img {
	vertical-align:top;
	height:13px;
}
#marchat_area #marchat_header .marchat_head_btn { /* ボタン */
  position: absolute;
  bottom: -16px;
  right: 10px;
  width:100px;
  text-align:right;
}
#marchat_area #marchat_header .marchat_head_btn a {
	text-decoration:none;
	font-size:10px;
	padding:2px 5px;
	margin-left:3px;
	border:solid 1px #0000FF;
	background-color:#00F;
	color:#FFF;
	border-radius:3px;
}
#marchat_area #marchat_header .close { /* ×ボタンベース */
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  box-shadow: 3px 3px 3px rgba(0,0,0, .15);
  background-image: linear-gradient(to right, #80A1D4, #8CDEDC);
  position: absolute;
  top: -45px;
  left: -45px;
  z-index: 9999;

  /* 最初は隠しておく */
  -webkit-transform: translate(-45px, -45px) scale(0);
  transform: translate(-45px, -45px) scale(0);
  transition: all .3s;
  transition-delay: .4s; /* ウィンドウが開いた後に動かす */
}
#marchat_area #marchat_header .close::before { /* ×ボタンアイコン */
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: transparent url(../img/icon_close.svg) center center no-repeat;
  position: absolute;
  right: 20px;
  bottom: 18px;
}
#marchat_area.open #marchat_header .close { /* ウィンドウ展開時、元の位置へ */
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
}

/* outline */
#marchat_area #marchat_outline {
  position: relative;
  width: 100%;
  height: 100%;
}
#marchat_area #marchat_outline_scenario {
  position: relative;
  width: 100%;
  height: 100%;
}


/* //////
  メッセージ領域
///// */
/* チャットメッセージを流し込む領域 */
#marchat_area #ai_chat_message {
  width: 100%;
  height: calc(100% - 45px); /* ヘッダと入力ボタンの高さを除く */
  /*max-height: calc(100% - 35px - 45px);*/
  overflow-y:scroll; /* 縦スクロールのみ許可 */
  /*padding: 15px 0;*/
  padding: 50px 0 30px;
}
/* PC webkitのみスクロールバー装飾 */
@media screen and ( min-width: 769px ) {
  #marchat_area #ai_chat_message::-webkit-scrollbar {
    width: 4px;
  }
  #marchat_area #ai_chat_message::-webkit-scrollbar-track {
    background-color: rgba(230,236,246,.95);
  }
  #marchat_area #ai_chat_message::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 2px;
  }
}


#marchat_area #ai_chat_message,
#marchat_area #ai_chat_message a { font-size:90%; }
#marchat_area #ai_chat_message a { color:#36F; text-decoration:none; }
#marchat_area #ai_chat_message a:hover { text-decoration:underline; }
/*
#marchat_area #ai_chat_outline * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
*/
#marchat_area #ai_chat_message .pause {
  margin:5px 15px;
  padding:5px 10px;
  border-radius:30px;
  background-color:#FFF;
  position:relative;
  display:inline-block;
  min-height:20px;
  line-height:1.4em;
  text-align:center;
  margin-right:12%;
  margin-left:50px;
  font-weight:bold;
  color:#469DB8;
}
#marchat_area #ai_chat_message .system {
  margin:15px 15px;
  padding:5px 5px;
  text-align:center;
  color:#aaa;

  /* 「管理者テストモード」メッセージの表示・非表示 */
  /*display:none;*/

}
#marchat_area #ai_chat_message .system span {
  margin-left:10px;
}
#marchat_area #ai_chat_message .system.intent_confidence {
  margin:0 15px;
  padding:0 5px;
  text-align:right;
  font-size:80%;
}
#marchat_area #ai_chat_message .system.intent_confidence span {
  display:block;
  padding:1px 10px;
}
#marchat_area #ai_chat_message .system.intent_confidence span b {
  font-weight:normal;
  background-color:#696969;
  color:#FFF;
  padding:0px 6px;
  border-radius:20px;
  margin-right:5px;
}

#marchat_area #ai_chat_message .sys {
  display:none;
}
#marchat_area #ai_chat_message .msg {
  margin:5px 15px;
  padding:10px 10px;
  border-radius:30px;
  background-color:#FFF;
  position:relative;
  display:inline-block;
  min-height:20px;
  line-height:1.43em;
  text-align:left;

  /* 追加 */
  font-size: 16px;
}
#marchat_area #ai_chat_message .msg a {
	font-size: 16px;
}
@media screen and ( min-width: 769px ) {
	#marchat_area #ai_chat_message .msg {
		font-size: 14px;
	}
	#marchat_area #ai_chat_message .msg a {
		font-size: 14px;
	}
}
#marchat_area #ai_chat_message .msg img {
  margin:15px 0;
}
#marchat_area #ai_chat_message .msg iframe {
  max-width:100%;
  margin:15px 0;
}

/* from_area */
#marchat_area #ai_chat_message .from_area {
  text-align:left;
}
#marchat_area #ai_chat_message .msg.from {
  margin-right:12%;
  background-color:#FFF;
  
  margin-left: 60px;
  border-radius: 0 25px 25px 25px;
}
#marchat_area #ai_chat_message .msg.from b {
	font-weight:bold;
}
#marchat_area #ai_chat_message .msg.from::before {
  content:"";
  display:block;
  position:absolute;
  top:0px;
  z-index:8;

  background-image: url(/img/face/001/1.png);
  background-size: 40px auto;
  width: 40px;
  height: 60px;
  left: -50px;
  opacity:0;
}

#marchat_area #ai_chat_message .from_area .msg.from:first-child:before {
	display:block;
	opacity:1;
}



#marchat_area #ai_chat_message .msg.from.face1::before { background-image: url(/img/face/001/1.png); }
#marchat_area #ai_chat_message .msg.from.face2::before { background-image: url(/img/face/001/2.png); }
#marchat_area #ai_chat_message .msg.from.face3::before { background-image: url(/img/face/001/3.png); }
#marchat_area #ai_chat_message .msg.from span.face {
  position:absolute;
  background-size:30px 30px;
  width:30px;
  height:30px;
  top:0px;
  left:-45px;
  z-index:9;
}
#marchat_area #ai_chat_message .msg.from span.face.sad {
  background-image:url(../img/icn_sad.svg);
}
#marchat_area #ai_chat_message .msg.from span.face.happy {
  background-image:url(../img/icn_happy.svg);
}

#marchat_area #ai_chat_message .msg.from:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 12px; 
    left: -14px;
    border: 6px solid transparent;
    border-right: 15px solid #FFF;
    -ms-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);

    /* 追加 */
    display: none;
}

/* from_area 初回メッセージ用 */
#marchat_area #ai_chat_message .from_area.first {
  min-height: 170px;
  position: relative;
}
#marchat_area #ai_chat_message .from_area.first::before { /* chara */
  content: '';
  display: block;
  width: 120px;
  height: 150px;
  background: transparent url(/img/face/001/0.gif) 0 0 no-repeat; 
  background-size: 120px auto;
  position: absolute;
  top: 0;
  left: 5px;
  -webkit-transform: translateX(-150px);
  transform: translateX(-150px);
  transition: transform .3s;
  transition-delay: .4s;
}
#marchat_area #ai_chat_message .from_area.first .msg.from {
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 130px; /* chara + margin */
  opacity: 0;
  transition: opacity .3s;
  transition-delay: 1s;
}
#marchat_area #ai_chat_message .from_area.first .msg.from:before {
  visibility: hidden;
}
/* active */
#marchat_area #ai_chat_message .from_area.first.active::before {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
#marchat_area #ai_chat_message .from_area.first.active .msg.from {
  opacity: 1;
}
#marchat_area #ai_chat_message .from_area.first.active .msg.from:before {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

/* to_area */
#marchat_area #ai_chat_message .to_area {
  text-align:right;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#marchat_area #ai_chat_message .msg.to {
  margin-left:12%;
  background-color:#469DB8;
  color:#FFF;

  /* 追加 */
  font-weight: bold;
  border-radius: 18px 0 18px 18px;
  padding: 10px 20px;
}
#marchat_area #ai_chat_message .msg.to:after {
  content: "";
    position: absolute;
    top: 5px; 
    right: -13px;
    border: 6px solid transparent;
    border-left: 15px solid #469DB8;
    -ms-transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);

  /* 追加 */
  display: none;
}

#marchat_area #ai_chat_message .msg.err {
  color:#F33;
}
#marchat_area #ai_chat_message .msg.last {

}
#marchat_area #ai_chat_message .msg.from.last {

}
#marchat_area #ai_chat_message .msg.to.last {
  -webkit-animation: to-last-zoom .25s 1;
  animation: to-last-zoom .25s 1;
}
@keyframes to-last {
  0% {
    transform: skewX(5deg) skewY(5deg);
  }
  15% {
    transform: skewX(-8deg) skewY(-8deg);
  }
  30% {
    transform: skewX(5deg) skewY(5deg);
  }
  45% {
    transform: skewX(0) skewY(0);
  }
  100% {
    transform: skewX(0) skewY(0);
  }
}
@-webkit-keyframes to-last-zoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  15% {
    opacity: .1;
    transform: scale(.25);
  }
  30% {
    opacity: .2;
    transform: scale(.5);
  }
  50% {
    opacity: .3;
    transform: scale(1.2);
  }
  75% {
    opacity: .5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes to-last-zoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  15% {
    opacity: .1;
    transform: scale(.25);
  }
  30% {
    opacity: .2;
    transform: scale(.5);
  }
  50% {
    opacity: .3;
    transform: scale(1.2);
  }
  75% {
    opacity: .5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#marchat_area #ai_chat_message .msg p {
  margin:0px 0px;
  line-height:1.4em;
}
#marchat_area #ai_chat_message .msg ul {
  margin:5px 5px;
  padding:0;
}
#marchat_area #ai_chat_message .msg ul li {
  list-style:none;
  display:block;
  margin-top:5px;
}
#marchat_area #ai_chat_message .msg ul li a {
  display:block;
  padding:5px 10px 5px 20px;
  background-color:#469DB8;
  color:#FFF;
  border-radius:5px;
  text-decoration:none;
  position:relative;
  box-shadow:0px 1px 2px rgba(0,0,0,.3);
}
#marchat_area #ai_chat_message .msg ul li a:before {
  content:"▸";
  position:absolute;
  left:5px;
}

#marchat_area #ai_chat_message .marchat_form input[type="text"],
#marchat_area #ai_chat_message .marchat_form input[type="email"],
#marchat_area #ai_chat_message .marchat_form input[type="tel"],
#marchat_area #ai_chat_message .marchat_form textarea {
  width:100%;
  border:solid 1px #999999;
  border-radius:4px;
  padding:3px 5px;
  margin:5px 0 0;
}
#marchat_area #ai_chat_message .marchat_form textarea {
  height:60px;
}
#marchat_area #ai_chat_message .marchat_form .send_area {
  display:block;
  text-align:center;
  color:#00C;
  padding:5px 0;
  font-weight:bold;
}
#marchat_area #ai_chat_message .marchat_form .send_area input[type="button"]{
  border:solid 1px #999999;
  display:block;
  width:60%;
  background-color:#efefef;
  border-radius:4px;
  padding:3px 10px;
  margin:5px auto;
  color:#000;
  font-weight:normal;
}


#marchat_area #ai_chat_message .marchat_form input::placeholder,
#marchat_area #ai_chat_message .marchat_form textarea::placeholder {
  color:#CCC;
}
#marchat_area #ai_chat_message .marchat_form input:-ms-input-placeholder,
#marchat_area #ai_chat_message .marchat_form textarea:-ms-input-placeholder {
  color:#CCC;
}
#marchat_area #ai_chat_message .marchat_form input::-ms-input-placeholder,
#marchat_area #ai_chat_message .marchat_form textarea::-ms-input-placeholder {
  color:#CCC;
}

#marchat_area #ai_chat_message .from_load_area {
  text-align:left;
  /*min-height:50px;*/
  position:relative;
}
#marchat_area #ai_chat_message .from_load_area .msg.from {
  /*background-color:transparent;*/
  width:100px;
  height:45px;
}
#marchat_area #ai_chat_message .from_load_area .msg.from:after {
  /*display:none;*/
}


#marchat_area #ai_chat_message .loader,
#marchat_area #ai_chat_message .loader:before,
#marchat_area #ai_chat_message .loader:after {
  border-radius: 50%;
  width: 7px;
  height: 7px;
  
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;

  z-index:9999;
}
#marchat_area #ai_chat_message .loader {
  color: #7b7b7b;
  font-size: 8px;
  position: absolute;
  top:15px;
  left:calc(65px + 40px);
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  
}
#marchat_area #ai_chat_message .loader:before,
#marchat_area #ai_chat_message .loader:after {
  content: '';
  position: absolute;
  top: 0;
}
#marchat_area #ai_chat_message .loader:before {
  left: -20px;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
#marchat_area #ai_chat_message .loader:after {
  left: 20px;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 1.0em 0 -1.0em;
  }
  40% {
    box-shadow: 0 1.0em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 1.0em 0 -1.0em;
  }
  40% {
    box-shadow: 0 1.0em 0 0;
  }
}


#marchat_area #ai_chat_message .a_serch {
  display:inline-block;
  margin-right:10px;
}
#marchat_area #ai_chat_message .snippet {
  /*font-size:90%;*/
  font-size: 80%;
  line-height:1.2em;
}
#marchat_area #ai_chat_message .snippet b {
  background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;
}


#marchat_area #ai_chat_message .query_list {
	display:inline-block;
	padding:2px 3px;
}
#marchat_area #ai_chat_message .query_list a{
	display:inline-block;
	padding:3px 5px;
	border-radius:20px;
	background-color:#469DB8;
	color:#FFF;
	text-decoration:none;
}

#marchat_area #ai_chat_message .query_list2 {
	display:block;
	padding:2px 3px;
}
#marchat_area #ai_chat_message .query_list2 a{
	display:block;
	padding:3px 10px 1px 4px;
	border-radius:5px;
	border:solid 1px #469DB8;
	background-color:#FFF;
	color:#469DB8;
	text-decoration:none;
	position:relative;
}

#marchat_area #ai_chat_message .query_list2 a:before{
	content:"";
	display:block;
	position:absolute;
	right:4px;
	top:calc(50% - 5px);
  width: 0;
  height: 0;
  border-left: 5px solid #469DB8;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}



#marchat_area #ai_chat_message_scenario {
  width: 100%;
  height: calc(100% - 35px); /* ヘッダと入力ボタンの高さを除く */
  overflow-y:scroll; /* 縦スクロールのみ許可 */
  padding: 50px 15px 30px;
  background-color:rgba(255,255,102,1.0);
  position:absolute;
  bottom:0;
  left:0;
}
/* PC webkitのみスクロールバー装飾 */
@media screen and ( min-width: 769px ) {
  #marchat_area #ai_chat_message_scenario::-webkit-scrollbar {
    width: 4px;
  }
  #marchat_area #ai_chat_message_scenario::-webkit-scrollbar-track {
    /*background-color: rgba(230,236,246,.95);*/
	background-color:rgba(255,255,102,1.0);
  }
  #marchat_area #ai_chat_message_scenario::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 2px;
  }
}
#ai_chat_message_scenario {
	max-width:768px;
	margin:0 auto;
}
#ai_chat_message_scenario dl {
	display:block;
	padding:0;
	margin:0;
}
#ai_chat_message_scenario dl dt {
	font-weight:bold;
	margin:10px 0;
	padding:10px 10px;
	background-color:#FFF;
	border-radius:10px;
}
#ai_chat_message_scenario dl dd {
	display:block;
	list-style:none;
	padding:5px 0px;
	margin:0;
	width:100%;
}
#ai_chat_message_scenario dl dd a.sentaku_btn {
	display:block;
	width:100%;
	padding:10px 10px;
	border:solid 1px #000000;
	border-radius:5px;
	position:relative;
	color:#000;
	text-decoration:none;
	overflow:hidden;
}

#ai_chat_message_scenario dl dd a.sentaku_btn img {

}
#ai_chat_message_scenario dl dd a.sentaku_btn p {
	margin:10px 10px;
}
#ai_chat_message_scenario dl dd  dl {
	display:none;
}

#ai_chat_message_scenario > dl > dd dl {
	display:none;
}
#ai_chat_message_scenario > dl dd.check > dl {
	display:block;
}



#ai_chat_message_scenario dl dd.check > a.sentaku_btn {
	background-color:#ffefff;
	border:solid 2px #FF0000;
}
#ai_chat_message_scenario dl dd.check > a.sentaku_btn:after {
	content:"選択中";
	display:block;
	position:absolute;
	background-color:#F00;
	color:#FFF;
	font-size:12px;
	bottom:-16px;
	right:-10px;
	width:50px;
	height:50px;
	padding:10px 0 0 4px;
	text-align:left;
	border-radius:50%;
}
#ai_chat_message_scenario dl dd a.sentaku_btn.last {
	display:none;
	border:solid 2px #0000FF;
	background-color:#00F;
	color:#FFF;
	
	text-align:center;
	font-size:18px;
	font-weight:bold;
	height:80px;
	line-height:80px;
	
	margin-top:5px;
}
#ai_chat_message_scenario dl dd a.sentaku_btn.last:after {
	display:none;
}
#ai_chat_message_scenario dl dd.check > a.sentaku_btn.last {
	display:block;
}





/* //////
  入力ウィンドウ
///// */
#marchat_area #ai_chat_input_box { /* 入力エリアベース */
  width: 100%;
  height: 45px;
  background-image: linear-gradient(to right, #80A1D4, #8CDEDC);
  position: relative;
  padding-top:8px;
}
#marchat_area #frmAiChat #aichat_input { /* input要素 */
  width: calc(100% - 20px);
  height: 30px;
  margin: 0 0 0 10px;
  padding-left: 15px;
  background-color: #fff;
  border-radius: 15px;
  outline: none;
  line-height: normal;
  border: none;
}
#marchat_area #frmAiChat #aichat_input:-ms-placeholder { /* ie11 */
  color: #B3B3B3;
  font-size: 14px;
}
#marchat_area #frmAiChat #aichat_input::-ms-placeholder { /* Edge */
  color: #B3B3B3;
  font-size: 14px;
}
#marchat_area #frmAiChat #aichat_input::placeholder {
  color: #B3B3B3;
  font-size: 14px;
}


/* //////
  送信ボタン
///// */
#marchat_area #frmAiChat #aichat_button_wrap { /* 装飾用wrap */
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  box-shadow: -3px -3px 3px rgba(0,0,0, .15);
  background-color: #F4AC45;
  position: absolute;
  right: -50px;
  bottom: -50px;
  z-index: 1;

  /* 最初は隠しておく */
  -webkit-transform: translate(50px, 50px) scale(0);
  transform: translate(50px, 50px) scale(0);
  transition: all .3s;
}
#marchat_area #frmAiChat #aichat_button_wrap::before { /* ルーペアイコン */
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: transparent url(../img/icon_loupe.svg) center center no-repeat;
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: -1;
}
#marchat_area #frmAiChat #aichat_button_wrap.active { /* 入力時に出現 */
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, 0) scale(1);
} 
#marchat_area #frmAiChat #aichat_button { /* 送信ボタン本体（input[type=submit]） */
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  background-color:transparent;
  border:none;
}


/* ////////////////////////////////////////
  JS用
//////////////////////////////////////// */
/*  scroll lock クラス */
/*
.marchat-scroll-lock-pc {
  overflow: hidden;
}
.marchat-scroll-lock-sp {
  overflow: hidden;
  height: 100%;
}
*/
.marchat-scroll-lock {
  overflow: hidden;
}
.marchat-scroll-lock-ios {
  overflow: hidden;
  height: 100%;
}

/*
.marchat-modal {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9998;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, .8);
  opacity: 0;
  visibility: hidden;
  transition: all .1s;
}
.marchat-modal.active {
  opacity: 1;
  visibility: visible;
}
*/

/* ////////////////////////////////////////
  ripple
//////////////////////////////////////// */
.marchat-ripple {
  position: relative;
  overflow: hidden;
}
.marchat-ripple .rp-effect {/*エフェクト*/
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;/*波紋の濃さ*/
  transform: scale(0);
  background: #FFF;/*波紋色*/
  animation: marchat-ripple-kf 700ms;
  pointer-events: none; 
}

@-webkit-keyframes marchat-ripple-kf {
  to {
    opacity: 0;
    transform: scale(2.0);
  }
}
@keyframes marchat-ripple-kf {
  to {
    opacity: 0;
    transform: scale(2.0);
  }
}



#marchat_area_open {
  position: fixed;
    right: 10px;
      bottom: 100px;
    z-index: 9999;
}
@media screen and ( min-width: 769px ) {
	#marchat_area_open {
	  position: fixed;
	  	  right: 15px;
	  	  	  bottom: 70px;
	  	  z-index: 9999;
	}
}
#marchat_area_open a.btn_marchat_open {
  display:block;
  position:relative;
  width:100px;
  height:100px;
  z-index:10;
  transition: all .3s;
}

#marchat_area_open:hover .fluid-wrap {
  transform: scale(1.1);
  transition: all .3s;
}


#marchat_area_open .fluid-wrap {
  cursor: pointer;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all .3s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index:2;
}


/* 流体 */
#marchat_area_open .fluid-wrap .fluid {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  background-color: #80a1d4;
  opacity: .9;
  animation: fluid-kf 20s linear 0s infinite normal both;
  position: relative;
  z-index: 2;
}


/* 流体後ろ側 */
#marchat_area_open .fluid-wrap .fluid.back {
  animation: fluid-back-kf 20s linear 0s infinite normal both;
  opacity: .6;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* テキスト */
#marchat_area_open .fluid-wrap .fluid-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  width:70%;
  max-width:70%;
}

@keyframes fluid-kf {
  0% { transform: rotate(0) scale(.9); }
  50% { transform: rotate(180deg) scale(.9); }
  100% { transform: rotate(360deg) scale(.9); }
}
@keyframes fluid-back-kf {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(-180deg) scale(.9); }
  100% { transform: rotate(-360deg) scale(1); }
}