/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* .co_act >> */
/* __________________________________________________________________ */
/*
	transform: scale(.8);	>> scale: .8;
	↑iPhone14（2020年9月16日発売）以降は対応。Chrome/androidは2022-08-02以降なのでAndroid7（-Chrome119）以降は対応。
*/
/*
	clip-path のアニメーションは要素が消える（＝not-inview）と判定されるブラウザがあるので、co_act_child/co_act_nextで使うなど注意が必要。
*/


:root {
	--co-act-base-delay: 10ms;
	--co-act-delay-step: 150ms;
	--co-act-trY: 100%;
	--co-act-pre-visibility: hidden;
	--co-act-ease-1: var(--co-act-theme-ease,ease);
	--co-act-animation-1: co_fade_in;

	/* via: https://easings.net/ja , https://codepen.io/edankwan/pen/OPewzj */
	--co-easeInSine :cubic-bezier(.12,0,.39,0);   --co-easeOutSine :cubic-bezier(.61,1,.88,1);   --co-easeInOutSine :cubic-bezier(.37,0,.63,1);
	--co-easeInQuad :cubic-bezier(.11,0,.5,0);    --co-easeOutQuad :cubic-bezier(.5,1,.89,1);    --co-easeInOutQuad :cubic-bezier(.45,0,.55,1);
	--co-easeInCubic:cubic-bezier(.32,0,.67,0);   --co-easeOutCubic:cubic-bezier(.33,1,.68,1);   --co-easeInOutCubic:cubic-bezier(.65,0,.35,1);
	--co-easeInQuart:cubic-bezier(.5,0,.75,0);    --co-easeOutQuart:cubic-bezier(.25,1,.5,1);    --co-easeInOutQuart:cubic-bezier(.76,0,.24,1);
	--co-easeInQuint:cubic-bezier(.64,0,.78,0);   --co-easeOutQuint:cubic-bezier(.22,1,.36,1);   --co-easeInOutQuint:cubic-bezier(.83,0,.17,1);
	--co-easeInExpo :cubic-bezier(.7,0,.84,0);    --co-easeOutExpo :cubic-bezier(.16,1,.3,1);    --co-easeInOutExpo :cubic-bezier(.87,0,.13,1);
	--co-easeInCirc :cubic-bezier(.55,0,1,.45);   --co-easeOutCirc :cubic-bezier(0,.55,.45,1);   --co-easeInOutCirc :cubic-bezier(.85,0,.15,1);
	--co-easeInBack :cubic-bezier(.36,0,.66,-.56);--co-easeOutBack :cubic-bezier(.34,1.56,.64,1);--co-easeInOutBack :cubic-bezier(.68,-.6,.32,1.6);
	/* Quad:二次,Cubic:三次,Quart:四次,Quint:五次,Expo:指数,Sine:三角関数,Circ:円形,Elastic:弾性 */
}

/* 一度に表示された要素のDOMツリー順でdelayを付ける */
[data-inview-count]{    --co-act-inview-count: 9}
[data-inview-count="1"]{--co-act-inview-count: 0}
[data-inview-count="2"]{--co-act-inview-count: 1}
[data-inview-count="3"]{--co-act-inview-count: 2}
[data-inview-count="4"]{--co-act-inview-count: 3}
[data-inview-count="5"]{--co-act-inview-count: 4}
[data-inview-count="6"]{--co-act-inview-count: 5}
[data-inview-count="7"]{--co-act-inview-count: 6}
[data-inview-count="8"]{--co-act-inview-count: 7}
[data-inview-count="9"]{--co-act-inview-count: 8}
.co_act_delay_0,.co_act_child>:nth-child(1){--co-act-base-delay:0ms}
.co_act_delay_1,.co_act_child>:nth-child(2){--co-act-base-delay:calc(var(--co-act-delay-step) * 1)}
.co_act_delay_2,.co_act_child>:nth-child(3){--co-act-base-delay:calc(var(--co-act-delay-step) * 2)}
.co_act_delay_3,.co_act_child>:nth-child(4){--co-act-base-delay:calc(var(--co-act-delay-step) * 3)}
.co_act_delay_4,.co_act_child>:nth-child(5){--co-act-base-delay:calc(var(--co-act-delay-step) * 4)}
.co_act_delay_5,.co_act_child>:nth-child(6){--co-act-base-delay:calc(var(--co-act-delay-step) * 5)}
.co_act_delay_6,.co_act_child>:nth-child(7){--co-act-base-delay:calc(var(--co-act-delay-step) * 6)}
.co_act_delay_7,.co_act_child>:nth-child(8){--co-act-base-delay:calc(var(--co-act-delay-step) * 7)}
.co_act_delay_8,.co_act_child>:nth-child(9){--co-act-base-delay:calc(var(--co-act-delay-step) * 8)}
.co_act_delay_9{--co-act-base-delay:calc(var(--co-act-delay-step) * 9)}



