@charset "UTF-8";

/* --------------------------------------------
DESCRIPTION
--------------------------------------------- */
#description{
	position : relative;
	overflow-x : clip;
	background-repeat : repeat;
	border-block : solid 1px #ccc;
}
#description h2{
	font-weight : 400;
	letter-spacing : .352em;
}
#description h2::after{
	border-image-source : linear-gradient( to bottom , transparent 0 calc( 100% - 1px ) , #ccc calc( 100% - 1px ) 100% );
}
#description p::after{
	border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px 100% );
}
#description .hygienes{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#description{
		margin-top : calc( 88 var( --remBase ) );
	}
	#description h2{
		position : relative;
		top : calc( -10 var( --remBase ) );
		height : calc( 3lh - ( 1lh - 1em ) / 2 );
		padding-left : calc( 53.708 var( --percentBase ) );
		font-size : 9.348rem;
		line-height : calc( 163.59 / 93.48 );
		white-space : nowrap;
	}
	#description p{
		height : calc( 3lh - ( 1lh - 1em ) / 2 );
		margin-top : calc( 140 var( --remBase ) );
		font-size : 3.4rem;
		line-height : calc( 63 / 34 );
	}
	#description p::after{
		top : calc( 14.5 var( --remBase ) );
	}
	#description .hygienes{
		top : calc( -234 var( --remBase ) );
		left : calc( 476 var( --viewportBase ) );
		width : calc( 468 var( --viewportBase ) );
		height : calc( 468 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#description{
		margin-top : calc( 172 var( --remBase ) );
	}
	#description .core{
		position : absolute;
	}
	#description :where( h2 , p ){
		padding-left : calc( 50% + ( 15 var( --percentBase ) ) );
		white-space : nowrap;
	}
	#description h2{
		height : calc( 453 var( --remBase ) );
		padding-top : calc( 14 var( --remBase ) );
		font-size : 9.67rem;
		line-height : calc( 169.23 / 96.7 );
	}
	#description p{
		height : calc( 388 var( --remBase ) );
		margin-top : calc( 65 var( --remBase ) );
		font-size : 2.8rem;
		line-height : calc( 55 / 28 );
	}
	#description p::after{
		top : calc( 13.5 var( --remBase ) );
	}
	#description .core{
		top : calc( -42.5 var( --remBase ) );
		height : calc( 85 var( --remBase ) );
	}
	#description .core circle{
		filter : blur( 5px );
	}
	#description .hygienes{
		top : calc( 239 var( --remBase ) );
		height : calc( 558 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1270px ){
	#description .core{
		left : calc( 1198 var( --viewportBase ) );
		width : calc( 85 var( --viewportBase ) );
	}
	#description .hygienes{
		left : calc( 30 var( --viewportBase ) );
		width : calc( 558 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	#description .core{
		left : calc( 50% + 563px );
		width : 85px;
	}
	#description .hygienes{
		left : calc( 50% - 605px );
		width : 558px;
	}
}

/* --------------------------------------------
MODULES
--------------------------------------------- */
.titles{
	position : relative;
}
.titles h2{
	position : relative;
	font-weight : 700;
}
@media screen and ( width <= 750px ){
	.titles :where( h2 , p ){
		padding-inline : calc( 40 var( --viewportBase ) );
	}
	.titles h2{
		font-size : 4.8rem;
		line-height : 1.75;
	}
	.titles p{
		font-size : 2.4rem;
		line-height : calc( 44 / 24 );
		border-top : solid 1px #ccc;
	}
}
@media print , screen and ( width > 750px ){
	.titles{
		display : grid;
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 30 var( --percentBase ) );
		align-items : start;
	}
	.titles h2{
		font-size : 5.6rem;
		line-height : 1.75;
	}
	.titles p{
		font-size : 1.8rem;
		line-height : calc( 34 / 18 );
	}
}

/* --------------------------------------------
PARTS
--------------------------------------------- */
.hygienes .circle01{
	fill : #000;
	stroke-width : 0;
}
.hygienes .circle02 , .hygienes .path01 , .hygienes .path02{
	fill : none;
	stroke : #000;
	stroke-miterlimit : 10;
}
.hygienes .circle02{
	stroke-width : .5px;
}
.hygienes .path01{
	stroke-width : 1.63px;
}
.hygienes .path02{
	stroke-width : .3661px;
}
.hygienes02 .circle01{
	fill : #000;
	stroke-width : 0;
}
.hygienes02 .circle02 ,
.hygienes02 .path02 ,
.hygienes02 .path01{
	fill : none;
	stroke : #000;
	stroke-miterlimit : 10;
}
.hygienes02 .circle02{
	stroke-width : .45px;
}
.hygienes02 .path01{
	stroke-width : 1.9684px;
}
.hygienes02 .path02{
	stroke-width : .1549px;
}
.core{
	overflow : visible;
}
.core .circle01{
	fill : #000;
	stroke-width : 0;
}
.core .circle02{
	fill : none;
	stroke : #000;
	stroke-miterlimit : 10;
	stroke-width : .3484px;
}
.laps .line01 , .laps .circle02{
	fill : none;
	stroke : #000;
	stroke-miterlimit : 10;
}
.laps .circle01 , .laps .circle03{
	fill : #000;
	stroke-width : 0;
}
.laps01 .circle02{
	stroke-width : 1.3077px;
}
.laps02 .line01{
	stroke-width : .6748px;
}
.laps02 .circle02{
	stroke-width : .4733px;
}
.laps03 .circle02{
	stroke-width : 1.482px;
}
.laps04 .circle02{
	stroke-width : 1.1956px;
}
.laps05 .circle02{
	stroke-width : .7099px;
}
.sign line{
	fill : none;
	stroke : #fff;
	stroke-miterlimit : 10;
	stroke-width : .7677px;
}
.sign circle{
	fill : #fff;
	stroke-width : 0;
}

