/*===============================================================================
タイトル
================================================================================*/
/* 英文の両端に線があるタイトル */
.c-column-ttl {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.c-jp-ttl {
	--color: var(--c-blue-dark);
	font-size: clamp(1.75rem, 1.14vw + 1.47rem, 2.5rem);
	font-weight: var(--fw-lg);
	font-family: var(--ff-m);
	color: var(--color);
}
.c-en-ttl {
	--color: var(--c-blue-dark);
	display: flex;
	align-items: center;
	font-size: 1.25rem;
	font-weight: var(--fw-md);
	font-family: var(--ff-m);
	color: var(--color);
}
.c-en-ttl::before,
.c-en-ttl::after {
	content: "";
	background: var(--color);
	height: 1px;
	width: clamp(.5rem, .38vw + .41rem, .75rem);
}
.c-en-ttl::before {
	margin-right: .5rem;
}
.c-en-ttl::after {
	margin-left: .5rem;
}

/* 白色バージョン */
.c-jp-ttl.--c-jp-ttl-light {
	--color: var(--c-light);
}
.c-en-ttl.--c-en-ttl-light {
	--color: var(--c-light);
}

/*===============================================================================
自動折り返しテキスト
================================================================================*/
.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)
	);
}