/*===============================================================================
タイトル
================================================================================*/
.c-text{
	background: var(--c-gradient--text);
	background: -webkit-var(--c-gradient--text);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: var(--ff-m);
	font-size: clamp(1.5rem, .38vw + 1.41rem, 1.75rem);
}
.c-text:is(h2, h3, h4, h5, h6){
	margin: unset;
	padding: unset;
	border-top: unset;
	border-bottom: unset;
	line-height: unset;
}
.c-text:is(h2, h3, h4, h5, h6)::after{
	content: none;
}
.c-text.--fz-lg{
	font-size: clamp(1.75rem, 1.214rem + 1.43vw, 2.5rem);
}
.c-text.--fz-xl{
	font-size: 3rem;
}

/*===============================================================================
カラムタイトル
================================================================================*/
.c-colum-title{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	text-align: center;
}
/*===============================
* サブタイトル（装飾）
* =================================*/
.c-colum-title__subtitle span {
	position: relative;
	display: inline-block;
	margin-inline: auto;
	color: var(--c-main);
	font-size: clamp(1rem, .38vw + .91rem, 1.25rem);
	font-family: var(--ff-bask);
}
.c-colum-title__subtitle span::before {
	position: absolute;
	content: "";
	left: -6rem;
	top: 50%;
	transform: translateY(-50%) rotateY(180deg);
	width: 4.5rem;
	height: .75rem;
	background-image: url(/wp-content/uploads/title-deco.png);
	background-repeat: no-repeat no-repeat;
	background-size: contain;
}
.c-colum-title__subtitle span::after {
	position: absolute;
	content: "";
	right: -6rem;
	top: 50%;
	transform: translateY(-50%);
	width: 4.5rem;
	height: .75rem;
	background-image: url(/wp-content/uploads/title-deco.png);
	background-repeat: no-repeat no-repeat;
	background-size: contain;
}

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