/*===============================================================================
タイトル
================================================================================*/
.c-text{
	font-weight: var(--fw-lg);
	font-size: clamp(1.75rem, 1.214rem + 1.43vw, 2.5rem);
}
.c-text.--fz-sm{
	font-size: 1.25rem;
}


/*===============================================================================
自動折り返しテキスト
================================================================================*/
.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-line-text {
	--bg-color: rgba(255, 255, 255, 1);
    --line-color: var(--c-gray);
    --line-weight: 1px;
    --line-height: 2.4em;
    background-color: var(--bg-color);
    background-image: linear-gradient(90deg, transparent 0%, transparent 50%, var(--bg-color) 50%, var(--bg-color) 100%), linear-gradient(0deg, var(--line-color) var(--line-weight), transparent var(--line-weight));
    background-size: 8px 100%, 100% var(--line-height);
    line-height: var(--line-height);
    padding-bottom: var(--line-weight);
    padding-bottom: 0;
}

/*===============================================================================
メディアテキスト（メディア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)
	);
}