@charset "UTF-8";

/* --------------------------------------------
COLOR
--------------------------------------------- */
.cyan01{
	color : var( --cyan01 );
}
.bg-syan01{
	background-color : var( --cyan01 );
}

/* --------------------------------------------
BUTTON
--------------------------------------------- */
.btn01{
	position : relative;
	display : grid;
	grid-template-columns : auto auto;
	align-items : center;
	justify-content : center;
	height : calc( 46 * var( --remBase ) );
	margin-inline : auto;
	font-family : "Zen Kaku Gothic New" , sans-serif;
	font-size : calc( 16 * var( --remBase ) );
	font-weight : 700;
	color : white;
	border-radius : 100vmax;
	&::after{
		display : block;
		width : auto;
		height : calc( 13 * var( --remBase ) );
		aspect-ratio : 8/13;
		font-size : 0;
		content : "";
		background : url( "../images/ui/arrow/right_white01.svg" ) left top / contain no-repeat;
	}
	&.blue{
		background-color : var( --cyan01 );
		box-shadow : 0 calc( 3 * var( --remBase ) ) var( --blue );
	}
	&.pink{
		background-color : var( --pink );
		box-shadow : 0 calc( 3 * var( --remBase ) ) #ba4545;
	}
	&:not( .wide ){
		column-gap : calc( 10 * 100% / 223 );
	}
	&.wide{
		column-gap : calc( 10 * 100% / 246 );
	}
	@media screen and ( width <= 750px ){
		&:not( .wide ){
			width : calc( 223 * 100% / 295 );
		}
		&.wide{
			width : calc( 246 * 100% / 295 );
		}
	}
	@media print , screen and ( width > 750px ){
		&:not( .wide ){
			width : calc( 223 * var( --contentBase ) );
		}
		&.wide{
			width : calc( 246 * var( --contentBase ) );
		}
	}
}
@media ( hover : hover ){
	.btn01:hover{
		translate : 0 calc( 3 * var( --remBase ) );
		box-shadow : 0 0 0 calc( var( --blue ) );
		&::after{
			translate : 100% 0;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.btn01{
		transition : translate var( --hoverDuration ) var( --hoverTimingFunction ) , box-shadow var( --hoverDuration ) var( --hoverTimingFunction );
		&::after{
			transition : translate var( --hoverDuration ) var( --hoverTimingFunction );
		}
	}
}