/* --------------------------------------------
VISION
--------------------------------------------- */
#vision{
	position : relative;
	overflow-x : clip;
	border-top : solid 1px #ccc;
}
#vision h3{
	font-weight : 500;
}
#vision .titles .laps{
	position : absolute;
}
#vision .vision{
	position : relative;
	color : white;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#vision .vision h3{
	font-weight : 500;
	text-align : center;
	text-indent : .2em;
	letter-spacing : .2em;
}
#vision .vision .sign{
	position : absolute;
}
#vision .vision #visions{
	display : block;
	width : fit-content;
	width : auto;
}
#vision .vision ol{
	display : grid;
	justify-content : start;
}
#vision .vision ol > li{
	grid-row : 1;
	border-top : solid 1px white;
}
#vision .vision ol > li:nth-child( 1 ){
	grid-column : 5;
}
#vision .vision ol > li:nth-child( 2 ){
	grid-column : 3;
}
#vision .vision ol > li:nth-child( 3 ){
	grid-column : 1;
}
#vision .vision ol > li + li{
	position : relative;
}
#vision .vision ol > li + li::before{
	position : absolute;
	top : 0;
	clip-path : polygon( 0 50% , 100% 0 , 100% 100% );
	content : "";
	background-color : white;
	translate : 0 -50%;
}
#vision .vision ol time , #vision .vision ol p{
	font-weight : 600;
}
#vision .vision ol time{
	display : block;
	text-align : center;
}
#vision .vision ol p{
	position : relative;
	left : 50%;
	width : fit-content;
	white-space : pre;
	translate : -50% 0;
}
@media screen and ( width <= 750px ){
	#vision{
		margin-top : calc( 144 var( --remBase ) );
	}
	#vision .titles h2{
		height : calc( 89 var( --remBase ) + ( 1lh - 1em ) / 2 );
	}
	#vision .titles p{
		height : calc( 210 var( --remBase ) );
	}
	#vision .titles .laps{
		top : calc( -18 var( --remBase ) );
		left : calc( 644 var( --viewportBase ) );
		width : calc( 103 var( --viewportBase ) );
		height : calc( 103 var( --remBase ) );
		filter : blur( calc( 5.3202 var( --remBase ) ) );
	}
	#vision .vision{
		height : calc( 700 var( --remBase ) );
		padding-top : calc( 44 var( --remBase ) );
		background-image : image-set( url( "../images/home/vision/bg_sp.avif" ) , url( "../images/home/vision/bg_sp.webp" ) );
	}
	#vision .vision h3{
		font-size : 3.827rem;
	}
	#vision .vision .sign{
		top : calc( 49 var( --remBase ) );
		left : calc( 432 var( --viewportBase ) );
		width : calc( 79 var( --viewportBase ) );
		height : calc( 80 var( --remBase ) );
	}
	#vision .vision #visions{
		height : calc( 394 var( --remBase ) );
		margin-left : calc( 45 var( --percentBase ) );
	}
	#vision .vision ol{
		grid-template-columns : calc( 87 * 100% / 640 ) calc( 122 * 100% / 640 ) calc( 87 * 100% / 640 ) calc( 186 * 100% / 640 ) calc( 87 * 100% / 640 );
		padding-top : calc( 70 var( --remBase ) );
		padding-left : calc( 30 var( --percentBase ) );
	}
	#vision .vision li + li::before{
		width : calc( 15 * 100% / 87 );
		height : calc( 17 var( --remBase ) );
	}
	#vision .vision li:nth-child( 2 )::before{
		left : calc( 172 * 100% / 87 );
	}
	#vision .vision li:nth-child( 3 )::before{
		left : calc( 141 * 100% / 87 );
	}
	#vision .vision time{
		margin-top : calc( 12 var( --remBase ) );
		font-size : 1.9rem;
	}
	#vision .vision p{
		margin-top : calc( 53 var( --remBase ) );
		font-size : 2.7rem;
	}
}
@media print , screen and ( width > 750px ){
	#vision{
		margin-top : calc( 108 var( --remBase ) );
	}
	#vision .titles{
		height : calc( 118 var( --remBase ) );
	}
	#vision .titles h2{
		top : calc( -6 var( --remBase ) );
	}
	#vision .titles p{
		letter-spacing : -.02em;
	}
	#vision .titles .laps{
		top : calc( -54 var( --remBase ) );
		height : calc( 148 var( --remBase ) );
		filter : blur( calc( 7.6 var( --remBase ) ) );
	}
	#vision .vision{
		height : calc( 900 var( --remBase ) );
		padding-top : calc( 60 var( --remBase ) );
		background-image : image-set( url( "../images/home/vision/bg_pc.avif" ) type( "image/avif" ) , url( "../images/home/vision/bg_pc.webp" ) type( "image/webp" ) );
	}
	#vision .vision h3{
		font-size : 4.869rem;
	}
	#vision .vision .sign{
		top : calc( 66 var( --remBase ) );
		height : calc( 102 var( --remBase ) );
	}
	#vision .vision #visions{
		height : calc( 502 var( --remBase ) );
		margin-left : calc( 285 var( --percentBase ) );
	}
	#vision .vision ol{
		grid-template-columns : calc( 111 * 100% / 943 ) calc( 156 * 100% / 943 ) calc( 111 * 100% / 943 ) calc( 232 * 100% / 943 ) calc( 111 * 100% / 943 );
		padding-top : calc( 90 var( --remBase ) );
		padding-left : calc( 267 var( --percentBase ) );
	}
	#vision .vision li + li::before{
		width : calc( 19 * 100% / 111 );
		height : calc( 22 var( --remBase ) );
	}
	#vision .vision li:nth-child( 2 )::before{
		left : calc( 218 * 100% / 111 );
	}
	#vision .vision li:nth-child( 3 )::before{
		left : calc( 179 * 100% / 111 );
	}
	#vision .vision time{
		margin-top : calc( 15 var( --remBase ) );
		font-size : 1.649rem;
	}
	#vision .vision p{
		margin-top : calc( 82 var( --remBase ) );
		font-size : 2.474rem;
	}
}
@media screen and ( 750px < width < 1270px ){
	#vision .titles .laps{
		left : calc( 466 var( --viewportBase ) );
		width : calc( 147 var( --viewportBase ) );
	}
	#vision .vision .sign{
		left : calc( 727 var( --viewportBase ) );
		width : calc( 101 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	#vision .titles .laps{
		left : calc( 50% - 169px );
		width : 147px;
	}
	#vision .vision .sign{
		left : calc( 50% + 72px );
		width : 101px;
	}
}
#visions .circle01 , #visions .circle02{
	stroke-width : .6853px;
}
#visions .circle01 , #visions .circle02 , #visions path , #visions line{
	fill : none;
	stroke : #fff;
	stroke-miterlimit : 10;
}
#visions path{
	stroke-width : .9162px;
}
#visions circle{
	fill : #fff;
	stroke-width : 0;
}
#visions line{
	stroke-width : .8676px;
}

