@charset "UTF-8";

/* --------------------------------------------
BACKGROUND
--------------------------------------------- */
.bg-red{
	background-color : var( --red );
}
.bg-stripe01{
	background-position : center;
	@media screen and ( width <= 750px ){
		background-image : url( "../images/ui/pattern/stripe01_sp.svg" );
		background-repeat : repeat-y;
		background-size : 100% auto;
	}
	@media print , screen and ( width > 750px ){
		position : relative;
		overflow-x : clip;
		background-image : url( "../images/ui/pattern/stripe01_pc.svg" );
		background-repeat : repeat;
		background-size : auto;
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-weight : 700;
	text-align : center;
	&::after{
		display : block;
		margin-inline : auto;
		content : "";
	}
	&.white{
		color : white;
		&::after{
			background-color : currentColor;
		}
	}
	&.red::after{
		background-color : var( --red );
	}
	@media screen and ( width <= 750px ){
		font-size : calc( 70 * var( --rem ) );
		line-height : calc( 101 / 70 );
		&::after{
			width : calc( 180 * var( --rem ) );
			height : calc( 10 * var( --rem ) );
			margin-top : calc( 47 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 54 * var( --rem ) );
		line-height : calc( 78 / 54 );
		&::after{
			width : calc( 100 * var( --rem ) );
			height : calc( 5 * var( --rem ) );
			margin-top : calc( 17 * var( --rem ) );
		}
	}
}

/* --------------------------------------------
BUTTON
--------------------------------------------- */
.btn01{
	display : flex;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	font-size : calc( 48 * var( --rem ) );
	font-weight : 700;
	color : white;
	background-color : black;
	border-radius : calc( 50 * var( --rem ) );
	outline : solid calc( 10 * var( --rem ) ) white;
	&.shadow{
		box-shadow : 0 calc( 14 * var( --rem ) ) calc( 4 * var( --rem ) ) rgb( 0 0 0 / .75 ) , calc( -10 * var( --rem ) ) 0 calc( 4 * var( --rem ) ) rgb( 0 0 0 / .75 ) , calc( 10 * var( --rem ) ) 0 calc( 4 * var( --rem ) ) rgb( 0 0 0 / .75 );
	}
	@media screen and ( width <= 750px ){
		width : calc( 654 * var( --rem ) );
		height : calc( 120 * var( --rem ) );
		&.shadow{
			height : calc( 98 * var( --rem ) );
		}
	}
	@media print , screen and ( width > 750px ){
		width : calc( 704 * var( --rem ) );
		height : calc( 128 * var( --rem ) );
		&.shadow{
			height : calc( 106 * var( --rem ) );
		}
	}
}
.btn02{
	display : flex;
	align-items : center;
	justify-content : center;
	margin-inline : auto;
	font-weight : 700;
	color : white;
	border-radius : 100vmax;
	&.black{
		background-color : black;
	}
	&.red{
		background-color : #e60012;
	}
	@media screen and ( width <= 750px ){
		width : calc( 600 * var( --rem ) );
		height : calc( 100 * var( --rem ) );
		font-size : calc( 40 * var( --rem ) );
	}
	@media print , screen and ( width > 750px ){
		width : calc( 600 * var( --rem ) );
		height : calc( 100 * var( --rem ) );
		font-size : calc( 36 * var( --rem ) );
	}
}