@charset "utf-8";

/* ****************************************************************************

　モーション
　※ html.gsMotion は js/index_motion.js で付与（JS無効・視差効果を減らす設定時は付与されない）

-------------------------------------------------------------------------------

　01. 共通
　02. MV
　03. ライン・帯
　04. パララックス
　05. ホバー

******************************************************************************* */
.gsMotion #container {
	--mEase: cubic-bezier(0.22, 1, 0.36, 1);
	--mEaseInOut: cubic-bezier(0.65, 0, 0.35, 1);
}


/* 01. 共通
------------------------------------------------------------------------------- */
/* フェードアップ */
.gsMotion .mFade {
	opacity: 0;
	transform: translate3d(0, 40px, 0);
	transition: opacity 1.2s var(--mEaseInOut), transform 1.4s var(--mEase);
	transition-delay: var(--mDelay, 0s);
}
/* 左右からのスライド */
.gsMotion .mSlideL,
.gsMotion .mSlideR {
	opacity: 0;
	transition: opacity 1.2s var(--mEaseInOut), transform 1.6s var(--mEase);
	transition-delay: var(--mDelay, 0s);
}
.gsMotion .mSlideL {
	transform: translate3d(-60px, 0, 0);
}
.gsMotion .mSlideR {
	transform: translate3d(60px, 0, 0);
}
/* 画像：ぼかし＋スケール */
.gsMotion .mImg {
	opacity: 0;
	transform: scale(0.96);
	filter: blur(12px);
	transition: opacity 1.2s var(--mEaseInOut), transform 1.6s var(--mEase), filter 1.6s var(--mEaseInOut);
	transition-delay: var(--mDelay, 0s);
}

/* 1文字ずつランダムにフェードイン（transitionはJSで文字ごとに設定） */
.gsMotion .mChars .mChars_char {
	opacity: 0;
}
.gsMotion .mChars.is-inview .mChars_char {
	opacity: 1;
}

.gsMotion .mFade.is-inview,
.gsMotion .mSlideL.is-inview,
.gsMotion .mSlideR.is-inview,
.gsMotion .mImg.is-inview {
	opacity: 1;
	transform: none;
	filter: none;
}

/* 横方向のはみ出し防止 */
.gsMotion .gsLifescene {
	overflow-x: clip;
}


/* 02. MV
------------------------------------------------------------------------------- */
.gsMotion .gsMV {
	overflow: hidden;
}
.gsMotion .gsMV figure img {
	opacity: 0;
	transform: scale(1.1);
	filter: blur(10px);
	transition: opacity 1.6s var(--mEaseInOut), transform 4s var(--mEase), filter 2s var(--mEaseInOut);
}
.gsMotion .gsMV h1 {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity 1.4s var(--mEaseInOut) 1s, transform 1.6s var(--mEase) 1s;
}
.gsMotion .gsMV.is-loaded figure img {
	opacity: 1;
	transform: scale(1);
	filter: none;
}
.gsMotion .gsMV.is-loaded h1 {
	opacity: 1;
	transform: none;
}


/* 03. ライン・帯
------------------------------------------------------------------------------- */
/* Philosophy 見出し下線 */
.gsMotion .gsPhilosophy .gsPhilosophy_details h3::after {
	transform: translateX(-50%) scaleX(0);
	transition: transform 1.2s var(--mEaseInOut) 0.4s;
}
.gsMotion .gsPhilosophy .gsPhilosophy_details h3.is-inview::after {
	transform: translateX(-50%) scaleX(1);
}

/* Stories 帯 */
.gsMotion .gsStories_block::before,
.gsMotion .gsStories_block::after {
	transform: scaleX(0);
	transition: transform 1s var(--mEaseInOut);
}
.gsMotion .gsStories_block::before {
	transform-origin: left center;
}
.gsMotion .gsStories_block::after {
	transform-origin: right center;
	transition-delay: 0.2s;
}
.gsMotion .gsStories_block.is-inview::before,
.gsMotion .gsStories_block.is-inview::after {
	transform: scaleX(1);
}

/* Stories「SESSION」の背景色：帯が伸び終わってから付与（帯のtransitionと同じタイミング） */
.gsMotion .gsStories_head_hdTxt01.mFade {
	background-color: transparent;
	transition: opacity 1.2s var(--mEaseInOut) var(--mDelay, 0s), transform 1.4s var(--mEase) var(--mDelay, 0s), background-color 0s linear 1.2s;
}
.gsMotion .gsStories_block.is-inview .gsStories_head_hdTxt01.mFade {
	background-color: var(--base-color);
}

/* Stories 番号横のライン：帯が伸び終わり「SESSION」の背景色が付いてから開始 */
.gsMotion .gsStories_head_hdTxt::before {
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	transition: transform 1.2s var(--mEaseInOut) 1.2s;
}
.gsMotion .gsStories_block.is-inview .gsStories_head_hdTxt::before {
	transform: translateY(-50%) scaleX(1);
}

/* Life scene 見出しライン */
.gsMotion .gsLifescene_block .gsLifescene_focus h5::before {
	transform: translateY(-50%) scaleX(0);
	transform-origin: left center;
	transition: transform 1.4s var(--mEaseInOut) 0.6s;
}
.gsMotion .gsLifescene_block .gsLifescene_focus h5.is-inview::before {
	transform: translateY(-50%) scaleX(1);
}

/* Life scene 背景 */
.gsMotion .gsLifescene_in::before {
	transform: translateX(-50%) scaleY(0);
	transform-origin: center top;
	transition: transform 2s var(--mEaseInOut);
}
.gsMotion .gsLifescene_in.is-inview::before {
	transform: translateX(-50%) scaleY(1);
}


/* 04. パララックス
------------------------------------------------------------------------------- */
.gsMotion .gsStories_img_main,
.gsMotion .gsLifescene_img_main {
	overflow: hidden;
}
.gsMotion .mParallax {
	display: block;
	transform: translate3d(0, var(--mParallaxY, 0), 0) scale(1.12);
	will-change: transform;
}


/* 05. ホバー
------------------------------------------------------------------------------- */
@media (hover: hover) {
	/* 背景色を左から右へ切り替え */
	.gsMotion .gsAnchor li a {
		background-image: linear-gradient(rgba(219, 216, 202, 0.7), rgba(219, 216, 202, 0.7));
		background-repeat: no-repeat;
		background-position: left top;
		background-size: 0% 100%;
		transition: background-size 0.8s var(--mEase);
	}
	.gsMotion .gsAnchor li a:hover {
		background-size: 100% 100%;
	}

	.gsMotion .gsTechnology_btn a {
		transition: background-color 0.3s var(--mEase), color 0.3s var(--mEase);
	}
	.gsMotion .gsTechnology_btn a::before {
		transition: right 0.3s var(--mEase);
	}
	.gsMotion .gsTechnology_btn a:hover {
		background-color: var(--base-color);
		color: #FFF;
	}
	.gsMotion .gsTechnology_btn a:hover::before {
		right: 8px;
	}

	.gsMotion .gsFaq li h3.gsFaq_Q > span:not(.gsTxt_Q) {
		transition: color 0.3s var(--mEase);
	}
	.gsMotion .gsFaq li h3.gsFaq_Q:hover > span:not(.gsTxt_Q) {
		color: var(--base-color);
	}
}