/* [ act ]→ */
/* 	co_act_left	co_act_top
	co_act_right	co_act_bottom
	co_act_both			 */
:where(.co_act,.co_act_next+*,.co_act_child>*,.co_act_delay_serial .co_sq) {
	--co-act-delay: calc((var(--co-act-inview-count,0) * var(--co-act-delay-step,550ms)) + var(--co-act-base-delay,10ms) + var(--co-act-add-delay,0ms));
	--co-act-code-1: var(--co-act-animation-1) var(--co-act-duration-1) var(--co-act-ease-1) var(--co-act-delay) both;
	--co-act-code-2: var(--co-act-animation-1) var(--co-act-duration-1) var(--co-act-ease-1) var(--co-act-delay) both,
				var(--co-act-animation-2) var(--co-act-duration-2,var(--co-act-duration-1)) var(--co-act-ease-2,var(--co-act-ease-1)) calc(var(--co-act-delay-2,0ms) + var(--co-act-delay)) both;
	--co-act-code: var(--co-act-code-1);
	will-change: var(--co-act-change, transform); /* transform,opacity,clip-path,filter */
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	visibility: var(--co-act-pre-visibility,hidden);
}
.co_sq {display:inline-block}
.co_act_no_delay:where(.co_act,.co_act_next+*,.co_act_child>*,.co_act_delay_serial .co_sq) {--co-act-delay-step:0ms}
.co_act_reverse:where(.co_act,.co_act_next+*,.co_act_child>*,.co_act_delay_serial .co_sq) {--co-act-direction:reverse}

:where(.inview,.co_act_once.view).co_act,
:where(.inview,.co_act_once.view).co_act_next+*,
:where(.inview,.co_act_once.view).co_act_child>*,
:where(.inview,.co_act_once.view).co_act_delay_serial .co_sq {
	animation: var(--co-act-code) var(--co-act-direction,normal);
	visibility: visible;
}
/* ←[ act ] */


:where(.co_act_clip_in,.co_act_clip_in.co_act_next+*) {
	--co-act-change: clip-path;
	--co-act-animation-1: co_clip_left_in;
	--co-act-duration-1: 500ms;
}
	:where(.co_act_clip_in.co_act_right,.co_act_clip_in.co_act_right.co_act_next+*) {
		--co-act-animation-1: co_clip_right_in;
	}
	:where(.co_act_clip_in.co_act_both,.co_act_clip_in.co_act_both.co_act_next+*) {
		--co-act-animation-1: co_clip_both_in;
	}
	:where(.co_act_clip_in.co_act_top,.co_act_clip_in.co_act_top.co_act_next+*) {
		--co-act-animation-1: co_clip_top_in;
	}
	:where(.co_act_clip_in.co_act_bottom,.co_act_clip_in.co_act_bottom.co_act_next+*) {
		--co-act-animation-1: co_clip_bottom_in;
	}

:where(.co_act_slide_in,.co_act_slide_in.co_act_next+*) {
	--co-act-change: translate;
	--co-act-animation-1: co_slide_right_in;
	--co-act-duration-1: 500ms;
}
	:where(.co_act_slide_in.co_act_left,.co_act_slide_in.co_act_left.co_act_next+*) {
		--co-act-animation-1: co_slide_left_in;
	}
	:where(.co_act_slide_in.co_act_top,.co_act_slide_in.co_act_top.co_act_next+*) {
		--co-act-animation-1: co_slide_top_in;
	}
	:where(.co_act_slide_in.co_act_bottom,.co_act_slide_in.co_act_bottom.co_act_next+*) {
		--co-act-animation-1: co_slide_bottom_in;
	}

