@charset "utf-8";
/***************************************************
information
  filename : box_parts.css;
***************************************************/

/*======== app_box_dez.css ========*/
/******************************************* ボックスパーツ設定 *******************************************/

/****************** 入力フォーム基本指定 ******************/

/* ** input_basic start ** */
/****************** フォーム共通指定 ******************/

/*** 入力フォーム基本 ***/

/* 入力フォーム項目基本指定 */
.InputForm.mgset {margin: 0 auto 2.0rem auto;}
.InputForm dl {
	margin: 0 auto;
	padding: 0.8rem 0;
	display: flex;
	font-weight:bold;
	align-items: center;
	font-size: clamp(1.6rem, 1.6vw, 1.6rem);
	border-bottom: var(--app-InputForm-brd);
}
.InputForm dl:last-child {
	border-bottom: none;
}
.InputForm dt {padding: 1.0rem 0 1.0rem 0.8rem;display: flex;align-items: center;}
.InputForm dd {padding: 1.0rem 0;}
.InputForm dd ul.chpd {padding-top: 1.0rem;}
.InputForm dd li {list-style: none;}
.InputForm dd p.chsldpd {margin-top: 1.0rem;}
.InputForm dd p.baseInfo {padding: 1.0rem 0.5rem 1.5rem 0.5rem;font-size: clamp(1.4rem, 1.4vw, 1.4rem);}

/*** 項目幅指定 ***/
.InputForm dt {width: 35%;}
.InputForm dd {width: 65%;}

/*** 見出し指定 ***/
.InputForm dt {color: #9e9e9e;font-size: clamp(1.4rem, 1.4vw, 1.4rem);}

/* 入力フォーム見出し項目縦並び（主にログイン等ボーダー無し） */
.InputFormT dl {margin: 0 auto;padding: 0 0 1.0rem 0;font-weight:bold;font-size: var(--font-form-dt);
}.InputFormT dt {padding: 0.8rem;}
.InputFormT dd {padding: 0;}

/*** 項目横並び指定（主にラジオボタン等の複数指定用） ***/
.InputForm .ddflex {display: flex;align-items: top;}
.InputForm .ddflex ul {width: 150px;}
.InputForm .ddflexbet {display: flex;align-items: top;justify-content: space-between;}
.InputForm .ddflexDet {display: flex;align-items: center;gap: 0 1.0rem;}

@media screen and (max-width: 600px) {
	.InputForm dl {display: block;}
	.InputForm dt {width: 100%;padding-bottom: 1.0rem;}
	.InputForm dd {width: 100%;}
	.InputForm dd p.chpd,
	.InputForm dd div.chpd,
	.InputForm dd ul.chpd,
	.InputForm dd p.chsldpd,
	.InputForm dd ul.chsldpd {padding-left: 1.0rem;}
	.InputForm dl.spchkDl {display: flex;}
	.InputForm dl.spchkDl dt {width: 50%;padding: 1.0rem 0 0.5rem 0.8rem;}
	.InputForm dl.spchkDl dd {width: 50%;}
	.InputForm dl.spchkDl dd p.chpd {padding-left: 0;}
	.InputForm dl.spchkDlbet {display: flex;justify-content: space-between;}
	.InputForm dl.spchkDlbet dt {width: 65%;padding: 1.0rem 0 0.5rem 0.8rem;}
	.InputForm dl.spchkDlbet dd {width: 30%;}
	.InputForm dd .spchmg {margin-top: 1.0rem;}
	.InputForm .ddflex {display: flex;align-items: center;flex-wrap: wrap;}
}
/* ** input_basic end ** */

/* ** com_box start ** */
/*** 基本ボックス ***/
/* 枠ボックス */
.comBox {
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem;
	color: var(--app-BgBox-txt); /* テキスト色 */
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBox-brd); /* 外枠ボーダー指定 */
	background: var(--app-BgBox-bg); /* 外枠背景色 */
	box-shadow: var(--app-BgBox-sd);-webkit-box-shadow: var(--app-BgBox-sd); /* 外枠背景影色 */
}
.comBoxInn {
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem;
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBoxInn-brd); /* 内枠ボーダー指定 */
	background: var(--app-BgBoxInn-bg); /* 内枠背景色 */
	box-shadow: var(--app-BgBoxInn-sd);-webkit-box-shadow: var(--app-BgBoxInn-sd); /* 内枠背景影色 */
}
.comBoxMgtb {margin-top: 1.0rem;margin-bottom: 1.0rem;}

