@charset "UTF-8";

/* --------------------------------------------
CASES
--------------------------------------------- */
#cases{
	h2{
		&::after{
			display : block;
			width : 100%;
			height : 1px;
			content : "";
		}
	}
	a{
		display : grid;
		align-items : center;
		justify-content : center;
		color : var( --green01 );
		background-color : white;
		outline : solid 1px var( --green01 );
		outline-offset : -1px;
		box-shadow : 0 calc( 2 * var( --remBase ) ) calc( 4 * var( --remBase ) ) color-mix( in sRGB , var( --green01 ) 40% , transparent );
	}
	@media screen and ( width <= 768px ){
		> ul{
			margin-top : calc( 64 * var( --remBase ) );
			> li + li{
				margin-top : calc( 80 * var( --remBase ) );
			}
		}
		h2{
			font-size : calc( 22 * var( --remBase ) );
			text-indent : calc( 22 * 100% / 368 );
			&::after{
				margin-top : calc( 16 * var( --remBase ) );
				background-image : linear-gradient( to right , var( --green01 ) 12% , var( --yellow01 ) 12% , var( --yellow01 ) 100% );
			}
		}
		ul ul{
			display : grid;
			grid-template-columns : repeat( 2 , calc( 176 * 100% / 368 ) );
			row-gap : calc( 20 * var( --remBase ) );
			justify-content : space-between;
			margin-top : calc( 24 * var( --remBase ) );
		}
		a{
			width : 100%;
			height : calc( 48 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
	@media screen and ( width > 768px ){
		grid-row : 1;
		grid-column : 2;
		padding-left : calc( 54 * 100% / 854 );
		> ul{
			margin-top : calc( 64 * var( --remBase ) );
			> li + li{
				margin-top : calc( 80 * var( --remBase ) );
			}
		}
		h2{
			font-size : calc( 24 * var( --remBase ) );
			text-indent : calc( 16 * 100% / 800 );
			&::after{
				margin-top : calc( 12 * var( --remBase ) );
				background-image : linear-gradient( to right , var( --green01 ) 24% , var( --yellow01 ) 24% , var( --yellow01 ) 100% );
			}
		}
		ul ul{
			display : grid;
			grid-template-columns : repeat( 3 , calc( 248 * 100% / 800 ) );
			row-gap : calc( 32 * var( --remBase ) );
			justify-content : space-between;
			margin-top : calc( 40 * var( --remBase ) );
		}
		a{
			width : 100%;
			height : calc( 48 * var( --remBase ) );
			font-size : calc( 16 * var( --remBase ) );
		}
	}
}
@media ( hover : hover ){
	#cases a:hover{
		color : white;
		background-color : var( --green01 );
		box-shadow : none;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#cases a{
		transition : background-color .3s linear , color .3s linear , box-shadow .3s linear;
	}
}