/* --------------------------------------------
PROJECT
--------------------------------------------- */
#project{
	position : relative;
	border-top : solid 1px #ccc;
}
#project .titles{
	position : relative;
}
#project .titles h2{
	position : relative;
}
#project .titles .laps{
	position : absolute;
	filter : blur( calc( 3.3739 var( --remBase ) ) );
}
#project .links{
	display : grid;
	justify-content : space-between;
	background-color : rgb( 128 128 128 / .7 );
}
#project .links li{
	position : relative;
}
#project .links > li + li{
	position : relative;
	height : 100%;
}
#project .links > li + li::before{
	position : absolute;
	clip-path : polygon( 0 0 , 100% 50% , 0 100% );
	font-size : 0;
	content : "";
	background-color : white;
}
#project .links a{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	color : white;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#project .links a::after{
	position : absolute;
	left : 0;
	width : 100%;
	font-family : futura-pt , sans-serif;
	font-weight : 500;
	text-align : center;
	pointer-events : none;
	content : "MORE";
}
#project .links span{
	position : relative;
	display : grid;
	place-items : center;
	margin-inline : auto;
	font-family : futura-pt , sans-serif;
	font-weight : 700;
	color : white;
}
#project .links span::after{
	position : absolute;
	top : 50%;
	left : 50%;
	display : block;
	font-size : 0;
	content : "";
	border-radius : 50%;
	translate : -50% -50%;
}
#project .links span::after{
	background : conic-gradient( white 0% , white 35% , transparent 35% , transparent 50% , white 50% , white 85% , transparent 85% , transparent 100% );
	rotate : calc( -45deg - 15deg );
}
@media screen and ( width <= 750px ){
	#project{
		padding-bottom : calc( 50 var( --remBase ) );
		margin-top : calc( 104 var( --remBase ) );
	}
	#project .titles h2{
		top : calc( -2 var( --remBase ) );
		height : calc( 90 var( --remBase ) + ( 1lh - 1em ) / 2 );
	}
	#project .titles p{
		height : calc( 118 var( --remBase ) );
		letter-spacing : -.02em;
	}
	#project .titles .laps{
		top : calc( ( -18 + 16 ) var( --remBase ) );
		left : calc( 311 var( --viewportBase ) );
		width : calc( 83 var( --viewportBase ) );
		height : calc( 83 var( --remBase ) );
	}
	#project .links{
		grid-template-columns : repeat( 4 , calc( 156 var( --percentBase ) ) );
		height : calc( 700 var( --remBase ) );
		background-color : rgb( 128 128 128 / .7 );
	}
	#project .links li + li::before{
		top : calc( 304 var( --remBase ) );
		left : calc( ( ( ( -46 / 3 ) - 12 ) / 2 ) * 100% / 156 );
		width : calc( 12 * 100% / 156 );
		height : calc( 12 var( --remBase ) );
	}
	#project .links a{
		padding-top : calc( 266 var( --remBase ) );
	}
	#project .links a::after{
		top : calc( 386 var( --remBase ) );
		font-size : 2rem;
	}
	#project .links li:nth-child( 1 ) a{
		background-image : image-set( url( "../images/home/project/bg01.avif" ) type( "image/avif" ) , url( "../images/home/project/bg01.webp" ) type( "image/webp" ) );
	}
	#project .links li:nth-child( 2 ) a{
		background-image : image-set( url( "../images/home/project/bg02.avif" ) type( "image/avif" ) , url( "../images/home/project/bg02.webp" ) type( "image/webp" ) );
	}
	#project .links li:nth-child( 3 ) a{
		background-image : image-set( url( "../images/home/project/bg03.avif" ) type( "image/avif" ) , url( "../images/home/project/bg03.webp" ) type( "image/webp" ) );
	}
	#project .links li:nth-child( 4 ) a{
		background-image : image-set( url( "../images/home/project/bg04.avif" ) type( "image/avif" ) , url( "../images/home/project/bg04.webp" ) type( "image/webp" ) );
	}
	#project .links span{
		width : 100%;
		height : calc( 88 var( --remBase ) );
		font-size : 2.4rem;
	}
	#project .links span::after{
		width : calc( 88 * 100% / 156 );
		height : calc( 88 var( --remBase ) );
		mask : radial-gradient( circle at center , transparent calc( 44 var( --remBase ) - 1px ) , white calc( 44 var( --remBase ) - 1px ) , white );
	}
}
@media print , screen and ( width > 750px ){
	#project{
		margin-top : calc( 170 var( --remBase ) );
	}
	#project .titles{
		height : calc( 64 var( --remBase ) );
		border-bottom : solid 1px #ccc;
	}
	#project .titles h2{
		position : relative;
		top : calc( -6 var( --remBase ) );
	}
	#project .titles .laps{
		top : calc( -18.5 var( --remBase ) );
		height : calc( 82 var( --remBase ) );
	}
	#project .links{
		grid-template-columns : repeat( 4 , calc( 280 var( --percentBase ) ) );
		height : calc( 900 var( --remBase ) );
		margin-top : calc( 56 var( --remBase ) );
	}
	#project .links::after{
		border-image-source : linear-gradient( to bottom , transparent 0 calc( 398 var( --remBase ) ) , #ccc calc( 398 var( --remBase ) ) calc( 398 var( --remBase ) + 1px ) , transparent calc( 398 var( --remBase ) + 1px ) calc( 850 var( --remBase ) ) , #ccc calc( 850 var( --remBase ) ) calc( 850 var( --remBase ) + 1px ) , transparent calc( 850 var( --remBase ) + 1px ) 100% );
	}
	#project .links li + li::before{
		top : calc( 420 var( --remBase ) );
		left : calc( -25 * 100% / 280 );
		width : calc( 20 * 100% / 280 );
		height : calc( 20 var( --remBase ) );
	}
	#project .links a{
		padding-top : calc( 312 var( --remBase ) );
	}
	#project .links a::after{
		top : calc( 508 var( --remBase ) );
		font-size : 1.4rem;
	}
	#project .links span{
		width : calc( 236 * 100% / 280 );
		height : calc( 236 var( --remBase ) );
		font-size : 2.4rem;
	}
	#project .links span::before{
		position : absolute;
		top : 50%;
		left : 50%;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
		content : "";
		background : conic-gradient( white 0% , white 25% , transparent 25% , transparent 50% , white 50% , white 75% , transparent 75% , transparent 100% );
		border-radius : 50%;
		mask : radial-gradient( circle at center , transparent calc( 118 var( --remBase ) - 1px ) , white calc( 118 var( --remBase ) - 1px ) , white );
		transform-origin : center;
		translate : -50% -50%;
		scale : 0;
		rotate : -180deg;
	}
	#project .links span::after{
		width : calc( 88 * 100% / 236 );
		height : calc( 88 var( --remBase ) );
		mask : radial-gradient( circle at center , transparent calc( 44 var( --remBase ) - 1px ) , white calc( 44 var( --remBase ) - 1px ) , white );
	}
	#project .links li{
		z-index : 1;
	}
	#project .links a::before{
		position : absolute;
		top : 0;
		left : 0;
		z-index : 0;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
		pointer-events : none;
		content : "";
		background-size: cover;
	}
	#project .links li:nth-child( 1 ) a::before{
		background-image : url( "../images/home/project/bg01.webp" );
	}
	#project .links li:nth-child( 2 ) a::before{
		background-image : url( "../images/home/project/bg02.webp" );
	}
	#project .links li:nth-child( 3 ) a::before{
		background-image : url( "../images/home/project/bg03.webp" );
	}
	#project .links li:nth-child( 4 ) a::before{
		background-image : url( "../images/home/project/bg04.webp" );
	}
	#project .links a:hover span::before{
		scale : 1;
		rotate : 0deg;
	}
}
@media screen and ( 750px < width < 1270px ){
	#project .titles .laps02{
		left : calc( 275 var( --percentBase ) );
		width : calc( 83 var( --percentBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	#project .titles .laps02{
		/* left: calc( 50% - 360px ); */
		left : calc( 50% - 357px );
		width : 83px;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#project .links a:hover span::before{
		transition : scale var( --transitionBase ) , rotate var( --transitionBase );
	}
	#project .links a:hover::before{
		transition : clip-path var( --transitionBase );
	}
}
#requests{
	position : absolute;
	z-index : 5;
	background-color : black;
}
#requests p{
	color : white;
}
@media screen and ( width <= 750px ){
	#requests{
		bottom : 0;
		left : 0;
		width : 100%;
		padding-inline : calc( 40 var( --viewportBase ) );
		padding-top : calc( ( 27 - 6 ) var( --remBase ) );
		padding-bottom : calc( 22 var( --remBase ) );
	}
	#requests p{
		padding-inline : calc( 15 var( --percentBase ) );
		font-size : 2.2rem;
		line-height : calc( 34 / 22 );
		text-align : center;
	}
}
@media print , screen and ( width > 750px ){
	#requests{
		bottom : calc( 58 var( --remBase ) );
		display : grid;
		grid-template-columns : calc( 620 var( --percentBase ) ) calc( 343 var( --percentBase ) );
		column-gap : calc( 86 var( --percentBase ) );
		align-items : center;
		padding-block : calc( 40 var( --remBase ) );
	}
	#requests p{
		grid-row : 1;
		grid-column : 2;
		font-size : 1.8rem;
		line-height : calc( 34 / 18 );
	}
}
@media screen and ( 750px < width < 1270px ){
	#requests{
		left : calc( 30 var( --viewportBase ) );
		width : calc( 1210 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	#requests{
		left : calc( 50% - 605px );
		width : 1210px;
	}
}
#mailformpro dl{
	display : grid;
	align-items : center;
}
#mailformpro dt label{
	display : block;
	font-weight : 500;
	color : white;
	text-align : center;
	text-align : right;
}
#mailformpro :where( input[type="text"] , input[type="email"] ){
	width : 100%;
	padding-inline : .75em;
	background-color : #fff;
	background-color : #b3b3b3;
	border : solid 1px #808080;
}
#mailformpro input[type="submit"]{
	display : grid;
	place-items : center;
	font-weight : 700;
	background-color : #f2f2f2;
}
@media screen and ( width <= 750px ){
	#mailformpro{
		margin-top : calc( ( 25 - 6 ) var( --remBase ) );
	}
	#mailformpro dl{
		grid-template-columns : calc( 190 var( --percentBase ) ) calc( 480 var( --percentBase ) );
		row-gap : calc( 14 var( --remBase ) );
	}
	#mailformpro dt label{
		padding-right : calc( 12 * 100% / 190 );
		font-size : 2.2rem;
	}
	#mailformpro :where( input[type="text"] , input[type="email"] ){
		height : calc( 50 var( --remBase ) );
		font-size : 2.2rem;
	}
	#mailformpro input[type="submit"]{
		width : calc( 342 var( --percentBase ) );
		height : calc( 50 var( --remBase ) );
		margin-top : calc( 14 var( --remBase ) );
		margin-left : calc( 190 var( --percentBase ) );
		font-size : 2.4rem;
	}
}
@media print , screen and ( width > 750px ){
	#mailformpro{
		grid-row : 1;
		grid-column : 1;
	}
	#mailformpro dl{
		grid-template-columns : calc( 280 * 100% / 620 ) calc( 340 * 100% / 620 );
		row-gap : calc( 14 var( --remBase ) );
	}
	#mailformpro dt label{
		padding-right : calc( 18 * 100% / 280 );
		font-size : 1.7rem;
	}
	#mailformpro :where( input[type="text"] , input[type="email"] ){
		height : calc( 50 var( --remBase ) );
		font-size : 1.7rem;
	}
	#mailformpro input[type="submit"]{
		width : calc( 340 * 100% / 620 );
		height : calc( 50 var( --remBase ) );
		margin-top : calc( 14 var( --remBase ) );
		margin-left : auto;
		font-size : 1.7rem;
	}
}