:where(.co_act_slide_clip_in,.co_act_slide_clip_in.co_act_next+*,.co_act_slide_clip_in.co_act_delay_serial .co_sq) {
	--co-act-code: var(--co-act-code-2);
}
:where(.co_act_slide_clip_in,.co_act_slide_clip_in.co_act_next+*) {
	--co-act-change: clip-path, translate;
	--co-act-animation-1: co_clip_left_in;
	--co-act-duration-1: 500ms;
	--co-act-animation-2: co_slide_right_in;
	--co-act-duration-2: 500ms;
}
	:where(.co_act_slide_clip_in.co_act_right,.co_act_slide_clip_in.co_act_right.co_act_next+*) {
		--co-act-animation-1: co_clip_right_in;
		--co-act-animation-2: co_slide_left_in;
	}
	:where(.co_act_slide_clip_in.co_act_top,.co_act_slide_clip_in.co_act_top.co_act_next+*) {
		--co-act-animation-1: co_clip_top_in;
		--co-act-animation-2: co_slide_top_in;
	}
	:where(.co_act_slide_clip_in.co_act_bottom,.co_act_slide_clip_in.co_act_bottom.co_act_next+*) {
		--co-act-animation-1: co_clip_bottom_in;
		--co-act-animation-2: co_slide_bottom_in;
	}

:where(.co_act_flip,.co_act_flip.co_act_next+*) {
	--co-act-change: opacity,rotate;
	--co-act-animation-1: co_flip_x_in;
	--co-act-duration-1: 900ms;
	/* child に置く場合と結果が変わるかも */
	transform-style: preserve-3d;
	perspective: 100vw;
	transform-origin: right;
}
	:where(.co_act_flip.co_act_left,.co_act_flip.co_act_left.co_act_next+*) {
		--co-act-animation-1: co_flip_x_in;
		transform-origin: left;
	}
	:where(.co_act_flip.co_act_top,.co_act_flip.co_act_top.co_act_next+*) {
		--co-act-animation-1: co_flip_y_in;
		transform-origin: top;
	}
	:where(.co_act_flip.co_act_bottom,.co_act_flip.co_act_bottom.co_act_next+*) {
		--co-act-animation-1: co_flip_y_in;
		transform-origin: bottom;
	}

:where(.co_act_circle_in,.co_act_circle_in.co_act_next+*) {
	--co-act-change: clip-path;
	--co-act-animation-1: co_circle_in;
	--co-act-duration-1: 1300ms;
	--act-x: 20%;
	--act-y: 80%;
}
	:where(.co_act_circle_in.co_act_right,.co_act_circle_in.co_act_right.co_act_next+*) {
		--act-x: 80%;
		--act-y: 80%;
	}
	:where(.co_act_circle_in.co_act_top,.co_act_circle_in.co_act_top.co_act_next+*) {
		--act-x: 50%;
		--act-y: 0%;
	}
	:where(.co_act_circle_in.co_act_bottom,.co_act_circle_in.co_act_bottom.co_act_next+*) {
		--act-x: 50%;
		--act-y: 100%;
	}

:where(.co_act_circle_in_lg,.co_act_circle_in_lg.co_act_next+*) {
	--co-act-change: clip-path;
	--co-act-animation-1: co_circle_in_lg;
	--co-act-duration-1: 2000ms;
	--act-x: 150vmax;
	--act-y: center;
}
	:where(.co_act_circle_in_lg.co_act_right,.co_act_circle_in_lg.co_act_right.co_act_next+*) {
		--act-x: -150vmax;
		--act-y: center;
	}
	:where(.co_act_circle_in_lg.co_act_top,.co_act_circle_in_lg.co_act_top.co_act_next+*) {
		--act-x: center;
		--act-y: -150vmax;
	}
	:where(.co_act_circle_in_lg.co_act_bottom,.co_act_circle_in_lg.co_act_bottom.co_act_next+*) {
		--act-x: center;
		--act-y: 150vmax;
	}

:where(.co_act_fade_in_from,.co_act_fade_in_from.co_act_next+*) {
	--co-act-change: opacity,translate;
	--co-act-animation-1: co_fade_in_from_bottom;
	--co-act-duration-1: 800ms;
	--co-act-ease-1: cubic-bezier(0,0,0,.87);
	--co-act-base-delay: 250ms;
	--co-act-trY: 30px;
}	/* https://b-risk.jp/blog/2021/01/anim-reference/*/
	:where(.co_act_fade_in_from.co_act_top,.co_act_fade_in_from.co_act_top.co_act_next+*) {
		--co-act-animation-1: co_fade_in_from_top;
	}
	:where(.co_act_fade_in_from.co_act_left,.co_act_fade_in_from.co_act_left.co_act_next+*) {
		--co-act-animation-1: co_fade_in_from_left;
	}
	:where(.co_act_fade_in_from.co_act_right,.co_act_fade_in_from.co_act_right.co_act_next+*) {
		--co-act-animation-1: co_fade_in_from_right;
	}

