/* =========================================================
   KM Speech Balloon
   管理画面の値はPHPからCSS変数として上書きされます。
========================================================= */

:root {
	--km-speech-desktop-icon-size: 150px;
	--km-speech-mobile-icon-size: 80px;
	--km-speech-border-color: #fa8072;
	--km-speech-background: #2a2a2a;
	--km-speech-text-color: #eeeeee;
}

/* 吹き出し全体 */
.km-speech-wrap {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	margin: 0 0 3em;
}

/* 右配置では画像と吹き出しの並び順を反転 */
.km-speech-wrap.km-speech-right {
	flex-direction: row-reverse;
}

/* キャラクター画像。円形トリミングや枠線は付けません */
.km-speech-person {
	flex: 0 0 var(--km-speech-desktop-icon-size);
	width: var(--km-speech-desktop-icon-size);
}

.km-speech-person figure {
	width: var(--km-speech-desktop-icon-size);
	height: var(--km-speech-desktop-icon-size);
	margin: 0;
}

.km-speech-person img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 吹き出し本体 */
.km-speech-balloon {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 50px;
	margin-top: 55px;
	padding: 20px 25px;
	background: var(--km-speech-background);
	border: 2px solid var(--km-speech-border-color);
	border-radius: 12px;
}

.km-speech-balloon p {
	margin: 0;
	padding: 0;
	color: var(--km-speech-text-color);
	line-height: 1.7;
	text-align: left;
}

/* 尻尾は枠線用と背景用の三角形を重ねて作ります */
.km-speech-balloon::before,
.km-speech-balloon::after {
	position: absolute;
	top: 40px;
	width: 0;
	height: 0;
	content: "";
}

.km-speech-left .km-speech-balloon::before {
	left: -14px;
	border-top: 10px solid transparent;
	border-right: 14px solid var(--km-speech-border-color);
	border-bottom: 10px solid transparent;
}

.km-speech-left .km-speech-balloon::after {
	left: -10px;
	border-top: 10px solid transparent;
	border-right: 12px solid var(--km-speech-background);
	border-bottom: 10px solid transparent;
}

.km-speech-right .km-speech-balloon::before {
	right: -14px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 14px solid var(--km-speech-border-color);
}

.km-speech-right .km-speech-balloon::after {
	right: -10px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 12px solid var(--km-speech-background);
}

/* モバイル。尻尾位置はサイズ設定と分離し、固定値にしています */
@media screen and (max-width: 1080px) {
	.km-speech-wrap {
		gap: 12px;
	}

	.km-speech-person {
		flex-basis: var(--km-speech-mobile-icon-size);
		width: var(--km-speech-mobile-icon-size);
	}

	.km-speech-person figure {
		width: var(--km-speech-mobile-icon-size);
		height: var(--km-speech-mobile-icon-size);
	}

	.km-speech-balloon {
		margin-top: 35px;
		padding: 15px 18px;
	}

	.km-speech-balloon::before,
	.km-speech-balloon::after {
		top: 20px;
	}
}