/* Perch Creative motion
   画面に入ったときに一度だけ、ゆっくり動いて止まる「内容を補う図」。繰り返し・装飾だけの動きはしない。
   JS がないとき・「視差効果を減らす」設定のときは、完成した図がそのまま見える。 */
.pm-fig{margin:36px 0;color:var(--ink,#18233e);max-width:640px}
.pm-fig.center{margin-inline:auto}
.pm-fig svg{display:block;width:100%;height:auto;overflow:visible}
.pm-fig figcaption{font-size:12px;line-height:1.8;color:var(--muted,#4e596f);margin-top:10px}
.pm-fig text{font-family:var(--serif,'Yu Mincho','YuMincho','Hiragino Mincho ProN',serif);fill:currentColor}
.pm-fig .pm-sans{font-family:var(--sans,'Yu Gothic','YuGothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif)}
.pm-fig .pm-muted{fill:var(--muted,#4e596f)}
.pm-line{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pm-thin{stroke-width:1}
.pm-blue{color:var(--blue,#243dce)}
.pm-coral{color:var(--coral,#f28379)}

/* 線を描く / 線を消す / ふわりと出る */
.pm-js [data-motion] .pm-draw{stroke-dasharray:var(--len,800);stroke-dashoffset:var(--len,800);transition:stroke-dashoffset 1.3s cubic-bezier(.45,.05,.25,1) var(--d,0s)}
.pm-js [data-motion].is-in .pm-draw{stroke-dashoffset:0}
.pm-js [data-motion] .pm-undraw{stroke-dasharray:var(--len,800);stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease-in var(--d,0s),opacity .5s ease calc(var(--d,0s) + .9s)}
.pm-js [data-motion].is-in .pm-undraw{stroke-dashoffset:calc(var(--len,800) * -1);opacity:0}
.pm-js [data-motion] .pm-fade{opacity:0;transform:translateY(8px);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.pm-js [data-motion].is-in .pm-fade{opacity:1;transform:none}
.pm-js [data-motion] .pm-pop{opacity:0;transition:opacity .6s ease var(--d,0s)}
.pm-js [data-motion].is-in .pm-pop{opacity:1}

/* 個別の動き */
.pm-js [data-motion] .pm-orbit{transform:rotate(36deg);transform-box:view-box;transform-origin:150px 150px;transition:transform 2s cubic-bezier(.35,0,.15,1) .3s}
.pm-js [data-motion].is-in .pm-orbit{transform:none}
.pm-js [data-motion] .pm-bird{opacity:0;transform:translate(-34px,-46px) rotate(-14deg);transform-box:view-box;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.2,.75,.25,1) .9s,opacity .4s ease .9s}
.pm-js [data-motion].is-in .pm-bird{opacity:1;transform:none}
.pm-js [data-motion] .pm-grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;transition:transform .9s cubic-bezier(.45,.05,.25,1) var(--d,0s)}
.pm-js [data-motion].is-in .pm-grow{transform:none}

/* 既存の要素を、下からそっと（カードや手順の列） */
.pm-js [data-motion="reveal"]{opacity:0;transform:translateY(14px);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.pm-js [data-motion="reveal"].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.pm-js [data-motion],.pm-js [data-motion] *{transition:none!important}}
@media print{.pm-js [data-motion],.pm-js [data-motion] *{opacity:1!important;transform:none!important;stroke-dashoffset:0!important;transition:none!important}.pm-js [data-motion] .pm-undraw{opacity:0!important}}
/* 図と文章を並べる（狭い画面では縦に） */
.pm-split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:8px 32px;align-items:center}
.pm-split figcaption{grid-column:1/-1}
.pm-side p{font-size:14px;line-height:1.9;color:var(--muted,#4e596f);margin:0 0 10px}
.pm-side .pm-lead{font:500 19px/1.7 var(--serif,'Yu Mincho','YuMincho','Hiragino Mincho ProN',serif);color:var(--ink,#18233e)}
.pm-side b{color:var(--blue,#243dce);font-weight:500}
@media (max-width:620px){.pm-split{grid-template-columns:minmax(0,1fr)}.pm-split svg{max-width:300px;margin-inline:auto}}
/* くり返し：描き終えた形でひと呼吸 → そっと消える → 最初の形に戻して、もう一度描く */
.pm-js [data-motion].pm-out > svg,.pm-js [data-motion].pm-out > .pm-side{opacity:0!important;transition:opacity .6s ease!important}
.pm-js [data-motion].pm-reset,.pm-js [data-motion].pm-reset *{transition:none!important}