:where(.co_act_zoom,.co_act_zoom.co_act_next+*,.co_act_zoom.co_act_child>*) {
	--co-act-sc: .95;
	--co-act-change: transform;
	--co-act-animation-1: co_zoom;
	--co-act-ease-1: var(--co-easeOutCirc);
	--co-act-duration-1: 400ms;
	transform-origin: bottom;
}

:where(.co_act_blur,.co_act_blur.co_act_next+*,.co_act_blur.co_act_child>*) {
	--co-act-change: filter;
	--co-act-animation-1: co_blur_in;
	--co-act-duration-1: 1000ms;
	--co-act-ease-1: var(--co-easeOutCirc);
	--co-act-deg: calc(var(--max-width,10rem) / 2);
}

:where(.co_act_load_in,.co_act_load_in.co_act_next+*,.co_act_load_in.co_act_child>*) {
	--co-act-change: text-indent;
	--co-act-animation-1: co_load_in;
	--co-act-duration-1: 900ms;
}


@keyframes co_fade_in {
	0%{opacity: 0}
	to{opacity: 1}
}
@keyframes co_fade_in_half {
	0%{opacity: .4}
	to{opacity: 1}
}
@keyframes co_fade_in_out {
	0% {opacity: 0}
	50%{opacity: 1}
	to {opacity: 0}
}
@keyframes co_zoom {
	0%{transform: scale(var(--co-act-sc,.8))}
	to{transform: scale(1)}
}
@keyframes co_flip_y_in {
	0% {opacity: 0;rotate: 1 0 0 var(--co-act-deg,180deg)}
	70%{opacity: 1}
	to {opacity: 1;rotate: 1 0 0 0deg}
}
@keyframes co_flip_x_in {
	0% {opacity: 0;rotate: 0 1 0 var(--co-act-deg,180deg)}
	70%{opacity: 1}
	to {opacity: 1;rotate: 0 1 0 0deg}
}
@keyframes co_clip_top_in {
	0%{clip-path: inset(100% 0 0 0)}
	to{clip-path: inset(0 0 0 0)}
}
@keyframes co_clip_bottom_in {
	0%{clip-path: inset(0 0 100% 0)}
	to{clip-path: inset(0 0 0 0)}
}
@keyframes co_clip_left_in {
	0%{clip-path: inset(0 100% 0 0)}
	to{clip-path: inset(0 0 0 0)}
}
@keyframes co_clip_right_in {
	0%{clip-path: inset(0 0 0 100%)}
	to{clip-path: inset(0 0 0 0)}
}
@keyframes co_clip_both_in {
	0%{clip-path: inset(0 100% 0 100%)}
	to{clip-path: inset(0 0 0 0)}
}
@keyframes co_slide_left_in {
	0%{translate: calc(-1 * var(--co-act-trX,100%)) 0 0}
	to{translate: 0 0 0}
}
@keyframes co_slide_right_in {
	0%{translate: var(--co-act-trX,100%) 0 0}
	to{translate: 0 0 0}
}
@keyframes co_slide_top_in {
	0%{translate: 0 calc(-1 * var(--co-act-trY,100%)) 0}
	to{translate: 0 0 0}
}
@keyframes co_slide_bottom_in {
	0%{translate: 0 var(--co-act-trY,100%) 0}
	to{translate: 0 0 0}
}

