/* ========================================================= KANAMOTO HOLDINGS 採用サイト — ig.css（動くインフォグラフィック・2026-10-29） build.py が _src/ig/_base.css ＋ _src/ig/*.css をつないで書き出す（このファイルは直接編集しない） 置き場：下層の要約の左（SP は上）・会社を知るの「選ばれる理由」「ミッション」 動き：.reveal に .is-act が付いたら、図が組み上がり（約2.5秒）、そのあと小さく動き続ける。 動きを減らす設定と ?static=1 では、最初から完成した図を見せる（CSS の既定の状態＝完成形） 色：tokens のオレンジだけ（.f-* ／ .s-* は motion.css と同じ）。図は飾りなので aria-hidden（情報は本文にある） ========================================================= */ .lig { --D: calc(.3s + var(--i, 0) * .22s); position: relative; } .lig svg { display: block; width: 100%; height: auto; overflow: visible; } .s-line { stroke: var(--color-line); } .s-soft { stroke: var(--color-brand-soft); } .s-layer { stroke: var(--color-layer); } .s-white { stroke: var(--color-bg); } /* ---------- 置き場：要約 ---------- */ .lsum__ig { width: min(232px, 70%); margin: -18px auto 10px; } .lsum__text { word-break: auto-phrase; } /* 図の横で幅が狭くなるので、文節で折る */ @media (min-width: 768px) { .lsum__box--ig { display: grid; grid-template-columns: 196px minmax(0, 1fr); grid-template-areas: "ig text" "ig nums"; column-gap: 36px; align-items: center; } .lsum__box--ig .lsum__ig { grid-area: ig; width: 100%; margin: 0; } .lsum__box--ig .lsum__text { grid-area: text; } .lsum__box--ig .lsum__nums { grid-area: nums; } .lsum__box--ig:not(:has(.lsum__nums)) { grid-template-areas: "ig text"; } } @media (min-width: 1024px) { .lsum__box--ig { grid-template-columns: 264px minmax(0, 1fr) auto; grid-template-areas: "ig text nums"; column-gap: 48px; } .lsum__box--ig:not(:has(.lsum__nums)) { grid-template-columns: 264px minmax(0, 1fr); grid-template-areas: "ig text"; } .lsum__box--ig:has(.lsum__num:nth-child(3)) { grid-template-columns: 264px minmax(0, 1fr); grid-template-areas: "ig text" "ig nums"; row-gap: 28px; } } /* ---------- 置き場：会社を知るのパネル（選ばれる理由・ミッション） ---------- */ .lig--panel { width: min(240px, 84%); margin: 0 auto 14px; } /* ---------- 組み上がる前は隠す（動きのあるときだけ。完成形が一瞬見えるのを防ぐ） ---------- */ @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .reveal:not(.is-act) .lig svg { opacity: 0; } .page:not([data-anim="static"]) .reveal.is-act .lig svg { opacity: 1; transition: opacity .3s linear var(--D); } } /* ---------- 共通の動き（lig-*）。どの図もこの中から選んで使う ---------- */ @keyframes lig-pop { from { transform: scale(0); } to { transform: scale(1); } } @keyframes lig-pop-in { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes lig-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lig-up { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes lig-down { from { transform: translateY(-18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes lig-left { from { transform: translateX(-26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes lig-right { from { transform: translateX(26px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes lig-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes lig-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes lig-draw { from { stroke-dashoffset: var(--len, 200); } to { stroke-dashoffset: 0; } } @keyframes lig-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: calc(var(--dash, 16) * -1); } } @keyframes lig-bob { from { transform: translateY(0); } to { transform: translateY(-6px); } } @keyframes lig-bob-s { from { transform: translateY(0); } to { transform: translateY(-3px); } } @keyframes lig-float { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(4px, -9px) rotate(4deg); } } @keyframes lig-spin { to { transform: rotate(360deg); } } @keyframes lig-spin-r { to { transform: rotate(-360deg); } } @keyframes lig-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes lig-beat { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } } @keyframes lig-blink { 0%, 70%, 100% { opacity: 1; } 80% { opacity: .25; } } @keyframes lig-swing { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } } @keyframes lig-nod { 0%, 70%, 100% { transform: rotate(0deg); } 78% { transform: rotate(8deg); } 86% { transform: rotate(-3deg); } } @keyframes lig-twinkle { 0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 40%, 60% { transform: scale(1) rotate(45deg); opacity: 1; } } @keyframes lig-wave { from { transform: skewY(0deg); } to { transform: skewY(-9deg); } } @keyframes lig-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } } /* ---------- ig-about（会社を知る）：本社のビル＋3つの事業がつながる＋4拠点のピン＋「助かった」 ---------- */ .ig-about__stage, .ig-about__sat, .ig-about__win, .ig-about__spark, .ig-about__heart, .ig-about__deco { transform-box: fill-box; transform-origin: center; } .ig-about__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-about__bldg, .ig-about__pin { transform-box: fill-box; transform-origin: center bottom; } .ig-about__ground, .ig-about__code { transform-box: fill-box; transform-origin: left center; } .ig-about__thanks { transform-box: fill-box; transform-origin: 10% 100%; } .ig-about__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-about__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-about__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-about__ground { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-about__bldg { animation: lig-grow-y .7s var(--ease-out) calc(var(--D) + .35s) both; } .page:not([data-anim="static"]) .is-act .ig-about__win { animation: lig-pop .35s var(--ease-back) calc(var(--D) + .8s + var(--k) * .05s) both; } .page:not([data-anim="static"]) .is-act .ig-about__win.is-blink { animation: lig-pop .35s var(--ease-back) calc(var(--D) + .8s + var(--k) * .05s) both, lig-blink 3.4s ease-in-out calc(var(--D) + 2.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-about__win.is-blink.is-late { animation-delay: calc(var(--D) + .8s + var(--k) * .05s), calc(var(--D) + 4s); } .page:not([data-anim="static"]) .is-act .ig-about__sat { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 1.1s + var(--k) * .16s) both, lig-bob 2.8s ease-in-out calc(var(--D) + 1.8s + var(--k) * .5s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-about__code { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + 1.6s) both, lig-blink 2.6s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-about__code.is-b { animation-delay: calc(var(--D) + 1.75s), calc(var(--D) + 3.4s); } .page:not([data-anim="static"]) .is-act .ig-about__link { --dash: 16; animation: lig-fade .4s linear calc(var(--D) + 1.5s) both, lig-flow .9s linear calc(var(--D) + 1.5s) infinite; } .page:not([data-anim="static"]) .is-act .ig-about__pin { animation: lig-pop .45s var(--ease-back) calc(var(--D) + 1.7s + var(--k) * .12s) both, lig-bob-s 2.2s ease-in-out calc(var(--D) + 2.4s + var(--k) * .3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-about__thanks { animation: lig-pop .6s var(--ease-back) calc(var(--D) + 2.3s) both; } .page:not([data-anim="static"]) .is-act .ig-about__heart { animation: lig-beat 1.6s ease-in-out calc(var(--D) + 2.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-about__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-about__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-about__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-blog（ブログ・お知らせ・掲載の記事の要約）：タブレットに記事のカードが積み重なる＋社員の声・お知らせ・掲載が飛んできて集まる＋ペンが線を書く＋記事の列がゆっくりスクロール ---------- */ .ig-blog__stage, .ig-blog__voice, .ig-blog__horn, .ig-blog__paper, .ig-blog__draft, .ig-blog__spark, .ig-blog__deco { transform-box: fill-box; transform-origin: center; } .ig-blog__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-blog__tab { transform-box: fill-box; transform-origin: center bottom; } .ig-blog__wave { transform-box: fill-box; transform-origin: left center; } .ig-blog__pen { transform-box: fill-box; transform-origin: 0% 0%; } /* ペン先（左上）を軸に揺れる */ .ig-blog__voice { transform-box: fill-box; transform-origin: 7% 100%; } .ig-blog__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* 記事の列：1枚ずつ上へ送って止まる（3枚で1巡。下の3枚は上と同じなので、最初に戻ってもつながる） */ @keyframes ig-blog-scroll { 0%, 16% { transform: translateY(0); } 26%, 42% { transform: translateY(-32px); } 52%, 68% { transform: translateY(-64px); } 78%, 100% { transform: translateY(-96px); } } /* 新聞は左下から飛んでくる */ @keyframes ig-blog-in { from { transform: translate(-22px, 20px) rotate(-10deg); opacity: 0; } 60% { opacity: 1; } to { transform: translate(0, 0) rotate(0deg); opacity: 1; } } /* ペン：左から右へ、上下に小さく波打ちながら線を書く */ @keyframes ig-blog-write { 0% { transform: translate(-33px, 0); opacity: 0; } 12% { opacity: 1; } 25% { transform: translate(-25px, -3px); } 50% { transform: translate(-16px, 2px); } 75% { transform: translate(-8px, -3px); } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes ig-blog-wiggle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-4deg); } 65% { transform: rotate(3deg); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-blog__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-blog__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-blog__tab { animation: lig-grow-y .6s var(--ease-out) calc(var(--D) + .35s) both; } .page:not([data-anim="static"]) .is-act .ig-blog__card { animation: lig-down .45s var(--ease-back) calc(var(--D) + .8s + var(--k) * .16s) both; } .page:not([data-anim="static"]) .is-act .ig-blog__feed { animation: ig-blog-scroll 9s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-blog__voice { animation: lig-left .55s var(--ease-back) calc(var(--D) + 1.1s) both, lig-bob 3.2s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-blog__horn { animation: lig-right .55s var(--ease-back) calc(var(--D) + 1.3s) both; } .page:not([data-anim="static"]) .is-act .ig-blog__wave { animation: lig-fade .3s linear calc(var(--D) + 1.7s + var(--k) * .12s) both, lig-blink 2.4s ease-in-out calc(var(--D) + 2.6s + var(--k) * .3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-blog__paper { animation: ig-blog-in .6s var(--ease-out) calc(var(--D) + 1.5s) both, lig-bob-s 3.6s ease-in-out calc(var(--D) + 3.2s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-blog__draft { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1.5s) both; } .page:not([data-anim="static"]) .is-act .ig-blog__ink { --len: 50; stroke-dasharray: 50; animation: lig-draw .75s linear calc(var(--D) + 1.75s) both; } .page:not([data-anim="static"]) .is-act .ig-blog__pen { animation: ig-blog-write .75s linear calc(var(--D) + 1.75s) both, ig-blog-wiggle 2.8s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-blog__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-blog__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-blog__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-business（事業紹介）：3本のレーンを人・歯車と画面・書類の箱が右へ進み、お客さまのビルに届いて「助かった」 ---------- */ .ig-business__stage, .ig-business__dot, .ig-business__arrow, .ig-business__item, .ig-business__gear, .ig-business__papers, .ig-business__win, .ig-business__heart, .ig-business__mini, .ig-business__spark, .ig-business__deco { transform-box: fill-box; transform-origin: center; } .ig-business__bldg, .ig-business__src { transform-box: fill-box; transform-origin: center bottom; } .ig-business__lane, .ig-business__ground { transform-box: fill-box; transform-origin: left center; } .ig-business__thanks { transform-box: fill-box; transform-origin: 10% 100%; } .ig-business__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-business-in { from { transform: translateX(-56px); opacity: 0; } 60% { opacity: 1; } to { transform: translateX(0); opacity: 1; } } @keyframes ig-business-nudge { 0%, 55%, 100% { transform: translateX(0); } 75% { transform: translateX(3px); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-business__stage { animation: lig-pop-in .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-business__ground { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-business__bldg { animation: lig-grow-y .7s var(--ease-out) calc(var(--D) + .35s) both; } .page:not([data-anim="static"]) .is-act .ig-business__lane { animation: lig-grow-x .55s var(--ease-out) calc(var(--D) + .5s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-business__src { animation: lig-grow-y .5s var(--ease-out) calc(var(--D) + .4s) both; } .page:not([data-anim="static"]) .is-act .ig-business__dot { animation: lig-pop .35s var(--ease-back) calc(var(--D) + .65s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-business__flow { --dash: 8; animation: lig-fade .4s linear calc(var(--D) + .9s) both, lig-flow .8s linear calc(var(--D) + .9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-business__flow.is-b { animation-duration: .4s, 1.1s; } .page:not([data-anim="static"]) .is-act .ig-business__item { animation: ig-business-in .7s var(--ease-out) calc(var(--D) + 1s + var(--k) * .18s) both, lig-bob-s 2.4s ease-in-out calc(var(--D) + 2.4s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-business__item.is-b { animation-duration: .7s, 3.1s; animation-delay: calc(var(--D) + 1.18s), calc(var(--D) + 2.9s); } .page:not([data-anim="static"]) .is-act .ig-business__item.is-c { animation-duration: .7s, 2.7s; animation-delay: calc(var(--D) + 1.36s), calc(var(--D) + 3.4s); } .page:not([data-anim="static"]) .is-act .ig-business__gear { animation: lig-spin 5s linear calc(var(--D) + 1.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-business__papers { animation: lig-bob-s 1.9s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-business__arrow { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.65s + var(--k) * .1s) both, ig-business-nudge 2.6s ease-in-out calc(var(--D) + 2.6s + var(--k) * .35s) infinite; } .page:not([data-anim="static"]) .is-act .ig-business__win { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.85s + var(--k) * .05s) both; } .page:not([data-anim="static"]) .is-act .ig-business__win.is-blink { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.85s + var(--k) * .05s) both, lig-blink 3.4s ease-in-out calc(var(--D) + 2.8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-business__win.is-blink.is-late { animation-delay: calc(var(--D) + 1.85s + var(--k) * .05s), calc(var(--D) + 4.4s); } .page:not([data-anim="static"]) .is-act .ig-business__thanks { animation: lig-pop .6s var(--ease-back) calc(var(--D) + 2.25s) both; } .page:not([data-anim="static"]) .is-act .ig-business__heart { animation: lig-beat 1.6s ease-in-out calc(var(--D) + 2.85s) infinite; } .page:not([data-anim="static"]) .is-act .ig-business__mini { animation: lig-pop .45s var(--ease-back) calc(var(--D) + 2.45s + var(--k) * .15s) both, lig-float 3.6s ease-in-out calc(var(--D) + 2.9s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-business__mini.is-b { animation-duration: .45s, 4.4s; } .page:not([data-anim="static"]) .is-act .ig-business__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-business__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-business__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-crosstalk（座談会）：丸いテーブルを3人が囲み、吹き出しが順に出る→話す番の人が少し大きくなり、音の波が広がる ---------- */ .ig-crosstalk__stage, .ig-crosstalk__cup, .ig-crosstalk__heart, .ig-crosstalk__star, .ig-crosstalk__dot, .ig-crosstalk__spark { transform-box: fill-box; transform-origin: center; } .ig-crosstalk__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-crosstalk__p, .ig-crosstalk__talk, .ig-crosstalk__steam { transform-box: fill-box; transform-origin: center bottom; } .ig-crosstalk__table { transform-box: fill-box; transform-origin: center 30%; } .ig-crosstalk__say { transform-box: fill-box; transform-origin: 12% 100%; } .ig-crosstalk__say.is-l { transform-origin: 88% 100%; } .ig-crosstalk__wave { transform-box: view-box; } /* 中心は各要素の style（話す人の頭） */ .ig-crosstalk__wave, .ig-crosstalk__spark { opacity: 0; } /* 音の波・きらめきは動きのあるときだけ */ /* 6秒で1周：左（0〜2秒）→奥（2〜4秒）→右（4〜6秒）。--k × 2秒ずらして、自分の番だけ大きく・波を出す */ @keyframes ig-crosstalk-talk { 0%, 100% { transform: scale(1); } 5%, 27% { transform: scale(1.08); } 33% { transform: scale(1); } } @keyframes ig-crosstalk-lift { 0%, 100% { transform: translateY(0); } 5%, 27% { transform: translateY(-5px); } 33% { transform: translateY(0); } } @keyframes ig-crosstalk-wave { 0% { transform: scale(.75); opacity: 0; } 6% { opacity: 1; } 15% { transform: scale(1.1); opacity: .9; } 16% { transform: scale(.75); opacity: 0; } 21% { opacity: 1; } 30% { transform: scale(1.1); opacity: 0; } 100% { transform: scale(1.1); opacity: 0; } } @keyframes ig-crosstalk-steam { 0% { transform: translateY(3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-crosstalk__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 48s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__table { animation: lig-pop .55s var(--ease-back) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__p { animation: lig-up .55s var(--ease-out) calc(var(--D) + .5s + var(--k) * .14s) both; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__cup { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .9s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__steam { animation: ig-crosstalk-steam 3.6s ease-in-out calc(var(--D) + 1.4s) infinite both; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__say { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1.2s + var(--k) * .35s) both; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__talk { animation: ig-crosstalk-talk 6s ease-in-out calc(var(--D) + 2.4s + var(--k) * 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__lift { animation: ig-crosstalk-lift 6s ease-in-out calc(var(--D) + 2.4s + var(--k) * 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__wave { animation: ig-crosstalk-wave 6s ease-out calc(var(--D) + 2.4s + var(--k) * 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__dot { animation: lig-bob-s 1.2s ease-in-out calc(var(--D) + 2.2s + var(--k) * .4s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__heart { animation: lig-beat 1.8s ease-in-out calc(var(--D) + 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__star { animation: lig-spin 9s linear calc(var(--D) + 2.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-crosstalk__spark { animation: lig-twinkle 2.8s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-environment（休み・手当・働き方）：家とオフィスを道がつなぐ町＋入れ替わる太陽と月＋ベビーカーとハート＋休日のカレンダー・残業の時計 ---------- */ .ig-environment__stage, .ig-environment__orb, .ig-environment__up, .ig-environment__sat, .ig-environment__day, .ig-environment__heart, .ig-environment__spark, .ig-environment__deco, .ig-environment__cloud { transform-box: fill-box; transform-origin: center; } .ig-environment__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-environment__wheel { transform-box: view-box; transform-origin: 160px 148px; } .ig-environment__bldg, .ig-environment__pram { transform-box: fill-box; transform-origin: center bottom; } .ig-environment__road { transform-box: fill-box; transform-origin: left center; } .ig-environment__hand { transform-box: view-box; transform-origin: 0 0; } .ig-environment__love { transform-box: fill-box; transform-origin: 10% 100%; } .ig-environment__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-environment-daynight { 0%, 30% { transform: rotate(0deg); } 50%, 80% { transform: rotate(60deg); } 100% { transform: rotate(120deg); } } @keyframes ig-environment-upright { 0%, 30% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-60deg); } 100% { transform: rotate(-120deg); } } @keyframes ig-environment-commute { 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: -32; } } @keyframes ig-environment-roll { from { transform: translateX(-34px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-environment__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-environment__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 48s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__road { animation: lig-grow-x .55s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-environment__sky { --dash: 11; animation: lig-fade .5s linear calc(var(--D) + .45s) both, lig-flow 2.4s linear calc(var(--D) + .45s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__bldg { animation: lig-grow-y .6s var(--ease-out) calc(var(--D) + .5s + var(--k) * .16s) both; } .page:not([data-anim="static"]) .is-act .ig-environment__lamp { animation: lig-blink 3.6s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__lamp.is-b { animation-duration: 4.4s; animation-delay: calc(var(--D) + 3.8s); } .page:not([data-anim="static"]) .is-act .ig-environment__orb { animation: lig-pop .5s var(--ease-back) calc(var(--D) + .9s + var(--k) * .16s) both; } .page:not([data-anim="static"]) .is-act .ig-environment__wheel { animation: lig-fade .3s linear calc(var(--D) + .85s) both, ig-environment-daynight 16s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__up { animation: ig-environment-upright 16s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__sat { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 1.15s + var(--k) * .2s) both, lig-bob 3.2s ease-in-out calc(var(--D) + 2.4s + var(--k) * .7s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-environment__day { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.5s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-environment__day.is-b { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.5s + var(--k) * .12s) both, lig-blink 3s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__hand { animation: lig-spin 10s linear calc(var(--D) + 1.7s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__pram { animation: ig-environment-roll .7s var(--ease-out) calc(var(--D) + 1.55s) both, lig-bob-s 2.4s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-environment__lane { animation: lig-fade .4s linear calc(var(--D) + 1.6s) both, ig-environment-commute 6s ease-in-out calc(var(--D) + 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__love { animation: lig-pop .6s var(--ease-back) calc(var(--D) + 2.15s) both; } .page:not([data-anim="static"]) .is-act .ig-environment__heart { animation: lig-beat 1.6s ease-in-out calc(var(--D) + 2.8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-environment__cloud { animation: lig-fade .6s linear calc(var(--D) + .6s) both, lig-float 5.4s ease-in-out calc(var(--D) + 1.2s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-environment__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-environment__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-environment__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-faq（採用FAQ）：重なったカードの上で、虫眼鏡が4つのタグをなぞり、Q と A の吹き出しが交互に出て A にチェックが付く ---------- */ .ig-faq__card, .ig-faq__tag, .ig-faq__check, .ig-faq__ask, .ig-faq__float, .ig-faq__spark, .ig-faq__deco { transform-box: fill-box; transform-origin: center; } .ig-faq__uline, .ig-faq__line { transform-box: fill-box; transform-origin: left center; } .ig-faq__q { transform-box: fill-box; transform-origin: left center; } .ig-faq__a { transform-box: fill-box; transform-origin: right center; } .ig-faq__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-faq-scan { 0%, 14% { transform: translateX(-159px); } 28%, 42% { transform: translateX(-106px); } 56%, 70% { transform: translateX(-53px); } 84%, 100% { transform: translateX(0); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-faq__card { animation: lig-pop-in .6s var(--ease-back) calc(var(--D) + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-faq__tag { animation: lig-pop-in .4s var(--ease-back) calc(var(--D) + .5s + var(--k) * .07s) both; } .page:not([data-anim="static"]) .is-act .ig-faq__lens { animation: ig-faq-scan 1.3s ease-in-out calc(var(--D) + .85s) both; } .page:not([data-anim="static"]) .is-act .ig-faq__float { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .7s) both, lig-float 3.8s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-faq__uline { animation: lig-grow-x .35s var(--ease-out) calc(var(--D) + .85s + var(--t)) both; } .page:not([data-anim="static"]) .is-act .ig-faq__q, .page:not([data-anim="static"]) .is-act .ig-faq__a { animation: lig-pop-in .45s var(--ease-back) calc(var(--D) + var(--t)) both; } .page:not([data-anim="static"]) .is-act .ig-faq__line { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + var(--t)) both; } .page:not([data-anim="static"]) .is-act .ig-faq__check { animation: lig-pop .4s var(--ease-back) calc(var(--D) + var(--t)) both, lig-pulse 3.2s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-faq__check.is-b { animation-duration: .4s, 4s; animation-delay: calc(var(--D) + var(--t)), calc(var(--D) + 3.8s); } .page:not([data-anim="static"]) .is-act .ig-faq__ask { animation: lig-nod 3.6s ease-in-out calc(var(--D) + 2.8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-faq__ask.is-b { animation-duration: 4.4s; animation-delay: calc(var(--D) + 4s); } .page:not([data-anim="static"]) .is-act .ig-faq__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-faq__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-faq__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-job-consultant（コンサルタント）：ホワイトボードの業務の流れを描き直す→ムダな箱が消える→残業の棒が縮む ---------- */ .ig-job-consultant__board, .ig-job-consultant__card, .ig-job-consultant__step, .ig-job-consultant__waste, .ig-job-consultant__sticky, .ig-job-consultant__clock, .ig-job-consultant__spark, .ig-job-consultant__down { transform-box: fill-box; transform-origin: center; } .ig-job-consultant__leg, .ig-job-consultant__bar { transform-box: fill-box; transform-origin: center bottom; } .ig-job-consultant__tray, .ig-job-consultant__note, .ig-job-consultant__base { transform-box: fill-box; transform-origin: left center; } .ig-job-consultant__hand { transform-box: view-box; transform-origin: 0 0; } .ig-job-consultant__waste { opacity: 0; } /* 完成形ではムダな箱は消えて、点線の跡だけが残る */ .ig-job-consultant__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-job-consultant-waste { 0% { transform: scale(0); opacity: 1; } 22% { transform: scale(1); opacity: 1; } 62% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } } @keyframes ig-job-consultant-pen { 0% { transform: translate(-122px, 9px); opacity: 0; } 18% { transform: translate(-122px, 9px); opacity: 1; } 29.8% { transform: translate(-103.6px, -8.7px); } 41.6% { transform: translate(-78.9px, -16.4px); } 53.4% { transform: translate(-53.1px, -16.4px); } 65.2% { transform: translate(-28.4px, -8.7px); } 77% { transform: translate(-10px, 9px); } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes ig-job-consultant-shrink { 0% { transform: scaleY(0); } 30%, 55% { transform: scaleY(2.5); } 100% { transform: scaleY(1); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-job-consultant__board { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__card { animation: lig-pop .7s var(--ease-back) calc(var(--D) + .15s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__leg { animation: lig-grow-y .45s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__tray { animation: lig-grow-x .45s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__note { animation: lig-grow-x .45s var(--ease-out) calc(var(--D) + .45s + var(--k) * .08s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__sticky { animation: lig-pop .45s var(--ease-back) calc(var(--D) + .6s) both, lig-float 5.4s ease-in-out calc(var(--D) + 1.2s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__step { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .8s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__step.is-goal { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .8s + var(--k) * .12s) both, lig-pulse 3.6s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__waste { animation: ig-job-consultant-waste 1.75s var(--ease-out) calc(var(--D) + .8s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__ghost { animation: lig-fade .3s linear calc(var(--D) + 1.3s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__old { animation: lig-fade .4s linear calc(var(--D) + 1.1s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__pen { animation: ig-job-consultant-pen 1.35s linear calc(var(--D) + 1.35s) both, lig-bob 3.2s ease-in-out calc(var(--D) + 2.7s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__route { --len: 132; animation: lig-draw .8s linear calc(var(--D) + 1.59s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__tip { animation: lig-fade .2s linear calc(var(--D) + 2.35s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__clock { animation: lig-pop .45s var(--ease-back) calc(var(--D) + .9s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__hand { animation: lig-spin 6s linear calc(var(--D) + 1.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__bar.is-before { animation: lig-grow-y .55s var(--ease-out) calc(var(--D) + 1.1s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__bar.is-after { animation: ig-job-consultant-shrink 1.8s var(--ease-out) calc(var(--D) + 1.1s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__down { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 2.5s) both, lig-bob-s 2.4s ease-in-out calc(var(--D) + 3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__base { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + .9s) both; } .page:not([data-anim="static"]) .is-act .ig-job-consultant__spark { animation: lig-twinkle 2.8s ease-in-out calc(var(--D) + 2.3s + var(--k) * .9s) infinite; } } /* ---------- ig-job-corporate（コーポレート）：デスクのPCから人事・経理・総務へ支えが届く→「助かったカード」が社員に届く ---------- */ .ig-job-corporate__stage, .ig-job-corporate__hub, .ig-job-corporate__tile, .ig-job-corporate__coin, .ig-job-corporate__key, .ig-job-corporate__mug, .ig-job-corporate__thanks, .ig-job-corporate__heart, .ig-job-corporate__spark, .ig-job-corporate__deco { transform-box: fill-box; transform-origin: center; } .ig-job-corporate__pc, .ig-job-corporate__person, .ig-job-corporate__leg, .ig-job-corporate__steam { transform-box: fill-box; transform-origin: center bottom; } .ig-job-corporate__desk, .ig-job-corporate__row { transform-box: fill-box; transform-origin: left center; } .ig-job-corporate__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-job-corporate-fly { 0% { transform: translate(64px, -118px) rotate(50deg) scale(.5); opacity: 0; } 20% { opacity: 1; } 75% { transform: translate(-3px, 4px) rotate(-6deg) scale(1.06); opacity: 1; } 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; } } @keyframes ig-job-corporate-steam { 0% { transform: translateY(3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-job-corporate__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__desk { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .2s) both; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__leg { animation: lig-grow-y .4s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__pc { animation: lig-up .55s var(--ease-out) calc(var(--D) + .35s) both; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__row { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + .8s) both, lig-blink 3.2s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__person { animation: lig-up .55s var(--ease-out) calc(var(--D) + .5s) both; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__mug { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .6s) both; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__steam { animation: ig-job-corporate-steam 3.4s ease-in-out calc(var(--D) + 1.2s) infinite both; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__hub { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .75s) both, lig-pulse 3s ease-in-out calc(var(--D) + 2.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__link { --dash: 8; animation: lig-fade .4s linear calc(var(--D) + .85s) both, lig-flow 1s linear calc(var(--D) + .85s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__tile { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1s + var(--k) * .18s) both, lig-bob-s 3.4s ease-in-out calc(var(--D) + 2.4s + var(--k) * .7s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__coin { animation: lig-bob 2.6s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__day { animation: lig-blink 3s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__key { animation: lig-swing 2.8s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__thanks { animation: ig-job-corporate-fly .8s var(--ease-out) calc(var(--D) + 1.85s) both, lig-bob-s 3s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__heart { animation: lig-beat 1.6s ease-in-out calc(var(--D) + 2.7s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__deco { animation: lig-float 4.8s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-corporate__spark { animation: lig-twinkle 2.8s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-job-engineer（エンジニア）：コードが打たれる→歯車が回る→受注の書類がベルトで自動で取り込まれる→時計の扇が縮む ---------- */ .ig-job-engineer__stage, .ig-job-engineer__clock, .ig-job-engineer__gear, .ig-job-engineer__ok, .ig-job-engineer__spark, .ig-job-engineer__deco { transform-box: fill-box; transform-origin: center; } .ig-job-engineer__pc, .ig-job-engineer__machine, .ig-job-engineer__leg { transform-box: fill-box; transform-origin: center bottom; } .ig-job-engineer__belt, .ig-job-engineer__code { transform-box: fill-box; transform-origin: left center; } .ig-job-engineer__hand { transform-box: view-box; transform-origin: 0 0; transform: rotate(15deg); } /* 針は30分（15度）の位置 */ .ig-job-engineer__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-job-engineer-wedge { 0% { stroke-dasharray: 0 50.27; } 30%, 58% { stroke-dasharray: 12.57 50.27; } 100% { stroke-dasharray: 2.09 50.27; } } @keyframes ig-job-engineer-hand { 0% { transform: rotate(0deg); } 30%, 58% { transform: rotate(90deg); } 100% { transform: rotate(15deg); } } @keyframes ig-job-engineer-ride { 0% { transform: translateX(var(--from)); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateX(var(--to)); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-job-engineer__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__belt { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .2s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__leg { animation: lig-grow-y .4s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__tread { --dash: 16; animation: lig-fade .3s linear calc(var(--D) + .5s) both, lig-flow 1.2s linear calc(var(--D) + .5s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__pc { animation: lig-up .55s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__machine { animation: lig-grow-y .6s var(--ease-out) calc(var(--D) + .4s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__code { animation: lig-grow-x .3s var(--ease-out) calc(var(--D) + .8s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__cursor { animation: lig-fade .2s linear calc(var(--D) + 1.5s) both, lig-blink 1.8s ease-in-out calc(var(--D) + 1.7s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__clock { animation: lig-pop .5s var(--ease-back) calc(var(--D) + .85s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__wedge { animation: ig-job-engineer-wedge 1.9s ease-in-out calc(var(--D) + .95s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__hand { animation: ig-job-engineer-hand 1.9s ease-in-out calc(var(--D) + .95s) both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__cable { --dash: 8; animation: lig-fade .4s linear calc(var(--D) + 1.3s) both, lig-flow 1s linear calc(var(--D) + 1.3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__gear { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1.4s) both, lig-spin 7s linear calc(var(--D) + 1.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__gear.is-s { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1.55s) both, lig-spin-r 4.9s linear calc(var(--D) + 2.05s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__lamp { animation: lig-blink 2.4s ease-in-out calc(var(--D) + 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__doc { animation: ig-job-engineer-ride 6s linear calc(var(--D) + .6s) infinite both; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__doc.is-b { animation-delay: calc(var(--D) + 3.6s); } .page:not([data-anim="static"]) .is-act .ig-job-engineer__ok { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 2.4s) both, lig-pulse 4.2s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__deco { animation: lig-float 5s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-engineer__spark { animation: lig-twinkle 2.8s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-job-sales（法人営業）：困りごとの吹き出し→うなずいて聞く→提案書から3つの事業→「助かった」 ---------- */ .ig-job-sales__stage, .ig-job-sales__svc, .ig-job-sales__mini, .ig-job-sales__spark, .ig-job-sales__heart, .ig-job-sales__deco { transform-box: fill-box; transform-origin: center; } .ig-job-sales__guest, .ig-job-sales__rep, .ig-job-sales__doc, .ig-job-sales__leg, .ig-job-sales__head { transform-box: fill-box; transform-origin: center bottom; } .ig-job-sales__table, .ig-job-sales__code { transform-box: fill-box; transform-origin: left center; } .ig-job-sales__ask { transform-box: fill-box; transform-origin: 93% 100%; } .ig-job-sales__thanks { transform-box: fill-box; transform-origin: 10% 100%; } .ig-job-sales__spark, .ig-job-sales__nodmark { opacity: 0; } /* きらめき・うなずきの線は動きのあるときだけ */ @keyframes ig-job-sales-out { from { transform: translate(var(--fx), var(--fy)) scale(.3); opacity: 0; } 50% { opacity: 1; } to { transform: translate(0, 0) scale(1); opacity: 1; } } @keyframes ig-job-sales-nod { 0%, 60%, 100% { transform: translateY(0) rotate(0deg); } 68% { transform: translateY(3px) rotate(-6deg); } 76% { transform: translateY(0) rotate(0deg); } 84% { transform: translateY(3px) rotate(-6deg); } 92% { transform: translateY(0) rotate(0deg); } } @keyframes ig-job-sales-mark { 0%, 58%, 96%, 100% { opacity: 0; } 66%, 88% { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-job-sales__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__table { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__leg { animation: lig-grow-y .4s var(--ease-out) calc(var(--D) + .2s) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__guest { animation: lig-up .55s var(--ease-out) calc(var(--D) + .35s) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__rep { animation: lig-up .55s var(--ease-out) calc(var(--D) + .5s) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__ask { animation: lig-pop .55s var(--ease-back) calc(var(--D) + .8s) both, lig-float 5.2s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-sales__mini { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.05s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__mini.is-gap { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.05s + var(--k) * .1s) both, lig-blink 2.8s ease-in-out calc(var(--D) + 1.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-sales__head { animation: ig-job-sales-nod 3.6s ease-in-out calc(var(--D) - 1s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-sales__nodmark { animation: ig-job-sales-mark 3.6s linear calc(var(--D) - 1s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-sales__doc { animation: lig-up .6s var(--ease-back) calc(var(--D) + 1.35s) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__svc { animation: ig-job-sales-out .6s var(--ease-out) calc(var(--D) + 1.65s + var(--k) * .14s) both, lig-bob-s 3s ease-in-out calc(var(--D) + 2.4s + var(--k) * .6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-sales__link { --dash: 8; animation: lig-fade .4s linear calc(var(--D) + 1.9s) both, lig-flow 1.1s linear calc(var(--D) + 1.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-sales__code { animation: lig-blink 2.6s ease-in-out calc(var(--D) + 2.8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-sales__code.is-b { animation-delay: calc(var(--D) + 3.6s); } .page:not([data-anim="static"]) .is-act .ig-job-sales__thanks { animation: lig-pop .6s var(--ease-back) calc(var(--D) + 2.3s) both; } .page:not([data-anim="static"]) .is-act .ig-job-sales__heart { animation: lig-beat 1.6s ease-in-out calc(var(--D) + 2.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-job-sales__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-job-sales__spark { animation: lig-twinkle 2.8s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-jobs（募集要項）：要項の書類にチェックが入る＋説明会の日が光るカレンダー＋選考 STEP の5つの点＋飛んでいく紙飛行機（エントリー） ---------- */ .ig-jobs__stage, .ig-jobs__cal, .ig-jobs__day, .ig-jobs__glow, .ig-jobs__step, .ig-jobs__goal, .ig-jobs__glide, .ig-jobs__spark, .ig-jobs__deco { transform-box: fill-box; transform-origin: center; } .ig-jobs__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-jobs__doc { transform-box: fill-box; transform-origin: center bottom; } .ig-jobs__row, .ig-jobs__track { transform-box: fill-box; transform-origin: left center; } .ig-jobs__check, .ig-jobs__tick { stroke-dasharray: 12; } .ig-jobs__spark, .ig-jobs__glow { opacity: 0; } /* きらめきと光の輪は動きのあるときだけ */ @keyframes ig-jobs-fly { from { transform: translate(-84px, 36px) scale(.5) rotate(-12deg); opacity: 0; } to { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-jobs__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-jobs__doc { animation: lig-up .6s var(--ease-out) calc(var(--D) + .4s) both, lig-bob-s 3.4s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-jobs__row { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + .75s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__check { --len: 12; animation: lig-draw .3s var(--ease-out) calc(var(--D) + 1s + var(--k) * .18s) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__cal { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 1.05s) both, lig-bob 3s ease-in-out calc(var(--D) + 2.4s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-jobs__day { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1.55s) both, lig-pulse 2.6s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-jobs__glow { animation: lig-ring 2.6s ease-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-jobs__track { animation: lig-grow-x .55s var(--ease-out) calc(var(--D) + 1.2s) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__base { animation: lig-fade .4s linear calc(var(--D) + 1.15s) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__flow { --dash: 7; animation: lig-fade .4s linear calc(var(--D) + 2.2s) both, lig-flow 1.4s linear calc(var(--D) + 2.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-jobs__step { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.4s + var(--k) * .15s) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__tick { --len: 12; animation: lig-draw .3s var(--ease-out) calc(var(--D) + 2.1s) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__goal { animation: lig-pulse 2.8s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-jobs__trail { --dash: 8; animation: lig-fade .5s linear calc(var(--D) + 1.9s) both, lig-flow 1s linear calc(var(--D) + 1.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-jobs__plane { animation: ig-jobs-fly .75s var(--ease-out) calc(var(--D) + 1.9s) both; } .page:not([data-anim="static"]) .is-act .ig-jobs__glide { animation: lig-float 3.6s ease-in-out calc(var(--D) + 2.7s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-jobs__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-jobs__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-jobs__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-media（動画・SNS）：動画プレーヤー（脈打つ再生ボタン・進むバー）＋SNSのスマホの写真グリッド＋重なるブログの記事カード＋「いいね」 ---------- */ .ig-media__stage, .ig-media__player, .ig-media__play, .ig-media__ring, .ig-media__tile, .ig-media__heart, .ig-media__spark, .ig-media__deco { transform-box: fill-box; transform-origin: center; } .ig-media__phone, .ig-media__card { transform-box: fill-box; transform-origin: center bottom; } .ig-media__bar, .ig-media__line { transform-box: fill-box; transform-origin: left center; } .ig-media__like { transform-box: fill-box; transform-origin: 10% 100%; } .ig-media__spark, .ig-media__ring { opacity: 0; } /* きらめきと再生ボタンの波紋は動きのあるときだけ */ /* 再生バー：既定は 57% まで進んだ形。動きのあるときは 0 → 最後まで進んでくり返す（つまみも一緒に） */ @keyframes ig-media-progress { from { transform: scaleX(0); } to { transform: scaleX(1.75); } } @keyframes ig-media-knob { from { transform: translateX(-64px); } to { transform: translateX(48px); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-media__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-media__frame { --dash: 11; animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-flow 2.6s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-media__player { animation: lig-pop-in .6s var(--ease-back) calc(var(--D) + .4s) both; } .page:not([data-anim="static"]) .is-act .ig-media__play { animation: lig-pop .5s var(--ease-back) calc(var(--D) + .85s) both, lig-pulse 2.4s ease-in-out calc(var(--D) + 2.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-media__ring { animation: lig-ring 2.4s ease-out calc(var(--D) + 2.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-media__bar { animation: ig-media-progress 7s linear calc(var(--D) + 1s) infinite both; } .page:not([data-anim="static"]) .is-act .ig-media__knob { animation: ig-media-knob 7s linear calc(var(--D) + 1s) infinite both; } .page:not([data-anim="static"]) .is-act .ig-media__phone { animation: lig-up .6s var(--ease-out) calc(var(--D) + 1s) both, lig-bob-s 2.6s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-media__tile { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.35s + var(--k) * .09s) both; } .page:not([data-anim="static"]) .is-act .ig-media__tile.is-b { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.35s + var(--k) * .09s) both, lig-blink 3.8s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-media__tile.is-b.is-late { animation-delay: calc(var(--D) + 1.35s + var(--k) * .09s), calc(var(--D) + 4.6s); } .page:not([data-anim="static"]) .is-act .ig-media__card { animation: lig-left .6s var(--ease-out) calc(var(--D) + 1.55s + var(--k) * .15s) both; } .page:not([data-anim="static"]) .is-act .ig-media__line { animation: lig-grow-x .45s var(--ease-out) calc(var(--D) + 2s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-media__like { animation: lig-pop .6s var(--ease-back) calc(var(--D) + 2.25s) both, lig-bob 3.4s ease-in-out calc(var(--D) + 3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-media__heart { animation: lig-beat 1.6s ease-in-out calc(var(--D) + 2.85s) infinite; } .page:not([data-anim="static"]) .is-act .ig-media__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-media__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-media__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-numbers（数字で見る）：タブレットの上に、時点のチップ・棒グラフ・72%のドーナツ・並ぶ人・横棒が順に組み上がるダッシュボード ---------- */ .ig-numbers__stage, .ig-numbers__device, .ig-numbers__chip, .ig-numbers__card, .ig-numbers__badge, .ig-numbers__man, .ig-numbers__plus, .ig-numbers__cal, .ig-numbers__lens, .ig-numbers__core, .ig-numbers__spark, .ig-numbers__deco { transform-box: fill-box; transform-origin: center; } .ig-numbers__bar { transform-box: fill-box; transform-origin: center bottom; } .ig-numbers__axis, .ig-numbers__hbar { transform-box: fill-box; transform-origin: left center; } .ig-numbers__page { transform-box: fill-box; transform-origin: center top; } .ig-numbers__ring { transform-box: view-box; transform-origin: 218px 106px; } .ig-numbers__hand { transform-box: view-box; transform-origin: 211px 60px; } .ig-numbers__cursor { transform-box: fill-box; transform-origin: left top; } .ig-numbers__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-numbers-tick { from { transform: scaleY(1); } to { transform: scaleY(.84); } } @keyframes ig-numbers-tick-x { from { transform: scaleX(1); } to { transform: scaleX(.78); } } @keyframes ig-numbers-flip { 0%, 58% { transform: scaleY(1); opacity: 1; } 74% { transform: scaleY(0); opacity: 0; } 75%, 84% { transform: scaleY(1); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } } @keyframes ig-numbers-cursor { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-9px, -7px); } 38% { transform: translate(-9px, -7px) scale(.88); } 46% { transform: translate(-9px, -7px); } 72% { transform: translate(-3px, 5px); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-numbers__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__device { animation: lig-pop-in .6s var(--ease-back) calc(var(--D) + .2s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__head { animation: lig-fade .4s linear calc(var(--D) + .55s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__chip { animation: lig-pop .45s var(--ease-back) calc(var(--D) + .65s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__hand { animation: lig-spin 6s linear calc(var(--D) + .8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-numbers__card { animation: lig-pop-in .45s var(--ease-back) calc(var(--D) + .7s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__axis { animation: lig-grow-x .45s var(--ease-out) calc(var(--D) + .95s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__bar { animation: lig-grow-y .55s var(--ease-out) calc(var(--D) + 1s + var(--k) * .08s) both, ig-numbers-tick 2.9s ease-in-out calc(var(--D) + 2.5s + var(--k) * .45s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-numbers__bar.is-b { animation-duration: .55s, 3.7s; } .page:not([data-anim="static"]) .is-act .ig-numbers__badge { animation: lig-pop .45s var(--ease-back) calc(var(--D) + 1.5s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__track { animation: lig-fade .3s linear calc(var(--D) + 1s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__arc { --len: 92; animation: lig-draw .9s var(--ease-out) calc(var(--D) + 1.15s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__core { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1.8s) both, lig-pulse 3.2s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-numbers__ring { animation: lig-fade .5s linear calc(var(--D) + 1.9s) both, lig-spin 14s linear calc(var(--D) + 1.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-numbers__man { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1.3s + var(--k) * .09s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__man.is-bob { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1.3s + var(--k) * .09s) both, lig-bob-s 2.4s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-numbers__plus { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1.8s) both, lig-pulse 2.8s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-numbers__hbar { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + 1.55s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__hbar.is-b { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + 1.55s + var(--k) * .1s) both, ig-numbers-tick-x 3.4s ease-in-out calc(var(--D) + 3.2s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-numbers__cal { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1.9s) both; } .page:not([data-anim="static"]) .is-act .ig-numbers__page { animation: ig-numbers-flip 4.6s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-numbers__lens { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 2.05s) both, lig-float 4.2s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-numbers__cursor { animation: lig-fade .3s linear calc(var(--D) + 2.2s) both, ig-numbers-cursor 5.2s ease-in-out calc(var(--D) + 2.5s) infinite; } .page:not([data-anim="static"]) .is-act .ig-numbers__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-numbers__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-numbers__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-people（社員を知る）：入り方の違う3人が並び、吹き出しが順に出る→絞り込みのチップが切り替わり、選ばれた人が前に出る ---------- */ .ig-people__stage, .ig-people__chip, .ig-people__badge, .ig-people__spark { transform-box: fill-box; transform-origin: center; } .ig-people__p, .ig-people__focus { transform-box: fill-box; transform-origin: center bottom; } .ig-people__floor { transform-box: fill-box; transform-origin: center; } .ig-people__say { transform-box: fill-box; transform-origin: 15% 100%; } .ig-people__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* 6秒で1周：0〜2秒は左、2〜4秒は中、4〜6秒は右のチップ。人と吹き出しは自分の番（--k × 2秒ずらし）で少し大きく・少し上に */ @keyframes ig-people-sel { 0%, 30% { transform: translateX(0); } 35%, 63% { transform: translateX(90px); } 68%, 95% { transform: translateX(180px); } 100% { transform: translateX(0); } } @keyframes ig-people-focus { 0%, 100% { transform: scale(1); } 5%, 28% { transform: scale(1.07); } 33% { transform: scale(1); } } @keyframes ig-people-lift { 0%, 100% { transform: translateY(0); } 5%, 28% { transform: translateY(-5px); } 33% { transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-people__stage { animation: lig-pop-in .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-people__floor { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-people__chip { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .4s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-people__p { animation: lig-up .55s var(--ease-out) calc(var(--D) + .55s + var(--k) * .15s) both; } .page:not([data-anim="static"]) .is-act .ig-people__badge { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-people__say { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1.3s + var(--k) * .25s) both; } .page:not([data-anim="static"]) .is-act .ig-people__sel { animation: lig-fade .3s linear calc(var(--D) + 2.1s) both, ig-people-sel 6s var(--ease-out) calc(var(--D) + 2.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-people__focus { animation: ig-people-focus 6s ease-in-out calc(var(--D) + 2.4s + var(--k) * 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-people__lift { animation: ig-people-lift 6s ease-in-out calc(var(--D) + 2.4s + var(--k) * 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-people__heart { animation: lig-beat 1.8s ease-in-out calc(var(--D) + 2.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-people__spark { animation: lig-twinkle 2.8s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-reason-growth（会社を知る・選ばれる理由02）：2005年から2026年へ、棒が年ごとに伸びて中の人が増え、矢印が右上へ、旗が上がる ---------- */ .ig-reason-growth__stage, .ig-reason-growth__start, .ig-reason-growth__tick, .ig-reason-growth__man, .ig-reason-growth__ring, .ig-reason-growth__head, .ig-reason-growth__star, .ig-reason-growth__spark, .ig-reason-growth__deco { transform-box: fill-box; transform-origin: center; } .ig-reason-growth__orbit { transform-box: view-box; transform-origin: 160px 124px; } .ig-reason-growth__bar, .ig-reason-growth__flag { transform-box: fill-box; transform-origin: center bottom; } .ig-reason-growth__man.is-nod { transform-origin: center bottom; } .ig-reason-growth__ground, .ig-reason-growth__time, .ig-reason-growth__cloth { transform-box: fill-box; transform-origin: left center; } .ig-reason-growth__ring, .ig-reason-growth__spark { opacity: 0; } /* 輪ときらめきは動きのあるときだけ */ @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-reason-growth__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__ground { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__time { animation: lig-grow-x .6s var(--ease-out) calc(var(--D) + .5s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__tick { animation: lig-pop .35s var(--ease-back) calc(var(--D) + .6s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__bar { animation: lig-grow-y .55s var(--ease-out) calc(var(--D) + .85s + var(--k) * .15s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__man { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.25s + var(--k) * .15s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__man.is-nod { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.25s + var(--k) * .15s) both, lig-nod 3.4s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__start { animation: lig-pop .3s var(--ease-back) calc(var(--D) + 1.65s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__arrow { --len: 200; animation: lig-draw .7s var(--ease-out) calc(var(--D) + 1.75s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__head { animation: lig-pop .3s var(--ease-back) calc(var(--D) + 2.25s) both, lig-bob-s 2s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__flag { animation: lig-grow-y .45s var(--ease-back) calc(var(--D) + 2.15s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__cloth { animation: lig-wave 2.4s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__star { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 2.45s) both, lig-pulse 2.8s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__ring { animation: lig-ring 2.6s ease-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-growth__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-reason-growth__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-reason-offices（会社を知る・選ばれる理由03）：島の上に4拠点のピンが立ち、点線でつながり、車がお客さまの会社へ駆けつける ---------- */ .ig-reason-offices__stage, .ig-reason-offices__land, .ig-reason-offices__wave, .ig-reason-offices__heart, .ig-reason-offices__ring, .ig-reason-offices__spark, .ig-reason-offices__deco { transform-box: fill-box; transform-origin: center; } .ig-reason-offices__orbit { transform-box: view-box; transform-origin: 160px 124px; } .ig-reason-offices__pin, .ig-reason-offices__co { transform-box: fill-box; transform-origin: center bottom; } .ig-reason-offices__car { transform-box: fill-box; transform-origin: center; } .ig-reason-offices__ring, .ig-reason-offices__spark { opacity: 0; } /* 輪ときらめきは動きのあるときだけ */ @keyframes ig-reason-offices-drive { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } } @keyframes ig-reason-offices-wave { from { transform: translateX(0); } to { transform: translateX(5px); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-reason-offices__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__land { animation: lig-pop-in .6s var(--ease-back) calc(var(--D) + .35s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__land.is-b { animation-delay: calc(var(--D) + .5s); } .page:not([data-anim="static"]) .is-act .ig-reason-offices__wave { animation: lig-fade .5s linear calc(var(--D) + .6s) both, ig-reason-offices-wave 3.4s ease-in-out calc(var(--D) + 1.2s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__wave.is-b { animation-duration: .5s, 4.2s; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__pin { animation: lig-down .5s var(--ease-back) calc(var(--D) + .85s + var(--k) * .16s) both, lig-bob-s 2.4s ease-in-out calc(var(--D) + 2.6s + var(--k) * .35s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__pin.is-b { animation-duration: .5s, 3s; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__ring { animation: lig-ring 2.6s ease-out calc(var(--D) + 1.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__link { --dash: 7; animation: lig-fade .4s linear calc(var(--D) + 1.5s) both, lig-flow 1s linear calc(var(--D) + 1.5s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__co { animation: lig-grow-y .5s var(--ease-back) calc(var(--D) + 1.75s + var(--k) * .15s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__go { --dash: 8; animation: lig-fade .4s linear calc(var(--D) + 2s) both, lig-flow .9s linear calc(var(--D) + 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__go.is-b { animation-duration: .4s, 1.2s; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__car { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 2.1s) both, ig-reason-offices-drive 3.2s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__heart { animation: lig-pop .45s var(--ease-back) calc(var(--D) + 2.35s) both, lig-float 3.6s ease-in-out calc(var(--D) + 2.9s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__heart.is-b { animation-duration: .45s, 4.4s; animation-delay: calc(var(--D) + 2.5s), calc(var(--D) + 3.2s); } .page:not([data-anim="static"]) .is-act .ig-reason-offices__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-offices__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-reason-offices__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-reason-window（会社を知る・選ばれる理由01）：人・歯車・書類の3本の流れがひとつの窓口に集まり、お客さまは1か所に相談するだけ ---------- */ .ig-reason-window__stage, .ig-reason-window__sat, .ig-reason-window__gear, .ig-reason-window__client, .ig-reason-window__dot, .ig-reason-window__mini, .ig-reason-window__spark, .ig-reason-window__deco { transform-box: fill-box; transform-origin: center; } .ig-reason-window__orbit { transform-box: view-box; transform-origin: 160px 124px; } .ig-reason-window__booth, .ig-reason-window__staff { transform-box: fill-box; transform-origin: center bottom; } .ig-reason-window__ground, .ig-reason-window__desk { transform-box: fill-box; transform-origin: center; } .ig-reason-window__say { transform-box: fill-box; transform-origin: 10% 100%; } .ig-reason-window__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-reason-window__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-reason-window__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-window__ground { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-window__booth { animation: lig-grow-y .6s var(--ease-out) calc(var(--D) + .35s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-window__desk { animation: lig-grow-x .45s var(--ease-out) calc(var(--D) + .6s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-window__staff { animation: lig-up .5s var(--ease-back) calc(var(--D) + .8s) both, lig-bob-s 3.2s ease-in-out calc(var(--D) + 3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-window__sat { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1s + var(--k) * .15s) both, lig-bob 2.8s ease-in-out calc(var(--D) + 2s + var(--k) * .5s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-window__gear { animation: lig-spin 6s linear calc(var(--D) + 1.5s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-window__link { --dash: 8; animation: lig-fade .4s linear calc(var(--D) + 1.4s) both, lig-flow .9s linear calc(var(--D) + 1.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-window__client { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1.7s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-window__call { --dash: 8; animation: lig-fade .4s linear calc(var(--D) + 1.9s) both, lig-flow 1.3s linear calc(var(--D) + 1.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-reason-window__say { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 2.05s) both; } .page:not([data-anim="static"]) .is-act .ig-reason-window__dot { animation: lig-pop .3s var(--ease-back) calc(var(--D) + 2.3s + var(--k) * .1s) both, lig-bob-s 1.2s ease-in-out calc(var(--D) + 3s + var(--k) * .2s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-window__mini { animation: lig-pop .45s var(--ease-back) calc(var(--D) + 2.45s) both, lig-float 3.6s ease-in-out calc(var(--D) + 2.9s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-window__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-reason-window__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-reason-window__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2s + var(--k) * .9s) infinite; } } /* ---------- ig-training-cert（研修とキャリア・柱03「資格と学び」）：講座を選ぶ一覧＋ノートPCで講座が再生＋教材の本が積み上がる＋合格証に印が押され、本の上にメダル ---------- */ .ig-training-cert__stage, .ig-training-cert__list, .ig-training-cert__play, .ig-training-cert__paper, .ig-training-cert__seal, .ig-training-cert__star, .ig-training-cert__spark, .ig-training-cert__deco { transform-box: fill-box; transform-origin: center; } .ig-training-cert__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-training-cert__pc, .ig-training-cert__book, .ig-training-cert__medal { transform-box: fill-box; transform-origin: center bottom; } .ig-training-cert__ground, .ig-training-cert__seek, .ig-training-cert__line { transform-box: fill-box; transform-origin: left center; } .ig-training-cert__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* 講座の再生バー：はじめから終わりまで進み、次の講座でまた最初から */ @keyframes ig-training-cert-seek { 0% { transform: scaleX(.1); opacity: 1; } 90% { transform: scaleX(1.63); opacity: 1; } 100% { transform: scaleX(1.63); opacity: 0; } } /* 講座の一覧：選ぶ行が中→下→上と移って、真ん中に戻る（既定の位置＝真ん中から始める） */ @keyframes ig-training-cert-pick { 0%, 22% { transform: translateY(0); } 30%, 55% { transform: translateY(11px); } 63%, 88% { transform: translateY(-11px); } 96%, 100% { transform: translateY(0); } } /* メダルが本の上で小さく揺れる */ @keyframes ig-training-cert-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(4deg); } 75% { transform: rotate(-4deg); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-training-cert__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-training-cert__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-cert__ground { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-training-cert__pc { animation: lig-grow-y .55s var(--ease-out) calc(var(--D) + .4s) both; } .page:not([data-anim="static"]) .is-act .ig-training-cert__list { animation: lig-pop .5s var(--ease-back) calc(var(--D) + .7s) both, lig-bob-s 3s ease-in-out calc(var(--D) + 3.4s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-cert__pick { animation: ig-training-cert-pick 6s ease-in-out calc(var(--D) + 1.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-cert__play { animation: lig-pop .5s var(--ease-back) calc(var(--D) + .85s) both, lig-pulse 2.6s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-cert__seek { animation: lig-grow-x .7s var(--ease-out) calc(var(--D) + 1s) both, ig-training-cert-seek 7s linear calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-cert__book { animation: lig-down .5s var(--ease-back) calc(var(--D) + 1.05s + var(--k) * .2s) both; } .page:not([data-anim="static"]) .is-act .ig-training-cert__paper { animation: lig-down .6s var(--ease-back) calc(var(--D) + 1.55s) both, lig-bob 3.4s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-cert__line { animation: lig-grow-x .35s var(--ease-out) calc(var(--D) + 1.85s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-training-cert__seal { animation: lig-pop .45s var(--ease-back) calc(var(--D) + 2.15s) both; } .page:not([data-anim="static"]) .is-act .ig-training-cert__medal { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 2.3s) both, ig-training-cert-sway 4.4s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-cert__star { animation: lig-pulse 2.2s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-cert__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-cert__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-training-cert__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-training-mentor（研修とキャリア・柱02「メンターとOJT」）：先輩と新人が肩を並べて1on1のシートを持つ＋相談→アドバイスの吹き出しが交互に出てチェックがつく＋月1回の1on1の印が灯る ---------- */ .ig-training-mentor__stage, .ig-training-mentor__strip, .ig-training-mentor__mark, .ig-training-mentor__ring, .ig-training-mentor__board, .ig-training-mentor__check, .ig-training-mentor__dot, .ig-training-mentor__bulb, .ig-training-mentor__heart, .ig-training-mentor__spark, .ig-training-mentor__deco { transform-box: fill-box; transform-origin: center; } .ig-training-mentor__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-training-mentor__senior, .ig-training-mentor__junior { transform-box: fill-box; transform-origin: center bottom; } .ig-training-mentor__say { transform-box: fill-box; transform-origin: 7% 100%; } .ig-training-mentor__spark, .ig-training-mentor__ring { opacity: 0; } /* きらめきと印の波紋は動きのあるときだけ */ /* 吹き出しが交互に話す（相談→2秒後にアドバイス） */ @keyframes ig-training-mentor-talk { 0%, 36%, 100% { transform: scale(1); } 14% { transform: scale(1.08); } } /* 月の印から波紋が1回広がる（6枚を1秒ずつずらして、6秒で1巡） */ @keyframes ig-training-mentor-ring { 0% { transform: scale(.8); opacity: 0; } 4% { opacity: .9; } 28%, 100% { transform: scale(2); opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-training-mentor__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__strip { animation: lig-grow-x .55s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__senior { animation: lig-up .55s var(--ease-out) calc(var(--D) + .55s) both, lig-bob-s 3.2s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__junior { animation: lig-up .55s var(--ease-out) calc(var(--D) + .7s) both, lig-nod 3.6s ease-in-out calc(var(--D) + 2.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__board { animation: lig-pop-in .5s var(--ease-back) calc(var(--D) + .95s) both, lig-bob-s 2.8s ease-in-out calc(var(--D) + 3.2s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__check { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.85s + var(--k) * .16s) both; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__say.is-ask { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 1.25s) both, ig-training-mentor-talk 4s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__say.is-tip { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 1.6s) both, ig-training-mentor-talk 4s ease-in-out calc(var(--D) + 4.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__dot { animation: lig-blink 1.8s ease-in-out calc(var(--D) + 2.4s + var(--k) * .3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__bulb { animation: lig-pulse 2s ease-in-out calc(var(--D) + 4.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__heart { animation: lig-pop .45s var(--ease-back) calc(var(--D) + 2.2s) both, lig-float 3.6s ease-in-out calc(var(--D) + 2.5s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__mark { animation: lig-pop .35s var(--ease-back) calc(var(--D) + 1.1s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__ring { animation: ig-training-mentor-ring 6s ease-out calc(var(--D) + 2.6s + var(--k) * 1s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-mentor__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-training-mentor__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-training-onboard（研修とキャリア・柱01「入社研修」）：スクリーンが下りて3つの事業が順に映る＋新人3人＋3か月のカレンダーが埋まって修了のチェック ---------- */ .ig-training-onboard__stage, .ig-training-onboard__icon, .ig-training-onboard__cal, .ig-training-onboard__cell, .ig-training-onboard__done, .ig-training-onboard__spark, .ig-training-onboard__deco, .ig-training-onboard__rod { transform-box: fill-box; transform-origin: center; } .ig-training-onboard__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-training-onboard__screen { transform-box: fill-box; transform-origin: center top; } .ig-training-onboard__hire { transform-box: fill-box; transform-origin: center bottom; } .ig-training-onboard__ground, .ig-training-onboard__bar { transform-box: fill-box; transform-origin: left center; } .ig-training-onboard__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* スクリーンに映る3つの事業を、左から順に1つずつ大きく見せる（3.6秒で1巡） */ @keyframes ig-training-onboard-show { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(1.16); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-training-onboard__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__ground { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__rod { animation: lig-grow-x .45s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__screen { animation: lig-grow-y .6s var(--ease-out) calc(var(--D) + .55s) both; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__hire { animation: lig-up .5s var(--ease-out) calc(var(--D) + .7s + var(--k) * .1s) both; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__hire.is-b { animation: lig-up .5s var(--ease-out) calc(var(--D) + .7s + var(--k) * .1s) both, lig-nod 3.8s ease-in-out calc(var(--D) + 2.8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__hire.is-c { animation: lig-up .5s var(--ease-out) calc(var(--D) + .7s + var(--k) * .1s) both, lig-bob-s 2.6s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__icon { animation: lig-pop .5s var(--ease-back) calc(var(--D) + 1.05s + var(--k) * .2s) both, ig-training-onboard-show 3.6s ease-in-out calc(var(--D) + 2.6s + var(--k) * 1.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__bar { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + 1.2s + var(--k) * .3s) both; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__bar.is-now { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + 1.2s + var(--k) * .3s) both, lig-blink 3s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__cal { animation: lig-down .55s var(--ease-back) calc(var(--D) + .9s) both, lig-bob-s 3.4s ease-in-out calc(var(--D) + 3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__cell { animation: lig-pop .3s var(--ease-back) calc(var(--D) + 1.3s + var(--k) * .065s) both; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__done { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 2.25s) both, lig-pulse 3s ease-in-out calc(var(--D) + 3.1s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-onboard__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-training-onboard__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-training-years（研修とキャリア・入社後3年間）：くねった道を人が進み、1年目→2年目→3年目の旗が順に灯る＋頂上で後輩が隣に現れ、教える側になる ---------- */ .ig-training-years__halo, .ig-training-years__stage, .ig-training-years__start, .ig-training-years__lit, .ig-training-years__bulb, .ig-training-years__spark, .ig-training-years__deco { transform-box: fill-box; transform-origin: center; } .ig-training-years__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-training-years__flag, .ig-training-years__me, .ig-training-years__junior { transform-box: fill-box; transform-origin: center bottom; } .ig-training-years__top { transform-box: fill-box; transform-origin: left center; } .ig-training-years__cloth { transform-box: fill-box; transform-origin: right center; } /* 頂上の旗は左向き：竿の側（右）を軸になびく */ .ig-training-years__say { transform-box: fill-box; transform-origin: 10% 100%; } .ig-training-years__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* 道を進む：スタート→旗1（1年目）→旗2（2年目）→頂上（3年目）。区切りごとに小さく跳ねて、少し立ち止まる */ @keyframes ig-training-years-walk { 0% { transform: translate(-82px, 98px); opacity: 0; } 8% { opacity: 1; } 12% { transform: translate(-82px, 98px); } 23% { transform: translate(-29px, 79px); } 34% { transform: translate(24px, 76px); } 42% { transform: translate(24px, 76px); } 53% { transform: translate(-17px, 52px); } 64% { transform: translate(-58px, 44px); } 72% { transform: translate(-58px, 44px); } 83% { transform: translate(-32px, 14px); } 94%, 100% { transform: translate(0, 0); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-training-years__halo { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__stage { animation: lig-pop .7s var(--ease-back) calc(var(--D) + .06s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-years__road { --len: 340; stroke-dasharray: 340; animation: lig-draw 1s var(--ease-out) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__lane { --dash: 10; animation: lig-fade .4s linear calc(var(--D) + 1.1s) both, lig-flow 1s linear calc(var(--D) + 1.1s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-years__start { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__top { animation: lig-grow-x .45s var(--ease-out) calc(var(--D) + .9s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__flag { animation: lig-grow-y .45s var(--ease-back) calc(var(--D) + .55s + var(--k) * .15s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__lit { animation: lig-pop-in .45s var(--ease-back) calc(var(--D) + 1.2s + var(--k) * .55s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__cloth { animation: lig-wave 2.4s ease-in-out calc(var(--D) + 3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-years__walk { animation: ig-training-years-walk 1.8s ease-in-out calc(var(--D) + .6s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__me { animation: lig-bob-s 2.6s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-years__junior { animation: lig-right .55s var(--ease-out) calc(var(--D) + 2.4s) both, lig-nod 3.6s ease-in-out calc(var(--D) + 3.4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-years__say { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 2.65s) both; } .page:not([data-anim="static"]) .is-act .ig-training-years__bulb { animation: lig-pulse 2.6s ease-in-out calc(var(--D) + 3.3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training-years__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training-years__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-training-years__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.4s + var(--k) * .9s) infinite; } } /* ---------- ig-training（研修制度）：3段の階段を新人がのぼる＋本→先輩の吹き出し→資格のメダルが順に出る ---------- */ .ig-training__stage, .ig-training__sat, .ig-training__dot, .ig-training__star, .ig-training__spark, .ig-training__deco { transform-box: fill-box; transform-origin: center; } .ig-training__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-training__step, .ig-training__me, .ig-training__mentor { transform-box: fill-box; transform-origin: center bottom; } .ig-training__ground { transform-box: fill-box; transform-origin: left center; } .ig-training__talk { transform-box: fill-box; transform-origin: 5% 100%; } .ig-training__medal { transform-box: fill-box; transform-origin: center top; } .ig-training__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* 1段目に現れて、2段目・3段目へ跳ねながらのぼる（段は 48px 右・28px 上） */ @keyframes ig-training-climb { 0% { transform: translate(-96px, 56px); opacity: 0; } 10% { opacity: 1; } 30% { transform: translate(-96px, 56px); } 42% { transform: translate(-72px, 20px); } 54% { transform: translate(-48px, 28px); } 72% { transform: translate(-48px, 28px); } 84% { transform: translate(-24px, -8px); } 100% { transform: translate(0, 0); opacity: 1; } } @keyframes ig-training-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-training__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-training__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-training__ground { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-training__step { animation: lig-grow-y .5s var(--ease-out) calc(var(--D) + .45s + var(--k) * .42s) both; } .page:not([data-anim="static"]) .is-act .ig-training__climb { animation: ig-training-climb 1.6s ease-in-out calc(var(--D) + .8s) both; } .page:not([data-anim="static"]) .is-act .ig-training__me { animation: lig-bob-s 2.4s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training__sat { animation: lig-pop .55s var(--ease-back) calc(var(--D) + .95s) both, lig-bob 3s ease-in-out calc(var(--D) + 2.4s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training__mentor { animation: lig-pop-in .45s var(--ease-back) calc(var(--D) + 1.5s) both, lig-nod 3.6s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training__talk { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 1.75s) both; } .page:not([data-anim="static"]) .is-act .ig-training__dot { animation: lig-blink 1.8s ease-in-out calc(var(--D) + 2.4s + var(--k) * .3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training__medal { animation: lig-down .6s var(--ease-back) calc(var(--D) + 2.25s) both, ig-training-sway 4.4s ease-in-out calc(var(--D) + 2.85s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training__star { animation: lig-pulse 2.2s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-training__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-training__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-training__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.4s + var(--k) * .9s) infinite; } } /* ---------- ig-value-combine（会社を知る・ミッション2「組み合わせて解く」）：人・IT・書類のパズルの3ピースが寄ってきて1枚になる＋チェックのバッジ ---------- */ .ig-value-combine__stage, .ig-value-combine__set, .ig-value-combine__piece, .ig-value-combine__badge, .ig-value-combine__burst, .ig-value-combine__spark, .ig-value-combine__deco { transform-box: fill-box; transform-origin: center; } .ig-value-combine__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-value-combine__code { transform-box: fill-box; transform-origin: left center; } .ig-value-combine__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* 3ピースがそれぞれの方向から寄ってくる（人は左から、IT は右上から、書類は右下から） */ @keyframes ig-value-combine-a { from { transform: translate(-34px, 8px) rotate(-10deg); opacity: 0; } 60% { opacity: 1; } to { transform: translate(0, 0) rotate(0deg); opacity: 1; } } @keyframes ig-value-combine-b { from { transform: translate(30px, -30px) rotate(12deg); opacity: 0; } 60% { opacity: 1; } to { transform: translate(0, 0) rotate(0deg); opacity: 1; } } @keyframes ig-value-combine-c { from { transform: translate(30px, 28px) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } to { transform: translate(0, 0) rotate(0deg); opacity: 1; } } /* はまった瞬間に1枚が小さく弾む */ @keyframes ig-value-combine-snap { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.05); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-value-combine__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-value-combine__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-combine__slot { --dash: 9; animation: lig-fade .4s linear calc(var(--D) + .4s) both, lig-flow 1.2s linear calc(var(--D) + .4s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-combine__piece.is-a { animation: ig-value-combine-a .7s var(--ease-out) calc(var(--D) + .8s) both; } .page:not([data-anim="static"]) .is-act .ig-value-combine__piece.is-b { animation: ig-value-combine-b .7s var(--ease-out) calc(var(--D) + 1.05s) both; } .page:not([data-anim="static"]) .is-act .ig-value-combine__piece.is-c { animation: ig-value-combine-c .7s var(--ease-out) calc(var(--D) + 1.3s) both; } .page:not([data-anim="static"]) .is-act .ig-value-combine__set { animation: ig-value-combine-snap .4s ease-out calc(var(--D) + 2s) both, lig-bob-s 3s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-combine__code { animation: lig-blink 2.8s ease-in-out calc(var(--D) + 2.8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-combine__code.is-b { animation-duration: 3.4s; animation-delay: calc(var(--D) + 3.6s); } .page:not([data-anim="static"]) .is-act .ig-value-combine__burst { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 2.05s + var(--k) * .1s) both, lig-blink 2.6s ease-in-out calc(var(--D) + 2.8s + var(--k) * .9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-combine__badge { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 2.25s) both, lig-pulse 3s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-combine__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-combine__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-value-combine__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-value-listen（会社を知る・ミッション1「最初に聞く」）：お客さまの吹き出しが次々に出る＋音の波＋うなずく聞く人＋ひらめきの電球 ---------- */ .ig-value-listen__stage, .ig-value-listen__idea, .ig-value-listen__spark, .ig-value-listen__deco { transform-box: fill-box; transform-origin: center; } .ig-value-listen__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-value-listen__guest, .ig-value-listen__host { transform-box: fill-box; transform-origin: center bottom; } .ig-value-listen__desk, .ig-value-listen__line { transform-box: fill-box; transform-origin: left center; } .ig-value-listen__wave { transform-box: fill-box; transform-origin: left center; } .ig-value-listen__say { transform-box: fill-box; transform-origin: 7% 100%; } .ig-value-listen__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ /* 音の波：内側から外側へ順に明るくなり、聞く人へ届く */ @keyframes ig-value-listen-wave { 0%, 100% { opacity: .25; } 30%, 45% { opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-value-listen__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-value-listen__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-listen__desk { animation: lig-grow-x .5s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-value-listen__guest { animation: lig-up .55s var(--ease-out) calc(var(--D) + .4s) both, lig-bob-s 2.2s ease-in-out calc(var(--D) + 2.4s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-listen__host { animation: lig-up .55s var(--ease-out) calc(var(--D) + .55s) both, lig-nod 2.6s ease-in-out calc(var(--D) + 1.7s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-listen__say { animation: lig-pop .55s var(--ease-back) calc(var(--D) + .85s + var(--k) * .38s) both, lig-bob 3.2s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-listen__say.is-b { animation-duration: .55s, 3.8s; animation-delay: calc(var(--D) + .85s + var(--k) * .38s), calc(var(--D) + 3.1s); } .page:not([data-anim="static"]) .is-act .ig-value-listen__say.is-c { animation-duration: .55s, 2.6s; animation-delay: calc(var(--D) + .85s + var(--k) * .38s), calc(var(--D) + 2.9s); } .page:not([data-anim="static"]) .is-act .ig-value-listen__line { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + 1.15s + var(--k) * .12s) both; } .page:not([data-anim="static"]) .is-act .ig-value-listen__line.is-b { animation: lig-grow-x .4s var(--ease-out) calc(var(--D) + 1.15s + var(--k) * .12s) both, lig-blink 2.8s ease-in-out calc(var(--D) + 3.2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-listen__wave { animation: lig-fade .3s linear calc(var(--D) + 1.2s + var(--k) * .12s) both, ig-value-listen-wave 1.8s ease-in-out calc(var(--D) + 1.6s + var(--k) * .22s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-listen__idea { animation: lig-pop .55s var(--ease-back) calc(var(--D) + 2.2s) both, lig-pulse 3.4s ease-in-out calc(var(--D) + 3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-listen__ray { animation: lig-blink 2.2s ease-in-out calc(var(--D) + 2.9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-listen__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-listen__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-value-listen__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-value-through（会社を知る・ミッション3「結果まで見届ける」）：つづら折りの道＋納品→定着のチェックポイント＋ゴールの旗＋「助かった」のハート ---------- */ .ig-value-through__stage, .ig-value-through__start, .ig-value-through__cp, .ig-value-through__tick, .ig-value-through__heart, .ig-value-through__spark, .ig-value-through__deco { transform-box: fill-box; transform-origin: center; } .ig-value-through__orbit { transform-box: view-box; transform-origin: 160px 128px; } .ig-value-through__goal, .ig-value-through__leaf { transform-box: fill-box; transform-origin: center bottom; } .ig-value-through__cloth { transform-box: fill-box; transform-origin: left center; } .ig-value-through__thanks { transform-box: fill-box; transform-origin: 10% 100%; } .ig-value-through__road { stroke-dasharray: 380; } .ig-value-through__spark { opacity: 0; } /* きらめきは動きのあるときだけ */ @keyframes ig-value-through-sway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(6deg); } 70% { transform: rotate(-6deg); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-value-through__stage { animation: lig-pop .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-value-through__orbit { animation: lig-fade .6s linear calc(var(--D) + .3s) both, lig-spin 40s linear var(--D) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-through__start { animation: lig-pop .4s var(--ease-back) calc(var(--D) + .4s) both; } /* 道は一定の速さで伸びる（チェックポイントに届くころに、その点が出る） */ .page:not([data-anim="static"]) .is-act .ig-value-through__road { --len: 380; animation: lig-draw 1.4s linear calc(var(--D) + .6s) both; } .page:not([data-anim="static"]) .is-act .ig-value-through__lane { --dash: 10; animation: lig-fade .4s linear calc(var(--D) + 2s) both, lig-flow 1.2s linear calc(var(--D) + 2s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-through__cp { animation: lig-pop .5s var(--ease-back) calc(var(--D) + .75s + var(--k) * .62s) both, lig-bob-s 2.6s ease-in-out calc(var(--D) + 2.4s + var(--k) * .8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-through__tick { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 1.05s + var(--k) * .62s) both; } .page:not([data-anim="static"]) .is-act .ig-value-through__leaf { animation: lig-grow-y .45s var(--ease-back) calc(var(--D) + 1.6s) both, ig-value-through-sway 3.6s ease-in-out calc(var(--D) + 2.6s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-through__goal { animation: lig-grow-y .55s var(--ease-back) calc(var(--D) + 1.95s) both; } .page:not([data-anim="static"]) .is-act .ig-value-through__cloth { animation: lig-wave 1.8s ease-in-out calc(var(--D) + 2.5s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-through__thanks { animation: lig-pop .6s var(--ease-back) calc(var(--D) + 2.25s) both, lig-bob 3.4s ease-in-out calc(var(--D) + 3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-through__heart { animation: lig-beat 1.6s ease-in-out calc(var(--D) + 2.85s) infinite; } .page:not([data-anim="static"]) .is-act .ig-value-through__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-value-through__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-value-through__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } } /* ---------- ig-work（仕事を知る）：くねった道を案件の書類が進み、7つの工程の点が灯る。4職種が順に現れてバトンをつなぎ、ゴールにハートの旗 ---------- */ .ig-work__stage, .ig-work__node, .ig-work__man, .ig-work__heart, .ig-work__ring, .ig-work__spark, .ig-work__deco { transform-box: fill-box; transform-origin: center; } .ig-work__flag { transform-box: fill-box; transform-origin: center bottom; } .ig-work__ask { transform-box: fill-box; transform-origin: 15% 100%; } .ig-work__cloth { transform-box: fill-box; transform-origin: left center; } .ig-work__ring, .ig-work__spark { opacity: 0; } /* 輪ときらめきは動きのあるときだけ */ @keyframes ig-work-go { 0% { transform: translate(-150px, 112px); opacity: 0; } 4% { opacity: 1; } 17.3% { transform: translate(-44px, 112px); } 27.4% { transform: translate(18px, 112px); } 30.9% { transform: translate(37.8px, 103.8px); } 34.5% { transform: translate(46px, 84px); } 38.1% { transform: translate(37.8px, 64.2px); } 41.7% { transform: translate(18px, 56px); } 47.1% { transform: translate(-15px, 56px); } 59.6% { transform: translate(-92px, 56px); } 65.1% { transform: translate(-126px, 56px); } 68.7% { transform: translate(-145.8px, 47.8px); } 72.3% { transform: translate(-154px, 28px); } 75.9% { transform: translate(-145.8px, 8.2px); } 79.5% { transform: translate(-126px, 0); } 88.3% { transform: translate(-72px, 0); } 100% { transform: translate(0, 0); opacity: 1; } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .is-act .ig-work__stage { animation: lig-pop-in .7s var(--ease-back) var(--D) both; } .page:not([data-anim="static"]) .is-act .ig-work__road { --len: 700; animation: lig-draw .8s var(--ease-out) calc(var(--D) + .25s) both; } .page:not([data-anim="static"]) .is-act .ig-work__lane { --dash: 14; animation: lig-fade .4s linear calc(var(--D) + .9s) both, lig-flow 1.6s linear calc(var(--D) + .9s) infinite; } .page:not([data-anim="static"]) .is-act .ig-work__base { animation: lig-fade .4s linear calc(var(--D) + .6s) both; } .page:not([data-anim="static"]) .is-act .ig-work__ask { animation: lig-pop .45s var(--ease-back) calc(var(--D) + .7s) both, lig-bob-s 3s ease-in-out calc(var(--D) + 2.6s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-work__doc { animation: ig-work-go 1.7s linear calc(var(--D) + .9s) both; } .page:not([data-anim="static"]) .is-act .ig-work__bob { animation: lig-bob-s 2.2s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-work__node { animation: lig-pop .35s var(--ease-back) calc(var(--D) + .9s + var(--t)) both, lig-pulse 3.6s ease-in-out calc(var(--D) + 3s + var(--k) * .3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-work__man { animation: lig-pop .45s var(--ease-back) calc(var(--D) + .9s + var(--t)) both; } .page:not([data-anim="static"]) .is-act .ig-work__man.is-bob { animation: lig-pop .45s var(--ease-back) calc(var(--D) + .9s + var(--t)) both, lig-bob-s 2.6s ease-in-out calc(var(--D) + 2.8s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-work__man.is-bob.is-b { animation-duration: .45s, 3.3s; animation-delay: calc(var(--D) + .9s + var(--t)), calc(var(--D) + 3.4s); } .page:not([data-anim="static"]) .is-act .ig-work__flag { animation: lig-grow-y .45s var(--ease-back) calc(var(--D) + 2.5s) both; } .page:not([data-anim="static"]) .is-act .ig-work__cloth { animation: lig-wave 2.2s ease-in-out calc(var(--D) + 3s) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-work__heart { animation: lig-pop .4s var(--ease-back) calc(var(--D) + 2.75s) both, lig-beat 1.8s ease-in-out calc(var(--D) + 3.3s) infinite; } .page:not([data-anim="static"]) .is-act .ig-work__ring { animation: lig-ring 2.8s ease-out calc(var(--D) + 2.8s) infinite; } .page:not([data-anim="static"]) .is-act .ig-work__deco { animation: lig-float 4.6s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .is-act .ig-work__deco.is-b { animation-duration: 5.8s; animation-delay: calc(var(--D) + .8s); } .page:not([data-anim="static"]) .is-act .ig-work__spark { animation: lig-twinkle 2.6s ease-in-out calc(var(--D) + 2.2s + var(--k) * .9s) infinite; } }