@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-weight : 500;
	color : white;
	background-image : linear-gradient( to bottom , var( --red ) 0 , var( --red ) 2px , white , 2px , white 4px , var( --red ) 4px , var( --red ) calc( 100% - 4px ) , white calc( 100% - 4px ) , white calc( 100% - 2px ) , var( --red ) calc( 100% - 2px ) , var( --red ) 100% );
}
.title01::before{
	content : "";
	background-image : radial-gradient( color-mix( in sRGB , var( --gold02 ) 100% , transparent ) , color-mix( in sRGB , var( --gold02 ) 80% , transparent ) );
}
@media screen and ( width <= 768px ){
	.title01{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 24 var( --percentBase ) );
		font-size : 4.2rem;
		line-height : 1.2;
	}
}
@media print , screen and ( width > 768px ){
	.title01{
		display : grid;
		grid-template-columns : calc( 16 * 100% / 976 ) 1fr;
		column-gap : calc( 24 * 100% / 976 );
		padding-block : calc( 12 var( --remBase ) );
		padding-inline : calc( 12 * 100% / 1000 );
		font-size : 3rem;
		line-height : 2;
	}
}