/* Container自体の位置はJSのinline styleで制御するため、ここでは最小限に */
#web-mascot-container {
	/* 位置やサイズはJSで制御 */
	pointer-events: auto;
	/* モバイル非表示 */
	display: none; 
	transition: bottom 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (max-width: 768px) {
	#web-mascot-container {
		display: none !important;
	}
}

#mascot-avatar {
	/* サイズはJSで制御 */
	display: block;
}

#mascot-bubble {
	position: absolute;
	bottom: 100%; /* 画像の真上 */
	left: 50%;
	transform: translateX(-50%); /* 吹き出し自体も中央揃え */
	width: 250px;
	background: #fff;
	border-radius: 10px;
	padding: 15px;
	font-size: 14px;
	line-height: 1.4;
	display: none;
	border: 1px solid #ccc;
	z-index: 10000;
	margin-bottom: 15px; /* 画像との隙間 */
}

/* 吹き出しの三角（中央下） */
#mascot-bubble:after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	margin-left: -10px; /* 三角の幅の半分 */
	border-width: 10px 10px 0;
	border-style: solid;
	border-color: #fff transparent;
	display: block;
	width: 0;
}

/* アニメーション定義 */
@keyframes slideBoundIn {
	0% { transform: translate(-50%, 100%); opacity: 0; }
	60% { transform: translate(-50%, -20px); opacity: 1; }
	80% { transform: translate(-50%, 10px); }
	100% { transform: translate(-50%, 0); }
}
/* slide-down時はX軸のセンタリング(-50%)を維持しつつ下げる */
.slide-down {
	transition: transform 0.5s ease;
	transform: translate(-50%, 100%) !important;
}

.slide-bound-in {
	display: block !important;
	animation: slideBoundIn 0.8s ease-out forwards;
}