/*===============================================================================
タイトル
================================================================================*/
.c-title{
	font-size: clamp(1.5rem, 1.143rem + 0.95vw, 2rem);
	font-weight: var(--fw-xl);
}
.c-title-sub{
	display: block;
	margin-bottom: 1.25rem;
	line-height: var(--lh-xs);
	text-transform: capitalize;
	font-size: 3em;
	color: var(--c-blue);
}
.c-title-main{
	font-weight: inherit;
	color: var(--c-main);
}


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

/*===============================================================================
波の区切りアイコン　使用箇所：TOP > MV
================================================================================*/
.c-icon-nami img{
	display: block;
	width: 100%;
	height: 100%;
}


/*===============================================================================
スクロールを促す
================================================================================*/
.c-scroll{
	--c-current: var(--c-blue);
	--scroll-fz: .75rem;
}
.c-scroll__text{
	display: inline-block;
	margin-bottom: .5rem;
	line-height: var(--lh-xs);
	font-weight: var(--fw-xl);
	font-size: var(--scroll-fz);
	color: var(--c-current);
}
/* line */
.c-scroll__line{
	position: relative;
	display: block;
	width: 2px;
	height: clamp(2.75rem, 0.25rem + 6.67vw, 6.25rem);
	margin-inline: auto;
	background-image: linear-gradient(to bottom, var(--c-current), var(--c-current) 3px, transparent 3px, transparent 8px);
	background-size: 1px 8px;
}
.c-scroll__line.--size-sm{
	height: clamp(2.75rem, 2.125rem + 1.67vw, 3.625rem);
}
/* circle */
.c-scroll__icon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	min-width: clamp(0.5rem, 0.321rem + 0.48vw, 0.75rem);
	transform-origin: top center;
	animation: dropSlowly 3.5s ease-in-out infinite;
}
@keyframes dropSlowly {
	0% {
		top: 0;
		transform: translate(-50%, 0) scale(0.5, 0.5);
		opacity: 0;
	}
	20% {
		top: 0;
		transform: translate(-50%, 0) scale(1, 1.1);
		opacity: 1;
	}
	70% {
		top: 80%;
		transform: translate(-50%, 0) scale(0.8, 1.3);
		opacity: 1;
	}
	90%, 100% {
		top: 100%;
		transform: translate(-50%, 0) scale(0.5, 1.5);
		opacity: 0;
	}
}

/*===============================================================================
背景色有りの背景画像
================================================================================*/
.c-bgi{
	background: var(--c-gradient);
}
.c-bgi img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: .4;
}
.c-bgi.--dark{
	background: var(--c-gradient--dark);
}
.c-bgi.--dark img{
	opacity: .2;
}