@charset "UTF-8";

/* --------------------------------------------
NEWS
--------------------------------------------- */
#news section{
	display : grid;
	align-items : start;
	justify-content : start;
}
#news .category{
	display : grid;
	place-items : center;
	padding-inline : 2em;
	text-box : trim-both cap alphabetic;
	color : white;
}
#news .category.rectuit{
	background-color : var( --primary );
}
#news h3{
	font-weight : 500;
}
@media screen and ( width <= 750px ){
	#news{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
	}
	#news ul{
		margin-top : calc( 64 var( --remBase ) );
	}
	#news section{
		grid-template-columns : 1fr auto;
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
	}
	#news .category{
		grid-row : 1;
		grid-column : 1;
		width : fit-content;
		padding-block : calc( 8 var( --remBase ) );
		font-size : 2.4rem;
		border-radius : calc( 24 var( --remBase ) );
	}
	#news time{
		grid-row : 1;
		grid-column : 2;
		margin-top : calc( 8 var( --remBase ) );
		font-size : 2.4rem;
	}
	#news h3{
		grid-row : 2;
		grid-column : 1/-1;
		font-size : 2.8rem;
		line-height : 1.5;
	}
}
@media print , screen and ( width > 750px ){
	#news{
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 48 var( --remBase ) );
	}
	#news ul{
		width : calc( 1000 var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 80 var( --remBase ) );
	}
	#news li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	#news section{
		grid-template-columns : auto auto auto;
		column-gap : calc( 40 * 100% / 1000 );
	}
	#news time{
		grid-row : 1;
		grid-column : 1;
		margin-top : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
	}
	#news .category{
		grid-row : 1;
		grid-column : 2;
		padding-block : calc( 8 var( --remBase ) );
		font-size : 1.6rem;
		border-radius : calc( 16 var( --remBase ) );
	}
	#news h3{
		grid-row : 1;
		grid-column : 3;
		margin-top : calc( 2.5 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.5;
	}
}

/* --------------------------------------------
LINK SERVICES
--------------------------------------------- */
#linkServices ul{
	display : grid;
	align-items : center;
	justify-content : center;
}
#linkServices li{
	height : 100%;
}
#linkServices li:nth-child( 1 ){
	--color : var( --primary );
}
#linkServices li:nth-child( 1 ) a::after{
	filter : var( --filterPrimary );
}
#linkServices li:nth-child( 2 ){
	--color : var( --secondary );
}
#linkServices li:nth-child( 2 ) a{
	text-align : center;
	text-indent : .5em;
	letter-spacing : .5em;
}
#linkServices li:nth-child( 2 ) a::after{
	filter : var( --filterSecondary );
}
#linkServices a{
	position : relative;
	display : block;
	height : 100%;
	overflow : hidden;
	font-weight : 500;
	color : var( --color );
	text-align : center;
	background-color : #fff;
	border : solid 1px var( --color );
	border-radius : 100vmax;
}
#linkServices a::after{
	display : block;
	width : auto;
	aspect-ratio : 800/436.363;
	margin-inline : auto;
	font-size : 0;
	content : "";
	background : url( "../images/ui/arrow/down01.svg" ) center / contain no-repeat;
}
@media screen and ( width <= 750px ){
	#linkServices{
		margin-top : calc( 48 var( --remBase ) );
	}
	#linkServices ul{
		grid-template-columns : repeat( 2 , 1fr );
		grid-auto-rows : calc( 80 var( --remBase ) );
		column-gap : calc( 25 var( --percentBase ) );
	}
	#linkServices a{
		padding-top : calc( 28 var( --remBase ) );
		font-size : 1.8rem;
	}
	#linkServices a::after{
		height : calc( 8 var( --remBase ) );
		margin-top : calc( 12 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#linkServices{
		margin-top : calc( 64 var( --remBase ) );
	}
	#linkServices ul{
		grid-template-columns : repeat( 2 , calc( 320 var( --percentBase ) ) );
		grid-auto-rows : calc( 72 var( --remBase ) );
		column-gap : calc( 64 var( --percentBase ) );
	}
	#linkServices a{
		padding-top : calc( 24 var( --remBase ) );
		font-size : 1.6rem;
	}
	#linkServices a::after{
		height : calc( 8 var( --remBase ) );
		margin-top : calc( 8 var( --remBase ) );
	}
}
@media ( hover : hover ){
	#linkServices li a:hover{
		color : white;
		background-color : var( --color );
	}
	#linkServices li a:hover::after{
		filter : var( --filterWhite );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#linkServices a{
		transition : color var( --transitionBase ) , background var( --transitionBase );
	}
	#linkServices a::after{
		filter : var( --transitionBase );
	}
}

