@charset "UTF-8";

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	padding-bottom : calc( ( 30 - 15 ) var( --remBase ) );
	font-size : 4rem;
	font-weight : 400;
	line-height : 1.75;
	color : var( --blue );
	letter-spacing : .2em;
	border-bottom-color : currentColor;
	border-bottom-style : solid;
	border-bottom-width : 1px;
}
.title02{
	display : grid;
	grid-template-columns : calc( 16 var( --percentBase ) ) auto;
	align-items : start;
	justify-content : start;
	font-size : 3rem;
	font-weight : 400;
	line-height : calc( 47 / 30 );
	color : var( --blue );
	letter-spacing : .1em;
}
.title02::before{
	display : block;
	height : calc( 16 var( --remBase ) );
	margin-top : calc( 15.5 var( --remBase ) );
	font-size : 0;
	content : "";
	background-color : currentColor;
	border-radius : 50%;
}
@media screen and ( max-width : 750px ){
	.title02{
		column-gap : calc( 24 var( --percentBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.title02{
		column-gap : calc( 18 var( --percentBase ) );
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
@media ( hover : hover ){
	#linkLine:hover{
		color : #fff;
		background-color : #56c1c8;
	}
}
.link01{
	position : relative;
	display : grid;
	place-items : center;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --blue );
	transition : color var( --transitionBase ) , opacity var( --transitionBase );
}
.link01::after{
	position : absolute;
	display : block;
	content : "";
	background : url( "../images/ui/arrow/black/right01.svg" ) center / contain no-repeat;
	filter : var( --filterWhite );
	transition : filter var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	.link01{
		width : calc( 500 var( --percentBase ) );
		height : calc( 80 var( --remBase ) );
		margin-inline : auto;
		font-size : 2.6rem;
	}
	.link01::after{
		top : calc( 33.5 var( --remBase ) );
		right : calc( 35 * 100% / 500 );
		width : calc( 53 * 100% / 500 );
		height : calc( 13 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.link01{
		height : calc( 50 var( --remBase ) );
		font-size : 1.5rem;
	}
	.link01::after{
		top : calc( 22 var( --remBase ) );
		right : calc( 21 * 100% / 290 );
		width : calc( 23 * 100% / 290 );
		height : calc( 6 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.link01:hover{
		color : #555;
		background-color : rgb( 67 186 199 / .5 );
	}
	.link01:hover::after{
		filter : invert( 32% ) sepia( 0% ) saturate( 439% ) hue-rotate( 153deg ) brightness( 88% ) contrast( 77% );
	}
}
.link02{
	position : relative;
	display : grid;
	place-items : center;
	margin-inline : auto;
	color : white;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : var( --blue );
	transition : color var( --transitionBase ) , opacity var( --transitionBase );
}
.link02::after{
	position : absolute;
	display : block;
	content : "";
	background : url( "../images/ui/arrow/right01.svg" ) center / contain no-repeat;
	transition : filter var( --transitionBase );
}
@media screen and ( max-width : 750px ){
	.link02{
		width : calc( 500 var( --percentBase ) );
		height : calc( 80 var( --remBase ) );
		font-size : 2.6rem;
	}
	.link02::after{
		top : calc( 33 var( --remBase ) );
		right : calc( 35 * 100% / 500 );
		width : calc( 53 * 100% / 500 );
		height : calc( 13 var( --remBase ) );
	}
}
@media print , screen and ( min-width : 750.02px ){
	.link02{
		width : calc( 291 var( --percentBase ) );
		height : calc( 50 var( --remBase ) );
		font-size : 1.5rem;
	}
	.link02::after{
		top : calc( 22 var( --remBase ) );
		right : calc( 21 * 100% / 291 );
		width : calc( 23 * 100% / 291 );
		height : calc( 6 var( --remBase ) );
	}
}
@media ( hover : hover ){
	.link02:hover{
		color : #555;
		background-color : rgb( 67 186 199 / .5 );
	}
	.link02:hover::before , .link02:hover::after{
		filter : invert( 32% ) sepia( 0% ) saturate( 439% ) hue-rotate( 153deg ) brightness( 88% ) contrast( 77% );
	}
}