/* 更新者枠ボックス */
.updateBox {
	margin: 1.0rem auto;
	padding: 1.0rem;
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: 1px solid #eeeeee;
	background: #f9f9f9;
}
.updateBox.InputForm dt,
.updateBox.InputForm dd {color: #9e9e9e;font-size: clamp(1.4rem, 1.4vw, 1.4rem);}

@media screen and (max-width: 600px) {
	.updateBox.InputForm dl.spchkDl {display: flex;align-items: center;}
	.updateBox.InputForm dl.spchkDl dt {width: 35%;padding: 0 0 0 0.8rem;}
	.updateBox.InputForm dl.spchkDl dd {width: 65%;}
}
/* ** com_box end ** */

/* ** colorbox_basic start ** */
/********* インラインポップ設定 *********/

/* ポップアップ */
.popupArea,
.popupAreaInn {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}
.popupArea {position: relative;}
.popupAreaInn {padding: 1.0rem 2.0rem 15.0rem 2.0rem;}
.popup_Box {
	margin: 0 auto;
	padding: 0.5rem 1.5rem;
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBox-brd); /* 外枠ボーダー指定 */
	background: var(--app-BgBox-bg); /* 外枠背景色 */
}
@media screen and (max-width: 600px) {
	.popup #contents {margin: 0 auto;}
	.popupAreaInn {padding: 1.0rem 1.0rem 15.0rem 1.0rem;}
	.popup_Box {
		padding: 0.5rem 1.0rem;
	}
}
.popup_Box.mgset {margin: 0 auto 2.0rem auto;}

/* ポップアップタイトル */
.popupTi {
	margin: var(--app-popupTi-mg); /* マージン */
	padding: var(--app-popupTi-pd); /* パディング */
	text-align: center;
	line-height: 1.0;
	color: var(--app-popupTi-txt); /* テキスト色 */
	font-weight: bold;
	background: var(--app-popupTi-bg); /* 背景色 */
	border-top: var(--app-popupTi-brd); /* ボーダー指定 */
	border-bottom: var(--app-popupTi-brd); /* ボーダー指定 */
}
.popupTi h1.popupTiInn,
.popupTi p.popupTiInn {font-size: var(--font-popupTi);font-weight: bold;} /* フォントサイズ */

/* ポップアップボタンエリア */
.popupBtArea {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 1.0rem 2.0rem;
	border-top: var(--app-popupTi-brd); /* ボーダー指定 */
	background: var(--app-popupTi-bg); /* 背景色 */
	z-index: 4;
}
@media screen and (max-width: 600px) {
	.popupBtArea {padding: 1.0rem 0.5rem;}
}
/* ** colorbox_basic end ** */

/* ** comment_box start ** */
/*** コメント・掲示板・レビュー投稿ボックス ***/
/* 枠ボックス */
.commentBox {
	width: var(--InputBaseBox-size); /* 登録画面画面サイズ */
	margin: 0 auto; /* マージン */
	padding: 0.5rem 1.8rem;
	color: var(--app-BgBox-txt); /* テキスト色 */
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBox-brd); /* ボーダー指定 */
	background: var(--app-BgBox-bg); /* 背景色 */
	box-shadow: var(--app-BgBox-sd); /* 背景影色 */
}
/* タイトルエリア */
.commentBox p.commentTtitle {
	margin: 0 auto;
	padding: 1.5rem 1.0rem;
	font-size: clamp(1.6rem, 1.6vw, 1.8rem);
	font-weight: bold;
	border-bottom: 1px dotted #cdcdcd;
	background: inherit;
}
/* 投稿用制御ボタン位置指定 */
.commentBT {
	float: right;
	width: 30%;
	margin 0;
	padding: 0 2.0rem 2.0rem 2.0rem;
}
/* 投稿フォーム */
.commentInput,
.commentForm {margin: 0;padding: 0.5rem 0;}

@media screen and (max-width: 600px) {
	.commentBT {width: 100%;padding: 0 0.5rem 2.0rem 0.5rem;}
	.commentInput {margin: 1.0rem auto;padding: 0.5rem 0;}
}
/*** コメント・掲示板・レビュー投稿コメント表示ボックス ***/

