@charset "UTF-8";

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	position : relative;
	display : block;
	align-content : center;
	margin-inline : auto;
	font-weight : 900;
	color : white;
	text-align : center;
	background-image : linear-gradient( to right , #ff6d25 0% , #ff9232 50% , #f8bd45 100% );
	&::after{
		position : absolute;
		top : 50%;
		display : block;
		width : auto;
		aspect-ratio : 8.12/13.41;
		font-size : 0;
		content : "";
		background-image : url( "../images/ui/arrow/right01.svg" );
		filter : var( --filterWhite );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
		translate : 0 -50%;
	}
}
@media ( hover : hover ){
	.link01:hover{
		filter : brightness( 1.1 );
		&::after{
			translate : 100% -50%;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : filter .3s ease-in;
		&::after{
			transition : translate .3s ease-in;
		}
	}
}
.link02{
	position : relative;
	display : block;
	align-content : center;
	margin-inline : auto;
	font-weight : 900;
	color : white;
	text-align : center;
	background-image : linear-gradient( to right , #f8bd45 0% , #ff9232 50% , #ff6d25 100% );
	&::after{
		position : absolute;
		top : 50%;
		display : block;
		width : auto;
		aspect-ratio : 20.24/34.83;
		font-size : 0;
		content : "";
		background-image : url( "../images/ui/arrow/right02.svg" );
		filter : var( --filterWhite );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
		translate : 0 -50%;
	}
}
@media ( hover : hover ){
	.link02:hover{
		filter : brightness( 1.1 );
		&::after{
			translate : 100% -50%;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link02{
		transition : filter .3s ease-in;
		&::after{
			transition : translate .3s ease-in;
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	position : relative;
	width : fit-content;
	margin-inline : auto;
	font-weight : 900;
	color : #070707;
	border-bottom-color : black;
	border-bottom-style : solid;
	strong{
		color : var( --primary );
	}
	&[data-en]::before{
		position : absolute;
		left : 50%;
		z-index : -1;
		font-family : Roboto;
		white-space : pre;
		content : attr( data-en );
		translate : -50% 0;
	}
	&:not( .white )::before{
		color : #cef0ee;
	}
	&.white::before{
		color : white;
	}
	@media screen and ( width <= 730px ){
		font-size : 2.8rem;
		line-height : 1.1;
		text-align : center;
		text-indent : .025emem;
		letter-spacing : .025emem;
		&::before{
			top : -.5lh;
			font-size : 4rem;
			text-align : center;
			text-indent : .025emem;
			letter-spacing : .025emem;
		}
		strong{
			font-size : 3.6rem;
			line-height : 1.1;
			text-align : center;
			text-indent : .025emem;
			letter-spacing : .025emem;
		}
	}
	@media print , screen and ( width > 730px ){
		border-bottom-width : calc( 5 * var( --remBase ) );
		&::before{
			font-size : 7.4rem;
		}
	}
}

/* --------------------------------------------
ANIMATION
--------------------------------------------- */
@media ( prefers-reduced-motion : no-preference ){

}
@media ( prefers-reduced-motion : no-preference ){
	.title01.scroll-trigger{
		translate : 0 100%;
		transition : .5s ease-in;
		&::before{
			opacity : 0;
			transition : .5s opacity .75s;
		}
		&.in-view{
			translate : 0 0;
			&::before{
				opacity : 1;
			}
		}
	}
	.scroll-trigger.staggered-fadeIn{
		> li{
			opacity : 0;
			transition : opacity .5s ease-in;
			&:nth-child( 2 ){
				transition-delay : 0s;
			}
			&:nth-child( 3 ){
				transition-delay : .5s;
			}
			&:nth-child( 4 ){
				transition-delay : 1s;
			}
			&:nth-child( 5 ){
				transition-delay : 1.5s;
			}
			&:nth-child( 6 ){
				transition-delay : 2s;
			}
		}
		&.in-view{
			> li{
				opacity : 1;
			}
		}
	}
	.scroll-trigger.sepia{
		filter : sepia( 100% );
		transition : filter .5s ease-in;
		&.in-view{
			filter : sepia( 0% );
		}
	}
	.scroll-trigger.slide-top{
		opacity : .5;
		translate : 0 100%;
		transition : opacity .5s ease-in , translate .5s ease-in;
		&.in-view{
			opacity : 1;
			translate : 0 0;
		}
	}
	.scroll-trigger.stagger-alternate-top{
		> li{
			opacity : .5;
			transition : translate 1s ease-in , opacity 1s ease-in;
			&:nth-child( odd ){
				translate : -25% -25%;
			}
			&:nth-child( even ){
				translate : 25% -25%;
			}
			&:nth-child( 2 ){
				transition-delay : 0s;
			}
			&:nth-child( 3 ){
				transition-delay : .5s;
			}
			&:nth-child( 4 ){
				transition-delay : 1s;
			}
			&:nth-child( 5 ){
				transition-delay : 1.5s;
			}
			&:nth-child( 6 ){
				transition-delay : 2s;
			}
		}
		&.in-view{
			> li{
				translate : 0 0;
				opacity : 1;
			}
		}
	}
	.scroll-trigger.staggered{
		> li + li{
			opacity : 0;
			translate : 0 -25%;
			transition : opacity .5s ease-in-out , translate .5s ease-in-out;
		}
		> li:nth-child( 2 ){
			transition-delay : 0s;
		}
		> li:nth-child( 3 ){
			transition-delay : .5s;
		}
		> li:nth-child( 4 ){
			transition-delay : 1s;
		}
		> li:nth-child( 5 ){
			transition-delay : 1.5s;
		}
		> li:nth-child( 6 ){
			transition-delay : 2s;
		}
		&.in-view{
			> li + li{
				opacity : 1;
				translate : 0 0;
			}
		}
	}
	.scroll-trigger.reveal-top-left{
		clip-path : polygon( 0 0 , 0 0 , 0 0 , 0 0 );
		transition : clip-path 1s ease-in;
		&.in-view{
			clip-path : polygon( 0 0 , 100% 0 , 100% 100% , 0 100% );
		}
	}
	.scroll-trigger.staggered-fadeIn{
		> li{
			opacity : .125;
			transition : opacity 1s ease-in;
			&:nth-child( 1 ){
				transition-delay : 0s;
			}
			&:nth-child( 2 ){
				transition-delay : .5s;
			}
			&:nth-child( 3 ){
				transition-delay : 1s;
			}
			&:nth-child( 4 ){
				transition-delay : 1.5s;
			}
			&:nth-child( 5 ){
				transition-delay : 2s;
			}
			&:nth-child( 6 ){
				transition-delay : 2.5s;
			}
		}
		&.in-view{
			> li{
				opacity : 1;
			}
		}
	}
	.scroll-trigger.staggered-slide-top{
		> li{
			translate : 0 100%;
			opacity : .5;
			transition : translate 1s ease-in , opacity .5s ease-in;
			&:nth-child( 1 ){
				transition-delay : 0s;
			}
			&:nth-child( 2 ){
				transition-delay : .5s;
			}
			&:nth-child( 3 ){
				transition-delay : 1s;
			}
			&:nth-child( 4 ){
				transition-delay : 1.5s;
			}
			&:nth-child( 5 ){
				transition-delay : 2s;
			}
			&:nth-child( 6 ){
				transition-delay : 2.5s;
			}
		}
		&.in-view{
			> li{
				translate : 0 0;
				opacity : 1;
			}
		}
	}
	@media print , screen and ( width > 730px ){
		.scroll-trigger.staggeredCenter-pc{
			> li{
				opacity : 0;
				transition : opacity 1s ease-in-out;
				&:nth-child( 2 ){
					transition-delay : 1s;
				}
				&:not( :nth-child( 2 ) ){
					transition-delay : 1.5s;
				}
			}
			&.in-view{
				>li{
					opacity : 1;
				}
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#plan.scroll-trigger{
		&::before{
			translate : -50% 100%;
			transition : 1s ease-in-out;
		}
		&.in-view{
			&::before{
				translate : -50% 0;
			}
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#consulting.scroll-trigger{
		&::before{
			translate : 100% 0;
			transition : translate 1s ease-in;
		}
		&.in-view{
			&::before{
				translate : 0 0;
			}
		}
	}
}