@charset "UTF-8";

/* --------------------------------------------
HOVER ANIMATION
--------------------------------------------- */
@media ( hover : hover ){
	#header .logo , #navContacts a , .link01 , #footer nav a{
		&:hover{
			opacity : .8;
		}
	}
	#stickyContacts a:hover{
		position : relative;
		box-shadow : none;
		translate : 0 calc( 5 * var( --remBase ) );
	}
	.contentContacts , #flow{
		.line , .web{
			&:hover{
				position : relative;
				box-shadow : none;
				translate : 0 calc( 6 * var( --remBase ) );
			}
		}
	}
	#linkArea a:hover{
		color : #006dd9;
	}
	#works .splide__arrow:hover img{
		filter : invert( 32% ) sepia( 33% ) saturate( 2872% ) hue-rotate( 78deg ) brightness( 96% ) contrast( 83% );
	}
	@media print , screen and ( width > 768px ){
		#navGlobal li[class^="order"] a:hover::after{
			background-color : #fff461;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header .logo , #navContacts a , .link01 , #footer nav a{
		transition : opacity .3s linear;
	}
	#stickyContacts a{
		transition : box-shadow .3s linear , translate .3s linear;
	}
	.contentContacts , #flow{
		.line , .web{
			transition : box-shadow .3s linear , translate .3s linear;
		}
	}
	#linkArea a{
		transition : color .3s linear;
	}
	#works .splide__arrow img{
		transition : filter .3s linear;
	}
	@media print , screen and ( width > 768px ){
		#navGlobal li[class^="order"] a::after{
			transition : background-color .3s linear;
		}
	}
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
.title01{
	position : relative;
	align-content : center;
	width : fit-content;
	margin-inline : auto;
	font-weight : 700;
	color : white;
	text-align : center;
	background-color : #6dbfe3;
	border-radius : 100vmax;
	&::before , &::after{
		position : absolute;
		display : block;
		width : auto;
		font-size : 0;
		content : "";
	}
	&::before{
		top : calc( 100% - 1px );
		left : 50%;
		aspect-ratio : 1;
		clip-path : polygon( 0 0 , 100% 0 , 50% 100% );
		background-color : #6dbfe3;
		translate : -50% 0;
	}
	&::after{
		top : 50%;
		aspect-ratio : 292/312;
		translate : 0 -50%;
	}
	@media screen and ( width <= 768px ){
		padding-top : calc( 14 * var( --remBase ) );
		padding-bottom : calc( 14 * var( --remBase ) );
		font-size : calc( 27 * var( --remBase ) );
		line-height : calc( 40 / 27 );
		&::before{
			height : calc( 16 * var( --remBase ) );
			aspect-ratio : 20/16;
		}
		&::after{
			right : calc( -36 * var( --remBase ) );
			height : calc( 94.5 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		padding-inline : calc( 75 * var( --remBase ) );
		padding-top : calc( 18 * var( --remBase ) );
		padding-bottom : calc( 20 * var( --remBase ) );
		font-size : calc( 38 * var( --remBase ) );
		line-height : calc( 57 / 38 );
		&::before{
			height : calc( 23 * var( --remBase ) );
			aspect-ratio : 28/23;
		}
		&::after{
			right : calc( -75 * var( --remBase ) );
			height : calc( 156 * var( --remBase ) );
		}
	}
}

/* --------------------------------------------
LINK
--------------------------------------------- */
.link01{
	position : relative;
	display : block;
	align-content : center;
	width : fit-content;
	margin-inline : auto;
	overflow : hidden;
	font-weight : 700;
	text-align : center;
	background-color : white;
	border-radius : 100vmax;
	outline-style : solid;
	outline-color : #6dbfe3;
	&::after{
		position : absolute;
		top : 50%;
		display : block;
		width : auto;
		aspect-ratio : 20/37;
		content : "";
		background : url( "../images/ui/arrow/right02.svg" ) center / contain no-repeat;
		filter : invert( 75% ) sepia( 10% ) saturate( 2053% ) hue-rotate( 163deg ) brightness( 95% ) contrast( 87% );
		translate : 0 -50%;
	}
	@media screen and ( width <= 768px ){
		min-width : calc( 434 * var( --viewportBase ) );
		height : calc( 84 * var( --remBase ) );
		padding-left : calc( 40 * var( --remBase ) );
		padding-right : calc( 56 * var( --remBase ) );
		font-size : calc( 20 * var( --remBase ) );
		outline-width : calc( 2 * var( --remBase ) );
		outline-offset : calc( -2 * var( --remBase ) );
		&::after{
			right : calc( 26 * var( --remBase ) );
			height : calc( 26 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		height : calc( 85 * var( --remBase ) );
		padding-left : calc( 46 * var( --remBase ) );
		padding-right : calc( 72 * var( --remBase ) );
		font-size : calc( 20 * var( --remBase ) );
		outline-width : calc( 2 * var( --remBase ) );
		outline-offset : calc( -2 * var( --remBase ) );
		&::after{
			right : calc( 26 * var( --remBase ) );
			height : calc( 26 * var( --remBase ) );
		}
	}
}