@keyframes co_load_in {
	0%{text-indent: var(--co-act-trX,-200vw)}
	to{text-indent: 0}
}
@keyframes co_blur_in {
	0%{filter: blur(calc(var(--co-act-deg,1rem) / 2)) grayscale(1) contrast(0) brightness(1.75)}
	35%{filter: blur(calc(var(--co-act-deg,1rem) / 4)) grayscale(1) contrast(1) brightness(1.5)}
	to {filter: blur(0px) grayscale(0) contrast(1) brightness(1)}
}
@keyframes co_circle_in {
	0%{clip-path: circle(0% at var(--act-x, 50%) var(--act-y, 100%))}
	to{clip-path: circle(var(--act-r, 200%) at var(--act-x, 50%) var(--act-y, 100%))}
}
@keyframes co_circle_in_lg {
	0%{clip-path: circle(100vmax at var(--act-x, 150vmax) var(--act-y, center))}
	to{clip-path: circle(100vmax at center center)}
}
@keyframes co_fade_in_from_top {
	0% {opacity: 0;transform: translateY(calc(var(--co-act-trY,20px) * -1))}
	90% {opacity: 1}
	100% {transform: translateY(0)}
}
@keyframes co_fade_in_from_bottom {
	0% {opacity: 0;transform: translateY(var(--co-act-trY,20px))}
	90% {opacity: 1}
	100% {transform: translateY(0)}
}
@keyframes co_fade_in_from_left {
	0% {opacity: 0;transform: translateX(calc(var(--co-act-trY,20px) * -1))}
	90% {opacity: 1}
	100% {transform: translateX(0)}
}
@keyframes co_fade_in_from_right {
	0% {opacity: 0;transform: translateX(var(--co-act-trY,20px))}
	90% {opacity: 1}
	100% {transform: translateX(0)}
}




/*
	テキストを隠しておいて表示（バー撤退）
	p>span.co_act.co_act_hide_text
*/
:where(.co_act_hide_text,.co_act_hide_text.co_act_next+*,.co_act_hide_text.co_act_child>*) {
	display: inline;
	background-image: linear-gradient(90deg,var(--col-txt) 0 0);
	background-repeat: no-repeat;
	--co-act-animation-1: co_hide_text_bar;
	--co-act-duration-1: 1000ms;
}
	:where(.co_act_hide_text_inout):where(.co_act_hide_text,.co_act_hide_text.co_act_next+*,.co_act_hide_text.co_act_child>*) {
		-webkit-mask-image: linear-gradient(90deg,#000 100% 0,rgba(0,0,0,0) 0 0);
		-webkit-mask-repeat: no-repeat;
		mask-image: linear-gradient(90deg,#000 100% 0,rgba(0,0,0,0) 0 0);
		mask-repeat: no-repeat;
		--co-act-animation-1: co_hide_text_inout2;
		--co-act-duration-1: 2500ms;
		--co-act-ease-1: ease-out;
		--co-act-base-delay: 0ms;
	}	/* バー出現 → 文字 → バー撤退 */
	:where(.co_act_hide_text_clip):where(.co_act_hide_text,.co_act_hide_text.co_act_next+*,.co_act_hide_text.co_act_child>*) {
		--co-act-animation-1: co_hide_text_clip;
		--co-act-duration-1: 1100ms;
		-webkit-background-clip: text;
		background-clip: text;
	}	/* 文字出現 */

@keyframes co_hide_text_bar {
	0%	{
			background-size: 100% 100%;
		}
	100%	{
			background-size: 0% 100%;
		}
}
@keyframes co_hide_text_inout2 {
	0%	{
			background-size: 0% 100%;
			color: var(--col-transparent);
		}
	40%	{
			background-size: 100% 100%;
			color: var(--col-transparent);
		}
	65%	{
			background-size: 100% 100%;
			color: var(--col-txt);
		}
	100%	{
			background-size: 0% 100%;
			color: var(--col-txt);
		}
}
@keyframes co_hide_text_inout {
	0%	{
			-webkit-mask-size: 0% 100%;
			mask-size: 0% 100%;
		}
	40%	{
			-webkit-mask-size: 100% 100%;
			mask-size: 100% 100%;
		}
	65%	{
			background-size: 100% 100%;
		}
	100%	{
			background-size: 0% 100%;
		}
}
@keyframes co_hide_text_clip {
	0%	{
			background-size: 0% 100%;
			color: var(--col-transparent);
		}
	100%	{
			background-size: 100% 100%;
			color: var(--col-transparent);
		}
}



/*
	マスクで隠しておいて順番に表示（10列）
*/
/* https://little-strange.hatenablog.com/entry/2022/02/03/235338 >> n分割するのにbackground-positionの%指定の場合は(n-1)で割った値になる */
:where(.co_act.co_act_slice10,.co_act_slice10.co_act_next+*,.co_act_slice10.co_act_child>*) {
	-webkit-mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0)
			   ,linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: top;
	mask-position: top;
	-webkit-mask-position-x:      0%,11.11%,22.22%,33.33%,44.44%
				, 55.55%,66.66%,77.77%,88.88%,99.99%,100%;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0)
		   ,linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0),linear-gradient(#000 0 0);
	mask-repeat: no-repeat;
	/* @Chrome125.0.6422.176
	mask-position: top;
	mask-position-x:      0%,11.11%,22.22%,33.33%,44.44%
			, 55.55%,66.66%,77.77%,88.88%,99.99%,100%;
	*/
	mask-size: 100% 100%;
	--co-act-animation-1: co_slice10;
	--co-act-duration-1: 900ms;
	--co-act-ease-1: ease-out;
	--co-act-base-delay: 0ms;
	--co-act-direction: normal; /* normal/reverse/alternate/alternate-reverse */
}
	.co_act_right:where(.co_act_slice10,.co_act_slice10.co_act_next+*,.co_act_slice10.co_act_child>*) {--co-act-animation-1: co_slice10_right;}
	.co_act_left:where( .co_act_slice10,.co_act_slice10.co_act_next+*,.co_act_slice10.co_act_child>*) {--co-act-animation-1: co_slice10_left;}
	.co_act_both:where( .co_act_slice10,.co_act_slice10.co_act_next+*,.co_act_slice10.co_act_child>*) {--co-act-animation-1: co_slice10_both;}

