/*===============================================================================
タイトル
================================================================================*/
.c-title{
	font-size: clamp(1.75rem, 1.214rem + 1.43vw, 2.5rem);
	font-weight: var(--fw-xl);
}
.c-title.--fz-lg{
	font-size: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
}
.c-title.--fz-sm{
	font-size: 1.75rem;
}
.c-title.--fz-xs{
	font-size: 1.5rem;
}
/*===============================
* 2行タイトル
* =================================*/
.c-rows-title{
	text-align: center;
	line-height: var(--lh-xs);
	font-weight: var(--fw-lg);
	color: var(--c-main);
}
.c-rows-title__main{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .4em 0;
	font-weight: var(--fw-xl);
}
/* data属性がある場合のみ */
.c-rows-title[data-title]::after{
	content: attr(data-title);
	display: inline-block;
	line-height: var(--lh-xs);
	font-size: clamp(1rem, 0.643rem + 0.95vw, 1.5rem);
	text-transform: capitalize;
}



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

/*===============================================================================
下線テキスト
================================================================================*/
.c-underline{
	--top-line: 55%;
	--bottom-line: 100%;
	display: inline;
	background: linear-gradient(
		transparent 0%, transparent var(--top-line), 
		rgba(244, 217, 79, 0.7) var(--top-line), rgba(244, 217, 79, 0.7) var(--bottom-line), 
		transparent var(--bottom-line), transparent 100%
	);
}



/*===============================================================================
両サイドに装飾アイコン有り：TOP>Q&A
================================================================================*/
.c-deco-text{
	display: inline-flex;
	gap: .75rem;
}
.c-deco-text::before,
.c-deco-text::after{
	content: "";
	display: block;
	width: .7em;
	aspect-ratio: 8 / 7;
}
.c-deco-text::before{
	background: url(/wp-content/uploads/text-deco-icon-1.png) center center/contain no-repeat;
	align-self: flex-start;
}
.c-deco-text::after{
	background: url(/wp-content/uploads/text-deco-icon-2.png) center center/contain no-repeat;
	align-self: flex-end;
}



/*===============================================================================
その他
================================================================================*/
/*===============================
* 動画
* =================================*/
.video-container {
	position: relative;
	width: 100%;
}
.c-video{
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 96 / 54;
	object-fit: cover;
	object-position: 50% 50%;
	border-radius: var(--bd-r--lg);
	overflow: hidden;
}
.c-video.--flow__sp-video {
	aspect-ratio: 9 / 16;
}
.c-video.--flow__pc-video {
	display: none;
}
@media (min-width: 600px) {
	.c-video.--flow__sp-video {
		display: none;
	}
	.c-video.--flow__pc-video {
		aspect-ratio: 16 / 9;
		display: block;
	}
}



/*===============================================================================
もっと見る ＋　のアコーディオン
================================================================================*/
.c-text-accordion{
	--gap: .75em;
	--this-color: var(--c-main);
	display: block;
	width: 100%;
}

/**********************************
* ***質問
* **********************************/
.c-text-accordion__head{
	display: flex;
	justify-content: center;
	gap: var(--gap);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* js-hiddenが付与されている時は、summaryタグを非表示にする */
.c-text-accordion.js-hidden summary {
  display: none;
}
/* アニメーション */
.c-text-accordion[open] .c-text-accordion__head{
	margin-bottom: 2rem;
	/* 	padding-bottom: 2rem; */
	/* 	border-bottom: 1px solid var(--c-blue--dark); */
}
.c-text-accordion__head-inner{
	font-weight: var(--fw-lg);
	color: var(--this-color);
}
.c-text-accordion__head-text{
	text-decoration: underline;
}

/**********************************
* ***回答
* **********************************/
.c-text-accordion__body{
	display: flex;
	gap: var(--gap);
}
/* アニメーション */
.c-text-accordion[open] .c-text-accordion__body {
	animation: fadein 0.5s ease;
}
@keyframes fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.c-text-accordion__bodyInner{
	flex-grow: 1;
}

/**********************************
* ***開閉アイコン
* **********************************/
.c-text-accordion__toggle{
	--toggle-size: .6em;
	--toggle-weight: 2px;
	position: relative;
	display: inline-block;
	align-self: center;
	width: calc( var(--toggle-size) * 2 );
	min-width: calc( var(--toggle-size) * 2 );
	aspect-ratio: 1;
	border-radius: 50%;
	border: var(--toggle-weight) solid var(--this-color);
}
.c-text-accordion__toggle::before,
.c-text-accordion__toggle::after{
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	width: var(--toggle-size);
	height: var(--toggle-weight);
	background: var(--this-color);
	transition: var(--ani-t--normal) ease-out;
}
.c-text-accordion__toggle::before{transform: translate(-50%, -50%) rotate(90deg);}
.c-text-accordion__toggle::after{transform: translate(-50%, -50%) rotate(0deg);}

/* アニメーション */
.c-text-accordion[open] .c-text-accordion__toggle::before{transform: translate(-50%, -50%) rotate(180deg);}
.c-text-accordion[open] .c-text-accordion__toggle::after{
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* 既存のマーカー */
.c-text-accordion__head {
	list-style: none;
}
.c-text-accordion__head::-webkit-details-marker {
	display: none;
}