/* 枠ボックス */
.commentList {
	margin: 0 auto;
	padding: 1.0rem 1.5rem;
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBoxInn-brd);
	box-shadow: var(--app-BgBoxInn-sd);
}
/* コメントリスト背景指定（コメント無し） */
.commentZero {
	margin: 0 auto;
	background: var(--app-commentZero-bg);/* 背景色 */
}
/* コメントリスト背景指定（親スレッド） */
.commentFst {
	margin: 1.0rem auto 0 auto;
	background: var(--app-commentFst-bg);/* 背景色 */
}
/* コメントリスト背景指定（レスコメント） */
.commentSec {
	margin: 1.0rem 0 0 3.0rem;
	background: var(--app-commentSec-bg);/* 背景色 */
}
/* 投稿者写真表示 */
.commentPh {
	float: left;
	overflow: hidden;
	width: 50px;
	height: 50px;
	position: relative;
	border-radius: 50%;
}
.commentPh img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}
/* 投稿者情報表示エリア */
.commentTxtArea {width: 100%;}
.commentNameArea {
	padding: 0.5rem;
	border-bottom: var(--app-BgBox-Kbrd); /* ボーダー指定 */
}
.commentNameInn {float: right;text-align: right;}
@media screen and (max-width: 600px) {
	.commentNameInn {width: 75%;}
}
/* 投稿者ニックネーム */
.commentName {
	font-size: clamp(1.4rem, 1.2vw, 1.6rem);
	font-weight: normal;
}
/* 投稿者ID */
.commentName span.commentNameS {
	padding: 0 0 0 0.5rem;
	font-size: clamp(1.2rem, 1.0vw, 1.2rem);
	font-weight: normal;
}
/* 投稿ID・投稿時間 */
.commentTime {
	font-size: clamp(1.0rem, 1.0vw, 1.2rem);
	font-weight: bold;
}
/* 投稿返信元ID表示 */
.commentTxtRes {
	padding: 1.0rem 0.5rem 0 0.5rem;
	font-size: clamp(1.4rem, 1.2vw, 1.6rem);
	line-height: 1.8;
	font-weight: bold;
}
/* 投稿テキスト */
.commentTxt {
	padding: 1.5rem;
	font-size: clamp(1.6rem, 1.4vw, 1.6rem);
	line-height: 1.8;
}
@media screen and (max-width: 600px) {
	.commentTxt {padding: 1.5rem 0.5rem;}
}
/* 共感ボタン表示エリア */
.commentResArea {
	padding: 1.0rem 0 0.5rem 0; /* パディング */
	border-top: var(--app-BgBox-Kbrd); /* ボーダー指定 */
}
.commentResL {float: left;display: flex;align-items: center;}
.commentResR {float: right;display: flex;align-items: center;}
.commentResBT {margin: 0 0.2rem;}

/* ** comment_box end ** */

/* ** order_box start ** */
/******* サービス・セミナーの単品購入用の共通明細エリア *******/

/* 枠ボックス(主に明細処理で使用) */
.SCartBox {
	width: var(--InputBaseBox-size); /* 登録画面画面サイズ */
	margin: 0 auto 2.0rem auto; /* マージン */
	padding: 1.5rem;
	color: var(--app-BgBox-txt); /* テキスト色 */
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBox-brd); /* 外枠ボーダー指定 */
	background: var(--app-BgBox-bg); /* 外枠背景色 */
	box-shadow: var(--app-BgBox-sd);-webkit-box-shadow: var(--app-BgBox-sd); /* 外枠背景影色 */
}
.SCartBoxInn {
	padding: 1.5rem;
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBoxInn-brd); /* 内枠ボーダー指定 */
	background: var(--app-BgBoxInn-bg); /* 内枠背景色 */
	box-shadow: var(--app-BgBoxInn-sd);-webkit-box-shadow: var(--app-BgBoxInn-sd); /* 内枠背景影色 */
}
.popup_Box .SCartBox {
	width: 100%;
	margin: 0 auto 2.0rem auto; /* マージン */
	padding: 1.5rem;
	color: var(--app-BgBox-txt); /* テキスト色 */
	border-radius: var(--BgBox-rod);-webkit-border-radius: var(--BgBox-rod);-moz-border-radius: var(--BgBox-rod); /* 角丸 */
	border: var(--app-BgBoxInn-brd); /* 内枠ボーダー指定 */
	background: var(--app-BgBoxInn-bg); /* 内枠背景色 */
	box-shadow: var(--app-BgBoxInn-sd);-webkit-box-shadow: var(--app-BgBoxInn-sd); /* 内枠背景影色 */
}
@media screen and (max-width: 600px) {
	.SCartBox {width: 95%;margin: 0 auto;padding: 1.0rem;}
	.SCartBoxInn {padding: 1.0rem;}
}
/* ** order_box end ** */