@keyframes co_slice10_right {		/*     1         2         3         4         5         6         7         8         9         X	*/
	0%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	10%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%;		}
	20%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%;		}
	30%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%;		}
	40%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
	50%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
	60%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
	70%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
	80%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
	90%	{	-webkit-mask-size: 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
	100%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
}
@keyframes co_slice10_left {
	0%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	10%	{	-webkit-mask-size: 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	20%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	30%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	40%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	50%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	60%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	70%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%;		}
	80%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%;		}
	90%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%;		}
	100%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
}
@keyframes co_slice10_both {
	0%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	20%	{	-webkit-mask-size: 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%;	mask-size: 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%;		}
	40%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%;	mask-size: 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%;		}
	60%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%;		}
	80%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
	100%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
}
@keyframes co_slice10 {			/*     1         2         3         4         5         6         7         8         9         X	*/
	0%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	20%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%, 10%   0%;		}
	40%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%;	mask-size: 10%   0%, 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%, 10%   0%;		}
	60%	{	-webkit-mask-size: 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%;	mask-size: 10%   0%, 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%, 10%   0%;		}
	80%	{	-webkit-mask-size: 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%;	mask-size: 10%   0%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10%   0%;		}
	100%	{	-webkit-mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;	mask-size: 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%, 10% 100%;		}
}
		.co_act_bg_slice5 {
			background-image: linear-gradient(#000 0 0),linear-gradient(#0d0 0 0),linear-gradient(#d00 0 0),linear-gradient(#00d 0 0),linear-gradient(#dd0 0 0),linear-gradient(#000 0 0),linear-gradient(#0d0 0 0),linear-gradient(#d00 0 0),linear-gradient(#00d 0 0),linear-gradient(#dd0 0 0);
			background-repeat: no-repeat;
			background-position: top;
			background-position-x: 0%,25%,50%,75%,100%;
			background-size: 20% 100%;
			background-position-x:        0%,11.11%,22.22%,33.33%,44.44%
						, 55.55%,66.66%,77.77%,88.88%,99.99%,100%;
			background-size: 10% 100%;
		}
			.co_act_bg_slice5 {	/* for test */
				padding-block: 1rem;
				width: fit-content;
				margin-inline: auto;
			}
			.co_act_bg_slice5 img {	/* for test */
				opacity: .4;
			}
		.inview.co_act_bg_slice5 {
			animation: co_bg_slice5 500ms ease-out 0ms both;
		}
		@keyframes co_bg_slice5 {
			0%	{	background-size: 20% 100%, 20% 100%, 20% 100%, 20% 100%, 20% 100%;		}
			20%	{	background-size: 20%   0%, 20% 100%, 20% 100%, 20% 100%, 20% 100%;		}
			40%	{	background-size: 20%   0%, 20%   0%, 20% 100%, 20% 100%, 20% 100%;		}
			60%	{	background-size: 20%   0%, 20%   0%, 20%   0%, 20% 100%, 20% 100%;		}
			80%	{	background-size: 20%   0%, 20%   0%, 20%   0%, 20%   0%, 20% 100%;		}
			100%	{	background-size: 20%   0%, 20%   0%, 20%   0%, 20%   0%, 20%   0%;		}
		}

:where(.co_act.co_act_slice20,.co_act_slice20.co_act_next+*,.co_act_slice20.co_act_child>*) {
	--_l:linear-gradient(#000 0 0);
	-webkit-mask-position: top;
	mask-position: top;
	-webkit-mask-image:var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l);
	mask-image:var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l),var(--_l);
	-webkit-mask-position-x:0%,5.26%,10.53%,15.79%,21.05%,26.32%,31.58%,36.84%,42.11%,47.37%,52.63%,57.89%,63.16%,68.42%,73.68%,78.95%,84.21%,89.47%,94.74%,100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	--co-act-animation-1: co_slice20_left;
	--co-act-duration-1: 2000ms;
	--co-act-ease-1: ease-out;
	--co-act-base-delay: 0ms;
	--co-act-direction: normal; /* normal/reverse/alternate/alternate-reverse */
}
@keyframes co_slice20_left {		/*    1        2        3        4        5        6        7        8        9        10       11       12       13       14       15       16       17       18       19       20   	*/
	0%	{	-webkit-mask-size: 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	5%	{	-webkit-mask-size: 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	10%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	15%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	20%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	25%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	30%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	35%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	40%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	45%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	50%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	55%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	60%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	65%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	70%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	75%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	80%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	85%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%, 5.05%   0%;		}
	90%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%, 5.05%   0%;		}
	95%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05%   0%;		}
	100%	{	-webkit-mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%;	mask-size: 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%, 5.05% 100%;		}
} /* https://jsfiddle.net/71bk8jv2/3/ << slice maker */