/* --------------------------------------------
PEOPLE
--------------------------------------------- */
#people{
	position : relative;
	overflow-x : clip;
	border-block : solid 1px #ccc;
}
#people .titles h2{
	position : relative;
}
#people .titles .laps{
	position : absolute;
}
#people ul{
	position : relative;
}
#people picture{
	width : 100%;
}
#people dt::before{
	display : block;
	font-family : clarendon-text-pro , serif;
	font-weight : 700;
}
@media screen and ( width <= 750px ){
	#people{
		padding-bottom : calc( ( 64 - 10 ) var( --remBase ) );
		margin-top : calc( 104 var( --remBase ) );
	}
	#people .titles h2{
		top : calc( -2 var( --remBase ) );
		height : calc( 91 var( --remBase ) + ( 1lh - 1em ) / 2 );
	}
	#people .titles p{
		height : calc( 261 var( --remBase ) );
	}
	#people .titles .laps{
		top : calc( ( -42 + 18 ) var( --remBase ) );
		left : calc( 309 var( --viewportBase ) );
		width : calc( 107.5 var( --viewportBase ) );
		height : calc( 107.5 var( --remBase ) );
		filter : blur( calc( 5.0985 var( --remBase ) ) );
	}
	#people li + li{
		margin-top : calc( 64 var( --remBase ) );
	}
	#people picture{
		height : calc( 470 var( --remBase ) );
		text-align : center;
		background-color : rgb( 0 0 0 / .5 );
	}
	#people picture img{
		width : auto;
		height : 100%;
	}
	#people dl{
		margin-top : calc( 60 var( --remBase ) );
		border-top : solid 1px #ccc;
	}
	#people :where( dt, dd ){
		padding-inline : calc( 40 var( --viewportBase ) );
	}
	#people dt{
		font-size : 3.8rem;
	}
	#people dt::before{
		margin-bottom : calc( 44 var( --remBase ) );
		font-size : 4rem;
	}
	#people dd{
		font-size : 2.4rem;
		line-height : calc( 44 / 24 );
	}
	#people dt + dd{
		padding-bottom : calc( ( 64 - 10 ) var( --remBase ) );
		margin-top : calc( ( 46 - 10 ) var( --remBase ) );
	}
	#people dd + dd{
		border-top : solid 1px #ccc;
	}
	#people li:nth-child( 1 ) dd + dd , #people li:nth-child( 4 ) dd + dd{
		position : relative;
	}
	#people li:nth-child( 1 ) dd + dd::before , #people li:nth-child( 4 ) dd + dd::before{
		position : absolute;
		bottom : calc( 10 var( --remBase ) );
		left : 0;
		display : block;
		width : 100%;
		height : 1px;
		content : "";
		background-color : #ccc;
	}
}
@media print , screen and ( width > 750px ){
	#people{
		padding-bottom : calc( ( 80 - 6 ) var( --remBase ) );
		margin-top : calc( 178 var( --remBase ) );
	}
	#people .titles{
		height : calc( 170 var( --remBase ) );
	}
	#people .titles h2{
		top : calc( -2 var( --remBase ) );
	}
	#people .titles .laps{
		top : calc( ( -60 + 2 ) var( --remBase ) );
		left : calc( 214 var( --percentBase ) );
		width : calc( 153.5 var( --percentBase ) );
		height : calc( 154.5 var( --remBase ) );
		filter : blur( calc( 7.2836 var( --remBase ) ) );
	}
	#people ul{
		display : grid;
		grid-template-columns : repeat( 4 , calc( 280 var( --percentBase ) ) );
		justify-content : space-between;
	}
	#people ul > li:first-child :where( picture , dl , dd + dd ){
		position : relative;
	}
	#people ul > li:first-child :where( picture , dl , dd + dd )::after{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 100%;
		height : 100%;
		font-size : 0;
		pointer-events : none;
		content : "";
		border-image-slice : fill 0;
		border-image-outset : 0 100vw 0 100vw;
	}
	#people ul > li:first-child :where( picture , dl )::after{
		border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px calc( 100% + 1px ) );
	}
	#people ul > li:first-child dd + dd::after{
		border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px calc( 314 var( --remBase ) ) , #ccc  calc( 314 var( --remBase ) ) calc( 314 var( --remBase ) + 1px ) , transparent calc( 314 var( --remBase ) + 1px ) 100% );
	}
	#people li{
		display : grid;
		grid-template-rows : subgrid;
		grid-row : span 2;
		row-gap : calc( 32 var( --remBase ) );
	}
	#people picture{
		height : calc( 330 var( --remBase ) );
	}
	#people picture img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	#people dl{
		display : grid;
		grid-template-rows : repeat( 2 , calc( 79 var( --remBase ) ) ) auto;
		grid-template-columns : 1fr;
	}
	#people dt{
		font-size : 1.6rem;
	}
	#people dt::before{
		margin-bottom : calc( 16 var( --remBase ) );
		font-size : 1.8rem;
	}
	#people dd{
		font-size : 1.4rem;
		line-height : calc( 26 / 14 );
		text-align:justify;
	}
	#people .core{
		position : absolute;
		top : calc( 974 var( --remBase ) );
		height : calc( 62 var( --remBase ) );
	}
}
@media screen and ( 750px < width < 1270px ){
	#people .core{
		left : calc( 1209 var( --viewportBase ) );
		width : calc( 62 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	#people .core{
		left : calc( 50% + 574px );
		width : 62px;
	}
}