/* ** credit_box start ** */
/*** クレジットカード情報 ***/
.cardBland,
.cardSec,
.cardAgt {margin: 0 auto;padding: 0;}
.cardImg {margin: 2.0rem auto;padding: 0;display: flex;}
.cardBland ul {padding: 0 2.0rem;}
.cardBland li,
.cardSec p {padding: 0.5rem;list-style: none;}
.cardAgtLogo {padding: 2.0rem 1.0rem;}
.cardAgtName {
	padding: 0 1.0rem;
	font-size: clamp(1.4rem, 1.0vw, 1.4rem);
	font-weight: bold;
}
.cardAjx {margin: 2.0rem auto;padding: 0;text-align: center;}

@media screen and (max-width: 600px) {
	:root {
	.cardImg {flex-wrap: wrap;}
	.cardSec .cardImg {display: block;}
	}
}
div.payjs-outer {
    margin: 2px;
    border: 1px solid #cdcdcd;
    width: 100%;
}
/* ** credit_box end ** */

/* ** contributor_box start ** */
/*** 記事投稿者ボックス ***/
/* 枠ボックス */
.authorBox {
	margin: 0 auto;
	padding: 1.0rem;
	color: var(--app-BgBox-txt); /* テキスト色 */
	border-radius: var(--app-BgBox-rod);-webkit-border-radius: var(--app-BgBox-rod);-moz-border-radius: var(--app-BgBox-rod); /* 角丸 */
	border: var(--app-BgBoxInn-brd); /*ボーダー指定 */
	background: var(--app-BgBoxInn-bg); /* 背景色 */
	box-shadow: var(--app-BgBoxInn-sd);-webkit-box-shadow: var(--app-BgBoxInn-sd);/* 背景影色 */
}
.authorBox .authorPhoto {float:left;width:20%;}
.authorBox .authorPhoto img {width:85%;border-radius: var(--app-authorBox-img-rod);} /* 写真角丸 */
.authorBox .authorDetail {float:right;width:80%;}

