/* トップページ
=========================================================================
=========================================================================*/
/* loarding
-----------------------------------------------------------*/
#progress {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #FFF;
	z-index: 99999;
	transition: all 1.25s ease-in-out;
}

#progress.end {
	opacity: 0;
	z-index: -10;
}

#progress.none {
	display: none;
	z-index: -10;
}

#progress lottie-player {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	max-width: 467px;
}

/* First View
-----------------------------------------------------------*/
.fv {
	position: relative;
	padding: 0 20px;
	width: 100vw;
	height: 100vh;
}

.fv .inner {
	position: relative;
	margin: 0 auto;
	padding: 0;
	max-width: 1194px;
	height: 100%;
}

.fv .inner h1 {
	position: absolute;
	top: 70px;
	font-weight: 600;
	font-size: 19px;
	color: #AFAFAF;
	z-index: 2;
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 2s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 2s;
}

.fv h1.active {
	clip-path: inset(0 0 -20% 0);
}

.fv .inner h1 span {
	font-weight: 200;
}

.fv .inner .logo_container {
	position: absolute;
	top: calc(433 / 767 * 100%);
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.fv .inner .logo_container figure {
	margin-bottom: 60px;
	max-width: 386px;
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 2s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 1s;
}

.fv .inner .logo_container figure.active {
	clip-path: inset(0 0 -20% 0);
}

.fv .inner h2 {
	margin: 0 auto;
	width: fit-content;
	font-weight: 600;
	font-size: 27px;
	color: #151414;
	line-height: 1em;
	text-transform: uppercase;
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 2s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 2.25s;
}

.fv .inner h2.active {
	clip-path: inset(0 0 -20% 0);
}

.fv .inner h2 span {
	display: block;
	font-weight: 500;
	font-size: 13px;
}

/* Works
-----------------------------------------------------------*/
.works {
	padding: 140px 20px 160px;
}

.works h2 {
	margin-bottom: 75px;
	font-weight: 600;
	font-style: italic;
	font-size: 27px;
	text-align: center;
	color: ##101010;
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 5s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 0s;
}

.works h2.active {
	clip-path: inset(0 0 -20% 0);
}

.works ul {
	display: flex;
	flex-wrap: wrap;
	gap: 60px calc(30 / 1050 *100%);
	margin: 0 auto;
	max-width: 1050px;
}

.works ul li {
	width: calc(510 / 1050 * 100%);

}

.works ul li.active {
	clip-path: inset(0 0 -20% 0);
}

.works ul li figure {
	overflow: hidden;
	margin-bottom: 10px;
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 2s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 0s;
}

.works ul li figure.active {
	clip-path: inset(0 0 -20% 0);
}

.works ul li img {
	width: 100%;
	height: 436px;
	object-fit: cover;
	transition: 0.3s;
}

.works ul li:nth-child(3),
.works ul li:nth-child(4),
.works ul li:nth-child(5) {
	width: calc(330 / 1050 * 100%);
}

.works ul li:nth-child(3) img,
.works ul li:nth-child(4) img,
.works ul li:nth-child(5) img {
	width: 100%;
	height: 436px;
	object-fit: cover;
}

@media(hover: hover) {
	.works ul li a:hover img {
		transform: scale(1.1) !important;
		filter: grayscale(80%);
	}
}

.works ul li h3 {
	position: relative;
	color: #DDDDDD;
	clip-path: inset(0 100% -20% 0);
	transition: clip-path 10s cubic-bezier(0.19, 1, 0.22, 1);
	transition-delay: 1s;
	mix-blend-mode: difference;
}

.works ul li h3.active {
	clip-path: inset(0 0 -20% 0);
}

.works ul li h3 span:nth-child(1) {
	display: block;
}

.works ul li h3 span:nth-child(2) {
	font-weight: 300;
	font-style: italic;
	color: #757576;
}

/*  767px以下
=========================================================================
=========================================================================*/
@media screen and (max-width:767px) {

	/* loarding
	-----------------------------------------------------------*/
	#progress lottie-player {
		max-width: 300px;
	}

	/* First View
	-----------------------------------------------------------*/
	.fv {
		padding: 0 40px;
	}

	.fv .inner .logo_container figure {
		margin-bottom: 70px;
		max-width: 238px;
	}

	.fv .inner h2 {
		font-size: 20px;
	}

	.fv .inner h2 span {
		font-size: 10px;
	}

	/* Works
	-----------------------------------------------------------*/
	.works {
		padding: 40px 20px 140px;
	}

	.works h2 {
		margin-bottom: 40px;
		font-size: 27px;
	}

	.works ul {
		gap: 60px 0;
	}

	.works ul li {
		width: 100%;
	}

	.works ul li img {
		height: auto;
		object-fit: contain;
	}

	.works ul li:nth-child(3),
	.works ul li:nth-child(4),
	.works ul li:nth-child(5) {
		width: 100%;
	}

	.works ul li:nth-child(3) img,
	.works ul li:nth-child(4) img,
	.works ul li:nth-child(5) img {
		height: auto;
		object-fit: contain;
	}

	.works ul li h3 {
		color: #DDDDDD;
	}

	.works ul li h3 span:nth-child(2) {
		font-weight: 300;
		font-style: italic;
		color: #757576;
	}
}

/*  420px以下
=========================================================================
=========================================================================*/
@media screen and (max-width:420px) {

	/* First View
	-----------------------------------------------------------*/
	.fv .inner .logo_container {
		width: calc(238 / 310 * 100%);
	}

	.fv .inner .logo_container figure {
		max-width: 100%;
	}

	.fv .inner h2 {
		font-size: 20px;
		font-size: calc(20 / 390 * 100vw);
	}

	.fv .inner h2 span {
		font-size: 10px;
		font-size: calc(10 / 390 * 100vw);
	}
}