/* ========================================================= KANAMOTO HOLDINGS 採用サイト — motion.css（トップ v1.2・2026-10-28） 動きの言語「重なる」を、写真の札から「図形と吹き出し」に広げる。 M11 流れる英字（Ysabeau）／M12 背景の図形と吹き出し／M14 FV の飾りの吹き出しが漂う／M15 動く図解（環境を知る）／M16 流れる写真の帯（エントリー） すべて transform・opacity だけで動かす。動きを減らす設定と ?static=1 では最終状態で止める。 ========================================================= */ :root { --shape-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 110'%3E%3Cpath d='M30 0H90A30 30 0 0 1 120 30V62A30 30 0 0 1 90 92H44C36 100 22 107 8 110C15 102 18 96 19 89A30 30 0 0 1 0 62V30A30 30 0 0 1 30 0Z'/%3E%3C/svg%3E"); } /* --------------------------------------------------------- M11 流れる英字：Ysabeau の大文字を横に流す。スクロールすると速くなり、上に戻ると逆向きに流れる（motion.js） --------------------------------------------------------- */ .marquee { position: relative; margin: clamp(56px, 8vw, 112px) calc(var(--side) * -1) 0; overflow: hidden; font-size: clamp(40px, 7.2vw, 132px); /* 10/29 少し小さく（168 → 132px） */ pointer-events: none; user-select: none; } .marquee__track { display: flex; width: max-content; } .marquee__group { display: flex; flex-shrink: 0; align-items: center; } .marquee__word { padding: 0 .36em 0 .5em; font-family: var(--font-deco); font-weight: 500; line-height: 1.12; letter-spacing: .16em; white-space: nowrap; color: var(--marquee-ink); } .marquee__sep { /* 区切りは小さな吹き出し */ flex-shrink: 0; width: .32em; aspect-ratio: 120 / 110; background: var(--color-brand-mid); -webkit-mask: var(--shape-bubble) center / 100% 100% no-repeat; mask: var(--shape-bubble) center / 100% 100% no-repeat; } .marquee__group:nth-child(even) .marquee__sep { background: var(--color-brand-soft); transform: scaleX(-1); } .statement--marquee { padding-bottom: clamp(40px, 6vw, 88px); } /* --------------------------------------------------------- M12 背景の図形と吹き出し：セクションの地と中身のあいだに置く（中身より奥）。 見えると1枚ずつ重なって出る → ゆっくり漂う → スクロールで奥行き（--sp：速さの差。motion.js が --p を渡す） 淡い色は乗算で重ねるので、重なったところだけ少し濃くなる --------------------------------------------------------- */ .has-bgs { position: relative; isolation: isolate; } .bgs { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; } .bgs__box { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100% - var(--side) * 2, var(--container)); translate: -50% 0; } .bgs__s { --bd: calc(.12s + var(--i, 0) * .12s); position: absolute; display: block; aspect-ratio: var(--ar, 1); rotate: var(--rot, 0deg); translate: 0 calc(var(--p, 0) * var(--sp, 0) * 1px); mix-blend-mode: var(--blend, multiply); } .bgs__s::before { content: ""; position: absolute; inset: 0; background: var(--c, var(--color-layer)); } .is-circle::before { border-radius: 50%; } .is-half { --ar: 2 / 1; } .is-half::before { border-radius: 999px 999px 0 0; } /* 上が丸い半円（rotate で向きを変える） */ .is-quarter::before { border-radius: 100% 0 0 0; } .is-rsq::before { border-radius: 24%; } .is-bubble { --ar: 120 / 110; } .is-bubble::before { -webkit-mask: var(--shape-bubble) center / 100% 100% no-repeat; mask: var(--shape-bubble) center / 100% 100% no-repeat; } .is-bubble.is-flip::before { scale: -1 1; } .is-ring::before { background: none; border: var(--bw, 2px) solid var(--c, var(--color-line)); border-radius: 50%; } .is-dots::before { background: radial-gradient(circle, var(--c, var(--color-brand-soft)) 0 2.5px, transparent 3px) 0 0 / 16px 16px; } @keyframes bgs-float { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--fx, 0px), var(--fy, -14px)) rotate(var(--fr, 5deg)); } } @media (scripting: enabled) and (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .bgs:not(.is-in) .bgs__s { opacity: 0; scale: .2; rotate: calc(var(--rot, 0deg) - 40deg); } .page:not([data-anim="static"]) .bgs__s { transition: opacity .45s linear var(--bd), scale 1s var(--ease-back) var(--bd), rotate 1.3s var(--ease-out) var(--bd); } .page:not([data-anim="static"]) .bgs__s::before { animation: bgs-float var(--fd, 9s) ease-in-out var(--fo, 0s) infinite alternate; animation-play-state: paused; } .page:not([data-anim="static"]) .bgs.is-vis .bgs__s::before { animation-play-state: running; } } /* ---- 2 メッセージ：吹き出しと写真のまわり（白地）。10/29 大きな円・半円・右上の輪を外した ---- */ .bgs--message .s3 { left: 39.4%; top: 82px; width: 4.8%; --c: var(--color-brand-mid); --blend: normal; --sp: -90; --i: 3; --fd: 4.6s; --fy: -9px; --fr: -6deg; } .bgs--message .s5 { left: -5%; top: 470px; width: 8%; --c: var(--color-brand-soft); --blend: normal; --sp: -30; --i: 4; --fd: 10s; --fy: -6px; --fr: 0deg; } .bgs--message .s6 { left: 74%; top: 640px; width: 7%; --c: var(--color-tint); --sp: 70; --i: 5; --fd: 7s; --fy: -12px; --fr: 8deg; } /* ---- 3 会社を知る：白い大パネルの後ろから、図形と吹き出しがのぞく（淡いオレンジ白の地。10/29 右の半円を外し、左下は線の円に） ---- */ .bgs--about .s1 { left: 5%; top: 30px; width: 9%; --c: var(--color-layer); --sp: -40; --i: 0; --fd: 6s; --fy: -10px; --fr: -5deg; } .bgs--about .s2 { left: 12%; top: 58px; width: 3.6%; --c: var(--color-brand-mid); --blend: normal; --sp: -70; --i: 1; --fd: 4.4s; --fy: -7px; } .bgs--about .s3 { left: -8%; top: calc(100% - 250px); width: 22%; --c: var(--color-line); --bw: 2px; --sp: 50; --i: 2; --fd: 12s; --fy: -10px; --fx: 6px; --fr: 0deg; } .bgs--about .s5 { left: 90%; top: calc(100% - 150px); width: 12%; --c: var(--color-tint); --sp: 80; --i: 4; --fd: 10s; --fy: -12px; --fr: 0deg; } /* ---- 5 社員を知る：左上に輪、右下に吹き出し（カードには重ねない。10/29 大きな白い円を外した） ---- */ .bgs--people .s3 { left: -8%; top: -64px; width: 16%; --c: var(--color-line); --sp: 40; --i: 1; --fd: 11s; --fy: 10px; --fr: 0deg; } .bgs--people .s4 { left: 86%; top: calc(100% - 112px); width: 7%; --c: var(--color-layer); --sp: -50; --i: 3; --fd: 6.5s; --fy: -10px; --fr: 5deg; } .bgs--people .s5 { left: 92.5%; top: calc(100% - 74px); width: 3.6%; --rot: 0deg; --c: var(--color-tint); --sp: 30; --i: 4; --fd: 8s; --fy: -6px; --fr: -6deg; } /* ---- 7 メディア：オレンジの面の上に、白い図形を透かして重ねる（10/29 左下の大きな円を外し、右上の輪と吹き出しを右端へ） ---- */ .bgs--media .s2 { left: 95%; top: 64px; width: 10%; --c: var(--shape-on-brand-2); --blend: normal; --sp: -80; --i: 2; --fd: 6s; --fy: -10px; --fr: -5deg; } .bgs--media .s3 { left: 88%; top: 20px; width: 17%; --c: var(--shape-on-brand-line); --bw: 1.5px; --blend: normal; --sp: 50; --i: 1; --fd: 12s; --fy: 10px; --fr: 0deg; } .bgs--media .s4 { left: 18%; top: calc(100% - 96px); width: 20%; --c: var(--shape-on-brand); --blend: normal; --sp: 40; --i: 3; --fd: 10s; --fy: -8px; --fr: 0deg; } .bgs--media .s5 { left: 25%; top: calc(100% - 200px); width: 3%; --c: var(--shape-on-brand-2); --blend: normal; --sp: -90; --i: 4; --fd: 5s; --fy: -8px; } /* SP・タブレット：図形を減らし、大きさと位置を組み直す */ @media (max-width: 1023px) { .bgs--message .s3 { left: 86%; top: 52px; width: 9%; } .bgs--message .s5, .bgs--message .s6 { display: none; } .bgs--about .s1 { left: 6%; top: 18px; width: 20%; } .bgs--about .s2 { left: 22%; top: 40px; width: 7%; } .bgs--about .s3 { left: -20%; width: 52%; top: calc(100% - 170px); } .bgs--about .s5 { display: none; } .bgs--people .s3 { display: none; } .bgs--people .s4 { left: 74%; top: calc(100% - 84px); width: 18%; } .bgs--people .s5 { display: none; } .bgs--media .s2 { left: 88%; top: 40px; width: 18%; } .bgs--media .s3 { left: 76%; top: 10px; width: 36%; } .bgs--media .s4, .bgs--media .s5 { display: none; } } /* M13（エントリーの写真に図形が重なる）は 10/29 に M16（流れる写真の帯）へ置き換えて削除 */ /* --------------------------------------------------------- M14 FV の飾りの吹き出しが漂う（登場のあと、4つが別々の速さで上下する） --------------------------------------------------------- */ @keyframes deco-float { from { translate: 0 0; } to { translate: var(--fx, 0px) var(--fy, -12px); } } .deco--1 { --fd: 7.5s; --fy: -16px; --fx: -4px; } .deco--2 { --fd: 5.2s; --fy: -10px; --fx: 4px; } .deco--3 { --fd: 8.6s; --fy: 12px; } .deco--4 { --fd: 4.4s; --fy: -8px; --fx: 3px; } @media (prefers-reduced-motion: no-preference) { .kv[data-anim="play"] .deco { animation: deco-float var(--fd) ease-in-out calc(var(--d, 0s) + 1.2s) infinite alternate both; } } /* --------------------------------------------------------- M15 動く図解（04 環境を知るの数字6つ）：数字のカウントアップと同時に、図が組み上がってから小さく動き続ける。 1 カレンダー：日付のマスが順に出て、休みの日がオレンジに灯る／太陽の光が回る 2 時計：針が回って 18:00 を指す（短針 3時→6時、長針3周）／夕日がゆっくり上下 3 輪：72% まで描かれる／スーツケースが出る／紙飛行機が輪のまわりを回る 4 人：25人が順に出て、残る22人（88%）が波のように跳ねる 5 階段：若葉をつけた人が一段ずつのぼる（くり返し）／旗がはためく 6 ベビーカー：左から転がって戻り、ハートの吹き出しが出る／ハートが脈打つ 動きを減らす設定と ?static=1 では、最初から完成した図を見せる --------------------------------------------------------- */ .ig { display: block; width: 100%; height: auto; overflow: visible; } .f-brand { fill: var(--color-brand); } .f-mid { fill: var(--color-brand-mid); } .f-soft { fill: var(--color-brand-soft); } .f-line { fill: var(--color-line); } .f-layer { fill: var(--color-layer); } .f-tint { fill: var(--color-tint); } .f-white { fill: var(--color-bg); } .s-brand { stroke: var(--color-brand); } .s-mid { stroke: var(--color-brand-mid); } .s-tint { stroke: var(--color-tint); } .ig-cal__d, .ig-donut__case, .ig-ppl__p { transform-box: fill-box; transform-origin: center; } .ig-cal__rays { transform-box: view-box; transform-origin: 130px 24px; } .ig-clock__h, .ig-clock__m { transform-box: view-box; transform-origin: 56px 58px; } .ig-clock__h { transform: rotate(180deg); } /* 完成形：18:00 */ .ig-donut__orbit { transform-box: view-box; transform-origin: 80px 60px; } .ig-stairs__steps { transform-box: fill-box; transform-origin: center bottom; } .ig-stairs__flag { transform-box: fill-box; transform-origin: left center; } .ig-pram__wheel.is-a { transform-box: view-box; transform-origin: 34px 102px; } .ig-pram__wheel.is-b { transform-box: view-box; transform-origin: 68px 102px; } .ig-pram__bubble { transform-box: fill-box; transform-origin: 8% 100%; } .ig-pram__heart { transform-box: fill-box; transform-origin: center; } .env-num { --D: calc(.45s + var(--t, 0) * .15s); } @keyframes ig-pop { from { transform: scale(0); } to { transform: scale(1); } } @keyframes ig-cal-off { from { fill: var(--color-bg); } to { fill: var(--color-brand-mid); } } @keyframes ig-spin { to { transform: rotate(360deg); } } @keyframes ig-hour { from { transform: rotate(90deg); } to { transform: rotate(180deg); } } @keyframes ig-minute { from { transform: rotate(0deg); } to { transform: rotate(1080deg); } } @keyframes ig-rise { from { transform: translateY(30px); } to { transform: translateY(0); } } @keyframes ig-bob { from { transform: translateY(0); } to { transform: translateY(5px); } } @keyframes ig-draw { from { stroke-dashoffset: 72; } to { stroke-dashoffset: 0; } } @keyframes ig-hop { 0%, 16%, 100% { transform: translateY(0); } 8% { transform: translateY(-4px); } } @keyframes ig-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes ig-climb { 0% { transform: translate(0, 0); opacity: 0; } 6% { transform: translate(0, 0); opacity: 1; } 14% { transform: translate(15px, -14px); } 20% { transform: translate(30px, -18px); } 32% { transform: translate(45px, -32px); } 38% { transform: translate(60px, -36px); } 50% { transform: translate(75px, -50px); } 56% { transform: translate(90px, -54px); opacity: 1; } 84% { transform: translate(90px, -54px); opacity: 1; } 94%, 100% { transform: translate(90px, -54px); opacity: 0; } } @keyframes ig-wave { from { transform: skewY(0deg); } to { transform: skewY(-9deg); } } @keyframes ig-roll-in { from { transform: translateX(-60px); } to { transform: translateX(0); } } @keyframes ig-wheel { from { transform: rotate(-420deg); } to { transform: rotate(0deg); } } @keyframes ig-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } } @media (prefers-reduced-motion: no-preference) { .page:not([data-anim="static"]) .env-stack.is-act .ig-cal__d { animation: ig-pop .45s var(--ease-back) calc(var(--D) + var(--k) * .03s) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-cal__d.is-off { animation: ig-pop .45s var(--ease-back) calc(var(--D) + var(--k) * .03s) both, ig-cal-off .4s linear calc(var(--D) + .7s + var(--k) * .03s) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-cal__rays { animation: ig-spin 16s linear var(--D) infinite; } .page:not([data-anim="static"]) .env-stack.is-act .ig-clock__h { animation: ig-hour 2.2s var(--ease-arrow) var(--D) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-clock__m { animation: ig-minute 2.2s var(--ease-arrow) var(--D) both, ig-spin 40s linear calc(var(--D) + 2.2s) infinite; } .page:not([data-anim="static"]) .env-stack.is-act .ig-clock__sun { animation: ig-rise 1.2s var(--ease-out) var(--D) both, ig-bob 4s ease-in-out calc(var(--D) + 1.2s) infinite alternate; } .page:not([data-anim="static"]) .env-stack.is-act .ig-donut__bar { animation: ig-draw 1.5s var(--ease-out) var(--D) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-donut__case { animation: ig-pop .6s var(--ease-back) calc(var(--D) + .3s) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-donut__orbit { animation: ig-spin 12s linear calc(var(--D) + .6s) infinite; } .page:not([data-anim="static"]) .env-stack.is-act .ig-ppl__p { animation: ig-pop .4s var(--ease-back) calc(var(--D) + var(--k) * .035s) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-ppl__p.is-stay { animation: ig-pop .4s var(--ease-back) calc(var(--D) + var(--k) * .035s) both, ig-hop 3.6s ease-in-out calc(var(--D) + 1.4s + var(--k) * .05s) infinite; } .page:not([data-anim="static"]) .env-stack.is-act .ig-stairs__steps { animation: ig-grow .8s var(--ease-out) var(--D) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-stairs__walker { animation: ig-climb 5.2s ease-in-out calc(var(--D) + .6s) infinite; } .page:not([data-anim="static"]) .env-stack.is-act .ig-stairs__flag { animation: ig-wave 1.4s ease-in-out var(--D) infinite alternate; } .page:not([data-anim="static"]) .env-stack.is-act .ig-pram__cart { animation: ig-roll-in 1.4s var(--ease-out) var(--D) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-pram__wheel { animation: ig-wheel 1.4s var(--ease-out) var(--D) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-pram__bubble { animation: ig-pop .6s var(--ease-back) calc(var(--D) + 1.2s) both; } .page:not([data-anim="static"]) .env-stack.is-act .ig-pram__heart { animation: ig-beat 1.6s ease-in-out calc(var(--D) + 1.9s) infinite; } }