/* ========================================================================== アニメーション一式　── careers.kk-ems.jp の作りを、この配色で入れたもの 2026-08-06 riho さん「D（全部）」 出典 _reference/ems-anim/README.md ＋ demo/（2026-08-06 実測） ★GSAP も Lottie も使いません。CSS ＋ 素のJavaScript だけです。 入れたもの 1 背景の粒 スクロールした瞬間だけ動いて、止まると戻る 2 セクション切り替え 青いセクションの真ん中に来ると、後ろが濃紺＋ぼかしになる 3 スプラッシュ 初回アクセスのときだけ 4 コピーのワイプ ファーストビューの見出しが左から開く 5 画像の切り替え 複数枚あるところで6秒ごとに入れ替え 6 無限スライダー 取引先ロゴの帯。停止／再生ボタンつき 7 モーション設定 動きを減らす設定を見て一括で止める＋ON/OFFボタン ========================================================================== */ /* ★これが最重要。@property で登録しないと CSS変数に transition が効きません */ @property --y-pos { syntax:""; inherits:true; initial-value:0; } @property --delayed-y-pos { syntax:""; inherits:true; initial-value:0; } :root{ --mk-duration-base:1s; /* 粒の色。★2026-08-07 riho さん決定：B「薄い青だけ」 濃い青（#017cc8 / #007cc8 / #0047a0）は使わない。 光のようににじませて、文字の読みやすさを優先する。 ★A（トビラの青5色）に戻す場合は、下のコメントの値に差し替えるだけ。 A: p1:#017cc8 p2:#007cc8 p3:#0047a0 p4:#7ec5ea p5:#cfe6f5 */ /* ★2026-08-07 riho さん「青のセクションの下で丸が透けて見えないので、 最初の色に戻して」→ A（トビラの青5色）に戻した。 薄い青だけのB案は sites/_shared 内のこのコメントに残す： B: p1:#7ec5ea p2:#a8d5ef p3:#e8f3fb p4:#cfe6f5 p5:#dceefa */ --mk-p1:#017cc8; --mk-p2:#007cc8; --mk-p3:#0047a0; --mk-p4:#7ec5ea; --mk-p5:#cfe6f5; } html{background:#fff;} /* ★背景の粒を見せるために、上に白い地を敷いている部品の背景を外す。 （粒は z-index:-1 で本文の後ろにいるので、手前が白いと隠れてしまう） カード・青い帯・グレーの帯は そのまま。そこは粒が隠れてよい場所。 */ /* ★白は html（一番下の地）だけに残す。 body や セクションの入れものが白いと、粒（z-index:-1）が塗りつぶされてしまう。 実測：body・.s-laboro・.topblock の3つが白を持っていた。 */ body{background:transparent;} .s-laboro{background:transparent;} .s-laboro .topblock{background:transparent;} .mk .mk-pagehead{background:transparent;} /* ========================================================================== 1. 背景の粒 ========================================================================== */ /* ★position:fixed にしている（sticky ではない）。 横スクロールを止めるために html,body に overflow-x:hidden を入れており、 これがあると position:sticky が効かず、粒がスクロールで流れて消えてしまう。 実測：スクロール3000pxで粒の帯が画面の外（y=-2805）に出ていた。 */ .mk-bg{ position:fixed; top:0; left:0; width:100%; z-index:-1; isolation:isolate; /* 中のぼかしが本文に漏れないように */ height:0; /* 場所を取らない */ pointer-events:none; } .mk-bg__inner{ --_h:calc(100vw * (810 / 1440)); position:absolute; top:calc((100dvh - var(--_h)) / 2); width:100%; height:var(--_h); overflow-x:clip; pointer-events:none; } .mk-obj{ /* スクロールの速度 ＝ いまの位置 と 遅れて追う位置 の差 */ --y-velocity: calc(var(--y-pos) - var(--delayed-y-pos)); position:absolute; width:var(--_w); aspect-ratio:1/1; border-radius:50%; /* ★丸 */ transform-origin:50% 50%; transform:translate3d(0, calc(var(--y-velocity) * -.1px), 0); /* ★--delayed-y-pos だけ遅らせる。6重の入れ子で遅れが積み重なる */ transition:--delayed-y-pos .15s cubic-bezier(.22, 1, .36, 1); } .mk-obj .mk-obj{left:0;width:100%;height:100%;margin:0;} .mk-obj.-last{background-color:var(--_bgc);filter:blur(var(--_blur, 24px));opacity:.85;} /* 16個。★2026-08-07 riho さん指示で ・全部ぼかす（前はぼかし無しが3個あった） ・四角ではなく丸にする ・数を 8個 → 16個 に増やす 大きさ・位置・色・遅れの速さ・ぼかしの強さは全部ずらしてある （揃えると機械的に見えるため）。 */ .mk-obj.-o1{--_w:16.0%; --_bgc:var(--mk-p1); --_blur:32px; left:50%; margin-top:22.4%; margin-left:-34.9%; transition-duration:calc(var(--mk-duration-base)*0.25)} .mk-obj.-o2{--_w:28.8%; --_bgc:var(--mk-p5); --_blur:42px; left:50%; margin-top:8.3%; margin-left:-29.7%; transition-duration:calc(var(--mk-duration-base)*0.375)} .mk-obj.-o3{--_w:14.4%; --_bgc:var(--mk-p3); --_blur:30px; right:50%; margin-top:43.7%; margin-right:-7.0%; transition-duration:calc(var(--mk-duration-base)*0.25)} .mk-obj.-o4{--_w:17.6%; --_bgc:var(--mk-p2); --_blur:35px; right:50%; margin-top:6.9%; margin-right:-16.4%; transition-duration:calc(var(--mk-duration-base)*0.3)} .mk-obj.-o5{--_w:14.4%; --_bgc:var(--mk-p4); --_blur:30px; right:50%; margin-top:15.3%; margin-right:-35.3%; transition-duration:calc(var(--mk-duration-base)*0.35)} .mk-obj.-o6{--_w:19.2%; --_bgc:var(--mk-p2); --_blur:37px; left:50%; margin-top:38.0%; margin-left:-8.1%; transition-duration:calc(var(--mk-duration-base)*0.45)} .mk-obj.-o7{--_w:12.8%; --_bgc:var(--mk-p4); --_blur:27px; left:50%; margin-top:30.5%; margin-left:-43.0%; transition-duration:calc(var(--mk-duration-base)*0.5)} .mk-obj.-o8{--_w:27.2%; --_bgc:var(--mk-p1); --_blur:42px; right:50%; margin-top:29.0%; margin-right:-43.1%; transition-duration:calc(var(--mk-duration-base)*0.55)} .mk-obj.-o9{--_w:11.2%; --_bgc:var(--mk-p3); --_blur:25px; left:50%; margin-top:12.0%; margin-left:-4.0%; transition-duration:calc(var(--mk-duration-base)*0.28)} .mk-obj.-o10{--_w:20.8%; --_bgc:var(--mk-p4); --_blur:37px; left:50%; margin-top:48.0%; margin-left:-22.0%; transition-duration:calc(var(--mk-duration-base)*0.4)} .mk-obj.-o11{--_w:13.6%; --_bgc:var(--mk-p5); --_blur:27px; right:50%; margin-top:35.0%; margin-right:-19.0%; transition-duration:calc(var(--mk-duration-base)*0.33)} .mk-obj.-o12{--_w:24.0%; --_bgc:var(--mk-p2); --_blur:40px; left:50%; margin-top:18.0%; margin-left:-46.0%; transition-duration:calc(var(--mk-duration-base)*0.6)} .mk-obj.-o13{--_w:15.2%; --_bgc:var(--mk-p1); --_blur:32px; right:50%; margin-top:45.0%; margin-right:-31.0%; transition-duration:calc(var(--mk-duration-base)*0.48)} .mk-obj.-o14{--_w:12.0%; --_bgc:var(--mk-p5); --_blur:25px; right:50%; margin-top:25.0%; margin-right:-2.0%; transition-duration:calc(var(--mk-duration-base)*0.38)} .mk-obj.-o15{--_w:18.4%; --_bgc:var(--mk-p3); --_blur:35px; left:50%; margin-top:2.0%; margin-left:-25.0%; transition-duration:calc(var(--mk-duration-base)*0.52)} .mk-obj.-o16{--_w:22.4%; --_bgc:var(--mk-p4); --_blur:40px; right:50%; margin-top:41.0%; margin-right:-38.0%; transition-duration:calc(var(--mk-duration-base)*0.42)} /* ========================================================================== 2. セクション切り替え 青いセクションが画面の真ん中に来ると、後ろが濃紺＋ぼかしになる。 ★要素を出し入れせず、画面いっぱいの膜2枚の色とぼかしを変えているだけ。 ========================================================================== */ .mk-bg::before, .mk-bg::after{ content:""; position:fixed; top:0; left:0; z-index:2; width:100%; height:100dvh; background-color:transparent; transform:translateZ(0); pointer-events:none; transition:backdrop-filter .5s, background-color .5s; } /* ★2026-08-07 青いセクション自体を半透明にしたので、 膜まで濃紺にすると二重になって、背の高い service だけ極端に濃くなっていた （実測 service 19,78,142 / contact 76,134,195）。 青いセクションの合図は "blur" だけにして、濃紺は使っていない。 */ .mk-bg.-bg-blur::after{backdrop-filter:blur(20px);} .mk-bg.-bg-dark::before{background-color:color-mix(in srgb, #253a4f 80%, transparent);} .mk-bg.-bg-blur:not(.-bg-dark)::before{background-color:color-mix(in srgb, #fff 40%, transparent);} /* ========================================================================== 3. スプラッシュ（初回アクセスのときだけ） ★2026-08-06 直したこと ・本文を1秒待ってから出す作りにしていたため、 スプラッシュが消えたあとも本文が見えない時間が続いていた（実測4.2秒）。 → 本文は最初から見えるようにして、スプラッシュが上から退くだけにした。 ・JavaScript が動かなかった場合にスプラッシュが出たまま詰まらないよう、 CSS だけでも必ず消えるようにした（保険）。 ・長さを 2.2秒 → 1.4秒 に短くした。 ========================================================================== */ .mk-splash{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#0047a0 0%,#007cc8 100%); /* ★保険：JSが動かなくても、これだけで必ず消える */ animation:mk-splash-out .6s ease 1.4s forwards; } @keyframes mk-splash-out{ to{opacity:0;visibility:hidden;pointer-events:none;} } .mk-splash__copy{ color:#fff; font-size:clamp(24px,4vw,48px); font-weight:700; letter-spacing:.1em; } body.-splash-playing{overflow:hidden;} /* JSが動いたときは、こちらで即座に閉じる */ body.-end-splash .mk-splash{opacity:0;visibility:hidden;pointer-events:none; transition:opacity .6s ease, visibility .6s;} /* 2回目以降は最初から出さない */ body.-no-splash .mk-splash{display:none;animation:none;} /* ★本文は常に見えている（隠さない） */ /* ========================================================================== 4. コピーのワイプ（左から開く） ========================================================================== */ @keyframes mk-copy-out{0%{opacity:1}to{opacity:0}} @keyframes mk-copy-in{ 0% {opacity:1;clip-path:polygon(0 0, 0 0, 0 100%, 0 100%)} to {opacity:1;clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%)} } .mk-wipe{animation:mk-copy-out .8s ease forwards, mk-copy-in 1s ease forwards 1s;} /* ========================================================================== 5. 画像の切り替え（複数枚あるところ） ========================================================================== */ .mk-xfade{position:relative;} .mk-xfade > img{transition:opacity 1s ease;} .mk-xfade > img:not(.-active){position:absolute;inset:0;opacity:0;} .mk-xfade > img.-active{opacity:1;} /* ========================================================================== 6. 無限スライダー（取引先ロゴ）＋ 停止／再生ボタン ========================================================================== */ .mk .mk-logos__row{animation-duration:32s;animation-timing-function:linear;} .mk .mk-logos.-paused .mk-logos__row{animation-play-state:paused;} .mk .mk-logos{position:relative;} .mk .mk-logos__btn{ position:absolute; right:20px; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:1px solid rgba(37,58,79,.06); background:#fff; color:#017cc8; font-size:12px; line-height:1; cursor:pointer; } /* ========================================================================== 7. 動きを減らす設定 ／ モーションOFFボタン ★--mk-duration-base を 0s にすると、全部の動きが一括で止まります。 ========================================================================== */ @media (prefers-reduced-motion: reduce){ :root{--mk-duration-base:0s;} } html.-reduced-motion{--mk-duration-base:0s;} html.-reduced-motion .mk-obj{transform:none;} html.-reduced-motion .mk-wipe{animation:none;} html.-reduced-motion .mk-logos__row{animation:none;} html.-reduced-motion .mk-bg::before, html.-reduced-motion .mk-bg::after{transition:none;} html.-reduced-motion .mk-splash{display:none;animation:none;} /* 画面の隅に置く小さなボタン */ .mk-motion-btn{ position:fixed; left:16px; bottom:16px; z-index:900; height:34px; padding:0 14px; border-radius:9999px; border:1px solid rgba(37,58,79,.06); background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#017cc8; font-size:12px; font-weight:500; cursor:pointer; } @media (max-width:900px){ .mk-motion-btn{left:12px;bottom:12px;height:30px;padding:0 12px;} } /* ========================================================================== 8. スクロールで出てくる（ふわっと上に上がりながら現れる） 画面に入ったら .is-in が付く。出たあとは戻さない（1回だけ）。 ========================================================================== */ .mk-reveal{ opacity:0; transform:translate3d(0, 24px, 0); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .mk-reveal.is-in{opacity:1;transform:none;} /* 並んでいるものは少しずつ遅らせる（同時に出ると機械的に見えるため） */ .mk-reveal.-d1{transition-delay:.06s} .mk-reveal.-d2{transition-delay:.12s} .mk-reveal.-d3{transition-delay:.18s} .mk-reveal.-d4{transition-delay:.24s} .mk-reveal.-d5{transition-delay:.30s} /* 動きを止めているときは、最初から出したままにする */ html.-reduced-motion .mk-reveal{opacity:1;transform:none;transition:none;} /* JSが動かなかった場合の保険（3秒後に必ず出す） */ @keyframes mk-reveal-safe{to{opacity:1;transform:none;}} .mk-reveal{animation:mk-reveal-safe .01s linear 3s forwards;} .mk-reveal.is-in{animation:none;}