@charset "UTF-8";

/* --------------------------------------------
HOVER
--------------------------------------------- */
@media ( hover : hover ){
	a:hover{
		> img , > picture > img{
			opacity : .6;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	a{
		> img , > picture > img{
			transition : opacity var( --transitionBase );
		}
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	position : relative;
	display : block;
	align-content : center;
	margin-inline : auto;
	color : var( --green );
	text-align : center;
	background-color : white;
	border-radius : 100vmax;
	outline : solid 1px var( --green );
	outline-offset : -1px;
	box-shadow : 0 calc( 1 * var( --remBase ) ) calc( 2 * var( --remBase ) ) color-mix( in sRGB , black 25% , transparent );
	&::after{
		position : absolute;
		top : 50%;
		display : block;
		width : auto;
		aspect-ratio : 24.18/7.36;
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/right01.svg" ) left top / contain no-repeat;
		filter : var( --filterGreen );
		translate : 0 -50%;
	}
	@media screen and ( width <= 768px ){
		height : calc( 38 * var( --remBase ) );
		font-size : calc( 16 * var( --remBase ) );
		&::after{
			height : calc( 7.36 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		height : calc( 58 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
		&::after{
			height : calc( 7.36 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	.link01:hover{
		color : white;
		background-color : var( --green );
		&::after{
			filter : var( --filterWhite );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
		&::after{
			transition : filter var( --transitionBase );
		}
	}
}