@charset "UTF-8";

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	display : block;
	align-content : center;
	width : fit-content;
	height : calc( 32 * var( --remBase ) );
	padding-inline : calc( 12 * var( --remBase ) );
	font-size : calc( 14 * var( --remBase ) );
	line-height : calc( 30 / 14 );
	color : white;
	background-color : var( --base );
	border-radius : calc( 6 * var( --remBase ) );
	outline : solid calc( 2 * var( --remBase ) ) var( --base );
	outline-offset : calc( -2 * var( --remBase ) );
	@media print , screen and ( width > 768px ){
		margin-block : calc( 10 * var( --remBase ) );
	}
}
@media ( hover : hover ){
	.link01:hover{
		color : var( --base );
		background-color : transparent;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link01{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}
.link02{
	display : block;
	align-content : center;
	padding-block : calc( 4 * var( --remBase ) );
	font-size : calc( 16 * var( --remBase ) );
	line-height : 2.25;
	color : var( --base );
	text-align : center;
	outline : solid 1px var( --base );
	outline-offset : -1px;
}
@media ( hover : hover ){
	.link02:hover{
		color : white;
		background-color : var( --base );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link02{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
}