@charset "UTF-8";

/* ==============================
	FV 設計用トークン
============================== */

:root {
	--fv_margin: calc(calc(1.8 / 3 * 3) * 1rem);
	--fv-slide-offset: calc(var(--fv_margin) * 3);
}

/* JS用 px実体化（非表示） */
body::before {
	content: "";
	position: absolute;
	top: -9999px;
	left: 0;
	width: 1px;
	height: var(--fv-slide-offset);
	pointer-events: none;
	visibility: hidden;
}

/* ==============================
	Layout
============================== */

.portfolio_fv {
	padding-left: calc(calc(1.8 / 3 * 3) * 1rem);
	padding-right: calc(calc(1.8 / 3 * 3) * 1rem);
	position: relative;
	display: block;
}

.portfolio_fv-inner {
	max-width: var(--portfolio-width);
	margin-left: auto;
	margin-right: auto;
	box-sizing: initial;
	min-width: 0;
	width: auto;
	position: relative;
	z-index: 1;
}

/* ==============================
	Desktop
============================== */

@media (min-width: 1024px) {

	.portfolio_fv-inner {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
	}

	.portfolio_fv-title {
		max-width: 700px;
		margin-bottom: var(--fv_margin);
	}

	.portfolio_fv-slide {
		width: 65vw;
		aspect-ratio: 3 / 2;
		position: absolute;
		top: 0;
		right: 0;
		will-change: transform;
	}
}

/* ==============================
	Tablet
============================== */

@media (min-width: 640px) and (max-width: 1023px) {

	.portfolio_fv-slide {
		width: 100%;
		aspect-ratio: 15 / 7;
		position: absolute;
		top: 0;
		right: 0;
		will-change: transform;
	}

	.portfolio_fv-title {
		width: 40%;
		max-width: 280px;
		padding-top: calc(var(--fv_margin) * .75);
	}
}

/* ==============================
	Slide offset
============================== */

@media (max-width: 1023px) {
	.portfolio_fv {
		margin-bottom: 0;
	}
	
	.portfolio_fv-slide {
		transform: translateY(var(--fv-slide-offset));
	}
}


/* ==============================
	Mobile
============================== */

@media (max-width: 639px) {

	.portfolio_fv {
		margin-bottom: calc( var(--fv-slide-offset) + 120px );
	}
	.portfolio_fv-slide {
		width: 100%;
		aspect-ratio: 2 / 2.5;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ddd;
	}

	.portfolio_fv-title {
		width: 85%;
		padding-top: calc(var(--fv_margin) * .75);
	}

	.portfolio_fv-description-sp {
		margin-top: 1em;
		font-size: 1.125rem;
		font-weight: bold;
		text-align: justify;
	}


}



/* ==============================
	FV animation base
============================== */

.portfolio_fv-title,
.portfolio_fv-description {
	opacity: 0;
	transform: translateY(28px);
	animation: fvFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	will-change: transform, opacity;
}

/* 時間差 */

.portfolio_fv-title {
	animation-delay: 0.2s;
}

.portfolio_fv-description {
	animation-delay: 0.8s;
}


/* ==============================
	Keyframes
============================== */

@keyframes fvFadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.portfolio_fv-title,
	.portfolio_fv-description {
		animation: none;
		opacity: 1;
		transform: none;
	}

}

@media (max-width: 639px) {

	.portfolio_fv-title,
	.portfolio_fv-description {
		animation-duration: 0.6s;
	}

}


.portfolio_fv-slide .splide__slide img {
	transform: scale(1);
	transition: transform 6s linear;
}

.portfolio_fv-slide .splide__slide.is-active img {
	transform: scale(1.08);
}


/* .js-fv-slider.is-initialized .splide__slide img {
	transform: scale(1);
	transition: transform 6s linear;
}

.js-fv-slider.is-initialized .splide__slide.is-active img {
	transform: scale(1.08);
} */