/* 編集部総評の掛け合い図と編集者クレジット。
   既存の本文幅・余白に合わせ、どの幅でも図がはみ出さないようにする。 */

.aik-editor-credit {
	color: #7a6f63;
	margin: 0 0 .75em;
}

.aik-editor-credit__name {
	font-weight: 700;
}

.aik-sohyo {
	margin: 1.5em 0 2em;
}

.aik-sohyo--appended {
	border-top: 1px solid rgba(0, 0, 0, .08);
	margin-top: 2.5em;
	padding-top: 1.25em;
}

.aik-sohyo__lead {
	color: #7a6f63;
	font-size: .9em;
	margin: 0 0 1em;
}

.aik-sohyo-figure {
	margin: 0 0 .75em;
}

/* 幅と高さは記事ごとに img の属性と inline style で渡す。
   読み込み前から高さが決まるので、画像が入れ替わってもレイアウトが動かない。 */
.aik-sohyo-figure__img {
	background-color: #fffdf8;
	border-radius: 12px;
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.aik-sohyo-figure__caption {
	color: #7a6f63;
	font-size: .85em;
	line-height: 1.6;
	margin-top: .6em;
	text-align: left;
}

.aik-sohyo__credit {
	display: flex;
	flex-wrap: wrap;
	font-size: .88em;
	gap: .35em 1.2em;
	margin: 0;
}

.aik-sohyo__flow {
	color: #7a6f63;
}

.aik-sohyo__editor {
	font-weight: 700;
}

@media (min-width: 960px) {
	/* 本文幅が広い画面では図を読みやすい上限で止める。 */
	.aik-sohyo-figure__img {
		margin-inline: auto;
		max-width: 760px;
	}
}

@media (max-width: 599px) {
	.aik-sohyo-figure__caption,
	.aik-sohyo__credit {
		font-size: .82em;
	}

	.aik-sohyo__credit {
		gap: .2em;
	}
}

/* 図は常に明るい下地を持つので、暗い配色でも文字が沈まないよう枠だけ足す。 */
@media (prefers-color-scheme: dark) {
	.aik-sohyo-figure__img {
		box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
	}

	.aik-editor-credit,
	.aik-sohyo__lead,
	.aik-sohyo__flow,
	.aik-sohyo-figure__caption {
		color: inherit;
		opacity: .78;
	}
}