/* 考え方: 縦に 1 → 2 → 3 とつなぎ、段ごとに動く図(2026-10-17 ogawa「横並びより、動きで分かりやすく」)。
   動きは、その段が画面に入ったとき(site.js が .is-in を付ける)。JS が無い・動きを減らす設定では、最後の形のまま */
.n-steps2{list-style:none;margin:20px 0 0;padding:0}
.n-step2{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:center;padding:24px 0 40px 72px}
.n-step2-no{position:absolute;left:0;top:24px;width:48px;height:48px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:20px;display:grid;place-items:center;z-index:1}
.n-step2:not(:last-child):before{content:'';position:absolute;left:23px;top:76px;bottom:-24px;width:2px;background:#c9d8f3;transform-origin:top}
.n-step2-label{margin:0;color:var(--blue);font-weight:800;font-size:13px;letter-spacing:.12em}
.n-step2-text h3{font-size:24px;margin:4px 0 12px;line-height:1.5}
.n-step2-text p:not(.n-step2-label){font-size:15.2px;line-height:1.95;margin:0}
.v-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:18px 22px 14px}
.v-title{margin:0 0 6px;color:#5b6778;font-size:13px;font-weight:700;letter-spacing:.06em}
.v-card ul{list-style:none;margin:0;padding:0}
.v-card li{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #eef2f8}
.v-card li:first-child{border-top:0}
.v-card li>img,.v-ico{width:24px;height:24px;flex-shrink:0}
.v-text{flex:1;font-size:15.2px;font-weight:600;line-height:1.6}
.v-ok{color:var(--blue);font-size:14px;white-space:nowrap}
.v-body{flex:1;min-width:0}
.v-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.v-change{font-size:13.6px;color:#5b6778;white-space:nowrap}.v-change s{color:#8a96a8}.v-change b{color:var(--blue)}
.v-track{position:relative;height:8px;margin-top:8px;border-radius:4px;background:#e9eef6}
.v-fill{position:absolute;left:0;top:0;bottom:0;width:var(--to);border-radius:4px;background:var(--blue)}
.v-track.is-good{background:none;height:auto;margin-top:4px}
.v-dots{color:var(--blue);font-weight:800;font-size:13px;letter-spacing:.2em}
.v-tag{width:3.4em;text-align:right;color:var(--blue);font-size:14px;white-space:nowrap}
.v-week{display:grid;grid-template-columns:minmax(0,1fr) repeat(5,34px);row-gap:12px;column-gap:6px;align-items:center;padding:6px 0 4px}
.v-day{text-align:center;color:#5b6778;font-size:13px;font-weight:700}
.v-prod{display:flex;align-items:center;gap:10px;min-width:0}.v-prod img{width:24px;height:24px;flex-shrink:0}
.v-prod b{display:block;font-size:14.4px;line-height:1.4}.v-prod small{display:block;color:#5b6778;font-size:12.8px;line-height:1.4}
.v-dot{justify-self:center;width:16px;height:16px;border-radius:50%;border:2px solid #dce5f2;box-sizing:border-box}
.v-dot.on{background:var(--blue);border-color:var(--blue)}
@keyframes vIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes vPop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes vShrink{from{width:100%;background:#9aa7ba}to{width:var(--to);background:var(--blue)}}
@keyframes vRail{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes vWeek{0%,6%{background:#fff;border-color:#dce5f2;transform:scale(.7)}14%,86%{background:var(--blue);border-color:var(--blue);transform:scale(1)}100%{background:#fff;border-color:#dce5f2;transform:scale(.7)}}
/* 画面に入るまでは止めておく(下の animation の一括指定が止めを打ち消さないよう !important) */
.js-anim .n-step2:not(.is-in) .va,.js-anim .n-step2:not(.is-in) .v-ok,.js-anim .n-step2:not(.is-in):before{animation-play-state:paused!important}
.js-anim .n-step2:not(:last-child):before{animation:vRail .9s 1.4s both}
.js-anim .v1 li.va{animation:vIn .5s calc(var(--i)*.25s) both}
.js-anim .v1 li .v-ok{animation:vPop .4s calc(1.2s + var(--i)*.25s) both}
.js-anim .v2 .v-fill.va{animation:vShrink 1s calc(.3s + var(--i)*.35s) cubic-bezier(.45,0,.25,1) both}
.js-anim .v2 .v-dots.va{animation:vIn .5s calc(.3s + var(--i)*.35s) both}
.js-anim .v2 .v-tag.va{animation:vPop .4s calc(1.2s + var(--i)*.35s) both}
.js-anim .v3 .v-dot.on.va{animation:vWeek 6s calc(.3s + var(--d)*.45s) infinite both}
@media(max-width:840px){
 .n-step2{grid-template-columns:1fr;gap:18px;padding:16px 0 32px 60px}
 .n-step2-no{width:40px;height:40px;font-size:17px;top:16px}
 .n-step2:not(:last-child):before{left:19px;top:60px}
}
@media(max-width:640px){
 .n-step2{padding-left:52px}
 .n-step2-text h3{font-size:20.8px}
 .v-card{padding:14px 14px 10px}
 .v-text{font-size:14.4px}
 .v-line{flex-direction:column;gap:0}
 .v-week{grid-template-columns:minmax(0,1fr) repeat(5,26px);column-gap:4px}
 .v-dot{width:14px;height:14px}
}


/* ───────── 製品のページの動く図(2026-10-17)。生成元は motion_parts.py ───────── */
/* 画面に入るまでは止めておく(data-anim の欄も、data-step の段と同じ) */
.js-anim [data-anim]:not(.is-in) .va{animation-play-state:paused!important}
/* 行が出て、印が付くカード */
.v-card .m-checks li>img{width:24px;height:24px}
.js-anim .n-step2 .m-row.va{animation:vIn .5s calc(var(--i)*.25s) both}
.js-anim .n-step2 .m-pop.va{animation:vPop .4s calc(1s + var(--i)*.25s) both}
/* 帯が伸びて、選択肢が出るカード */
.m-grow{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:4px;background:var(--blue)}
@keyframes mGrow{from{width:0}to{width:100%}}
.js-anim .n-step2 .m-grow.va{animation:mGrow 1.4s .3s cubic-bezier(.45,0,.25,1) both}
.m-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.m-chip{border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:14px;font-weight:700;color:var(--text);background:#fff}
.m-chip:first-child{border-color:var(--blue);color:var(--blue)}
.js-anim .n-step2 .m-chip.va{animation:vPop .4s calc(1.7s + var(--i)*.2s) both}
.m-note{margin:10px 0 2px;color:#5b6778;font-size:13px;line-height:1.7}
/* 小さなボード */
.m-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:4px 0 6px}
.m-kcol{background:#f5f7fb;border-radius:8px;padding:10px;display:grid;gap:8px;align-content:start;min-height:120px}
.m-kcol>b{font-size:13px;color:#5b6778}
.m-kcard{display:block;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:6px;padding:8px 10px;font-size:13.6px;font-weight:600;line-height:1.5}
.js-anim .n-step2 .m-kcard.va{animation:vPop .45s calc(.3s + var(--i)*.3s) both}
/* 困りごと → 解決 */
.m-fix{margin:28px 0 8px}
.m-fix ol{list-style:none;margin:0;padding:0}
.m-fix li{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1.15fr);align-items:stretch;gap:0;padding:10px 0;border-top:1px solid var(--line)}
.m-fix li:last-child{border-bottom:1px solid var(--line)}
.m-fix.has-head li{grid-template-columns:184px minmax(0,1fr) 40px minmax(0,1.15fr)}
.m-fix:not(.has-head) li{grid-template-columns:minmax(0,1.25fr) 40px minmax(0,1fr)}
.m-fix-head{display:none}
.m-fix.has-head .m-fix-head{display:grid;grid-template-columns:184px minmax(0,1fr) 40px minmax(0,1.15fr);font-size:13px;font-weight:700;color:#5b6778;padding:0 0 8px}
.m-fix.has-head .m-fix-head span:last-child{color:var(--blue)}
.m-fix-h{font-weight:700;font-size:15.2px;align-self:center;padding-right:12px}
.m-fix-h:empty{display:none}
.m-fix-b{align-self:center;color:#5b6778;font-size:15.2px;line-height:1.75;padding:6px 0}
.m-fix-arrow{align-self:center;justify-self:center;color:var(--blue);font-size:22px;font-weight:700}
.m-fix-a{align-self:center;background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;padding:10px 14px;font-size:15.2px;font-weight:700;line-height:1.75}
.m-fix small{display:none}
.m-fix.has-head small{display:none}
.m-fix:not(.has-head) .m-fix-b{font-weight:700;color:var(--text)}
@keyframes mSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.js-anim .m-fix .m-fix-b.va{animation:vIn .45s calc(var(--i)*.35s) both}
.js-anim .m-fix .m-fix-arrow.va{animation:vPop .35s calc(.35s + var(--i)*.35s) both}
.js-anim .m-fix .m-fix-a.va{animation:mSlide .5s calc(.55s + var(--i)*.35s) both}
/* 長さを比べる帯 */
.m-bars{margin:8px 0 28px;padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:#fff}
.m-bars figcaption{font-weight:700;font-size:15.2px;margin-bottom:12px}
.m-bars ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.m-bars li{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;align-items:center;gap:14px}
.m-bar-label{font-size:14.4px;font-weight:600;color:#5b6778}
.m-bars li.is-us .m-bar-label{color:var(--blue);font-weight:800}
.m-bar-track{position:relative;height:18px;background:#eef2f8;border-radius:4px}
.m-bar{position:absolute;left:0;top:0;bottom:0;width:max(var(--w),8px);border-radius:4px;background:#9aa7ba}
.m-bars li.is-us .m-bar{background:var(--blue)}
.m-bar-val{font-size:15.2px;text-align:right;white-space:nowrap}
.m-bars li.is-us .m-bar-val{color:var(--blue)}
@keyframes mBar{from{width:0}}
.js-anim .m-bars .m-bar.va{animation:mBar 1.2s calc(.2s + var(--i)*.3s) cubic-bezier(.45,0,.25,1) both}
.js-anim .m-bars .m-bar-val.va{animation:mFade .4s calc(1s + var(--i)*.3s) both}
@keyframes mFade{from{opacity:0}to{opacity:1}}
/* 画面の切り替え(いま)と、横のパネル(Workspace Assist) */
.m-switch{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center;margin:28px 0 8px}
.m-sw{margin:0}
.m-sw figcaption{font-size:14.4px;margin-bottom:10px;line-height:1.6}.m-sw figcaption b{display:block;font-size:17px}
.m-sw.after figcaption b{color:var(--blue)}
.m-sw-arrow{text-align:center;color:var(--blue);font-size:28px;font-weight:700}
.m-win{border:1px solid #d5e0ef;border-radius:10px;background:#fff;overflow:hidden}
.m-tabs{display:flex;gap:2px;background:#f2f5fa;padding:6px 6px 0;border-bottom:1px solid #e3e9f2}
.m-tabs .t{flex:1;min-width:0;font-size:12px;font-weight:700;color:#7a8698;background:#e8edf5;border-radius:6px 6px 0 0;padding:6px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-tabs .t.on{background:#fff;color:var(--text);flex:0 1 auto;padding:6px 14px}
.m-body{position:relative;height:150px}
.m-body .a{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;opacity:0}
.m-body.split{display:grid;grid-template-columns:minmax(0,1fr) 46%;height:150px}
.m-body .doc{padding:16px;display:grid;gap:10px;align-content:start}
.m-body .doc i{display:block;height:8px;border-radius:4px;background:#e6ebf3}.m-body .doc i.s{width:60%}
.m-body .panel{border-left:1px solid #e3e9f2;background:#fafcff;padding:10px;display:grid;gap:6px;align-content:start}
.m-body .p{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;background:#fff;border:1px solid #e3e9f2;border-radius:6px;padding:4px 6px;white-space:nowrap;overflow:hidden}
.m-body .p img{width:16px;height:16px;flex-shrink:0}
.m-count{margin:10px 0 0;font-size:14.4px;font-weight:700;color:#5b6778}.m-sw.after .m-count{color:var(--blue)}
@keyframes mTab{0%,19%{background:#fff;color:#172b49;box-shadow:inset 0 -2px 0 var(--blue)}20%,100%{background:#e8edf5;color:#7a8698;box-shadow:none}}
@keyframes mApp{0%,19%{opacity:1}20%,100%{opacity:0}}
.m-tabs .t:not(.on){animation:mTab 5s calc(var(--k)*1s) infinite both}
.m-body .a{animation:mApp 5s calc(var(--k)*1s) infinite both}
.js-anim .m-sw.after .p.va{animation:vIn .45s calc(.3s + var(--i)*.3s) both}
@media(prefers-reduced-motion:reduce){.m-body .a:first-of-type{opacity:1}}
@media(max-width:840px){
 .m-fix li,.m-fix.has-head li{grid-template-columns:1fr;gap:6px}
 .m-fix.has-head .m-fix-head{display:none}
 .m-fix-arrow{display:none}
 .m-fix small,.m-fix.has-head small{display:block;font-size:12px;font-weight:700;color:#5b6778;margin-bottom:2px}
 .m-fix:not(.has-head) li{grid-template-columns:1fr}
 .m-fix-a small{color:var(--blue)}
 .m-switch{grid-template-columns:1fr;gap:6px}.m-sw-arrow{transform:rotate(90deg)}
 .m-bars li{grid-template-columns:1fr 92px;gap:6px 10px}.m-bar-label{grid-column:1/-1}
}
@media(max-width:640px){.m-kanban{gap:6px}.m-kcol{padding:7px}.m-kcard{font-size:12.4px;padding:6px 7px}}