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

/* chat */
:root {
	--wrapper-color-odd: rgb(255,255,238);
	--wrapper-color-even: rgb(238,247,244);
  --chat-width-max: 100%;/* 吹き出しの横幅最大値 */
  --chat-height-min: 120px;/* 吹き出しの縦幅最大値 */
	--chat-margin: 20px;/* 前後要素との距離 */
	--chat-item-distance: 8px;/* アイコン画像〜吹き出し間の距離 */
	--chat-triangle-size: 20px;/* 吹き出し角大きさ */
	--chat-triangle-position-top: 50%;/* 吹き出し角位置(上から) */
	--chat-icon-size: 120px;/* アイコン画像のサイズ */
	--chat-icon-radius: 50%;/* アイコン円形 */
	--chat-icon-bgimage-ope: url(/support/repair/syuribin/introduction/images/icon/icon-chat-ope.svg);/* 右画像 */
  --chat-icon-bgimage-cus1: url(/support/repair/syuribin/introduction/images/icon/icon-chat-cus1.svg);/* 左画像1 */
  --chat-icon-bgimage-cus2: url(/support/repair/syuribin/introduction/images/icon/icon-chat-cus2.svg);/* 左画像2 */
  --chat-icon-bgimage-cus3: url(/support/repair/syuribin/introduction/images/icon/icon-chat-cus3.svg);/* 左画像3 */
	--chat-text-radius: 8px;/* テキスト角丸 */
	--chat-text-padding: 16px;/* テキスト内余白 */
	--chat-text-font-size: 1.6rem;/* テキスト文字大きさ */
	--chat-bgcolor-g: rgb(229,237,236);/* アイコン背景色,テキスト背景色 */
	--chat-bgcolor-w: rgb(255,255,255);/* アイコン背景色,テキスト背景色 */
}

.chat {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	width: 100%;
	margin: var(--chat-margin) auto;
	gap: 0 calc(var(--chat-item-distance) + calc(var(--chat-triangle-size) / 1.5));
}
.chat .chat__icon {
	flex-shrink: 0;
	width: var(--chat-icon-size);
	height: var(--chat-icon-size);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: var(--chat-icon-radius);
	background-color: var(--chat-bgcolor-w);
	order: 1;
}
.chat .chat__icon .img {
	width: 100px;
	height: 100px;
	margin: 10px;
	background-repeat: no-repeat;
	background-image: var(--chat-icon-bgimage-ope);
}
.chat .chat__text {
	position: relative;
	width: 100%;
	max-width: var(--chat-width-max, initial);
	min-height: var(--chat-height-min, initial);
	padding: var(--chat-text-padding);
	font-size: var(--chat-text-font-size);
	border-radius: var(--chat-text-radius);
	color: var(--chat-text-color);
	background: var(--chat-bgcolor-w);
}
.chat .chat__text::after {
	content: "";
	display: block;
	position: absolute;
	top: var(--chat-triangle-position-top);
	transform: translateY(-50%); 
	left: calc(100% - 1px);
	clip-path: polygon(100% 50%, 0 0, 0 100%);
	width: calc(var(--chat-triangle-size) / 1.5);
	height: var(--chat-triangle-size);
	background: var(--chat-bgcolor-w);
	right: auto;
}

.chat.chat_l { justify-content: flex-start; }
.chat.chat_l .chat__icon { order: unset; }
.chat.chat_l .chat__text::after { left: auto; right: calc(100% - 1px); clip-path: polygon(100% 100%, 100% 0, 0 50%); }
.chat .chat__icon.customer1 .img { background-image: var(--chat-icon-bgimage-cus1); }
.chat .chat__icon.customer2 .img { background-image: var(--chat-icon-bgimage-cus2); }
.chat .chat__icon.customer3 .img { background-image: var(--chat-icon-bgimage-cus3); }

/* box color change */
.wrapper-round-bg.change-color-odd { background: var(--wrapper-color-odd);}
.wrapper-round-bg.change-color-even { background: var(--wrapper-color-even);}

/* flexbox */
.flexbox__inbox { display: flex; gap: 16px; justify-content: space-around; margin-bottom: 16px; }
.flexbox__inbox > div { flex: 1; }
.flexbox__inbox > div .img.l_justified { margin: auto 16px; text-align: left; }
.flexbox__inbox > div .txt { margin: auto 16px;}
.flexbox__inbox > div .txt { margin: auto 16px;}
.flexbox__inbox.notEqual { justify-content: flex-start; }
.flexbox__inbox.notEqual > div { flex: unset; }

@media only screen and (max-width: 480px) {
  .flexbox__inbox.sp-block { display: block; }
	.flexbox__inbox.sp-block > div:not(:first-child) { margin-top: 32px; }
	.flexbox__inbox.sp-block > div p+* { margin-top: 16px!important;}
}