/* ローカルのまめしば案。既存の本文・デザインシステムへ重ねる。 */
.mame-mascot .mame-course-mascot {
	object-fit: contain;
	max-width: 240px;
	margin-inline: auto;
}
/* 全体の段落下余白の強制指定を、このコース案内だけ解除する。 */
.mame-mascot #course .school__bd > p { margin: 0 !important; }
.mame-mascot .mame-mascot-line img {
	width: 180px;
	height: 180px;
	object-fit: contain;
	rotate: none;
}

/* 吹き出しは顔を中心に丸く切り抜き、本文とは分けて見せる。 */
.mame-mascot .article-content .mame-balloon { margin-block: 28px; }
.mame-mascot .article-content .mame-balloon :is(.c-balloon, .speech-person) {
	align-items: flex-start;
}
.mame-mascot .article-content .mame-balloon :is(.c-balloon__icon, .speech-person) {
	width: 88px;
	flex: 0 0 88px;
}
.mame-mascot .article-content .mame-balloon :is(.c-balloon__icon img, .speech-icon img) {
	display: block;
	width: 88px;
	height: 88px;
	object-fit: contain;
	border: 0;
	border-radius: 0;
	background: transparent;
	transform: translate(23%, 1%) scale(1.55);
}
.mame-mascot .article-content .mame-balloon .mame-mascot-avatar {
	display: block;
	width: 88px;
	height: 88px;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	border-radius: 50%;
	background: var(--surface);
}
.mame-mascot .article-content .mame-balloon .speech-icon {
	width: 88px;
	height: 88px;
	margin: 0;
	border: 0;
	border-radius: 0;
}
.mame-mascot .article-content .mame-balloon :is(.c-balloon__text, .speech-balloon) {
	background: var(--surface);
	border-width: 2px;
	border-color: var(--border);
}
/* 記事共通の段落下余白を外し、吹き出し内は段落間だけ空ける。 */
.mame-mascot .article-content .mame-balloon :is(.c-balloon__text, .speech-balloon) p {
	margin-block: 0 !important;
	font-size: inherit;
	color: inherit;
}
.mame-mascot .article-content .mame-balloon :is(.c-balloon__text, .speech-balloon) p + p {
	margin-top: 10px !important;
}
.mame-mascot .article-content .mame-balloon :is(.c-balloon__text, .speech-balloon)::before {
	background: var(--surface);
	border-color: var(--border);
	border-width: 0 0 2px 2px;
}
.mame-mascot .article-content .mame-balloon .c-balloon.-bln-right .c-balloon__text::before {
	border-width: 2px 2px 0 0;
}
.mame-mascot .article-content .mame-balloon :is(.c-balloon__iconName, .speech-name) {
	color: var(--navy-700);
}

.mame-guide {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 22px;
	background: var(--surface);
	border-radius: var(--radius-card);
	margin: 0;
}
.mame-guide__image {
	flex: 0 0 92px;
	width: 92px;
	height: 92px;
	object-fit: contain;
}
.mame-guide__body { min-width: 0; }
.mame-guide__label {
	margin: 0 0 5px;
	font: 700 11px/1.6 var(--font-ui);
	color: var(--brand);
}
.mame-guide__title {
	margin: 0 0 10px;
	font: 700 14px/1.7 var(--font-body);
	color: var(--text-primary);
}
.mame-guide__title span { display: inline-block; }
.mame-guide a {
	font: 700 12px/1.6 var(--font-ui);
	color: var(--brand);
	text-underline-offset: 4px;
}
.mame-guide a:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 4px;
}

@media (max-width: 640px) {
	.mame-mascot #course .school__t { word-break: normal; overflow-wrap: anywhere; }
	.mame-mascot .article-content .mame-balloon :is(.c-balloon__icon, .speech-person) {
		width: 64px;
		flex-basis: 64px;
	}
	.mame-mascot .article-content .mame-balloon :is(.c-balloon__icon img, .speech-icon, .speech-icon img, .mame-mascot-avatar) {
		width: 64px;
		height: 64px;
	}
	.mame-mascot .article-content .mame-balloon .c-balloon { gap: 10px; }
	.mame-mascot .article-content .mame-balloon .c-balloon__text { padding: 12px 14px; }
	.mame-mascot .mame-mascot-line img { width: 110px; height: 110px; }
}

/* 学習コース: 記事本文の段落余白を部品内へ持ち込まない。 */
.mame-guide { margin: 0; padding: 16px 18px; gap: 16px; border: 1px solid #d7dce2; border-radius: 8px; align-items: center; }
.mame-guide .mame-guide__body { display: grid; gap: 6px; }
.mame-guide .mame-guide__body > p { margin: 0 !important; }
.mame-guide .mame-guide__label { font-size: 12px; line-height: 1.5; }
.mame-guide .mame-guide__title { font-size: 16px; line-height: 1.6; }
.mame-guide a { font-size: 13px; line-height: 1.6; }

@media(max-width:600px) {
 .mame-guide { padding: 14px; gap: 12px; }
 .mame-guide__image { flex-basis: 72px; width: 72px; height: 72px; }
 .mame-guide .mame-guide__title { font-size: 15px; }
}

.body .mame-guide { margin-block: 16px; }