/* AIBUILDERZ トップ v8 ─ design/rebrand-20260919/site から wpexport.py で書き出し。ここを直接直さない */ :root{ --frame-top: 58px; --head-top: 58px; --frame-bottom: 50px; --col-x: 152px; /* サイトのカラートンマナ（色と書体.md の「サイト」） */ --c-brand: #096FC8; --c-navy: #1F2D55; --c-text: #111111; --c-text-sub: #2B3442; --c-btn: #111111; /* 黒のグラデーション ─ AI・支援可能・主CTA で共通に使う */ /* 背景と同じ作り方 ─ 大きさの違う明暗を重ねて凸凹にする（鋭い反射は作らない） */ --g-black: radial-gradient(64% 116% at 16% 10%, rgba(74,83,94,.92) 0%, rgba(74,83,94,0) 56%), radial-gradient(52% 96% at 72% 26%, rgba(52,60,70,.85) 0%, rgba(52,60,70,0) 62%), radial-gradient(46% 88% at 40% 62%, rgba(38,45,54,.80) 0%, rgba(38,45,54,0) 66%), radial-gradient(86% 130% at 66% 98%, rgba(3,5,9,.95) 0%, rgba(3,5,9,0) 58%), radial-gradient(74% 118% at 4% 92%, rgba(7,10,14,.90) 0%, rgba(7,10,14,0) 62%), linear-gradient(150deg, #1A1F26 0%, #0D1116 48%, #151A20 100%); --c-btn-ink: #F6F6F6; --f: "Noto Sans JP", system-ui, sans-serif; } /* ═══════════════ 共通の造作 ═══════════════ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:transparent; font-family:"Noto Sans JP", system-ui, sans-serif; color:#111111; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative; } /* 版面を 1586px で組み、画面幅に合わせて縮める */ :root{ --s: calc(100vw / 1586); --sh: 992px; --shero: var(--s); --sp:0; } .sc{position:relative; width:100%; height:calc(var(--sh) * var(--s)); overflow:hidden} .sc + .sc{margin-top:calc(140px * var(--s))} /* 章と章のあいだ。次の章がすぐ来た感じを和らげる */ .sc > .stage{z-index:1} .sc > .stage{ position:absolute; left:50%; top:0; width:1586px; height:var(--sh); transform-origin:top center; transform:translateX(-50%) scale(var(--s)); } /* FVだけは高さも見て、1画面にまるごと収める */ #hero{height:100vh; display:flex; align-items:flex-end; justify-content:center} /* 人物の裁ち落としを画面の下端にそろえる */ #hero > .stage{ position:relative; left:auto; top:auto; flex:0 0 auto; /* 縮ませない。縮小は transform だけで行う */ transform-origin:bottom center; /* 下端を画面の下端にそろえる */ transform:scale(var(--shero)); } /* ── 地：ページ全体で1枚 ── 明るい地（.g-light）と中間のグレーの地（.g-mid）、白の地（.g-white）を出来上がった状態で重ねておき、 章に入ったら上の層の透明度だけを切り替える（html に .tone-mid / .tone-white）。 ぼかした光の塊の色をその都度変えると描き直しが重くなり、切り替えがぎこちなく見えるため。 */ .ground{position:fixed; inset:0; z-index:-6; overflow:hidden; pointer-events:none; background:#F2F3F4} /* 上に重ねる層（濃い・中間・白）は、出し切るまで .6 秒で重ね、消えたあとは visibility で描く対象から外す。 一番下の明るい地は、上の層が出きったら同じく外す（見えない層を描き続けない） */ .ground .g{position:absolute; inset:0; overflow:hidden; opacity:0; visibility:hidden; transition:opacity .6s cubic-bezier(.3,.7,.3,1), visibility 0s linear .6s; will-change:opacity} .ground .g-light{background:#F2F3F4; opacity:1; visibility:visible; transition:visibility 0s} .ground .g-dark{background:#62676E} /* サービスの特徴：白い文字がはっきり読める濃さ */ .ground .g-mid{background:#C3C7CC} /* 業種業態〜導入事例：明るめのグレー（文字は墨） */ .ground .g-white{background:#FFFFFF} html.tone-dark .ground .g-dark, html.tone-mid .ground .g-mid, html.tone-white .ground .g-white{ opacity:1; visibility:visible; transition:opacity .6s cubic-bezier(.3,.7,.3,1), visibility 0s} html.tone-dark .ground .g-light, html.tone-mid .ground .g-light, html.tone-white .ground .g-light{ visibility:hidden; transition:visibility 0s linear .6s} /* 読み込み直後の最初の色は、動かさずにそのまま入れる（shell.html の最初のスクリプトが付け、落ち着いたら外す） */ html.tone-instant .ground .g{transition:none !important} /* 光の塊。ぼかし（filter:blur）は掛けず、ふちを放射グラデーションで溶かした面を動かす。 以前の blur(96px) と同じ広がりになるよう、面を 240px 外へ広げ、その中でなだらかに消す（色は --c） */ .ground i{position:absolute; display:block; --gx:240px} .ground i::before{ content:""; position:absolute; inset:calc(var(--gx) * -1); background:radial-gradient(closest-side, var(--c) 0%, var(--c) 40%, color-mix(in srgb, var(--c) 86%, transparent) 54%, color-mix(in srgb, var(--c) 50%, transparent) 68%, color-mix(in srgb, var(--c) 16%, transparent) 81%, color-mix(in srgb, var(--c) 3%, transparent) 92%, transparent 100%); } .ground i:nth-child(1){left:-22%; top:-26%; width:86%; height:96%; animation:wave1 27s ease-in-out infinite} .ground i:nth-child(2){left:38%; top:-32%; width:92%; height:104%; animation:wave2 34s ease-in-out infinite} .ground i:nth-child(3){left:-14%; top:38%; width:98%; height:96%; animation:wave3 41s ease-in-out infinite} .ground i:nth-child(4){left:46%; top:34%; width:88%; height:102%; animation:wave4 48s ease-in-out infinite} .ground i:nth-child(5){left:12%; top:6%; width:70%; height:78%; animation:wave2 58s ease-in-out infinite reverse} /* 明るい地の光 */ .g-light i:nth-child(1), .g-light i:nth-child(5){--c:rgba(255,255,255,.95)} .g-light i:nth-child(2), .g-light i:nth-child(4){--c:rgba(186,192,200,.44)} .g-light i:nth-child(3){--c:rgba(232,234,237,.85)} /* 濃いグレーの地の光（明るすぎると白い文字が沈むので控えめ） */ .g-dark i:nth-child(1), .g-dark i:nth-child(5){--c:rgba(150,156,164,.42)} .g-dark i:nth-child(2), .g-dark i:nth-child(4){--c:rgba(52,57,64,.55)} .g-dark i:nth-child(3){--c:rgba(110,116,124,.60)} /* 明るめのグレーの地の光 */ .g-mid i:nth-child(1), .g-mid i:nth-child(5){--c:rgba(246,247,249,.70)} .g-mid i:nth-child(2), .g-mid i:nth-child(4){--c:rgba(150,156,164,.46)} .g-mid i:nth-child(3){--c:rgba(214,218,223,.80)} /* 見えていない層の動きは止めて、描く量を減らす */ html:not(.tone-dark) .g-dark i{animation-play-state:paused} html:not(.tone-mid) .g-mid i{animation-play-state:paused} html.tone-dark .g-light i, html.tone-mid .g-light i, html.tone-white .g-light i{animation-play-state:paused} @keyframes wave1{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)} 33%{transform:translate3d(16%,12%,0) scale(1.22) rotate(7deg)} 66%{transform:translate3d(-10%,20%,0) scale(.88) rotate(-6deg)}} @keyframes wave2{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)} 38%{transform:translate3d(-18%,14%,0) scale(1.18) rotate(-8deg)} 71%{transform:translate3d(13%,-12%,0) scale(.86) rotate(6deg)}} @keyframes wave3{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)} 42%{transform:translate3d(14%,-16%,0) scale(1.24) rotate(9deg)} 74%{transform:translate3d(-16%,10%,0) scale(.84) rotate(-7deg)}} @keyframes wave4{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)} 40%{transform:translate3d(-13%,-14%,0) scale(1.20) rotate(5deg)} 72%{transform:translate3d(11%,16%,0) scale(.90) rotate(-9deg)}} /* ── 章の文字と面 ── 地はページ全体で1枚なので、章ごとの塗りは持たせない。 明るい〜中間のクールグレーの範囲に収まるので、文字は黒のまま通す。 */ section.sc{ --ink:#111111; /* 見出し */ --ink2:#242D3A; /* 本文 */ --ink3:#222A36; /* 注記 */ --hair:rgba(17,17,17,.13); /* 細い罫 */ --pale:rgba(17,17,17,.075); /* 地に敷く大きな文字 */ --face:linear-gradient(158deg,#FFFFFF 0%,#FAFBFD 44%,#EFF2F6 76%,#E4E9EF 100%); --faceline:rgba(17,17,17,.07); --accent:#096FC8; --accent-ink:#0A4E8C; /* 小さな文字に使う濃いほうの青 */ } section.sc.deep{ --faceline:rgba(255,255,255,.55) } :root{ --orbmesh:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20400%22%3E%3Cline%20x1%3D%22200%22%20y1%3D%2223%22%20x2%3D%22178%22%20y2%3D%2219%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%2223%22%20x2%3D%22204%22%20y2%3D%2241%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22200%22%20y1%3D%2223%22%20x2%3D%22232%22%20y2%3D%2217%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22178%22%20y1%3D%2219%22%20x2%3D%22141%22%20y2%3D%2236%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22178%22%20y1%3D%2219%22%20x2%3D%22181%22%20y2%3D%2216%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22204%22%20y1%3D%2241%22%20x2%3D%22164%22%20y2%3D%2261%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22204%22%20y1%3D%2241%22%20x2%3D%22257%22%20y2%3D%2246%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22232%22%20y1%3D%2217%22%20x2%3D%22279%22%20y2%3D%2233%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22232%22%20y1%3D%2217%22%20x2%3D%22229%22%20y2%3D%2221%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22141%22%20y1%3D%2236%22%20x2%3D%22118%22%20y2%3D%2234%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22141%22%20y1%3D%2236%22%20x2%3D%22112%22%20y2%3D%2267%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22257%22%20y1%3D%2246%22%20x2%3D%22303%22%20y2%3D%2261%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22257%22%20y1%3D%2246%22%20x2%3D%22239%22%20y2%3D%2273%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22181%22%20y1%3D%2216%22%20x2%3D%22138%22%20y2%3D%2229%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22181%22%20y1%3D%2216%22%20x2%3D%22229%22%20y2%3D%2221%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22164%22%20y1%3D%2261%22%20x2%3D%22186%22%20y2%3D%2293%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22164%22%20y1%3D%2261%22%20x2%3D%22112%22%20y2%3D%2267%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22279%22%20y1%3D%2233%22%20x2%3D%22288%22%20y2%3D%2238%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22279%22%20y1%3D%2233%22%20x2%3D%22303%22%20y2%3D%2261%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22118%22%20y1%3D%2234%22%20x2%3D%2282%22%20y2%3D%2262%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22118%22%20y1%3D%2234%22%20x2%3D%2292%22%20y2%3D%2252%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22239%22%20y1%3D%2273%22%20x2%3D%22286%22%20y2%3D%2292%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22239%22%20y1%3D%2273%22%20x2%3D%22229%22%20y2%3D%22118%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22229%22%20y1%3D%2221%22%20x2%3D%22194%22%20y2%3D%2230%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22112%22%20y1%3D%2267%22%20x2%3D%22119%22%20y2%3D%22101%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22112%22%20y1%3D%2267%22%20x2%3D%2268%22%20y2%3D%2296%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22303%22%20y1%3D%2261%22%20x2%3D%22328%22%20y2%3D%2268%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22303%22%20y1%3D%2261%22%20x2%3D%22328%22%20y2%3D%22103%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22138%22%20y1%3D%2229%22%20x2%3D%2292%22%20y2%3D%2252%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22138%22%20y1%3D%2229%22%20x2%3D%22145%22%20y2%3D%2246%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22186%22%20y1%3D%2293%22%20x2%3D%22229%22%20y2%3D%22118%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22186%22%20y1%3D%2293%22%20x2%3D%22151%22%20y2%3D%22132%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22288%22%20y1%3D%2238%22%20x2%3D%22268%22%20y2%3D%2243%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22288%22%20y1%3D%2238%22%20x2%3D%22330%22%20y2%3D%2271%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2282%22%20y1%3D%2262%22%20x2%3D%2268%22%20y2%3D%2296%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2282%22%20y1%3D%2262%22%20x2%3D%2256%22%20y2%3D%2283%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22286%22%20y1%3D%2292%22%20x2%3D%22282%22%20y2%3D%22136%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22286%22%20y1%3D%2292%22%20x2%3D%22328%22%20y2%3D%22103%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22194%22%20y1%3D%2230%22%20x2%3D%22226%22%20y2%3D%2253%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22194%22%20y1%3D%2230%22%20x2%3D%22145%22%20y2%3D%2246%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22119%22%20y1%3D%22101%22%20x2%3D%2278%22%20y2%3D%22131%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22119%22%20y1%3D%22101%22%20x2%3D%22151%22%20y2%3D%22132%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22328%22%20y1%3D%2268%22%20x2%3D%22356%22%20y2%3D%22108%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22328%22%20y1%3D%2268%22%20x2%3D%22330%22%20y2%3D%2271%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2292%22%20y1%3D%2252%22%20x2%3D%2293%22%20y2%3D%2270%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2292%22%20y1%3D%2252%22%20x2%3D%2256%22%20y2%3D%2283%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22229%22%20y1%3D%22118%22%20x2%3D%22201%22%20y2%3D%22158%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22229%22%20y1%3D%22118%22%20x2%3D%22282%22%20y2%3D%22136%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22268%22%20y1%3D%2243%22%20x2%3D%22308%22%20y2%3D%2274%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22268%22%20y1%3D%2243%22%20x2%3D%22226%22%20y2%3D%2253%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2268%22%20y1%3D%2296%22%20x2%3D%2239%22%20y2%3D%22118%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22328%22%20y1%3D%22103%22%20x2%3D%22330%22%20y2%3D%22146%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22145%22%20y1%3D%2246%22%20x2%3D%22170%22%20y2%3D%2268%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22151%22%20y1%3D%22132%22%20x2%3D%22112%22%20y2%3D%22164%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22330%22%20y1%3D%2271%22%20x2%3D%22361%22%20y2%3D%22109%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2256%22%20y1%3D%2283%22%20x2%3D%2250%22%20y2%3D%22101%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22282%22%20y1%3D%22136%22%20x2%3D%22259%22%20y2%3D%22177%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22226%22%20y1%3D%2253%22%20x2%3D%22264%22%20y2%3D%2281%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2278%22%20y1%3D%22131%22%20x2%3D%2245%22%20y2%3D%22155%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2268%22%20y1%3D%2296%22%20x2%3D%2278%22%20y2%3D%22131%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22356%22%20y1%3D%22108%22%20x2%3D%22365%22%20y2%3D%22150%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22328%22%20y1%3D%22103%22%20x2%3D%22356%22%20y2%3D%22108%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2293%22%20y1%3D%2270%22%20x2%3D%22112%22%20y2%3D%2291%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22145%22%20y1%3D%2246%22%20x2%3D%2293%22%20y2%3D%2270%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22201%22%20y1%3D%22158%22%20x2%3D%22163%22%20y2%3D%22192%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22151%22%20y1%3D%22132%22%20x2%3D%22201%22%20y2%3D%22158%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22308%22%20y1%3D%2274%22%20x2%3D%22343%22%20y2%3D%22110%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22330%22%20y1%3D%2271%22%20x2%3D%22308%22%20y2%3D%2274%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2239%22%20y1%3D%22118%22%20x2%3D%2225%22%20y2%3D%22137%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2256%22%20y1%3D%2283%22%20x2%3D%2239%22%20y2%3D%22118%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22330%22%20y1%3D%22146%22%20x2%3D%22315%22%20y2%3D%22188%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22282%22%20y1%3D%22136%22%20x2%3D%22330%22%20y2%3D%22146%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22170%22%20y1%3D%2268%22%20x2%3D%22206%22%20y2%3D%2294%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22226%22%20y1%3D%2253%22%20x2%3D%22170%22%20y2%3D%2268%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22112%22%20y1%3D%22164%22%20x2%3D%2274%22%20y2%3D%22191%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22112%22%20y1%3D%22164%22%20x2%3D%22124%22%20y2%3D%22222%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22361%22%20y1%3D%22109%22%20x2%3D%22379%22%20y2%3D%22151%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22361%22%20y1%3D%22109%22%20x2%3D%22369%22%20y2%3D%22151%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2250%22%20y1%3D%22101%22%20x2%3D%2261%22%20y2%3D%22121%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2250%22%20y1%3D%22101%22%20x2%3D%2226%22%20y2%3D%22156%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22259%22%20y1%3D%22177%22%20x2%3D%22225%22%20y2%3D%22214%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22259%22%20y1%3D%22177%22%20x2%3D%22287%22%20y2%3D%22228%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22264%22%20y1%3D%2281%22%20x2%3D%22303%22%20y2%3D%22115%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22264%22%20y1%3D%2281%22%20x2%3D%22246%22%20y2%3D%22125%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2245%22%20y1%3D%22155%22%20x2%3D%2223%22%20y2%3D%22176%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2245%22%20y1%3D%22155%22%20x2%3D%2245%22%20y2%3D%22213%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22365%22%20y1%3D%22150%22%20x2%3D%22359%22%20y2%3D%22193%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22365%22%20y1%3D%22150%22%20x2%3D%22383%22%20y2%3D%22194%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22112%22%20y1%3D%2291%22%20x2%3D%22144%22%20y2%3D%22114%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22112%22%20y1%3D%2291%22%20x2%3D%2286%22%20y2%3D%22142%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22163%22%20y1%3D%22192%22%20x2%3D%22124%22%20y2%3D%22222%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22163%22%20y1%3D%22192%22%20x2%3D%22186%22%20y2%3D%22247%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22343%22%20y1%3D%22110%22%20x2%3D%22369%22%20y2%3D%22151%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22343%22%20y1%3D%22110%22%20x2%3D%22336%22%20y2%3D%22152%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2225%22%20y1%3D%22137%22%20x2%3D%2226%22%20y2%3D%22156%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2225%22%20y1%3D%22137%22%20x2%3D%2214%22%20y2%3D%22195%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22315%22%20y1%3D%22188%22%20x2%3D%22287%22%20y2%3D%22228%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22315%22%20y1%3D%22188%22%20x2%3D%22338%22%20y2%3D%22235%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22206%22%20y1%3D%2294%22%20x2%3D%22246%22%20y2%3D%22125%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22206%22%20y1%3D%2294%22%20x2%3D%22182%22%20y2%3D%22142%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2274%22%20y1%3D%22191%22%20x2%3D%2245%22%20y2%3D%22213%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2274%22%20y1%3D%22191%22%20x2%3D%2288%22%20y2%3D%22247%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22379%22%20y1%3D%22151%22%20x2%3D%22383%22%20y2%3D%22194%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22379%22%20y1%3D%22151%22%20x2%3D%22383%22%20y2%3D%22193%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2261%22%20y1%3D%22121%22%20x2%3D%2286%22%20y2%3D%22142%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2261%22%20y1%3D%22121%22%20x2%3D%2242%22%20y2%3D%22176%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22225%22%20y1%3D%22214%22%20x2%3D%22186%22%20y2%3D%22247%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22225%22%20y1%3D%22214%22%20x2%3D%22250%22%20y2%3D%22264%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22303%22%20y1%3D%22115%22%20x2%3D%22336%22%20y2%3D%22152%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22303%22%20y1%3D%22115%22%20x2%3D%22284%22%20y2%3D%22160%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2223%22%20y1%3D%22176%22%20x2%3D%2214%22%20y2%3D%22195%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2223%22%20y1%3D%22176%22%20x2%3D%2226%22%20y2%3D%22233%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22359%22%20y1%3D%22193%22%20x2%3D%22338%22%20y2%3D%22235%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22359%22%20y1%3D%22193%22%20x2%3D%22372%22%20y2%3D%22237%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22144%22%20y1%3D%22114%22%20x2%3D%22182%22%20y2%3D%22142%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22144%22%20y1%3D%22114%22%20x2%3D%22120%22%20y2%3D%22166%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22124%22%20y1%3D%22222%22%20x2%3D%2288%22%20y2%3D%22247%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22124%22%20y1%3D%22222%22%20x2%3D%22146%22%20y2%3D%22275%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22369%22%20y1%3D%22151%22%20x2%3D%22383%22%20y2%3D%22193%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22369%22%20y1%3D%22151%22%20x2%3D%22359%22%20y2%3D%22193%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2226%22%20y1%3D%22156%22%20x2%3D%2242%22%20y2%3D%22176%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2226%22%20y1%3D%22156%22%20x2%3D%2220%22%20y2%3D%22213%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22287%22%20y1%3D%22228%22%20x2%3D%22250%22%20y2%3D%22264%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22287%22%20y1%3D%22228%22%20x2%3D%22307%22%20y2%3D%22273%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22246%22%20y1%3D%22125%22%20x2%3D%22284%22%20y2%3D%22160%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22246%22%20y1%3D%22125%22%20x2%3D%22222%22%20y2%3D%22173%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2245%22%20y1%3D%22213%22%20x2%3D%2226%22%20y2%3D%22233%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2245%22%20y1%3D%22213%22%20x2%3D%2261%22%20y2%3D%22269%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22383%22%20y1%3D%22194%22%20x2%3D%22372%22%20y2%3D%22237%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22383%22%20y1%3D%22194%22%20x2%3D%22382%22%20y2%3D%22236%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2286%22%20y1%3D%22142%22%20x2%3D%22120%22%20y2%3D%22166%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2286%22%20y1%3D%22142%22%20x2%3D%2270%22%20y2%3D%22198%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22186%22%20y1%3D%22247%22%20x2%3D%22146%22%20y2%3D%22275%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22186%22%20y1%3D%22247%22%20x2%3D%22210%22%20y2%3D%22295%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22336%22%20y1%3D%22152%22%20x2%3D%22359%22%20y2%3D%22193%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22336%22%20y1%3D%22152%22%20x2%3D%22314%22%20y2%3D%22198%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%22195%22%20x2%3D%2220%22%20y2%3D%22213%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2214%22%20y1%3D%22195%22%20x2%3D%2222%22%20y2%3D%22252%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22338%22%20y1%3D%22235%22%20x2%3D%22307%22%20y2%3D%22273%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22338%22%20y1%3D%22235%22%20x2%3D%22348%22%20y2%3D%22278%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22182%22%20y1%3D%22142%22%20x2%3D%22222%22%20y2%3D%22173%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22182%22%20y1%3D%22142%22%20x2%3D%22159%22%20y2%3D%22195%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22247%22%20x2%3D%2261%22%20y2%3D%22269%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22383%22%20y1%3D%22193%22%20x2%3D%22382%22%20y2%3D%22236%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2242%22%20y1%3D%22176%22%20x2%3D%2270%22%20y2%3D%22198%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22250%22%20y1%3D%22264%22%20x2%3D%22210%22%20y2%3D%22295%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22284%22%20y1%3D%22160%22%20x2%3D%22314%22%20y2%3D%22198%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2226%22%20y1%3D%22233%22%20x2%3D%2222%22%20y2%3D%22252%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22372%22%20y1%3D%22237%22%20x2%3D%22348%22%20y2%3D%22278%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22120%22%20y1%3D%22166%22%20x2%3D%22159%22%20y2%3D%22195%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22146%22%20y1%3D%22275%22%20x2%3D%22113%22%20y2%3D%22299%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22359%22%20y1%3D%22193%22%20x2%3D%22368%22%20y2%3D%22236%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%22213%22%20x2%3D%2239%22%20y2%3D%22233%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22307%22%20y1%3D%22273%22%20x2%3D%22269%22%20y2%3D%22308%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22222%22%20y1%3D%22173%22%20x2%3D%22258%22%20y2%3D%22210%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2261%22%20y1%3D%22269%22%20x2%3D%2247%22%20y2%3D%22288%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22382%22%20y1%3D%22236%22%20x2%3D%22368%22%20y2%3D%22278%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2270%22%20y1%3D%22198%22%20x2%3D%22106%22%20y2%3D%22223%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22210%22%20y1%3D%22295%22%20x2%3D%22173%22%20y2%3D%22322%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22314%22%20y1%3D%22198%22%20x2%3D%22333%22%20y2%3D%22240%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2222%22%20y1%3D%22252%22%20x2%3D%2232%22%20y2%3D%22271%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22348%22%20y1%3D%22278%22%20x2%3D%22315%22%20y2%3D%22315%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22159%22%20y1%3D%22195%22%20x2%3D%22198%22%20y2%3D%22228%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22113%22%20y1%3D%22299%22%20x2%3D%2290%22%20y2%3D%22320%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2288%22%20y1%3D%22247%22%20x2%3D%22113%22%20y2%3D%22299%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22368%22%20y1%3D%22236%22%20x2%3D%22363%22%20y2%3D%22279%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22383%22%20y1%3D%22193%22%20x2%3D%22368%22%20y2%3D%22236%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2239%22%20y1%3D%22233%22%20x2%3D%2270%22%20y2%3D%22257%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2242%22%20y1%3D%22176%22%20x2%3D%2239%22%20y2%3D%22233%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22269%22%20y1%3D%22308%22%20x2%3D%22230%22%20y2%3D%22338%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22250%22%20y1%3D%22264%22%20x2%3D%22269%22%20y2%3D%22308%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22258%22%20y1%3D%22210%22%20x2%3D%22283%22%20y2%3D%22250%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22284%22%20y1%3D%22160%22%20x2%3D%22258%22%20y2%3D%22210%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2247%22%20y1%3D%22288%22%20x2%3D%2248%22%20y2%3D%22307%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2226%22%20y1%3D%22233%22%20x2%3D%2247%22%20y2%3D%22288%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22368%22%20y1%3D%22278%22%20x2%3D%22340%22%20y2%3D%22318%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22372%22%20y1%3D%22237%22%20x2%3D%22368%22%20y2%3D%22278%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22106%22%20y1%3D%22223%22%20x2%3D%22145%22%20y2%3D%22254%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22120%22%20y1%3D%22166%22%20x2%3D%22106%22%20y2%3D%22223%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22173%22%20y1%3D%22322%22%20x2%3D%22144%22%20y2%3D%22345%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22146%22%20y1%3D%22275%22%20x2%3D%22173%22%20y2%3D%22322%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22333%22%20y1%3D%22240%22%20x2%3D%22336%22%20y2%3D%22283%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22359%22%20y1%3D%22193%22%20x2%3D%22333%22%20y2%3D%22240%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2232%22%20y1%3D%22271%22%20x2%3D%2257%22%20y2%3D%22293%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2220%22%20y1%3D%22213%22%20x2%3D%2232%22%20y2%3D%22271%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22315%22%20y1%3D%22315%22%20x2%3D%22276%22%20y2%3D%22347%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22307%22%20y1%3D%22273%22%20x2%3D%22315%22%20y2%3D%22315%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22198%22%20y1%3D%22228%22%20x2%3D%22229%22%20y2%3D%22266%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22222%22%20y1%3D%22173%22%20x2%3D%22198%22%20y2%3D%22228%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2290%22%20y1%3D%22320%22%20x2%3D%2284%22%20y2%3D%22339%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2290%22%20y1%3D%22320%22%20x2%3D%22144%22%20y2%3D%22345%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22363%22%20y1%3D%22279%22%20x2%3D%22340%22%20y2%3D%22320%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22363%22%20y1%3D%22279%22%20x2%3D%22336%22%20y2%3D%22283%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2270%22%20y1%3D%22257%22%20x2%3D%22109%22%20y2%3D%22285%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2270%22%20y1%3D%22257%22%20x2%3D%2257%22%20y2%3D%22293%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22230%22%20y1%3D%22338%22%20x2%3D%22196%22%20y2%3D%22362%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22230%22%20y1%3D%22338%22%20x2%3D%22276%22%20y2%3D%22347%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22283%22%20y1%3D%22250%22%20x2%3D%22293%22%20y2%3D%22292%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22283%22%20y1%3D%22250%22%20x2%3D%22229%22%20y2%3D%22266%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2248%22%20y1%3D%22307%22%20x2%3D%2268%22%20y2%3D%22327%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2248%22%20y1%3D%22307%22%20x2%3D%2284%22%20y2%3D%22339%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22340%22%20y1%3D%22318%22%20x2%3D%22301%22%20y2%3D%22352%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22340%22%20y1%3D%22318%22%20x2%3D%22340%22%20y2%3D%22320%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22145%22%20y1%3D%22254%22%20x2%3D%22181%22%20y2%3D%22291%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22145%22%20y1%3D%22254%22%20x2%3D%22109%22%20y2%3D%22285%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22144%22%20y1%3D%22345%22%20x2%3D%22131%22%20y2%3D%22364%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22144%22%20y1%3D%22345%22%20x2%3D%22196%22%20y2%3D%22362%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22336%22%20y1%3D%22283%22%20x2%3D%22318%22%20y2%3D%22325%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22336%22%20y1%3D%22283%22%20x2%3D%22293%22%20y2%3D%22292%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22293%22%20x2%3D%2297%22%20y2%3D%22319%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2257%22%20y1%3D%22293%22%20x2%3D%2268%22%20y2%3D%22327%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22276%22%20y1%3D%22347%22%20x2%3D%22237%22%20y2%3D%22373%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22276%22%20y1%3D%22347%22%20x2%3D%22301%22%20y2%3D%22352%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22229%22%20y1%3D%22266%22%20x2%3D%22245%22%20y2%3D%22310%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22229%22%20y1%3D%22266%22%20x2%3D%22181%22%20y2%3D%22291%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2284%22%20y1%3D%22339%22%20x2%3D%22131%22%20y2%3D%22364%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%2284%22%20y1%3D%22339%22%20x2%3D%22100%22%20y2%3D%22357%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22340%22%20y1%3D%22320%22%20x2%3D%22318%22%20y2%3D%22325%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22340%22%20y1%3D%22320%22%20x2%3D%22299%22%20y2%3D%22357%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22109%22%20y1%3D%22285%22%20x2%3D%2297%22%20y2%3D%22319%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22109%22%20y1%3D%22285%22%20x2%3D%22152%22%20y2%3D%22321%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22196%22%20y1%3D%22362%22%20x2%3D%22237%22%20y2%3D%22373%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22293%22%20y1%3D%22292%22%20x2%3D%22245%22%20y2%3D%22310%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2268%22%20y1%3D%22327%22%20x2%3D%22100%22%20y2%3D%22357%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22301%22%20y1%3D%22352%22%20x2%3D%22299%22%20y2%3D%22357%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22181%22%20y1%3D%22291%22%20x2%3D%22152%22%20y2%3D%22321%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22131%22%20y1%3D%22364%22%20x2%3D%22177%22%20y2%3D%22380%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22318%22%20y1%3D%22325%22%20x2%3D%22278%22%20y2%3D%22337%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2297%22%20y1%3D%22319%22%20x2%3D%22112%22%20y2%3D%22351%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22237%22%20y1%3D%22373%22%20x2%3D%22252%22%20y2%3D%22378%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22245%22%20y1%3D%22310%22%20x2%3D%22205%22%20y2%3D%22336%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22100%22%20y1%3D%22357%22%20x2%3D%22147%22%20y2%3D%22378%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22299%22%20y1%3D%22357%22%20x2%3D%22267%22%20y2%3D%22365%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22152%22%20y1%3D%22321%22%20x2%3D%22155%22%20y2%3D%22355%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22177%22%20y1%3D%22380%22%20x2%3D%22147%22%20y2%3D%22378%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22177%22%20y1%3D%22380%22%20x2%3D%22206%22%20y2%3D%22386%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22278%22%20y1%3D%22337%22%20x2%3D%22267%22%20y2%3D%22365%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22293%22%20y1%3D%22292%22%20x2%3D%22278%22%20y2%3D%22337%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22112%22%20y1%3D%22351%22%20x2%3D%22155%22%20y2%3D%22355%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%2268%22%20y1%3D%22327%22%20x2%3D%22112%22%20y2%3D%22351%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22252%22%20y1%3D%22378%22%20x2%3D%22206%22%20y2%3D%22386%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%22.5%22%2F%3E%3Cline%20x1%3D%22299%22%20y1%3D%22357%22%20x2%3D%22252%22%20y2%3D%22378%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22205%22%20y1%3D%22336%22%20x2%3D%22225%22%20y2%3D%22361%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22152%22%20y1%3D%22321%22%20x2%3D%22205%22%20y2%3D%22336%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22147%22%20y1%3D%22378%22%20x2%3D%22170%22%20y2%3D%22376%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22267%22%20y1%3D%22365%22%20x2%3D%22225%22%20y2%3D%22361%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22155%22%20y1%3D%22355%22%20x2%3D%22170%22%20y2%3D%22376%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22206%22%20y1%3D%22386%22%20x2%3D%22200%22%20y2%3D%22377%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22225%22%20y1%3D%22361%22%20x2%3D%22200%22%20y2%3D%22377%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Cline%20x1%3D%22170%22%20y1%3D%22376%22%20x2%3D%22200%22%20y2%3D%22377%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%22.34%22%20stroke-width%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%2223%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22178%22%20cy%3D%2219%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22204%22%20cy%3D%2241%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22232%22%20cy%3D%2217%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22141%22%20cy%3D%2236%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22257%22%20cy%3D%2246%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22181%22%20cy%3D%2216%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22164%22%20cy%3D%2261%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22279%22%20cy%3D%2233%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2234%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22239%22%20cy%3D%2273%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22229%22%20cy%3D%2221%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%2267%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22303%22%20cy%3D%2261%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22138%22%20cy%3D%2229%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22186%22%20cy%3D%2293%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22288%22%20cy%3D%2238%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2262%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22286%22%20cy%3D%2292%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22194%22%20cy%3D%2230%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22119%22%20cy%3D%22101%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%2268%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2252%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22229%22%20cy%3D%22118%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22268%22%20cy%3D%2243%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2268%22%20cy%3D%2296%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22103%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22145%22%20cy%3D%2246%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22151%22%20cy%3D%22132%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%2271%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2256%22%20cy%3D%2283%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22282%22%20cy%3D%22136%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22226%22%20cy%3D%2253%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%22131%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22356%22%20cy%3D%22108%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%2293%22%20cy%3D%2270%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22201%22%20cy%3D%22158%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%2274%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%22118%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22146%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%2268%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22164%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22361%22%20cy%3D%22109%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%22101%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22259%22%20cy%3D%22177%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22264%22%20cy%3D%2281%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22155%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%22150%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%2291%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22163%22%20cy%3D%22192%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22343%22%20cy%3D%22110%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%22137%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22315%22%20cy%3D%22188%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%2294%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22191%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22379%22%20cy%3D%22151%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%2261%22%20cy%3D%22121%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22225%22%20cy%3D%22214%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22303%22%20cy%3D%22115%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%22176%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22359%22%20cy%3D%22193%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22144%22%20cy%3D%22114%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22124%22%20cy%3D%22222%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22369%22%20cy%3D%22151%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22156%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22287%22%20cy%3D%22228%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22246%22%20cy%3D%22125%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22213%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22383%22%20cy%3D%22194%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%22142%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22186%22%20cy%3D%22247%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22336%22%20cy%3D%22152%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%22195%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22338%22%20cy%3D%22235%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22182%22%20cy%3D%22142%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%22247%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22383%22%20cy%3D%22193%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%22176%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22264%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22284%22%20cy%3D%22160%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%22233%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22372%22%20cy%3D%22237%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22166%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%22275%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22359%22%20cy%3D%22193%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22213%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22307%22%20cy%3D%22273%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22222%22%20cy%3D%22173%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2261%22%20cy%3D%22269%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22382%22%20cy%3D%22236%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22198%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22295%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22314%22%20cy%3D%22198%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%22252%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22348%22%20cy%3D%22278%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22159%22%20cy%3D%22195%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22113%22%20cy%3D%22299%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22236%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2239%22%20cy%3D%22233%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22269%22%20cy%3D%22308%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%22210%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2247%22%20cy%3D%22288%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22368%22%20cy%3D%22278%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22106%22%20cy%3D%22223%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22173%22%20cy%3D%22322%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22333%22%20cy%3D%22240%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%22271%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22315%22%20cy%3D%22315%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%22228%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%22320%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22363%22%20cy%3D%22279%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22257%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22230%22%20cy%3D%22338%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22283%22%20cy%3D%22250%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%22307%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22340%22%20cy%3D%22318%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22145%22%20cy%3D%22254%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22144%22%20cy%3D%22345%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22336%22%20cy%3D%22283%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2257%22%20cy%3D%22293%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22276%22%20cy%3D%22347%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22229%22%20cy%3D%22266%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%22339%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22340%22%20cy%3D%22320%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22109%22%20cy%3D%22285%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22362%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22293%22%20cy%3D%22292%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2268%22%20cy%3D%22327%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22301%22%20cy%3D%22352%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22181%22%20cy%3D%22291%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22131%22%20cy%3D%22364%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22318%22%20cy%3D%22325%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2297%22%20cy%3D%22319%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22237%22%20cy%3D%22373%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22245%22%20cy%3D%22310%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22357%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22299%22%20cy%3D%22357%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%22321%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22177%22%20cy%3D%22380%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22278%22%20cy%3D%22337%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22351%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22252%22%20cy%3D%22378%22%20r%3D%221%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.18%22%2F%3E%3Ccircle%20cx%3D%22205%22%20cy%3D%22336%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22147%22%20cy%3D%22378%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22267%22%20cy%3D%22365%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22155%22%20cy%3D%22355%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%22386%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22225%22%20cy%3D%22361%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%22376%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22377%22%20r%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.5%22%2F%3E%3C%2Fsvg%3E"); } /* ── うっすらと浮かぶ球体 ── PKSHA の地球儀にならい、輪郭を線で描かず「影のついた球」として置く。 ぼかしは動かない .ball にだけ掛ける（動かす面にぼかしを掛けると毎コマ描き直しになる）。 */ .orbs{ position:absolute; inset:0; z-index:-4; pointer-events:none; overflow:hidden; display:none; /* 一旦外す（板垣さんの指示、2026-09-21） */ } .orb{position:absolute; transform:translate(-50%,-50%); color:rgba(126,148,180,.50)} .orb.blue{color:rgba(104,150,210,.46)} .orb .ball{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 34% 26%, rgba(170,186,208,.11) 0%, rgba(132,150,176,.09) 32%, rgba(96,114,142,.10) 64%, rgba(70,88,116,.13) 88%, rgba(56,72,98,.09) 100%); box-shadow: inset -30px -42px 120px rgba(26,36,54,.14), inset 26px 30px 90px rgba(255,255,255,.07); filter:blur(14px); } .orb .ball, .orb .mesh{position:absolute; inset:0; display:block} .orb .mesh{ background-color:currentColor; -webkit-mask:var(--orbmesh) center/100% 100% no-repeat; mask:var(--orbmesh) center/100% 100% no-repeat; opacity:.22; transform-origin:50% 50%; animation:orbspin 300s linear infinite; } @keyframes orbspin{from{transform:rotate(0deg)} to{transform:rotate(360deg)}} /* 地球は1箇所だけ。「業種は問いません」の奥に置く */ .orb-1{left:72%; top:32.5%; width:1460px; height:1460px} @media (prefers-reduced-motion: reduce){ .ground i, .glowfield i, .orb .mesh{animation:none} } .grainlayer{ position:fixed; inset:0; z-index:-3; pointer-events:none; width:100%; height:100%; opacity:.05; /* 粒は SVG のその場の計算（feTurbulence）をやめ、同じ粒を焼いた 256px の1枚を敷き詰める */ background:url(../img/v8/grain-256.webp) 0 0 / 256px 256px repeat; } /* ── 立体感の段階 ── */ :root{ --e1: 0 10px 20px -12px rgba(14,26,44,.24), 0 2px 5px -3px rgba(14,26,44,.12); --e2: 0 22px 32px -16px rgba(14,26,44,.36), 0 6px 13px -6px rgba(14,26,44,.18), inset 0 2px 2px rgba(255,255,255,.94); --e3: 0 34px 50px -22px rgba(14,26,44,.44), 0 10px 20px -10px rgba(14,26,44,.22), inset 0 2px 2px rgba(255,255,255,.96); --surface: linear-gradient(158deg,#FFFFFF 0%,#FAFBFD 44%,#EFF2F6 76%,#E4E9EF 100%); } /* ── 共通のセクション部品 ── */ .wrapx{position:absolute; inset:0} .chip{ display:inline-block; padding:9px 18px; border-radius:7px; background:rgba(255,255,255,.92); font-size:15px; font-weight:700; letter-spacing:.22em; text-indent:.22em; color:#111; box-shadow:0 2px 8px rgba(20,30,45,.08); } .ttl{line-height:1.12} .ttl .a{display:block; font-size:38px; font-weight:700; letter-spacing:.04em} .ttl .b{display:block; margin-top:12px; font-size:76px; font-weight:900; letter-spacing:.01em} .body{font-size:17px; font-weight:500; line-height:2.1; letter-spacing:.05em; color:#2B3442} /* ── 「AI」の中でうねる暗いグラデーション（FV とアプローチで共用） ── */ @property --ax1{syntax:''; inherits:false; initial-value:20%} @property --ay1{syntax:''; inherits:false; initial-value:24%} @property --ax2{syntax:''; inherits:false; initial-value:80%} @property --ay2{syntax:''; inherits:false; initial-value:70%} @property --ax3{syntax:''; inherits:false; initial-value:50%} @property --ay3{syntax:''; inherits:false; initial-value:90%} @keyframes aiflow{ 0% {--ax1:18%; --ay1:20%; --ax2:82%; --ay2:72%; --ax3:48%; --ay3:92%} 33% {--ax1:62%; --ay1:36%; --ax2:30%; --ay2:28%; --ax3:78%; --ay3:58%} 66% {--ax1:34%; --ay1:80%; --ax2:74%; --ay2:18%; --ax3:22%; --ay3:40%} 100%{--ax1:80%; --ay1:56%; --ax2:20%; --ay2:84%; --ax3:60%; --ay3:14%} } /* ── ホバー：縁をグラデーションの光がぐるぐる回る ── 角度を @property で登録し、conic-gradient の開始角だけを回す。 縁だけを見せるため、内側はマスクで抜く。 */ @property --ang{syntax:''; inherits:false; initial-value:0deg} @keyframes ringspin{to{--ang:360deg}} .btnx::before, .sitehd-cta::before, .sitehd-ghost::before, .pring{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; pointer-events:none; z-index:3; /* 青はやめ、真珠のような白〜銀〜淡い紫〜淡い金の移ろいにする */ background:conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 50deg, rgba(222,226,236,.95) 90deg, rgba(232,222,244,.90) 130deg, rgba(252,240,222,.85) 170deg, rgba(255,255,255,0) 220deg, rgba(255,255,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s ease; animation:ringspin 2.8s linear infinite; animation-play-state:paused; } /* 白いボタンと白いカードの上では、墨から青へ移るはっきりした光にする（淡い銀や紫は灰色の地で霞むのでやめた） */ .btnx.light::before, .sitehd-ghost::before, .pring{ background:conic-gradient(from var(--ang), rgba(17,17,17,0) 0deg, rgba(17,17,17,.85) 40deg, rgba(9,111,200,.95) 105deg, rgba(96,160,222,.80) 150deg, rgba(17,17,17,0) 210deg, rgba(17,17,17,0) 360deg); } .btnx:hover::before, .sitehd-cta:hover::before, .sitehd-ghost:hover::before, .has-pglow:hover > .pring{opacity:1; animation-play-state:running} .sitehd-cta, .sitehd-ghost{position:relative} .sitehd-ghost:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(17,17,17,.22), 0 2px 4px rgba(14,26,44,.12), 0 12px 22px -10px rgba(14,26,44,.34)} /* ── ホバー：カーソルの位置に光が付いてくる ── かけ合わせをやめ、白の光を普通に重ねる。黒い文字は暗くならず、白い文字も沈まない */ .pglow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; /* 白く霞ませない。ごく薄い光と、青のわずかな色味だけ */ background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.38) 0%, rgba(9,111,200,.05) 45%, rgba(255,255,255,0) 72%); opacity:0; transition:opacity .32s ease; } .has-pglow:hover > .pglow{opacity:1} /* カードの縁の光は内側に描く（カードははみ出しを隠すので、外に描くと切れて見えない） */ .pring{inset:0; padding:2px} /* カードは少しだけ浮き上がる */ .has-pglow{transition:transform .35s cubic-bezier(.2,.7,.2,1)} .has-pglow:hover{transform:translateY(-4px)} .is-scrolling .has-pglow, .is-scrolling .btnx{pointer-events:none} /* スクロール中はホバーを出さない */ @media (prefers-reduced-motion: reduce){ .btnx::before, .sitehd-cta::before, .sitehd-ghost::before, .pring{animation:none} } .btnx{ position:relative; display:inline-flex; align-items:center; justify-content:center; height:76px; padding:0 74px 0 40px; border-radius:999px; font-size:23px; font-weight:700; letter-spacing:.04em; text-decoration:none; } .btnx .ar{ position:absolute; right:15px; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; } .btnx.dark{background:var(--g-black); color:#F6F6F6; box-shadow:var(--e2)} .btnx.dark .ar{background:#F6F6F6} .btnx.light{background:#fff; color:#111; box-shadow:var(--e1)} .btnx.light .ar{background:#111} /* 「すべての〜を見る」は全章で同じ寸法・同じ位置（見出しの行の右端） */ .btnx.more{height:62px; padding:0 68px 0 30px; font-size:18px; letter-spacing:.05em} .btnx.more .ar{right:10px; width:42px; height:42px} .btnx.more .ar svg{width:14px; height:14px} /* カードの中の主なボタン（料金・資料・導入事例など、どの章も同じ大きさにそろえる） */ .btnx.md{height:68px; padding:0 74px 0 32px; font-size:19px; letter-spacing:.05em} .btnx.md .ar{right:11px; width:46px; height:46px} .btnx.md .ar svg{width:15px; height:15px} /* ── 現れる動き ── */ .rv{opacity:0; transform:translateY(26px); transition:opacity .62s cubic-bezier(.2,.7,.2,1), transform .62s cubic-bezier(.2,.7,.2,1)} .rv.in{opacity:1; transform:none} .d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s} .d4{transition-delay:.36s}.d5{transition-delay:.45s}.d6{transition-delay:.54s} /* ── 右下のチャット（ボタンと、tools.ai-builderz.com/chat を開く枠） ── */ .schat-btn{ position:fixed; right:22px; bottom:22px; z-index:50; width:56px; height:56px; border-radius:50%; border:0; cursor:pointer; color:#111; background:var(--surface); box-shadow:var(--e2); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, box-shadow .2s ease, opacity .3s ease; } .schat-btn:hover{transform:translateY(-2px); box-shadow:var(--e3)} .schat-btn:focus-visible{outline:2px solid #111; outline-offset:3px} .schat-btn svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round} .schat-btn .i-x{display:none} .is-chat .schat-btn .i-chat{display:none} .is-chat .schat-btn .i-x{display:block} .schat{ position:fixed; right:22px; bottom:92px; z-index:60; width:384px; height:min(620px, calc(100vh - 196px)); height:min(620px, calc(100dvh - 196px)); /* 上のヘッダーに重ねない */ border-radius:22px; overflow:hidden; background:#fff; box-shadow:var(--e3); animation:schat-in .26s cubic-bezier(.2,.7,.2,1); } .schat[hidden]{display:none} .schat iframe{display:block; width:100%; height:100%; border:0; background:#fff} @keyframes schat-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .schat{animation:none} } /* ───── ヘッダー ───── */ .sitehd{ position:fixed; left:50%; transform:translateX(-50%); top:18px; z-index:40; width:min(1300px, calc(100% - 48px)); height:68px; padding:0 14px 0 32px; border-radius:999px; display:flex; align-items:center; gap:30px; background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80)); backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px); box-shadow:0 16px 34px -16px rgba(14,26,44,.30), 0 2px 6px -3px rgba(14,26,44,.14), inset 0 1px 0 rgba(255,255,255,.92); transition:box-shadow .42s ease; } .sitehd-logo{font-size:17px; font-weight:900; letter-spacing:.16em; color:#111; text-decoration:none} .sitehd-nav{display:flex; gap:26px; margin-left:4px} .sitehd-nav a{font-size:14px; font-weight:700; letter-spacing:.08em; color:#2C3646; text-decoration:none} .sitehd-act{margin-left:auto; display:flex; align-items:center; gap:14px} .sitehd-ghost{ display:inline-flex; align-items:center; height:44px; padding:0 52px 0 26px; border-radius:999px; /* 上から光が当たったような、ごく浅い面。輪郭は細い墨の線で取る */ background:linear-gradient(180deg, #FFFFFF 0%, #F3F5F8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(17,17,17,.16), 0 1px 2px rgba(14,26,44,.10), 0 8px 18px -8px rgba(14,26,44,.30); transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); font-size:14px; font-weight:700; letter-spacing:.08em; color:#2C3646; text-decoration:none; } .sitehd-cta{ position:relative; display:inline-flex; align-items:center; height:44px; padding:0 52px 0 26px; border-radius:999px; background:var(--g-black); color:#F6F6F6; box-shadow:var(--e1); font-size:14px; font-weight:700; letter-spacing:.08em; text-decoration:none; } .sitehd-ghost .ar{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:#111111; display:flex; align-items:center; justify-content:center; } .sitehd-cta .ar{ position:absolute; right:7px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:#F6F6F6; display:flex; align-items:center; justify-content:center; } /* ═══════════════ 1023px 以下：版面を縮めるのをやめ、縦に流す ═══════════════ ここから下は 1023px 以下でしか効かない（1024px 以上は上の指定だけで決まる）。 各章はこの土台の上で、自分の章の中身を組み替える。 土台がしていること .sc 高さ固定と overflow:hidden を外す。横にはみ出た分だけ切る（overflow-x:clip） .stage 縮小・固定幅・固定高さを外し、ふつうの流れにする。余白は付けない .wrapx 絶対配置をやめ、ふつうの流れにする。余白は付けない（各章が var(--gut) で付ける） 使ってよい変数（768〜1023px では値が変わる） --gut 左右の余白 20px ／ 40px --m-pad 章の上下の余白の目安 64px ／ 88px --m-h2 章の見出し（.ttl .b） 30px ／ 36px --m-lab 見出しの上の英字（.ttl .a） 14px ／ 15px --m-body 本文 15px ／ 16px --m-note 注記の下限 13px --m-tap 押せる所の下限 44px --hd-h / --hd-top ヘッダーの高さと上の余白（章の頭がヘッダーに隠れない位置の計算に使う） */ .sitehd-menu, .sitemenu{display:none} @media (max-width:1023px){ :root{ --gut:20px; --m-pad:64px; --m-h2:30px; --m-lab:14px; --m-body:15px; --m-note:13px; --m-tap:44px; --hd-h:56px; --hd-top:10px; } /* 章：縮めず、縦に流す */ .sc{height:auto; overflow:visible; overflow-x:clip} .sc + .sc{margin-top:56px} .sc > .stage{position:relative; left:auto; top:auto; width:auto; height:auto; transform:none} .wrapx{position:relative; inset:auto} #hero{height:auto; display:block} #hero > .stage{flex:none; transform:none} /* 見出しの型（各章の #章 .ttl の指定が勝つので、章の側で var(--m-h2) などに置き換える） */ .ttl{line-height:1.25} .ttl .a{font-size:var(--m-lab); letter-spacing:.08em} .ttl .b{margin-top:6px; font-size:var(--m-h2); letter-spacing:.02em} .body{font-size:var(--m-body); line-height:1.9; letter-spacing:.03em} .chip{padding:6px 12px; font-size:13px; letter-spacing:.16em; text-indent:.16em} /* ボタンの実寸 */ .btnx{height:56px; padding:0 60px 0 26px; font-size:16px} .btnx .ar{right:8px; width:40px; height:40px} .btnx.md{height:56px; padding:0 60px 0 26px; font-size:16px} .btnx.md .ar{right:8px; width:40px; height:40px} .btnx.more{height:48px; padding:0 52px 0 20px; font-size:14px} .btnx.more .ar{right:6px; width:36px; height:36px} /* 地：光の面を1枚減らし、ふちの溶かし幅を狭める（以前の blur(56px) 相当。色の切り替えはそのまま） */ .ground i{--gx:140px} .ground i:nth-child(5){display:none} .schat-btn{right:12px; bottom:12px; width:52px; height:52px} /* チャットは画面いっぱいに開く。閉じるのはチャットの上の帯の × */ .schat{inset:0; width:auto; height:auto; border-radius:0; z-index:1000} .is-chat, .is-chat body{overflow:hidden} /* ── ヘッダー：ロゴを真ん中に、右にメニューボタンだけ（無料相談はメニューの中とFVのボタンに任せる） ── */ .sitehd{top:var(--hd-top); width:calc(100% - 20px); height:var(--hd-h); padding:0 6px; gap:0; justify-content:flex-end} .sitehd-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; height:44px; padding-left:.16em; /* 字間の余りを左にも足して、見た目の真ん中にそろえる */ font-size:16px; letter-spacing:.16em; white-space:nowrap; } .sitehd-nav, .sitehd-act{display:none} .sitehd-menu{ position:relative; display:inline-flex; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px rgba(20,32,50,.14); -webkit-tap-highlight-color:transparent; } .sitehd-menu i{ position:absolute; left:50%; top:50%; width:18px; height:2px; margin:-1px 0 0 -9px; border-radius:2px; background:#111; transition:transform .32s cubic-bezier(.2,.7,.2,1); } .sitehd-menu i:nth-child(1){transform:translateY(-4px)} .sitehd-menu i:nth-child(2){transform:translateY(4px)} .is-menu .sitehd-menu i:nth-child(1){transform:rotate(45deg)} .is-menu .sitehd-menu i:nth-child(2){transform:rotate(-45deg)} /* ── 全面のメニュー。ヘッダーの下に敷き、ヘッダー（閉じるボタン）は上に残す ── */ html.is-menu{overflow:hidden} .sitemenu{ display:block; position:fixed; inset:0; z-index:39; padding:calc(var(--hd-top) + var(--hd-h) + 28px) var(--gut) calc(32px + env(safe-area-inset-bottom, 0px)); overflow-y:auto; overscroll-behavior:contain; background:linear-gradient(180deg, rgba(242,243,244,.97) 0%, rgba(230,232,235,.97) 100%); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:opacity .32s ease, visibility 0s linear .32s; } .is-menu .sitemenu{opacity:1; visibility:visible; transition:opacity .32s ease} .sitemenu-in{max-width:640px; margin:0 auto} .sitemenu-nav{display:flex; flex-direction:column; border-top:1px solid rgba(17,17,17,.13)} .sitemenu-nav a{ position:relative; display:flex; align-items:center; min-height:60px; padding:0 52px 0 2px; border-bottom:1px solid rgba(17,17,17,.13); font-size:17px; font-weight:700; letter-spacing:.08em; color:#111; text-decoration:none; -webkit-tap-highlight-color:transparent; } .sitemenu-nav .ar{ position:absolute; right:2px; top:50%; width:34px; height:34px; margin-top:-17px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(20,32,50,.18); display:flex; align-items:center; justify-content:center; transition:background-color .25s ease; } .sitemenu-nav .ar path{transition:fill .25s ease} .sitemenu-nav a:active .ar{background:#111} .sitemenu-nav a:active .ar path{fill:#F6F6F6} .sitemenu-act{display:flex; flex-direction:column; gap:12px; margin-top:32px} .sitemenu-act .btnx{width:100%} /* 開くとき、上から順にわずかに浮かび上がる */ .sitemenu-nav a, .sitemenu-act .btnx{ opacity:0; transform:translateY(10px); transition:opacity .42s cubic-bezier(.2,.7,.2,1), transform .42s cubic-bezier(.2,.7,.2,1); } .is-menu .sitemenu-nav a, .is-menu .sitemenu-act .btnx{opacity:1; transform:none} .is-menu .sitemenu-nav a:nth-child(2){transition-delay:.03s} .is-menu .sitemenu-nav a:nth-child(3){transition-delay:.06s} .is-menu .sitemenu-nav a:nth-child(4){transition-delay:.09s} .is-menu .sitemenu-nav a:nth-child(5){transition-delay:.12s} .is-menu .sitemenu-nav a:nth-child(6){transition-delay:.15s} .is-menu .sitemenu-act .btnx{transition-delay:.18s} .is-menu .schat-btn{opacity:0; pointer-events:none} } @media (min-width:768px) and (max-width:1023px){ :root{--gut:40px; --m-pad:88px; --m-h2:36px; --m-lab:15px; --m-body:16px; --hd-h:64px; --hd-top:16px} .btnx, .btnx.md{height:60px; font-size:17px} .sitehd{width:calc(100% - 48px); padding:0 10px} .sitehd-logo{font-size:17px} .sitemenu-nav a{min-height:68px; font-size:19px} } /* 767px 以下：FV のボタンは全幅で画面の下端に来るので、見えているあいだは右下のチャットのボタンを隠す */ @media (max-width:767px){ .is-fvcta:not(.is-chat) .schat-btn{opacity:0; pointer-events:none} } /* 指で触る端末では、触ったあとにホバーの浮き上がりと光が残らないようにする */ @media (max-width:1023px) and (hover:none){ .has-pglow:hover{transform:none} .has-pglow:hover > .pglow, .has-pglow:hover > .pring{opacity:0} } @media (max-width:1023px) and (prefers-reduced-motion: reduce){ .sitemenu-nav a, .sitemenu-act .btnx{transform:none} } /* ===== hero ===== */ #hero [data-head="2"]{--head-top:62px} #hero [data-head="3"]{--head-top:58px} #hero .stage{ position:relative; width:1586px; height:992px; overflow:hidden; font-family:var(--f); color:var(--c-text); /* 明るい地にブランド青をうっすら ─ サイト本体と同じ明度帯にそろえる */ background: /* 光の当たる面 */ radial-gradient(52% 46% at 74% 6%, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 62%), radial-gradient(64% 54% at 12% 86%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 64%), radial-gradient(38% 34% at 46% 40%, rgba(255,255,255,.50) 0%, rgba(255,255,255,0) 68%), /* 沈む面 */ radial-gradient(74% 66% at 98% 58%, rgba(124,133,142,.40) 0%, rgba(124,133,142,0) 60%), radial-gradient(58% 52% at 4% 10%, rgba(124,133,142,.30) 0%, rgba(124,133,142,0) 62%), radial-gradient(90% 60% at 60% 104%,rgba(124,133,142,.34) 0%, rgba(124,133,142,0) 58%), linear-gradient(152deg, #E8E9E9 0%, #DEE0E1 44%, #E9E9E8 100%); -webkit-font-smoothing:antialiased; } #hero .grain{ position:absolute; inset:0; pointer-events:none; opacity:.055; mix-blend-mode:multiply; } #hero .headline{ position:absolute; left:28px; top:var(--head-top,58px); /* 弊社のアプローチの地の文字と同じ質感。文字の中でグラデーションがゆっくりうねる */ /* 常に青みの色が入り、--hb で薄く⇔濃くを繰り返す */ background: linear-gradient(115deg, rgba(34,52,78, calc(.26 + var(--hb,.5)*.14)) 0%, rgba(26,40,62, calc(.36 + var(--hb,.5)*.14)) 18%, rgba(40,92,128,calc(.30 + var(--hb,.5)*.14)) 34%, rgba(34,52,78, calc(.25 + var(--hb,.5)*.14)) 50%, rgba(26,40,62, calc(.37 + var(--hb,.5)*.14)) 66%, rgba(36,104,132,calc(.29 + var(--hb,.5)*.14)) 82%, rgba(34,52,78, calc(.27 + var(--hb,.5)*.14)) 100%); background-size:260% 260%; background-position:0% 30%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; /* 文字の中の色を毎コマ塗り直す動き（背景の位置・--hb）はやめ、層ごとの透明度だけで、ゆっくり呼吸させる。 書体と幅がそろうまでは止めておき（html.fv-wait）、そろったら浮かび上がらせる */ animation:headin .7s cubic-bezier(.2,.7,.2,1) both, headpulse 8s ease-in-out .7s infinite; text-shadow:none; font-weight:900; line-height:1; letter-spacing:0; white-space:nowrap; font-size:315px; /* 行の高さ（1）より字面の下が出る分（ッ・カ・スの足）は、塗り（background-clip:text）の範囲の外で切れる。 塗りの範囲だけ下へ広げ、同じ分を margin で打ち消す（スマホと同じ処置） */ padding-bottom:.12em; margin-bottom:-.12em; transform-origin:left top; transform:scaleX(.7041); /* スクリプトが幅を測る前の既定値（PC の実測値に合わせる） */ } #hero .headline i{display:inline-block; font-style:normal} #hero .headline i.en{text-shadow:none} /* AI は中を塗っているので影を掛けない */ #hero .headline i.en{ transform:scaleX(1.18); /* 縦は同じ、横だけ広げる */ /* 暗い藍・深い青緑・墨・すみれを重ね、中でゆっくりうねらせる（AI だけ） */ background: radial-gradient(58% 70% at var(--ax1, 20%) var(--ay1, 24%), rgba(28,70,128,.95) 0%, rgba(28,70,128,0) 62%), radial-gradient(52% 64% at var(--ax2, 80%) var(--ay2, 70%), rgba(22,76,92,.92) 0%, rgba(22,76,92,0) 64%), radial-gradient(46% 58% at var(--ax3, 50%) var(--ay3, 90%), rgba(14,98,120,.78) 0%, rgba(14,98,120,0) 66%), linear-gradient(150deg, #161B24 0%, #0A0D12 52%, #151A22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:none; /* 中のうねり（毎コマ塗り直し）は止め、最初の色の置き方のまま */ /* 字面が箱からはみ出す分（A の左下の足）まで塗れるよう、箱を広げて打ち消す */ padding:0 .09em .07em; margin-right:-.09em; margin-bottom:-.07em; } #hero .headline i.en:nth-child(1){margin-left:-.09em} @property --hb{syntax:''; inherits:false; initial-value:.5} @keyframes headbreath{0%,100%{--hb:0} 50%{--hb:1}} html.fv-wait #hero .headline{animation-play-state:paused} @keyframes headin{from{opacity:0} to{opacity:1}} @keyframes headpulse{0%,100%{opacity:1} 50%{opacity:.82}} @media (prefers-reduced-motion: reduce){ #hero .headline{animation:none} html.fv-wait #hero .headline{visibility:hidden} } @keyframes headwave{ 0% {background-position:0% 30%} 50% {background-position:60% 70%} 100%{background-position:100% 40%} } #hero .headline i:nth-child(2){margin-left:-0.0202em} #hero .headline i:nth-child(3){margin-left:-0.0551em} #hero .headline i:nth-child(4){margin-left:-0.1204em} #hero .headline i:nth-child(5){margin-left:-0.1014em} #hero .headline i:nth-child(6){margin-left:-0.2833em} #hero .headline i:nth-child(7){margin-left:-0.1141em} #hero .headline i:nth-child(8){margin-left:-0.1839em} #hero .headline i:nth-child(9){margin-left:-0.3236em} #hero .headline-dummy{ } #hero .mist{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(46% 44% at 102% 104%, rgba(92,102,115,.60) 0%, rgba(92,102,115,.40) 34%, rgba(92,102,115,.15) 64%, rgba(92,102,115,0) 88%), radial-gradient(33% 29% at 86% 95%, rgba(92,102,115,.28) 0%, rgba(92,102,115,.10) 52%, rgba(92,102,115,0) 78%); } #hero .person-wrap{ position:absolute; right:207px; bottom:0; width:460px; height:768px; overflow:hidden; } #hero .person{width:460px; display:block; margin-top:124px} #hero .col{ position:absolute; left:var(--col-x); bottom:var(--frame-bottom); width:700px; } #hero .badge{display:flex; gap:6px; margin-bottom:10px} #hero .badge b{ padding:9px 18px; border-radius:5px; font-size:24px; font-weight:700; letter-spacing:.12em; text-indent:.12em; white-space:nowrap; line-height:1.12; } #hero .badge b:first-child{background:rgba(255,255,255,.86); color:#111111} #hero .badge b:last-child{background:var(--g-black); color:#FFFFFF} #hero .price{display:flex; align-items:baseline; gap:3px; line-height:1; margin-top:0} #hero .price .yen{font-size:56px; font-weight:700; letter-spacing:.02em} #hero .price .num{font-size:190px; font-weight:700; letter-spacing:-.035em; margin:0 3px} #hero .price .unit{font-size:62px; font-weight:700; letter-spacing:.02em} #hero .price .unit em{font-style:normal} #hero .unit-col{display:flex; flex-direction:column; align-items:center} #hero .start{ font-size:28px; font-weight:400; letter-spacing:.06em; color:#2C3646; margin-top:2px; white-space:nowrap; } #hero .offer-wrap{ width:524px; display:flex; justify-content:flex-start; padding-left:32px; margin-top:24px; margin-bottom:-14px; position:relative; z-index:3; } #hero .offer{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:7px 20px 8px 20px; overflow:visible; border-radius:16px; background:linear-gradient(162deg,#FFFFFF 0%,#FBFCFD 46%,#EFF2F6 78%,#E6EBF1 100%); border:1px solid rgba(31,45,85,.13); box-shadow: 0 22px 30px -14px rgba(14,26,44,.40), 0 7px 13px -6px rgba(14,26,44,.20), inset 0 2px 2px rgba(255,255,255,.96); } #hero .btn-primary{position:relative; z-index:1} #hero .offer .fig{ position:absolute; left:-62px; top:50%; transform:translateY(-50%); width:74px; height:58px; /* 札の左の端にかぶせて外へ出す */ filter: drop-shadow(0 14px 16px rgba(14,26,44,.30)) drop-shadow(0 2px 3px rgba(14,26,44,.18)); } #hero .offer .tx{display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center} #hero .offer .tx i{ font-style:normal; font-size:11px; font-weight:500; letter-spacing:.16em; color:#2A333F; } #hero .offer .tx b{ font-size:18px; font-weight:700; letter-spacing:.04em; color:#0E1620; } #hero .btn{ position:relative; display:flex; align-items:center; justify-content:center; width:524px; height:78px; border-radius:999px; font-size:24px; font-weight:700; letter-spacing:.04em; text-decoration:none; } #hero .btn + .btn{margin-top:12px} #hero .btn .arrow{ position:absolute; right:15px; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; } #hero .btn-primary{background:var(--g-black); color:var(--c-btn-ink)} #hero .btn-primary .arrow{background:#F6F6F6} #hero .btn-secondary{background:#FFFFFF; color:var(--c-text); box-shadow:0 1px 3px rgba(30,44,66,.12)} #hero .btn-secondary .arrow{background:#111111} /* ===== hero：1023px 以下 ===== 最初の1画面（100svh）に全部を収める。見出し「AIでコストカット」を1行で、左右の余白の内側いっぱいに置き、 その下から人物を縦長の素材のまま画面の下端まで立たせる（頭は見出しのすぐ下、顔は画面の中央から少し右）。 支援可能は白地の札にして顔の左に置く。札は人物の奥に回し、髪と肩が札の右端に少しかぶる。 月額は月桂冠で囲んだ印にして、ボタンの上の中央に置く。読みやすさは人物の下の方を地の色へ溶かして取る。 見出しの幅は shell.html の JS が余白の内側ぴったりに合わせる（横の縮小率 = 余白の内側 ÷ 箱の幅）。 縮小率が PC と同じ 0.70 になるよう、文字の大きさ = 余白の内側 ÷（1行の箱の幅 --hw × 0.70）にする。 箱の右端は「ト」の字面の右端より外へ出る（字の右の余白）。最後の字の右を詰めて、字面の左右の空きを同じにする。 */ @media (max-width:1023px){ #hero .stage{ --fv-top:clamp(8px, 1.8svh, 20px); /* ヘッダーと見出しのあいだ */ --fv-pb:clamp(14px, 2.4svh, 26px); /* ボタンと画面の下端のあいだ */ --sx:.70; /* 見出しの横の詰め（PC の 0.7041 にそろえる） */ --hw:6.712; /* 1行の箱の幅（em）。6.902em から最後の字の右の .19em を引いた値 */ --hl:min(calc((100vw - 2 * var(--gut)) / (var(--hw) * var(--sx))), 14svh); /* 見出しの大きさ。1行で余白の内側いっぱい */ --hlh:.94; /* 人物の頭の位置 = 見出しの下端（髪が少しだけ重なる） */ --ptop:calc(var(--hd-top) + var(--hd-h) + var(--fv-top) + var(--hl) * var(--hlh) - var(--hl) * .06); --ps:calc((100svh - var(--ptop)) / 1234); /* 人物の素材（640×1234）の 1px が画面で何 px か */ --pn:clamp(50px, 7.6svh, 70px); /* 「15」の大きさ */ --bh:clamp(50px, 6.6svh, 58px); /* ボタンの高さ */ --emh:calc(var(--pn) * 1.36); /* 月桂冠の高さ */ --bw:140px; /* 支援可能の札の幅 */ --ov:12px; /* 札に人物がかぶる幅 */ /* 顔の中心の横の位置。札を左の余白に付けたときに髪が札に --ov かぶる位置と、画面の 52% の大きい方 （素材の顔の中心は横 43% = 275px。札の高さでの髪の輪郭は、そこから素材の 110px 左） */ --fx:max(calc(var(--gut) + var(--bw) - var(--ov) + var(--ps) * 110), 52%); width:auto; height:auto; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:stretch; padding:calc(var(--hd-top) + var(--hd-h) + var(--fv-top)) var(--gut) var(--fv-pb); overflow:hidden; } #hero .headline{ position:relative; z-index:4; left:auto; top:auto; flex:none; align-self:flex-start; display:block; white-space:nowrap; width:calc(100% / var(--sx)); /* JS が箱を余白の内側に縮めるので、縮小率はいつも --sx（字は横に伸びない） */ font-size:var(--hl); line-height:var(--hlh); /* 行の高さ（.94）より字面の下が出る分（ス・カ・ツの足）は、塗り（background-clip:text）の範囲の外で切れる。 塗りの範囲だけ下へ広げ、同じ分を margin で打ち消して、組みの位置は変えない */ padding-bottom:.12em; margin-bottom:-.12em; } #hero .headline i:nth-child(9){margin-right:-.19em} /* 人物：頭は見出しの下、下端は画面の下端。縦長の素材をそのまま使う */ #hero .person-wrap{ position:absolute; z-index:2; left:0; right:0; top:var(--ptop); bottom:0; width:auto; height:auto; margin:0; overflow:hidden; pointer-events:none; /* 下から：画面の下端で消える → ボタンの裏はうっすら → 月桂冠の裏で薄く → 胸から上はそのまま */ --b0:calc(var(--fv-pb) + var(--bh) * 2 + 16px); /* ボタンの上端（下から） */ -webkit-mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,.12) calc(var(--fv-pb) + 8px), rgba(0,0,0,.16) var(--b0), rgba(0,0,0,.24) calc(var(--b0) + var(--emh) * .6), rgba(0,0,0,.7) calc(var(--b0) + var(--emh) * 1.15), #000 calc(var(--b0) + var(--emh) * 1.65)); mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,.12) calc(var(--fv-pb) + 8px), rgba(0,0,0,.16) var(--b0), rgba(0,0,0,.24) calc(var(--b0) + var(--emh) * .6), rgba(0,0,0,.7) calc(var(--b0) + var(--emh) * 1.15), #000 calc(var(--b0) + var(--emh) * 1.65)); } #hero .person{ position:absolute; left:var(--fx); top:0; width:auto; max-width:none; height:100%; margin:0; transform:translateX(-43%); /* 素材の顔の中心（横 43%）を --fx に */ } #hero .col{ position:static; left:auto; bottom:auto; flex:none; width:100%; max-width:none; margin-top:auto; display:flex; flex-direction:column; align-items:stretch; } #hero .col > *{position:relative; z-index:4} /* FV の下端：次の章の地（#F2F3F4）へ溶かして境目を消す。人物より手前、文字とボタンより奥 */ #hero .stage::after{ content:""; position:absolute; z-index:3; left:0; right:0; bottom:0; height:calc(var(--fv-pb) + var(--bh) * .9); pointer-events:none; background:linear-gradient(180deg, rgba(242,243,244,0) 0%, #F2F3F4 100%); } /* 業種・業態・規模を問わず／支援可能：白地の札。顔の左に置き、人物の奥に回す。 札の下端 = 素材の上から 420px（肩の線が札の右下の角にかかる高さ） */ #hero .col > .badge{ position:absolute; z-index:1; left:calc(var(--fx) - var(--ps) * 110 + var(--ov) - var(--bw)); top:calc(var(--ptop) + var(--ps) * 420); transform:translateY(-100%); display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin:0; box-sizing:border-box; width:var(--bw); padding:13px 14px 14px 16px; background:#FFFFFF; border-radius:14px; box-shadow:0 18px 32px -16px rgba(14,26,44,.36), 0 3px 8px -3px rgba(14,26,44,.14); } #hero .badge b{ padding:0; border-radius:0; background:none; box-shadow:none; color:#111111; font-size:13px; font-weight:700; letter-spacing:.08em; text-indent:0; line-height:1.5; white-space:normal; width:6.6em; } #hero .badge b:first-child{background:none; color:#3A4350} #hero .badge b:last-child{ width:auto; white-space:nowrap; font-size:24px; font-weight:900; letter-spacing:.06em; line-height:1.15; background:none; color:#111111; } /* 月額15万円から：左右を月桂冠で囲んだ印。ボタンの上の中央 */ #hero .price-block-wrap{ display:flex; align-items:center; justify-content:center; gap:4px; margin:0 0 clamp(6px, 1.4svh, 14px); } #hero .laurel{display:block; flex:none; height:var(--emh); color:#1F2530; margin-right:calc(var(--emh) * -.12)} #hero .laurel-r{margin-right:0; margin-left:calc(var(--emh) * -.12)} #hero .laurel svg{display:block; height:100%; width:auto} #hero .laurel-r svg{transform:scaleX(-1)} #hero .price{ display:block; text-align:center; white-space:nowrap; text-shadow:0 0 12px rgba(242,243,244,.8), 0 0 3px rgba(242,243,244,.6); margin-top:calc(var(--pn) * .04); } #hero .unit-col{display:contents} #hero .price .yen{font-size:calc(var(--pn) * .3); margin-right:2px} #hero .price .num{font-size:var(--pn); margin:0 2px} #hero .price .unit{font-size:calc(var(--pn) * .33)} #hero .start{ display:block; text-align:center; font-size:13px; font-weight:700; letter-spacing:.16em; text-indent:.16em; margin-top:4px; color:#2B3442; } /* 診断レポートの札は出さず、上のボタンの2行目に入れる */ #hero .offer-wrap{display:none} #hero .btn{width:100%; height:var(--bh); padding:0 56px 0 20px; font-size:15px; letter-spacing:.04em} #hero .btn-primary{flex-direction:column; height:calc(var(--bh) + 6px); line-height:1.25} #hero .btn-primary .sub{display:block; margin-top:2px; font-size:12px; font-weight:500; letter-spacing:.08em; color:rgba(246,246,246,.78)} #hero .btn + .btn{margin-top:clamp(8px, 1.2svh, 10px)} #hero .btn .arrow{right:7px; width:calc(var(--bh) - 14px); height:calc(var(--bh) - 14px)} /* 動き（transform と opacity だけ。点滅はさせない） AI：開いたときに A・I の順に下から浮かび上がる。その後は字の中の光の当たり方が、左から右へゆっくり移って戻る （光の位置を変えた塗りを同じ字に重ね、その濃さだけを 12 秒かけて入れ替える）。 黒いボタン：8 秒に1回、光の帯が左から右へゆっくり渡り、それに合わせて矢印が右へ少し進んで戻る。 */ #hero .headline i.en{position:relative; animation:fvAiIn .9s cubic-bezier(.2,.7,.2,1) .15s both} #hero .headline i.en:nth-child(2){animation-delay:.3s} #hero .headline i.en::after{ position:absolute; left:0; top:0; padding:inherit; pointer-events:none; background: radial-gradient(56% 70% at 84% 22%, rgba(44,98,164,.98) 0%, rgba(44,98,164,0) 62%), radial-gradient(50% 62% at 24% 80%, rgba(20,84,100,.92) 0%, rgba(20,84,100,0) 64%), linear-gradient(150deg, #10141B 0%, #07090D 52%, #121720 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; opacity:0; animation:fvAiLight 12s ease-in-out 1.4s infinite; } #hero .headline i.en:nth-child(1)::after{content:"A"} #hero .headline i.en:nth-child(2)::after{content:"I"; animation-delay:1.9s} html.fv-wait #hero .headline i.en, html.fv-wait #hero .headline i.en::after{animation-play-state:paused} #hero .btn-primary{overflow:hidden; isolation:isolate} #hero .btn-primary::before{ content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; width:42%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,0) 100%); transform:translateX(-130%) skewX(-18deg); pointer-events:none; animation:fvSheen 8s cubic-bezier(.45,0,.25,1) 2.4s infinite; } #hero .btn-primary .arrow svg{animation:fvNudge 8s ease-in-out 2.4s infinite} } @keyframes fvAiIn{from{opacity:0; transform:translateY(.14em) scaleX(1.18)} to{opacity:1; transform:translateY(0) scaleX(1.18)}} @keyframes fvAiLight{0%,100%{opacity:0} 50%{opacity:1}} @keyframes fvSheen{0%{transform:translateX(-130%) skewX(-18deg)} 22%,100%{transform:translateX(320%) skewX(-18deg)}} @keyframes fvNudge{0%,6%,24%,100%{transform:translateX(0)} 14%{transform:translateX(3px)}} @media (max-width:1023px) and (prefers-reduced-motion: reduce){ #hero .headline i.en, #hero .headline i.en::after, #hero .btn-primary::before, #hero .btn-primary .arrow svg{animation:none} #hero .headline i.en::after, #hero .btn-primary::before{display:none} } /* 768〜1023px：組み方は同じ。文字とボタンを大きくし、ボタンの列は 460px で左に寄せる */ @media (min-width:768px) and (max-width:1023px){ #hero .stage{ --fv-top:clamp(12px, 2svh, 28px); --fv-pb:clamp(24px, 3.6svh, 44px); --hl:min(calc((100vw - 2 * var(--gut)) / (var(--hw) * var(--sx))), 15svh); --pn:clamp(76px, 8.4svh, 104px); --bh:64px; --bw:184px; --ov:16px; } #hero .col{align-items:flex-start} #hero .price-block-wrap, #hero .btn{max-width:460px} #hero .price-block-wrap{align-self:stretch} #hero .col > .badge{gap:5px; padding:18px 20px 20px 22px; border-radius:18px} #hero .badge b{font-size:17px} #hero .badge b:last-child{font-size:32px} #hero .start{font-size:15px} #hero .btn{padding:0 64px 0 24px; font-size:17px; letter-spacing:.04em} #hero .btn-primary .sub{font-size:13px} #hero .btn + .btn{margin-top:12px} #hero .btn .arrow{right:10px; width:44px; height:44px} } /* 1023px 以下の横長の画面（横向きのスマホ・タブレット）：人物はボタンの右に立つので、下端だけを溶かす。 見出しは左の列の幅に収め（画面いっぱいに合わせると、横に引き伸ばされる）、支援可能の札と月額は列の中に流して置く */ @media (max-width:1023px) and (min-aspect-ratio:1/1){ #hero .stage{ --hl:min(calc((100vw - 2 * var(--gut)) / (var(--hw) * var(--sx))), 18svh); padding-right:max(var(--gut), calc(100% - var(--gut) - max(var(--hl) * var(--hw) * var(--sx), min(460px, 60vw)))); } #hero .person{left:74%} #hero .person-wrap{ -webkit-mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,.5) var(--fv-pb), #000 calc(var(--fv-pb) + var(--bh) * 2)); mask-image:linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,.5) var(--fv-pb), #000 calc(var(--fv-pb) + var(--bh) * 2)); } #hero .col{align-items:flex-start} #hero .price-block-wrap, #hero .btn{max-width:min(460px, 60vw)} #hero .price-block-wrap{justify-content:flex-start} #hero .col > .badge{position:relative; left:auto; top:auto; transform:none; width:auto; z-index:4; margin:0 0 clamp(6px, 1.4svh, 14px)} } /* 高さの低い横長の画面（横向きのスマホ）：札の中を1行にし、月額とボタンを小さくして縦を詰める */ @media (max-width:1023px) and (min-aspect-ratio:1/1) and (max-height:600px){ #hero .stage{--fv-top:clamp(4px, 1.2svh, 12px); --fv-pb:clamp(12px, 3svh, 20px); --hl:min(calc((100vw - 2 * var(--gut)) / (var(--hw) * var(--sx))), 15svh); --pn:clamp(44px, 12svh, 64px); --bh:clamp(50px, 13svh, 58px)} #hero .col > .badge{flex-direction:row; flex-wrap:wrap; align-items:baseline; column-gap:.6em; padding:8px 16px 9px} #hero .badge b{font-size:13px} #hero .badge b:first-child{width:auto; white-space:nowrap} #hero .badge b:last-child{font-size:20px} #hero .btn .arrow{right:7px; width:calc(var(--bh) - 14px); height:calc(var(--bh) - 14px)} } /* 359px 以下（幅 320px の端末など）：「サービス概要資料をダウンロード」が2行に割れないよう、ボタンの字を少し小さくする */ @media (max-width:359px){ #hero .btn{font-size:13px; letter-spacing:.02em; padding:0 50px 0 14px} } /* 2026-09-22 板垣さん指示（スマホの FV）: 見出しは余白を詰めて大きく攻める。男性の頭は一段下げる。 支援可能の札は角を四角くした白のベタ塗りで、3行（業種・業態・／規模を問わず／支援可能）。支援可能だけを黒で大きく */ @media (max-width:1023px) and (max-aspect-ratio:1/1){ #hero .stage{ --gut:12px; --fv-top:clamp(2px, .6svh, 8px); --ptop:calc(var(--hd-top) + var(--hd-h) + var(--fv-top) + var(--hl) * var(--hlh) + var(--hl) * .22); --bw:156px; } #hero .col > .badge{border-radius:0; padding:14px 16px 15px; gap:4px; background:#FFFFFF; box-shadow:0 18px 30px -16px rgba(14,26,44,.40), 0 3px 8px -3px rgba(14,26,44,.14)} #hero .col > .badge b{font-size:15px; letter-spacing:.06em; line-height:1.45; width:6.5em} #hero .col > .badge b:first-child{color:#5A6270} #hero .col > .badge b:last-child{font-size:28px; letter-spacing:.04em; line-height:1.1; color:#111111} } /* 2026-09-22 板垣さん指示（参考: 行ごとに白地を敷いた見出し）: 札の面をやめ、1行ずつ四角い白のベタ塗りを敷く。 「業種・業態・」「規模を問わず」「支援可能」の3行。支援可能だけを黒で大きく */ @media (max-width:1023px) and (max-aspect-ratio:1/1){ #hero .col > .badge{background:none; box-shadow:none; padding:0; gap:5px; width:auto} #hero .col > .badge b:first-child{display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:auto; background:none} #hero .col > .badge b:first-child span, #hero .col > .badge b:last-child{display:block; background:#FFFFFF; border-radius:0; box-shadow:0 8px 16px -12px rgba(14,26,44,.45)} #hero .col > .badge b:first-child span{padding:4px 9px 5px; font-size:15px; letter-spacing:.06em; line-height:1.3; color:#3A4350} #hero .col > .badge b:last-child{padding:5px 10px 6px; font-size:28px; letter-spacing:.04em; line-height:1.15; color:#111111} #hero .laurel{color:#6E6552} } /* 2026-09-22 板垣さん指示（続き）: 3行とも支援可能に近い大きさで、不ぞろいな白地の帯。支援可能だけ黒地に白文字。 男性の手前（胸の左）に重ね、1枚ずつタイプするように出す。月桂冠は細い形のまま黒 */ @media (max-width:1023px) and (max-aspect-ratio:1/1){ #hero .col > .badge{z-index:5; top:calc(var(--ptop) + var(--ps) * 430); transform:none; gap:6px} #hero .col > .badge b:first-child{gap:6px} #hero .col > .badge b:first-child span{padding:5px 10px 6px; font-size:clamp(18px, 5.2vw, 21px); font-weight:800; letter-spacing:.04em; line-height:1.2; color:#111111} #hero .col > .badge b:first-child span:nth-child(2){margin-left:14px} #hero .col > .badge b:last-child{margin-left:4px; padding:6px 12px 7px; font-size:clamp(20px, 6vw, 24px); font-weight:900; letter-spacing:.06em; line-height:1.15; background:var(--g-black); color:#FFFFFF; box-shadow:0 12px 20px -12px rgba(4,10,20,.6)} #hero .laurel{color:#1A1F26} /* タイプするように1枚ずつ出す（左から字が現れる。字の数だけ段を刻む） */ #hero .col > .badge b:first-child span, #hero .col > .badge b:last-child{clip-path:inset(0 100% 0 0); animation:fvType .55s steps(6, end) forwards} #hero .col > .badge b:first-child span:nth-child(1){animation-delay:.7s} #hero .col > .badge b:first-child span:nth-child(2){animation-delay:1.35s} #hero .col > .badge b:last-child{animation-duration:.45s; animation-timing-function:steps(4, end); animation-delay:2.0s} html.fv-wait #hero .col > .badge b:first-child span, html.fv-wait #hero .col > .badge b:last-child{animation-play-state:paused} } @keyframes fvType{to{clip-path:inset(0 0 0 0)}} @media (max-width:1023px) and (max-aspect-ratio:1/1) and (prefers-reduced-motion:reduce){ #hero .col > .badge b:first-child span, #hero .col > .badge b:last-child{animation:none; clip-path:none} } /* 2026-09-22 板垣さん指示（続き）: 3枚の帯の左端をそろえ、字の大きさも3枚でそろえる。帯は字の幅ぴったり（右に空きを作らない） */ @media (max-width:1023px) and (max-aspect-ratio:1/1){ #hero .col > .badge b:first-child span:nth-child(2), #hero .col > .badge b:last-child{margin-left:0} #hero .col > .badge b:first-child span, #hero .col > .badge b:last-child{ width:max-content; padding:5px 9px 6px 10px; font-size:clamp(18px, 5.2vw, 21px); font-weight:800; letter-spacing:.04em; text-indent:0; line-height:1.2; white-space:nowrap} #hero .col > .badge b:last-child{font-weight:900; padding:5px 9px 6px 10px} } /* 2026-09-22 板垣さん指示: 出てくる時の動き（PC・スマホ共通） ・見出し「AIでコストカット」: 左から1字ずつ打たれるように現れる（見出しの箱ごと切り抜きで見せる。字の塗りを崩さない） ・支援可能の札（PC）: スマホと同じく、札が1枚ずつ打たれるように出る ・診断レポートをプレゼント: ゆっくり揺れる */ /* 見出しは箱ごと切り抜かない（切り抜きの途中や端で字が見切れるため）。1字ずつ順に打たれるように出す */ #hero .headline{animation:headpulse 8s ease-in-out 1.4s infinite} #hero .headline i{animation:fvChar .01s linear both} #hero .headline i:nth-child(1){animation-delay:.15s} #hero .headline i:nth-child(2){animation-delay:.27s} #hero .headline i:nth-child(3){animation-delay:.39s} #hero .headline i:nth-child(4){animation-delay:.51s} #hero .headline i:nth-child(5){animation-delay:.63s} #hero .headline i:nth-child(6){animation-delay:.75s} #hero .headline i:nth-child(7){animation-delay:.87s} #hero .headline i:nth-child(8){animation-delay:.99s} #hero .headline i:nth-child(9){animation-delay:1.11s} /* 字の中の塗りは見出しの箱の背景（background-clip:text）なので、字ごとに opacity を掛けると塗りから外れて消える。 visibility だけを切り替える（層を作らない） */ @keyframes fvChar{from{visibility:hidden} to{visibility:visible}} html.fv-wait #hero .headline i{animation-play-state:paused} /* PC の A・I も同じく打つ（スマホの A・I は、下から浮かぶ動き fvAiIn をそのまま使う） */ @media (min-width:1024px){ #hero .headline i.en{animation:fvChar .01s linear both} } @media (min-width:1024px){ #hero .badge b{clip-path:inset(0 100% 0 0); animation:fvType .6s steps(12, end) 1.3s forwards} #hero .badge b:last-child{animation-duration:.4s; animation-timing-function:steps(4, end); animation-delay:1.95s} html.fv-wait #hero .badge b{animation-play-state:paused} } @keyframes fvType{to{clip-path:inset(0 0 0 0)}} #hero .offer{transform-origin:50% 0; animation:fvSway 3.2s ease-in-out 2.2s infinite} @keyframes fvSway{0%,100%{transform:rotate(0)} 20%{transform:rotate(-3deg)} 45%{transform:rotate(2.4deg)} 65%{transform:rotate(-1.4deg)} 82%{transform:rotate(.6deg)}} @media (max-width:1023px){ #hero .btn-primary .sub{display:inline-block; transform-origin:50% 0; animation:fvSway 3.2s ease-in-out 2.6s infinite} } html.fv-wait #hero .offer, html.fv-wait #hero .btn-primary .sub{animation-play-state:paused} @media (prefers-reduced-motion: reduce){ #hero .headline, #hero .headline i, #hero .badge b, #hero .offer, #hero .btn-primary .sub{animation:none; clip-path:none} } /* 2026-09-22 板垣さん指示: PC の「業種・業態・規模を問わず／支援可能」を、スマホと同じ表現にそろえる（並びは PC のまま横1行）。 白の帯は透かさない白のベタ、角は四角、字は詰めて太く。支援可能だけ黒地に白。帯の下に同じ浅い影 */ @media (min-width:1024px){ #hero .badge{gap:8px; align-items:flex-start} #hero .badge b{ padding:7px 12px 8px 13px; border-radius:0; font-size:24px; font-weight:800; letter-spacing:.04em; text-indent:0; line-height:1.2; box-shadow:0 10px 18px -12px rgba(14,26,44,.45); } #hero .badge b:first-child{background:#FFFFFF; color:#111111} #hero .badge b:last-child{font-weight:900; background:var(--g-black); color:#FFFFFF; box-shadow:0 12px 20px -12px rgba(4,10,20,.6)} } /* 札のタイプの動き：終わったら切り抜きを外す（帯の下の影が切れないように）。PC・スマホ共通 */ @keyframes fvType2{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}} @media (min-width:1024px){ #hero .badge b{clip-path:none; animation-name:fvType2; animation-fill-mode:backwards} } @media (max-width:1023px) and (max-aspect-ratio:1/1){ #hero .col > .badge b:first-child span, #hero .col > .badge b:last-child{clip-path:none; animation-name:fvType2; animation-fill-mode:backwards} } @media (prefers-reduced-motion: reduce){ #hero .badge b, #hero .col > .badge b:first-child span{animation:none} } #approach .wrapx{font-family:"Noto Sans JP", system-ui, sans-serif} /* ── 地に敷く大きな文字。平らな色で、影も縁も付けない ── */ #approach .ap-bgw{ position:absolute; right:152px; top:150px; z-index:0; text-align:right; font-size:156px; font-weight:900; line-height:1.02; letter-spacing:.03em; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; } #approach .ap-bgw span{display:block} /* ── 話の入口 ── */ #approach .ap-head{position:absolute; left:152px; top:132px; width:880px; z-index:2} #approach .ap-ttl .nw{display:inline-block; white-space:nowrap} /* リード文は PC では1文ずつ改行する（語の途中で折らない） */ #approach .ap-lead .ap-s{display:block} #approach .ap-ttl{ font-size:62px; font-weight:900; letter-spacing:.03em; line-height:1.3; color:var(--ink); } #approach .ap-lead{ margin-top:22px; width:756px; font-size:15px; font-weight:500; line-height:2.1; letter-spacing:.05em; color:var(--ink2); } /* ══ やること（工程） → 行き着く先（ゴール） → その結果 ══ 真っ白な地なので、細い罫・余白・文字の大小だけで組む。面は塗らない。 */ #approach .ap-flow{position:absolute; left:152px; top:380px; width:1282px; height:330px; z-index:1} /* ── 束ねて渡す線。角は丸めて、左から順に流れ込ませる ── */ #approach .ap-wire{ position:absolute; left:0; top:0; z-index:0; fill:none; stroke:url(#apWireBase); stroke-width:1.1; overflow:visible; } #approach .ap-wire g{ opacity:0; transform:translateX(-14px); transition:opacity .56s ease, transform .56s cubic-bezier(.2,.7,.2,1); } #approach .ap-wire g.in{opacity:1; transform:none} #approach .ap-wire .w1{transition-delay:.34s} #approach .ap-wire .w2{transition-delay:.60s} #approach .ap-wire .w3{transition-delay:.92s} /* ── やること。5つは同じ重さで、小さく淡く積む ── */ #approach .ap-steps{list-style:none; position:relative; z-index:1} #approach .ap-steps li{ position:absolute; left:0; width:408px; height:60px; border-bottom:1px solid var(--hair); opacity:0; transform:translateY(10px); transition:opacity .46s ease, transform .46s cubic-bezier(.2,.7,.2,1); } #approach .ap-steps li.in{opacity:1; transform:none} #approach .ap-steps li:nth-child(1){top:15px; border-top:1px solid var(--hair); transition-delay:.06s} #approach .ap-steps li:nth-child(2){top:75px; transition-delay:.12s} #approach .ap-steps li:nth-child(3){top:135px; transition-delay:.18s} #approach .ap-steps li:nth-child(4){top:195px; transition-delay:.24s} #approach .ap-steps li:nth-child(5){top:255px; transition-delay:.30s} #approach .ap-steps .nm{ display:block; padding-left:2px; line-height:59px; font-size:16px; font-weight:600; letter-spacing:.05em; color:var(--ink2); } /* ── 行き着く先。工程よりはっきり大きく、罫は敷かない ── */ #approach .ap-goals{list-style:none; position:relative; z-index:1} #approach .ap-goals li{ position:absolute; left:710px; height:44px; opacity:0; transform:translateY(8px); transition:opacity .48s ease .76s, transform .48s cubic-bezier(.2,.7,.2,1) .76s; } #approach .ap-goals li.in{opacity:1; transform:none} #approach .ap-goals li:nth-child(1){top:83px} #approach .ap-goals li:nth-child(2){top:203px} #approach .ap-goals .gn{ display:block; line-height:44px; white-space:nowrap; font-size:28px; font-weight:800; letter-spacing:.04em; color:var(--ink); } /* ── その結果。白い面をひとつだけ浮かせる ── */ /* 白い枠で囲うとチープに見えるので、線の延長にそのまま置く。 面は塗らず、うしろのやわらかい光だけで「ここが行き着く先」だと分からせる。 */ #approach .ap-res{ position:absolute; left:1012px; top:104px; width:282px; height:124px; z-index:1; display:flex; align-items:center; transition-delay:1.10s; } #approach .ap-res .glow{ position:absolute; left:-96px; top:-104px; width:470px; height:330px; z-index:-1; border-radius:50%; pointer-events:none; background: radial-gradient(48% 46% at 42% 50%, rgba(9,111,200,.20) 0%, rgba(9,111,200,0) 70%), radial-gradient(64% 58% at 52% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 72%); animation:apbreath 9s ease-in-out infinite; /* 点滅ではなく、ゆっくり息をする */ } @keyframes apbreath{0%,100%{opacity:.72; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)}} #approach .ap-res p{ font-size:44px; font-weight:900; letter-spacing:.04em; line-height:1.2; background:linear-gradient(104deg, #0A4E8C 0%, #096FC8 42%, #2E9BFF 78%, #0A5FAE 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* ── 真ん中の AI。丸は面を塗らず、細い線2本だけで薄く組む ── */ #approach .ap-ai{ position:absolute; left:510px; top:115.5px; width:100px; height:100px; z-index:2; display:flex; align-items:center; justify-content:center; border-radius:50%; transition-delay:.56s; } #approach .ap-ai .o1, #approach .ap-ai .o2{ position:absolute; border-radius:50%; pointer-events:none; } #approach .ap-ai .o1{inset:0; border:1px solid rgba(17,17,17,.30); background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 72%)} #approach .ap-ai .o2{inset:-12px; border:1px solid rgba(17,17,17,.10)} #approach .ap-ai .ai{ font-size:44px; font-weight:900; letter-spacing:-.01em; line-height:1; transform:scaleX(1.12); background: radial-gradient(58% 70% at var(--ax1, 20%) var(--ay1, 24%), rgba(28,70,128,.95) 0%, rgba(28,70,128,0) 62%), radial-gradient(52% 64% at var(--ax2, 80%) var(--ay2, 70%), rgba(22,76,92,.92) 0%, rgba(22,76,92,0) 64%), radial-gradient(46% 58% at var(--ax3, 50%) var(--ay3, 90%), rgba(14,98,120,.78) 0%, rgba(14,98,120,0) 66%), linear-gradient(150deg, #161B24 0%, #0A0D12 52%, #151A22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; padding:0 .08em .06em; margin:0 -.08em -.06em; animation:aiflow 16s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce){ #approach .ap-ai .ai{animation:none} } #approach .ap-wire .wf path{stroke:url(#apWireFlow); stroke-width:1.4} /* ══ 1023px 以下：PC と同じ語り方を、上から下へ組み直す ══ PC の座標を縮めるだけだと工程の文字が 4px 前後になるので、スマホ用に組み直す。 図は 335×470 の升目で決め、1升（--u）を図の実幅 ÷ 335 にする（375px の画面でちょうど 1px）。 文字も線も枠も同じ升目で伸び縮みするので、幅が変わっても線と文字がずれない。 上 「弊社のアプローチ」は PC と同じ地の大きく薄い文字のまま、見出しの上に1行で置く（見出しには重ねない） 工程 5つを角丸の白い枠1枚に収め、中を細い罫で 2・2・1 に区切る。番号・丸・横に張り出す線は使わない。 PC の「5本を束ねて AI へ」は、スマホでは枠で束ねて、枠の下の真ん中から1本で AI へ入る 先 AI から「ツール解約」「工数の削減」の2つへ左右に分かれ、また合わさって「コストの削減」へ（PC と同じ分かれ方） 大小は PC と同じ（工程は小さく淡く、行き着く先ははっきり大きく、コストの削減がいちばん大きい） 画面に入ったら一度だけ、枠が出る → 工程の文字が順に出る → AI へ線が降りる → 2つへ分かれる → 合わさってコストの削減へ。 動きは opacity・transform・stroke-dashoffset だけ。そのあとは線の上を濃い帯がゆっくり下へ流れる（PC と同じ）。点滅はしない。 */ @media (max-width:1023px){ #approach{--fw:min(calc(100vw - 2 * var(--gut)), 370px); --u:calc(var(--fw) / 335)} /* 下の余白は多めに取る。地の色は「画面の 72% の線にかかった章」で切り替わるので、 章が短いと図を画面の上半分で見ているうちに次の章（サービスの特徴）の濃い地に変わってしまう */ #approach .wrapx{position:relative; inset:auto; padding:56px var(--gut) max(112px, 17svh); overflow-x:clip} /* 「弊社のアプローチ」は地の大きく薄い文字（色・太さは PC のまま）。見出しに重ねず、上に1行で置く。 前の形（画面幅 ÷ 8.3）より一回り小さく、画面幅 ÷ 10.5 にする */ #approach .ap-bgw{ position:relative; right:auto; top:auto; z-index:0; text-align:left; margin:0 0 6px -.04em; font-size:min(calc((100vw - 2 * var(--gut)) / 10.5), 44px); line-height:1.1; } #approach .ap-bgw span{display:inline} #approach .ap-head{position:relative; left:auto; top:auto; width:auto} /* 見出しは「目指すのは」「AI導入のその先」の2行。2行目が画面幅いっぱい近くになる大きさにする （「AI導入のその先」の幅は字の大きさの約 7.2 倍） */ #approach .ap-ttl{ font-size:min(calc((100vw - 2 * var(--gut)) / 7.4), 64px); line-height:1.3; letter-spacing:.02em; } #approach .ap-ttl .nw{display:block} /* リード文 */ #approach .ap-lead .ap-s{display:inline} #approach .ap-lead{width:auto; margin-top:20px; font-size:14px; line-height:1.95; letter-spacing:.04em; word-break:auto-phrase; text-wrap:pretty} #approach .ap-flow{ position:relative; left:auto; top:auto; z-index:1; width:var(--fw); height:calc(470 * var(--u)); margin:44px auto 0; } #approach .ap-wire{display:none} /* 線（スマホ用に引き直したもの） */ #approach .ap-mw{ display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; overflow:visible; fill:none; stroke:url(#apMwBase); stroke-width:1.1; } #approach .ap-mw .mf path{stroke:url(#apMwFlow); stroke-width:1.4} /* 動きを始める合図。工程の枠と AI の丸が画面に入った所（図の上から 236 升）で .in が付く */ #approach .ap-mt{display:block; position:absolute; left:0; top:calc(236 * var(--u)); width:1px; height:2px; opacity:0; transform:none; pointer-events:none} /* やること。角丸の白い枠1枚に、細い罫で 2・2・1 に区切って収める。5つは同じ重さ・同じ大きさ */ #approach .ap-steps{ position:absolute; left:0; top:0; z-index:1; width:100%; height:calc(150 * var(--u)); display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, 1fr); border:1px solid rgba(17,17,17,.09); border-radius:calc(18 * var(--u)); overflow:hidden; background:rgba(255,255,255,.74); box-shadow:0 calc(18 * var(--u)) calc(36 * var(--u)) calc(-26 * var(--u)) rgba(24,38,64,.30); } #approach .ap-steps li, #approach .ap-steps li:nth-child(n){ position:relative; left:auto; top:auto; width:auto; height:auto; border:0; display:flex; align-items:center; justify-content:center; } #approach .ap-steps li:nth-child(-n+4){border-bottom:1px solid rgba(17,17,17,.075)} #approach .ap-steps li:nth-child(1), #approach .ap-steps li:nth-child(3){border-right:1px solid rgba(17,17,17,.075)} #approach .ap-steps li:nth-child(5){grid-column:1 / -1} #approach .ap-steps .nm{ padding:0 0 0 .05em; white-space:nowrap; font-size:calc(14.5 * var(--u)); line-height:1.4; letter-spacing:.05em; } /* 真ん中の AI。PC と同じ細い線2本の丸。枠の下から1本で入り、下で2つに分かれる */ #approach .ap-ai{left:calc(135.5 * var(--u)); top:calc(184 * var(--u)); width:calc(64 * var(--u)); height:calc(64 * var(--u)); margin:0} #approach .ap-ai .o2{inset:calc(-7 * var(--u))} #approach .ap-ai .ai{font-size:calc(28 * var(--u))} /* 行き着く先。PC と同じく2つに分けて、左右に並べる */ #approach .ap-goals{position:absolute; inset:0; z-index:1} #approach .ap-goals li, #approach .ap-goals li:nth-child(n){ position:absolute; top:calc(316 * var(--u)); width:50%; height:calc(30 * var(--u)); text-align:center; } #approach .ap-goals li:nth-child(1){left:0} #approach .ap-goals li:nth-child(2){left:50%} #approach .ap-goals .gn{padding-left:.04em; font-size:calc(22 * var(--u)); line-height:calc(30 * var(--u)); letter-spacing:.04em} /* その結果。2本が合わさった先に1行で大きく。後ろのやわらかい光は PC のまま */ #approach .ap-res{left:0; top:calc(400 * var(--u)); width:100%; height:calc(62 * var(--u)); justify-content:center} #approach .ap-res .glow{left:calc(8 * var(--u)); top:calc(-46 * var(--u)); width:calc(319 * var(--u)); height:calc(154 * var(--u))} #approach .ap-res p{font-size:calc(46 * var(--u)); line-height:1.25; letter-spacing:.04em; white-space:nowrap} #approach .ap-res p span{display:inline} /* ── 画面に入ったときの動き（一度だけ）。transform・opacity・stroke-dashoffset だけを使う ── */ /* 線の長さ・かかる時間・待ち時間は、それぞれの線に変数で持たせる（指定の強さの競り合いで待ち時間が消えないように） */ #approach .ap-mw .m path{ stroke-dasharray:var(--l); stroke-dashoffset:var(--l); transition:stroke-dashoffset var(--dd, .3s) var(--de, cubic-bezier(.4,0,.3,1)) var(--dl, 0s); } /* 工程は、枠が出てから文字が順に出る（li そのものは動かさない。罫が揺れないように） */ #approach .ap-flow .ap-steps li.rv, #approach .ap-flow .ap-steps li.rv.in{opacity:1; transform:none; transition:none} #approach .ap-flow .ap-steps{ opacity:0; transform:translateY(calc(10 * var(--u))); transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); } #approach .ap-flow .ap-steps .nm{ opacity:0; transform:translateY(calc(5 * var(--u))); transition:opacity .45s ease var(--nd, .16s), transform .55s cubic-bezier(.2,.7,.2,1) var(--nd, .16s); } #approach .ap-flow .ap-steps li:nth-child(2){--nd:.24s} #approach .ap-flow .ap-steps li:nth-child(3){--nd:.32s} #approach .ap-flow .ap-steps li:nth-child(4){--nd:.40s} #approach .ap-flow .ap-steps li:nth-child(5){--nd:.50s} #approach .ap-mw .s1{--dl:.66s} #approach .ap-mw .s2, #approach .ap-mw .s3{--dd:.5s; --dl:1.10s} #approach .ap-mw .s4, #approach .ap-mw .s5{--dd:.5s; --dl:1.86s} #approach .ap-mw .mf{opacity:0; transition:opacity 1.4s ease 3.2s} #approach .ap-flow .ap-ai.rv{ opacity:0; transform:scale(.92); transition:opacity .6s ease .86s, transform .8s cubic-bezier(.2,.7,.2,1) .86s; } #approach .ap-flow .ap-goals li.rv{ opacity:0; transform:translateY(calc(-6 * var(--u))); transition:opacity .5s ease 1.46s, transform .6s cubic-bezier(.2,.7,.2,1) 1.46s; } #approach .ap-flow .ap-goals li.rv:nth-child(2){transition-delay:1.52s} #approach .ap-flow .ap-res.rv{ opacity:0; transform:translateY(calc(-8 * var(--u))); transition:opacity .9s ease 2.24s, transform 1s cubic-bezier(.2,.7,.2,1) 2.24s; } #approach .ap-flow .ap-mt.in ~ .ap-steps, #approach .ap-flow .ap-mt.in ~ .ap-steps .nm, #approach .ap-flow .ap-mt.in ~ .ap-ai.rv, #approach .ap-flow .ap-mt.in ~ .ap-goals li.rv, #approach .ap-flow .ap-mt.in ~ .ap-res.rv{opacity:1; transform:none} #approach .ap-mt.in ~ .ap-mw .m path{stroke-dashoffset:0} #approach .ap-mt.in ~ .ap-mw .mf{opacity:1} /* 工程の枠と文字は、枠の行そのものが画面に入ったら出す（線の合図を待たない。ゆっくり送っても枠の所が空いて見えないように）。 :has() が使えない端末ではこの規則ごと読まれず、上の合図で出る */ #approach .ap-flow .ap-steps:has(li.in), #approach .ap-flow .ap-steps:has(li.in) li.in .nm{opacity:1; transform:none} } @media (min-width:768px) and (max-width:1023px){ #approach{--fw:400px} #approach .wrapx{padding:80px var(--gut) max(168px, 18svh)} #approach .ap-lead{max-width:640px; font-size:15px} #approach .ap-flow{margin:64px auto 0} } /* 動きを減らす設定の端末では、最初から出そろった形で見せる */ @media (max-width:1023px) and (prefers-reduced-motion: reduce){ #approach .ap-flow .ap-steps, #approach .ap-flow .ap-steps .nm, #approach .ap-flow .ap-steps li.rv, #approach .ap-flow .ap-ai.rv, #approach .ap-flow .ap-goals li.rv, #approach .ap-flow .ap-res.rv{opacity:1; transform:none; transition:none} #approach .ap-mw .m path{stroke-dasharray:none; stroke-dashoffset:0; transition:none} #approach .ap-mw .mf{display:none} } /* スマホ用に足した線と合図は、PC では出さない（PC の見た目は変えない） */ @media (min-width:1024px){ #approach .ap-mw, #approach .ap-mt{display:none} } /* 2026-09-22 板垣さん指示: スマホの5工程の枠は、白い面をやめて線で囲む（中の区切りも線のまま） */ @media (max-width:1023px){ #approach .ap-steps{background:none; box-shadow:none; border:1px solid rgba(17,17,17,.32)} #approach .ap-steps li:nth-child(-n+4){border-bottom-color:rgba(17,17,17,.22)} #approach .ap-steps li:nth-child(1), #approach .ap-steps li:nth-child(3){border-right-color:rgba(17,17,17,.22)} } /* ── 白で待機し、章に入ったところでふわっと暗くなる ── --ftd は地の暗さ（0＝明るい地で待機／1＝濃いグレーの地）、--ftt は文字の色（0＝墨／1＝白）。 地は1秒かけて暗くする。文字・罫・地に敷く英字は、地が墨と白のどちらでも同じくらい読める濃さ（#767B80 前後、0.76 秒ごろ）を またぐ 0.2 秒だけで墨から白へ移す（地と同じ速さで移すと、途中で文字と地が同じ明るさになり、画面の文字が一瞬消える）。 --ftd は子に受け継がない（地を暗くする1秒のあいだ、章の中の文字や部品のスタイルを計算し直さない）。 .is-dark は shell.html のスクリプトが付け外しする（入ったら付け、画面から完全に外れたら動かさずに外す） */ @property --ftd{syntax:''; inherits:false; initial-value:0} @property --ftt{syntax:''; inherits:true; initial-value:0} @property --ftrgb{syntax:'*'; inherits:false} /* 地の色の途中の値。これも子に受け継がない */ /* 色は rgba(calc()) で墨の値から白の値へ直線で渡す（color-mix は古い iPhone で効かず、暗い地に黒い文字が残るため） */ section.sc#features{ --ftd:0; --ftt:0; --ftw:calc(17 + 238 * var(--ftt)); /* 墨 #111111 → 白 #FFFFFF */ --ink:rgb(var(--ftw), var(--ftw), var(--ftw)); --ink2:rgba(calc(36 + 219 * var(--ftt)), calc(45 + 210 * var(--ftt)), calc(58 + 197 * var(--ftt)), calc(1 - .12 * var(--ftt))); /* #242D3A → 白 .88 */ --ink3:rgba(calc(34 + 221 * var(--ftt)), calc(42 + 213 * var(--ftt)), calc(54 + 201 * var(--ftt)), calc(1 - .26 * var(--ftt))); /* #222A36 → 白 .74 */ --hair:rgba(var(--ftw), var(--ftw), var(--ftw), calc(.13 + .13 * var(--ftt))); /* 罫 */ --pale:rgba(var(--ftw), var(--ftw), var(--ftw), calc(.075 + .025 * var(--ftt))); /* 地に敷く英字・番号 */ transition:--ftd 1s cubic-bezier(.37,0,.63,1), --ftt .2s cubic-bezier(.3,0,.2,1) .7s; } section.sc#features.is-dark{--ftd:1; --ftt:1} /* 読み込み直後（位置が落ち着くまで）と、画面から外れて白へ戻すときは動かさない */ html.tone-instant section.sc#features, section.sc#features.ft-snap{transition:none} /* 動きを減らす設定では、動かさずに切り替える（白で待機 → 暗い、の変化は残す） */ @media (prefers-reduced-motion: reduce){ section.sc#features{transition:none} } #features .wrapx{font-family:"Noto Sans JP", system-ui, sans-serif} /* ── 見出し（メディア・フローと同じ形） ── */ #features .bgw{ position:absolute; left:128px; top:62px; z-index:0; font-size:156px; font-weight:900; letter-spacing:.05em; line-height:1; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; } #features .ttl{position:absolute; left:152px; top:104px; z-index:2} #features .ttl .a{display:block; color:var(--ink2); font-size:26px; font-weight:700; letter-spacing:.05em} #features .ttl .b{display:block; margin-top:8px; font-size:54px; font-weight:900; letter-spacing:.04em; color:var(--ink)} /* ── 4つを縦に積む。1段 580px。段の下端に細い罫を引き、素材はその罫で断ち落とす ── */ #features .ft-list{position:absolute; left:152px; top:300px; width:1282px; z-index:1} #features .ft{position:relative; height:580px} #features .ft::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:4; background:var(--hair); } /* 素材の側（pr: 右に素材 / pl: 左に素材） */ #features .stg{position:absolute; top:0; bottom:0; width:640px} #features .pr .stg{right:0} #features .pl .stg{left:0} /* うしろのやわらかい光（白） */ #features .glow{ position:absolute; left:50%; top:-10px; z-index:0; width:640px; height:560px; margin-left:-320px; border-radius:50%; /* 白を目立たせない。うっすら明るくするだけ */ background:radial-gradient(closest-side, rgba(255,255,255,.16) 0%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.02) 75%, rgba(255,255,255,0) 100%); } #features .glow.rv{transform:scale(.86); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)} #features .glow.rv.in{transform:none} /* 素材。下だけを罫の位置で切る（上と左右は切らない） */ #features .clip{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:2; clip-path:inset(-400px -400px 0 -400px); } #features .fig{position:absolute; bottom:0} #features .fig img{ display:block; width:100%; height:auto; filter:contrast(1.04) saturate(1.02) drop-shadow(0 24px 30px rgba(14,26,44,.20)) drop-shadow(0 6px 10px rgba(14,26,44,.10)); } /* 罫の下から、ふわっと立ち上がる */ #features .fig.rv{transform:translateY(90px); transition:opacity .9s ease, transform 1s cubic-bezier(.16,.84,.24,1)} #features .fig.rv.in{transform:none} /* 01 ─ 説明する担当者（手前・左）と、聞いて顔を上げる社員（奥・右） */ /* 下の手は素材の端で切れているので、罫の下へ送って隠す */ /* 当社のマークを入れた淡い円（当社のロックアップと同じ組み方）。面の厚みは光と影で出す */ /* 01 ─ 当社のマークの円（曇りガラス）を背にしたコンサルタントと、向かいの社員。2人は重ねない */ #features .s1 .orb{ position:absolute; left:-12px; top:60px; width:290px; height:290px; border-radius:50%; z-index:1; background:radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.08) 100%); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 30px 60px -34px rgba(8,14,24,.45), inset 0 1px 1px rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.26); } #features .s1 .orb img{position:absolute; left:50%; top:50%; width:132px; height:auto; transform:translate(-50%,-50%)} #features .s1 .orb.rv{transform:scale(.9); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)} #features .s1 .orb.rv.in{transform:none} #features .s1 .clip{z-index:2} #features .s1 .f-guide {left:14px; width:400px; bottom:-18px; z-index:2} /* コンサルタント。右（社員の側）を向く */ #features .s1 .f-guide img{transform:scaleX(-1)} #features .s1 .f-learner{right:-14px; width:282px; bottom:-40px; z-index:1} /* 社員。左（コンサルタントの側）を向く */ #features .s1 .glow{display:none} /* 02 ─ お支払いの流れを3枚の札で見せる：構築 0円 → テスト期間 0円 → 導入後 保守費のみ（3枚目が主役）。 1・2枚目は小さな薄いガラスの札（「名前 … 0円」を1行。まだお支払いはない）。 3枚目だけを一回り大きな白い札にして浮かせ、墨で「導入後／保守費のみ」を大きく置く（お支払いが生じるのはここだけ）。 点・線・アイコン・点滅は使わない。青も使わない。文字は HTML。 寸法は素材の枠 640×580 の上の数字 × --k（PC は 1px。1023px 以下は段の幅に合わせて縮む --u）。文字は 12px を下回らない */ #features .s2 .stg{--k:var(--u, 1px); --in:calc(16 * var(--k)); --px:calc(22 * var(--k))} #features .s2 .pay{position:absolute; left:calc(326 * var(--k)); top:calc(142 * var(--k)); width:calc(300 * var(--k)); margin:0; padding:0; list-style:none; z-index:2; display:flex; flex-direction:column; gap:calc(12 * var(--k))} #features .s2 .st{position:relative; display:flex; align-items:baseline; justify-content:space-between; gap:calc(12 * var(--k)); margin:0 var(--in); padding:calc(17 * var(--k)) var(--px) calc(16 * var(--k)); border-radius:calc(18 * var(--k)); border:1px solid rgba(255,255,255,.26); background:linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 100%); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 calc(14 * var(--k)) calc(28 * var(--k)) calc(-18 * var(--k)) rgba(8,14,24,.40)} #features .s2 .st .lb{display:block; font-size:max(12px, calc(17 * var(--k))); line-height:1.4; font-weight:700; letter-spacing:.1em; color:var(--ink2); white-space:nowrap} #features .s2 .st .vl{display:block; white-space:nowrap; font-size:max(24px, calc(36 * var(--k))); line-height:1; font-weight:900; letter-spacing:.02em; color:var(--ink)} #features .s2 .st .vl small{margin-left:.1em; font-size:.5em; font-weight:700; letter-spacing:.04em} /* 3枚目：一回り大きな白い札。左右に張り出し、影で浮かせる */ #features .s2 .st3{display:block; margin:calc(6 * var(--k)) 0 0; padding:calc(24 * var(--k)) calc(26 * var(--k)) calc(28 * var(--k)); border:0; border-radius:calc(24 * var(--k)); background:linear-gradient(170deg, #FFFFFF 0%, #F1F2F4 100%); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 calc(34 * var(--k)) calc(56 * var(--k)) calc(-26 * var(--k)) rgba(8,14,24,.55), 0 calc(3 * var(--k)) calc(8 * var(--k)) rgba(8,14,24,.12), inset 0 -1px 0 rgba(8,14,24,.06)} #features .s2 .st3 .lb{color:#5C6168} #features .s2 .st3 .vl{margin-top:calc(12 * var(--k)); font-size:max(26px, calc(48 * var(--k))); letter-spacing:.03em; color:#111111} #features .s2 .st.rv{transform:translateY(18px)} #features .s2 .st3.rv{transform:translateY(26px)} #features .s2 .st.rv.in{transform:none} /* 02 ─ タブレットを持って右上の図を見る男性。左に置き、胴は段の罫で断ち落とす */ #features .s2 .f-smile{left:-70px; width:372px; bottom:-2px; z-index:3} /* 03 ─ コストカットダッシュボード。キーボードも台座もない薄い PC の画面とスマホを、斜めに振って前後に置く。 奥の PC＝ダッシュボード、右手前のスマホ＝業務の一覧。2台は必ず同じ角度にそろえ（端末ごとに向きを変えない）、奥行きは前後の距離（translateZ）だけで出す。 遠近は .dev の perspective 1つで掛け、2台が同じ消失点を持つようにする。 傾けは各端末の .mb に掛け（.mon / .phn は preserve-3d で .dev の遠近を通す）、上下の浮きは .mon / .phn に掛ける（transform がぶつからないように分ける）。 寸法は素材の枠 640×580 の上の数字 × --k（PC は 1px。1023px 以下は段の幅に合わせて縮む --u を使う）。 画面の中身は for Clients の実際の画面を撮った画像（PC 16:10・スマホ 390×844） */ #features .s3 .stg{--k:var(--u, 1px); --tm:rotateY(-18deg) rotateX(5deg); --tp:rotateY(-18deg) rotateX(5deg) translateZ(calc(40 * var(--k)))} #features .s3 .glow{display:none} #features .s3 .dev{position:absolute; left:0; top:0; width:calc(640 * var(--k)); height:calc(580 * var(--k)); z-index:2; perspective:calc(1800 * var(--k)); perspective-origin:40% 50%} #features .s3 .dev.rv{transform:translateY(calc(24 * var(--k))); transition:opacity .9s ease, transform 1.1s cubic-bezier(.16,.84,.24,1)} #features .s3 .dev.rv.in{transform:none} /* 床に落ちる影（浮いているので、本体から離れたところにぼんやり落とす） */ #features .s3 .flr{position:absolute; display:block; border-radius:50%; background:radial-gradient(closest-side, rgba(16,20,28,.36) 0%, rgba(16,20,28,.16) 45%, rgba(16,20,28,0) 100%)} #features .s3 .fm{left:calc(40 * var(--k)); top:calc(430 * var(--k)); width:calc(440 * var(--k)); height:calc(34 * var(--k))} #features .s3 .fp{left:calc(430 * var(--k)); top:calc(480 * var(--k)); width:calc(180 * var(--k)); height:calc(30 * var(--k))} /* 端末の外形。銀の縁 → 黒いガラスの額 → 画面。角は大きく丸める */ #features .s3 .mon{position:absolute; left:calc(10 * var(--k)); top:calc(96 * var(--k)); width:calc(500 * var(--k)); height:calc(312 * var(--k)); z-index:1; transform-style:preserve-3d} #features .s3 .phn{position:absolute; left:calc(446 * var(--k)); top:calc(160 * var(--k)); width:calc(146 * var(--k)); height:calc(302 * var(--k)); z-index:3; transform-style:preserve-3d} #features .s3 .mb{position:absolute; inset:0; transform:var(--tm); transform-origin:50% 50%} #features .s3 .phn .mb{transform:var(--tp)} #features .s3 .fc{position:absolute; inset:0; border-radius:calc(24 * var(--k)); background:linear-gradient(150deg, #FAFBFC 0%, #D9DDE2 36%, #EFF1F3 60%, #C3C9D0 100%); box-shadow:calc(22 * var(--k)) calc(40 * var(--k)) calc(70 * var(--k)) calc(-24 * var(--k)) rgba(14,22,34,.55), 0 calc(8 * var(--k)) calc(18 * var(--k)) calc(-8 * var(--k)) rgba(14,22,34,.22)} #features .s3 .fc::before{content:""; position:absolute; inset:calc(1.5 * var(--k)); border-radius:calc(22.5 * var(--k)); background:#0D1014} #features .s3 .pn{position:absolute; inset:calc(8 * var(--k)); border-radius:calc(16 * var(--k)); overflow:hidden; background:#F1F3F5} #features .s3 .pn img{display:block; width:100%; height:100%; object-fit:cover; object-position:left top} #features .s3 .gl{position:absolute; display:block; inset:calc(1.5 * var(--k)); border-radius:calc(22.5 * var(--k)); pointer-events:none; background: linear-gradient(118deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.08) 24%, rgba(255,255,255,0) 42%), linear-gradient(118deg, rgba(20,30,44,0) 52%, rgba(20,30,44,.05) 100%)} /* スマホは角をさらに丸める */ #features .s3 .phn .fc{border-radius:calc(34 * var(--k)); background:linear-gradient(135deg, #F4F5F7 0%, #C9CED4 40%, #E6E9EC 62%, #AEB5BD 100%); box-shadow:calc(16 * var(--k)) calc(30 * var(--k)) calc(48 * var(--k)) calc(-14 * var(--k)) rgba(14,22,34,.55), 0 calc(6 * var(--k)) calc(14 * var(--k)) calc(-6 * var(--k)) rgba(14,22,34,.24)} #features .s3 .phn .fc::before{inset:calc(2 * var(--k)); border-radius:calc(32 * var(--k)); background:#0B0D10} #features .s3 .phn .pn{inset:calc(7 * var(--k)); border-radius:calc(27 * var(--k))} #features .s3 .phn .gl{inset:calc(2 * var(--k)); border-radius:calc(32 * var(--k))} /* 画面の中が順に現れる */ #features .s3 .q{opacity:0; transition:opacity .7s ease; transition-delay:calc(.35s + var(--d) * .12s)} #features .s3 .dev.in .q{opacity:1} /* ゆっくり浮く（上下に動くだけ）。見えている間だけ動かす（.run は下の script が付ける） */ @keyframes ft3-mon{0%,100%{transform:translateY(0)} 50%{transform:translateY(calc(-8 * var(--k)))}} @keyframes ft3-phn{0%,100%{transform:translateY(0)} 50%{transform:translateY(calc(-12 * var(--k)))}} @keyframes ft3-flr{0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(.93); opacity:.72}} #features .s3 .mon{animation:ft3-mon 8s ease-in-out infinite paused} #features .s3 .phn{animation:ft3-phn 6.4s ease-in-out -2.4s infinite paused} #features .s3 .fm{animation:ft3-flr 8s ease-in-out infinite paused} #features .s3 .fp{animation:ft3-flr 6.4s ease-in-out -2.4s infinite paused} #features .s3 .dev.run .mon, #features .s3 .dev.run .phn, #features .s3 .dev.run .fm, #features .s3 .dev.run .fp{animation-play-state:running} @media (prefers-reduced-motion: reduce){ #features .s3 .mon, #features .s3 .phn, #features .s3 .fm, #features .s3 .fp{animation:none} #features .s3 .q{transition:none} } /* 04 ─ 職種の違う社外のプロを3人。奥から手前へ重ね、文字の側を向かせる */ #features .s4 .f-p3{left:-40px; width:400px; bottom:-24px; z-index:1} /* 左：ヘッドセットの女性。腰で断ち落とす */ #features .s4 .f-p2{left:300px; width:360px; bottom:-10px; z-index:2} /* 右：黒いジャケットの男性。胸の下で断ち落とす */ #features .s4 .f-p1{left:150px; width:330px; bottom:-56px; z-index:3} /* 手前・中：白いシャツの男性。胸の下で断ち落とす */ #features .s4 .f-p3 img, #features .s4 .f-p2 img{transform:scaleX(-1)} /* ── 文字の側。段の中で天地の真ん中に置く ── */ #features .tx{position:absolute; top:50%; width:600px; transform:translateY(-50%); z-index:3} #features .pr .tx{left:0} #features .pl .tx{left:682px} /* 横から入る */ #features .pr .tx .rv{transform:translateX(-56px)} #features .pl .tx .rv{transform:translateX(56px)} #features .tx .rv{transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1)} #features .tx .rv.in{transform:none} /* ── 番号：地に大きく・薄く・太く敷く（見出しの後ろ）。線は付けない ── */ #features .tx .no{ position:absolute; left:-30px; top:-128px; z-index:-1; margin:0; font-size:220px; font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; font-variant-numeric:tabular-nums; } #features .pr .tx .no.rv, #features .pl .tx .no.rv{transform:translateY(26px); transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.2,.7,.2,1)} #features .pr .tx .no.rv.in, #features .pl .tx .no.rv.in{transform:none} #features .hd{ margin-top:0; font-size:44px; font-weight:900; letter-spacing:.03em; line-height:1.45; color:var(--ink); } #features .bd{ margin-top:28px; font-size:18px; font-weight:500; line-height:2.05; letter-spacing:.04em; color:var(--ink2); word-break:auto-phrase; text-wrap:pretty; /* 語の途中で折り返さない */ } /* 2 ─ 構築費 → 効果を確認 → 保守費のみ を線でつなぐ */ /* 線の幅は本文の幅（600px）と同じ。両端の丸の外側を本文の左右の端に合わせる。 上の「成果報酬型で対応」から丸まで、丸から下の文字までの間隔を同じ 18px にそろえる */ #features .v2{position:relative; width:600px; height:84px; margin-top:30px} #features .v2 .tag{position:absolute; left:0; top:0; margin:0; font-size:20px; font-weight:900; letter-spacing:.06em; line-height:20px; color:var(--ink)} #features .v2 svg{position:absolute; left:0; top:24px; overflow:visible} /* 線の中心は y=44、丸は 38〜50 */ #features .v2 .ln{fill:none; stroke:var(--ink3); stroke-width:1.2; opacity:.45} #features .v2 .dt{fill:#fff; stroke:var(--ink); stroke-width:1.4} #features .v2 .dt.on{fill:var(--ink); stroke:var(--ink)} #features .v2 .ar{fill:var(--ink3); opacity:.7} #features .v2 .lb{ position:absolute; top:68px; white-space:nowrap; font-size:14.5px; font-weight:700; letter-spacing:.06em; line-height:16px; color:var(--ink); } #features .v2 .l1{left:0} #features .v2 .l2{left:300px; transform:translateX(-50%)} #features .v2 .l3{right:0} /* ══ 1023px 以下：版面を縮めず、各段を「番号＋見出し＋本文」→ 素材 の順に縦に積む ══ 素材は段ごとの版（幅 640 × 高さ 580）の置き方をそのまま保ち、1単位 --u を段の幅に合わせて縮める （--u は 段の幅 / 640。768px 以上は 1px のまま）。上の空きだけを段ごとに詰め、頭は切らない。 PC 側の素材の位置を変えたときは、ここの同じ数字も合わせて直す。 */ @media (max-width:1023px){ #features .wrapx{position:relative; inset:auto; padding:64px 20px 40px; overflow-x:clip} #features .bgw{left:12px; top:40px; font-size:min(14vw, 120px)} #features .ttl{position:relative; left:auto; top:auto} #features .ttl .a{font-size:15px} #features .ttl .b{margin-top:6px; font-size:30px} #features .ft-list{position:relative; left:auto; top:auto; width:auto; margin-top:8px} #features .ft{height:auto; display:flex; flex-direction:column; padding-top:76px; container-type:inline-size} /* 文字の側 */ #features .tx, #features .pr .tx, #features .pl .tx{position:relative; order:1; top:auto; left:auto; width:auto; transform:none} #features .pr .tx .rv, #features .pl .tx .rv{transform:translateY(20px)} #features .tx .rv.in{transform:none} #features .tx .no{left:-6px; top:-56px; font-size:116px} #features .hd{font-size:24px; line-height:1.5} #features .bd{margin-top:14px; font-size:16px; line-height:1.95; letter-spacing:.03em} /* 素材の側。段の版の上の空きだけを詰めた高さにする（--gh: 高さ / --gt: うしろの光の上端） */ #features .ft .stg, #features .pr .stg, #features .pl .stg{ --u:min(1px, calc(100cqw / 640)); position:relative; order:2; top:auto; bottom:auto; left:auto; right:auto; width:calc(640 * var(--u)); height:calc(var(--gh) * var(--u)); margin:28px auto 0; } #features .glow{top:calc(var(--gt) * var(--u)); width:calc(640 * var(--u)); height:calc(560 * var(--u)); margin-left:calc(-320 * var(--u))} /* 01 ─ 版の上 72 を詰める */ #features .s1 .stg{--gh:520; --gt:-82} #features .s1 .orb{left:0; top:calc(0 * var(--u)); width:calc(290 * var(--u)); height:calc(290 * var(--u))} #features .s1 .orb img{width:calc(132 * var(--u))} #features .s1 .f-guide{left:calc(14 * var(--u)); width:calc(400 * var(--u)); bottom:calc(-18 * var(--u))} #features .s1 .f-learner{right:calc(-14 * var(--u)); width:calc(282 * var(--u)); bottom:calc(-40 * var(--u))} /* 02 ─ 版の上 40 を詰める */ #features .s2 .stg{--gh:540; --gt:-50} /* 男性が PC より右に寄るので、札は段の右端に寄せ、タブレットの角に触れない高さに置く。文字の下限（12px）で札が詰まらないよう、左右の余白を詰める */ #features .s2 .stg{--in:calc(12 * var(--k)); --px:max(10px, calc(20 * var(--k)))} #features .s2 .pay{top:calc(64 * var(--k)); left:calc(336 * var(--k)); width:calc(304 * var(--k))} #features .s2 .st3{padding-left:max(10px, calc(22 * var(--k))); padding-right:max(10px, calc(22 * var(--k)))} /* 390px 未満で「保守費のみ」が札からはみ出さないよう、下限を 26px から 21px に下げる（390px 以上は変わらない） */ #features .s2 .st3 .vl{font-size:max(21px, calc(48 * var(--k)))} #features .s2 .f-smile{left:calc(-50 * var(--u)); width:calc(372 * var(--u)); bottom:calc(-2 * var(--u))} /* 03 ─ 画面とスマホの寸法は --k（= --u）で段の幅に合わせて縮む。版の上 50 を詰める */ #features .s3 .stg{--gh:500; --gt:-60} #features .s3 .dev{top:calc(-50 * var(--k))} /* 04 ─ 版の上 210 を詰める */ #features .s4 .stg{--gh:370; --gt:-220} #features .s4 .f-p3{left:calc(-40 * var(--u)); width:calc(400 * var(--u)); bottom:calc(-24 * var(--u))} #features .s4 .f-p2{left:calc(300 * var(--u)); width:calc(360 * var(--u)); bottom:calc(-10 * var(--u))} #features .s4 .f-p1{left:calc(150 * var(--u)); width:calc(330 * var(--u)); bottom:calc(-56 * var(--u))} } @media (max-width:767px){ } @media (min-width:768px) and (max-width:1023px){ #features .wrapx{padding:88px 40px 56px} #features .bgw{left:32px; top:64px} #features .ttl .a{font-size:17px} #features .ttl .b{font-size:36px} #features .ft{padding-top:104px} #features .tx{max-width:640px} #features .tx .no{left:-10px; top:-76px; font-size:160px} #features .hd{font-size:30px} #features .bd{font-size:17px} /* 素材は段の側を交互に振る（PC の左右の入れ替えに合わせる） */ #features .pr .stg{margin:32px 0 0 auto} #features .pl .stg{margin:32px auto 0 0} } /* ── 章ごとの地の帯 ── ページ全体の地は、章が画面の 72% の位置に来た時点で切り替わる。その瞬間は、前の章がまだ画面の上に残っている。 章の文字がいつも読める地の上に乗るよう、切り替わる境目の章には、章そのものに地の帯を持たせる（上下の端はぼかして隣へなじませる）。 ・アプローチ（墨の文字）: 明るい帯。下の端だけぼかす ・サービスの特徴: 待機中はアプローチと同じ明るい帯（墨の文字）。入ると濃いグレーの帯（白い文字）へ移る。上下をぼかす ・業種業態（墨の文字）: 明るめのグレーの帯。上だけぼかす */ section.sc#approach{background:linear-gradient(180deg, #F2F3F4 0, #F2F3F4 calc(100% - 160px), rgba(242,243,244,0) 100%)} section.sc#features{ /* 明るい地 #F2F3F4 → 濃いグレー rgba(98,103,110,.96)。ぼかす端は同じ色の透明（transparent だと灰色ににごる端末がある） */ --ftrgb:calc(242 - 144 * var(--ftd)), calc(243 - 140 * var(--ftd)), calc(244 - 134 * var(--ftd)); background:linear-gradient(180deg, rgba(var(--ftrgb), 0) 0, rgba(var(--ftrgb), calc(1 - .04 * var(--ftd))) 160px, rgba(var(--ftrgb), calc(1 - .04 * var(--ftd))) 100%); /* 下の端はぼかさず、次の段の地とまっすぐ接する（2026-10-24 夕） */ } /* 全体の地の濃い層も、この章に入るときだけは章と同じ1秒・同じ曲線で重ねる （上下の縁に見える全体の地だけが先に暗くなると、影が付くだけに見える）。明るい地・中間の地へ移るときの速さは変えない */ html.tone-dark .ground .g-dark{transition:opacity 1s cubic-bezier(.37,0,.63,1), visibility 0s} html.tone-dark .ground .g-mid{transition:opacity 1s cubic-bezier(.37,0,.63,1), visibility 0s linear 1s} html.tone-dark .ground .g-light{transition:visibility 0s linear 1s} /* 動きを減らす設定では、章と同じく全体の地もその場で暗くする（章だけ先に暗くなり、上下の縁が明るく残らないように） */ @media (prefers-reduced-motion: reduce){ html.tone-dark .ground .g-dark, html.tone-dark .ground .g-mid, html.tone-dark .ground .g-light{transition:none} } /* 業種業態：上をぼかさず、段の間（PC 140・スマホ 56）まで同じ地を上に伸ばし、サービスの特徴の下端とまっすぐ接する（2026-10-24 夕） */ section.sc#coverage{background:#C3C7CC; box-shadow:0 calc(-140px * var(--s)) 0 #C3C7CC} @media (max-width:1023px){section.sc#coverage{box-shadow:0 -56px 0 #C3C7CC}} #coverage .wrapx{font-family:"Noto Sans JP", system-ui, sans-serif} /* ── うしろの現場の風景 ── 版面より外まで広げ、画面いっぱいに敷く（.sc が端で切る）。 ぼかして彩度を落とし、上から強いグラデーションを重ねて「うっすら」にする。 */ #coverage .cv-scenes{ position:absolute; left:-420px; right:-420px; top:0; bottom:0; z-index:0; overflow:hidden; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 80%, transparent 100%); } /* 切り替えの順序：新しい写真を上に重ねて 1.8 秒で出し切る → 出し切ってから古い写真を一気に下げる（新しい写真の下なので見えない）。 写真はぼかし・彩度・明るさ・薄さ（.34）を地の色 #C3C7CC の上で画像に焼き込んだ不透明の1枚（CSS の filter は使わない）。 不透明なので、重なっている途中でも2枚ぶん濃くならず、古い写真を下げても見た目が変わらない */ #coverage .cv-sc{position:absolute; inset:0; z-index:0; opacity:0; transition:none} #coverage .cv-sc.on{opacity:1; z-index:2; transition:opacity 1.8s ease} #coverage .cv-sc.prev{opacity:1; z-index:1} /* 古い写真は新しい写真が出し切るまで残す */ #coverage .cv-veil{z-index:3} #coverage .cv-sc img{ position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; display:block; transform:scale(1.04); } /* 見えている間だけ、ゆっくり寄る。下げられる途中（.prev）も寄ったまま保ち、見えなくなってから戻す */ #coverage .cv-sc.on img{transform:scale(1.12); transition:transform 7s ease-out} #coverage .cv-sc.prev img{transform:scale(1.12)} /* 場面ごとの色味。切り替わるとトーンも入れ替わる */ #coverage .cv-sc::after{ content:""; position:absolute; inset:0; background: radial-gradient(70% 90% at 30% 40%, var(--t2) 0%, rgba(255,255,255,0) 70%), linear-gradient(120deg, var(--t1) 0%, rgba(255,255,255,0) 55%, var(--t1) 100%); } /* 上下はページの地へ溶かし、真ん中は文字が読める明るさに持ち上げる */ #coverage .cv-veil{ position:absolute; inset:0; background: linear-gradient(180deg, #C3C7CC 0%, rgba(195,199,204,.62) 18%, rgba(195,199,204,.55) 50%, rgba(195,199,204,.62) 82%, #C3C7CC 100%), radial-gradient(60% 56% at 30% 34%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%); } /* ── 見出し ── */ #coverage .cv-ttl{ position:absolute; left:92px; top:236px; z-index:3; font-size:64px; font-weight:900; letter-spacing:.03em; line-height:1.22; color:var(--ink); } /* ── 横に流れる大きな文字（弊社のアプローチと同じ、大きく薄く） ── */ #coverage .cv-marq{ position:absolute; left:-420px; right:-420px; z-index:2; overflow:hidden; white-space:nowrap; pointer-events:none; user-select:none; } #coverage .cv-marq.up{top:150px} #coverage .cv-marq.dn{top:820px} /* 顔と3つめの理由の後ろを避け、胸もとの高さで流す */ #coverage .cv-track{display:inline-flex; gap:88px; will-change:transform} #coverage .cv-marq.up .cv-track{animation:cvflow 58s linear infinite} #coverage .cv-marq.dn .cv-track{animation:cvflow 64s linear infinite reverse} @keyframes cvflow{from{transform:translateX(0)} to{transform:translateX(-50%)}} #coverage .cv-track span{ font-size:120px; font-weight:900; letter-spacing:.03em; line-height:1; color:rgba(17,17,17,.055); } #coverage .cv-marq.dn .cv-track span{color:rgba(255,255,255,.24)} @media (prefers-reduced-motion: reduce){ #coverage .cv-track{animation:none} } /* 章が画面の外にある間は、流れる文字と人物の光を止める（#coverage の .cv-live は下のスクリプトが付け外しする） */ #coverage:not(.cv-live) .cv-track, #coverage:not(.cv-live) .cv-man .aura{animation-play-state:paused} /* ── 右：支援の中身を3つ積む（PKSHA の数字の並びにならう） ── */ #coverage .cv-feats{position:absolute; left:842px; top:196px; width:592px; z-index:3} #coverage .cv-f{padding:30px 0 32px; border-top:1px solid var(--hair)} #coverage .cv-f:last-child{border-bottom:1px solid var(--hair)} #coverage .cv-f .hd{ margin-top:0; font-size:30px; font-weight:900; letter-spacing:.03em; line-height:1.34; color:var(--ink); } #coverage .cv-f .bd{ margin-top:14px; font-size:14.5px; font-weight:500; line-height:1.95; letter-spacing:.04em; color:var(--ink2); } #coverage .cv-lead{ position:absolute; left:92px; top:440px; width:560px; z-index:3; font-size:15px; font-weight:500; line-height:2.0; letter-spacing:.05em; color:var(--ink2); } /* ── 左下の人物 ── 見出しと説明の下に立たせる。 うしろのぼかし（人の形を白くぼかしたもの）がゆっくり明滅して輪郭を浮かせる。人との境目はくっきり残す。 足もとは罫で切らず、章の下端へ向かって地に溶かす */ #coverage .cv-man{position:absolute; left:112px; top:436px; width:560px; height:600px; z-index:3; pointer-events:none} /* 一番手前。流れる文字（z2）は男性の後ろを通る */ #coverage .cv-man .glow{ position:absolute; left:50%; top:40px; width:560px; height:520px; margin-left:-280px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.78) 0%, rgba(255,255,255,.44) 44%, rgba(255,255,255,.12) 76%, rgba(255,255,255,0) 100%); } #coverage .cv-man .glow.rv{transform:scale(.86); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)} #coverage .cv-man .glow.rv.in{transform:none} #coverage .cv-man .fig{ position:absolute; left:50%; top:0; width:600px; height:600px; margin-left:-300px; /* 下の2割で地に溶かす（罫で断ち切らない） */ -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 74%, transparent 91%); mask-image:linear-gradient(180deg, #000 0%, #000 74%, transparent 91%); } #coverage .cv-man .fig img{position:absolute; inset:0; display:block; width:100%; height:100%} /* 人物（p-goal2-cv）はコントラスト・彩度・足もとの影を、光（p-goal2-aura）は白抜きとぼかしを画像に焼き込んである。 CSS の filter は使わない */ /* 人の形を白くぼかした光。輪郭の外へにじみ、ゆっくり強まって弱まる（明滅に見えない幅と速さ） */ #coverage .cv-man .aura{ transform:scale(1.035); transform-origin:50% 60%; opacity:.55; animation:cvaura 8s ease-in-out infinite; will-change:opacity, transform; } @keyframes cvaura{ 0%,100%{opacity:.42; transform:scale(1.025)} 50% {opacity:.8; transform:scale(1.05)} } @media (prefers-reduced-motion: reduce){ #coverage .cv-man .aura{animation:none} } #coverage .cv-man .fig.rv{transform:translateY(60px); transition:opacity .9s ease, transform 1s cubic-bezier(.16,.84,.24,1)} #coverage .cv-man .fig.rv.in{transform:none} /* ══════ 1023px 以下：版面を縮めず、普通の組み方で流す ══════ 1024px 以上には一切効かない。余白と文字の大きさは土台（system.css）の変数に合わせる（無いときは括弧内の値）。 ・768〜1023px … PC と同じ2列。左に見出し・説明・人物（人物は下端にそろえる）、右に理由3つ ・767px 以下 … 1列。見出し → 説明 → 理由3つ → 人物 の順に積む うしろの風景は幅いっぱいに敷き、ぼかしを弱め、寄る動きは止める（重さを抑える）。 流れる文字は小さくし、上の段は見出しのうしろ、下の段は人物の胸もとで流す。 */ @media (max-width:1023px){ #coverage .wrapx{ position:relative; inset:auto; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); grid-template-rows:auto auto 1fr; column-gap:48px; padding:var(--m-pad,88px) var(--gut,40px) 0; } #coverage .cv-scenes{left:0; right:0} #coverage .cv-sc.on img, #coverage .cv-sc.prev img{transform:scale(1.04); transition:none} #coverage .cv-ttl{position:relative; left:auto; top:auto; grid-column:1; grid-row:1; font-size:var(--m-h2,36px)} #coverage .cv-lead{ position:relative; left:auto; top:auto; width:auto; grid-column:1; grid-row:2; margin-top:16px; font-size:var(--m-body,16px); line-height:1.9; word-break:auto-phrase; } #coverage .cv-feats{position:relative; left:auto; top:auto; width:auto; grid-column:2; grid-row:1 / span 3; align-self:start; padding-bottom:124px} #coverage .cv-f{padding:26px 0 28px} #coverage .cv-f .hd{font-size:22px} #coverage .cv-f .bd{margin-top:10px; font-size:var(--m-body,16px); line-height:1.9; text-wrap:pretty} /* 最後の行に1字だけ落ちるのを避ける */ #coverage .cv-man{ position:relative; left:auto; top:auto; grid-column:1; grid-row:3; align-self:end; width:100%; max-width:400px; height:auto; aspect-ratio:1 / 1; margin:32px auto 0; } #coverage .cv-man .glow{left:0; top:6%; width:100%; height:88%; margin-left:0} #coverage .cv-man .fig{left:0; width:100%; height:100%; margin-left:0} #coverage .cv-marq{left:0; right:0} #coverage .cv-marq.up{top:calc(var(--m-pad,88px) - 44px)} /* 見出しの1行目のうしろ */ #coverage .cv-marq.dn{top:auto; bottom:32px} /* 3つめの理由の文字の後ろを避け、その下で流す */ #coverage .cv-track{gap:40px} #coverage .cv-track span{font-size:64px} } @media (max-width:767px){ #coverage .wrapx{display:flex; flex-direction:column; padding:var(--m-pad,64px) var(--gut,20px) 0} #coverage .cv-ttl{order:1; font-size:var(--m-h2,30px)} #coverage .cv-lead{order:2; font-size:var(--m-body,15px)} #coverage .cv-feats{order:3; margin-top:32px; padding-bottom:0} #coverage .cv-f{padding:22px 0 24px} #coverage .cv-f .hd{font-size:20px} #coverage .cv-f .bd{font-size:var(--m-body,15px)} #coverage .cv-man{order:4; max-width:360px; margin-top:8px} #coverage .cv-marq.up{top:calc(var(--m-pad,64px) - 32px)} #coverage .cv-marq.dn{bottom:80px} /* 人物の胸もと */ #coverage .cv-track{gap:28px} #coverage .cv-track span{font-size:44px} } /* ══════ ご利用までの流れ ══════ 左端と右端を低く、真ん中をわずかに高くした、なだらかなアーチ（高低差 116px）。 アーチの上に 01〜05 の地点を小さな輪で置き、各地点から細い線を真下へ降ろして、水平な1本の罫で受ける。 罫の下に 番号 → 見出し → 説明 を地点の真下（中央そろえ）に置く。5つとも同じ段。番号と文字は重ねない。 面（白い札）は使わない。青は 05 の降ろし線の1本だけ。 スクロールは乗っ取らない。.pr-map に .in が付いたら、アーチと罫が左から右へ引かれ、 線が届いた地点から順に 印 → 降ろし線 → 番号・見出し・説明 と立ち上がる。 */ /* 地に敷く大きな文字（見出しのうしろ。影は付けない） */ #process .pr-word{ position:absolute; left:128px; top:62px; z-index:0; font-size:156px; font-weight:900; letter-spacing:.05em; line-height:1; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; } /* ── 見出し（メディア・FAQ と同じ形） ── */ #process .head{ position:absolute; left:152px; top:104px; z-index:2 } #process .head .ttl .a{ font-size:26px; letter-spacing:.05em; color:var(--ink2) } #process .head .ttl .b{ margin-top:8px; font-size:54px; color:var(--ink) } /* ── 図の枠 ── .rv の見張りは枠の 18% が画面に入ったときに動く。枠を図の下半分（y=450〜750）だけにして、 アーチの書き出し（左端 y=520）が見える位置まで来てから引きはじめる。 中身の .pr-cv は版面の原点に戻す（座標は SVG と同じ）。 */ #process .pr-map{ position:absolute; left:0; top:450px; width:1586px; height:300px; z-index:1 } #process .pr-cv{ position:absolute; left:0; top:-450px; width:1586px; height:900px } /* ── 線 ── */ #process .pr-line{ position:absolute; left:0; top:0; display:block; overflow:visible } /* アーチ：左から右へ引かれていく */ #process .pr-line .arc{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:butt; stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset 2s linear .25s; } #process .pr-map.in .pr-line .arc{ stroke-dashoffset:0 } /* 受けの罫：アーチと同じ速さで左から右へ伸びる */ #process .pr-deck{ position:absolute; left:152px; top:519.5px; width:1282px; height:1px; background:var(--ink3); opacity:.4; transform-origin:left center; transform:scaleX(0); transition:transform 2s linear .25s; } #process .pr-map.in .pr-deck{ transform:none } /* 地点の印（細い輪） */ #process .pr-line .rg circle{ fill:none; stroke:var(--ink); stroke-width:1.5; transform-box:fill-box; transform-origin:center; opacity:0; transform:scale(.2); transition:opacity .3s ease var(--t), transform .5s cubic-bezier(.2,.9,.3,1.3) var(--t); } #process .pr-line .rg circle.core{ fill:var(--ink); stroke:none } #process .pr-map.in .pr-line .rg circle{ opacity:1; transform:none } /* アーチが各地点に届く時刻（アーチの長さの割合 × 2s ＋ .25s） */ #process .pr-line .r1, #process .st.s1{ --t:.41s } #process .pr-line .r2, #process .st.s2{ --t:.81s } #process .pr-line .r3, #process .st.s3{ --t:1.25s } #process .pr-line .r4, #process .st.s4{ --t:1.69s } #process .pr-line .r5, #process .st.s5{ --t:2.09s } /* ── 5つの段 ── .st の原点 ＝ 地点の真下で、受けの罫と交わる点（y=520）。文字はここから下へ中央そろえ。 地点の間隔は 258・286・286・258（左右対称）。いちばん長い 02・03 の見出しどうしを離すため、内側を少し広げている。 */ #process .pr-steps{ list-style:none } #process .st{ position:absolute; top:520px; width:0; height:0; z-index:2 } #process .st.s1{ left:249px; --h:23.7px } #process .st.s2{ left:507px; --h:84px } #process .st.s3{ left:793px; --h:106.5px } #process .st.s4{ left:1079px; --h:84px } #process .st.s5{ left:1337px; --h:20.7px } /* 降ろし線（地点の輪の下から罫まで） */ #process .st .pole{ position:absolute; left:-.5px; bottom:0; width:1px; height:var(--h); background:var(--ink3); opacity:.45; transform-origin:center top; transform:scaleY(0); transition:transform .45s cubic-bezier(.3,.7,.2,1) calc(var(--t) + .08s); } #process .pr-map.in .st .pole{ transform:none } /* 番号・見出し・説明（地点の真下に中央そろえ。互いに重ねない） */ #process .st .no, #process .st .tt, #process .st .ds{ position:absolute; text-align:center; white-space:nowrap; opacity:0; transform:translateY(10px); transition:opacity .55s ease calc(var(--t) + .3s), transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--t) + .3s); } #process .pr-map.in .st .no, #process .pr-map.in .st .tt, #process .pr-map.in .st .ds{ opacity:1; transform:none } #process .st .no{ left:-60px; width:120px; top:26px; font-size:44px; font-weight:800; letter-spacing:.02em; text-indent:.02em; line-height:1; color:var(--ink); } #process .st .tt{ left:-140px; width:280px; top:90px; font-size:22px; font-weight:700; letter-spacing:.02em; line-height:1.4; color:var(--ink); transition-delay:calc(var(--t) + .38s); } #process .st .ds{ left:-120px; width:240px; top:138px; font-size:14px; font-weight:500; letter-spacing:.02em; line-height:1.8; color:var(--ink2); transition-delay:calc(var(--t) + .46s); } /* ── 05 支援開始：到達点。見出しをひと回り大きく、降ろし線だけ青の細い線 ── */ #process .st.goal .pole{ left:-.75px; width:1.5px; background:var(--accent); opacity:1 } #process .st.goal .tt{ top:85px; font-size:26px; font-weight:800; letter-spacing:.04em; text-indent:.04em } @media (prefers-reduced-motion: reduce){ #process .pr-line .arc, #process .pr-deck, #process .pr-line .rg circle, #process .st .pole, #process .st .no, #process .st .tt, #process .st .ds{ transition:none } } /* ══════ 1023px 以下：中央に1本の軸を通し、5つの段を縦に積む ══════ 1024px 以上には一切効かない。余白と文字の大きさは土台（system.css）の変数に合わせる（無いときは括弧内の値）。 各段は 軸の線（.pole）→ 地点の輪（.st::before）→ 大きく淡い番号 → 見出し → 説明 を、中央にそろえて積む。 線は段と段のあいだだけに引き、文字の上は通さない。青は 05 へ降りる線と 05 の輪だけ（PC と同じく到達点の印）。面（白い札）は使わない。 動き（process.html の script が .pr-map に .flow-js を付けたときだけ。付かなければ線は引いた状態で、.in で一度に出る） ・画面の上から 64% の高さを「線の先」とし、淡い下書きの線の上を、濃い線がスクロールした分だけ伸びる（--p ＝ 0〜1。戻っても縮めない） ・下書きの線は、ひとつ前の段が立ち上がってから浮かぶ ・伸びている線の先には小さな点が付いて降りていく（.pole::after） ・線が輪に届いた段に .on が付き、輪 → 番号（大きめから収まる）→ 見出し → 説明 の順に立ち上がる ・05 に届くと、輪のまわりに淡い青の光がふくらんで少し残り、細い輪が一度だけ外へ広がって消える（点滅はしない） スクロールは奪わない。動かすのは transform と opacity だけ。 ・768〜1023px … 大きめの寸法 ・767px 以下 … 小さめの寸法（補足の説明は 14px。PC の見た目より大きくしすぎない） */ @media (max-width:1023px){ #process .wrapx{position:relative; inset:auto; padding:var(--m-pad,88px) var(--gut,40px)} #process .pr-word{left:calc(var(--gut,40px) - 16px); top:calc(var(--m-pad,88px) - 40px); font-size:96px} #process .head{position:relative; left:auto; top:auto} #process .head .ttl .a{font-size:var(--m-lab,15px)} #process .head .ttl .b{margin-top:6px; font-size:var(--m-h2,36px)} #process .pr-map{position:relative; left:auto; top:auto; width:auto; height:auto; margin-top:32px} #process .pr-cv{position:relative; left:auto; top:auto; width:auto; height:auto} #process .pr-line, #process .pr-deck{display:none} /* 段：上から 線（--seg）・輪（--ring）・すき間（--gap）のぶんを空けて、番号から下を中央にそろえて積む */ #process .pr-steps .st{ --seg:56px; --ring:11px; --gap:14px; position:relative; left:auto; top:auto; width:auto; height:auto; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:calc(var(--seg) + var(--ring) + var(--gap)); } #process .pr-steps .st + .st{margin-top:18px} #process .pr-steps .st.s1{--seg:44px} #process .pr-steps .st.goal{--ring:15px} /* 現れる順番を詰める（script が無いとき。縦に並ぶので、アーチを待たない） */ #process .pr-steps .st.s1{--t:0s} #process .pr-steps .st.s2{--t:.14s} #process .pr-steps .st.s3{--t:.28s} #process .pr-steps .st.s4{--t:.42s} #process .pr-steps .st.s5{--t:.56s} /* 軸の線：淡い下書きの線（.pole）の上に、濃い線（::before）が --p の割合だけ伸び、先に小さな点（::after）が付く */ #process .st .pole, #process .st.goal .pole{ left:50%; top:0; bottom:auto; width:1px; height:var(--seg); margin-left:-.5px; background:rgba(34,42,54,.2); opacity:1; transform:none; transition:none; } #process .st.goal .pole{background:rgba(9,111,200,.22)} #process .st .pole::before{ content:""; position:absolute; left:-.25px; top:0; width:1.5px; height:100%; background:var(--ink); transform-origin:center top; transform:scaleY(var(--p,1)); } #process .st.goal .pole::before{background:var(--accent)} #process .st .pole::after{ content:""; position:absolute; left:50%; top:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 4px rgba(17,17,17,.08); opacity:0; transform:translateY(calc(var(--p,1) * var(--seg))); transition:opacity .25s ease; } #process .st.goal .pole::after{background:var(--accent); box-shadow:0 0 0 4px rgba(9,111,200,.14)} /* 地点の輪（PC のアーチの輪と同じ細い輪。05 は青で、芯の点を入れる） */ #process .pr-steps .st::before{ content:""; position:absolute; left:50%; top:var(--seg); z-index:1; width:var(--ring); height:var(--ring); margin-left:calc(var(--ring) / -2); box-sizing:border-box; border:1.5px solid var(--ink); border-radius:50%; } #process .pr-steps .st.goal::before{ border-color:var(--accent); background:radial-gradient(circle, var(--accent) 0 2.6px, transparent 3.2px); } /* 番号・見出し・説明 */ #process .st .no, #process .st .tt, #process .st .ds{ position:relative; left:auto; top:auto; width:auto; text-align:center; white-space:normal; } #process .st .no{ font-size:60px; font-weight:800; line-height:1; letter-spacing:.02em; text-indent:.02em; color:rgba(17,17,17,.24); } #process .st .tt{margin-top:12px; font-size:21px; line-height:1.4; text-wrap:balance} #process .st .ds{margin-top:8px; font-size:var(--m-body,16px); line-height:1.8} #process .st.goal .no{color:rgba(9,111,200,.42)} #process .st.goal .tt{top:auto; font-size:25px; text-indent:0} /* 05 に届いたときの光（輪のまわりにふくらむ淡い青。輪と番号のうしろに敷く） */ #process .st.goal::after{ content:""; position:absolute; left:50%; top:calc(var(--seg) + var(--ring) / 2); z-index:-1; width:168px; height:168px; margin:-84px 0 0 -84px; border-radius:50%; background:radial-gradient(circle, rgba(9,111,200,.24) 0%, rgba(9,111,200,.10) 34%, rgba(9,111,200,0) 68%); opacity:.7; pointer-events:none; } /* ── 動き（script が .flow-js を付けたときだけ） ── */ #process .pr-map.flow-js .st.drawing .pole::after{opacity:1} /* 次の段の下書きの線は、ひとつ前の段が立ち上がってから浮かべる（何もない所に線だけが浮かないように） */ #process .pr-map.flow-js .st + .st .pole{opacity:0; transition:opacity .6s ease .2s} #process .pr-map.flow-js .st.on + .st .pole{opacity:1} #process .pr-map.flow-js .st::before{ opacity:0; transform:scale(.2); transition:opacity .3s ease, transform .55s cubic-bezier(.2,.9,.3,1.35); } #process .pr-map.flow-js .st .no{ opacity:0; transform:translateY(10px) scale(1.4); transition:opacity .8s ease .06s, transform 1.2s cubic-bezier(.16,.84,.2,1) .06s; } #process .pr-map.flow-js .st .tt{ opacity:0; transform:translateY(18px); transition:opacity .7s ease .24s, transform .9s cubic-bezier(.2,.7,.2,1) .24s; } #process .pr-map.flow-js .st .ds{ opacity:0; transform:translateY(18px); transition:opacity .7s ease .36s, transform .9s cubic-bezier(.2,.7,.2,1) .36s; } #process .pr-map.flow-js .st.on::before, #process .pr-map.flow-js .st.on .no, #process .pr-map.flow-js .st.on .tt, #process .pr-map.flow-js .st.on .ds{opacity:1; transform:none} #process .pr-map.flow-js .st.goal::after{opacity:0; transform:scale(.3)} #process .pr-map.flow-js .st.goal.on::after{animation:pr-glow 2s cubic-bezier(.2,.7,.2,1) .05s both} /* 線の先の点は、05 に届くと細い輪に変わり、一度だけ外へ広がって消える */ #process .pr-map.flow-js .st.goal.on .pole::after{ width:64px; height:64px; margin:-32px 0 0 -32px; box-sizing:border-box; border:1px solid var(--accent); background:transparent; box-shadow:none; animation:pr-ripple 1.6s cubic-bezier(.2,.7,.3,1) .12s both; } @keyframes pr-glow{ 0% {opacity:0; transform:scale(.3)} 40% {opacity:1; transform:scale(1.12)} 100%{opacity:.7; transform:none} } @keyframes pr-ripple{ 0% {opacity:.9; transform:translateY(calc(var(--seg) + var(--ring) / 2)) scale(.14)} 100%{opacity:0; transform:translateY(calc(var(--seg) + var(--ring) / 2)) scale(1)} } } @media (max-width:767px){ #process .wrapx{padding:var(--m-pad,64px) var(--gut,20px)} #process .pr-word{left:calc(var(--gut,20px) - 12px); top:calc(var(--m-pad,64px) - 20px); font-size:72px} #process .head .ttl .a{font-size:var(--m-lab,14px)} #process .head .ttl .b{font-size:var(--m-h2,30px)} #process .pr-map{margin-top:20px} #process .pr-steps .st{--seg:44px; --ring:9px; --gap:10px} #process .pr-steps .st + .st{margin-top:14px} #process .pr-steps .st.s1{--seg:36px} #process .pr-steps .st.goal{--ring:13px} #process .st .no{font-size:48px} #process .st .tt{margin-top:8px; font-size:18px} #process .st .ds{margin-top:6px; font-size:14px; line-height:1.8} #process .st.goal .tt{font-size:21px} #process .st.goal::after{width:132px; height:132px; margin:-66px 0 0 -66px} } @media (max-width:1023px) and (prefers-reduced-motion: reduce){ #process .pr-steps .st::before, #process .st.goal::after, #process .st .pole::after{transition:none; animation:none} } /* 2026-09-22: 説明文を板垣さんの新しい文言（2〜3文の長さ）に替えたので、列の幅の中で折り返す。 固定の改行はやめ、文節の切れ目で折る（隣の列と重ねない） */ #process .st .ds{white-space:normal; left:-118px; width:236px; font-size:13px; line-height:1.75; word-break:auto-phrase; text-wrap:balance} #process .st .ds br{display:none} @media (max-width:1023px){ #process .st .ds{left:auto; width:auto; max-width:22em; margin-left:auto; margin-right:auto; font-size:14px; line-height:1.8} } /* ═══ 05 支援開始：平らな大きな丸（2026-09-22 板垣さん指示。立体感と広がる動きはなし）═══ PC は右の端から大きくはみ出す丸（版面の外は .sc で切れる）。丸は 05 の段（.st）の中に置き、アーチと罫の終わりは丸の下に隠れる。 スマホは「05」の真ん中から始まる半円（下に向かって広がり、画面の両端からはみ出す）。 */ #process .st.goal .pr-sun{ position:absolute; z-index:-1; left:-117px; top:-350px; width:700px; height:700px; border-radius:50%; pointer-events:none; background:#FFFFFF; box-shadow:none; } #process .st.goal .pole{display:none} #process .st.goal .no{left:6px; top:-112px; font-size:40px; color:var(--ink3)} #process .st.goal .tt{left:-99px; width:330px; top:-60px; font-size:46px; font-weight:900; letter-spacing:.06em; text-indent:.06em; line-height:1.2} #process .st .gl{ position:absolute; left:-99px; width:330px; top:6px; margin:0; text-align:center; font-size:16px; font-weight:800; letter-spacing:.06em; line-height:1.75; color:var(--ink); opacity:0; transform:translateY(10px); transition:opacity .55s ease calc(var(--t) + .46s), transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--t) + .46s); } #process .pr-map.in .st .gl{opacity:1; transform:none} #process .st.goal .ds{left:-52px; width:236px; top:76px} @media (prefers-reduced-motion: reduce){ #process .st .gl{transition:none} } @media (max-width:1023px){ #process .pr-steps .st.goal{position:relative; margin-top:40px; padding:0 0 14vw} #process .st.goal .pr-sun{left:50%; top:30px; width:150vw; height:max(75vw, calc(100% - 30px)); z-index:0; border-radius:75vw 75vw 0 0; transform:translateX(-50%); background:#FFFFFF} #process .st.goal > :not(.pr-sun){position:relative; z-index:1} #process .st.goal::before, #process .st.goal::after{display:none} #process .st.goal .no{left:auto; top:auto; color:var(--ink)} #process .st.goal .tt{left:auto; top:auto; width:auto; font-size:34px} #process .st .gl{position:relative; left:auto; top:auto; width:auto; margin-top:10px; font-size:15px} #process .pr-map.flow-js .st.goal.on .gl{opacity:1; transform:none} #process .st.goal .ds{left:auto; top:auto; width:auto} } /* ═══ 05 支援開始の人物（2026-09-22 板垣さん指示）═══ 丸の中の余白に、伴走するコンサルタント（板垣さん指定の素材）と、毎月のコストが下がっていく札を置く（札は前の版を戻したもの）。 人物は丸の右寄せ、足もとは丸の白へ溶かす（切り口を見せない）。05 に届いてから浮かぶ（PC は .pr-map.in の --d0 から、1023px 以下は見えたとき .play）。 点滅はさせない。動かすのは transform と opacity だけ。動きを減らす設定では止まった絵のまま */ #process .pr-fig{--run:paused; --d0:2.35s; position:absolute; left:0; top:0; width:0; height:0; pointer-events:none} #process .pr-map.in .pr-fig{--run:running} /* 人物（PC）：伴走するコンサルタント（正方形の切り抜き。顔は横 30% の所、肩は右へ広がる）。 霞ませない（2026-09-22 板垣さん指示）: 白へ溶かすのは下の端の短い範囲だけ。右肩は溶かさず、丸と同じく画面の端で切る。 外枠（.pf-man-w）に柔らかい影を落として立体感を出し、写真はコントラストを少し上げる。 影は外枠に、溶かしは写真に分けて付ける（同じ要素に両方付けると、影が写真の四角で切られて縁が出るため） */ #process .pf-man-w{ position:absolute; left:128px; top:-227px; width:430px; height:430px; display:block; filter:drop-shadow(-16px 22px 26px rgba(14,26,44,.26)) drop-shadow(-3px 5px 7px rgba(14,26,44,.14)); animation:pfRise 1.1s cubic-bezier(.2,.7,.2,1) var(--d0) both; animation-play-state:var(--run); } #process .pf-man{ display:block; width:100%; height:100%; max-width:none; filter:contrast(1.08) saturate(1.06); -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.45) 91%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.45) 91%, rgba(0,0,0,0) 100%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; clip-path:inset(0 0 2% 0); /* 溶かしきった下端の数行を切る（端数の大きさのとき、下端の1行が細い線のように残るため） */ } @keyframes pfRise {from{opacity:0; transform:translateY(40px)} to{opacity:1; transform:none}} /* コストの札（PC）：人物の手前、左下で丸の縁から少しはみ出す。棒は支援開始の高さまで伸び、1本ずつ下がる → 下がる線 → 矢印と「コスト削減」 */ #process .pf-card{ position:absolute; left:-10px; top:150px; width:320px; box-sizing:border-box; padding:16px 18px 12px; background:#FFFFFF; border-radius:18px; box-shadow:0 26px 44px -22px rgba(14,26,44,.42), 0 4px 10px -4px rgba(14,26,44,.14), inset 0 0 0 1px rgba(17,17,17,.06); animation:pfPop .8s cubic-bezier(.2,.8,.25,1.15) calc(var(--d0) + .35s) both, pfFloat 6.5s ease-in-out calc(var(--d0) + 3.4s) infinite; animation-play-state:var(--run); } #process .pf-hd{display:flex; align-items:center; justify-content:space-between; margin:0 0 8px; line-height:1} #process .pf-hd span{font-size:15px; font-weight:800; letter-spacing:.06em; color:#1A1F26} #process .pf-hd em{ display:inline-flex; align-items:center; gap:3px; font-style:normal; padding:5px 10px 5px 7px; border-radius:999px; box-shadow:inset 0 0 0 1.2px rgba(17,17,17,.78); font-size:13px; font-weight:800; letter-spacing:.04em; color:#111111; animation:pfPop .55s cubic-bezier(.2,.8,.25,1.3) calc(var(--d0) + 2.75s) both; animation-play-state:var(--run); } #process .pf-chart{display:block; width:100%; height:auto; overflow:visible} #process .pf-base{stroke:#8E97A3; stroke-width:1; stroke-dasharray:3 3} #process .pf-axis{stroke:rgba(17,17,17,.22); stroke-width:1} #process .pf-chart .bar{ fill:#1E242C; transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(var(--v)); animation:pfBar 1.5s cubic-bezier(.45,0,.2,1) calc(var(--d0) + .7s + var(--k) * .09s) both; animation-play-state:var(--run); } #process .pf-chart .b0{fill:#C3C9D1; --k:0} #process .pf-chart .b1{--k:1} #process .pf-chart .b2{--k:2} #process .pf-chart .b3{--k:3} #process .pf-chart .b4{--k:4} #process .pf-chart .b5{--k:5} #process .pf-trend{ fill:none; stroke:#111111; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1; stroke-dashoffset:0; animation:pfDraw .9s cubic-bezier(.4,0,.2,1) calc(var(--d0) + 2.05s) both; animation-play-state:var(--run); } #process .pf-tip{fill:#111111; animation:pfFade .3s ease calc(var(--d0) + 2.85s) both; animation-play-state:var(--run)} #process .pf-ax{display:flex; justify-content:space-between; margin:6px 0 0; padding:0 2px; line-height:1} #process .pf-ax span{font-size:12px; font-weight:700; letter-spacing:.06em; color:#6A727E} @keyframes pfPop {from{opacity:0; transform:translateY(22px) scale(.92)} to{opacity:1; transform:none}} @keyframes pfFade {from{opacity:0} to{opacity:1}} @keyframes pfFloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}} @keyframes pfDraw {from{stroke-dashoffset:1} to{stroke-dashoffset:0}} @keyframes pfBar {0%{transform:scaleY(0)} 34%{transform:scaleY(1)} 52%{transform:scaleY(1)} 100%{transform:scaleY(var(--v))}} /* 文字は丸の中で少し上・少し左へ（右に人物を置くため。人物とのあいだを 25px ほど空ける） */ #process .st.goal .no{left:-28px; top:-148px} #process .st.goal .tt{left:-133px; top:-96px} #process .st.goal .gl{left:-133px; top:-30px} #process .st.goal .ds{left:-86px; top:40px} @media (prefers-reduced-motion: reduce){ #process .pf-man-w, #process .pf-card, #process .pf-hd em, #process .pf-chart .bar, #process .pf-trend, #process .pf-tip{animation:none} } /* 1023px 以下：05 の説明の下に、人物（右寄せ・大きめ）とコストの札（左下で人物の胸の前に重ねる）を置く。 人物の足もとの溶かしは浅くして、胸と手元まで見せる（溶かしを深くすると、下が大きく切れて見えるため） */ @media (max-width:1023px){ /* 図の高さ ＝ 人物のあごの少し下まで（素材の高さの 68%。あごは 59% の所）＋ 札の高さ（--ch）。札は人物のあごの下から胸の前に重なる（顔にはかけない） */ #process .pr-fig{--run:paused; --d0:.15s; --mh:360px; --ch:176px; position:relative; left:auto; top:auto; order:9; width:min(100%, 440px); height:calc(var(--mh) * .68 + var(--ch)); margin:26px auto 0; flex:none} #process .pr-fig.play{--run:running} #process .pr-map.in .pr-fig:not(.play){--run:paused} /* 人物の顔は素材の横 30% の所なので、素材を右へずらして顔を図の右寄りに置く。右へはみ出す肩は画面の端で切る（溶かすと霞むため）。 下の端だけ短く溶かし、札の後ろに隠す */ #process .pf-man-w{left:28%; top:0; width:var(--mh); height:var(--mh); filter:drop-shadow(-10px 14px 18px rgba(14,26,44,.24)) drop-shadow(-2px 3px 5px rgba(14,26,44,.12))} #process .pf-man{clip-path:none; -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0) 100%)} #process .pf-card{left:0; top:auto; bottom:0; width:64%; padding:14px 15px 10px; border-radius:16px} #process .st.goal .no, #process .st.goal .tt, #process .st.goal .gl, #process .st.goal .ds{left:auto; top:auto} } @media (max-width:767px){ #process .pr-fig{--mh:300px; --ch:156px; margin-top:22px} #process .pf-card{width:66%; padding:12px 13px 9px; border-radius:14px} #process .pf-hd{margin-bottom:6px} #process .pf-hd span{font-size:13px} #process .pf-hd em{font-size:11px; padding:4px 8px 4px 5px} #process .pf-hd em svg{width:12px; height:12px} #process .pf-ax span{font-size:10px} } /* 2026-09-22 板垣さん指示: スマホの半円は「05」の字の真ん中（字の高さの中心）から始める */ @media (max-width:1023px){ #process .st.goal .pr-sun{top:19px; height:max(75vw, calc(100% - 19px))} } /* ───── 料金 ───── 白いカードをやめ、画面の左端から出てくる大きな円に金額を置く。 ・左 … 大きな円（画面の左端で切れる）。中に当社の黒いマークと「月額 15 万円から」。15 は円の中に収める ・真ん中 … 料金のしくみを3つ（月額プラン／ツール利用料／システム構築費。文言は板垣さんのもの）。 値は3つとも同じ格。その下に罫、罫の下にボタン2つ（文字はボタンの真ん中）と注記 ・右 … 説明するコンサルタント（切り抜き）。手のひらを料金のしくみの側へ向ける。 下端は地に溶かさず、料金のしくみの最後の区切りから画面の右端まで引いた細い罫（.pc-base）でまっすぐ断ち落とす。 サービスの特徴 01（円＋マーク＋人物）と同じ組み方にしないよう、円からは離して置く 大きな数字は 15 だけ。面はベタ塗りしない。差し色の青は使わない。 */ #price .wrapx{font-family:"Noto Sans JP", system-ui, sans-serif; color:var(--ink)} /* ── 見出し（フロー・メディアと同じ形） ── */ #price .bgw{ position:absolute; left:128px; top:62px; z-index:0; font-size:156px; font-weight:900; letter-spacing:.05em; line-height:1; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; } #price .ttl{position:absolute; left:152px; top:104px; z-index:3} #price .ttl .a{display:block; color:var(--ink2); font-size:26px; font-weight:700; letter-spacing:.05em} #price .ttl .b{display:block; margin-top:8px; font-size:54px; font-weight:900; letter-spacing:.04em; color:var(--ink)} /* ══ 左 ── 大きな円 ══ .pc-hero は版面の原点に置いた大きさ0の箱。中の円と金額は版面の座標で置く。 円の中心は版面の左端の少し右（x=60, y=640）、半径 390。画面の左端（版面の -174px）で切れて、左から出てきたように見える。 白い面にしない。地（明るめのグレー）より一段沈んだ、つや消しの灰色の円盤にする。 左上から光が当たり、右下へ沈む。縁は内側の光と外の影で立て、面から浮いて見せる */ #price .pc-hero{position:absolute; left:0; top:0; width:0; height:0; z-index:1} #price .pc-disc{ position:absolute; left:-330px; top:250px; width:780px; height:780px; border-radius:50%; background: radial-gradient(78% 78% at 34% 22%, rgba(255,255,255,.58) 0%, rgba(255,255,255,.18) 42%, rgba(255,255,255,0) 66%), linear-gradient(152deg, #D3D7DD 0%, #BEC4CC 52%, #AEB5BF 100%); /* 影は章の下端（y=1090）より手前で消える大きさにする。はみ出すと章の下端で影が水平に切れて、境目が線に見える */ box-shadow: 0 44px 60px -44px rgba(14,26,44,.46), 0 22px 40px -24px rgba(14,26,44,.22), inset 0 3px 3px rgba(255,255,255,.80), inset 0 -26px 50px -26px rgba(58,66,78,.34), inset 0 0 0 1px rgba(255,255,255,.40); } /* 外側にもう1本、細い輪。円を「枠」として読ませる */ #price .pc-disc .ring{ position:absolute; inset:-30px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(17,17,17,.16); } /* 円の中の金額。マーク → 月額 → 15 万円から。文字は円の縁から 50px 以上内側に収める */ #price .pc-amt{position:absolute; left:-110px; top:428px; line-height:1} #price .pc-amt .mk{display:block; width:84px; height:auto; margin-bottom:38px} #price .pc-amt .y{font-size:38px; font-weight:800; letter-spacing:.08em; color:var(--ink)} #price .pc-amt .row{display:flex; align-items:baseline; margin-top:-4px; white-space:nowrap} #price .pc-amt .n{ font-size:270px; font-weight:900; letter-spacing:-.05em; line-height:.86; color:var(--ink); margin-left:-12px; /* 1 の左の余白を詰めて、月額の頭とそろえる */ } #price .pc-amt .u{margin-left:16px; font-size:42px; font-weight:800; letter-spacing:.04em; color:var(--ink)} /* ══ 真ん中 ── 料金のしくみ ══ */ #price .pc-how{position:absolute; left:560px; top:282px; width:530px; z-index:3} /* 文字の後ろだけ、地をうっすら明るくする（形は見せない）。地の暗い塊が通っても本文のコントラストを保つ */ #price .pc-how::before{ content:""; position:absolute; left:-120px; right:-120px; top:-80px; bottom:-100px; z-index:-1; pointer-events:none; background:radial-gradient(closest-side, rgba(255,255,255,.20) 0%, rgba(255,255,255,.12) 55%, rgba(255,255,255,0) 100%); } #price .pc-how .cap{ font-size:17px; font-weight:800; letter-spacing:.12em; line-height:1; color:var(--ink); padding-bottom:22px; } #price .pc-how ol{list-style:none; border-top:1px solid rgba(17,17,17,.26)} #price .pc-how li{padding:22px 0; border-bottom:1px solid rgba(17,17,17,.26)} #price .pc-how .hd{display:flex; align-items:baseline; line-height:1.2; color:var(--ink)} #price .pc-how .no{flex:none; width:40px; font-size:15px; font-weight:800; letter-spacing:.04em} #price .pc-how .nm{font-size:24px; font-weight:800; letter-spacing:.05em; white-space:nowrap} /* 値は3つとも同じ格（月額15万円から／実費／0円）。大きさ・太さをそろえ、15 だけを大きくしない */ #price .pc-how .v{margin-left:auto; padding-left:16px; font-size:24px; font-weight:800; letter-spacing:.04em; white-space:nowrap} /* 説明は2文。PC は1文ずつ改行し、長い文は読点のところ（.pk の切れ目）でだけ折る */ #price .pc-how .d{margin-top:12px; padding-left:40px; font-size:16px; font-weight:500; letter-spacing:.04em; line-height:1.78; color:var(--ink)} #price .pc-how .d .pk{display:inline-block} /* ボタン2つ。カードの中の主なボタンの大きさ（.md）。縦に積み、幅は長いほうにそろえる。 文字はボタンの真ん中に置く。右の黒い丸（右から 11〜57px）から文字を 20px 以上離すため、左右の余白を同じ 86px にそろえる */ #price .cta{display:inline-flex; flex-direction:column; align-items:stretch; gap:14px; margin-top:36px} #price .cta .btnx{justify-content:center; text-align:center; white-space:nowrap} #price .cta .btnx.md{padding-left:86px; padding-right:86px} #price .cta .btnx.light{box-shadow:var(--e1), inset 0 0 0 1px rgba(17,17,17,.09)} /* ══ 下の罫と注記 ══ 3項目で縦に伸びたので、罫は料金のしくみの最後の区切り（03 の下）に引き、料金のしくみの左端（x=560）から画面の右端まで伸ばす。 コンサルタントはこの罫で断ち落とす（料金のしくみの上に立って、手のひらを 02 の高さへ向ける）。 ボタンは罫の下、注記はボタンの下に置く。罫は料金のしくみの区切りの罫と同じ太さ・濃さにそろえる */ #price .wrapx{--pb:920px} @media (min-width:1024px){ #price .pc-how li:last-child{border-bottom-color:transparent} /* 最後の区切りは下の罫（.pc-base）が兼ねる。2本重ねて濃くしない */ } #price .pc-base{ position:absolute; left:560px; right:-260px; top:var(--pb); height:1px; z-index:3; background:rgba(17,17,17,.30); pointer-events:none; } /* ══ 右 ── 説明するコンサルタント ══ 手のひらを料金のしくみへ向ける。下端は罫（--pb）でまっすぐ断ち落とす（箱の下端を罫にそろえ、はみ出しを隠す）。 頭は料金のしくみの見出しの高さ、手のひらは 2つめ（ツール利用料）の高さに来る大きさ。 手の先は右の列の文字（値）から 90px 以上離し、背中側の肩は画面の右端で少し切る。顔と髪は切らない */ #price .pc-guide{ position:absolute; left:1160px; top:calc(var(--pb) - 700px); width:700px; height:700px; z-index:2; pointer-events:none; overflow:hidden; } #price .pc-guide .glow{ position:absolute; left:110px; top:30px; width:580px; height:580px; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.30) 0%, rgba(255,255,255,.12) 52%, rgba(255,255,255,0) 100%); } #price .pc-guide .fig{position:absolute; left:0; bottom:0; width:100%} #price .pc-guide .fig img{ display:block; width:100%; height:auto; filter:drop-shadow(0 18px 26px rgba(14,26,44,.18)) drop-shadow(0 4px 8px rgba(14,26,44,.10)); } /* ══ 現れ方 ══ transform と opacity だけ ══ */ #price .pc-amt.rv{transform:translateX(-40px)} #price .pc-amt.rv.in{transform:none} #price .pc-guide .fig.rv{transform:translateY(70px); transition:opacity .9s ease, transform 1s cubic-bezier(.16,.84,.24,1)} #price .pc-guide .fig.rv.in{transform:none} /* ══════ 1023px 以下：見出し → 円と金額 → 料金のしくみ・ボタン（右にコンサルタント）→ 罫 → 注記 の縦積み ══════ グリッドで組む。コンサルタントは料金のしくみと同じ行の右の列に置き、下端をすぐ下の行の罫にそろえて断ち落とす。 1024px 以上には一切効かない。余白と文字の大きさは土台（system.css）の変数に合わせる（無いときは括弧内の値）。 円は画面の左端で切れるように、左の余白より外へ出す（.sc の overflow-x:clip で切れる）。 768〜1023px は大きさを px で、767px 以下は画面幅（vw）に比例させる。 */ @media (max-width:1023px){ #price .wrapx{ position:relative; inset:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; padding:var(--m-pad,88px) var(--gut,40px); } #price .bgw{left:calc(var(--gut,40px) - 16px); top:calc(var(--m-pad,88px) - 40px); font-size:96px} #price .ttl{position:relative; left:auto; top:auto; grid-column:1 / -1; grid-row:1} #price .ttl .a{font-size:var(--m-lab,15px)} #price .ttl .b{margin-top:6px; font-size:var(--m-h2,36px)} /* 円と金額。円の中心は画面の左端から 210px */ #price .pc-hero{position:relative; left:auto; top:auto; grid-column:1 / -1; grid-row:2; width:auto; height:600px; margin-top:24px} #price .pc-disc{left:calc(-70px - var(--gut,40px)); top:20px; width:560px; height:560px} #price .pc-disc{box-shadow:0 34px 56px -40px rgba(14,26,44,.36), 0 12px 24px -18px rgba(14,26,44,.18), inset 0 2px 2px rgba(255,255,255,.80), inset 0 -16px 34px -18px rgba(58,66,78,.32), inset 0 0 0 1px rgba(255,255,255,.40)} #price .pc-disc .ring{inset:-22px} #price .pc-amt{left:calc(64px - var(--gut,40px)); top:178px} #price .pc-amt .mk{width:64px; margin-bottom:26px} #price .pc-amt .y{font-size:28px} #price .pc-amt .n{font-size:196px; margin-left:-9px} #price .pc-amt .u{margin-left:12px; font-size:31px} /* 料金のしくみ。右にコンサルタントが立つぶん、幅を詰める */ #price .pc-how{position:relative; left:auto; top:auto; grid-column:1; grid-row:3; width:auto; margin-top:40px; padding-bottom:40px} #price .pc-how::before{left:-45%; right:-45%; top:-60px; bottom:-60px; background:radial-gradient(closest-side, rgba(255,255,255,.30) 0%, rgba(255,255,255,.22) 60%, rgba(255,255,255,0) 100%)} #price .pc-how .cap{padding-bottom:18px; font-size:16px} #price .pc-how li{padding:22px 0} #price .pc-how .hd{flex-wrap:wrap; row-gap:6px} #price .pc-how .nm{font-size:21px} #price .pc-how .v{font-size:20px} #price .pc-how .d{padding-left:40px; font-size:var(--m-body,16px); line-height:1.85; word-break:auto-phrase; text-wrap:pretty} #price .pc-how .d .pk{display:inline} #price .pc-how .d .ph{display:inline-block} /* 文の途中（「使い｜勝手」など）で折り返さない。文節（.ph）の切れ目で折る */ #price .cta{margin-top:28px} /* 幅は長いほうのボタンにそろえる（全幅にしない。右のコンサルタントに掛からない） */ #price .cta .btnx.md{height:60px; padding:0 64px; font-size:17px; letter-spacing:.04em} /* 文字は真ん中。左右の余白をそろえる */ #price .cta .btnx.md .ar{right:8px; width:38px; height:38px} /* 丸を小さめにして、文字との間を 18px あける（余白を広げると 768px で手の先がボタンに触れる） */ /* コンサルタントは料金のしくみの右。下端は次の行の罫でまっすぐ断ち落とす。肩は画面の右端で切れる */ #price .pc-guide{ position:relative; left:auto; top:auto; grid-column:2; grid-row:3; align-self:end; width:316px; height:316px; margin-left:-30px; margin-right:calc(-1 * var(--gut,40px)); } #price .pc-guide .glow{left:50px; top:12px; width:266px; height:266px} /* 罫は左の余白から画面の右端まで。注記はその下 */ #price .pc-base{position:relative; left:auto; right:auto; top:auto; grid-column:1 / -1; grid-row:4; margin-right:calc(-1 * var(--gut,40px))} #price .pc-amt.rv{transform:translateX(-24px)} } @media (max-width:767px){ #price .wrapx{padding:var(--m-pad,64px) var(--gut,20px)} #price .bgw{left:calc(var(--gut,20px) - 12px); top:calc(var(--m-pad,64px) - 20px); font-size:72px} #price .ttl .a{font-size:var(--m-lab,14px)} #price .ttl .b{font-size:var(--m-h2,30px)} /* 円は画面幅の 112%。中心は画面の左端から 28vw。金額は幅に比例させ、320px でも円の中に収める */ #price .pc-hero{height:122vw; margin-top:12px} #price .pc-disc{left:calc(-28vw - var(--gut,20px)); top:5vw; width:112vw; height:112vw} #price .pc-disc .ring{inset:-4.2vw} #price .pc-amt{left:calc(8vw - var(--gut,20px)); top:37vw} #price .pc-amt .mk{width:13vw; margin-bottom:5vw} #price .pc-amt .y{font-size:6.4vw} #price .pc-amt .n{font-size:35vw; margin-left:-1.6vw} #price .pc-amt .u{margin-left:2.2vw; font-size:5.8vw} /* 狭い画面では人物を置かない（15 と競り合うため）。料金のしくみは全幅。罫はボタンの下に1本 */ #price .wrapx{grid-template-columns:minmax(0,1fr)} #price .pc-guide{display:none} #price .pc-how{margin-top:40px; padding-bottom:32px} #price .pc-how .cap{margin-bottom:0; font-size:15px} #price .pc-how li{padding:20px 0} #price .pc-how .no{width:32px; font-size:14px} #price .pc-how .nm{font-size:19px} #price .pc-how .v{font-size:17px} #price .pc-how .d{margin-top:8px; padding-left:32px; font-size:var(--m-body,15px)} /* ボタンは全幅で縦に2つ。390px で1行に収まる大きさ。これより狭い端末では、はみ出さずに2行へ折り返す */ #price .cta{display:flex; margin-top:24px; gap:10px} /* 文字は真ん中。右の黒い丸（右から 6〜42px）から文字を離すため、左右とも 50px あけ、文字は画面幅に比例させる（390px で間 20px、360px でも1行。13px より小さくはしない） */ #price .cta .btnx.md{ height:auto; min-height:56px; padding:10px 50px; font-size:clamp(13px, 3.6vw, 15px); letter-spacing:.01em; line-height:1.4; white-space:normal; word-break:auto-phrase; } #price .cta .btnx.md .ar{right:6px; width:36px; height:36px} #price .pc-how .v{padding-left:12px} /* 人物を出さないので、罫は左右の余白にそろえる（画面の右端まで伸ばさない） */ #price .pc-base{margin-right:0} } /* 2026-09-22 板垣さん指示: 03 システム構築費の下に補足（成果報酬型は小規模なシステムが対象、大規模は別途お見積もり）。 説明より一回り小さく、同じ字下げ。補足の分だけ下の罫（--pb）を下げる */ #price .pc-how .nt{margin-top:10px; padding-left:40px; font-size:13px; font-weight:500; letter-spacing:.03em; line-height:1.7; color:var(--ink2)} #price .pc-how .nt .pk{display:inline-block} #price .wrapx{--pb:975px} @media (max-width:1023px){ #price .pc-how .nt{padding-left:40px; font-size:13px; word-break:auto-phrase} #price .pc-how .nt .pk{display:inline} #price .pc-how .nt .ph{display:inline-block} } @media (max-width:767px){ #price .pc-how .nt{margin-top:8px; padding-left:32px; font-size:12px} } /* ═══ 導入事例 ─ 章いっぱいの写真が、選んだ事例ごとに入れ替わる ═══ 札（カード）は置かない。画面の左右いっぱいに事例の写真を敷き、題と説明をその上に直接置く。 写真は事例ごとに色目と明るさを変えてあり（1件目は琥珀、2件目は明るいセージ）、 選ぶと章全体のトーンが替わる。色味と文字の下の陰は写真に焼き込み、CSS の filter などは使わない。 どちらも、人のいない実写の空間の上に、実写の人物の切り抜きを右へ1人ずつ重ねて1枚にしてある （AI で作った人物は使わない。2026-09-22）。 写真の上下の端は、ページの地に溶かして縁を見せない（mask）。 選ぶのは写真の下に横に並んだ2つのボタン。自動では送らない。 2026-09-23 板垣さん指示で、事例のページがある2件（SEO記事の制作・請求と記帳）に絞った。 写真は cs-write＝SEO記事、cs-desk＝請求と記帳。cs-write は 2026-09-23 に差し替えたもので、元は assets/brushup/bg-meeting.webp（実写。ノートPCで記事を書いている場面）を事例用に焼き直してある（PC は右に人物・左を沈める、スマホは全体を一様に沈める）。 寸法（版面 1586 × 1220。画面の左右は版面の外まで 1946 に広げて敷く） 見出し … x=152 / y=236 題 … x=152 / y=408、88px・2行 説明・ボタン … 題の下。ボタンの位置は3件で動かさない 選ぶボタン … x=152 / y=958、2つを横に（1つの幅は前の3つのときと同じ 297） すべての事例を見る … 選ぶボタンの行の右端 */ /* ── 背景の写真。版面（1586）より外へ広げ、画面の左右いっぱいに敷く ── 1024px 以上の画面は、版面が常に画面幅の 82% なので、画面の幅は版面の 1934 にあたる。少し余らせて 1946 */ #cases .scene{ position:absolute; left:-180px; top:0; width:1946px; height:100%; z-index:0; pointer-events:none; /* 上下の端を地に溶かす（見出しの上と、選ぶボタンの下） */ -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.22) 64px, rgba(0,0,0,.64) 132px, rgba(0,0,0,.92) 186px, #000 214px, #000 1082px, rgba(0,0,0,.78) 1128px, rgba(0,0,0,.34) 1178px, transparent 1220px); mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.22) 64px, rgba(0,0,0,.64) 132px, rgba(0,0,0,.92) 186px, #000 214px, #000 1082px, rgba(0,0,0,.78) 1128px, rgba(0,0,0,.34) 1178px, transparent 1220px); } /* 層は2枚。新しい写真の層を上に重ねて 1.2 秒で出し、出しきってから下の層を下げる（下げるときは動かさない） */ #cases .bgl{ position:absolute; inset:0; display:block; opacity:0; z-index:1; background:#1B1D1F center / cover no-repeat; transition:none; } #cases .bgl.up{opacity:1; transition:opacity 1.2s cubic-bezier(.4,.1,.3,1)} #cases .bgl:first-child{z-index:2} #cases .bgl[data-c="1"]{background-image:url(../img/v8/cs-shop2-pc.webp); background-color:#2A1D14} #cases .bgl[data-c="2"]{background-image:url(../img/v8/cs-desk-pc.webp); background-color:#26302C} /* ── 見出し（写真の上なので白） ── */ #cases .head{position:absolute; left:152px; top:236px; z-index:2} #cases .head .ttl .a{color:rgba(255,255,255,.80); font-size:26px; letter-spacing:.05em} #cases .head .ttl .b{margin-top:8px; font-size:54px; color:#FFFFFF} /* ── 題と説明。2件を同じ場所に重ね、選んでいる1件だけを出す ── */ #cases .stories{position:absolute; left:152px; top:408px; width:1120px; z-index:2; display:grid} #cases .cx{ grid-area:1 / 1; min-width:0; height:500px; display:flex; flex-direction:column; align-items:flex-start; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .4s ease, transform .5s cubic-bezier(.4,0,.2,1), visibility 0s linear .5s; } #cases .cx.on{ opacity:1; visibility:visible; transform:none; transition:opacity .8s cubic-bezier(.2,.7,.2,1) .22s, transform 1s cubic-bezier(.16,.8,.2,1) .22s, visibility 0s; } #cases .cx .hd{ margin:0; color:#FFFFFF; font-size:88px; font-weight:700; line-height:1.24; letter-spacing:.015em; word-break:keep-all; overflow-wrap:anywhere; text-shadow:0 2px 28px rgba(0,0,0,.16); } #cases .cx .hd .l{display:block; white-space:nowrap} #cases .cx .ds{ margin-top:34px; max-width:1000px; text-wrap:pretty; color:rgba(255,255,255,.88); font-size:max(20px, calc(12px / var(--s, 1))); font-weight:500; line-height:1.9; letter-spacing:.03em; } #cases .cx .go{margin-top:auto} /* ── 事例を選ぶボタン。上に細い罫を引き、選んでいるものだけ罫が白く伸びる ── */ #cases .picks{ position:absolute; left:152px; top:958px; width:618px; z-index:3; display:flex; gap:24px; } #cases .pick{ position:relative; flex:1 1 0; min-width:0; min-height:max(110px, calc(44px / var(--s, 1))); padding:26px 8px 0 0; margin:0; border:0; background:none; cursor:pointer; text-align:left; color:#FFFFFF; font:inherit; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; } #cases .pick::before, #cases .pick::after{ content:""; position:absolute; left:0; top:0; height:max(2px, calc(1.5px / var(--s, 1))); width:100%; } #cases .pick::before{background:rgba(255,255,255,.30)} #cases .pick::after{background:#FFFFFF; transform:scaleX(0); transform-origin:left center; transition:transform .8s cubic-bezier(.2,.7,.2,1)} #cases .pick.on::after{transform:none} #cases .pick .k{ display:block; font-size:26px; font-weight:700; letter-spacing:.04em; line-height:1.3; white-space:nowrap; color:rgba(255,255,255,.62); transition:color .4s ease; } #cases .pick .s{ display:block; margin-top:8px; font-size:max(16px, calc(12px / var(--s, 1))); font-weight:500; letter-spacing:.04em; line-height:1.5; white-space:nowrap; color:rgba(255,255,255,.62); transition:color .4s ease; } #cases .pick.on .k{color:#FFFFFF} #cases .pick.on .s{color:rgba(255,255,255,.86)} @media (hover:hover){ #cases .pick:not(.on):hover .k{color:rgba(255,255,255,.92)} #cases .pick:not(.on):hover::before{background:rgba(255,255,255,.56)} } #cases .pick:focus-visible{outline:2px solid #FFFFFF; outline-offset:6px; border-radius:4px} /* 「すべての事例を見る」は選ぶボタンの行の右端 */ #cases .more{position:absolute; right:152px; top:982px; z-index:3} /* 版面ごと縮む 1024〜1300px ほどの画面でも、押せる高さを画面上で 44px 以上に保つ */ @media (min-width:1024px){ #cases .cx .go{height:max(68px, calc(44px / var(--s, 1))); font-size:max(19px, calc(12px / var(--s, 1)))} #cases .more{height:max(62px, calc(44px / var(--s, 1))); font-size:max(18px, calc(12px / var(--s, 1)))} } @media (prefers-reduced-motion: reduce){ #cases .bgl.up{transition-duration:.01s} #cases .cx, #cases .cx.on{transform:none} #cases .pick::after{transition:none} } /* ═══ 1023px 以下：縦に流して組む ═══ 見出し → 選ぶボタンの帯（横にスクロール）→ 題 → 説明 → 事例を見る → すべての事例を見る。 写真は章の全面に敷いたまま。スマホ用の写真は全体を沈めてあり、どこに文字が来ても読める。 */ @media (max-width:1023px){ #cases .wrapx{ position:relative; inset:auto; display:flex; flex-direction:column; align-items:stretch; padding:calc(var(--m-pad, 64px) + 40px) var(--gut, 20px) calc(var(--m-pad, 64px) + 48px); } #cases .scene{ left:0; width:100%; height:auto; inset:0; -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) 36px, rgba(0,0,0,.86) 72px, #000 96px, #000 calc(100% - 96px), rgba(0,0,0,.6) calc(100% - 50px), transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.4) 36px, rgba(0,0,0,.86) 72px, #000 96px, #000 calc(100% - 96px), rgba(0,0,0,.6) calc(100% - 50px), transparent 100%); } #cases .bgl{background-position:center top} #cases .bgl[data-c="1"]{background-image:url(../img/v8/cs-shop2-sp.webp)} #cases .bgl[data-c="2"]{background-image:url(../img/v8/cs-desk-sp.webp)} #cases .head{position:relative; left:auto; top:auto; order:1} #cases .head .ttl .a{font-size:var(--m-lab, 14px)} #cases .head .ttl .b{margin-top:6px; font-size:var(--m-h2, 30px); line-height:1.3} /* 選ぶボタンは横にスクロールできる帯。章の左右の余白の外まで広げ、端で切れて見えるようにする */ #cases .picks{ position:relative; left:auto; top:auto; width:auto; order:2; margin:28px calc(-1 * var(--gut, 20px)) 0; padding:0 var(--gut, 20px) 4px; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding:0 var(--gut, 20px); } #cases .picks::-webkit-scrollbar{display:none} #cases .pick{flex:0 0 auto; min-width:176px; min-height:76px; padding:18px 6px 6px 0; scroll-snap-align:start} #cases .pick::before, #cases .pick::after{height:2px} #cases .pick .k{font-size:17px} #cases .pick .s{margin-top:4px; font-size:13px} #cases .picks::after{content:""; flex:0 0 2px} /* 帯の右端にも余白を残す */ #cases .stories{position:relative; left:auto; top:auto; width:auto; order:3; margin-top:36px} #cases .cx{height:auto} /* 2件で高いほうに高さをそろえ、ボタンは下端に置く（選び替えても下が動かない） */ #cases .cx .hd{font-size:min(56px, calc((100vw - 2 * var(--gut, 40px)) / 12.6)); line-height:1.3} #cases .cx .ds{margin-top:22px; max-width:640px; font-size:var(--m-body, 16px); line-height:1.9} #cases .cx .ds{margin-bottom:30px} #cases .cx .go{margin-top:auto} #cases .more{position:relative; right:auto; top:auto; order:4; align-self:flex-start; margin-top:40px} } @media (max-width:767px){ /* 狭い画面は、言葉の切れ目（）でだけ折る */ #cases .cx .hd .l{display:inline; white-space:normal} #cases .cx .hd{font-size:min(34px, calc((100vw - 2 * var(--gut, 20px)) / 8.8)); line-height:1.38; letter-spacing:.01em} #cases .cx .ds{font-size:var(--m-body, 15px)} #cases .more{margin-top:36px} } /* 2026-09-22 板垣さん指示: 英字の表記を他の章（Features・Price・Flow・Media・Resources）とそろえる。 見出しの上は1語の「Cases」、うしろに大きく淡い「CASES」を敷く（写真の上なので白の淡い字）。 ホバーの光の輪：墨〜青の輪は暗い写真に溶けて見えなかったので、この章だけ白〜銀の輪にする。 事例を見るボタン：同じ章の「すべての事例を見る」、他の章の「すべての〜を見る」と同じ寸法にそろえる */ #cases .bgw{ position:absolute; left:128px; top:194px; z-index:1; font-size:156px; font-weight:900; letter-spacing:.05em; line-height:1; color:rgba(255,255,255,.10); white-space:nowrap; user-select:none; pointer-events:none; } #cases .btnx.light::before{ background:conic-gradient(from var(--ang), rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 50deg, rgba(222,226,236,.95) 90deg, rgba(232,222,244,.90) 130deg, rgba(252,240,222,.85) 170deg, rgba(255,255,255,0) 220deg, rgba(255,255,255,0) 360deg); } #cases .cx .go{height:62px; padding:0 68px 0 30px; font-size:18px; letter-spacing:.05em} #cases .cx .go .ar{right:10px; width:42px; height:42px} #cases .cx .go .ar svg{width:14px; height:14px} @media (min-width:1024px){ #cases .cx .go{height:max(62px, calc(44px / var(--s, 1))); font-size:max(18px, calc(12px / var(--s, 1)))} } @media (max-width:1023px){ #cases .bgw{left:calc(var(--gut, 40px) - 16px); top:calc(var(--m-pad, 88px) + 4px); font-size:96px; z-index:1} #cases .cx .go{height:48px; padding:0 52px 0 20px; font-size:14px} #cases .cx .go .ar{right:6px; width:36px; height:36px} } @media (max-width:767px){ #cases .bgw{left:calc(var(--gut, 20px) - 12px); top:calc(var(--m-pad, 64px) + 12px); font-size:72px} } /* ═══ お役立ち資料ダウンロード ═══ */ /* 見出しの行はメディアの章と同じ形。資料は同じ大きさのカードを4枚、同じ書き方で並べる。 */ #resources .wrapx{font-family:"Noto Sans JP", system-ui, sans-serif} /* 地に敷く大きな文字。平らな色で、影も縁も付けない */ #resources .bgw{ position:absolute; left:128px; top:74px; z-index:0; font-size:112px; font-weight:900; letter-spacing:.05em; line-height:1; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; } /* ── 見出しの行 ── */ #resources .ttl{position:absolute; left:152px; top:104px; z-index:2} #resources .ttl .a{color:var(--ink2); font-size:26px; letter-spacing:.05em} #resources .ttl .b{margin-top:8px; font-size:54px; color:var(--ink); white-space:nowrap} /* 題が長いぶん、説明は題の右に寄せる。字の大きさ・行の高さはメディアと同じ */ #resources .txt{position:absolute; left:152px; top:238px; width:1100px; z-index:2} /* 説明は見出しの下に大きく（どの章も同じ置き方） */ #resources .txt br{display:none} #resources .sub{ font-size:26px; font-weight:800; line-height:1.7; letter-spacing:.03em; color:var(--ink); } #resources .lead{ margin-top:10px; font-size:20px; font-weight:500; line-height:2; letter-spacing:.045em; color:var(--ink2); } #resources .more{position:absolute; right:152px; top:146px; z-index:3} /* 見出しと資料を分ける細い罫 */ #resources .rule{ position:absolute; left:152px; right:152px; top:352px; height:1px; background:var(--hair); } /* ── 資料カード ───────────────────────── */ #resources .card{ position:absolute; top:306px; width:301px; height:284px; border-radius:18px; overflow:hidden; z-index:1; background:var(--face); box-shadow:var(--e1), 0 0 0 1px var(--pale); } #resources .c1{left:152px} #resources .c2{left:479px} #resources .c3{left:806px} #resources .c4{left:1133px} /* 表紙 16:9 */ #resources .ph{ height:169px; overflow:hidden; border-bottom:1px solid var(--hair); } #resources .ph img{ width:100%; height:100%; display:block; object-fit:cover; } /* 資料名（太字）と補足を、4枚とも1行ずつ・同じ大きさで */ #resources .bd{padding:23px 22px 26px} #resources .hd, #resources .ld{white-space:nowrap; overflow:hidden; text-overflow:ellipsis} #resources .hd{ font-size:17.5px; font-weight:800; line-height:1.62; letter-spacing:.02em; color:var(--ink); } #resources .ld{ margin-top:11px; font-size:13px; font-weight:500; line-height:1.92; letter-spacing:.04em; color:var(--ink2); } /* ── 1点を大きく見せるカード（表紙＋説明＋ボタン） ── */ #resources a.card{color:inherit; text-decoration:none} #resources .card.feat{left:152px; right:152px; width:auto; top:402px; height:340px; display:flex; align-items:stretch} #resources .feat .ph{flex:0 0 604px; height:100%; aspect-ratio:auto; border-radius:0} #resources .feat .ph img{width:100%; height:100%; object-fit:cover; object-position:30% 50%} #resources .feat .bd{flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 56px} #resources .feat .lb{font-size:12px; font-weight:700; letter-spacing:.24em; color:var(--ink3); margin:0 0 14px} #resources .feat .hd{font-size:30px; white-space:normal} #resources .feat .ld{margin-top:14px; font-size:15px; white-space:normal} #resources .feat .btnx{margin-top:30px; align-self:flex-start} /* 文字とボタンは右の面の真ん中にそろえる。ボタンは共通の .md の大きさ */ #resources .feat .bd{align-items:center; text-align:center} #resources .feat .btnx{align-self:center} #resources .feat .ph{border-bottom:0; border-right:1px solid var(--hair)} /* ═══ 1023px 以下：版面を縮めず、縦に流して組む ═══ 題 → 説明 → 罫 → 資料カード → 「すべての資料を見る」の順。 768〜1023px は表紙を左・文字を右、767px 以下は表紙を上・文字を下。1024px 以上には効かない。 */ @media (max-width:1023px){ #resources .wrapx{position:relative; inset:auto; display:flex; flex-direction:column; padding:80px 40px 88px} #resources .bgw{left:28px; right:0; top:50px; font-size:92px; overflow:hidden} #resources .ttl{position:relative; left:auto; top:auto} #resources .ttl .a{font-size:18px} #resources .ttl .b{margin-top:6px; font-size:36px; line-height:1.3; white-space:normal} #resources .txt{position:relative; left:auto; top:auto; width:auto; margin-top:20px} #resources .sub{font-size:17px} #resources .lead{margin-top:8px; font-size:15px; line-height:1.9} #resources .sub, #resources .lead, #resources .feat .ld{word-break:auto-phrase} #resources .more{position:relative; right:auto; top:auto; order:5; align-self:center; margin-top:36px} #resources .rule{position:relative; left:auto; right:auto; top:auto; margin-top:32px} #resources .card.feat{position:relative; left:auto; right:auto; top:auto; width:auto; height:auto; margin-top:32px} /* 表紙はカードの高さいっぱいに敷き、左端（社名と人物）を残して右を切る */ #resources .feat .ph{flex:0 0 50%; height:auto; min-height:230px} #resources .feat .ph img{object-position:0% 50%} #resources .feat .bd{padding:28px 28px} #resources .feat .lb{font-size:13px; margin-bottom:10px} #resources .feat .hd{font-size:min(20px, calc(((100vw - 80px) / 2 - 56px) / 14.5)); line-height:1.5; letter-spacing:0; word-break:auto-phrase} #resources .feat .ld{margin-top:10px; font-size:15px; line-height:1.85} #resources .feat .btnx{margin-top:22px} } @media (max-width:767px){ #resources .wrapx{padding:56px 20px 64px} #resources .bgw{left:10px; top:34px; font-size:min(58px, calc((100vw - 20px) / 6.7))} #resources .ttl .a{font-size:15px} /* 「お役立ち資料｜ダウンロード」の切れ目で2行にする（字の幅6字ぶんで折る） */ #resources .ttl .b{font-size:30px; max-width:6.6em} #resources .sub{font-size:16px} #resources .more{margin-top:28px} #resources .rule{margin-top:28px} #resources .card.feat{flex-direction:column; margin-top:28px} #resources .feat .ph{flex:none; width:100%; min-height:0; aspect-ratio:16 / 9; border-right:0; border-bottom:1px solid var(--hair)} #resources .feat .ph img{object-position:30% 50%} #resources .feat .bd{padding:24px 22px 28px} #resources .feat .hd{font-size:min(20px, calc((100vw - 84px) / 14.5))} } /* ═══ メディア ═══ */ /* ごく普通の記事一覧。見出しは上に横並び、記事は同じ大きさで3枚。 */ /* 地に敷く大きな文字。平らな色で、影も縁も付けない */ #media .bgw{ position:absolute; left:128px; top:62px; z-index:0; font-size:156px; font-weight:900; letter-spacing:.05em; line-height:1; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; } /* ── 見出しの行 ── */ #media .ttl{position:absolute; left:152px; top:104px; z-index:2} #media .ttl .a{color:var(--ink2); font-size:26px; letter-spacing:.05em} #media .ttl .b{margin-top:8px; font-size:54px} /* 説明は地の「MEDIA」（横 128〜673px）の右に置き、大きな字と重ねない */ #media .txt{position:absolute; left:152px; top:238px; width:1100px; z-index:2} /* 説明は見出しの下に大きく（どの章も同じ置き方） */ /* 説明の改行は板垣さんの文言どおりに出す */ #media .sub{ font-size:26px; font-weight:800; line-height:1.7; letter-spacing:.03em; color:var(--ink); } #media .lead{ margin-top:10px; font-size:20px; font-weight:500; line-height:2; letter-spacing:.045em; color:var(--ink2); } #media .more{position:absolute; right:152px; top:146px; z-index:3} /* 見出しと記事を分ける細い罫。説明の2行目（版面の 332〜372px）と重ならないよう、その下に引く */ #media .rule{ position:absolute; left:152px; right:152px; top:400px; height:1px; background:var(--hair); } /* ── 記事カード ── 2026-09-22 板垣さん「メディアも基本的にアイキャッチを使いたい。最初のAI技術記事のところも同様」。 上にアイキャッチ（WordPress の原寸 1200×630 と同じ比率。切らずに全部見せる）→ 番号・カテゴリ・日付 → 題（3行）→ 抜粋（2行） → 細い罫と「記事を読む」と黒い丸の矢印。メディア一覧（/media/ の .tcard.has-ph）と同じ形。 アイキャッチは記事詳細と同じ白黒にそろえる（青い面の色を持ち込まない）。番号は地に大きく敷かず、カテゴリの前に小さく。 アイキャッチの無い記事（.no-ph）は、前の「題で組む」カード（地に大きく番号）のまま。 字の大きさは版面の px。1440px の画面では 0.745 倍で出るので、いちばん小さい字も 16px（画面で約 12px）にする。 読了時間は出さない。3枚の高さと、題・抜粋・下の行の位置は揃える。 */ #media .card{ position:absolute; top:440px; width:402px; height:530px; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; z-index:1; background:var(--face); box-shadow:var(--e2), 0 0 0 1px var(--pale); } #media .c1{left:152px} #media .c2{left:592px} #media .c3{left:1032px} #media a.card{color:inherit; text-decoration:none} /* 記事カードは本番の記事へ飛ぶリンク */ /* アイキャッチ。画像は流れの中に置き、幅から高さを決める（iPhone の Safari でも高さが 0 にならない） */ #media .ph{position:relative; flex:0 0 auto; overflow:hidden; border-bottom:1px solid var(--hair); background:#9EA2A8} #media .ph img{ display:block; width:100%; height:auto; aspect-ratio:1200 / 630; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(1.02); transition:transform .9s cubic-bezier(.2,.7,.2,1); } @media (hover:hover){ #media a.card:hover .ph img{transform:scale(1.03)} } #media .bd{position:relative; z-index:1; flex:1 1 auto; padding:24px 28px 88px} /* 番号・カテゴリ・日付 ─ 受け皿を作らず、字と細い縦罫だけで置く */ #media .meta{display:flex; align-items:center; gap:12px; font-size:16px; line-height:1.5} #media .nm{font-weight:800; letter-spacing:.06em; color:var(--ink3); font-variant-numeric:tabular-nums} #media .cat{font-weight:800; letter-spacing:.08em; color:var(--ink2)} #media .dt{font-weight:700; letter-spacing:.1em; color:var(--ink3); font-variant-numeric:tabular-nums} #media .nm + .cat, #media .dt{padding-left:12px; border-left:1px solid var(--hair)} /* 題は3行ぶんの高さを取り、抜粋の書き出しを3枚で揃える。抜粋は2行で「…」 */ #media .hd{ margin-top:14px; height:calc(21px * 1.52 * 3); font-size:21px; font-weight:900; line-height:1.52; letter-spacing:.01em; color:var(--ink); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } #media .ld{ margin-top:10px; font-size:16px; font-weight:500; line-height:1.8; letter-spacing:.03em; color:var(--ink2); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } /* 題と抜粋は語の途中で折らない（「お｜すすめ」「依頼で｜きる」のような折れ方を防ぐ） */ #media .hd, #media .ld{word-break:auto-phrase} /* 下の行：細い罫、「記事を読む」、黒い丸の矢印。カードの下端から置く */ #media .bd::before{ content:""; position:absolute; left:28px; right:28px; bottom:68px; height:1px; background:var(--hair); } #media .bd::after{ content:"記事を読む"; position:absolute; left:28px; bottom:30px; font-size:17px; font-weight:700; line-height:1.5; letter-spacing:.06em; color:var(--ink); } #media .card::after{ content:""; position:absolute; right:26px; bottom:22px; z-index:1; width:44px; height:44px; border-radius:50%; box-shadow:0 8px 16px -10px rgba(6,12,22,.6); background:#111 url("data:image/svg+xml;utf8,") 55% 50% / 14px no-repeat; } /* アイキャッチの無い記事：前の「題で組む」カード。地に大きく薄く番号を敷き、題を4行ぶん */ #media .card.no-ph::before{ position:absolute; right:-6px; top:-30px; z-index:0; font-size:150px; font-weight:900; line-height:1; letter-spacing:-.02em; color:rgba(17,17,17,.055); pointer-events:none; } #media .no-ph.c1::before{content:"01"} #media .no-ph.c2::before{content:"02"} #media .no-ph.c3::before{content:"03"} #media .no-ph .bd{padding-top:34px} #media .no-ph .hd{margin-top:24px; height:calc(21px * 1.52 * 5); -webkit-line-clamp:5} #media .no-ph .ld{-webkit-line-clamp:4} /* ═══ 1023px 以下：版面を縮めず、縦に流して組む ═══ 題 → 説明 → 罫 → 記事 → 「すべての記事を見る」の順。 768〜1023px は記事を横長（アイキャッチを左に、比率を保って上そろえ）に1列、767px 以下はアイキャッチを上に1列。1024px 以上には効かない。 */ @media (max-width:1023px){ #media .wrapx{position:relative; inset:auto; display:flex; flex-direction:column; padding:80px 40px 88px} #media .bgw{left:28px; right:0; top:42px; font-size:120px; overflow:hidden} #media .ttl{position:relative; left:auto; top:auto} #media .ttl .a{font-size:18px} #media .ttl .b{margin-top:6px; font-size:36px; line-height:1.3} #media .txt{position:relative; left:auto; top:auto; width:auto; margin-top:20px} #media .sub{font-size:17px} #media .lead{margin-top:8px; font-size:15px; line-height:1.9; word-break:auto-phrase} #media .more{position:relative; right:auto; top:auto; order:5; align-self:center; margin-top:36px} #media .rule{position:relative; left:auto; right:auto; top:auto; margin-top:32px} #media .card, #media a.card{position:relative; left:auto; top:auto; width:auto; height:auto; margin-top:20px} #media .card.c1{margin-top:32px} #media .meta{font-size:13px} #media .hd{height:auto; margin-top:12px; font-size:18px; line-height:1.56; -webkit-line-clamp:4} #media .ld{margin-top:8px; font-size:15px; line-height:1.85} #media .bd{padding:20px 24px 84px} #media .bd::before{left:24px; right:24px; bottom:64px} #media .bd::after{left:24px; bottom:28px; font-size:14px} #media .card::after{right:22px; bottom:20px; width:44px; height:44px; background-size:13px} #media .card.no-ph::before{font-size:120px; top:-20px} #media .no-ph .bd{padding-top:30px} #media .no-ph .hd{margin-top:16px; height:auto} #media .no-ph .ld{-webkit-line-clamp:2} } @media (min-width:768px) and (max-width:1023px){ #media .card:not(.no-ph){display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); align-items:start; padding:24px 0 0 24px} #media .card:not(.no-ph) .ph{border-bottom:0; border-radius:12px; box-shadow:0 0 0 1px var(--hair)} #media .card:not(.no-ph) .bd{align-self:stretch; padding:2px 26px 84px 28px} #media .card:not(.no-ph) .bd::before{left:28px; right:26px} #media .card:not(.no-ph) .bd::after{left:28px} } @media (max-width:767px){ #media .wrapx{padding:56px 20px 64px} #media .bgw{left:10px; top:30px; font-size:72px} #media .ttl .a{font-size:15px} #media .ttl .b{font-size:30px} #media .sub{font-size:16px} #media .more{margin-top:28px} #media .rule{margin-top:28px} #media .card, #media a.card{margin-top:16px} #media .card.c1{margin-top:28px} #media .bd{padding:18px 20px 80px} #media .bd::before{left:20px; right:20px; bottom:62px} #media .bd::after{left:20px; bottom:26px} #media .card::after{right:18px; bottom:18px} } /* ───── よくあるご質問 ───── 6件を同じ大きさでそろえ、左に題と人物を置く */ /* ── 左の柱 ── */ #faq .ttl{position:absolute; left:152px; top:136px; z-index:2} #faq .ttl .a{ font-size:38px; font-weight:900; letter-spacing:.06em; line-height:1.1; color:var(--ink); } /* 地に敷く大きな文字。平らな色で、影も縁も付けない */ #faq .bgw{ position:absolute; left:128px; top:78px; z-index:0; font-size:176px; font-weight:900; letter-spacing:.04em; line-height:1; color:var(--pale); white-space:nowrap; user-select:none; pointer-events:none; } #faq .lead{position:absolute; left:152px; top:212px; width:366px; color:var(--ink2)} /* 人物 ─ 面の中に立たせる。頭の上に余白を取り、天地とも切らない */ #faq .ph{position:absolute; left:128px; top:300px; width:414px; height:520px} /* 面で囲まず、うしろの光と足もとの影だけで立たせる */ #faq .ph .halo{ position:absolute; left:28px; top:80px; width:358px; height:358px; border-radius:50%; background:radial-gradient(circle at 44% 40%, rgba(255,255,255,.92) 0%, rgba(240,244,249,.70) 46%, rgba(222,230,240,.46) 76%, rgba(222,230,240,.30) 100%); /* 縁だけをぼんやり光らせて、丸の輪郭をやわらかく立てる */ box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 34px 8px rgba(255,255,255,.62), 0 30px 60px -24px rgba(20,32,50,.22), inset 0 -26px 54px rgba(120,140,168,.16); filter:blur(7px); /* 丸の輪郭はぼかす。人は丸の弧で切るのでそちらはくっきり残る */ } #faq .ph .floor{display:none} /* 人物は丸の上には出し、下は丸の弧で切る。ぼかして消すより、形で終わらせる */ #faq .ph .person{ position:absolute; left:50%; bottom:72px; z-index:1; width:auto; height:520px; transform:translateX(-50%); filter:contrast(1.04) saturate(1.02) drop-shadow(0 18px 22px rgba(14,26,44,.20)) drop-shadow(0 4px 8px rgba(14,26,44,.10)); /* 頭は丸の上へ出し、丸の真ん中より下は丸の弧で切る */ -webkit-mask-image:linear-gradient(#000,#000), radial-gradient(circle 179px at 260px 331px, #000 99.5%, transparent 100%); mask-image:linear-gradient(#000,#000), radial-gradient(circle 179px at 260px 331px, #000 99.5%, transparent 100%); -webkit-mask-size:100% 331px, 100% 100%; mask-size:100% 331px, 100% 100%; -webkit-mask-position:0 0, 0 0; mask-position:0 0, 0 0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* ── 設問の束 ── 6枚とも同じ厚み・同じ幅 ── */ #faq .list{ position:absolute; left:620px; top:136px; width:814px; display:flex; flex-direction:column; gap:16px; } #faq .row{ border-radius:16px; overflow:hidden; background:var(--face); box-shadow:var(--e1), 0 0 0 1px var(--pale), inset 0 0 0 1px var(--faceline); transition:box-shadow .3s ease; } #faq .row:hover{box-shadow:var(--e2), 0 0 0 1px var(--pale), inset 0 0 0 1px var(--faceline)} /* 設問の行（押せる） */ #faq .q{ position:relative; display:flex; align-items:center; width:100%; min-height:92px; padding:24px 92px 24px 36px; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; } #faq .q .t{ font-size:19px; font-weight:700; letter-spacing:.04em; line-height:1.62; color:var(--ink); } /* 開閉のつまみ（細い輪の中の＋。開くと−になる） */ #faq .tg{ position:absolute; right:30px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; box-shadow:inset 0 0 0 1px var(--hair); } #faq .tg i, #faq .tg b{ position:absolute; left:50%; top:50%; border-radius:2px; background:var(--ink); transition:transform .32s cubic-bezier(.2,.7,.2,1); } #faq .tg i{width:15px; height:2px; transform:translate(-50%,-50%)} #faq .tg b{width:2px; height:15px; transform:translate(-50%,-50%)} #faq .row.open .tg b{transform:translate(-50%,-50%) rotate(90deg)} /* 答え（閉じている状態が既定） */ #faq .a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1); } #faq .row.open .a{grid-template-rows:1fr} #faq .a .bd{overflow:hidden} #faq .a p{ margin:0; padding:0 92px 32px 36px; font-size:15px; font-weight:500; line-height:2.05; letter-spacing:.05em; color:var(--ink2); } /* 設問と答えのあいだに細い罫を一本 */ #faq .a .bd::before{ content:""; display:block; height:1px; margin:0 36px 24px; background:var(--hair); } /* ═══ 1023px 以下：版面を縮めず、縦に流して組む ═══ 題 → リード → 6問 → 人物（小さく）の順。設問を開くと章ごと伸びる（高さで切らない）。 人物は丸の光・切り抜きの寸法をそろって --k 倍にする。1024px 以上には効かない。 */ @media (max-width:1023px){ #faq .wrapx{position:relative; inset:auto; display:flex; flex-direction:column; padding:80px 40px 88px} #faq .bgw{left:24px; right:0; top:40px; font-size:128px; overflow:hidden} #faq .ttl{position:relative; left:auto; top:auto} #faq .ttl .a{font-size:36px; line-height:1.3} #faq .lead{position:relative; left:auto; top:auto; width:auto; margin-top:16px; font-size:16px; line-height:1.9} #faq .lead, #faq .q .t, #faq .a p{word-break:auto-phrase} #faq .list{position:relative; left:auto; top:auto; width:auto; margin-top:36px; gap:14px} #faq .q{min-height:76px; padding:20px 76px 20px 28px} #faq .q .t{font-size:17px} #faq .tg{right:22px; width:36px; height:36px} #faq .a p{padding:0 28px 26px; font-size:15px; line-height:1.95} #faq .a .bd::before{margin:0 28px 20px} #faq .ph{ --k:.72; order:1; position:relative; left:auto; top:auto; width:calc(414px * var(--k)); height:calc(470px * var(--k)); margin:44px auto 0; } #faq .ph .halo{ left:calc(28px * var(--k)); top:calc(30px * var(--k)); width:calc(358px * var(--k)); height:calc(358px * var(--k)); filter:blur(5px); } #faq .ph .person{ height:calc(520px * var(--k)); bottom:calc(22px * var(--k)); -webkit-mask-image:linear-gradient(#000,#000), radial-gradient(circle calc(179px * var(--k)) at calc(260px * var(--k)) calc(331px * var(--k)), #000 99.5%, transparent 100%); mask-image:linear-gradient(#000,#000), radial-gradient(circle calc(179px * var(--k)) at calc(260px * var(--k)) calc(331px * var(--k)), #000 99.5%, transparent 100%); -webkit-mask-size:100% calc(331px * var(--k)), 100% 100%; mask-size:100% calc(331px * var(--k)), 100% 100%; } } @media (max-width:767px){ #faq .wrapx{padding:56px 20px 64px} #faq .bgw{left:8px; top:28px; font-size:92px} #faq .ttl .a{font-size:30px} #faq .lead{margin-top:12px; font-size:15px} #faq .list{margin-top:28px; gap:10px} #faq .row{border-radius:14px} #faq .q{min-height:64px; padding:16px 60px 16px 20px} #faq .q .t{font-size:16px; line-height:1.6; letter-spacing:.02em} #faq .tg{right:16px; width:32px; height:32px} #faq .tg i{width:13px} #faq .tg b{height:13px} #faq .a p{padding:0 20px 22px; line-height:1.9; letter-spacing:.03em} #faq .a .bd::before{margin:0 20px 16px} #faq .ph{--k:.6; margin-top:36px} } /* ═══ CTA ─ ページの締め ═══ 言葉は版面の内側の1枚のカードに収め、笑顔の人物は切り抜きのまま カードの縁から立ち上げる。頭はカードより上、肩の高さでカードの縁と交わる。 深い章なので色はすべて変数。面は var(--face)、区切りは inset の縁。 */ #cta{font-family:"Noto Sans JP", system-ui, sans-serif; color:var(--ink)} /* ── 地にうっすら置く明かり。面は塗らない ── */ #cta .glow{ position:absolute; z-index:0; inset:0; pointer-events:none; background: radial-gradient(44% 46% at 70% 30%, rgba(120,176,255,.15) 0%, rgba(120,176,255,0) 72%), radial-gradient(54% 44% at 30% 76%, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 76%); } /* ── 人物の後ろの明かり。カードに隠れる分は見えない ── */ #cta .halo{ position:absolute; z-index:0; pointer-events:none; left:818px; top:20px; width:640px; height:560px; border-radius:50%; background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.16) 0%, rgba(150,196,255,.09) 46%, rgba(150,196,255,0) 74%); } /* ── カード（版面の内側／左右152px） ── */ #cta .card{ position:absolute; z-index:1; left:152px; top:478px; width:1282px; height:352px; display:flex; align-items:center; border-radius:26px; background:var(--face); box-shadow: 0 40px 60px -34px rgba(6,12,22,.55), 0 10px 20px -12px rgba(6,12,22,.26), 0 0 0 1px rgba(20,32,50,.06), inset 0 0 0 1px var(--faceline); } /* ── 言葉 ── */ #cta .copy{padding:0 0 0 64px} #cta .ttl .a{font-size:26px; font-weight:700; letter-spacing:.14em; color:var(--ink2)} #cta .ttl .b{ margin-top:10px; font-size:52px; font-weight:900; letter-spacing:.01em; color:var(--ink); white-space:nowrap; } #cta .body{margin-top:20px; color:var(--ink2)} /* ── ボタン（締めだが、大きくしすぎない） ── */ #cta .acts{display:flex; align-items:center; gap:16px; margin-top:28px} #cta .btnx{height:58px; padding:0 56px 0 26px; font-size:17px} #cta .btnx .ar{right:10px; width:38px; height:38px} #cta .btnx .ar svg{width:13px; height:13px} /* ── 人物（切り抜き。カードの縁から立ち上がる） ── */ #cta .who{ position:absolute; z-index:2; margin:0; right:194px; bottom:130px; width:529px; height:690px; } #cta .who img{ display:block; width:100%; height:100%; object-fit:contain; object-position:bottom center; filter:drop-shadow(-22px 16px 26px rgba(4,10,20,.42)); } /* 立ち上がりを少しだけ深くする */ #cta .who.rv{transform:translateY(44px); transition-duration:.86s} #cta .who.rv.in{transform:none} /* ═══ 1023px 以下：版面を縮めず、縦に流して組む ═══ 768〜1023px：言葉とボタンを左、人物を右に置き、カードの下の縁から頭を上へ出す（PC と同じ作り）。 767px 以下：言葉とボタンを先に出し、人物は小さくしてカードの下の縁から立ち上げる。 1024px 以上には効かない。 */ @media (max-width:1023px){ #cta .wrapx{position:relative; inset:auto; padding:112px 40px 88px} #cta .halo{left:auto; right:0; top:10px; width:480px; height:420px} #cta .card{position:relative; left:auto; top:auto; width:auto; height:auto; min-height:0; padding:44px 40px} #cta .copy{padding:0; max-width:420px} #cta .ttl .a{font-size:18px} /* 見出し（13字）は1行のまま、言葉の幅（420px）と人物の顔の手前に収める（768px で29px、808px 以上で32px） */ #cta .ttl .b{margin-top:8px; font-size:min(32px, calc((100vw - 388px) / 13.1)); line-height:1.3} #cta .body{margin-top:16px; font-size:16px; line-height:1.9; word-break:auto-phrase} #cta .acts{flex-direction:column; align-items:flex-start; gap:12px; margin-top:24px} #cta .btnx{height:54px; padding:0 56px 0 24px; font-size:15px} #cta .btnx .ar{right:8px; width:36px; height:36px} #cta .who{right:48px; bottom:88px; width:322px; height:420px} } @media (max-width:767px){ #cta .wrapx{padding:56px 20px 64px} #cta .halo{display:none} /* 下に人物の立つ場所を取る（人物の高さ 262px から、頭の上の透けた分を引いて少し空ける） */ #cta .card{display:block; padding:32px 18px 276px} #cta .copy{max-width:none} #cta .ttl .a{font-size:15px} /* 「削減効果をシミュレーション」（13字）を1行に収め、カードの幅いっぱいまで使う（390px で24px、430px で27px）。 狭い端末では字を下げて折らない */ #cta .ttl .b{margin-top:6px; font-size:min(30px, calc((100vw - 76px) / 13.2)); letter-spacing:0; white-space:nowrap} #cta .body{margin-top:14px; font-size:15px} #cta .acts{align-items:stretch; gap:10px; margin-top:22px} /* ボタンの字は1行に収める（360px 幅で14px まで下げる。12px より下げない） */ #cta .btnx{height:54px; padding:0 52px 0 16px; font-size:clamp(12px, calc((100vw - 150px) / 15.4), 15px); letter-spacing:.02em; white-space:nowrap} #cta .who{left:0; right:0; bottom:64px; margin:0 auto; width:201px; height:262px} #cta .who img{filter:drop-shadow(-12px 10px 16px rgba(4,10,20,.32))} } /* 359px 以下：12px の字が丸に掛からないよう、余白と丸を詰める */ @media (max-width:359px){ #cta .btnx{padding:0 44px 0 12px; letter-spacing:0} #cta .btnx .ar{right:6px; width:32px; height:32px} } /* 説明文は人物の手前で折り返す（PC） */ @media (min-width:1024px){ #cta .body{max-width:600px; word-break:auto-phrase; text-wrap:pretty} } #footer .wrapx{padding:96px 152px 0} #footer .fx{display:flex; justify-content:space-between; gap:80px} #footer .brand{width:470px} #footer .nm{font-size:29px; font-weight:900; letter-spacing:.16em; color:var(--ink)} #footer .tg{margin-top:20px; font-size:16px; font-weight:500; line-height:2.0; letter-spacing:.04em; color:var(--ink2)} #footer .ft-cta{margin-top:34px; height:64px; padding:0 64px 0 32px; font-size:19px} #footer .ft-cta .ar{width:40px; height:40px; right:12px} #footer .cols{display:flex; gap:76px; padding-top:8px} #footer .cols .colhd{font-size:13px; font-weight:700; letter-spacing:.22em; color:var(--ink3); margin-bottom:20px} #footer .cols a{display:block; margin-bottom:15px; font-size:16px; font-weight:500; letter-spacing:.04em; color:var(--ink2); text-decoration:none} #footer .fl{ display:flex; justify-content:space-between; align-items:center; margin-top:82px; padding-top:26px; border-top:1px solid var(--hair); font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--ink3); } #footer .fl .rt a{margin-left:28px; color:var(--ink3); text-decoration:none} /* ═══ 1023px 以下：版面を縮めず、縦に流して組む ═══ 社名と一文 → 列 → 著作権の順。767px 以下は列を縦に重ね、各列の中を2つに割る。 リンクは押せる高さを 44px 取る。1024px 以上には効かない。 */ @media (max-width:1023px){ #footer .wrapx{position:relative; inset:auto; padding:72px 40px 40px} #footer .fx{flex-direction:column; gap:44px} #footer .brand{width:auto} #footer .cols{gap:48px; padding-top:0} #footer .cols > div{flex:1 1 0} #footer .cols .colhd{margin-bottom:6px} #footer .cols a{display:flex; align-items:center; min-height:44px; margin:0; font-size:15px} #footer .fl{margin-top:44px; padding-top:16px} #footer .fl .rt a{display:inline-flex; align-items:center; min-height:44px; margin-left:0} } @media (max-width:767px){ #footer .wrapx{padding:56px 20px 28px} #footer .nm{font-size:24px} #footer .tg{margin-top:14px; font-size:14px; line-height:1.9; letter-spacing:.01em; word-break:auto-phrase} #footer .cols{flex-direction:column; gap:28px} #footer .cols > div{display:grid; grid-template-columns:1fr 1fr; column-gap:16px} #footer .cols .colhd{grid-column:1 / -1} #footer .fl{flex-direction:column-reverse; align-items:flex-start; gap:0; margin-top:36px} } /* スマホでは右下の音のボタンを出さない（フッターの文字や、ボタンの矢印を隠してしまうため） */ /* 地は各セクションの .ground に任せるので、版面そのものの地は外す */ #hero .stage{background:none} #hero .grain{display:none} #hero .mist{display:none} /* 版面の端で切れて縦線に見えるため */ #sys /* v3B：3枚の層を立体で重ねる。下から「会社のデータ」「業務システム（業務アプリをいくつでも）」「AI」。 人は左から業務システムの層へ入り、名前と説明は右に平らに置いて線で層を指す（位置は JS が層の実際の位置から引く）。 */ :root{--ink:#111111; --ink2:#2B3442; --mute:#6B7380; --hair:rgba(17,17,17,.12); --pale:rgba(17,17,17,.05); --bg:#EEEFF1; --brand:#111; --ui-line:#ECEEF2; --ui-sub:#8A919C; --ui-soft:#F6F7F9}#sys *{box-sizing:border-box; margin:0; padding:0}#sys{background:var(--bg); font-family:"Noto Sans JP",system-ui,sans-serif; color:var(--ink)}#sys .num{font-family:"Plus Jakarta Sans","Noto Sans JP",sans-serif; font-feature-settings:"tnum"}#sys{position:relative; width:1600px; height:1590px; margin:0 auto; overflow:hidden; background:var(--bg)}#sys .bgw{position:absolute; right:152px; top:250px; font-size:110px; font-weight:900; line-height:1; letter-spacing:.03em; color:var(--pale); white-space:nowrap; user-select:none}#sys .head{position:absolute; left:152px; top:118px; width:1000px; z-index:2}#sys .ttl{font-size:60px; font-weight:900; letter-spacing:.03em; line-height:1.3}#sys .lead{margin-top:22px; font-size:15px; font-weight:500; line-height:2.1; letter-spacing:.05em; color:var(--ink2)}#sys .lead span{display:block}#sys /* ── 立体の舞台 ── */ .stage{position:absolute; left:470px; top:360px; width:640px; height:760px; perspective:2400px; z-index:2}#sys .scene{position:absolute; left:50%; top:52%; width:460px; height:320px; margin:-160px 0 0 -230px; transform-style:preserve-3d; transform:translateY(150px) rotateX(58deg) rotateZ(-38deg)}#sys .layer{position:absolute; inset:0; border-radius:22px; transform-style:preserve-3d}#sys .l-data{transform:translateZ(0); background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(240,244,250,.9)); box-shadow:0 0 0 1px rgba(17,17,17,.08), 0 30px 60px rgba(15,26,51,.10)}#sys .l-sys{transform:translateZ(250px); background:#fff; box-shadow:0 0 0 1px rgba(17,17,17,.06), 0 30px 60px rgba(15,26,51,.10)}#sys .l-ai{transform:translateZ(490px); inset:46px 84px; border-radius:20px; background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(242,243,245,.98)); box-shadow:0 0 0 1px rgba(17,17,17,.08), 0 30px 60px rgba(15,26,51,.10)}#sys /* 層の厚み（手前の縁） */ .layer::after{content:""; position:absolute; left:14px; right:14px; bottom:-8px; height:8px; border-radius:0 0 18px 18px; transform-origin:top; transform:rotateX(-90deg); background:#D6DCE4}#sys .l-ai::after{background:rgba(17,17,17,0.11)}#sys /* 層をつなぐ柱（四隅から上へ） */ .post{position:absolute; width:1px; height:250px; transform-origin:bottom; transform:rotateX(-90deg); bottom:0; background:linear-gradient(to top, rgba(17,17,17,.0), rgba(17,17,17,.22))}#sys /* データの層の中身 */ .dgrid{position:absolute; inset:20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,1fr); gap:12px}#sys .dc{border-radius:14px; background:rgba(255,255,255,.92); box-shadow:0 0 0 1px rgba(17,17,17,.07); padding:18px 18px; display:flex; flex-direction:column; justify-content:space-between}#sys .dc b{font-size:13px; white-space:nowrap; font-weight:800; letter-spacing:.04em}#sys .dc span{font-size:21px; font-weight:800}#sys .dc span small{font-size:13px; margin-left:3px; color:var(--ink2)}#sys .dc.hot{box-shadow:0 0 0 1.5px rgba(17,17,17,0.33), 0 0 26px rgba(17,17,17,0.11)}#sys .dc.hot b{color:var(--ink)}#sys /* 業務システムの層の中身（業務アプリのタイル） */ .sys-in{position:absolute; inset:22px}#sys .sys-top{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; letter-spacing:.04em}#sys .sys-top span{margin-left:auto; font-size:12px; font-weight:500; color:var(--ui-sub)}#sys .apps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px}#sys .ap{min-width:0; overflow:hidden; height:72px; border-radius:13px; background:var(--ui-soft); padding:12px 12px; display:flex; flex-direction:column; justify-content:space-between}#sys .ap .n{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; white-space:nowrap}#sys .ap .n svg{flex:none; stroke:var(--ink); width:16px; height:16px}#sys .ap .v{font-size:10.5px; color:var(--ui-sub); white-space:nowrap}#sys .ap .v b{color:var(--ink); font-weight:700; margin-right:2px}#sys .ap.new{background:#fff; box-shadow:inset 0 0 0 1.5px rgba(17,17,17,0.27)}#sys .ap.new .v{color:var(--ink)}#sys .ap.add{background:#fff; box-shadow:inset 0 0 0 1.5px #CBD2DB; justify-content:center; align-items:center; gap:4px}#sys /* AI の層の中身 */ .ai-in{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}#sys .ai-in span{font-size:84px; font-weight:900; line-height:1; transform:scaleX(1.1); background:radial-gradient(58% 70% at 20% 24%, rgba(74,83,94,.92) 0%, rgba(28,70,128,0) 62%), radial-gradient(52% 64% at 80% 70%, rgba(52,60,70,.85) 0%, rgba(22,76,92,0) 64%), linear-gradient(150deg,#161B24 0%,#0A0D12 52%,#151A22 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}#sys /* 床の光 */ .glow{position:absolute; left:420px; top:760px; width:760px; height:400px; border-radius:50%; z-index:1; background:radial-gradient(50% 50% at 50% 50%, rgba(17,17,17,.07) 0%, rgba(17,17,17,0) 70%)}#sys /* 線（JS が引く） */ .lines{position:absolute; left:0; top:0; width:1600px; height:1590px; z-index:3; fill:none; pointer-events:none}#sys .lines .ld{stroke:rgba(17,17,17,.28); stroke-width:1.1}#sys .lines .pp{stroke:rgba(17,17,17,.18); stroke-width:1.1}#sys .lines circle{fill:#111}#sys /* 右の説明 */ .lab{position:absolute; left:1130px; width:320px; z-index:4}#sys .lab .k{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--mute)}#sys .lab h4{margin-top:4px; font-size:22px; font-weight:800; letter-spacing:.05em}#sys .lab p{margin-top:6px; font-size:13px; line-height:1.85; color:var(--ink2); letter-spacing:.03em}#sys /* 左の人 */ .who{position:absolute; left:152px; z-index:4; display:flex; align-items:center; gap:12px}#sys .who img{width:60px; height:60px; border-radius:50%; object-fit:cover; background:#E3E6EA; box-shadow:0 0 0 4px rgba(255,255,255,.75), 0 8px 26px rgba(15,26,51,.10)}#sys .who b{display:block; font-size:14px; font-weight:800; letter-spacing:.06em}#sys .who span{display:block; font-size:11.5px; color:var(--mute); letter-spacing:.03em}#sys .grp{position:absolute; left:152px; top:404px; font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--mute)}#sys /* 下：なぜ今か（図つきの2段） */ .why{position:absolute; left:152px; top:1110px; width:1296px; display:grid; grid-template-columns:1fr 1fr; column-gap:96px}#sys .why .e{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--mute)}#sys .why h4{margin-top:8px; font-size:30px; font-weight:900; letter-spacing:.04em; line-height:1.35}#sys .why .d{margin-top:12px; font-size:13.5px; line-height:1.95; color:var(--ink2); letter-spacing:.04em}#sys .why svg{display:block; margin-top:22px}#sys .why svg text{font-family:"Noto Sans JP"; font-size:11.5px; fill:#6B7380; letter-spacing:.04em}#sys .why svg .k{fill:#111; font-weight:700; font-size:12.5px}#sys .why{top:1290px}#sys /* ── 動き ── */ .l-data::after{height:16px; bottom:-16px; background:linear-gradient(#D3D9E2,#C5CDD8)}#sys .beam{position:absolute; width:3px; margin-left:-1.5px; transform-origin:50% 100%; pointer-events:none; opacity:0; background:linear-gradient(to top, rgba(17,17,17,0.00) 0%, rgba(17,17,17,0.21) 40%, rgba(17,17,17,0.03) 100%)}#sys .beam::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(to top, rgba(17,17,17,0.00) 0 26px, rgba(17,17,17,0.57) 26px 34px, rgba(17,17,17,0.00) 34px 60px); background-size:100% 60px; animation:sys-rise 1.6s linear infinite}#sys .beam.b2::after{animation-duration:1.2s}#sys .beam.lit{width:5px; margin-left:-2.5px; background:linear-gradient(to top, rgba(17,17,17,0.06) 0%, rgba(17,17,17,0.36) 50%, rgba(17,17,17,0.06) 100%)} @keyframes sys-rise{from{background-position:0 0} to{background-position:0 -60px}}#sys .dc{transition:box-shadow .5s ease}#sys .dc.pulse{box-shadow:0 0 0 1.5px #111, 0 14px 30px rgba(15,26,51,.16)}#sys .ap{transition:background .4s ease, box-shadow .4s ease}#sys .ap.on{background:#fff; box-shadow:inset 0 0 0 1.5px #111, 0 12px 26px rgba(15,26,51,.16)}#sys .ap.on .n{color:var(--ink)}#sys .l-ai{transition:box-shadow .4s ease}#sys .l-ai.think{box-shadow:0 0 0 1.5px #111, 0 34px 70px rgba(15,26,51,.16)}#sys .who em{display:block; margin-top:3px; font-style:normal; font-size:11.5px; font-weight:700; color:#9AA1AB; letter-spacing:.03em; opacity:0; transform:translateX(-6px); transition:opacity .45s ease, transform .45s ease, color .45s ease}#sys .who.done em{opacity:1; transform:none}#sys .who.on em{color:var(--ink)}#sys .who em .m2{display:none}#sys .who.ok em .m1{display:none}#sys .who.ok em .m2{display:inline}#sys .who .m1::after{content:" …確認待ち"; color:#9AA1AB; font-weight:600}#sys .who img{transition:box-shadow .4s ease}#sys .who.on img{box-shadow:0 0 0 4px rgba(255,255,255,.9), 0 0 0 5.5px #111, 0 8px 26px rgba(15,26,51,.12)}#sys .lines .pp.on{stroke:rgba(17,17,17,0.45); stroke-width:1.4; stroke-dasharray:4 6; animation:sys-flow .9s linear infinite} @keyframes sys-flow{to{stroke-dashoffset:20}}#sys .lab{transition:opacity .5s ease, transform .5s ease}#sys .lab.hide{opacity:0; transform:translateX(10px)}#sys .scroll-hint{height:520px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:40px; color:#9AA1AB; font-size:13px; letter-spacing:.08em}#sys .tail{height:500px} @media (prefers-reduced-motion: reduce){#sys .beam::after,#sys .lines .pp.on{animation:none}}#sys .mk{position:absolute; width:1px; height:1px; pointer-events:none}#sys .lines .bm{stroke:rgba(17,17,17,.14); stroke-width:1.6}#sys .lines .bd{stroke:rgba(17,17,17,.55); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:3 22; animation:sys-up 1.4s linear infinite}#sys .lines .bm.lit{stroke:rgba(17,17,17,.30); stroke-width:2.4}#sys .lines .bd.lit{stroke:#111; stroke-width:3; stroke-dasharray:5 12; animation-duration:.8s}#sys .lines .src{fill:rgba(17,17,17,.10)} @keyframes sys-up{to{stroke-dashoffset:-25}} @media (prefers-reduced-motion: reduce){#sys .lines .bd{animation:none}}#sys .scene{-webkit-font-smoothing:antialiased}#sys .ap .n{font-size:12px}#sys .ap .v{font-size:11px}#sys /* ── 置き換わったツールと、空いた時間 ── */ .swap{position:absolute; left:152px; top:1150px; width:1296px; display:grid; grid-template-columns:1fr 420px; column-gap:80px; z-index:4}#sys .swap .e{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--mute)}#sys .swap h4{margin-top:6px; font-size:22px; font-weight:800; letter-spacing:.05em}#sys .tools{list-style:none; margin-top:16px; display:grid; grid-template-columns:1fr 1fr; column-gap:40px}#sys .tools li{display:flex; align-items:center; height:46px; border-bottom:1px solid var(--hair); font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--ink2)}#sys .tools li:nth-child(-n+2){border-top:1px solid var(--hair)}#sys .tools .nm{flex:1; transition:color .5s ease}#sys .tools .tx{position:relative; display:inline-block}#sys .tools .tx::after{content:""; position:absolute; left:0; top:50%; height:1.5px; width:0; background:#111; transition:width .55s cubic-bezier(.6,0,.2,1)}#sys .tools .yen{width:96px; text-align:right; font-size:13px; color:var(--mute); transition:color .5s ease}#sys .tools .st{width:64px; text-align:right; font-size:12px; font-weight:700; color:#9AA1AB; letter-spacing:.06em}#sys .tools li.off .nm{color:#A3A9B2}#sys .tools li.off .tx::after{width:100%}#sys .tools li.off .yen{color:#B8BDC5}#sys .tools li.off .st{color:#111}#sys .tools li.now{background:linear-gradient(90deg, rgba(17,17,17,.04), rgba(17,17,17,0))}#sys .meters{display:flex; flex-direction:column; gap:26px; padding-top:30px}#sys .meter p{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--mute)}#sys .meter b{display:block; margin-top:4px; font-size:52px; font-weight:800; letter-spacing:-.01em; line-height:1.1}#sys .meter b small{font-size:16px; font-weight:700; margin-left:6px; color:var(--ink2); letter-spacing:.04em}#sys .meter .bar{margin-top:10px; height:3px; background:rgba(17,17,17,.08); border-radius:2px; overflow:hidden}#sys .meter .bar i{display:block; height:100%; width:0; background:#111; transition:width .7s cubic-bezier(.6,0,.2,1)}#sys /* ── 外部ツールのカード（業務アプリの上にかぶさっていて、解約されると浮き上がって消える） ── */ .l-sys,#sys .sys-in,#sys .apps,#sys .ap{transform-style:preserve-3d}#sys .ap{overflow:visible; position:relative}#sys .tool{position:absolute; inset:0; border-radius:12px; background:#fff; padding:8px 10px; box-shadow:0 0 0 1px rgba(17,17,17,.16), 0 10px 18px rgba(15,26,51,.14); transform:translateZ(22px); transition:transform 1.1s cubic-bezier(.3,0,.2,1), opacity .9s ease .25s}#sys .tool .tg{font-size:9px; font-weight:600; color:#9AA1AB; letter-spacing:.06em}#sys .tool .tn{margin-top:1px; font-size:11px; overflow:hidden; text-overflow:clip; font-weight:800; color:#111; white-space:nowrap; letter-spacing:.02em}#sys .tool .ty{margin-top:3px; font-size:10px; font-weight:600; color:#6B7380; position:relative; display:inline-block}#sys .tool .ty::after{content:""; position:absolute; left:0; top:52%; height:1.5px; width:0; background:#111; transition:width .4s ease}#sys .tool .tx{position:absolute; right:9px; top:7px; font-size:10px; font-weight:800; color:#111; opacity:0; transition:opacity .3s}#sys .tool.cut .ty::after{width:100%}#sys .tool.cut .tx{opacity:1}#sys .tool.cut .tg{opacity:0}#sys .tool.gone{transform:translateZ(150px); opacity:0}#sys .tool.back{transition:none}#sys /* 図の左下の数字 */ .meters2{position:absolute; left:152px; top:968px; z-index:4; display:flex; gap:44px}#sys .meters2 p{font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--mute)}#sys .meters2 b{display:block; margin-top:2px; font-size:34px; font-weight:800; letter-spacing:-.01em; line-height:1.15}#sys .meters2 b small{font-size:13px; font-weight:700; margin-left:4px; color:var(--ink2)}#sys .meters2 .t{font-size:12px; color:var(--mute); margin-top:4px}#sys /* ── 当社がやること（4つの段）と、図を下へずらす ── */ .head{top:96px; width:1300px}#sys .ttl{font-size:52px; white-space:nowrap}#sys .lead{line-height:2}#sys .flow4{position:absolute; left:152px; top:318px; width:1296px; list-style:none; display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; column-gap:28px; z-index:4}#sys .flow4 li{display:flex; align-items:flex-start; gap:14px; padding-top:16px; border-top:2px solid rgba(17,17,17,.10); transition:border-color .5s ease}#sys .flow4 li img{width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 12%; background:#E3E6EA; flex:none; box-shadow:0 0 0 4px rgba(255,255,255,.8), 0 8px 20px rgba(15,26,51,.10); transition:opacity .5s}#sys .flow4 .no{font-family:"Plus Jakarta Sans",sans-serif; font-size:12px; font-weight:800; letter-spacing:.12em; color:#B3B9C2; transition:color .5s}#sys .flow4 h5{margin-top:2px; font-size:17px; font-weight:800; letter-spacing:.04em; color:#A3A9B2; transition:color .5s}#sys .flow4 li > div > p:last-child{margin-top:5px; font-size:12px; line-height:1.7; color:#A3A9B2; letter-spacing:.03em; transition:color .5s}#sys .flow4 li.on{border-top-color:#111}#sys .flow4 li.on .no{color:#111}#sys .flow4 li.on h5{color:#111}#sys .flow4 li.on > div > p:last-child{color:#4A5364}#sys .flow4 li.done{border-top-color:rgba(17,17,17,.45)}#sys .flow4 li.done h5{color:#4A5364}#sys .flow4 li.done .no{color:#6B7380}#sys .stage,#sys .who,#sys .grp,#sys .meters2,#sys .glow{margin-top:110px}#sys /* ══ v10：1枚の図にまとめる（コンサルタント → 業務システム → AI → 担当者の承認）══ */ #approach{height:1260px}#sys .lines{height:1260px}#sys .stage{margin-top:0; top:300px}#sys .glow{margin-top:0; top:700px}#sys .sn{font-size:13px; font-weight:800; letter-spacing:.08em; color:#111; display:flex; align-items:baseline; gap:10px}#sys .sn b{font-family:"Plus Jakarta Sans",sans-serif; font-size:13px; font-weight:800; letter-spacing:.12em; color:#9AA1AB}#sys /* 01 コンサルタント */ .cons{position:absolute; left:152px; top:330px; width:320px; z-index:4}#sys .who-c{overflow:visible; position:relative; width:300px; height:300px; margin-top:56px; border-bottom:1px solid rgba(17,17,17,.18)}#sys .who-c .ph{position:absolute; left:-36px; bottom:0; width:356px; height:340px; object-fit:cover; object-position:50% 0}#sys .who-c::before{content:""; position:absolute; left:20px; top:30px; width:250px; height:250px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #FFFFFF 0%, #F1F2F4 60%, rgba(241,242,244,0) 72%)}#sys .who-c .ph{z-index:1}#sys .badge{position:absolute; left:0; top:-46px; z-index:2; display:flex; align-items:center; gap:8px}#sys .badge img{width:34px; height:auto}#sys .badge span{font-family:"Plus Jakarta Sans",sans-serif; font-size:13px; font-weight:800; letter-spacing:.16em; line-height:1.2}#sys .badge small{display:block; font-family:"Noto Sans JP",sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.06em; color:#6B7380}#sys .cons .ds{margin-top:12px; font-size:12.5px; line-height:1.8; color:#4A5364; letter-spacing:.03em}#sys .build{position:absolute; left:470px; top:470px; z-index:4; font-size:13px; font-weight:800; letter-spacing:.08em; display:flex; gap:10px; align-items:baseline}#sys .build b{font-family:"Plus Jakarta Sans",sans-serif; font-size:13px; letter-spacing:.12em; color:#9AA1AB}#sys /* 04 各部門 */ .dept{position:absolute; left:152px; top:830px; width:330px; z-index:4}#sys .dg{list-style:none; margin-top:14px; display:grid; grid-template-columns:repeat(3,64px); column-gap:30px; row-gap:12px}#sys .dg li{display:flex; flex-direction:column; align-items:center; gap:5px}#sys .dg img{width:56px; height:56px; border-radius:50%; object-fit:cover; background:#E3E6EA; box-shadow:0 0 0 3px rgba(255,255,255,.85), 0 6px 16px rgba(15,26,51,.10); transition:box-shadow .35s, transform .35s}#sys .dg span{font-size:11px; font-weight:700; color:#6B7380; letter-spacing:.04em; white-space:nowrap; transition:color .35s}#sys .dg li.on img{box-shadow:0 0 0 3px #fff, 0 0 0 4.5px #111, 0 10px 22px rgba(15,26,51,.16); transform:translateY(-2px)}#sys .dg li.on span{color:#111}#sys .dg li.ok img{filter:none}#sys .st{margin-top:14px; min-height:44px; font-size:12.5px; line-height:1.7; letter-spacing:.03em}#sys .st .r{display:block; font-weight:800; color:#111}#sys .st .m{display:block; color:#4A5364; transition:opacity .3s}#sys /* 効果の帯 */ .fx{position:absolute; left:152px; top:1150px; width:1296px; display:grid; grid-template-columns:1.35fr 1fr; column-gap:90px; padding-top:30px; border-top:1px solid rgba(17,17,17,.12); z-index:4}#sys .fx .k{font-size:12px; font-weight:700; letter-spacing:.08em; color:#6B7380}#sys .fx .big{display:block; margin-top:2px; font-size:46px; font-weight:800; letter-spacing:-.01em; line-height:1.1}#sys .fx .big small{font-size:14px; font-weight:700; margin-left:6px; color:#2B3442; letter-spacing:.04em}#sys .fx-a{display:grid; grid-template-columns:230px 1fr; column-gap:40px; align-items:center}#sys .bars{list-style:none; display:flex; flex-direction:column; gap:7px}#sys .bars li{display:grid; grid-template-columns:70px 1fr 44px; align-items:center; column-gap:12px; font-size:11.5px; color:#6B7380; font-weight:600}#sys .bars i{display:block; height:6px; border-radius:3px; background:rgba(17,17,17,.07); overflow:hidden}#sys .bars em{display:block; height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#3A424C,#111); transition:width .9s cubic-bezier(.3,0,.2,1)}#sys .bars b{text-align:right; color:#B0B6BE; font-weight:700; transition:color .4s}#sys .bars li.on b{color:#111}#sys .bars li.on span{color:#111}#sys .fx-b{display:flex; align-items:center; gap:28px}#sys .ring{width:120px; height:120px; flex:none}#sys .ring path{fill:none; stroke-width:12; stroke-linecap:butt; transition:stroke .5s}#sys .fx .sub{margin-top:8px; font-size:12px; color:#6B7380; font-weight:600; letter-spacing:.04em}#sys .fx .sub b{color:#111; font-size:15px; margin-left:4px}#sys /* 吸い上げる光（点線をやめて、淡い光の筋と上っていく粒） */ .lines .bm{stroke-width:9; stroke-linecap:round; opacity:.9}#sys .lines .bc{stroke:rgba(17,17,17,.16); stroke-width:1}#sys .lines .pt{fill:#111}#sys .lines .pp2{stroke:rgba(17,17,17,.20); stroke-width:1.1; fill:none}#sys .lines .pp2.on{stroke:#111; stroke-width:1.4; stroke-dasharray:3 7; animation:sys-flow2 1s linear infinite}#sys .lines .pp2.on.req{animation-name:flow2r} @keyframes sys-flow2r{to{stroke-dashoffset:-20}} @keyframes sys-flow2{to{stroke-dashoffset:20}}#sys .lines .hear{stroke:rgba(17,17,17,.30); stroke-width:1.1; fill:none; stroke-dasharray:2 5}#sys .lines .bld{stroke:#111; stroke-width:1.2; fill:none}#sys .lines .ah{fill:#111}#sys /* v11：効果を図の中（右下、全社データの説明の下）に収める */ .fx{left:1130px; top:1000px; width:330px; display:block; padding-top:0; border-top:0}#sys .fx-a{display:block}#sys .fx .big{font-size:36px}#sys .fx .big small{font-size:12px}#sys .bars{margin-top:10px; gap:5px}#sys .bars li{grid-template-columns:62px 1fr 34px; font-size:10.5px; column-gap:10px}#sys .bars i{height:4px}#sys .fx-b{position:absolute; left:-978px; top:118px; gap:18px}#sys .ring{width:76px; height:76px}#sys .fx-b .big{font-size:30px} #sys{position:relative; width:1600px; height:1260px; overflow:hidden; background:transparent} #sys .head{top:96px; width:1300px} #sys .ttl{font-size:46px; white-space:nowrap} #steps{overflow:clip visible} /* 上端は段の上端ちょうど（サービスの段の暗い地がここまで来ているので、重ねない）。下端は次の段との間の分だけ伸ばす */ #steps .v8-dark{position:absolute; top:0; bottom:calc(-72px * var(--s)); left:0; right:0; z-index:0; pointer-events:none; background:radial-gradient(80% 65% at 50% 42%, #4A525C 0%, #353B44 45%, #232830 80%, #1C2027 100%); clip-path:inset(0 100% 0 0); transition:clip-path 1.9s cubic-bezier(.65,0,.2,1)} #steps.is-dark .v8-dark{clip-path:inset(0 0 0 0)} /* サービスの段（中央から円）とは変えて、左から右へ広がる。広がる先の縁に光の線が走る（スケールの向きと同じ） */ #steps .v8-dark::after{content:""; position:absolute; top:0; bottom:0; left:0; width:3px; opacity:0; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55) 30%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0)); box-shadow:0 0 40px 12px rgba(255,255,255,.18)} #steps.is-dark .v8-dark::after{animation:v8-sweep 1.9s cubic-bezier(.65,0,.2,1) both} @keyframes v8-sweep{0%{left:0; opacity:1} 92%{opacity:1} 100%{left:calc(100% - 3px); opacity:0}} /* 暗くなったあとは、地に細い縦の罫がうっすら左から順に浮かぶ（範囲が区切られて広がっていく感じ） */ #steps .v8-dark::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease 1.6s; background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 160px)} #steps.is-dark .v8-dark::before{opacity:1} #steps .stage{z-index:1} #steps .v8{position:absolute; inset:0; font-family:"Noto Sans JP",sans-serif; color:#111; --fg:#111; --fg2:#2B3442; --fg3:#6B7380} #steps.is-dark .v8{--fg:#F4F5F7; --fg2:rgba(244,245,247,.75); --fg3:rgba(244,245,247,.5)} #steps.is-dark .v8-ttl, #steps.is-dark .v8-tx h3, #steps.is-dark .v8-tx .st b, #steps.is-dark .v8-lead, #steps.is-dark .v8-tx .ds, #steps.is-dark .v8-lg, #steps.is-dark .v8-tx .st{transition-delay:.55s} #steps .v8-ttl, #steps .v8-tx h3, #steps .v8-tx .st b{color:var(--fg); transition:color .8s ease} #steps .v8-lead, #steps .v8-tx .ds, #steps .v8-lg{color:var(--fg2) !important; transition:color .8s ease} #steps .v8-tx .st{color:var(--fg3) !important; transition:color .8s ease} #steps .num{font-family:"Plus Jakarta Sans","Noto Sans JP",sans-serif; font-feature-settings:"tnum"} #steps .v8-ttl{position:absolute; left:152px; top:170px; font-size:56px; font-weight:900; letter-spacing:.03em} #steps .v8-lead{position:absolute; left:152px; top:264px; font-size:15px; font-weight:500; line-height:2.1; letter-spacing:.05em; color:#2B3442} #steps .v8-lg{position:absolute; right:152px; top:296px; list-style:none; display:flex; gap:18px; font-size:11.5px; font-weight:700; color:#4A5364; letter-spacing:.04em} #steps .v8-lg li{display:flex; align-items:center; gap:6px} #steps .v8-lg i{width:14px; height:10px; border-radius:3px} #steps .v8-lg .a{background:rgba(220,226,234,.8); box-shadow:inset 0 0 0 1px rgba(17,17,17,.3)} #steps .v8-lg .s{background:#fff; box-shadow:inset 0 0 0 1.5px #111} #steps .v8-lg .d{background:#2B3036; box-shadow:0 0 0 1px rgba(255,255,255,.4)} #steps .v8-lg .n{box-shadow:inset 0 0 0 1px rgba(244,245,247,.4)} #steps .v8-row{position:absolute; left:152px; top:370px; width:1296px; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); column-gap:24px} /* 立体 */ #steps .v8-sc{position:relative; height:290px; perspective:1600px} #steps .v8-iso{position:absolute; left:50%; top:60%; width:250px; height:172px; margin:-86px 0 0 -125px; transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(-38deg)} #steps .v8-l{position:absolute; inset:0; transform-style:preserve-3d; transition:transform 1s cubic-bezier(.2,.75,.2,1) calc(var(--i) * .3s), opacity .6s ease calc(var(--i) * .3s); opacity:0} #steps .ld{transform:translateZ(-30px); display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:6px; padding:8px; border-radius:14px; background:linear-gradient(135deg,#ECEFF2,#DDE1E6); box-shadow:0 0 0 1px rgba(17,17,17,.08), 0 26px 40px rgba(15,26,51,.16)} #steps .ld .dq{border-radius:6px; box-shadow:inset 0 0 0 1px rgba(17,17,17,.22); background:repeating-linear-gradient(90deg, transparent 0 6px, rgba(17,17,17,.06) 6px 7px)} #steps .ld .dq.on{box-shadow:none; background:repeating-linear-gradient(180deg, #2B3036 0 5px, #4A525C 5px 7px)} #steps .ls{transform:translateZ(40px); display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:6px; padding:8px} #steps .ls .sy{position:relative; border-radius:8px; background:rgba(255,255,255,.35); box-shadow:inset 0 0 0 1px rgba(17,17,17,.10); display:flex; flex-direction:column; justify-content:center; padding:0 8px} #steps .ls .sy b{font-size:12px; font-weight:800; color:#A8AEB7; letter-spacing:.02em; white-space:nowrap} #steps .ls .sy.on{background:#fff; box-shadow:inset 0 0 0 1.5px #111, 0 10px 18px rgba(15,26,51,.18)} #steps .ls .sy.on b{color:#111} #steps .ls .sy em{font-style:normal; font-size:15px; font-weight:800; font-family:"Plus Jakarta Sans",sans-serif; line-height:1.1} #steps .ls .sy.on.part{background:linear-gradient(135deg,#fff 0 55%, rgba(255,255,255,.35) 55%)} #steps .la{inset:auto; left:calc(8px + (234px / 3) * var(--x0)); top:calc(8px + (156px / 2) * var(--y0)); width:calc((234px / 3) * (var(--x1) - var(--x0)) - 6px); height:calc((156px / 2) * (var(--y1) - var(--y0)) - 6px); transform:translateZ(96px); border-radius:10px; background:linear-gradient(135deg, rgba(236,240,245,.82), rgba(214,221,230,.72)); box-shadow:0 0 0 1px rgba(17,17,17,.22), 0 18px 30px rgba(15,26,51,.14); display:flex; align-items:center; justify-content:center} #steps .la span{font-size:22px; font-weight:900; transform:scaleX(1.1); background:linear-gradient(150deg,#3A424C 0%,#0A0D12 55%,#2A3038 100%); -webkit-background-clip:text; background-clip:text; color:transparent} /* 組み上がる動き：下から順に */ #steps .ld{transform:translateZ(-80px)} #steps .ls{transform:translateZ(120px)} #steps .la{transform:translateZ(200px)} #steps .v8.in .ld{opacity:1; transform:translateZ(-12px)} #steps .v8.in .ls{opacity:1; transform:translateZ(22px); transition-delay:calc(var(--i) * .3s + .2s)} #steps .v8.in .la{opacity:1; transform:translateZ(70px); transition-delay:calc(var(--i) * .3s + .45s)} /* 立体のすぐ下の説明 */ #steps .v8-tx{margin-top:-6px; padding:0 6px; opacity:0; transform:translateY(8px); transition:opacity .5s ease calc(var(--i) * .3s + .6s), transform .5s ease calc(var(--i) * .3s + .6s)} #steps .v8.in .v8-tx{opacity:1; transform:none} #steps .v8-tx{position:relative} #steps .v8-tx .no{position:absolute; left:-8px; top:-30px; z-index:-1; font-size:120px; font-weight:900; letter-spacing:-.02em; line-height:1; color:rgba(255,255,255,.07); user-select:none} #steps .v8-tx .sp{font-family:"Plus Jakarta Sans","Noto Sans JP",sans-serif; font-size:12px; font-weight:800; letter-spacing:.16em; color:rgba(244,245,247,.55)} #steps .v8-tx .sp span{margin-left:12px; font-family:"Noto Sans JP",sans-serif; letter-spacing:.08em; color:rgba(244,245,247,.85)} #steps .v8-tx h3{margin-top:8px; font-size:19px; font-weight:800; letter-spacing:.04em} #steps .v8-tx .ds{margin-top:6px; font-size:12.5px; line-height:1.8; color:#4A5364; letter-spacing:.03em} #steps .v8-tx .st{margin-top:10px; font-size:11.5px; font-weight:700; color:#6B7380; letter-spacing:.04em} #steps .v8-tx .st b{font-size:16px; margin-right:4px} #steps .v8-tx .st span{margin:0 6px; color:#C3C8CF} @media (max-width:1023px){ #steps .v8-dark{top:0; bottom:0} #steps .v8{position:static; padding:88px 20px 88px} #steps .v8-ttl, #steps .v8-lead, #steps .v8-lg, #steps .v8-row{position:static; width:auto} #steps .v8-ttl{font-size:28px; line-height:1.4} #steps .v8-lead{margin-top:14px; font-size:13px; line-height:1.9} #steps .v8-lead br{display:none} #steps .v8-lg{margin-top:16px; flex-wrap:wrap; gap:8px 14px} #steps .v8-row{margin-top:8px; grid-template-columns:1fr; row-gap:8px} #steps .v8-row li{display:grid; grid-template-columns:150px 1fr; align-items:center; column-gap:8px} #steps .v8-sc{height:170px; zoom:.62} #steps .v8-tx{margin-top:0} #steps .v8-tx .no{font-size:80px; top:-18px} } /* 目指すの段：行き着く先の小さな見出し */ #approach .ap-goals .gn small{position:absolute; left:0; top:-14px; font-size:11px; font-weight:700; letter-spacing:.1em; color:#9AA1AB; line-height:1} #approach .ap-goals .gn{position:relative} #approach .ap-res p{background:linear-gradient(104deg,#3A424C 0%,#111 45%,#4A525C 100%) !important; -webkit-background-clip:text !important; background-clip:text !important} #approach .ap-res .glow{background:radial-gradient(48% 46% at 42% 50%, rgba(17,17,17,.08) 0%, rgba(17,17,17,0) 70%), radial-gradient(64% 58% at 52% 50%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 72%) !important} /* FV：大見出しの字間（本番は「コストカット」に合わせて字ごとに詰めているので、漢字では重なる） */ #hero .headline i:nth-child(3){margin-left:-0.03em !important} #hero .headline i:nth-child(4){margin-left:0.01em !important} #hero .headline i:nth-child(5){margin-left:0.01em !important} #hero .headline i:nth-child(6){margin-left:-0.01em !important} #hero .headline i:nth-child(7){margin-left:0.01em !important} #hero .headline i:nth-child(8){margin-left:-0.02em !important} #hero .headline i:nth-child(9){margin-left:-0.02em !important} /* FV：完全成果報酬 */ #hero .dm-price{display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:18px 0 26px} #hero .dm-k{font-size:30px; font-weight:700; letter-spacing:.06em} #hero .dm-v{font-size:80px; font-weight:900; letter-spacing:.02em; line-height:1.05} /* 料金：完全成果報酬 */ #price .pc-amt{text-align:center} #price .pc-amt .mk{margin-left:auto; margin-right:auto} #price .pc-amt .y{white-space:nowrap; font-size:30px} #price .pc-amt .dm-pv{white-space:nowrap; font-size:64px; font-weight:900; letter-spacing:.02em; line-height:1.15; margin-top:8px} /* 特徴 01：業務システムの管理画面を斜めに置く（男性と札の後ろ） */ #features .s2 .dm-scr{position:absolute; left:-90px; top:70px; width:440px; z-index:1; perspective:1800px} #features .s2 .dm-scr img{display:block; width:100%; border-radius:14px; transform:rotateY(22deg) rotateX(8deg) rotateZ(-3deg); box-shadow:0 30px 60px -20px rgba(10,15,28,.45), 0 0 0 1px rgba(255,255,255,.4)} #features .s2 .pay{z-index:2} #features .s2 .f-smile{z-index:3} /* 料金：罫は外す（ボタンが区切られて見えるため） */ #price .pc-base{display:none} #price .pc-amt .y{font-size:28px} #price .pc-amt .dm-pv{font-size:56px; letter-spacing:.02em} /* 円の下側に、業務システムの管理画面を斜めに */ #price .dm-pscr{position:absolute; z-index:2; width:420px; perspective:1600px; pointer-events:none} #price .dm-pscr img{display:block; width:100%; border-radius:12px; transform:rotateY(20deg) rotateX(10deg) rotateZ(-4deg); box-shadow:0 30px 60px -22px rgba(10,15,28,.40), 0 0 0 1px rgba(255,255,255,.5)} /* 01：右側に、業務システムの画面と、それを見る担当者。画面の角度はダッシュボード（02）と同じ向きの左右反転 */ #features .s2 .dm-scr{left:150px; top:40px; width:480px; perspective:1800px} #features .s2 .dm-scr img{transform:rotateY(-18deg) rotateX(5deg)} #features .s2 .pay{left:auto; right:-10px; top:auto; bottom:70px; width:250px} #features .s2 .f-smile{left:-40px} /* 02：画面を左に置くので、ダッシュボードの向きを左右反転 */ #features .s3 .mb{--tm:rotateY(18deg) rotateX(5deg)} #features .s3 .phn .mb{--tp:rotateY(18deg) rotateX(5deg)} /* 2026-10-24 夕：前後に間をとり（上 160px・下 160px）、円はゆっくり開く。黒は浅くして、中央が明るいグラデにする。 下端はぼかさず、次の段（アプローチ）の上端まで伸ばしてまっすぐ切る（ぼかすと地の模様が透けてもやになる） */ #system .dm-dark{position:absolute; inset:calc(-140px * var(--s)) 0; z-index:0; pointer-events:none; background:radial-gradient(80% 65% at 50% 42%, #4A525C 0%, #353B44 45%, #232830 80%, #1C2027 100%); clip-path:circle(0% at 50% 40%); transition:clip-path 2.4s cubic-bezier(.45,0,.15,1)} /* 上の端もぼかさず、FV の下端（段の間の上）からまっすぐ始める（ぼかすと地の灰色と重なって境目がにじむ。2026-10-24 夕） */ #sys{padding-top:160px} #system{overflow:clip visible} @media (max-width:1023px){#system .dm-dark{top:-56px; bottom:-56px}} /* スマホ・タブレットは段の間に隙間がないので伸ばさない */ #system.is-dark .dm-dark{clip-path:circle(150% at 50% 40%)} #system .stage{z-index:1} #sys{--fg:#F4F5F7; --fg2:rgba(244,245,247,.72); --fg3:rgba(244,245,247,.45)} #sys .ttl, #sys .lab h4, #sys .sn, #sys .badge span, #sys .st .r, #sys .build, #sys .dg li.on span{color:var(--fg); transition:color .6s} #sys .lead, #sys .lab p, #sys .cons .ds, #sys .st .m, #sys .dg span, #sys .badge small{color:var(--fg2); transition:color .6s} #sys .sn b, #sys .build b, #sys .lab .k{color:var(--fg3)} #sys .badge img{filter:invert(1)} #sys .who-c{border-bottom-color:rgba(244,245,247,.25)} #sys .who-c::before{background:radial-gradient(circle at 40% 35%, rgba(255,255,255,.95) 0%, rgba(230,233,237,.9) 60%, rgba(230,233,237,0) 72%)} #sys .dg li.on img{box-shadow:0 0 0 3px #0D1015, 0 0 0 4.5px #F4F5F7, 0 10px 22px rgba(0,0,0,.4)} #sys .lines .ld{stroke:rgba(244,245,247,.35)} #sys .lines circle{fill:#F4F5F7} #sys .lines .hear, #sys .lines .pp2{stroke:rgba(244,245,247,.35)} #sys .lines .bld, #sys .lines .pp2.on{stroke:#F4F5F7} #sys .lines .ah{fill:#F4F5F7} #sys .lines .bc{stroke:rgba(244,245,247,.18)} #sys .lines stop{stop-color:#fff} #sys .lines .pt{fill:#fff} #sys .glow{background:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%)} /* 層の影を暗い地に合わせて濃くする */ #sys .l-data, #sys .l-sys, #sys .l-ai{box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 40px 80px rgba(0,0,0,.45)} #price .dm-pscr svg{display:block; width:100%; height:auto; transform:rotateY(20deg) rotateX(10deg) rotateZ(-4deg); filter:drop-shadow(0 28px 34px rgba(10,15,28,.28))} @media (max-width:1023px){ /* FV：見出し「AIで現場を変える」の1行の箱の幅（--hw）。375px 幅で字の左右の端を測り、余白の内側に収まる値にした（2026-10-24 夕。「業務を回す」のときは 7.32） */ #hero .stage{--hw:8.1} /* FV：完全成果報酬を画面幅に収める */ #hero .dm-price{margin:10px 0 18px; gap:2px} #hero .dm-k{font-size:min(5vw, 22px)} #hero .dm-v{font-size:min(12.4vw, 60px)} /* サービスの段：縦に流す。見出し → コンサルタント → 業務システムの図 → 3つの層の説明 → 担当者 */ #sys{width:auto !important; height:auto !important; display:flex; flex-direction:column; padding:64px var(--gut) 72px; overflow:hidden} #sys .head{order:1; position:relative; top:auto; left:auto; width:auto} #sys .ttl{font-size:min(7.4vw, 36px); white-space:normal; line-height:1.4; letter-spacing:.02em} #sys .lead{margin-top:16px; font-size:14px; line-height:1.9} #sys .lead span{display:inline} #sys .cons{order:2; position:relative; left:auto; top:auto; width:auto; margin-top:40px; display:grid; grid-template-columns:132px 1fr; column-gap:18px; align-items:end} #sys .cons .sn{grid-column:1 / -1} #sys .who-c{grid-column:1; width:132px; height:132px; margin-top:44px} #sys .who-c .ph{left:-16px; width:164px; height:156px} #sys .who-c::before{left:6px; top:12px; width:120px; height:120px} #sys .badge{top:-38px} #sys .cons .ds{grid-column:2; margin:0 0 8px; font-size:13px} #sys .build, #sys .glow{display:none} /* 光の筋（データ → 業務システム → AI）と担当者への線は PC と同じく出す。層の説明への引き出し線とコンサルタントの線は出さない */ #sys{position:relative} #sys .lines{display:block; position:absolute; left:0; top:0; width:100%; height:100%; z-index:3} #sys .lines .ld, #sys .lines > circle, #sys .lines .hear, #sys .lines .bld, #sys .lines .ah{display:none} #sys .stage{order:3; position:relative; left:50%; top:auto; width:640px; height:760px; margin:0 0 -310px -320px; transform:scale(.58); transform-origin:50% 0} #sys .lab{order:5; position:relative !important; top:auto !important; left:auto; width:auto; padding:16px 0; border-top:1px solid rgba(244,245,247,.18)} #sys .lab h4{font-size:18px} #sys .lab p{font-size:13px; margin-top:4px} #sys .lab br{display:none} #sys .dept{order:4; position:relative; left:auto; top:auto; width:auto; margin:8px 0 28px} #sys .dg{grid-template-columns:repeat(3,1fr); column-gap:10px} #sys .dg li{align-items:center} #sys .st{min-height:48px} #system .stage{overflow:visible} /* 特徴 01：画面は人物の後ろ、札は右下 */ #features .s2 .dm-scr{left:calc(170 * var(--k)); top:calc(30 * var(--k)); width:calc(440 * var(--k))} #features .s2 .pay{left:auto; right:calc(10 * var(--k)); top:auto; bottom:calc(50 * var(--k)); width:calc(250 * var(--k))} /* 料金：円の中の管理画面はスマホでは出さない。文字は円の中に収める */ #price .dm-pscr{display:none} #approach .ap-res p{color:#111 !important; -webkit-text-fill-color:#111 !important; background:none !important} #price .pc-amt .y{font-size:min(5.4vw, 26px)} #price .pc-amt .dm-pv{font-size:min(10.6vw, 52px)} }