/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* << .co_act */
/* __________________________________________________________________ */



/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* .co_act_gate >> */
/* __________________________________________________________________ */
/* gate >> */
.co_act_gate {
	left: 0;
	right: 0;
	z-index: 456;	/* .global->555 */
	--act-gate-duration: 0s;
	--act-gate-delay: 0s;
	--act-gate-tf: var(--co-easeInExpo);
	--act-gate-duration: 900ms;
}
	:where(.inview,.co_act_once.view).co_act_gate {
		--act-gate-duration: 300ms;
		--act-gate-delay: 1000ms;
	}
.co_act_gate,
.co_act_gate::before,
.co_act_gate::after {
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
}
.co_act_gate::before,
.co_act_gate::after {
	content: "";
	width: 50%;
	background-color: var(--col-gray);
	transition: transform var(--act-gate-duration) var(--act-gate-tf) var(--act-gate-delay);
	will-change: transform;
}
.co_act_gate::before{left:0}
.co_act_gate::after{right:0}
	:where(.inview,.co_act_once.view).co_act_gate::before{transform:translateX(-50vw)}
	:where(.inview,.co_act_once.view).co_act_gate::after{transform:translateX(50vw)}

/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* << .co_act_gate */
/* __________________________________________________________________ */



/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* .co_act_under >> */
/* __________________________________________________________________ */

.co_act_under {
	position: absolute;
	z-index: 444;
	bottom: 1em;
	width: 100%;
	display: block;
	min-width: 3em;
	text-align: center;
	text-decoration: none;

	--hu: min(7vh,var(--spacing-3xl));
	--wu: 2px;
	--op-st: 0;
	--op-ed: .7;
	--ms: 2000ms;
	--co: var(--col-f);
	--ff: var(--font-en, "niveau-grotesk"), sans-serif;
	--fw: var(--font-en-weight, var(--font-base-weight));
	--fs: 14px;

	padding-bottom: var(--hu);
	color: var(--co);
	font-family: var(--ff, sans-serif);
	font-weight: var(--fw, 300);
	font-size: var(--fs,14px);
	opacity: var(--op-ed,.7);
}
.co_act_under:hover {
	--op-st: .2;
	--op-ed: .9;
}
@media (max-width:639px){
	.co_act_under {
		bottom: .5em;
	}
}
.co_act_under::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: var(--wu,2px);
	height: var(--hu,100px);
	background-color: var(--co);
	animation: var(--ms) ease-out 0ms infinite backwards co_act_under3;
	animation-play-state: running;
	transform-origin: center top;
	animation-timing-function: cubic-bezier(.48,.22,.84,1.05);
}
@keyframes co_act_under3 {
	    0% {
		scale: 1 0;
	}  50% {
		scale: 1 1;
		translate: 0 0;
	} 100% {
		scale: 1 0;
		translate: 0 100%;
	}
}

/* ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ */
			/* << .co_act_under */
/* __________________________________________________________________ */