@charset "utf-8";
/* ---------------------------------------------------------
ブロックエディタ「画像付きコンテンツ」(custom-width_image_conents)用スタイル。
html{font-size:100%}の940px固定幅設計)。teacherバリアント(画像上に役職/名前のdlを重ねる、
custom-width_image_conentsブロックの「役職」「名前」欄に入力すると自動的に有効になる)も含む。
--------------------------------------------------------- */
.width-image {
	display: flex;
	gap: 40px;
}

.width-image.-reverse {
	flex-direction: row-reverse;
}

.width-image__src {
	flex-grow: 1;
}

.width-image__src.-has-width {
	flex: 0 0 var(--image-width);
}

.width-image__src img {
	border-radius: 8px;
}

.width-image__src .caption {
	margin-top: 8px;
	color: rgba(59, 59, 59, .8);
	font-size: 88%;
}

.width-image__body {
	flex: 1 1 auto;
}

.width-image__body > :first-child {
	margin-top: 0 !important;
}

.width-image__body p {
	margin-top: 16px;
}

.width-image.-teacher .width-image__src {
	flex-shrink: 0;
}

.width-image.-teacher .width-image__src dl {
	margin: .4em 0 0;
}

.width-image.-teacher .width-image__src dl dt {
	font-weight: normal;
	font-size: 14px;
}

.width-image.-teacher .width-image__src dl dd {
	font-weight: bold;
	font-size: 18px;
}

.width-image.-teacher .width-image__body {
	flex: 1 1 auto;
	width: auto;
}

@media screen and (max-width: 767px) {
	.width-image,
	.width-image.-reverse {
		flex-direction: column;
		gap: 20px;
	}
	.width-image__src.-has-width {
		flex: 1 1 auto;
	}
}