@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	font-size : 3.2rem;
	font-weight : 500;
	line-height : 1.6;
	text-align : center;
	text-indent : .16em;
	letter-spacing : .16em;
}
.title01::after{
	display : block;
	width : calc( 30 var( --percentBase ) );
	height : calc( 2 var( --remBase ) );
	margin-inline : auto;
	margin-top : calc( 56 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : var( --base );
}
.title02{
	font-size : 2.4rem;
	font-weight : 700;
	text-align : center;
}

/* --------------------------------------------
BUTTON
--------------------------------------------- */
.button01{
	display : grid;
	place-items : center;
	height : calc( 49 var( --remBase ) );
	margin-inline : auto;
	font-size : 1.6rem;
	font-weight : 700;
	border-style : solid;
	border-width : 1px;
	border-radius : calc( 8 var( --remBase ) );
}
.button01.blue{
	color : white;
	background-color : var( --blue );
	border-color : #b3b3b3;
}
.button01.base{
	color : var( --blue02 );
	background-color : var( --base );
	border-color : var( --base );
}
@media screen and ( width <= 750px ){
	.button01{
		width : calc( 144 var( --percentBase ) );
	}
}
@media print , screen and ( width > 750px ){
	.button01{
		width : calc( 144 * 100% / 972 );
	}
}
@media ( hover : hover ){
	.button01.blue:hover{
		color : var( --blue );
		background-color : var( --base );
	}
	.button01.base:hover{
		color : var( --base );
		background-color : var( --blue );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.button01{
		transition : background var( --transitionBase ) , color var( --transitionBase );
	}
}