/* 黄色いボールの動き（ホーム・Web制作・事業内容・会社案内 共通）
   「ぽーん」と高く跳んで、「ストン」と着地し、小さくはねて、ぴたっと止まる。止まる位置は従来と同じ。
   ・横の動き（translate）と縦の動き（transform）を別々のアニメーションにして、それぞれに合ったブレーキ（イージング）をかける。
   ・上がるときは減速、落ちるときは加速（ボールが本当に跳ぶときの動き）。
   ・ボールは丸いので回転はさせない（回転しながらつぶすと、向きがぐにゃっとずれて見える）。
   ・以前の動き（nkd-yellow-float / ref-thinking-seed / ref-cta-seed）は、このファイルで置き換えている。 */

/* 横: 跳び出してから着地まで一定の速さで進み、着地したらその場で止まる */
@keyframes nkd-hop-x{
	0%,12%{translate:0 0}
	60%,100%{translate:var(--hop-x,60px) 0}
}
/* 縦: しゃがむ → のびて跳ぶ → 高い所 → ストン(つぶれる) → 小さくはねる → もう一度つぶれる → 止まる */
@keyframes nkd-hop-y{
	0%{transform:translateY(calc(var(--hop-base,0px) + 0px)) scale(1,1);animation-timing-function:cubic-bezier(.3,0,.4,1)}
	9%{transform:translateY(calc(var(--hop-base,0px) + 3px)) scale(1.18,.82);animation-timing-function:cubic-bezier(.2,.8,.4,1)}
	14%{transform:translateY(calc(var(--hop-base,0px) - 6px)) scale(.9,1.16);animation-timing-function:cubic-bezier(.25,.6,.4,1)}
	38%{transform:translateY(calc(var(--hop-base,0px) - var(--hop-h,96px))) scale(1,1);animation-timing-function:cubic-bezier(.55,.05,.85,.4)}
	60%{transform:translateY(calc(var(--hop-base,0px) + 0px)) scale(.94,1.1);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
	64%{transform:translateY(calc(var(--hop-base,0px) + 2.5px)) scale(1.3,.7);animation-timing-function:cubic-bezier(.25,.6,.4,1)}
	71%{transform:translateY(calc(var(--hop-base,0px) - var(--hop-h,96px) * .16)) scale(.96,1.05);animation-timing-function:cubic-bezier(.55,.05,.85,.4)}
	78%{transform:translateY(calc(var(--hop-base,0px) + 0px)) scale(1.08,.92);animation-timing-function:cubic-bezier(.25,.6,.4,1)}
	86%{transform:translateY(calc(var(--hop-base,0px) + 0px)) scale(.99,1.01);animation-timing-function:ease-out}
	100%{transform:translateY(calc(var(--hop-base,0px) + 0px)) scale(1,1)}
}
@keyframes nkd-hop-fade{from{opacity:0}to{opacity:1}}

/* ===== Web制作・事業内容・会社案内（各セクションの角のボール 8個） ===== */
.nkd-ref-page--web-production .web-thinking:before,.nkd-ref-page--web-production .web-basic:after,.nkd-ref-page--web-production .web-line-detail:before,.nkd-ref-page--web-production .web-price:after,.nkd-ref-page--business .business-service:after,.nkd-ref-page--business .business-more:before,.nkd-ref-page--company .company-mission:before,.nkd-ref-page--company .company-profile:after{
	--hop-x:60px;--hop-h:96px;--hop-base:0px;will-change:transform,translate;
	animation:nkd-hop-x 2.4s linear 1 forwards,nkd-hop-y 2.4s linear 1 forwards!important;
}
/* 画面に入るまで動かさない（.is-revealed が付いたら再生）。既存の指定と同じ強さで、あとから読み込んで置き換える */
.nkd-ref-page.is-motion-ready .web-thinking:before,.nkd-ref-page.is-motion-ready .web-basic:after,.nkd-ref-page.is-motion-ready .web-line-detail:before,.nkd-ref-page.is-motion-ready .web-price:after,.nkd-ref-page.is-motion-ready .business-service:after,.nkd-ref-page.is-motion-ready .business-more:before,.nkd-ref-page.is-motion-ready .company-mission:before,.nkd-ref-page.is-motion-ready .company-profile:after{
	animation:nkd-hop-x 2.4s linear 1 forwards paused,nkd-hop-y 2.4s linear 1 forwards paused!important;
}
.nkd-ref-page.is-motion-ready .web-thinking.is-revealed:before,.nkd-ref-page.is-motion-ready .web-basic.is-revealed:after,.nkd-ref-page.is-motion-ready .web-line-detail.is-revealed:before,.nkd-ref-page.is-motion-ready .web-price.is-revealed:after,.nkd-ref-page.is-motion-ready .business-service.is-revealed:after,.nkd-ref-page.is-motion-ready .business-more.is-revealed:before,.nkd-ref-page.is-motion-ready .company-mission.is-revealed:before,.nkd-ref-page.is-motion-ready .company-profile.is-revealed:after{
	animation-play-state:running,running!important;
}

/* ===== ホーム（「私たちの考え」の見出しのそばと、一番下のボタンのそばのボール 2個） ===== */
.ref-home.is-motion-ready .ref-thinking.is-revealed:after{
	--hop-x:58px;--hop-h:92px;--hop-base:0px;will-change:transform,translate;
	animation:nkd-hop-x 2.4s linear 1 forwards,nkd-hop-y 2.4s linear 1 forwards;
}
.ref-home.is-motion-ready .ref-cta .ref-pill.is-revealed:after{
	--hop-x:42px;--hop-h:70px;--hop-base:-50%;will-change:transform,translate;
	animation:nkd-hop-fade .3s linear 1 forwards,nkd-hop-x 2.2s linear 1 forwards,nkd-hop-y 2.2s linear 1 forwards;
}
@media(max-width:760px){
	.ref-home.is-motion-ready .ref-cta .ref-pill.is-revealed:after{animation-duration:.3s,1.9s,1.9s}
}
@media(prefers-reduced-motion:reduce){
	.ref-home .ref-thinking:after,.ref-home .ref-cta .ref-pill:after{animation:none!important}
}

/* ===== ホーム「FLOW」見出しのうしろに、黄色いブロックが左から伸びてくる ===== */
@keyframes nkd-flow-block-reveal{from{width:0}to{width:calc(100% + 130px)}}
.ref-home .ref-flow h2{position:relative;display:block;z-index:1}
.ref-home .ref-flow h2:before{content:"";position:absolute;z-index:-1;left:-120px;top:4%;bottom:4%;width:0;background:var(--yellow);overflow:hidden}
.ref-home.is-motion-ready .ref-flow > div.is-revealed h2:before{animation:nkd-flow-block-reveal .8s cubic-bezier(.2,.7,.3,1) .15s both}
@media(prefers-reduced-motion:reduce){.ref-home .ref-flow h2:before{animation:none!important;width:calc(100% + 130px)}}