/* 記事投稿者エリアタイトル */
.authorBox .authorDetail p.authorDetTi {
	padding: 0 0 0.5rem 0;
	font-size: clamp(1.4rem, 1.2vw, 1.6rem);
	font-weight: bold;
	border-bottom: var(--app-BgBox-Kbrd);
}
.authorBox .authorDetail p.authorDetName {
	padding: 1.0rem 0 0.5rem 0;
	font-size: clamp(1.4rem, 1.6vw, 2.0rem);
	font-weight: bold;
	line-height: 1.2em;
}
.authorBox .authorDetail p.authorDetCorp {
	padding: 0;
	font-size: clamp(1.2rem, 1.2vw, 1.6rem);
}
.authorBox .authorDetail p.authorDetProf {
	padding-top: 1.0rem;
	font-size: clamp(1.2rem, 1.2vw, 1.6rem);
	line-height: 1.4em;
}
@media screen and (max-width: 600px) {
	.authorBox {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
}
/* ** contributor_box end ** */

/* ** message_box start ** */
/*** メッセージボックス ***/
/* 枠ボックス */
.messageListBox {margin: 1.0rem auto;}
.messageList {
	height: 30vw;
	margin: 0 auto;
	padding: 1.0rem 1.5rem;
	border-radius: var(--messageList-rod);-webkit-border-radius: var(--messageList-rod);-moz-border-radius: var(--messageList-rod); /* 角丸 */
	border: var(--app-messageList-brd);
	overflow-y: scroll;
}
.messageList::-webkit-scrollbar{width: 0.2rem;}
@media screen and (max-width: 480px) {
	.messageList {
		height: 100vw;
		padding: 1.0rem 0;
		border: none;
	}
}
/* メッセージ箇所 */
.messageListInn {
	margin: 0 auto;
	padding: 1.5rem 0.5rem;
	border-bottom: var(--app-messageListInn-brd); /* ボーダー指定 */
}
.messageListInn.myself {
	background: var(--app-messageListInn-myself-bg); /* 背景色 */ 
}
.messageListInn.partner {
	background: var(--app-messageListInn-partner-bg); /* 背景色 */ 
}
.messageListInnChd {
	display: flex;
	justify-content: flex-start;
	align-items: top;
}
.messageItemPh {width: 30%;}
.messageListInnChdTxt {
	position: relative;
	width: 90%;
	margin-left: 1.5rem;
}
@media screen and (max-width: 480px) {
	.messageItemPh {width: 15%;}
	.messageListInnChdTxt {width: 78%;}
}
.messageItemDataName {font-size: 1.4rem;font-weight: bold;color: var(--app-messageListInn-txt);}
.messageItemDataTime {padding: 0.5rem 0;font-size: 1.2rem;}
.messageItemDataTxt {padding: 0.5rem 0;}
.messageItemDataTxt pre {
	font-size: clamp(1.5rem, 1.5vw, 1.5rem);
	letter-spacing: 0.1em;
	overflow: auto;
}
/* メッセージ引用箇所 */
.messageIteminlineMes {margin: 2.0rem 0 2.0rem 2.0rem;padding: 1.0rem 0 1.0rem 2.0rem;font-size: clamp(1.4rem, 1.5vw, 1.5rem);border-left: var(--app-messageIteminlineMes-brd);}

@media screen and (max-width: 480px) {
	.messageIteminlineMes {margin: 2.0rem 0 2.0rem 1.0rem;}
}
/* メッセージ引用外部連携箇所 */
.messageItemOutData {
	margin: 3.0rem auto;
	padding: 1.5rem;
	border-radius: var(--messageItemOutData-rod);-webkit-border-radius: var(--messageItemOutData-rod);-moz-border-radius: var(--messageItemOutData-rod); /* 角丸 */
	border: var(--app-messageItemOutData-brd);
	background: var(--app-messageItemOutData-bg); /* 背景色 */ 
}
.messageItemOutData dl {
	font-size: clamp(1.4rem, 1.4vw, 1.5rem);
	padding: 0.8rem 0.5rem;
	display: flex;
	justify-content: flex-start;
	align-items: top;
	border-bottom: var(--app-messageListInn-brd); /* ボーダー指定 */
}
.messageItemOutData dt {width: 20%;}
.messageItemOutData dd {width: 80%;}
.messageItemOutData a {text-decoration: underline;}
.messageItemOutData a:hover {opacity: 0.5;}

@media screen and (max-width: 480px) {
	.messageItemOutData {margin: 2.0rem auto;}
	.messageItemOutData dt {width: 40%;}
	.messageItemOutData dd {width: 60%;}
}
/* メッセージ操作ボタン等 */
.messageEditBtBox {
	position: absolute;
	bottom: -2.0rem;
	right: -1.5rem;
	display: flex;
	justify-content: flex-start;
	gap: 0 0.2rem;
	opacity: 0;
	padding: 1.0rem;
	border-radius: var(--messageEditBtBox-rod);-webkit-border-radius: var(--messageEditBtBox-rod);-moz-border-radius: var(--messageEditBtBox-rod); /* 角丸 */
	border: var(--app-messageEditBtBox-brd);
	background: var(--app-messageEditBtBox-bg); /* 背景色 */ 
}
.messageListInnChd:hover .messageEditBtBox {opacity: 1;}
.messageListInnChd .messageEditBtBox:hover {opacity: 1;}
.messageEditBtBox button {
	padding: 0.2rem 1.0rem;
	font-size: clamp(1.4rem, 1.4vw, 1.4rem);
	white-space:nowrap;
}
/* 編集ボタン */
.messageEditBt {
    color: var(--messageEditBt-txt);
    background: var(--messageEditBt-bg);
    border: var(--messageEditBt-brd);
}
/* 削除ボタン */
.messageDelBt {
    color: var(--messageDelBt-txt);
    background: var(--messageDelBt-bg);
    border: var(--messageDelBt-brd);
}
/* 引用ボタン */
.messageQutBt {
    color: var(--messageQutBt-txt);
    background: var(--messageQutBt-bg);
    border: var(--messageQutBt-brd);
}
/* アクションボタン */
.messageActBt {
    color: var(--messageActBt-txt);
    background: var(--messageActBt-bg);
    border: var(--messageActBt-brd);
}
/* 未読・既読ボタン */
.messageKidokuBt {
    color: var(--messageKidokuBt-txt);
    background: var(--messageKidokuBt-bg);
    border: var(--messageKidokuBt-brd);
}
.messageMidokuBt {
    color: var(--messageMidokuBt-txt);
    background: var(--messageMidokuBt-bg);
    border: var(--messageMidokuBt-brd);
}
/* メッセージ入力ボックス */
.messageInput {
	margin: 1.0rem auto;
	padding: 1.0rem;
	border-radius: var(--messageList-rod);-webkit-border-radius: var(--messageInput-rod);-moz-border-radius: var(--messageInput-rod); /* 角丸 */
	border: var(--app-messageInput-brd);
}
.messageBT {
	padding: 1.0rem 1.5rem 1.0rem 0.5rem;
	display: flex;
	justify-content: space-between;
	gap: 0 0.5rem;
	align-items: center;
}
.messageBTInn {
	display: flex;
	justify-content: flex-start;
	gap: 0 0.5rem;
}
/* 送信ボタン */
.messageSendBt {
	padding: 0.5rem 1.5rem;
	font-size: clamp(1.6rem, 1.6vw, 1.6rem);
    color: var(--messageSendBt-txt);
    background: var(--messageSendBt-bg);
    border: var(--messageSendBt-brd);
}
/* 編集取消ボタン */
.messageCanBt {
	padding: 0.2rem 1.5rem;
	font-size: clamp(1.4rem, 1.4vw, 1.4rem);
    color: var(--messageCanBt-txt);
    background: var(--messageCanBt-bg);
    border: var(--messageCanBt-brd);
}
/* その他操作ボタン */
.messageOutBt {
	padding: 0.2rem 1.5rem;
	font-size: clamp(1.4rem, 1.4vw, 1.4rem);
    color: var(--messageOutBt-txt);
    background: var(--messageOutBt-bg);
    border: var(--messageOutBt-brd);
}
/*** メッセージアプリ風 ***/
.mesApp .messageList {background: var(--mesApp-bg);}
.mesApp .messageListInn {border-bottom: none;}
.mesApp .messageListInn.myself,
.mesApp .messageListInn.partner {background: none; }
.mesApp .myself .messageItemPh,
.mesApp .myself .messageItemDataName {display: none;}
.mesApp .messageList .messageListInnChdTxt {width: 100%;}
.mesApp .messageList .myself .messageItemDataTime {padding: 0.5rem 1.5rem 0 0;text-align: right;}
.messageEditBtBox {border: none;background: none;}

/*フキダシ共通*/
.mesApp .messageList .messageItemDataTxt {
	position: relative;
	display: inline-block;
	max-width: 60%;
	margin: 0.8rem 0 0;
	padding: 1.0rem 1.6rem;
	border-radius: 1.9rem;
	overflow-wrap: break-word;
	clear: both;
	box-sizing: content-box;
	color: var(--mesApp-txt);
}
/*フキダシ左*/
.mesApp .messageList .partner .messageItemDataTxt {
	float: left;
	margin-left: 0.5rem;
	background: var(--mesAppPartner-bg);
}
/*フキダシ右*/
.mesApp .messageList .myself .messageItemDataTxt {
	float: right;
	margin-right: 12px;
	background: var(--mesAppMyself-bg);
}
/*しっぽ共通*/
.mesApp .messageList .messageItemDataTxt::after {
	position: absolute;
	content: "";
	width: 24px;
	height: 36px;
	top: -21px;
}
/*しっぽ左*/
.mesApp .messageList .partner .messageItemDataTxt:after {
	left: -10px;
	border-radius: 18px 0 6px 18px/18px 0 1px 18px;
	box-shadow: -3px -15px 0 -5px var(--mesAppPartner-bg) inset;
}
/*しっぽ右*/
.mesApp .messageList .myself .messageItemDataTxt::after {
	right: -10px;
	border-radius: 0 18px 18px 6px/0 18px 18px 1px;
	box-shadow: inset 3px -15px 0 -5px var(--mesAppMyself-bg);
}
/*フキダシが続いてしっぽがないとき*/
.mesApp .messageList .myself .messageItemDataTxt + .messageItemDataTxt::after,
.mesApp .messageList .right + .right::after {content: none;}

/* ** message_box end ** */