/* --------------------------------------------
ACCESS
--------------------------------------------- */
#access .titles h2{
	position : relative;
}
#access .titles > dl{
	display : grid;
}
#access .titles > dl > dd:last-of-type , #access .titles > dl dl{
	display : contents;
}
#access .titles .laps{
	position : absolute;
}
#access .map{
	position : relative;
}
#access .map::before{
	position : absolute;
	top : 50%;
	left : 50%;
	z-index : 10;
	display : block;
	font-size : 0;
	content : "";
	background : url( "../images/home/access/mappin.svg" ) center / contain no-repeat;
	translate : -50% -50%;
}
#access .map iframe{
	width : 100%;
	filter : grayscale( 1 ) sepia( .05 );
}
@media screen and ( width <= 750px ){
	#access .titles h2{
		position : relative;
		top : calc( -6 var( --remBase ) );
		height : calc( 85 var( --remBase ) + ( 1lh - 1em ) / 2 );
	}
	#access .titles > dl{
		grid-template-columns : calc( 305 var( --percentBase ) ) calc( 335 var( --percentBase ) );
		align-items : start;
		justify-content : space-between;
		padding-inline : calc( 40 var( --viewportBase ) );
		padding-bottom : calc( ( 44 - 10 ) var( --remBase ) );
		font-size : 2.4rem;
		line-height : calc( 44 / 24 );
		border-top : solid 1px #ccc;
	}
	#access .titles > dl > dt , #access .titles > dl > dd{
		margin-top : calc( ( -1lh + 1em ) / 2 );
	}
	#access .titles > dl > dd{
		letter-spacing : -.02em;
	}
	#access .titles dt{
		text-align : right;
	}
	#access .titles dl > div:not( :first-of-type ){
		display : contents;
	}
	#access .titles dl > div:first-of-type{
		display : grid;
		grid-template-columns : auto 1fr;
		grid-column : 2;
		column-gap : 1em;
		align-items : start;
		justify-content : start;
	}
	#access .titles dl > div:nth-of-type( 2 ) :where( dt,dd ){
		padding-top : calc( ( 42 - 10 - 10 ) var( --remBase ) );
	}
	#access .titles .laps{
		top : calc( ( -33 + 18 ) var( --remBase ) );
		left : calc( 309 var( --viewportBase ) );
		width : calc( 99.5 var( --viewportBase ) );
		height : calc( 100.5 var( --remBase ) );
		filter : blur( calc( 5.6 var( --remBase ) ) );
	}
	#access .map::before{
		width : calc( 164 var( --viewportBase ) );
		height : calc( 164 var( --remBase ) );
	}
	#access .map iframe{
		aspect-ratio : 750 / 470;
	}
}
@media print , screen and ( width > 750px ){
	#access{
		margin-top : calc( 45 var( --remBase ) );
		border-top : solid 1px #ccc;
	}
	#access .titles{
		height : calc( 163 var( --remBase ) );
	}
	#access .titles h2{
		top : calc( -6 var( --remBase ) );
	}
	#access .titles > dl{
		grid-template-columns : repeat( 2 , 1fr );
		column-gap : calc( 30 * 100% / 590 );
		margin-top : calc( ( -1lh + 1em ) / 2 );
		font-size : 1.4rem;
		line-height : calc( 26 / 14 );
	}
	#access .titles > dl > dt:nth-of-type( 1 ){
		grid-row : 1;
		grid-column : 1;
	}
	#access .titles > dl > dd:nth-of-type( 1 ){
		grid-row : 2 / 5;
		grid-column : 1;
	}
	#access .titles dl > div{
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : 1em;
		align-items : start;
		justify-content : start;
	}
	#access .titles dl > div:nth-of-type( 1 ){
		grid-row : 5;
		grid-column : 1;
	}
	#access .titles dl > div:nth-of-type( 2 ){
		grid-row : 1;
		grid-column : 2;
	}
	#access .titles dl > div:nth-of-type( 3 ){
		grid-row : 2;
		grid-column : 2;
	}
	#access .titles dl > div:nth-of-type( 4 ){
		grid-row : 3 / 6;
		grid-column : 2;
	}
	#access .titles .laps{
		top : calc( -49 var( --remBase ) );
		left : calc( 214 var( --percentBase ) );
		width : calc( 143 var( --percentBase ) );
		height : calc( 143 var( --remBase ) );
		filter : blur( calc( 8 var( --remBase ) ) );
	}
	#access .map::before{
		width : calc( 164 var( --percentBase ) );
		height : calc( 164 var( --remBase ) );
	}
	#access .map::after{
		position : absolute;
		top : 0;
		left : 0;
		z-index : -1;
		display : block;
		width : 0;
		height : 100%;
		content : "";
		border-image-source : linear-gradient( to bottom , #ccc 0 1px , transparent 1px calc( 50% - 1.5px ) , #ccc calc( 50% - .5px ) calc( 50% + .5px ) , transparent calc( 50% + .5px ) calc( 100% + 1px ) );
		border-image-slice : 0 fill;
		border-image-outset : 0 100vw 0 100vw;
	}
	#access .map iframe{
		aspect-ratio : 1210 / 450;
	}
}

