@charset "UTF-8";

/* --------------------------------------------
BACKGROUND COLOR
--------------------------------------------- */
.bg-pattern01{
	background-image : linear-gradient( to left , white , #f4f6f7 );
}
.bg-pattern02{
	background-image : linear-gradient( to left , white , #ededed );
}
.bg-pattern0202{
	background-image : linear-gradient( to right , white , #ededed );
}
.bg-navy{
	color : white;
	background-color : var( --navy );
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	display : grid;
	grid-auto-flow : row;
	row-gap : calc( 6 var( --remBase ) );
	font-weight : 700;
	line-height : 1.5;
	text-align : center;
}
.title01::before{
	line-height : 1.5;
	color : var( --navy );
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
}
@media screen and ( width <= 750px ){
	.title01{
		font-size : 1.6rem;
	}
	.title01::before{
		font-size : 2.8rem;
	}
}
@media print , screen and ( width > 750px ){
	.title01{
		font-size : 2.4rem;
	}
	.title01::before{
		font-size : 3.8rem;
	}
}
.bg-navy > .title01{
	color : white;
}
.bg-navy > .title01::before{
	color : var( --yellow );
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link-contact{
	position : relative;
	z-index : 1;
	display : block;
	width : 100%;
	height : 100%;
	filter : drop-shadow( 0 calc( 16 var( --remBase ) ) calc( 32 var( --remBase ) ) color-mix( in srgb , #0c0c0d 10% , transparent ) );
}
.link-contact::before{
	position : absolute;
	top : var( --down );
	left : 0;
	z-index : 0;
	z-index : -1;
	display : block;
	width : 100%;
	height : 100%;
	content : "";
	background-color : #2b5ea5;
	border-radius : calc( 8 var( --remBase ) );
}
.link-contact::after{
	position : absolute;
	top : 50%;
	display : block;
	width : auto;
	height : calc( 22 var( --remBase ) );
	aspect-ratio : 16/22;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/arrow/right01.svg" );
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : left center;
	background-size : contain;
	translate : 0 -50%;
}
.link-contact span{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : center;
	width : 100%;
	height : 100%;
	font-weight : 700;
	line-height : 1.5;
	color : white;
	background-color : var( --blue );
	border-radius : calc( 8 var( --remBase ) );
	outline : solid 1px var( --blue );
	outline-offset : -1px;
}
.link-contact span::before{
	width : auto;
	height : calc( 15 var( --remBase ) );
	aspect-ratio : 20/15;
	font-size : 0;
	content : "";
	background-image : url( "../images/ui/icon/email01.svg" );
	filter : var( --filterWhite );
	background-repeat : no-repeat;
	background-position : 0 0;
	background-size : auto 100%;
}
@media ( hover : hover ){
	.link-contact:hover{
		filter : brightness( 1.05 );
	}
	.link-contact:hover::after{
		margin-top : var( --down );
	}
	.link-contact:hover span{
		translate : 0 var( --down );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.link-contact{
		transition : filter var( --transitionBase );
	}
	.link-contact::after{
		transition : margin var( --transitionBase );
	}
	.link-contact span{
		transition : translate var( --transitionBase );
	}
}