@charset "UTF-8";

/* --------------------------------------------
MAIN VISUAL
--------------------------------------------- */
#mv{
	position : relative;
	z-index : 1;
	overflow : clip;
	background-repeat : no-repeat;
	background-position : center top;
	&::before , &::after{
		position : absolute;
		display : block;
		font-size : 0;
		content : "";
	}
	&::before{
		left : 50%;
		z-index : -1;
		width : auto;
		aspect-ratio : 1;
		background-color : white;
		border-radius : 50%;
		translate : -50% 0;
	}
	&::after{
		bottom : 0;
		left : 0;
		z-index : 0;
		width : 100%;
	}
	hgroup{
		&::before , &::after{
			position : absolute;
			display : block;
			width : auto;
			font-size : 0;
			content : "";
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
		&::before{
			background-image : image-set( url( "../images/top/mv/char01.avif" ) type( "image/avif" ) , url( "../images/top/mv/char01.webp" ) type( "image/webp" ) );
		}
		&::after{
			background-image : image-set( url( "../images/top/mv/char02.avif" ) type( "image/avif" ) , url( "../images/top/mv/char02.webp" ) type( "image/webp" ) );
		}
		p{
			> span{
				grid-column : 2;
				font-weight : 700;
				text-align : center;
				&:nth-of-type( 2 ){
					color : var( --primary );
				}
			}
		}
		h1{
			span{
				display : block;
				align-content : center;
				margin-inline : auto;
				font-weight : 900;
				color : white;
				text-align : center;
				background-color : var( --primary );
				box-shadow : calc( 3 * var( --remBase ) ) calc( 5 * var( --remBase ) ) calc( 5 * var( --remBase ) ) color-mix( in sRGB , black 18% , transparent );
				&:nth-of-type( 1 ){
					text-align : center;
					text-indent : .11em;
					letter-spacing : .11em;
				}
				&:nth-of-type( 2 ){
					text-align : center;
					text-indent : .02em;
					letter-spacing : .02em;
				}
			}
		}
	}
	>p{
		position : relative;
		z-index : 1;
		font-weight : 700;
		text-align : center;
		strong{
			position : relative;
			display : block;
			width : fit-content;
			margin-inline : auto;
			font-weight : 900;
			text-align : center;
			text-indent : -.05em;
			letter-spacing : -.05em;
			&::before{
				position : absolute;
				bottom : 0;
				z-index : -1;
				display : block;
				font-size : 0;
				content : "";
				background-color : color-mix( in sRGB , var( --primary ) 50% , transparent );
			}
		}
	}
	dl{
		position : relative;
		z-index : 2;
		display : flex;
		justify-content : center;
		> div{
			width : auto;
			background : image-set( url( "../images/ui/bg/ring01.avif" ) type( "image/avif" ) , url( "../images/ui/bg/ring01.webp" ) type( "image/webp" ) ) center / contain no-repeat;
		}
		dt{
			font-weight : 700;
			text-align : center;
			text-align : center;
			text-indent : .05em;
			letter-spacing : .05em;
			span{
				text-align : center;
				text-indent : .05em;
				letter-spacing : .05em;
			}
		}
		dd{
			font-family : Roboto;
			font-weight : 900;
			color : var( --orange );
			span{
				color : black;
			}
		}
		> div{
			&:nth-of-type( 1 ){
				dd{
					letter-spacing : -.04em;
					span{
						letter-spacing : -.05em;
					}
				}
			}
			&:nth-of-type( 2 ){
				dd{
					/* letter-spacing: -0.05em; */
					display : flex;
					align-items : start;
					span{
						letter-spacing : -.05em;
					}
				}
			}
			&:nth-of-type( 3 ){
				dd{
					letter-spacing : -.06em;
					span{
						letter-spacing : -.05em;
					}
				}
			}
		}
	}
	.link01{
		z-index : 2;
		text-align : center;
		text-indent : .06em;
		letter-spacing : .06em;
		border-radius : calc( 5 * var( --remBase ) );
	}
	@media screen and ( width <= 730px ){
		height : calc( 579 * var( --remBase ) );
		padding-top : calc( 22 * var( --remBase ) );
		padding-bottom : calc( 33 * var( --remBase ) );
		background-image : image-set( url( "../images/top/mv/bg_sp.avif" ) type( "image/avif" ) , url( "../images/top/mv/bg_sp.webp" ) type( "image/webp" ) );
		background-size : 100% auto;
		&::before{
			top : calc( -13 * var( --remBase ) );
			height : calc( 365 * var( --remBase ) );
		}
		&::after{
			height : calc( 145 * var( --remBase ) );
			clip-path : polygon( 0 0 , 100% 0 , 100% calc( 130 * var( --remBase ) ) , calc( 50% + 14 * var( --viewportBase ) ) calc( 130 * var( --remBase ) ) , 50% 100% , calc( 50% - 14 * var( --viewportBase ) ) calc( 130 * var( --remBase ) ) , 0 calc( 130 * var( --remBase ) ) );
			background-image : linear-gradient( 153deg , #c2eeeb 0% , #88dfd2 45% , #80d9d5 97% );
		}
		hgroup{
			p{
				width : 100%;
				&::before , &::after{
					position : absolute;
					top : calc( 37.7 * var( --remBase ) );
					display : block;
					width : auto;
					height : calc( 34.47 * var( --remBase ) );
					aspect-ratio : 24.77/34.47;
					font-size : 0;
					content : "";
					background-repeat : no-repeat;
					background-position : left center;
					background-size : contain;
				}
				&::before{
					left : calc( 63.58 * var( --viewportBase ) );
					background-image : url( "../images/top/mv/accent01_sp.svg" );
				}
				&::after{
					left : calc( 279.67 * var( --viewportBase ) );
					background-image : url( "../images/top/mv/accent02_sp.svg" );
				}
				> span{
					display : block;
					font-size : 1.9rem;
					line-height : calc( 24 / 19 );
					text-align : center;
					text-indent : .04em;
					letter-spacing : .04em;
					span{
						font-size : 1.5rem;
						line-height : 1.6;
						text-align : center;
						text-indent : .04em;
						letter-spacing : .04em;
					}
				}
			}
			h1{
				margin-top : calc( 8 * var( --remBase ) );
				span{
					width : 100%;
					height : calc( 77 * var( --remBase ) );
					border-radius : calc( 4 * var( --remBase ) );
					&:nth-of-type( 1 ){
						font-size : 5.1rem;
					}
					&:nth-of-type( 2 ){
						margin-top : calc( 6 * var( --remBase ) );
						font-size : 4.9rem;
					}
				}
			}
			&::before{
				top : calc( 222 * var( --remBase ) );
				left : calc( -46 * var( --viewportBase ) );
				height : calc( 321 * var( --remBase ) );
				aspect-ratio : 195/321;
			}
			&::after{
				top : calc( 222 * var( --remBase ) );
				left : calc( 194 * var( --viewportBase ) );
				height : calc( 309 * var( --remBase ) );
				aspect-ratio : 243/309;
			}
		}
		> p{
			margin-top : calc( 13 * var( --remBase ) );
			font-size : 1.4rem;
			line-height : calc( 19 / 14 );
			span span{
				font-size : 1.1rem;
				line-height : calc( 19 / 11 );
			}
			strong{
				padding-bottom : calc( 2 * var( --remBase ) );
				margin-top : calc( 6 * var( --remBase ) );
				font-size : 2.4rem;
				line-height : calc( 25 / 24 );
				&::before{
					left : 0;
					width : 100%;
					height : calc( 9 * var( --remBase ) );
				}
			}
		}
		dl{
			column-gap : calc( 7.74 * var( --percentBase ) );
			margin-top : calc( 91.64 * var( --remBase ) );
			> div{
				position : relative;
				height : calc( 97.68 * var( --remBase ) );
				aspect-ratio : 107.17/97.68;
				&:nth-of-type( 1 ){
					padding-top : calc( 2 * var( --remBase ) );
					dt{
						font-size : 1rem;
						line-height : 2.5;
					}
					dd{
						padding-left : calc( ( 18 - ( 63 * .06 ) ) * 100% / 107.17 );
						margin-top : calc( -6 * var( --remBase ) );
						font-size : 6.3rem;
						span{
							position : absolute;
							top : calc( 51 * var( --remBase ) );
							left : calc( 72 * 100% / 107.17 );
							font-size : 1.5rem;
							line-height : calc( 25 / 15 );
						}
					}
				}
				&:nth-of-type( 2 ){
					padding-top : calc( 1.164 * var( --remBase ) );
					dt{
						font-size : 1rem;
						line-height : 2.5;
					}
					dd{
						padding-left : calc( 29.09 * 100% / 107.17 );
						margin-top : calc( -8 * var( --remBase ) );
						font-size : 6.4rem;
						span{
							margin-top : calc( 32 * var( --remBase ) );
							font-size : 1rem;
							line-height : 1.1;
						}
					}
				}
				&:nth-of-type( 3 ){
					padding-top : calc( 1 * var( --remBase ) );
					dt{
						font-size : .9rem;
						line-height : calc( 11 / 9 );
						span{
							font-size : 1rem;
							line-height : 1.1;
						}
					}
					dd{
						padding-left : calc( 21.88 * 100% / 107.17 );
						margin-top : calc( -4 * var( --remBase ) );
						font-size : 5.9rem;
						span{
							position : absolute;
							top : calc( 59.18 * var( --remBase ) );
							left : calc( 66.17 * 100% / 107.17 );
							font-size : 1rem;
							line-height : 1.2;
						}
					}
				}
			}
			dd{
				span{
					text-shadow : calc( 1.2 * var( --remBase ) ) 0 0 white , calc( -1 * 1.2 * var( --remBase ) ) 0 0 white , 0 calc( 1.2 * var( --remBase ) ) 0 white , 0 calc( -1 * 1.2 * var( --remBase ) ) 0 white , calc( sqrt( 1.2 ) * var( --remBase ) ) calc( sqrt( 1.2 ) * var( --remBase ) ) 0 white , calc( -1 * sqrt( 1.2 ) * var( --remBase ) ) calc( sqrt( 1.2 ) * var( --remBase ) ) 0 white , calc( sqrt( 1.2 ) * var( --remBase ) ) calc( -1 * sqrt( 1.2 ) * var( --remBase ) ) 0 white , calc( -1 * sqrt( 1.2 ) * var( --remBase ) ) calc( -1 * sqrt( 1.2 ) * var( --remBase ) ) 0 white;
				}
			}
		}
		.link01{
			width : calc( 300 * var( --percentBase ) );
			height : calc( 31 * var( --remBase ) );
			margin-top : calc( 5.32 * var( --remBase ) );
			font-size : 2rem;
			line-height : 1.25;
			&::after{
				right : calc( 12.59 * 100% / 300 );
				height : calc( 11.41 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 730px ){
		height : calc( 633 * var( --remBase ) );
		padding-top : calc( 34 * var( --remBase ) );
		padding-bottom : calc( 39 * var( --remBase ) );
		background-image : image-set( url( "../images/top/mv/bg_pc.avif" ) type( "image/avif" ) , url( "../images/top/mv/bg_pc.webp" ) type( "image/webp" ) );
		background-size : 100% calc( 537 * var( --remBase ) );
		&::before{
			top : calc( -26 * var( --remBase ) );
			height : calc( 628 * var( --remBase ) );
		}
		&::after{
			height : calc( 161 * var( --remBase ) );
			clip-path : polygon( 0 0 , 100% 0 , 100% calc( 137 * var( --remBase ) ) , calc( 50% + min( 49px , 49 * var( --viewportBase ) ) ) calc( 137 * var( --remBase ) ) , 50% 100% , calc( 50% - min( 49px , 49 * var( --viewportBase ) ) ) calc( 137 * var( --remBase ) ) , 0 calc( 137 * var( --remBase ) ) );
			background-image : linear-gradient( 171deg , #80d9d5 3% , #88dfd2 55% , #80d9d5 100% );
		}
		hgroup{
			p{
				display : grid;
				column-gap : calc( 2 * var( --percentBase ) );
				align-items : start;
				justify-content : center;
				&::before , &::after{
					display : block;
					grid-row : 1/3;
					align-self : end;
					width : auto;
					font-size : 0;
					content : "";
					background-repeat : no-repeat;
					background-position : left center;
					background-size : contain;
				}
				&::before{
					grid-column : 1;
					background-image : url( "../images/top/mv/accent01_pc.svg" );
				}
				&::after{
					grid-column : 3;
					background-image : url( "../images/top/mv/accent02_pc.svg" );
				}
				&::before , &::after{
					height : calc( 49 * var( --remBase ) );
					aspect-ratio : 35/49;
					margin-bottom : calc( 5 * var( --remBase ) );
				}
				> span{
					font-size : 2.8rem;
					line-height : calc( 32 / 28 );
					span{
						font-size : 2.3rem;
						line-height : calc( 32 / 23 );
					}
					&:nth-of-type( 1 ){
						grid-row : 1;
						text-align : center;
						text-indent : .13em;
						letter-spacing : .13em;
					}
					&:nth-of-type( 2 ){
						grid-row : 2;
						text-align : center;
						text-indent : .07em;
						letter-spacing : .07em;
					}
				}
			}
			h1{
				margin-top : calc( 4 * var( --remBase ) );
				span{
					width : calc( 355 * var( --percentBase ) );
					border-radius : calc( 4 * var( --remBase ) );
					&:nth-of-type( 1 ){
						height : calc( 81 * var( --remBase ) );
						font-size : 5.8rem;
					}
					&:nth-of-type( 2 ){
						height : calc( 79 * var( --remBase ) );
						margin-top : calc( 6 * var( --remBase ) );
						font-size : 5.3rem;
					}
				}
			}
			&::before{
				top : calc( 36 * var( --remBase ) );
				left : calc( 50% - min( 452px , 452 * var( --viewportBase ) ) );
				height : calc( 521 * var( --remBase ) );
				aspect-ratio : 315/521;
			}
			&::after{
				top : calc( 51 * var( --remBase ) );
				left : calc( 50% + min( 114px , 114 * var( --viewportBase ) ) );
				height : calc( 467 * var( --remBase ) );
				aspect-ratio : 367/467;
			}
		}
		> p{
			margin-top : calc( 20 * var( --remBase ) );
			font-size : 2rem;
			line-height : 1.4;
			text-align : center;
			text-indent : .1em;
			letter-spacing : .1em;
			> span{
				text-shadow : calc( 2 * var( --remBase ) ) 0 0 white , calc( -1 * 2 * var( --remBase ) ) 0 0 white , 0 calc( 2 * var( --remBase ) ) 0 white , 0 calc( -1 * 2 * var( --remBase ) ) 0 white , calc( sqrt( 2 ) * var( --remBase ) ) calc( sqrt( 2 ) * var( --remBase ) ) 0 white , calc( -1 * sqrt( 2 ) * var( --remBase ) ) calc( sqrt( 2 ) * var( --remBase ) ) 0 white , calc( sqrt( 2 ) * var( --remBase ) ) calc( -1 * sqrt( 2 ) * var( --remBase ) ) 0 white , calc( -1 * sqrt( 2 ) * var( --remBase ) ) calc( -1 * sqrt( 2 ) * var( --remBase ) ) 0 white;
			}
			strong{
				padding-bottom : calc( 7 * var( --remBase ) );
				padding-left : calc( 4 * var( --remBase ) );
				padding-right : calc( 8 * var( --remBase ) );
				margin-top : calc( 5 * var( --remBase ) );
				font-size : 3.7rem;
				line-height : 1;
				&::before{
					left : calc( -4 * var( --remBase ) );
					width : calc( 100% + ( 4 - 8 ) * var( --remBase ) );
					height : calc( 13 * var( --remBase ) );
				}
			}
		}
		dl{
			column-gap : calc( 9.43 * var( --percentBase ) );
			margin-top : calc( 29 * var( --remBase ) );
			> div{
				height : calc( 117 * var( --remBase ) );
				aspect-ratio : 130.57/117;
				&:nth-of-type( 1 ){
					dt{
						font-size : 1.3rem;
						line-height : calc( 25 / 13 );
					}
					dd{
						padding-left : calc( 22 * 100% / 130.57 );
						font-size : 6.3rem;
						span{
							font-size : 1.8rem;
						}
					}
				}
				&:nth-of-type( 2 ){
					padding-top : calc( 2 * var( --remBase ) );
					dt{
						font-size : 1.3rem;
						line-height : calc( 25 / 13 );
					}
					dd{
						padding-left : calc( 36 * 100% / 130.57 );
						font-size : 7rem;
						span{
							margin-top : calc( 32 * var( --remBase ) );
							font-size : 1.2rem;
							line-height : calc( 13 / 12 );
						}
					}
				}
				&:nth-of-type( 3 ){
					padding-top : calc( 1 * var( --remBase ) );
					dt{
						font-size : 1.3rem;
						line-height : calc( 14 / 13 );
						span{
							font-size : 1rem;
							line-height : 1.4;
						}
					}
					dd{
						padding-left : calc( 23 * 100% / 130.57 );
						font-size : 6.1rem;
						span{
							font-size : 1.2rem;
						}
					}
				}
			}
		}
		.link01{
			width : calc( 355 * var( --percentBase ) );
			height : calc( 37 * var( --remBase ) );
			margin-top : calc( 10 * var( --remBase ) );
			font-size : 2rem;
			line-height : 1.25;
			&::after{
				right : calc( 16.6 * 100% / 355 );
				height : calc( 13.41 * var( --remBase ) );
			}
		}
	}
}

/* --------------------------------------------
PROBLEM
--------------------------------------------- */
#problem{
	position : relative;
	overflow-x : clip;
	background-color : #dbdfdd;
	&::after{
		position : absolute;
		left : 50%;
		clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
		font-size : 0;
		content : "";
		background-color : #dbdfdd;
		translate : -50% 0;
	}
	h2{
		width : fit-content;
		margin-inline : auto;
		font-weight : 900;
		text-align : center;
		text-indent : .06em;
		letter-spacing : .06em;
		strong{
			color : var( --primary );
			text-align : center;
			text-indent : .06em;
			letter-spacing : .06em;
			span{
				position : relative;
				&::before{
					position : absolute;
					left : 50%;
					aspect-ratio : 1;
					font-size : 0;
					content : "";
					background-color : var( --base );
					border-radius : 50%;
					translate : -50% 0;
				}
			}
		}
	}
	li{
		> picture{
			width : 100%;
			overflow : hidden;
		}
		> div{
			position : relative;
			align-content : center;
			background-color : white;
			picture{
				position : absolute;
				width : auto;
			}
		}
		p{
			font-weight : 900;
		}
		&:nth-child( 1 ){
			> div{
				picture{
					aspect-ratio : 96/117;
				}
			}
		}
		&:nth-child( 2 ){
			> div{
				picture{
					aspect-ratio : 95/117;
				}
			}
		}
		&:nth-child( 3 ){
			> div{
				picture{
					aspect-ratio : 94/115;
				}
			}
		}
	}
	>p{
		> span{
			display : block;
			&:nth-of-type( 1 ){
				font-weight : 700;
				letter-spacing : .07em;
			}
			&:nth-of-type( 2 ){
				font-weight : 900;
			}
		}
	}
	@media screen and ( width <= 730px ){
		padding-top : calc( 52 * var( --remBase ) );
		padding-bottom : calc( 64 * var( --remBase ) );
		margin-top : calc( -15 * var( --remBase ) );
		&::after{
			top : 100%;
			width : calc( 20 * var( --percentBase ) );
			height : calc( 15 * var( --remBase ) );
		}
		h2{
			padding-bottom : calc( 8 * var( --remBase ) );
			font-size : 1.8rem;
			line-height : 1.2;
			background : url( "../images/top/problem/accent.svg" ) center bottom / auto calc( 6.23 * var( --remBase ) ) no-repeat;
			strong{
				font-size : 3.2rem;
			}
		}
		ul{
			margin-top : calc( 32 * var( --remBase ) );
		}
		li + li{
			margin-top : calc( 24 * var( --remBase ) );
		}
		li > picture{
			border-radius : calc( 10 * var( --remBase ) );
			img{
				width : 100%;
				height : auto;
			}
		}
		li > div{
			padding-block : calc( 16 * var( --remBase ) );
			margin-top : calc( 16 * var( --remBase ) );
			border-radius : calc( 10 * var( --remBase ) );
			picture{
				bottom : calc( -1 * var( --remBase ) );
			}
		}
		li:nth-child( odd ){
			> div{
				padding-left : calc( 140 * var( --percentBase ) );
				picture{
					left : calc( -1 * var( --percentBase ) );
				}
			}
		}
		li:nth-child( even ){
			> div{
				padding-left : calc( 40 * var( --percentBase ) );
				picture{
					right : calc( -1 * var( --percentBase ) );
				}
			}
		}
		li:nth-child( 1 ) > div{
			picture{
				img{
					height : calc( 117 * 1.2 * var( --remBase ) );
				}
			}
		}
		li:nth-child( 2 ) > div{
			picture{
				img{
					height : calc( 117 * 1.2 * var( --remBase ) );
				}
			}
		}
		li:nth-child( 3 ) > div{
			picture{
				img{
					height : calc( 115 * 1.2 * var( --remBase ) );
				}
			}
		}
		li p{
			font-size : 2rem;
			line-height : 1.5;
			b{
				text-decoration : underline var( --primaryLight ) solid .5em;
				text-underline-offset : calc( -.5em + .25em );
				text-decoration-skip-ink : none;
			}
		}
	}
	> p{
		margin-top : calc( 40 * var( --remBase ) );
		> span:nth-of-type( 1 ){
			font-size : 2rem;
			line-height : 1.5;
		}
		> span:nth-of-type( 2 ){
			font-size : 4rem;
			line-height : 1.2;
			letter-spacing : .1em;
			strong{
				text-decoration : underline var( --primaryLight ) solid .5em;
				text-underline-offset : calc( -.5em + .25em );
				text-decoration-skip-ink : none;
			}
		}
	}
	@media print , screen and ( width > 730px ){
		z-index : 0;
		padding-top : calc( 31 * var( --remBase ) );
		padding-bottom : calc( 43 * var( --remBase ) );
		margin-top : calc( -24 * var( --remBase ) );
		&::after{
			bottom : calc( -30 * var( --remBase ) );
			width : min( 171px , calc( 171 * var( --viewportBase ) ) );
			height : calc( 48 * var( --remBase ) );
		}
		h2{
			padding-bottom : calc( 9.14 * var( --remBase ) );
			font-size : 3rem;
			line-height : 1.2;
			background : url( "../images/top/problem/accent.svg" ) center bottom / auto calc( 6.23 * var( --remBase ) ) no-repeat;
			strong{
				font-size : 5rem;
				line-height : 1.2;
				span{
					&::before{
						top : calc( 2.5 * var( --remBase ) );
						height : calc( 6 * var( --remBase ) );
					}
				}
			}
		}
		ul{
			display : flex;
			column-gap : calc( 27 * var( --percentBase ) );
			justify-content : center;
			margin-top : calc( 38.85 * var( --remBase ) );
		}
		li{
			width : calc( 275 * var( --percentBase ) );
			> picture{
				height : calc( 227 * var( --remBase ) );
				border-radius : calc( 10 * var( --remBase ) );
				img{
					width : 100%;
					height : 100%;
					object-fit : cover;
					object-position : center;
				}
			}
			> div{
				height : calc( 107 * var( --remBase ) );
				margin-top : calc( 21 * var( --remBase ) );
				border-radius : calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) calc( 10 * var( --remBase ) ) 0;
				picture{
					left : 0;
				}
			}
			p{
				b{
					background-image : linear-gradient( to bottom , transparent calc( 100% - 11 * var( --remBase ) ) , var( --primaryLight ) calc( 100% - 11 * var( --remBase ) ) );
				}
			}
			&:nth-child( 1 ){
				> div{
					padding-left : calc( 108 * 100% / 275 );
					picture{
						bottom : calc( -3 * var( --remBase ) );
						height : calc( 117 * var( --remBase ) );
						img{
							height : calc( 117 * var( --remBase ) );
						}
					}
				}
				p{
					font-size : 2.5rem;
					line-height : 1.2;
					span{
						font-size : 2rem;
						line-height : 1.2;
					}
				}
			}
			&:nth-child( 2 ){
				> div{
					padding-left : calc( 93 * 100% / 275 );
					picture{
						bottom : calc( -2 * var( --remBase ) );
						height : calc( 117 * var( --remBase ) );
						img{
							height : calc( 117 * var( --remBase ) );
						}
					}
				}
				p{
					font-size : 2.5rem;
					line-height : 1.2;
					span{
						font-size : 2rem;
						line-height : 1.2;
					}
				}
			}
			&:nth-child( 3 ){
				> div{
					padding-left : calc( 105 * 100% / 275 );
					picture{
						bottom : calc( -1 * var( --remBase ) );
						height : calc( 115 * var( --remBase ) );
						img{
							height : calc( 115 * var( --remBase ) );
						}
					}
				}
				p{
					font-size : 2.2rem;
					line-height : calc( 26 / 22 );
				}
			}
		}
		> p{
			width : fit-content;
			margin-inline : auto;
			margin-top : calc( 35 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : 2rem;
					line-height : 1.2;
				}
				&:nth-of-type( 2 ){
					padding-inline : calc( 6 * var( --remBase ) );
					font-size : 4.7rem;
					line-height : calc( 56 / 47 );
					background-image : linear-gradient( to bottom , transparent calc( 100% - 15 * var( --remBase ) ) , var( --primaryLight ) calc( 100% - 15 * var( --remBase ) ) );
				}
			}
		}
	}
}

/* --------------------------------------------
ANIMATION
--------------------------------------------- */
@media ( prefers-reduced-motion : no-preference ){
	.scroll-trigger.circle{
		clip-path : circle( 0% at 50% 50% );
		transition : clip-path 1s ease-in-out;
		&.in-view{
			clip-path : circle( 100% at 50% 50% );
		}
	}
}