@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
:where( .space , .construction , .design ) [data-label]{
	position : relative;
	z-index : 1;
}
:where( .space , .construction , .design ) [data-label]::before{
	position : absolute;
	top : 50%;
	left : 50%;
	z-index : 2;
	width : fit-content;
	padding-block : calc( 8 * var( --remBase ) );
	font-family : Roboto , sans-serif;
	font-weight : 800;
	line-height : 1.2;
	color : white;
	text-align : center;
	text-indent : .05em;
	letter-spacing : .05em;
	white-space : pre;
	content : attr( data-label );
	background-color : black;
	translate : -50% -50%;
}
:where( .space , .construction , .design ) .splide{
	font-size : 0;
}
:where( .space , .construction , .design ) .splide img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
:where( .space , .construction , .design ) .splide__list{
	width : 100%;
}
:where( .space , .construction , .design ) .splide__slide{
	opacity : 0;
	transition : opacity 3.5s cubic-bezier( .37 , 0 , .63 , 1 );
}
:where( .space , .construction , .design ) .splide__slide.is-active{
	opacity : 1;
}
:where( .space , .construction , .design ) .videoWrapper{
	width : 100%;
	height : auto;
	aspect-ratio : 1;
}
:where( .space , .construction , .design ) .videoWrapper .wp-block-video{
	width : 100%;
	height : 100%;
}
:where( .space , .construction , .design ) .videoWrapper .wp-block-video video{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
:where( .space , .construction , .design ) h2{
	margin-top : calc( 72 * var( --remBase ) );
}
:where( .space , .construction , .design ) p{
	line-height : 2;
	text-align : center;
}
:where( .space , .construction , .design ) .gallery{
	display : grid;
	row-gap : calc( 16 * var( --remBase ) );
	justify-content : space-between;
}
:where( .space , .construction , .design ) .gallery img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
@media screen and ( width < 768px ){
	:where( .space , .construction , .design ) [data-label]::before{
		padding-inline : calc( 40 * var( --remBase ) );
		font-size : calc( 24 * var( --remBase ) );
	}
	:where( .space , .construction , .design ) .splide__slide{
		height : calc( 440 * var( --remBase ) );
	}
	:where( .space , .construction , .design ) p{
		margin-top : calc( 32 * var( --remBase ) );
		font-size : calc( 14 * var( --remBase ) );
	}
	:where( .space , .construction , .design ) .gallery{
		grid-template-columns : repeat( 2 , calc( 180 * var( --percentBase ) ) );
		margin-top : calc( 32 * var( --remBase ) );
	}
	:where( .space , .construction , .design ) .gallery li{
		height : calc( 127 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	:where( .space , .construction , .design ) [data-label]::before{
		padding-inline : min( 40px , calc( 40 * var( --viewportBase ) ) );
		font-size : calc( 28 * var( --remBase ) );
	}
	:where( .space , .construction , .design ) :where( .splide , .videoWrapper ){
		max-height : calc( 800 * var( --remBase ) );
	}
	:where( .space , .construction , .design ) p{
		margin-top : calc( 64 * var( --remBase ) );
		font-size : var( --font-honmon );
	}
	:where( .space , .construction , .design ) .gallery{
		grid-template-columns : repeat( 3 , calc( 280 * 100% / 872 ) );
		width : calc( 872 * var( --percentBase ) );
		margin-inline : auto;
		margin-top : calc( 64 * var( --remBase ) );
	}
	:where( .space , .construction , .design ) .gallery li{
		height : calc( 198 * var( --remBase ) );
	}
}

/* --------------------------------------------
SPACE
--------------------------------------------- */
@media screen and ( width < 768px ){
	.space{
		padding-bottom : calc( 144 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.space{
		padding-bottom : calc( 168 * var( --remBase ) );
	}
}

/* --------------------------------------------
CONSTRUCTION
--------------------------------------------- */
@media screen and ( width < 768px ){
	.construction{
		padding-bottom : calc( 120 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.construction{
		padding-bottom : calc( 168 * var( --remBase ) );
	}
}

/* --------------------------------------------
DESIGN
--------------------------------------------- */
@media screen and ( width < 768px ){
	.design{
		padding-bottom : calc( 120 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.design{
		padding-bottom : calc( 168 * var( --remBase ) );
	}
}

/* --------------------------------------------
COMPANY
--------------------------------------------- */
.company .title01{
	height : auto;
}
.company .info{
	display : grid;
	padding-bottom : calc( 64 * var( --remBase ) );
	font-size : var( --font-honmon );
	line-height : 2;
}
.company .tels{
	display : grid;
	align-items : start;
	justify-content : start;
}
.company .ceo{
	display : grid;
	grid-auto-flow : column;
	column-gap : 1em;
	align-items : start;
	justify-content : start;
}
@media screen and ( width < 768px ){
	.company{
		padding-bottom : calc( 40 * var( --remBase ) );
	}
	.company .info{
		grid-template-columns : calc( 115 * var( --percentBase ) ) 1fr;
		row-gap : calc( 8 * var( --remBase ) );
		column-gap : calc( 16 * var( --percentBase ) );
		margin-top : calc( 64 * var( --remBase ) );
	}
	.company .tels{
		grid-template-columns : calc( 52 * 100% / 245 ) 1fr;
	}
}
@media print , screen and ( width > 768px ){
	.company{
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 168 * var( --remBase ) );
	}
	.company :where( .info , .map , .clients ){
		width : calc( 872 * var( --percentBase ) );
		margin-inline : auto;
	}
	.company .info{
		grid-template-columns : calc( 240 * 100% / 872 ) 1fr;
		row-gap : calc( 16 * var( --remBase ) );
		margin-top : calc( 64 * var( --remBase ) );
	}
	.company .info .tels{
		grid-auto-flow : column;
	}
	.company .info .tels dd{
		padding-left : .5em;
	}
	.company .info .tels dd + dt{
		padding-left : 2em;
	}
}
.map{
	padding-bottom : calc( 64 * var( --remBase ) );
}
.map .address{
	display : grid;
	column-gap : 1em;
	margin-top : calc( 32 * var( --remBase ) );
	font-size : var( --font-honmon );
	line-height : 2;
}
.map .access{
	margin-top : calc( 24 * var( --remBase ) );
	font-size : var( --font-honmon );
	line-height : 2;
}
.map .orange{
	color : #f4a109;
}
.map .blue{
	color : #0ff6d7;
}
.map .green{
	color : #1fdf67;
}
@media screen and ( width < 768px ){
	.map{
		grid-column : 1/-1;
	}
	.map .address{
		grid-template-columns : auto 1fr;
	}
	.map .address dt{
		grid-row : 1;
		grid-column : 1/-1;
	}
	.map .address dd:nth-of-type( 1 ){
		grid-row : 2;
		grid-column : 1;
	}
	.map .address dd:nth-of-type( 2 ){
		grid-row : 2;
		grid-column : 2;
	}
	.map .address dd:nth-of-type( 3 ){
		grid-row : 3;
		grid-column : 1/-1;
	}
	.map iframe{
		grid-column : 1/-1;
		height : calc( 440 * var( --remBase ) );
		margin-top : calc( 24 * var( --remBase ) );
	}
	.map .access > div + div{
		margin-top : calc( 8 * var( --remBase ) );
	}
	.map .access dd{
		padding-left : 1em;
	}
}
@media print , screen and ( width > 768px ){
	.map .address{
		grid-template-columns : calc( ( 240 * 100% / 872 ) - 1em ) auto auto auto;
		align-items : start;
		justify-content : start;
	}
	.map iframe{
		width : 100%;
		height : calc( 400 * var( --remBase ) );
		margin-top : calc( 24 * var( --remBase ) );
	}
	.map .access > div{
		display : grid;
		grid-template-columns : auto 1fr;
		column-gap : .5em;
		align-items : start;
		justify-content : start;
	}
}
.clients ul{
	display : grid;
	justify-content : space-between;
	margin-top : calc( 32 * var( --remBase ) );
}
.clients li img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
.clients p{
	margin-top : 1em;
	text-align : center;
}
.clients p img{
	height : calc( 28 * var( --remBase ) );
}
@media screen and ( width < 768px ){
	.clients ul{
		grid-template-columns : repeat( 3 , calc( 125 * var( --percentBase ) ) );
	}
	.clients li{
		height : calc( 83 * var( --remBase ) );
	}
	.clients p{
		margin-top : calc( 26 * var( --remBase ) );
	}
}
@media print , screen and ( width > 768px ){
	.clients ul{
		grid-template-columns : repeat( 5 , calc( 150 * 100% / 872 ) );
		row-gap : calc( 12 * var( --remBase ) );
	}
	.clients li{
		height : calc( 100 * var( --remBase ) );
	}
	.clients p{
		margin-top : calc( 24 * var( --remBase ) );
	}
}

/* --------------------------------------------
SCROLL ANIMATION
--------------------------------------------- */
@media ( prefers-reduced-motion : no-preference ){
	.clients > ul > li{
		opacity : 0;
		transition : transform 1s cubic-bezier( .25 , .8 , .25 , 1 ) , opacity 1s cubic-bezier( .25 , .8 , .25 , 1 );
		transform : translateY( 25% );
	}
	.clients > ul.is-inview > li{
		opacity : 1;
		transform : translateY( 0 );
	}
	@media screen and ( width < 768px ){
		.clients > ul.is-inview > li[data-sp-row="1"]{
			transition-delay : .5s;
		}
		.clients > ul.is-inview > li[data-sp-row="2"]{
			transition-delay : 1s;
		}
		.clients > ul.is-inview > li[data-sp-row="3"]{
			transition-delay : 1.5s;
		}
		.clients > ul.is-inview > li[data-sp-row="4"]{
			transition-delay : 2s;
		}
		.clients > ul.is-inview > li[data-sp-row="5"]{
			transition-delay : 2.5s;
		}
		.clients > ul.is-inview > li[data-sp-row="6"]{
			transition-delay : 3s;
		}
		.clients > ul.is-inview > li[data-sp-row="7"]{
			transition-delay : 3.5s;
		}
	}
	@media print , screen and ( width > 768px ){
		.clients > ul.is-inview > li[data-pc-row="1"]{
			transition-delay : .5s;
		}
		.clients > ul.is-inview > li[data-pc-row="2"]{
			transition-delay : 1s;
		}
		.clients > ul.is-inview > li[data-pc-row="3"]{
			transition-delay : 1.5s;
		}
		.clients > ul.is-inview > li[data-pc-row="4"]{
			transition-delay : 2s;
		}
		.clients > ul.is-inview > li[data-pc-row="5"]{
			transition-delay : 2.5s;
		}
	}
	.clients p{
		opacity : 0;
		transition-timing-function : cubic-bezier( .25 , .8 , .25 , 1 );
		transition-duration : 1s;
		transition-property : translate , opacity;
		translate : 0 25%;
	}
	@media screen and ( width < 768px ){
		.clients p[data-sp-row="1"]{
			transition-delay : .5s;
		}
		.clients p[data-sp-row="2"]{
			transition-delay : 1s;
		}
		.clients p[data-sp-row="3"]{
			transition-delay : 1.5s;
		}
		.clients p[data-sp-row="4"]{
			transition-delay : 2s;
		}
		.clients p[data-sp-row="5"]{
			transition-delay : 2.5s;
		}
		.clients p[data-sp-row="6"]{
			transition-delay : 3s;
		}
		.clients p[data-sp-row="7"]{
			transition-delay : 3.5s;
		}
	}
	@media print , screen and ( width > 768px ){
		.clients p[data-pc-row="1"]{
			transition-delay : .5s;
		}
		.clients p[data-pc-row="2"]{
			transition-delay : 1s;
		}
		.clients p[data-pc-row="3"]{
			transition-delay : 1.5s;
		}
		.clients p[data-pc-row="4"]{
			transition-delay : 2s;
		}
		.clients p[data-pc-row="5"]{
			transition-delay : 2.5s;
		}
	}
	.clients ul.is-inview + p{
		opacity : 1;
		translate : 0 0;
	}
}