/* --------------------------------------------
CLIENTT
--------------------------------------------- */
#client{
	border-top : solid 1px #ccc;
}
#client .titles h2{
	position : relative;
}
#client .titles ul{
	display : grid;
	grid-template-columns : repeat( 2 , 1fr );
}
#client .titles .laps{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#client{
		margin-top : calc( 108 var( --remBase ) );
	}
	#client h2{
		top : calc( -2 var( --remBase ) );
		left : calc( -2 var( --viewportBase ) );
		height : calc( 92 var( --remBase ) + ( 1lh - 1em ) / 2 );
	}
	#client ul{
		border-top : solid 1px #ccc;
	}
	#client li:nth-child( odd ){
		display : grid;
		grid-template-columns : calc( 40 * 100% / 375 ) 1fr;
	}
	#client li:nth-child( odd ) a{
		grid-row : 1;
		grid-column : 2;
	}
	#client li:nth-child( -n+2 ){
		height : calc( 79 var( --remBase ) );
	}
	#client li:nth-child( 1 ) img{
		height : calc( 46 var( --remBase ) );
	}
	#client li:nth-child( 2 ) img{
		height : calc( 31 var( --remBase ) );
	}
	#client li:nth-child( n+3 ){
		border-top : solid 1px #ccc;
	}
	#client li:nth-child( 3 ) img{
		height : calc( 54 var( --remBase ) );
	}
	#client li:nth-child( 4 ) img{
		height : calc( 22 var( --remBase ) );
	}
	#client .laps{
		top : calc( ( -19 + 18 ) var( --remBase ) );
		left : calc( 369 var( --viewportBase ) );
		width : calc( 87 var( --viewportBase ) );
		height : calc( 86 var( --remBase ) );
	}
}
@media print , screen and ( width > 750px ){
	#client{
		margin-top : calc( 110 var( --remBase ) );
		border-bottom : solid 1px #ccc;
	}
	#client h2{
		top : calc( -1 var( --remBase ) );
	}
	#client ul{
		row-gap : calc( 37 var( --remBase ) );
		column-gap : calc( 30 * 100% / 590 );
		align-content : space-between;
		align-items : start;
	}
	#client li:nth-child( 1 ) img{
		height : calc( 51 var( --remBase ) );
	}
	#client li:nth-child( 2 ) img{
		height : calc( 35 var( --remBase ) );
	}
	#client li:nth-child( 3 ) img{
		height : calc( 44 var( --remBase ) );
	}
	#client li:nth-child( 4 ){
		align-self : end;
	}
	#client li:nth-child( 4 ) img{
		height : calc( 23 var( --remBase ) );
	}
	#client .laps{
		top : calc( -28 var( --remBase ) );
		left : calc( 323 var( --percentBase ) );
		width : calc( 124 var( --percentBase ) );
		height : calc( 123 var( --remBase ) );
	}
}

