/*---------------------------
シミズ働き方 モーション管理
 update 2025.12.18
 by pp

 ---------------------------*/

@charset "UTF-8";


body.loading {
	height: 100%;
	height: 100dvh;
	overflow: hidden;
}


:root {
	--mvsec: 0.75s;
	--vpos: 75px;
}


/* for Sp -------------------- */
@media screen and (max-width: 768px) {

	/*:root {
		--mvsec: 1.0s;
		--vpos:0px;
	}*/

}



/*--------------------------

 固定背景（雲）
 
 --------------------------*/
#contentBg {
	opacity: 0.0;
	transition: all 0.5s ease-out;
	/*transition-delay: 0.75s;*/
}

.contentBg_img {
	/**/
}


.on #contentBg {
	opacity: 1.0;
}



/*--------------------------

 オープニング
 
 --------------------------*/
#opening {
	/**/
}

#opening_title {
	/**/
}


#opening_cloud {
	opacity: 0.0;
	transition: all 0.5s ease-out;
	transition-delay: 0.75s;
}


#opening_title img {
	position: relative;
	opacity: 0.0;
}

.on #opening_cloud {
	opacity: 1.0;
}


.on #opening_title img {
	animation: bounce_pop forwards 1.6s ease 1 normal 1.6s;
}



/*--------------------------

 カバー
 
 --------------------------*/

/* 12.17修正：#cover_copy 非表示 */


#cover[class^='mv_'] #cover_bg {
	top: 75px;
	opacity: 0.0;
	transition: all 0.75s ease-out;
	transition-delay: 0.25s;
}

#cover[class^='mv_'] #cover_copy {
	top: 50px;
	opacity: 0.0;
	transition: all 0.75s ease-out;
	transition-delay: 0.75s;
}

#cover[class^='mv_'].scon #cover_bg,
#cover[class^='mv_'].scon #cover_copy {
	opacity: 1.0;
	top: 0;
}



#cover_txt[class^='mv_'] {
	opacity: 0.0;
	transition: all 0.75s ease-out;
}

#cover_txt[class^='mv_'].scon {
	opacity: 1.0;
}


/* 極端な横長画面でモーションを外す
 -------------------- */
@media screen and (min-aspect-ratio: 1.8) {

	#cover[class^='mv_'] #cover_bg,
	#cover[class^='mv_'] #cover_copy {
		opacity: 1.0;
		top: 0;
	}
}



/*--------------------------

 「働きがいと魅力あふれる職場」とは・・・
 
 --------------------------*/
#grand_design {}

#grand_design *[class^='mv_'] {
	position: relative;
	opacity: 0.0;
	transition: all var(--mvsec) ease-out;
	top: var(--vpos);
}

#grand_design *[class^='mv_'].scon {
	opacity: 1.0;
	top: 0px;
}



/*--------------------------

 これまでの取り組み
 
 --------------------------*/
#history {}

#history_bg[class^='mv_'] > .history_img img {
	position: relative;
	opacity: 0.0;
}


#history_cloud img {
	transition: all 0.5s ease;
	/*transition-delay:0.5s;*/
}

#history_title img {
	transition: all 0.5s ease;
	transition-delay: 0.75s;
}

#history_ground,
#history_ground img {
	transition: all 0.5s ease;
	transition-delay: 1.0s;
	opacity: 0.0;
}

.scon > .history_img > #history_cloud img,
.scon > .history_img > #history_title img,
.scon > .history_img > #history_ground,
.scon > .history_img > #history_ground img {
	opacity: 1.0;
}


.scon >.history_img > #history_buil_1 img {
	animation: bounce_up forwards 1.75s ease 1 normal 1.5s;
}

.scon > .history_img > #history_buil_2 img {
	animation: bounce_up forwards 1.75s ease 1 normal 2.0s;
}

.scon >.history_img > #history_buil_3 img {
	animation: bounce_up forwards 1.75s ease 1 normal 3.0s;
}


/*短冊ブロック*/
.history_card.mv_25{
	position: relative;
	opacity: 0.0;
	transition: all var(--mvsec) ease-out;
	top: var(--vpos);
}

.history_card.mv_25.scon {
	opacity: 1.0;
	top: 0px;
}



/*--------------------------

 働きがい指標
 
 --------------------------*/
#job_satisfaction {}

#job_satisfaction *[class^='mv_'] {
	opacity: 0.0;
	position: relative;
	transition: all var(--mvsec) ease-out;
	top: var(--vpos);
}

#job_satisfaction *[class^='mv_'].scon {
	opacity: 1.0;
	top: 0px;
}



/*--------------------------

 キャラクター
 
 --------------------------*/
#character {}

#character *[class^='mv_'] {
	position: relative;
	opacity: 0.0;
	transition: all var(--mvsec) ease-out;
	top: var(--vpos);
}

#character *[class^='mv_'].scon {
	opacity: 1.0;
	top: 0px;
}



/*--------------------------

 アニメーション キーフレーム
 
 --------------------------*/
@keyframes bounce_up {

	0,
	60%,
	75%,
	90%,
	100% {
		animation-timing-function: cubic-bezier(0.215, .61, 0.355, 1)
	}

	0% {
		opacity: 0;
		transform: translate3d(0, 600px, 0) scaleY(1.0)
	}

	30% {
		opacity: 1.0;
		transform: translate3d(0, -20px, 0) scaleY(1.0)
	}

	/*45% {
		transform: translate3d(0, 0px, 0) scaleY(0.95)
	}*/

	45% {
		transform: translate3d(0, 0px, 0) scaleY(1.0)
	}

	100% {
		opacity: 1.0;
		transform: translateZ(0)
	}
}


@keyframes bounce_pop {

	0,
	60%,
	75%,
	90%,
	100% {
		animation-timing-function: cubic-bezier(0.215, .61, 0.355, 1)
	}

	0% {
		opacity: 0;
		transform: translate3d(0, 3000px, 0) scaleY(5)
	}

	60% {
		opacity: 1.0;
		transform: translate3d(0, -60px, 0) scaleY(0.9)
	}

	75% {
		transform: translate3d(0, 20px, 0) scaleY(0.95)
	}

	90% {
		transform: translate3d(0, -10px, 0) scaleY(0.985)
	}

	100% {
		opacity: 1.0;
		transform: translateZ(0)
	}
}