/*===============================================================================
タイトル
================================================================================*/

/*===============================================================================
自動折り返しテキスト
================================================================================*/
.c-autoWrap > * {
	display: inline-block;
}

/*===============================================================================
注釈テキスト
================================================================================*/
.c-note {
	display: flex;
}
.c-note::before {
	content: "※";
}
.c-note.--inline {
	display: inline-flex;
}

/*===============================================================================
■有りのテキスト
================================================================================*/
.c-iconText {
	display: flex;
	align-items: baseline;
}
.c-iconText.--square::before {
	content: "■";
}
.c-iconText.--circle::before {
	content: "〇";
}
.c-iconText.--inline {
	display: inline-flex;
}

/*===============================================================================
枠線エリア
================================================================================*/
.c-borderArea {
	padding: var(--g--sm) var(--g--md);
	border: 1px solid var(--c-gray);
}

/*===============================================================================
縁取りテキスト
================================================================================*/
.c-blur {
	--c-current: var(--c-light);
	--position: 2px;
	--blur: 1.5px;
	text-shadow: var(--position) var(--position) var(--blur) var(--c-current),
		calc(var(--position) * -1) calc(var(--position) * -1) var(--blur)
			var(--c-current),
		calc(var(--position) * -1) var(--position) var(--blur) var(--c-current),
		var(--position) calc(var(--position) * -1) var(--blur) var(--c-current),
		0 var(--position) var(--blur) var(--c-current),
		0 calc(var(--position) * -1) var(--blur) var(--c-current),
		calc(var(--position) * -1) 0 var(--blur) var(--c-current),
		var(--position) 0 var(--blur) var(--c-current);
}

/*===============================================================================
メディアテキスト（メディア540px）　使用箇所：
================================================================================*/
.c-mediaText {
	--count: 1;
	--gap: var(--g-24);
	--media-width: 98.57%;
	--body-width: calc(200% - var(--media-width));
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--gap);
}
@media (min-width: 768px) {
	.c-mediaText {
		--count: 2;
	}
}
.c-mediaText.--reverse {
	flex-direction: row-reverse;
}
/* 画像 */
.c-mediaText__media {
	flex-grow: 1;
	width: calc(
		(var(--media-width) - var(--gap) * (var(--count) - 1)) / var(--count)
	);
}
/* テキストエリア */
.c-mediaText__body {
	flex-grow: 1;
	width: calc(
		(var(--body-width) - var(--gap) * (var(--count) - 1)) / var(--count)
	);
}