@charset "utf-8";

/* ===================================================================
 BASE
=================================================================== */
*,
*::before,
*::after{
	box-sizing: border-box;}

body{
	width:100%;
	max-width:1260px;
	min-width:540px;
	font-family:Arial, "メイリオ", sans-serif;
	font-size:16px;
	line-height:1.4;
	padding:0px;
	margin:0;}

a{color:#337ab7;text-decoration:none}
a:link {color:#337ab7;text-decoration:none}
a:visited {text-decoration:underline;}
a:hover {color:#23527c;text-decoration:underline}
a:active {}

ul{
	list-style-type:none;
	padding-left:0;
	line-height:1.5;}

li{}



/*===== FLOAT =====*/
.flo-left{float:left;}

.flo-right{float:right;}

.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
overflow:hidden;} /* IE以外のモダンWebブラウザ向け */

.clearfix{display:inline-block;} /* IE7およびMac版IE5向け */

/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */ /* IE6以前向け */



/* ===================================================================
 AI結果エリア
=================================================================== */
#container{
	width:100%;
	max-width:720px;
	border:3px solid #802828;
	border-radius:10px;
	padding:1.5em 1.0em 1.0em 1.0em;
	background-color:#f5f5f7;
	position:relative;}

#container h1{
	position:absolute;
	top:calc(-1.0em + 5px);
	right:2.0em;
	color:#222;
	font-size:94%; /*15px*/
	font-weight:normal;
	background-color:#DDD;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	padding:0.3em 0.5em 0.2em;}

#container h1 img{
	height:24px;}



/* 吹き出し：共通CSS */
/*
テキストは12〜16pxを推奨。個人的には14pxが適していると思います。アイコン画像のサイズは 160〜200pxの正方形 が推奨です。
*/

.chat {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 20px auto 1.0em;}

.chat__r {
  justify-content: flex-end;
}

.chat__r .chat__icon {
  order: 1;
}

.chat__icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  background-position: center center;
  background-size: 46px 40px;
  background-repeat: no-repeat;
}

.chat__text {
  position: relative;
  max-width:500px;
  padding: 0.8em 1.0em 0.6em;
  font-size: 16px;
}

.border__chat {
  gap: 0 calc(11px + calc(16px / 1.5));
}

.border__chat .chat__icon {
	border:2px solid #FFF;
  border-radius: 50%;
	background:#F5E0E0 url(ico_ai_talk.png) 50% 50% no-repeat;
	box-shadow:1px 1px 4px rgba(128,128,128,0.75);/*#808080*/
}

.border__chat.chat__r .chat__icon {
  background-image: url(画像URL);
}

.border__chat .chat__text {
  border-radius: 6px;
  border: 2px solid #fff;
	background:#F5E0E0;
  color: #661f1f;
	box-shadow:1px 1px 4px rgba(128,128,128,0.75);/*#808080*/
}

.border__chat .chat__text::before,
.border__chat .chat__text::after {
  content: "";
  display: block;
  position: absolute;
  clip-path: polygon(100% 100%, 100% 0, 0 50%);/*吹き出しの三角部分*/}

/*吹き出しの三角部分の縁取り*/
.border__chat .chat__text::before {
  top:13px;
  right: 100%;
  width: calc(calc(16px / 1.5) + 3px);
  height:20px;
  background: #fff;}

/*吹き出しの三角部分の内側*/
.border__chat .chat__text::after {
  top: 15px;
  right: calc(100% - 1px);
  width: calc(16px / 1.5);
  height: 16px;
	background:#F5E0E0;}

.border__chat.chat__r .chat__text::before,
.border__chat.chat__r .chat__text::after {
  right: auto;
  clip-path: polygon(100% 50%, 0 0, 0 100%);/*吹き出しの三角部分*/}

.border__chat.chat__r .chat__text::before {
  left: 100%;
}

.border__chat.chat__r .chat__text::after {
  left: calc(100% - 1px);
}

/*データ提供元のテキスト*/
ul.ul_data-source{
	text-align:left;
	display:inline-block;
	margin-top:0;}

ul.ul_data-source li{
	font-size:69%; /*11px*/}

ul.ul_data-source li::before{
	content:"※";}


/*書籍紹介エリア*/
ul#ul_ai-result{
	margin-top:0;}

ul#ul_ai-result li.each{
	margin-bottom:1.0em;
	border-radius:10px;
	background-color:#fff;
	padding:1.2em 1.5em;
	position:relative;
	background-image:url(dqm-start.png), url(dqm-end.png);
	background-position:left 10px top 5px, right 10px bottom 5px;
	background-repeat:no-repeat;
	background-size:30px auto;}

ul#ul_ai-result .each{
	background:transparent;}

ul#ul_ai-result .each h2{
	color:#222;
	font-size:125%;
	border-bottom:3px solid #222;
	margin-top:0;
	width:100%;
	line-height:1.4;}

ul#ul_ai-result .each img.img-thumb{
	width:100%;
	max-width:110px;
	border:1px solid #EEE;
	float:left;
	margin-right:1.0em;}

.dtl-right{
	float:left;
	width:calc(100% - 126px);}

ul.ul-dtl{
	margin-bottom:1.0rem;}


ul.ul-dtl li{
	font-size:88%;}


/*図書館の本を探すボタン*/
ul#ul_ai-result .each input.btn_search{
	font-size:88%;
	border-radius:1.0em;
	color:#fff;
	border:1px solid #802828;
	background-color:#802828;
	height:24px;
	padding-left:1.0em;
	padding-right:25px;
	background: #802828 url(ico_button_book.png) right 2px center no-repeat;}

ul#ul_ai-result .each input.btn_search:hover{
	cursor:pointer;
	border:1px solid #23527C;
	background: #23527C url(ico_button_book.png) right 2px center no-repeat;}


/*閉じるボタン*/
#cl_Btn {
	position: fixed;
	z-index: 99999;
    top: 1px;
    right: 0px;
    padding: 3px 3px;
	width: 42px;
	height: auto;
}