@charset "UTF-8";

/* =========================================================
o-animation - 再利用可能なアニメーション
========================================================= */

/* =========================================================
テキストアニメーション
========================================================= */
.o-aniText {
	overflow: hidden;
}

.o-aniText__target {
	display: inline-block;
	opacity: 0;
	transform: translateX(100px);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform, opacity;
	position: relative;
}

.o-aniText__target.active {
	opacity: 1;
	transform: translateX(0);
}

/* グラデーション効果 */
.o-aniText__target::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--accent-color01), var(--accent-color02), var(--accent-color07), var(--accent-color10), var(--accent-color04), var(--accent-color08));
	background-size: 300% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: 0;
	transform: translateX(5px);
	transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.o-aniText__target.animate::before {
	opacity: 1;
	transform: translateX(0);
	animation: gradientShift 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
	animation-delay: .1s;
}

.p-topHero__titleWrap.o-aniText__target.animate::before {
	@media (max-width: 1024px) {
        padding: 2px var(--gap02) 5px;
        margin-bottom: 1px;
	}
}

@keyframes gradientShift {
	0% {
		background-position: 100% 0;
		opacity: 1;
	}
	50% {
		background-position: 0% 0;
		opacity: 1;
	}
	100% {
		background-position: 0% 0;
		opacity: 0;
	}
}

/* =========================================================
画像アニメーション
========================================================= */
.o-aniImg__mask01 {
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* p-topStrength__picBg__img用の特別な調整 */
.p-topStrength__picBg .o-aniImg__mask01 {
	position: sticky;
	top: 3rem;
	height: 80vh;
}
@media (max-width: 768px) {
	.p-topStrength__picBg .o-aniImg__mask01 {
		aspect-ratio: 1/1;
		height: fit-content;
	}
}

/* p-topFlow__boxImg__wrap用の調整 */
.p-topFlow__boxImg__wrap {
	width: 100%;
	height: 100%;
}

.o-aniImg__mask01__target {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}


.o-aniImg__mask01__mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--base-color01);
	transform: translateX(0);
	transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	will-change: transform;
	z-index: 1;
}

.o-aniImg__mask01__mask.active {
	transform: translateX(100%);
}

/* パララックス効果 */
.o-aniImg__mask01__target.parallax {
	transform: translate3d(0, 0, 0);
	transition: transform 0.1s ease-out;
	will-change: transform;
}

/* =========================================================
遅延アニメーション用のユーティリティ
========================================================= */
.o-ani-delay-1 { transition-delay: 0.1s; }
.o-ani-delay-2 { transition-delay: 0.2s; }
.o-ani-delay-3 { transition-delay: 0.3s; }
.o-ani-delay-4 { transition-delay: 0.4s; }
.o-ani-delay-5 { transition-delay: 0.5s; }
.o-ani-delay-6 { transition-delay: 0.6s; }
.o-ani-delay-7 { transition-delay: 0.7s; }
.o-ani-delay-8 { transition-delay: 0.8s; }
.o-ani-delay-9 { transition-delay: 0.9s; }
.o-ani-delay-10 { transition-delay: 1.0s; }