@charset "UTF-8";

/* --------------------------------------------
COMMON
--------------------------------------------- */
:where( .space , .construction , .design ){
	[data-label]{
		position : relative;
		z-index : 1;
		&::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%;
		}
	}
	.splide{
		font-size : 0;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	.splide__list{
		width : 100%;
	}
	.splide__slide{
		opacity : 0;
		transition : opacity 3.5s cubic-bezier( .37 , 0 , .63 , 1 );
	}
	.splide__slide.is-active{
		opacity : 1;
	}
	.videoWrapper{
		width : 100%;
		height : auto;
		aspect-ratio : 1;
		.wp-block-video{
			width : 100%;
			height : 100%;
			video{
				width : 100%;
				height : 100%;
				object-fit : cover;
				object-position : center;
			}
		}
	}
	h2{
		margin-top : calc( 72 * var( --remBase ) );
	}
	p{
		line-height : 2;
		text-align : center;
	}
	.gallery{
		display : grid;
		row-gap : calc( 16 * var( --remBase ) );
		justify-content : space-between;
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	@media screen and ( width <= 768px ){
		[data-label]{
			&::before{
				padding-inline : calc( 40 * var( --remBase ) );
				font-size : calc( 24 * var( --remBase ) );
			}
		}
		.splide__slide{
			height : calc( 440 * var( --remBase ) );
		}
		p{
			margin-top : calc( 32 * var( --remBase ) );
			font-size : calc( 14 * var( --remBase ) );
		}
		.gallery{
			grid-template-columns : repeat( 2 , calc( 180 * var( --percentBase ) ) );
			margin-top : calc( 32 * var( --remBase ) );
			li{
				height : calc( 127 * var( --remBase ) );
			}
		}
	}
	@media print , screen and ( width > 768px ){
		[data-label]{
			&::before{
				padding-inline : min( 40px , calc( 40 * var( --viewportBase ) ) );
				font-size : calc( 28 * var( --remBase ) );
			}
		}
		:where( .splide , .videoWrapper ){
			max-height : calc( 800 * var( --remBase ) );
		}
		p{
			margin-top : calc( 64 * var( --remBase ) );
			font-size : var( --font-honmon );
		}
		.gallery{
			grid-template-columns : repeat( 3 , calc( 280 * 100% / 872 ) );
			width : calc( 872 * var( --percentBase ) );
			margin-inline : auto;
			margin-top : calc( 64 * var( --remBase ) );
			li{
				height : calc( 198 * var( --remBase ) );
			}
		}
	}
}

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

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

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

/* --------------------------------------------
COMPANY
--------------------------------------------- */
.company{
	.title01{
		height : auto;
	}
	.info{
		display : grid;
		padding-bottom : calc( 64 * var( --remBase ) );
		font-size : var( --font-honmon );
		line-height : 2;
	}
	.tels{
		display : grid;
		align-items : start;
		justify-content : start;
	}
	.ceo{
		display : grid;
		grid-auto-flow : column;
		column-gap : 1em;
		align-items : start;
		justify-content : start;
	}
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 40 * var( --remBase ) );
		.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 ) );
		}
		.tels{
			grid-template-columns : calc( 52 * 100% / 245 ) 1fr;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 80 * var( --remBase ) );
		padding-bottom : calc( 168 * var( --remBase ) );
		:where( .info , .map , .clients ){
			width : calc( 872 * var( --percentBase ) );
			margin-inline : auto;
		}
		.info{
			grid-template-columns : calc( 240 * 100% / 872 ) 1fr;
			row-gap : calc( 16 * var( --remBase ) );
			margin-top : calc( 64 * var( --remBase ) );
			.tels{
				grid-auto-flow : column;
				dd{
					padding-left : .5em;
				}
				dd + dt{
					padding-left : 2em;
				}
			}
		}
	}
}
.map{
	padding-bottom : calc( 64 * var( --remBase ) );
	.address{
		display : grid;
		column-gap : 1em;
		margin-top : calc( 32 * var( --remBase ) );
		font-size : var( --font-honmon );
		line-height : 2;
	}
	.access{
		margin-top : calc( 24 * var( --remBase ) );
		font-size : var( --font-honmon );
		line-height : 2;
	}
	.orange{
		color : #f4a109;
	}
	.blue{
		color : #0ff6d7;
	}
	.green{
		color : #1fdf67;
	}
	@media screen and ( width <= 768px ){
		grid-column : 1/-1;
		.address{
			grid-template-columns : auto 1fr;
			dt{
				grid-row : 1;
				grid-column : 1/-1;
			}
			dd:nth-of-type( 1 ){
				grid-row : 2;
				grid-column : 1;
			}
			dd:nth-of-type( 2 ){
				grid-row : 2;
				grid-column : 2;
			}
			dd:nth-of-type( 3 ){
				grid-row : 3;
				grid-column : 1/-1;
			}
		}
		iframe{
			grid-column : 1/-1;
			height : calc( 440 * var( --remBase ) );
			margin-top : calc( 24 * var( --remBase ) );
		}
		.access{
			> div + div{
				margin-top : calc( 8 * var( --remBase ) );
			}
			dd{
				padding-left : 1em;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		.address{
			grid-template-columns : calc( ( 240 * 100% / 872 ) - 1em ) auto auto auto;
			align-items : start;
			justify-content : start;
		}
		iframe{
			width : 100%;
			height : calc( 400 * var( --remBase ) );
			margin-top : calc( 24 * var( --remBase ) );
		}
		.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 ) );
	}
	li img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}
	p{
		margin-top : 1em;
		text-align : center;
		img{
			height : calc( 28 * var( --remBase ) );
		}
	}
	@media screen and ( width <= 768px ){
		ul{
			grid-template-columns : repeat( 3 , calc( 125 * var( --percentBase ) ) );
		}
		li{
			height : calc( 83 * var( --remBase ) );
		}
		p{
			margin-top : calc( 26 * var( --remBase ) );
		}
	}
	@media print , screen and ( width > 768px ){
		ul{
			grid-template-columns : repeat( 5 , calc( 150 * 100% / 872 ) );
			row-gap : calc( 12 * var( --remBase ) );
		}
		li{
			height : calc( 100 * var( --remBase ) );
		}
		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% );
		}
		&.is-inview{
			> li{
				opacity : 1;
				transform : translateY( 0 );
			}
			@media screen and ( width <= 768px ){
				> li[data-sp-row="1"]{
					transition-delay : .5s;
				}
				> li[data-sp-row="2"]{
					transition-delay : 1s;
				}
				> li[data-sp-row="3"]{
					transition-delay : 1.5s;
				}
				> li[data-sp-row="4"]{
					transition-delay : 2s;
				}
				> li[data-sp-row="5"]{
					transition-delay : 2.5s;
				}
				> li[data-sp-row="6"]{
					transition-delay : 3s;
				}
				> li[data-sp-row="7"]{
					transition-delay : 3.5s;
				}
			}
			@media print , screen and ( width > 768px ){
				> li[data-pc-row="1"]{
					transition-delay : .5s;
				}
				> li[data-pc-row="2"]{
					transition-delay : 1s;
				}
				> li[data-pc-row="3"]{
					transition-delay : 1.5s;
				}
				> li[data-pc-row="4"]{
					transition-delay : 2s;
				}
				> 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 ){
				&[data-sp-row="1"]{
					transition-delay : .5s;
				}
				&[data-sp-row="2"]{
					transition-delay : 1s;
				}
				&[data-sp-row="3"]{
					transition-delay : 1.5s;
				}
				&[data-sp-row="4"]{
					transition-delay : 2s;
				}
				&[data-sp-row="5"]{
					transition-delay : 2.5s;
				}
				&[data-sp-row="6"]{
					transition-delay : 3s;
				}
				&[data-sp-row="7"]{
					transition-delay : 3.5s;
				}
			}
			@media print , screen and ( width > 768px ){
				&[data-pc-row="1"]{
					transition-delay : .5s;
				}
				&[data-pc-row="2"]{
					transition-delay : 1s;
				}
				&[data-pc-row="3"]{
					transition-delay : 1.5s;
				}
				&[data-pc-row="4"]{
					transition-delay : 2s;
				}
				&[data-pc-row="5"]{
					transition-delay : 2.5s;
				}
			}
		}
		ul.is-inview + p{
			opacity : 1;
			translate : 0 0;
		}
	}
}