/*/////////////////////////////////////////////////
//list
/////////////////////////////////////////////////*/
@media (min-width:768px){
.list_msg{
	height: 680px;
	overflow-y: scroll;
	overflow-x: hidden;
}
}

.list_msg{
	margin:0 -15px;
}
.list_msg li{
	border-left:none;
	border-right:none;
	display:flex;
}
.list_msg li:first-child{
	border-top:none;
}
.list_msg li .list-images{
	align-self:center;
}
.list-images{width:65px;}
.list-images img{
	width: 55px;
	height: 55px;
	object-fit: cover;
	object-position: 100% 0;
}
.list-data{width:calc(100% - 60px);}
.list_msg .list-data p{line-height:1.2;}
/*/////////////////////////////////////////////////
//detail
/////////////////////////////////////////////////*/

.msg__container {
  padding:0;
  background: #7494c0;
  overflow: hidden;
/*//  max-width: 400px;*/
  margin: auto;
  margin-bottom: 60px;
  font-size: 100%;
	width:100%;
}

/* タイトル部分 */
.msg__container .msg__title {
	background: #273246;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 10px;
	font-size: 150%;
	color: #ffffff;
	position:fixed;
	z-index:10000;
	top:0;
	left:0;
}
.msg_category,.msg_category:hover, .msg_category:focus{ text-align: left; width: 30%;color:#fff;}
.msg_subject  { text-align: center;width: 70%;color:#fff;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.msg_date     { text-align: right; width: 30%;color:#fff;}

/* 会話部分 */
.msg__container .msg__contents {
  padding:70px 10px 0;
  overflow: hidden;
  line-height: 135%;
}

.msg__container .scroll {
  height: 700px;
  overflow-y: scroll;
}

/* スタンプ画像最大幅 */
.msg__container .stamp img {
  max-width:150px;
}

/* 相手の会話 */
.msg__contents .msg__left {
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 5px;
    max-width: 80%;
    clear: both;
}

/* アイコン画像 */
.msg__contents .msg__left figure {
    width: 50px;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 0px;
    margin: 0;
    background: linear-gradient(45deg, #38B8C8, #7F90E5, #E667A2);
    border-radius: 50%;
    height: 50px;
    text-align: center;
    overflow: hidden;
    padding: 2px;
}

.msg__contents .msg__left figure img {
    border-radius: 50%;
    border: 2px solid white;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    object-fit: cover;
}

/* 正方形を用意 */
.msg__contents .msg__left figure img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
}
.msg__contents .msg__left figure i{color:#fff;    font-size: 2.5em;
    margin-top: 0.1em;}
.msg__contents .msg__left .msg__left-text {
  margin-left: 70px;
}

.msg__contents .msg__left .msg__left-text .name,
.msg__contents .msg__left .msg__left-text .date{
  font-size: 80%;
  color: #ffffff;
}
.msg__contents .msg__left .msg__left-text .name a
{
	color:#fff;
}
/* コメントエリア */
.msg__contents .msg__left .text {
  margin: 0;
  position: relative;
  padding: 10px;
  border-radius: 20px;
  background-color: #ffffff;
	min-height: 2.6em;
}

/* 吹き出し */
.msg__contents .msg__left .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 自分の会話 */
.msg__contents .msg__right {
    position: relative;
    display: block;
    margin: 5px 0;
    max-width: 75%;
    float: right;
    margin-right: 15px;
    clear: both;
}

/* コメントエリア */
.msg__contents .msg__right .text {
  padding: 10px;
  border-radius: 20px;
  background-color: #8de055;
  margin: 0;
  margin-left: 80px;
	    min-height: 3em;
}

/* 吹き出し */
.msg__contents .msg__right .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 10px;
  border-left: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* 自分がスタンプを送る時 */
.msg__contents .msg__right .stamp {
  position: relative;
  margin-left: 80px;
}

/* 既読エリア */
.msg__contents .msg__right .date {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  text-align: right;
  left: -30px;
  bottom: 0px;
  font-size: 80%;
  color: #ffffff;
}
.msg_image{
  position:relative;
  overflow:hidden;
  padding-bottom:100%;
}
.image img{
  position:absolute;
}
.msg_bg {
color: #000000;
background: #7494c0;
}

/* メッセージボタンエリア */
.msgbtn-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba( 255, 255, 255, 0.6 );
    z-index: 10000;
}
.msgbtn-area .msgbtn-area-inner {
    position: relative;
    width: 100%;
    margin: 0px auto;
    padding: 10px 5px;
    display: flex;
    justify-content: space-between;
}
.msgbtn-area-inner span {
    color: #fff;
}

/*@media screen and (max-height: 450px) {
.msgbtn-area {
    display: none;
}
}*/

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 103000;
	padding-bottom: constant(safe-area-inset-bottom);/* iOS 11.2未満用 */
  padding-bottom: env(safe-area-inset-bottom);/* iOS 11.2以上用 */
}
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
	height:38px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}.input-group > .form-control, .input-group > .custom-select, .input-group > .custom-file {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}.input-group-append {
    margin-left: -1px;
}
.input-group-prepend, .input-group-append {
    display: flex;
}
.btn{
	padding: 0.375rem 0.75rem;
}

/*背景白の場合*/
.msg__bg_wh .msg__contents .msg__left .msg__left-text .name{
	color:#000;
}
.msg__bg_wh .msg__contents .msg__left .text {
 	position: relative;
	display: inline-block;
 	margin: 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #FFF;
 	border: solid 1px #555;
 	box-sizing: border-box;
	border-radius:10px;
}

.msg__bg_wh .msg__contents .msg__left .text:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -19px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right: 10px solid #FFF;
 	z-index: 2;
}

.msg__bg_wh .msg__contents .msg__left .text:after{
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
    margin-top: -10px;
    border: 10px solid transparent;
    border-right: 10px solid #555;
 	z-index: 1;
}

.msg__bg_wh .msg__contents .msg__left .text p {
	margin: 0;
	padding: 0;
}
.messageModal{
	width: 90%;
    margin:-10% 0 0 -5%;
	/*height: 45%;*/
}
#msg_bt{height:1px;}

/*to 女の子*/
.girls_message.msg_bg,
.girls_message .msg__container{
	background:#fcf4f4;
}
.girls_message .msg__container .msg__title{
	background:#f35691;
}
.girls_message .msg__contents .msg__right .text{
	background:#fbe4ec;color:#333;
}
.girls_message .msg__contents .msg__right .text::after{
	border-left: 20px solid #ffe7ef;
}
.girls_message .btn-success{
	background-color: #f35691;
    border-color: #f35691;
}
.girls_message .msgbtn-area{
	background:#fecce1;
}
.girls_message .msg__contents .msg__left .msg__left-text .name,
.girls_message .msg__contents .msg__left .msg__left-text .date,
.girls_message .msg__contents .msg__left .msg__left-text .name a,
.girls_message .msg__contents .msg__right .date{color:#f35691;}
@media(min-width:580px){
	
}
@media(min-width:768px){
	.messageModal{
		width: 500px;
		margin: -120px 0 0 -250px;
	}
}
@media(min-width:992px){
	
}