@charset "UTF-8";

/* --------------------------------------------
ROOT
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--headerHeight : calc( 60 * var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--headerHeight : calc( 160 * var( --remBase ) );
	}
}

/* --------------------------------------------
HTML
--------------------------------------------- */
html{
	scroll-padding-top : var( --headerHeight );
	@media screen and ( width <= 750px ){
		font-size : calc( 10 * var( --remBase ) );
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 10 * var( --remBase ) );
	}
}

/* --------------------------------------------
BODY
--------------------------------------------- */
body{
	min-height : 100dvh;
	padding-top : var( --headerHeight );
	@media screen and ( width <= 750px ){
		min-height : 100dvh;
		font-size : 1.2rem;
		background-color : #f2f1ee;
	}
	@media print , screen and ( width > 750px ){
		font-size : calc( 16 * var( --remBase ) );
		background-color : #f1f0ed;
	}
}

/* --------------------------------------------
WRAPPER , CONTAINER , GRID CONTAINER
--------------------------------------------- */
@media screen and ( width <= 750px ){
	:root{
		--wrapPaddingInline : calc( var( --gutter ) * var( --viewportBase ) );
		--containerWidth : 100%;
		--gridContainerGutter : calc( var( --gutter ) * var( --viewportBase ) );
		--gridContainerContent : calc( var( --contentWidth ) * var( --viewportBase ) )
			--gridcontainergridtemplatecolumns : var( --gridContainerGutter ) var( --gridColumnContent ) var( --gridContainerGutter );
		--gridContainerColumnCenter : 2;
		--gridContainerLeftStartEnd : 3;
		--gridContainerRightEndStart : 2;
	}
}
@media print , screen and ( width > 750px ){
	:root{
		--wrapPaddingInline : max( calc( var( --gutter ) * var( --viewportBase ) ) , calc( ( 100% - ( var( --contentWidth ) * 1px ) ) / 2 ) );
		--containerWidth : min( 100% , calc( var( --breakPoint ) * 1px ) );
		--gridContainerGutter : min( calc( var( --gutter ) * var( --viewportBase ) ) , calc( var( --gutter ) * 1px ) );
		--gridContainerContent : min( calc( var( --contentWidth ) * var( --viewportBase ) ) , calc( var( --contentWidth ) * 1px ) );
		--gridContainerGridTemplateColumns : 1fr var( --gridContainerGutter ) var( --gridContainerContent ) var( --gridContainerGutter ) 1fr;
		--gridContainerColumnCenter : 3;
		--gridContainerLeftStartEnd : 4;
		--gridContainerRightEndStart : 3;
	}
}
.wrap{
	padding-inline : var( --wrapPaddingInline );
}
.wrap-sp{
	@media screen and ( width <= 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.wrap-pc{
	@media print , screen and ( width > 750px ){
		padding-inline : var( --wrapPaddingInline );
	}
}
.container{
	width : var( --containerWidth );
	@media print , screen and ( width > 750px ){
		margin-inline : auto;
	}
}
.container-sp{
	@media screen and ( width <= 750px ){
		width : var( --containerWidth );
	}
}
.container-pc{
	@media print , screen and ( width > 750px ){
		width : var( --containerWidth );
	}
}
.gridContainer{
	display : grid;
	grid-template-columns : var( --gridContainerGridTemplateColumns );
	grid-auto-flow : column;
	row-gap : 0;
	>*:not( .fluid , .left-start , .right-end ){
		grid-column : var( --gridContainerColumnCenter );
	}
	.fluid{
		grid-column : 1/-1;
	}
	.left-start{
		grid-column : 1 / var( --gridContainerLeftStartEnd );
	}
	.right-end{
		grid-column : var( --gridContainerRightEndStart ) / -1;
	}
}
.gridContainer-sp{
	@media screen and ( width <= 750px ){
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
		>*:not( .fluid , .left-start , .right-end ){
			grid-column : var( --gridContainerColumnCenter );
		}
		.fluid{
			grid-column : 1/-1;
		}
		.left-start{
			grid-column : 1 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}
.gridContainer-pc{
	@media print , screen and ( width >= 1200px ){
		display : grid;
		grid-template-columns : var( --gridContainerGridTemplateColumns );
		grid-auto-flow : column;
		row-gap : 0;
		>*:not( .fluid , .left-start , .right-end ){
			grid-column : var( --gridContainerColumnCenter );
		}
		.fluid{
			grid-column : 1/-1;
		}
		.left-start{
			grid-column : 1 / var( --gridContainerLeftStartEnd );
		}
		.right-end{
			grid-column : var( --gridContainerRightEndStart ) / -1;
		}
	}
}
.wrap02{
	@media screen and ( width <= 750px ){
		padding-inline : calc( 20 * var( --viewportBase ) );
	}
	@media print , screen and ( width > 750px ){
		padding-inline : max( calc( 17 * var( --viewportBase ) ) , calc( ( 100% - ( 1166 * 1px ) ) / 2 ) );
	}
}

/* --------------------------------------------
  STATE
  --------------------------------------------- */
.is-sp{
	@media print , screen and ( width > 750px ){
		display : none;
	}
}
.is-pc{
	@media screen and ( width <= 750px ){
		display : none;
	}
}
.is-tb{
	@media screen and ( width <= 750px ){
		display : none;
	}
	@media print , screen and ( width >= 1200px ){
		display : none;
	}
}

/* --------------------------------------------
  ACCESSIBILITY
  --------------------------------------------- */
.visually-hidden{
	position : absolute;
	width : 1px;
	height : 1px;
	overflow : hidden;
	clip : rect( 0 0 0 0 );
	clip-path : inset( 50% );
	white-space : nowrap;
}
.visually-hidden-text{
	overflow : hidden;
	color : transparent;
}
[hidden]{
	display : none;
}

/* --------------------------------------------
  COMMON MODULES
  --------------------------------------------- */
.full{
	width : 100%;
	height : auto;
}
.full-sp{
	@media screen and ( width <= 750px ){
		width : 100%;
		height : auto;
	}
}
.full-pc{
	@media print , screen and ( width > 750px ){
		width : 100%;
		height : auto;
	}
}
[data-before]::before{
	white-space : pre;
	content : attr( data-before );
}
[data-after]::after{
	white-space : pre;
	content : attr( data-after );
}
[data-before-sp]::before{
	@media screen and ( width <= 750px ){
		white-space : pre;
		content : attr( data-before-sp );
	}
}
[data-both]{
	&::before , &::after{
		white-space : pre;
		content : attr( data-both );
	}
}
@media screen and ( width <= 750px ){
	[data-after-sp]::after{
		white-space : pre;
		content : attr( data-after-sp );
	}
	[data-both-sp]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}
@media print , screen and ( width > 750px ){
	[data-before-pc]::before{
		white-space : pre;
		content : attr( data-before-pc );
	}
	[data-after-pc]::after{
		white-space : pre;
		content : attr( data-after-pc );
	}
	[data-both-pb]{
		&::before , &::after{
			white-space : pre;
			content : attr( data-both );
		}
	}
}

/* --------------------------------------------
  BR TO SPCE
  --------------------------------------------- */
.sp-space{
	@media screen and ( width <= 750px ){
		&::after{
			content : " ";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-space{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : " ";
		}
	}
}
.sp-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			content : "　";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
}
.pc-spaceEm{
	@media screen and ( width <= 750px ){
		&::after{
			white-space : pre;
			content : "\A";
		}
	}
	@media print , screen and ( width > 750px ){
		&::after{
			content : "　";
		}
	}
}

/* --------------------------------------------
  LH NAGATIVE MARGIN
  --------------------------------------------- */
.lh-up{
	margin-top : calc( ( 1em - 1lh )  / 2 );
}
.lh-up-sp{
	@media screen and ( width <= 750px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}
.lh-up-pc{
	@media print , screen and ( width > 750px ){
		margin-top : calc( ( 1em - 1lh )  / 2 );
	}
}

/* --------------------------------------------
HEADER
--------------------------------------------- */
#header{
	height : var( --headerHeight );
	background-color : #fff;
	@media screen and ( width <= 750px ){
		position : fixed;
		top : 0;
		left : 0;
		z-index : 11;
		width : 100%;
		padding-inline : calc( 16 * var( --viewportBase ) );
		.logo{
			display : block;
			height : 100%;
			padding-top : calc( 20 * var( --remBase ) );
			img{
				height : calc( 22 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		position : fixed;
		top : 0;
		left : 0;
		z-index : 5;
		display : flex;
		column-gap : calc( 202 * var( --contentBase ) );
		align-items : flex-start;
		width : 100%;
		.logo{
			display : block;
			height : 100%;
			padding-top : calc( 37 * var( --remBase ) );
			img{
				height : calc( 89 * var( --remBase ) );
			}
		}
	}
}
body{
	@media screen and ( width <= 750px ){
		&:has( #nav:not( [inert] ) ){
			overflow : hidden;
		}
	}
	@media print , screen and ( width > 750px ){
		&:not( .is-scroll ) #header{
			transform : translateY( 0 );
		}
		&.is-scroll #header{
			height : calc( 130 * var( --remBase ) );
			opacity : 0;
			.logo{
				picture{
					width : auto;
					height : calc( 31 * var( --remBase ) );
					aspect-ratio : 90/31;
					background : url( "../images/logo.svg" ) 0 0 / contain no-repeat;
				}
				img{
					display : none;
				}
			}
		}
		&.is-scroll:has( #menuBtn[aria-expanded="false"] ) #header{
			transform : translateY( -100% );
		}
		&.is-scroll:has( #menuBtn[aria-expanded="true"] ) #header{
			opacity : 1;
			transform : translateY( 0 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#header{
		@media print , screen and ( width > 750px ){
			transition : transform .5s ease-in , opacity .5s ease-in;
		}
	}
}

/* --------------------------------------------
MENU BUTTON
--------------------------------------------- */
#menuBtn{
	position : fixed;
	top : 0;
	right : 0;
	z-index : 12;
	width : auto;
	aspect-ratio : 1;
	overflow : hidden;
	&[aria-expanded="true"]{
		overflow : hidden;
	}
	> span:nth-of-type( 1 ){
		position : relative;
		display : block;
		height : 100%;
		font-size : 0;
		> span{
			position : absolute;
			left : 0;
			display : block;
			width : 100%;
			transition : all .4s;
			&:nth-of-type( 1 ){
				top : 0;
			}
			&:nth-of-type( 4 ){
				bottom : 0;
			}
		}
	}
	&[aria-expanded="true"]{
		> span:nth-of-type( 1 ){
			span:nth-of-type( 1 ){
				scale : 0;
				translate : calc( $( top ) var( --remBase ) ) 0;
			}
			span:nth-of-type( 2 ){
				rotate : -45deg;
			}
			span:nth-of-type( 3 ){
				rotate : 45deg;
			}
			span:nth-of-type( 4 ){
				scale : 0;
				translate : calc( -$( top ) var( --remBase ) ) 0;
			}
		}
	}
	span span{
		height : calc( 2 * var( --remBase ) );
		background-color : #9e937d;
	}
	@media screen and ( width <= 750px ){
		&:not( [inert] ){
			translate : -100% 0;
		}
		&[inert]{
			translate : 0 0;
		}
		position : fixed;
		left : 100%;
		z-index : 11;
		height : calc( 60 * var( --remBase ) );
		padding-block : calc( 19 * var( --remBase ) );
		padding-inline : calc( 20 * var( --viewportBase ) );
		overflow-y : auto;
		translate : 0 0;
		.scroll{
			overflow-y : auto;
		}
		span span{
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				top : calc( 10 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		height : calc( 55 * var( --remBase ) );
		padding-block : calc( 15.5 * var( --remBase ) );
		padding-inline : calc( 14.5 * var( --viewportBase ) );
		background-color : #fff;
		transition : transform .3s ease-in;
		span span{
			&:nth-of-type( 2 ) , &:nth-of-type( 3 ){
				top : calc( 11 * var( --remBase ) );
			}
		}
	}
}
@media print , screen and ( width > 750px ){
	body{
		&:not( .is-scroll ) #menuBtn{
			transform : translateY( -100% );
		}
		&.is-scroll #menuBtn{
			transform : translateY( 0 );
		}
	}
}

/* --------------------------------------------
NAV
--------------------------------------------- */
@media screen and ( width <= 750px ){
	#nav{
		&:not( [inert] ){
			translate : -100% 0;
		}
		&[inert]{
			translate : 0 0;
		}
		position : fixed;
		left : 100%;
		z-index : 11;
		width : 100%;
		overflow-y : auto;
		background-color : #fff;
		translate : 0 0;
		.scroll{
			overflow-y : auto;
		}
		.scroll{
			height : 100vh;
			padding-inline : calc( 52.5 * var( --viewportBase ) );
			padding-top : calc( 70 * var( --remBase ) );
			padding-bottom : calc( 48 * var( --remBase ) );
		}
	}
}
#nav{
	@media print , screen and ( width > 750px ){
		width : calc( 615 * var( --remBase ) );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nav{
		@media screen and ( width <= 750px ){
			@media ( prefers-reduced-motion : no-preference ){
				transition : translate var( --standard-base );
			}
		}
	}
}

/* --------------------------------------------
NAV LINKS
--------------------------------------------- */
#navGlobal{
	> li{
		> a{
			> span{
				&:nth-of-type( 1 ){
					font-family : Jost , sans-serif;
				}
			}
		}
	}
	@media screen and ( width <= 750px ){
		a{
			display : block;
			color : #9e937d;
		}
		> li{
			padding-bottom : calc( 22 * var( --remBase ) );
			border-bottom : 1px solid #9e937d;
			+ li{
				margin-top : calc( 22 * var( --remBase ) );
			}
			> a{
				> span{
					&:nth-of-type( 1 ){
						margin-right : calc( 14 * 100% / 270 );
						font-size : calc( 20 * var( --remBase ) );
						font-weight : 700;
						letter-spacing : .12em;
					}
					&:nth-of-type( 2 ){
						font-size : calc( 12 * var( --remBase ) );
						font-weight : 500;
						letter-spacing : .15em;
					}
				}
			}
		}
		ul{
			margin-top : calc( 12 * var( --remBase ) );
		}
		li li + li{
			margin-top : calc( 17 * var( --remBase ) );
		}
		li li a{
			display : flex;
			align-items : flex-start;
			font-size : calc( 14.5 * var( --remBase ) );
			font-weight : 500;
			letter-spacing : .15em;
			&::before{
				display : block;
				flex-shrink : 0;
				width : calc( 7 * 100% / 270 );
				height : calc( 6 * var( --remBase ) );
				margin-top : calc( 4.25 * var( --remBase ) );
				margin-right : calc( 6 * 100% / 270 );
				content : "";
				background : url( "../images/ui/parts/triangle_right_blue.svg" ) 0 0 / contain no-repeat;
			}
		}
	}
	@media print , screen and ( width > 750px ){
		position : relative;
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		> li{
			> a{
				position : relative;
				display : block;
				transition : color .3s ease-in;
				> span{
					position : relative;
					display : block;
					padding-top : calc( 52 * var( --remBase ) );
					padding-bottom : calc( 25 * var( --remBase ) );
					letter-spacing : .015em;
					transition : opacity .3s ease-in;
					&:nth-of-type( 1 ){
						font-size : calc( 16 * var( --remBase ) );
						font-weight : 500;
						color : #9e937d;
					}
					&:nth-of-type( 2 ){
						position : absolute;
						top : 0;
						left : 50%;
						font-size : calc( 14 * var( --remBase ) );
						color : #36bbcc;
						white-space : nowrap;
						opacity : 0;
						transform : translateX( -50% );
					}
				}
				&:hover{
					> span{
						&:nth-of-type( 1 ){
							opacity : 0;
						}
						&:nth-of-type( 2 ){
							opacity : 1;
						}
					}
				}
				&.is-active , &:hover{
					> span{
						&:nth-of-type( 1 ){
							color : #36bbcc;
						}
					}
				}
				&:not( .is-active ){
					+ ul{
						display : none;
					}
				}
				&.is-active + ul{
					position : absolute;
					top : 100%;
					left : 0;
					display : flex;
					align-items : flex-start;
					width : 100%;
					padding-top : calc( 20 * var( --remBase ) );
					border-top : 1px solid #9e937d;
					li a{
						font-size : calc( 13 * var( --remBase ) );
						font-weight : 500;
						color : #9e937d;
						letter-spacing : .015em;
						transition : color .3s ease-in;
						&.is-active , &:hover{
							color : #36bbcc;
						}
					}
				}
			}
		}
		> li:nth-child( 1 ) ul{
			justify-content : space-between;
		}
		> li:nth-child( 2 ) ul{
			justify-content : space-around;
		}
	}
}
body.is-scroll{
	@media print , screen and ( width > 750px ){
		#navGlobal ul{
			display : none ! important;
		}
	}
}

/* --------------------------------------------
MAIN
--------------------------------------------- */
#main{
	overflow-x : hidden;
}

/* --------------------------------------------
SCROLL IN VIEW
--------------------------------------------- */
main > *:not( .no-effect ){
	opacity : 0;
}
main > *:not( .no-effect ).is-effect{
	animation : fadeIn 1s ease forwards;
}
@keyframes fadeIn{
	0%{
		opacity : 0;
		transform : translateY( 20px );
	}
	100%{
		opacity : 1;
		transform : translateY( 0 );
	}
}

/* --------------------------------------------
JOST
--------------------------------------------- */
.jost{
	font-family : Jost , sans-serif;
}

/* --------------------------------------------
IMG
--------------------------------------------- */
img.w100{
	width : 100%;
	height : auto;
}
picture.w100 img{
	width : 100%;
	height : auto;
}

/* --------------------------------------------
BACKGROUND COLOR
--------------------------------------------- */
.bg01{
	background-color : #f2f1ee;
}
.bg-white{
	background-color : #fff;
}

/* --------------------------------------------
TITLE
--------------------------------------------- */
#title01{
	display : grid;
	place-items : center;
	align-content : center;
	background-color : #f2f1ee;
	span{
		display : block;
		font-weight : 500;
		color : #9e937d;
		&:nth-of-type( 1 ){
			font-family : Jost , sans-serif;
			text-align : center;
			text-indent : .16em;
			letter-spacing : .16em;
		}
		&:nth-of-type( 2 ){
			font-size : calc( 12 * var( --remBase ) );
			text-align : center;
			text-indent : .15em;
			letter-spacing : .15em;
		}
	}
	@media screen and ( width <= 750px ){
		height : calc( 130 * var( --remBase ) );
		span{
			&:nth-of-type( 1 ){
				font-size : calc( 28 * var( --remBase ) );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( ( -5 + 6.5 + 3 ) * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		height : calc( 180 * var( --remBase ) );
		span{
			&:nth-of-type( 1 ){
				font-size : calc( 30 * var( --remBase ) );
			}
			&:nth-of-type( 2 ){
				margin-top : calc( ( 6.5 + 3 ) * var( --remBase ) );
			}
		}
	}
}
#hgroup01{
	display : grid;
	place-items : center;
	align-content : center;
	background-color : #f2f1ee;
	p{
		color : #36bbcc;
		text-align : center;
		text-indent : .06em;
		letter-spacing : .06em;
		border-bottom : 1px solid currentColor;
		span{
			line-height : 1;
			text-align : center;
			text-indent : .06em;
			letter-spacing : .06em;
		}
	}
	h1{
		display : grid;
		place-items : center;
		span{
			color : #736357;
			text-align : center;
			&:nth-of-type( 1 ){
				font-weight : 500;
				text-align : center;
				text-indent : .16em;
				letter-spacing : .16em;
			}
			&:nth-of-type( 2 ){
				text-align : center;
				text-indent : .1em;
				letter-spacing : .1em;
			}
		}
	}
	@media screen and ( width <= 750px ){
		height : calc( 130 * var( --remBase ) );
		p{
			font-size : calc( 13 * var( --remBase ) );
			line-height : 1.4615;
		}
		h1{
			margin-top : calc( ( 14 + 5.5 ) * var( --remBase ) );
			span{
				&:nth-of-type( 1 ){
					font-size : calc( 23 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( ( 5.5 + 3 ) * var( --remBase ) );
					font-size : calc( 13 * var( --remBase ) );
				}
			}
		}
	}
	@media print , screen and ( width > 750px ){
		height : calc( 180 * var( --remBase ) );
		p{
			font-size : calc( 14 * var( --remBase ) );
			line-height : 1.9286;
			span{
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		h1{
			margin-top : calc( ( 9 + 5.5 ) * var( --remBase ) );
			span{
				&:nth-of-type( 1 ){
					font-size : calc( 25 * var( --remBase ) );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( ( 4 + 5.5 + 3.5 ) * var( --remBase ) );
					font-size : calc( 15 * var( --remBase ) );
				}
			}
		}
	}
}

/* --------------------------------------------
STICKY CONTACT
--------------------------------------------- */
#stickyContact{
	position : fixed;
	bottom : calc( 20 * var( --remBase ) );
	z-index : 5;
	display : block;
	width : fit-content;
	&[inert]{
		opacity : 0 ! important;
		translate : 50% 0;
	}
	&:not( [inert] ){
		opacity : 1;
		translate : 0 0;
	}
	@media screen and ( width <= 750px ){
		right : calc( 14 * var( --viewportBase ) );
		img{
			height : calc( 50 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		left : calc( 50% + 389 * var( --viewportBase ) );
		img{
			height : calc( 93 * var( --remBase ) );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#stickyContact{
		transition : opacity .3s linear , translate .3s linear;
	}
}

/* --------------------------------------------
LIST SERVICES
--------------------------------------------- */
#listServices{
	> li{
		counter-increment : no;
		> a{
			position : relative;
			background : white;
			box-shadow : calc( 3 * var( --remBase ) ) calc( 3 * var( --remBase ) ) 0 color-mix( in srgb , #9e937d 33% , transparent );
			&::before{
				justify-self : center;
				order : -1;
				font-family : Jost , sans-serif;
				font-weight : 300;
				color : var( --blue );
				text-align : center;
				content : counter( no );
			}
			&::after{
				inset : 0;
				display : block;
				justify-self : center;
				order : 3;
				width : auto;
				margin-inline : auto;
				font-size : 0;
				content : "";
				background-repeat : no-repeat;
				background-position : center 0;
				background-size : contain;
			}
		}
	}
	h3 , h4{
		> span{
			display : block;
			text-align : center;
			&:nth-of-type( 1 ){
				font-weight : 700;
				color : var( --blue );
				text-align : center;
				text-indent : .03em;
				letter-spacing : .03em;
			}
			&:nth-of-type( 2 ){
				font-weight : 700;
				color : black;
				text-align : center;
				text-indent : .04em;
				letter-spacing : .04em;
				&::after{
					display : block;
					font-family : Jost , sans-serif;
					font-weight : 500;
					color : #9e937d;
					text-align : center;
					text-indent : .06em;
					letter-spacing : .06em;
				}
			}
		}
	}
	.more{
		display : grid;
		grid-auto-flow : column;
		align-items : start;
		justify-content : end;
		order : 4;
		font-family : Jost , sans-serif;
		font-weight : 500;
		color : var( --blue );
		letter-spacing : .06em;
		&::after{
			display : block;
			aspect-ratio : 67/8.5;
			font-size : 0;
			content : "";
			background : url( "../images/ui/arrow/right03.svg" ) left top / contain no-repeat;
			filter : var( --filterBlue );
		}
	}
	@media screen and ( width <= 750px ){
		> li + li{
			margin-top : calc( 15 * var( --remBase ) );
		}
		> li{
			> a{
				display : grid;
				grid-auto-flow : row;
				padding-top : calc( 24 * var( --remBase ) );
				padding-bottom : calc( 24.5 * var( --remBase ) );
				&::before{
					order : -1;
					font-size : calc( 50 * var( --remBase ) );
					font-weight : 300;
					text-align : center;
				}
				&::after{
					height : calc( 150 * var( --remBase ) );
					aspect-ratio : 285/150;
					margin-inline : auto;
				}
			}
			&:nth-child( 1 ){
				> a{
					&::after{
						background-image : image-set( url( "../images/parts/listServices/img01_sp@1x.webp" ) type( "image/webp" ) 1x , url( "../images/parts/listServices/img01_sp@2x.webp" ) type( "image/webp" ) 2x );
					}
				}
			}
			&:nth-child( 2 ){
				> a{
					&::after{
						background-image : image-set( url( "../images/parts/listServices/img02_sp@1x.webp" ) type( "image/webp" ) 1x , url( "../images/parts/listServices/img02_sp@2x.webp" ) type( "image/webp" ) 2x );
					}
				}
			}
			&:nth-child( 3 ){
				> a{
					&::after{
						background-image : image-set( url( "../images/parts/listServices/img03_sp@1x.webp" ) type( "image/webp" ) 1x , url( "../images/parts/listServices/img03_sp@2x.webp" ) type( "image/webp" ) 2x );
					}
				}
			}
		}
		h3 , h4{
			margin-top : calc( ( 3 - ( ( 35 - 24 ) / 2 ) ) * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 16 * var( --remBase ) );
					line-height : calc( 35 / 16 );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( ( 1 - ( ( 35 - 24 ) / 2 ) - ( ( 40 - 26 ) / 2 ) ) * var( --remBase ) );
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 38.5 / 18 );
					&::after{
						margin-top : calc( ( 6.5 - ( ( 40 - 26 ) / 2 ) - ( ( 28 - 19 ) / 2 ) ) * var( --remBase ) );
						font-size : calc( 16 * var( --remBase ) );
						line-height : calc( 28 / 16 );
					}
				}
			}
		}
		.more{
			column-gap : calc( 9.8 * var( --remBase ) );
			margin-right : calc( 36.2 * 100% / 335 );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 31.5 / 18 );
			&::after{
				height : calc( 8.5 * var( --remBase ) );
				margin-top : calc( 6.8 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 750px ){
		display : grid;
		grid-template-columns : repeat( 3 , calc( 370 * var( --contentBase ) ) );
		justify-content : space-between;
		> li , > li > a , article{
			display : grid;
			grid-template-rows : subgrid;
			grid-row : span 5;
		}
		> li{
			> a{
				padding-top : calc( 24.5 * var( --remBase ) );
				padding-bottom : calc( 33.5 * var( --remBase ) );
				&::before{
					top : calc( 24.5 * var( --remBase ) );
					font-size : calc( 80 * var( --remBase ) );
				}
			}
			&:nth-child( 1 ){
				> a{
					&::after{
						height : calc( 165 * var( --remBase ) );
						aspect-ratio : 339/165;
						background-image : image-set( url( "../images/parts/listServices/img01_pc@1x.webp" ) type( "image/webp" ) 1x , url( "../images/parts/listServices/img01_pc@2x.webp" ) type( "image/webp" ) 2x );
					}
				}
			}
			&:nth-child( 2 ){
				> a{
					&::after{
						height : calc( 150 * var( --remBase ) );
						aspect-ratio : 307/150;
						background-image : image-set( url( "../images/parts/listServices/img02_pc@1x.webp" ) type( "image/webp" ) 1x , url( "../images/parts/listServices/img02_pc@2x.webp" ) type( "image/webp" ) 2x );
					}
				}
			}
			&:nth-child( 3 ){
				> a{
					&::after{
						height : calc( 151 * var( --remBase ) );
						aspect-ratio : 309/151;
						background-image : image-set( url( "../images/parts/listServices/img03_pc@1x.webp" ) type( "image/webp" ) 1x , url( "../images/parts/listServices/img03_pc@2x.webp" ) type( "image/webp" ) 2x );
					}
				}
			}
		}
		h3 , h4{
			margin-top : calc( 9.5 * var( --remBase ) );
			> span{
				&:nth-of-type( 1 ){
					font-size : calc( 18 * var( --remBase ) );
					line-height : calc( 35 / 18 );
				}
				&:nth-of-type( 2 ){
					margin-top : calc( 4 * var( --remBase ) );
					font-size : calc( 22 * var( --remBase ) );
					line-height : calc( 38.5 / 22 );
					&::after{
						margin-top : calc( 1.5 * var( --remBase ) );
						font-size : calc( 16 * var( --remBase ) );
						line-height : calc( 28 / 16 );
					}
				}
			}
		}
		.more{
			column-gap : calc( 9.8 * var( --remBase ) );
			margin-top : calc( -4.5 * var( --remBase ) );
			margin-right : calc( 31.3 * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
			line-height : calc( 26 / 18 );
			&::after{
				height : calc( 8.5 * var( --remBase ) );
				margin-top : calc( 6.8 * var( --remBase ) );
			}
		}
	}
}
#listServices.listServices02{
	p{
		font-weight : 500;
		color : var( --blue );
	}
}

/* --------------------------------------------
WORKS
--------------------------------------------- */
#works01{
	a{
		background-color : white;
	}
	p:nth-of-type( 1 ){
		display : inline-flex;
		align-items : flex-end;
		font-weight : 500;
		color : #36bbcc;
		letter-spacing : .06em;
		border-bottom : 1px solid currentColor;
	}
	h2{
		font-weight : 500;
		color : #9e937d;
		letter-spacing : .1em;
	}
	@media screen and ( width <= 750px ){
		picture{
			width : 100%;
		}
		a{
			display : block;
			padding-top : calc( ( 36 + 4.75 ) * var( --remBase ) );
			padding-bottom : calc( ( 40 - 5 ) * var( --remBase ) );
			padding-left : calc( 32 * var( --viewportBase ) );
			padding-right : calc( 32 * var( --viewportBase ) );
		}
		> li:nth-child( odd ){
			a{
				right : 0;
			}
		}
		p:nth-of-type( 1 ){
			padding-bottom : calc( 6.75 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			> span{
				margin-left : calc( 4 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		h2{
			margin-top : calc( ( 13.4 + 4.5 ) * var( --remBase ) );
			font-size : calc( 18 * var( --remBase ) );
		}
		p:nth-of-type( 2 ){
			margin-top : calc( ( 17 + 4.5 - 6.25 ) * var( --remBase ) );
			font-size : 1.35rem;
			line-height : 1.9259;
		}
		a > span{
			margin-top : calc( ( 34.5 - 6.25 - 5 ) * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 750px ){
		padding-bottom : calc( 114 * var( --remBase ) );
		> li{
			position : relative;
		}
		> li + li{
			margin-top : calc( 114 * var( --remBase ) );
		}
		picture{
			flex-shrink : 0;
			width : calc( 100% - 300 * var( --viewportBase ) );
		}
		a{
			position : absolute;
			bottom : calc( -45 * var( --remBase ) );
			flex-shrink : 0;
			width : calc( 470 * var( --viewportBase ) );
			height : calc( 430 * var( --remBase ) );
			padding-inline : calc( 70 * var( --viewportBase ) );
			padding-top : calc( ( 40 + 4.5 ) * var( --remBase ) );
		}
		> li:nth-child( odd ){
			a{
				right : 0;
			}
		}
		> li:nth-child( even ){
			picture{
				margin-left : auto;
			}
			a{
				left : 0;
			}
		}
		p:nth-of-type( 1 ){
			padding-bottom : calc( 6.75 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			> span{
				margin-left : calc( 4 * var( --remBase ) );
				font-size : calc( 18 * var( --remBase ) );
			}
		}
		h2{
			margin-top : calc( ( 9 + 4.5 + 4.5 ) * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
		}
		p:nth-of-type( 2 ){
			width : 100%;
			margin-top : calc( ( 28 - 7 ) * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
			line-height : 2;
		}
		a > span{
			margin-top : calc( ( 19 - 7 ) * var( --remBase ) );
			margin-right : calc( 14 * var( --remBase ) );
		}
	}
}