/* 吹き出しのスタイル */
.bubble-content {
	max-width: 1300px;
	margin: 0 auto;
}

.bubble-item {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.bubble-item:nth-child(even) {
	flex-direction: row-reverse;
}

.bubble-item.left .bubble-text,
.bubble-item.right .bubble-text {
	width: 60%;
	padding: 16px;
	border-radius: 10px;
	position: relative;
	border: 2px solid #febe00;
}

.bubble-item.left .bubble-text {
	margin-left: 32px;
}

.bubble-item.right .bubble-text {
	margin-right: 32px;
}

.bubble-img img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #d8e6ef;
}

.bubble-item.left .bubble-text::before,
.bubble-item.right .bubble-text::before {
	content: '';
	position: absolute;
	top: 10px;
	border-width: 12px 24px 12px 0;
	border-style: solid;
	border-color: transparent #febe00 transparent transparent;
}

.bubble-item.left .bubble-text::before {
	left: -25px;
}

.bubble-item.right .bubble-text::before {
	right: -25px;
	transform: rotate(180deg);
}

.bubble-item.left .bubble-text::after,
.bubble-item.right .bubble-text::after {
	content: '';
	position: absolute;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
}

.bubble-item.left .bubble-text::after {
	top: 11px;
	left: -22px;
	border-width: 11px 23px 11px 0;
}

.bubble-item.right .bubble-text::after {
	top: 10px;
	right: -22px;
	border-width: 12px 24px 12px 0;
	transform: rotate(180deg);
}

@media (max-width: 768px) {
	.bubble-item {
		align-items: flex-start;
	}
}