/* --------------------------------------------
SERVICE
--------------------------------------------- */
:where( #service01 , #service02 ){
	overflow : hidden;
	box-shadow : 0 0 calc( 24 var( --remBase ) ) color-mix( in sRGB , black 10% , transparent );
}
:where( #service01 , #service02 ) h2{
	font-weight : 500;
	color : white;
	letter-spacing : .05em;
	background-color : var( --color );
}
:where( #service01 , #service02 ) .serviceHead h3{
	font-weight : 500;
	letter-spacing : .05em;
}
:where( #service01 , #service02 ) .serviceHead p{
	letter-spacing : .1em;
}
:where( #service01 , #service02 ) :where( .serviceList01 , .serviceList02 , .serviceOverview , .serviceFaq ) h3{
	font-weight : 500;
	color : white;
	letter-spacing : .1em;
	background-color : var( --color );
}
:where( #service01 , #service02 ) .serviceList01 .head{
	display : grid;
	grid-template-rows : auto 1fr;
	grid-template-columns : auto 1fr;
	align-items : start;
}
:where( #service01 , #service02 ) .serviceList01 .head::before{
	grid-row : 1/-1;
	grid-column : 1;
	align-self : start;
	width : auto;
	aspect-ratio : 1;
	content : "";
	background-color : var( --color );
	border-radius : 50%;
}
:where( #service01 , #service02 ) .serviceList01 .head h4{
	grid-row : 1;
	grid-column : 2;
	font-weight : 500;
	letter-spacing : .1em;
}
:where( #service01 , #service02 ) .serviceList01 .head p{
	grid-row : 2;
	letter-spacing : .05em;
}
:where( #service01 , #service02 ) .serviceList01 ul ul{
	display : grid;
}
:where( #service01 , #service02 ) .serviceList01 li li{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
}
:where( #service01 , #service02 ) .serviceList01 li li::before{
	display : block;
	width : auto;
	aspect-ratio : 800.012/586.806;
	font-size : 0;
	content : "";
	background : url( "../images/ui/icon/check01.svg" ) center / contain no-repeat;
	filter : var( --filter );
}
:where( #service01 , #service02 ) .serviceList02 picture{
	width : 100%;
}
:where( #service01 , #service02 ) .serviceList02 h4{
	font-weight : 500;
	letter-spacing : .05em;
}
:where( #service01 , #service02 ) .serviceList02 p{
	letter-spacing : .05em;
}
:where( #service01 , #service02 ) .serviceOverview table th{
	font-weight : 500;
	color : white;
}
:where( #service01 , #service02 ) .serviceOverview table dl{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : baseline;
	justify-content : start;
}
:where( #service01 , #service02 ) .serviceOverview .contact{
	background-color : color-mix( in sRGB , var( --color ) 10% , transparent );
}
:where( #service01 , #service02 ) .serviceOverview .contact h4{
	font-weight : 500;
	color : var( --primary );
	text-align : center;
	letter-spacing : .01em;
}
:where( #service01 , #service02 ) .serviceOverview .contact h4::after{
	display : block;
	margin-inline : auto;
	content : "";
	background-color : currentColor;
}
:where( #service01 , #service02 ) .serviceOverview .contact ul{
	display : grid;
	grid-template-columns : repeat( 2 , 1fr );
	justify-content : space-between;
}
:where( #service01 , #service02 ) .serviceOverview .contact li{
	height : 100%;
}
:where( #service01 , #service02 ) .serviceOverview .contact a{
	display : grid;
	place-items : center;
	height : 100%;
	border-color : var( --color );
}
:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 1 ) a{
	color : var( --color );
	background-color : white;
}
:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 1 ) a img{
	filter : var( --filter );
}
:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 2 ) a{
	color : white;
	background-color : var( --color );
}
:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 2 ) a img{
	filter : var( --filterWhite );
}
:where( #service01 , #service02 ) .serviceFaq summary{
	position : relative;
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
	justify-content : start;
}
:where( #service01 , #service02 ) .serviceFaq summary::before{
	display : grid;
	place-items : center;
	aspect-ratio : 1;
	font-weight : 600;
	color : white;
	content : "Q";
	background-color : var( --color );
	border-radius : 50%;
}
:where( #service01 , #service02 ) .serviceFaq summary span{
	font-weight : 500;
	letter-spacing : .1em;
}
:where( #service01 , #service02 ) .serviceFaq summary span::before , :where( #service01 , #service02 ) .serviceFaq summary span::after{
	position : absolute;
	display : block;
	font-size : 0;
	content : "";
	background-color : var( --color );
}
:where( #service01 , #service02 ) .serviceFaq .detailsContent{
	display : grid;
	grid-template-columns : 1fr;
	overflow : hidden;
}
:where( #service01 , #service02 ) .serviceFaq .detailsContent > div{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : start;
	justify-content : start;
	overflow : hidden;
}
:where( #service01 , #service02 ) .serviceFaq .detailsContent > div::before{
	display : grid;
	place-items : center;
	aspect-ratio : 1;
	font-weight : 600;
	color : white;
	letter-spacing : 0;
	content : "A";
	background-color : color-mix( in sRGB , var( --color ) 85% , transparent );
	border-radius : 50%;
}
:where( #service01 , #service02 ) .serviceFaq .detailsContent p a{
	-webkit-text-decoration : underline;
	text-decoration : underline;
}
:where( #service01 , #service02 ) .serviceFaq .detailsContent .link{
	display : grid;
	grid-template-columns : auto auto;
	column-gap : .125em;
	align-items : baseline;
	justify-content : start;
	width : fit-content;
	color : var( --color );
}
:where( #service01 , #service02 ) .serviceFaq .detailsContent .link::before{
	font-weight : 700;
	content : "＞";
}
:where( #service01 , #service02 ) .serviceFaq details[open] summary span::after{
	rotate : -90deg;
}
:where( #service01 , #service02 ) .serviceFaq details:not( [open] ) summary span::after{
	rotate : 0deg;
}
:where( #service01 , #service02 ) .serviceFaq details.is-open .detailsContent{
	grid-template-rows : 1fr;
}
:where( #service01 , #service02 ) .serviceFaq details:not( .is-open ) .detailsContent{
	grid-template-rows : 0fr;
}
:where( #service01 , #service02 ) .serviceLinks a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	overflow : hidden;
	outline-width : 1px;
	outline-style : solid;
	outline-color : transparent;
	outline-offset : -1px;
}
:where( #service01 , #service02 ) .serviceLinks a picture{
	position : absolute;
	top : 0;
	left : 0;
	z-index : -2;
	width : 100%;
	height : 100%;
}
:where( #service01 , #service02 ) .serviceLinks a picture img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
:where( #service01 , #service02 ) .serviceLinks a span{
	position : relative;
	z-index : -1;
	display : grid;
	grid-auto-flow : column;
	align-items : center;
	justify-content : center;
	width : 50%;
	height : 100%;
	margin-left : auto;
	color : white;
	letter-spacing : .5em;
	background-color : var( --color );
}
:where( #service01 , #service02 ) .serviceLinks a span::after{
	margin-left : .125em;
	font-size : .75em;
	content : "＞";
}
:where( #service01 , #service02 ) .serviceLinks a span::before{
	position : absolute;
	top : 0;
	left : 0;
	height : 100%;
	clip-path : polygon( 100% 0 , 100% 100% , 0 100% );
	font-size : 0;
	content : "";
	background-color : var( --color );
	translate : calc( -100% + 1px ) 0;
}
@media screen and ( width <= 750px ){
	:where( #service01 , #service02 ){
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
		border-radius : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) h2{
		padding-block : calc( 32 var( --remBase ) );
		padding-inline : calc( 25 var( --percentBase ) );
		font-size : 3.2rem;
	}
	:where( #service01 , #service02 ) section{
		padding-inline : calc( 25 var( --percentBase ) );
	}
	:where( #service01 , #service02 ) .serviceHead{
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceHead h3{
		font-size : 2.8rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceHead p{
		margin-top : calc( 20 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.7;
	}
	:where( #service01 , #service02 ) .serviceHead picture{
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceHead picture img{
		width : 100%;
		height : auto;
	}
	:where( #service01 , #service02 ) :where( .serviceList01 , .serviceList02 , .serviceOverview , .serviceFaq ){
		padding-bottom : calc( 64 var( --remBase ) );
	}
	:where( #service01 , #service02 ) :where( .serviceList01 , .serviceList02 , .serviceOverview , .serviceFaq ) h3{
		padding-block : calc( 12 var( --remBase ) );
		padding-inline : calc( 25 * 100% / 650 );
		font-size : 2.8rem;
		line-height : 1.5;
		border-radius : calc( 12 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01{
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li{
		padding-top : calc( 40 var( --remBase ) );
		padding-bottom : calc( 64 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li:nth-child( 1 ){
		grid-column : 1/-1;
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li + li{
		border-top : solid 1px #ccc;
	}
	:where( #service01 , #service02 ) .serviceList01 .head{
		row-gap : calc( 12 var( --remBase ) );
		column-gap : calc( 25 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 .head::before{
		height : calc( 80 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 .head h4{
		margin-top : calc( 19 var( --remBase ) );
		font-size : 3.2rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceList01 .head p{
		font-size : 2.4rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceList01 ul ul{
		grid-template-columns : repeat( 2 , 1fr );
		row-gap : calc( 8 var( --remBase ) );
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 li li{
		column-gap : calc( 25 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceList01 li li::before{
		height : calc( 16 var( --remBase ) );
		margin-top : calc( 10 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02{
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02 ul{
		margin-top : calc( 32 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02 li{
		display : grid;
		grid-template-columns : calc( 320 var( --percentBase ) ) 1fr;
		row-gap : calc( 24 var( --remBase ) );
		column-gap : calc( 40 var( --percentBase ) );
		align-items : center;
		justify-content : start;
	}
	:where( #service01 , #service02 ) .serviceList02 li + li{
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02 picture{
		grid-row : 1;
		grid-column : 1;
		height : calc( 200 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02 picture img{
		width : 100%;
		height : 100%;
	}
	:where( #service01 , #service02 ) .serviceList02 h4{
		grid-row : 1;
		grid-column : 2;
		font-size : 2.4rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceList02 p{
		grid-row : 2;
		grid-column : 1/-1;
		font-size : 2.4rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceOverview .box{
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview table , :where( #service01 , #service02 ) .serviceOverview tbody , :where( #service01 , #service02 ) .serviceOverview tr , :where( #service01 , #service02 ) .serviceOverview th , :where( #service01 , #service02 ) .serviceOverview td{
		display : block;
	}
	:where( #service01 , #service02 ) .serviceOverview table th , :where( #service01 , #service02 ) .serviceOverview table td{
		padding-block : calc( 16 var( --remBase ) );
		padding-inline : calc( 25 var( --percentBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
		text-align : left;
	}
	:where( #service01 , #service02 ) .serviceOverview table th{
		background-color : color-mix( in sRGB , var( --color ) 80% , white );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact{
		padding-block : calc( 64 var( --remBase ) );
		padding-inline : calc( 25 var( --percentBase ) );
		border-radius : calc( 16 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact h4{
		font-size : 2.8rem;
	}
	:where( #service01 , #service02 ) .serviceOverview .contact h4::after{
		width : calc( 120 * 100% / 650 );
		height : calc( 2 var( --remBase ) );
		margin-top : calc( 12 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact p{
		margin-top : calc( 24 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceOverview .contact ul{
		column-gap : calc( 40 * 100% / 650 );
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact a{
		padding-block : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 8 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact a img{
		height : calc( 32 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq h3{
		margin-bottom : calc( 32 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq details + details{
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq summary{
		column-gap : calc( 20 * 100% / 652 );
		padding-right : calc( 48 var( --percentBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq summary::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.4rem;
	}
	:where( #service01 , #service02 ) .serviceFaq summary span{
		margin-top : calc( 7.5 var( --remBase ) );
		font-size : 2.2rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceFaq summary span::before , :where( #service01 , #service02 ) .serviceFaq summary span::after{
		top : calc( 23 var( --remBase ) );
		right : calc( 10 var( --percentBase ) );
		width : calc( 28 var( --percentBase ) );
		height : calc( 2 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent > div{
		column-gap : calc( 20 var( --percentBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent > div::before{
		height : calc( 48 var( --remBase ) );
		font-size : 2.4rem;
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent > div > div{
		margin-top : calc( 7.5 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent p{
		font-size : 2.2rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent .link{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 2.2rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceFaq details[open] .detailsContent{
		padding-top : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceLinks li{
		width : calc( 480 var( --percentBase ) );
		height : calc( 140 var( --remBase ) );
		margin-inline : auto;
	}
	:where( #service01 , #service02 ) .serviceLinks li + li{
		margin-top : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceLinks a{
		border-radius : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceLinks span{
		font-size : 2.2rem;
	}
	:where( #service01 , #service02 ) .serviceLinks span::before{
		width : calc( 32 * 100% / 240 );
	}
}
@media print , screen and ( width > 750px ){
	:where( #service01 , #service02 ){
		padding-bottom : calc( 80 var( --remBase ) );
		margin-top : calc( 80 var( --remBase ) );
		border-radius : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) h2{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 32 var( --percentBase ) );
		font-size : 2.8rem;
	}
	:where( #service01 , #service02 ) :where( section , .serviceLinks ){
		padding-inline : calc( 32 var( --percentBase ) );
	}
	:where( #service01 , #service02 ) .serviceHead{
		display : grid;
		grid-template-rows : 1fr auto auto 1fr;
		grid-template-columns : 1fr calc( 320 * 100% / 1276 );
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 80 * 100% / 1276 );
		align-items : center;
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceHead h3{
		grid-row : 2;
		grid-column : 1;
		font-size : 2.4rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceHead p{
		grid-row : 3;
		grid-column : 1;
		font-size : 1.6rem;
		line-height : 1.7;
	}
	:where( #service01 , #service02 ) .serviceHead picture{
		grid-row : 1/-1;
		grid-column : 2;
	}
	:where( #service01 , #service02 ) .serviceHead picture img{
		width : 100%;
		height : auto;
	}
	:where( #service01 , #service02 ) :where( .serviceList01 , .serviceList02 , .serviceOverview , .serviceFaq , .serviceLinks ){
		padding-bottom : calc( 40 var( --remBase ) );
	}
	:where( #service01 , #service02 ) :where( .serviceList01 , .serviceList02 , .serviceOverview , .serviceFaq , .serviceLinks ) h3{
		padding-block : calc( 8 var( --remBase ) );
		padding-inline : calc( 32 * 100% / 1176 );
		font-size : 2.4rem;
		line-height : 1.5;
		border-radius : calc( 8 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01{
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 > ul{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 64 * 100% / 1176 );
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li{
		padding-top : calc( 32 var( --remBase ) );
		padding-bottom : calc( 32 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li:nth-child( 1 ){
		grid-column : 1/-1;
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li + li{
		border-top : solid 1px #ccc;
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li + li:nth-child( odd ){
		position : relative;
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li + li:nth-child( odd )::before{
		position : absolute;
		top : calc( 32 var( --remBase ) );
		left : calc( -32 * 100% / 562 );
		display : block;
		width : 1px;
		height : calc( 100% - calc( 64 var( --remBase ) ) );
		content : "";
		background-color : #ccc;
	}
	:where( #service01 , #service02 ) .serviceList01 .head{
		row-gap : calc( 8 var( --remBase ) );
		column-gap : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 .head::before{
		height : calc( 64 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 .head h4{
		margin-top : calc( 14 var( --remBase ) );
		font-size : 2.4rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceList01 .head p{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceList01 ul ul{
		row-gap : calc( 4 var( --remBase ) );
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 li li{
		column-gap : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceList01 li li::before{
		height : calc( 12 var( --remBase ) );
		margin-top : calc( 6 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li:first-child ul{
		grid-template-columns : repeat( 4 , 1fr );
	}
	:where( #service01 , #service02 ) .serviceList01 > ul > li:not( :first-child ) ul{
		grid-template-columns : repeat( 3 , 1fr );
	}
	:where( #service01 , #service02 ) .serviceList02{
		padding-block : calc( 80 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02 ul{
		display : grid;
		grid-template-columns : repeat( 4 , 1fr );
		column-gap : calc( 24 * 100% / 1176 );
		margin-top : calc( 32 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02 picture{
		height : calc( 200 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceList02 picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
	}
	:where( #service01 , #service02 ) .serviceList02 h4{
		margin-top : calc( 16 var( --remBase ) );
		font-size : 2rem;
		line-height : 1.5;
		text-align : center;
		text-indent : .05em;
	}
	:where( #service01 , #service02 ) .serviceList02 p{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceOverview .box{
		display : grid;
		grid-template-columns : calc( 800 * 100% / 1176 ) calc( 336 * 100% / 1176 );
		justify-content : space-between;
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview table th , :where( #service01 , #service02 ) .serviceOverview table td{
		font-size : 1.6rem;
		line-height : 1.5;
		border-top : solid 1px #ccc;
		border-bottom : solid 1px #ccc;
	}
	:where( #service01 , #service02 ) .serviceOverview table th{
		width : calc( 240 * 100% / 800 );
		padding-block : calc( 24 var( --remBase ) );
		background-color : color-mix( in sRGB , var( --color ) 90% , white );
	}
	:where( #service01 , #service02 ) .serviceOverview table td{
		padding-block : calc( 24 var( --remBase ) );
		padding-inline : calc( 24 * 100% / 560 );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact{
		display : grid;
		grid-auto-flow : row;
		row-gap : calc( 20 var( --remBase ) );
		align-content : center;
		padding-inline : calc( 20 * 100% / 336 );
		border-radius : calc( 12 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact h4{
		font-size : 2rem;
	}
	:where( #service01 , #service02 ) .serviceOverview .contact h4::after{
		width : calc( 120 * 100% / 296 );
		height : calc( 2 var( --remBase ) );
		margin-top : calc( 12 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact p{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceOverview .contact ul{
		column-gap : calc( 20 * 100% / 296 );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact a{
		padding-block : calc( 24 var( --remBase ) );
		border-width : calc( 2 var( --remBase ) );
		border-radius : calc( 8 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact a img{
		height : calc( 20 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq h3{
		margin-bottom : calc( 32 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq details + details{
		margin-top : calc( 32 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq summary{
		column-gap : calc( 16 * 100% / 1128 );
		padding-right : calc( 48 * 100% / 1176 );
	}
	:where( #service01 , #service02 ) .serviceFaq summary::before{
		height : calc( 40 var( --remBase ) );
		font-size : 2rem;
	}
	:where( #service01 , #service02 ) .serviceFaq summary span{
		margin-top : calc( 6.5 var( --remBase ) );
		font-size : 1.8rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceFaq summary span::before , :where( #service01 , #service02 ) .serviceFaq summary span::after{
		top : calc( 19 var( --remBase ) );
		right : calc( 12 * 100% / 1176 );
		width : calc( 24 * 100% / 1176 );
		height : calc( 2 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent > div{
		column-gap : calc( 16 * 100% / 1080 );
		padding-left : calc( 40 * 100% / 1176 );
		padding-right : calc( 48 * 100% / 1176 );
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent > div::before{
		height : calc( 40 var( --remBase ) );
		font-size : 2rem;
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent > div > div{
		margin-top : calc( 8 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent p{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceFaq .detailsContent .link{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	:where( #service01 , #service02 ) .serviceFaq details[open] .detailsContent{
		padding-top : calc( 24 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceLinks{
		display : flex;
		column-gap : calc( 18 * 100% / 1176 );
		justify-content : center;
		margin-top : calc( 48 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceLinks li{
		width : calc( 380 * 100% / 1176 );
		height : calc( 140 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceLinks a{
		border-radius : calc( 16 var( --remBase ) );
	}
	:where( #service01 , #service02 ) .serviceLinks span{
		font-size : 2rem;
	}
	:where( #service01 , #service02 ) .serviceLinks span::before{
		width : calc( 32 * 100% / 190 );
	}
}
#service01{
	--color : var( --primary );
	--filter : var( --filterPrimary );
}
#service02{
	--color : var( --secondary );
	--filter : var( --filterSecondary );
}
@media ( hover : hover ){
	:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 1 ) a:hover{
		background-color : var( --color );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 1 ) a:hover img{
		filter : var( --filterWhite );
	}
	:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 2 ) a:hover{
		background-color : white;
	}
	:where( #service01 , #service02 ) .serviceOverview .contact li:nth-child( 2 ) a:hover img{
		filter : var( --filter );
	}
	:where( #service01 , #service02 ) .serviceLinks a:hover{
		outline-color : var( --color );
		opacity : .9;
	}
	:where( #service01 , #service02 ) .serviceLinks a:hover span{
		color : var( --color );
		background-color : color-mix( in sRGB , white 90% , transparent );
	}
	:where( #service01 , #service02 ) .serviceLinks a:hover span::before{
		background-color : color-mix( in sRGB , white 90% , transparent );
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.serviceOverview .contact a{
		transition : background var( --transitionBase );
	}
	.serviceOverview .contact a img{
		transition : filter var( --transitionBase );
	}
	.serviceFaq summary span::after{
		transition : rotate var( --transitionBase );
	}
	.serviceFaq .detailsContent{
		transition : grid-template-rows var( --transitionBase ) , padding var( --transitionBase );
	}
	.serviceLinks a{
		transition : opacity var( --transitionBase ) , outline-color var( --transitionBase );
	}
	.serviceLinks a span{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
	}
	.serviceLinks a span::before{
		transition : background-color var( --transitionBase );
	}
}