/* --------------------------------------------
CONTACT
--------------------------------------------- */
#contact{
	position : relative;
	display : grid;
	border-top : solid 1px #ccc;
}
#contact h3{
	font-weight : 700;
}
#contact h3 a{
	position : relative;
	display : grid;
	grid-template-columns : auto auto;
	align-items : baseline;
	justify-content : start;
	width : fit-content;
	font-size : 2.4rem;
}
#contact h3 a::after{
	font-family : futura-pt , sans-serif;
	font-weight : 500;
}
#contact > a{
	display : block;
	width : fit-content;
}
#contact > a img{
	height : calc( 39 var( --remBase ) );
}
#contact .hygienes02{
	position : absolute;
}
@media screen and ( width <= 750px ){
	#contact{
		grid-template-columns : 50% auto;
		height : calc( 107 var( --remBase ) );
		margin-top : calc( 101 var( --remBase ) );
	}
	#contact h3 a{
		top : calc( -2 var( --remBase ) );
		column-gap : calc( 14 var( --remBase ) );
	}
	#contact .hygienes02{
		top : calc( -104.5 var( --remBase ) );
		left : calc( 501 var( --viewportBase ) );
		width : calc( 209 var( --viewportBase ) );
		height : calc( 209 var( --remBase ) );
		filter : blur( calc( 6.5469 var( --remBase ) ) );
	}
}
@media print , screen and ( width > 750px ){
	#contact{
		grid-template-columns : calc( 310 var( --percentBase ) ) auto;
		height : calc( 233 var( --remBase ) );
		margin-top : calc( 92 var( --remBase ) );
	}
	#contact h3 a{
		top : calc( -2 var( --remBase ) );
		column-gap : calc( 14 var( --remBase ) );
	}
	#contact .hygienes02{
		top : calc( -118 var( --remBase ) );
		height : calc( 236 var( --remBase ) );
		filter : blur( calc( 7.4102 var( --remBase ) ) );
	}
}
@media screen and ( 750px < width < 1270px ){
	#contact .hygienes02{
		left : calc( 1117 var( --viewportBase ) );
		width : calc( 236 var( --viewportBase ) );
	}
}
@media print , screen and ( width >= 1270px ){
	#contact .hygienes02{
		left : calc( 50% + 487px );
		width : 236px;
	}
}