@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	width : fit-content;
	font-weight : 500;
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
	@media screen and ( width <= 750px ){
		font-size : 3.2rem;
		line-height : 1.75;
		background-image : linear-gradient( to right , #63aeaa , #99d069 );
	}
	@media print , screen and ( width > 750px ){
		font-size : 5.2rem;
		line-height : 1.75;
		background-image : linear-gradient( to right , #00b1ac , #7dd261 );
	}
}
:where( .title02 , .title02-blue ){
	font-weight : 700;
}
:where( .title02 , .title02-blue ){
	@media screen and ( width <= 750px ){
		font-size : 2.6rem;
		line-height : 1.75;
	}
	@media print , screen and ( width > 750px ){
		font-size : 4.2rem;
		line-height : 1.75;
	}
}
.title02-blue{
	color : #0db1ac;
	> span{
		display : block;
		color : #0db1ac;
	}
	@media screen and ( width <= 750px ){
		> span{
			&:nth-of-type( 1 ){
				font-size : 1.8rem;
				line-height : 1.75;
			}
			&:nth-of-type( 2 ){
				font-size : 2.6rem;
				line-height : 1.75;
			}
		}
	}
	@media print , screen and ( width > 750px ){
		> span{
			&:nth-of-type( 1 ){
				font-size : 3rem;
				line-height : 1.75;
			}
			&:nth-of-type( 2 ){
				font-size : 4.2rem;
				line-height : 1.75;
			}
		}
	}
}

/* --------------------------------------------
BUTTON
--------------------------------------------- */
.link01{
	position : relative;
	z-index : 1;
	display : grid;
	align-content : center;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	overflow : hidden;
	color : white;
	text-align : center;
	border-radius : 100vmax;
	outline : solid 1px transparent;
	outline-offset : -1px;
	&::before{
		position : absolute;
		inset : 0;
		z-index : -1;
		font-size : 0;
		content : "";
		opacity : 1;
	}
	&::after{
		position : absolute;
		top : 50%;
		display : block;
		width : auto;
		aspect-ratio : 9.959 / 18.5039;
		font-size : 0;
		content : "";
		background-image : url( "../../images/lp/ui/arrow/right01.svg" );
		filter : var( --filterWhite );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
		translate : 0 -50%;
	}
	&:not( .blue ){
		&::before{
			background-image : linear-gradient( to right , #00b1ac , #7dd261 );
		}
	}
	&.blue{
		&::before{
			background-image : linear-gradient( to right , #01badb , #3f90ee );
		}
	}
	@media screen and ( width <= 750px ){
		width : calc( 294 var( --remBase ) );
		height : calc( 80 var( --remBase ) );
		&:has( span ){
			font-size : 1.6rem;
			line-height : 1.75;
			span{
				font-size : 1.2rem;
				line-height : 1.75;
			}
		}
		&:not( :has( span ) ){
			font-size : 2rem;
			line-height : 1.75;
		}
		&::after{
			right : calc( 30 * 100% / 294 );
			height : calc( 18.5039 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		grid-auto-flow : column;
		width : calc( 410 var( --remBase ) );
		height : calc( 80 var( --remBase ) );
		&:has( span ){
			font-size : 1.8rem;
			line-height : 1.75;
			span{
				font-size : 1.4rem;
				line-height : 1.75;
			}
		}
		&:not( :has( span ) ){
			font-size : 2.2rem;
			line-height : 1.75;
		}
		&::after{
			right : calc( 30 * 100% / 410 );
			height : calc( 18.5039 var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	.link01:hover{
		color : #64aeaa;
		background-color : white;
		outline-color : #64aeaa;
		&::before{
			opacity : 0;
		}
		&::after{
			filter : invert( 57% ) sepia( 86% ) saturate( 187% ) hue-rotate( 128deg ) brightness( 95% ) contrast( 87% );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : outline-color var( --transitionBase ) , color var( --transitionBase );
		&::before{
			transition : opacity var( --transitionBase );
		}
		&::after{
			transition : filter var( --transitionBase );
		}
	}
}