/* =====================================================================
   public/css/php.css
   PHP の脆弱性対策の特設ページ（/php-security）専用。
   site.css の :root（--paper / --ink / --green / --sage / --sand / --line など）に依存する。
   php/index.blade.php の @push('head') で、site.css のあとに読み込む（単体では読み込まない）。
   ビルド工程は無い。filemtime のキャッシュバスター付きで配信する。
   ===================================================================== */
:root{
  /* ---- モーション共通 ---- */
  --mo-bad:#C9705F;                    /* 崩れた・止まった。フォームのエラーと同じ色 */
  --mo-bad-ink:#8A3B2E;
  --mo-bad-bg:#FBF0EE;
  --mo-site:#FBFAF6;                   /* 架空のお店のサイトの地 */
  --mo-site-ink:#2B2620;
  --mo-site-accent:#9A6B3F;            /* パン屋の茶色。8Peakの緑とは別の店の色 */

  /* ---- モーション：PHPバージョンアップ（php/motion-upgrade.blade.php） ----
     1周の尺と、各場面の開始位置・長さ（1周を1としたときの比率） */
  --mo-up-dur:22000;                   /* 1周（ms） */
  --mo-up-a0:.04;  --mo-up-a:.10;      /* 01 控えを取る */
  --mo-up-u0:.16;  --mo-up-u:.15;      /* 02 本体・テーマ・プラグインを更新 */
  --mo-up-v0:.33;  --mo-up-v:.11;      /* 03 PHPを上げる（7.4.33 → 8.4.27） */
  --mo-up-x0:.425; --mo-up-x:.012;     /*    メニューの表示が崩れる */
  --mo-up-k0:.48;  --mo-up-k:.32;      /* 04 確かめる（05 直す を含む） */
  --mo-up-w0:.53;                      /* 05 コードウィンドウが開く */
  --mo-up-f0:.65;  --mo-up-f:.02;      /*    直した。メニューが元に戻る */
  --mo-up-z0:.84;  --mo-up-z:.04;      /* 完了 */
  --mo-up-in:.02;  --mo-up-out:.03;    /* 1周の頭と終わりのフェード */

  /* ---- 立体（アイソメトリック）の図の色。サーバーお引越し・HTML化で使う ---- */
  --iso-line:#2B2A26;                  /* 輪郭。--ink より少しだけ柔らかく */
  --iso-stroke:1.6;                    /* 輪郭の太さ（viewBox の単位） */
  --iso-top:#FFFFFF;                   /* 上の面 */
  --iso-l:#EEE9DE;                     /* 左手前の面 */
  --iso-r:#DCD4C3;                     /* 右手前の面（いちばん暗い） */
  --iso-new-l:#E3ECE5;                 /* 新しいものの左手前の面（セージ寄り） */
  --iso-new-r:#C6D7CC;                 /* 新しいものの右手前の面 */
  --iso-shadow:rgba(17,17,17,.07);     /* 床に落ちる影 */

  /* ---- モーション：サーバーお引越し（php/motion-move.blade.php。形は docs/motion/move.py） ----
     1周の尺と、各場面の開始位置・長さ（1周を1としたときの比率） */
  --mo-mv-dur:34000;                   /* 1周（ms） */
  --mo-mv-m0:.023; --mo-mv-m:.069;     /* 01 8Peak の指示でメンテナンスにして、通行止めの看板を降ろす */
  --mo-mv-r0:.10;  --mo-mv-r:.092;     /* 02 レンタルサーバー会社が新しいサーバーを出す */
  --mo-mv-u0:.199; --mo-mv-u:.123;     /* 03 8Peak がコマンドで PHP を上げる */
  --mo-mv-t0:.336; --mo-mv-t:.077;     /* 04 サイトの複製が移る */
  --mo-mv-d0:.382;                     /*    データベースの複製が移り始める（長さは上と同じ） */
  --mo-mv-k0:.467; --mo-mv-k:.061;     /* 05 確かめる */
  --mo-mv-g0:.536; --mo-mv-g:.077;     /* 06 8Peak の指示で新しい道を引き、お客さんを案内する */
  --mo-mv-z0:.618; --mo-mv-z:.02;      /*    「新しいサーバー」の札が緑になる */
  --mo-mv-c0:.64;  --mo-mv-c:.27;      /* 07 8Peak のコマンドで、いまのサーバーを片付ける（台を畳む → シュレッダー） */
  --mo-mv-walk:8;                      /* お客さんが1周のあいだに道を歩き切る回数（大きいほど速い） */
  --mo-mv-lift:70;                     /* 複製が持ち上がる高さ（viewBox の単位） */

  /* ---- モーション：診断（php/motion-diagnosis.blade.php。形は docs/motion/diagnosis.py） ----
     1周の尺と、各場面の開始位置・長さ（1周を1としたときの比率）。結果の札は、どれも2秒以上見えるようにしてある */
  --mo-dg-dur:36000;                   /* 1周（ms） */
  --mo-dg-a0:.025; --mo-dg-a:.07;      /* 01 お申し込み：封筒がノートPCへ */
  --mo-dg-s0:.10;  --mo-dg-s:.68;      /* 02 調べる */
  --mo-dg-s1:.13;                      /*    虫めがねが WordPress へ移り始める */
  --mo-dg-s2:.19;                      /*    プラグイン */
  --mo-dg-s3:.25;                      /*    サーバー */
  --mo-dg-s4:.305;                     /*    PHP の版（少し長く見る） */
  --mo-dg-s5:.38;                      /*    ファイル */
  --mo-dg-s6:.435;                     /*    管理者 */
  --mo-dg-v0:.53;                      /*    VPS・クラウドなので、さらに：札が出て、メールと DNS の箱がせり上がる */
  --mo-dg-s7:.565;                     /*    OS */
  --mo-dg-s8:.62;                      /*    メール */
  --mo-dg-s9:.675;                     /*    DNS */
  --mo-dg-move:.02;                    /*    虫めがねが次の点へ移る時間 */
  --mo-dg-r0:.78;  --mo-dg-r:.08;      /* 03 まとめる */
  --mo-dg-d0:.87;  --mo-dg-d:.08;      /* 04 お渡し：報告書があなたへ */

  /* ---- モーション：HTML化（php/motion-html.blade.php。形は docs/motion/html.py） ----
     1周の尺と、各場面の開始位置・長さ（1周を1としたときの比率） */
  --mo-ht-dur:30000;                   /* 1周（ms） */
  --mo-ht-l0:.03;  --mo-ht-l:.12;      /* 01 洗い出す：ページの紙が扇に広がる */
  --mo-ht-e0:.17;  --mo-ht-e:.20;      /* 02 書き出す：HTML の台が降り、紙が飛んで新しいサイトが組み上がる */
  --mo-ht-f0:.39;  --mo-ht-f:.12;      /* 03 フォームをつなぐ：フォームの札が外部のフォームサービスへ */
  --mo-ht-g0:.53;  --mo-ht-g:.11;      /* 04 案内する：新しい道を引き、お客さんが新しいサイトへ */
  --mo-ht-c0:.66;  --mo-ht-c:.16;      /* 05 片付ける：WordPress の画面とデータベースが倒れ、PHP の台が折りたたまれる */
  --mo-ht-z0:.84;  --mo-ht-z:.03;      /*    「PHPが動いていないので対象外」の札 */
}

/* =====================================================================
   モーション共通（[data-mo]。動きは php.js）
   ===================================================================== */
.mo{position:relative;container-type:inline-size;margin:0;text-rendering:geometricPrecision}
.mo__stage{position:relative}
.mo__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(12px,3cqw,28px);margin-top:clamp(18px,3cqw,28px)}
.mo__toggle{
  width:36px;height:36px;border-radius:50%;flex:none;
  border:1px solid var(--line);background:var(--white);color:var(--ink-2);cursor:pointer;
  display:grid;place-items:center;
  transition:color var(--hover-dur) ease-out,border-color var(--hover-dur) ease-out;
}
.mo__toggle:hover{color:var(--green);border-color:var(--green)}
.mo__toggle i{width:10px;height:12px;border-inline:3px solid currentColor}            /* 一時停止 */
.mo.is-paused .mo__toggle i{border:0;width:0;height:0;border-left:10px solid currentColor;border-block:6px solid transparent;margin-left:3px} /* 再生 */
.js .mo:not([data-mo-ready]) .mo__toggle,.mo[data-mo-static] .mo__toggle{display:none}
html:not(.js) .mo__toggle{display:none}

.mo__steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2cqw,20px)}
.mo__steps li{
  --on:clamp(0, calc(var(--f) * 40), 1);
  position:relative;padding-top:14px;font-size:clamp(.7rem,1.9cqw,.86rem);line-height:1.5;
  color:color-mix(in srgb,var(--ink) calc(40% + 60% * var(--on)),transparent);
}
.mo__steps li::before,.mo__steps li::after{content:"";position:absolute;top:0;left:0;height:2px;border-radius:2px}
.mo__steps li::before{right:0;background:var(--line)}
.mo__steps li::after{width:calc(var(--f) * 100%);background:var(--green)}
.mo__steps span{display:block;font-size:.85em;letter-spacing:.14em;color:var(--sage);font-variant-numeric:tabular-nums}

/* =====================================================================
   モーション：PHPバージョンアップ
   --p（0〜1）を場面ごとの進行度に分ける。
   --A 控え / --U 更新 / --V PHPの版 / --K 確かめる / --W コードウィンドウ / --Ty 書き直し / --F 直した / --X 崩れ / --Z 完了
   既定の --p は完了の場面。JS が無い・動きを減らす設定では、ここで止まる
   ===================================================================== */
.mo-up{
  --p:.9;
  --A:clamp(0, calc((var(--p) - var(--mo-up-a0)) / var(--mo-up-a)), 1);
  --U:clamp(0, calc((var(--p) - var(--mo-up-u0)) / var(--mo-up-u)), 1);
  --V:clamp(0, calc((var(--p) - var(--mo-up-v0)) / var(--mo-up-v)), 1);
  --V5:clamp(0, calc((var(--V) * 5 - 4) / .55), 1);    /* 版が 8.4.27 に止まったところ */
  --K:clamp(0, calc((var(--p) - var(--mo-up-k0)) / var(--mo-up-k)), 1);
  --F:clamp(0, calc((var(--p) - var(--mo-up-f0)) / var(--mo-up-f)), 1);
  --X:calc(clamp(0, calc((var(--p) - var(--mo-up-x0)) / var(--mo-up-x)), 1) * (1 - var(--F)));
  --W:calc(clamp(0, calc((var(--p) - var(--mo-up-w0)) / .015), 1) * (1 - clamp(0, calc((var(--p) - var(--mo-up-f0) - .02) / .015), 1)));
  --Ty:clamp(0, calc((var(--p) - var(--mo-up-w0) - .035) / .06), 1);   /* 13行目を書き直す */
  --Ty2:clamp(0, calc((var(--p) - var(--mo-up-w0) - .095) / .02), 1);  /* 15行目を書き直す */
  --Z:clamp(0, calc((var(--p) - var(--mo-up-z0)) / var(--mo-up-z)), 1);
  --O:min(clamp(0, calc(var(--p) / var(--mo-up-in)), 1), clamp(0, calc((1 - var(--p)) / var(--mo-up-out)), 1));
  /* 更新の一覧から、確かめるの一覧へ切り替える（確かめるの少し前） */
  --swap:clamp(0, calc((var(--p) - var(--mo-up-k0) + .03) / .03), 1);
  /* 確かめる一覧の各行が出る時刻。メニューは崩れを見つけて×、直したら○ */
  --up-r1:calc(var(--mo-up-k0) + .015);
  --up-r2:calc(var(--mo-up-k0) + .035);
  --up-r3:calc(var(--mo-up-f0) + .05);
  --up-r4:calc(var(--mo-up-f0) + .1);
  /* 8Peak の指示の点線が出ている間 */
  --lkBackup:min(1, calc(var(--A) * 20), calc((.6 - var(--A)) * 20));
  --lkParts:min(1, calc(var(--U) * 20), calc((.45 - var(--U)) * 20));
  --lkPhp:min(1, calc(var(--V) * 20), calc((.9 - var(--V)) * 20));
  --lkSite:min(1, calc((var(--p) - var(--mo-up-k0)) * 60), calc((var(--mo-up-k0) + .04 - var(--p)) * 60));
  --lkCode:min(1, calc((var(--p) - var(--mo-up-w0)) * 60), calc((var(--mo-up-f0) - var(--p)) * 60));
  --lkAny:max(var(--lkBackup), var(--lkParts), var(--lkPhp), var(--lkSite), var(--lkCode), 0);
}
.mo-up .mo__stage{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.6em;align-items:start;
  font-size:clamp(10px, calc(100cqw / 46), 16px);line-height:1.5;
  opacity:var(--O);
}
.mo__steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.mo-up .mo__steps li:nth-child(1){--f:var(--A)}
.mo-up .mo__steps li:nth-child(2){--f:var(--U)}
.mo-up .mo__steps li:nth-child(3){--f:var(--V)}
.mo-up .mo__steps li:nth-child(4){--f:clamp(0, calc((var(--p) - var(--mo-up-k0)) / (var(--mo-up-w0) - var(--mo-up-k0))), 1)}
.mo-up .mo__steps li:nth-child(5){--f:clamp(0, calc((var(--p) - var(--mo-up-w0)) / (var(--mo-up-f0) + .02 - var(--mo-up-w0))), 1)}
.mo-up .mo__foot{opacity:var(--O)}

.mo-up__left{display:grid;gap:1em;min-width:0}

/* ---- 左上：お店のサイト ---- */
.mo-up__site{
  position:relative;overflow:hidden;border-radius:6px;background:var(--mo-site);color:var(--mo-site-ink);
  border:1px solid var(--iso-line);
  box-shadow:6px 8px 0 -1px var(--iso-shadow), 0 0 0 calc(2px * var(--Z)) var(--green);
}
.mo-up__bar{display:flex;align-items:center;gap:.35em;padding:.55em .8em;border-bottom:1px solid var(--line);background:#F3EFE7}
.mo-up__bar i{width:.55em;height:.55em;border-radius:50%;background:var(--iso-line)}
.mo-up__bar span{margin-left:.6em;flex:1;font-size:.72em;color:var(--ink-2);background:#fff;border-radius:999px;padding:.15em .9em;white-space:nowrap;overflow:hidden}
.mo-up__page{display:grid;gap:.9em;padding:1em 1.1em 1.2em}
.mo-up__head{display:flex;justify-content:space-between;align-items:center}
.mo-up__head b{font-family:var(--font-serif);font-size:.95em;letter-spacing:.08em}
.mo-up__head span{width:1.6em;height:.5em;border-block:1px solid currentColor;opacity:.5}
.mo-up__hero{display:grid;gap:.35em;padding:1em;border-radius:4px;background:linear-gradient(135deg,#EFE4D3,#E3CDB0)}
.mo-up__hero b{font-family:var(--font-serif);font-size:1.15em;line-height:1.45}
.mo-up__hero span{font-size:.72em;opacity:.75}

/* メニュー。PHP を上げた直後にここが崩れ、コードを直すと戻る */
.mo-up__menu{position:relative;display:grid;gap:.1em;font-size:.8em}
.mo-up__menu div{
  display:flex;justify-content:space-between;padding:.45em .2em;border-bottom:1px solid #E7DFD3;
  transform:translateX(calc(var(--X) * 1.2em)) skewX(calc(var(--X) * -14deg));
  opacity:calc(1 - var(--X) * .75);
}
.mo-up__menu div:nth-child(2){transform:translateX(calc(var(--X) * -1.8em)) skewX(calc(var(--X) * 10deg))}
.mo-up__menu div:nth-child(3){transform:translateX(calc(var(--X) * 2.4em));opacity:calc(1 - var(--X))}
.mo-up__menu div span:last-child{font-variant-numeric:tabular-nums;color:var(--mo-site-accent)}
.mo-up__broken{
  position:absolute;inset:-.2em -.3em;display:grid;place-items:center;
  border:1px dashed var(--mo-bad);border-radius:4px;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--mo-bad-bg) 92%,transparent) 0 .6em,color-mix(in srgb,var(--mo-bad) 14%,transparent) .6em 1.2em);
  color:var(--mo-bad-ink);font-weight:500;font-size:.95em;
  opacity:var(--X);transform:scale(calc(.96 + .04 * var(--X)));
}
.mo-up__form{display:flex;align-items:center;justify-content:space-between;gap:.8em;font-size:.78em;padding:.7em .9em;border-radius:4px;background:var(--mo-site-ink);color:#F4EEE6}
.mo-up__form i{width:1.4em;height:1.4em;border-radius:50%;border:1px solid currentColor;opacity:.6}

/* 控えを取るとき、上から下へなぞる線 */
.mo-up__scan{
  position:absolute;left:0;right:0;height:2.4em;pointer-events:none;
  top:calc(var(--A) * 100% - 2.4em);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--sage) 45%,transparent) 85%,var(--green));
  opacity:min(1, calc(var(--A) * 25), calc((1 - var(--A)) * 25));
}

/* ---- コードウィンドウ：崩れを見つけたら開き、13行目と15行目を書き直して閉じる ---- */
.up-code{
  position:absolute;left:3%;right:3%;top:2.9em;z-index:2;
  border-radius:6px;overflow:hidden;background:#23241F;color:#E9EDE6;
  border:1px solid var(--iso-line);box-shadow:6px 8px 0 -1px rgba(17,17,17,.12);
  font-family:var(--font-mono);font-size:.64em;line-height:1.75;
  opacity:var(--W);transform:translateY(calc((1 - var(--W)) * 1.2em)) scale(calc(.97 + .03 * var(--W)));
}
.up-code__bar{display:flex;align-items:center;gap:.4em;padding:.45em .8em;background:#34362F}
.up-code__bar i{width:.6em;height:.6em;border-radius:50%;background:#6B6D63}
.up-code__bar span{margin-left:.5em;color:#C9D3CB;letter-spacing:.04em}
.up-code__body{padding:.6em 0}
.up-code__ln{display:grid;grid-template-columns:2.6em minmax(0,1fr);white-space:nowrap;padding-right:.8em}
.up-code__ln > span{overflow:hidden;text-overflow:clip}
.up-code__ln .n{color:#7C7F73;text-align:right;padding-right:.9em}
/* 書き直す行：古い行は赤く光ってから消え、新しい行が左から打ち込まれる */
.up-code__ln--fix{--t:var(--Ty);background:color-mix(in srgb,var(--mo-bad) calc(30% * (1 - var(--t))),color-mix(in srgb,var(--sage) calc(22% * var(--t)),transparent))}
.up-code__ln--late{--t:var(--Ty2)}
.up-code__ln--fix > span:not(.n){grid-column:2;grid-row:1}
.up-code__old{color:#F2B1A4;opacity:clamp(0, calc((1 - var(--t)) * 6 - 5), 1)}
.up-code__new{color:#BFE3CC;clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0)}
.up-code__status{display:grid;padding:.35em .9em;border-top:1px solid #3A3C35}
.up-code__status span{grid-area:1/1}
.up-code__status .is-err{color:#F2B1A4;opacity:calc(1 - var(--Ty2))}
.up-code__status .is-ok{color:var(--sage);opacity:var(--Ty2)}

/* ---- 右下：8Peak のターミナル。指示を出している間は縁が緑になる ---- */
.up-term{
  border-radius:6px;overflow:hidden;background:#23241F;
  border:1px solid var(--iso-line);
  box-shadow:6px 8px 0 -1px var(--iso-shadow), 0 0 0 calc(2px * var(--lkAny)) var(--sage);
}
.up-term__bar{display:flex;align-items:center;gap:.5em;padding:.45em .8em;background:#34362F;color:#C9D3CB;font-size:.72em;letter-spacing:.06em}
.up-term__bar .hd__mark{width:1.3em;height:1.3em;color:var(--sage)}
.up-term__body{padding:.55em .9em .65em;font-family:var(--font-mono);font-size:.66em;line-height:1.55;min-height:calc(7 * 1.55em + 1.2em)}
.up-term__body p{--sh:clamp(0, calc((var(--p) - var(--at)) / .006), 1);color:#E9EDE6;white-space:nowrap;overflow:hidden;opacity:var(--sh)}
.up-term__body p.is-ok{color:var(--sage)}

/* ---- 8Peak の指示の点線（ターミナル → 部品）。d は php.js が引く ---- */
.mo-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.mo-link{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;stroke-dashoffset:calc(var(--p) * -1600);opacity:0}
.mo-link--backup{opacity:var(--lkBackup)}
.mo-link--parts{opacity:var(--lkParts)}
.mo-link--php{opacity:var(--lkPhp)}
.mo-link--site{opacity:var(--lkSite)}
.mo-link--code{opacity:var(--lkCode)}

/* ---- 右：PHP の版 ---- */
.mo-up__side{display:grid;grid-template-rows:auto auto auto auto;gap:.9em;min-width:0;align-content:start}
.mo-up__php{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:.7em;padding:.8em 1em;border-radius:6px;
  background:#EFE9DD;color:var(--ink);border:1px solid var(--iso-line);
}
.mo-up__php::before{content:"";position:absolute;inset:0;background:var(--green);opacity:var(--Z)}
.mo-up__php > *{position:relative}
.mo-up__php-label{font-size:.75em;letter-spacing:.14em;color:color-mix(in srgb,var(--ink-2) calc(100% - 100% * var(--Z)),var(--ink-on-green-2))}
.mo-up__odo{height:1.4em;overflow:hidden;font-family:var(--font-serif);font-size:1.7em;line-height:1.4;font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--ink) calc(100% - 100% * var(--Z)),#fff)}
/* 1段ずつ止まりながら上がる。5段で 7.4.33 → 8.4.27 */
.mo-up__roll{
  --r:calc(
    clamp(0, calc((var(--V) * 5 - 0) / .55), 1) +
    clamp(0, calc((var(--V) * 5 - 1) / .55), 1) +
    clamp(0, calc((var(--V) * 5 - 2) / .55), 1) +
    clamp(0, calc((var(--V) * 5 - 3) / .55), 1) +
    var(--V5));
  display:grid;transform:translateY(calc(var(--r) * -1.4em));
}
.mo-up__state{display:grid;margin-left:auto;font-size:.72em;white-space:nowrap}
.mo-up__state span{grid-area:1/1;justify-self:end;padding:.2em .8em;border-radius:999px}
.mo-up__state .is-old{background:var(--mo-bad-bg);color:var(--mo-bad-ink);border:1px solid color-mix(in srgb,var(--mo-bad) 50%,transparent);opacity:calc(1 - var(--V5))}
.mo-up__state .is-new{background:#fff;color:var(--green);border:1px solid color-mix(in srgb,var(--green) calc(40% * (1 - var(--Z))),transparent);opacity:var(--V5)}

/* ---- 右：更新の一覧と、確かめるの一覧（同じ場所で入れ替わる） ---- */
.mo-up__side{grid-template-areas:"php" "list" "backup" "term"}
.mo-up__php{grid-area:php}
.mo-up__parts,.mo-up__checks{grid-area:list}
.mo-up__backup{grid-area:backup}
.mo-up__side .up-term{grid-area:term}
.mo-up__panel{display:grid;align-content:start;gap:.15em;padding:.7em 1em .8em;border-radius:6px;background:var(--white);border:1px solid var(--iso-line)}
.mo-up__parts{opacity:calc(1 - var(--swap));transform:translateY(calc(var(--swap) * -.6em))}
.mo-up__checks{opacity:var(--swap);transform:translateY(calc((1 - var(--swap)) * .6em))}
.mo-up__cap{font-size:.68em;letter-spacing:.16em;color:var(--green);margin-bottom:.3em}
.mo-up__row{
  display:grid;grid-template-columns:minmax(0,1fr) 7.2em 1.3em;align-items:center;gap:.6em;
  font-size:.8em;padding:.42em 0;border-top:1px solid var(--line);
}
.mo-up__row > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-up__parts .mo-up__row{--rv:clamp(0, calc((var(--U) - var(--d)) / .2), 1)}
.mo-up__checks .mo-up__row{--rv:clamp(0, calc((var(--p) - var(--at)) / .012), 1);grid-template-columns:minmax(0,1fr) 1.3em}

/* 版の数字：古い版に線が引かれて、新しい版が出る */
.mo-up__ver{display:flex;justify-content:flex-end;align-items:baseline;gap:.5em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mo-up__ver s{position:relative;text-decoration:none;color:color-mix(in srgb,var(--ink) calc(100% - 55% * var(--rv)),transparent)}
.mo-up__ver s::after{content:"";position:absolute;left:-.1em;right:-.1em;top:55%;height:1px;background:currentColor;transform:scaleX(var(--rv));transform-origin:left}
.mo-up__ver b{font-weight:500;color:var(--green);opacity:var(--rv);transform:translateX(calc((1 - var(--rv)) * -.4em))}
.mo-up__row--swap .mo-up__ver s{color:color-mix(in srgb,var(--mo-bad-ink) calc(100% - 55% * var(--rv)),transparent)}

/* 丸の中のチェック／バツ */
.mo-up__ok,.mo-up__ng{grid-column:-2;grid-row:1;position:relative;width:1.3em;height:1.3em;border-radius:50%}
.mo-up__ok{background:var(--green);opacity:var(--rv);transform:scale(calc(.4 + .6 * var(--rv)))}
.mo-up__ok::after{content:"";position:absolute;left:.42em;top:.22em;width:.32em;height:.6em;border:solid #fff;border-width:0 .13em .13em 0;transform:rotate(45deg)}
.mo-up__ng{background:var(--mo-bad)}
.mo-up__ng::before,.mo-up__ng::after{content:"";position:absolute;left:.3em;right:.3em;top:calc(50% - .065em);height:.13em;background:#fff;transform:rotate(45deg)}
.mo-up__ng::after{transform:rotate(-45deg)}
/* メニューの行：まずバツが付き、直したらチェックに変わる */
.mo-up__row--fix{--ngv:calc(var(--rv) * (1 - var(--F)))}
.mo-up__row--fix .mo-up__ng{opacity:var(--ngv);transform:scale(calc(.4 + .6 * var(--rv)))}
.mo-up__row--fix .mo-up__ok{opacity:var(--F);transform:scale(calc(.4 + .6 * var(--F)))}
.mo-up__row--fix > span:first-child{color:color-mix(in srgb,var(--mo-bad-ink) calc(100% * var(--ngv)),var(--ink))}

/* ---- 右：控え ---- */
.mo-up__backup{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.25em 1em;padding:.7em 1em .8em;border-radius:6px;border:1px dashed var(--iso-line);background:color-mix(in srgb,var(--sand) calc(18% * var(--A)),transparent)}
.mo-up__backup .mo-up__cap{grid-row:span 2;margin:0}
.mo-up__meter{display:grid;grid-template-columns:7em minmax(0,1fr);align-items:center;gap:.6em;font-size:.72em;color:var(--ink-2)}
.mo-up__meter i{--m:clamp(0, calc((var(--A) - var(--d)) / .6), 1);height:.35em;border-radius:999px;background:linear-gradient(90deg,var(--green) calc(var(--m) * 100%),var(--line) calc(var(--m) * 100%))}
/* 崩れたときだけ「戻せる」ことを見せる */
.mo-up__undo{
  position:absolute;right:.8em;top:-1.1em;padding:.2em .8em;border-radius:999px;font-size:.7em;white-space:nowrap;
  background:var(--ink);color:#fff;opacity:calc(var(--X) * (1 - var(--W)));transform:translateY(calc((1 - var(--X)) * .4em));
}

/* 幅が狭いとき（スマホ）：サイト、ターミナル、右側の順に縦に積む */
@container (max-width:560px){
  .mo-up .mo__stage{grid-template-columns:minmax(0,1fr);font-size:calc(100cqw / 25);gap:1em}
  .mo-up__form{display:none}
  .mo-up__page{gap:.7em;padding:.8em .9em 1em}
  .mo-up__hero b{font-size:1.05em}
  .up-code{left:2%;right:2%;font-size:.56em}
  /* ターミナルは最新の4行だけ。まだ出ていない行は高さ0にして、新しい行が下に足され、古い行は上へ流れる */
  .up-term__body{display:flex;flex-direction:column;justify-content:flex-end;min-height:0;height:calc(4 * 1.55em + 1.2em);overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 1.2em);mask-image:linear-gradient(to bottom,transparent 0,#000 1.2em)}
  .up-term__body p{flex:none;max-height:calc(var(--sh) * 1.55em)}
  .mo-up .mo__steps--5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
}

/* =====================================================================
   モーション：サーバーお引越し
   --M 通行止め / --R ビルから出てくる / --U PHP を上げる / --Ms・--Md 移す / --K 確かめる / --G 案内 / --Z 完了
   ease は calc で書いている。sm(x) = x*x*(3-2x)、eo(x) = 1-(1-x)^3
   ===================================================================== */
.mo-mv{
  --p:.9;
  --M:clamp(0, calc((var(--p) - var(--mo-mv-m0)) / var(--mo-mv-m)), 1);
  --Mb:clamp(0, calc((var(--M) - .45) / .35), 1);                 /* 看板が降りてくる（指示が届いてから） */
  --Mo:clamp(0, calc((var(--M) - .6) / .35), 1);                  /* いまのサイトにメンテナンスの幕 */
  --R:clamp(0, calc((var(--p) - var(--mo-mv-r0)) / var(--mo-mv-r)), 1);
  --Rw:clamp(0, calc(var(--R) / .3), 1);                          /* ビルの窓に灯りがつく */
  --Rs:clamp(0, calc((var(--R) - .15) / .25), 1);                 /* シャッターが上がる */
  --Rm:clamp(0, calc((var(--R) - .35) / .5), 1);                  /* サーバーが出てくる */
  --eRm:calc(1 - (1 - var(--Rm)) * (1 - var(--Rm)) * (1 - var(--Rm)));
  --U:clamp(0, calc((var(--p) - var(--mo-mv-u0)) / var(--mo-mv-u)), 1);
  --Uf:clamp(0, calc((var(--U) - .68) / .14), 1);                 /* 札が赤から緑へ裏返る */
  --Ul:clamp(0, calc((var(--U) - .84) / .16), 1);                 /* 灯りがつく */
  --Ms:clamp(0, calc((var(--p) - var(--mo-mv-t0)) / var(--mo-mv-t)), 1);
  --Md:clamp(0, calc((var(--p) - var(--mo-mv-d0)) / var(--mo-mv-t)), 1);
  --T:clamp(0, calc((var(--p) - var(--mo-mv-t0)) / (var(--mo-mv-d0) - var(--mo-mv-t0) + var(--mo-mv-t))), 1);
  --K:clamp(0, calc((var(--p) - var(--mo-mv-k0)) / var(--mo-mv-k)), 1);
  --K1:clamp(0, calc(var(--K) / .4), 1);
  --K2:clamp(0, calc((var(--K) - .5) / .4), 1);
  --G:clamp(0, calc((var(--p) - var(--mo-mv-g0)) / var(--mo-mv-g)), 1);
  --Gd:clamp(0, calc((var(--G) - .3) / .45), 1);                  /* 新しい道が引かれていく */
  --Gf:clamp(0, calc((var(--G) - .75) / .25), 1);                 /* 引いた線が、流れる点線に変わる */
  --Z:clamp(0, calc((var(--p) - var(--mo-mv-z0)) / var(--mo-mv-z)), 1);
  --C:clamp(0, calc((var(--p) - var(--mo-mv-c0)) / var(--mo-mv-c)), 1);
  /* 片付けの中の段取り（C を 0〜1 として） */
  --Cb:clamp(0, calc((var(--C) - .1) / .1), 1);                   /* 通行止めの看板が上がって消える */
  --Cs:clamp(0, calc((var(--C) - .12) / .18), 1);                 /* 台が折りたたまれて消える */
  --Cr:clamp(0, calc((var(--C) - .22) / .08), 1);                 /* 残った画面とデータベースが少し浮く */
  --Cd:clamp(0, calc((var(--C) - .3) / .1), 1);                   /* シュレッダーが降りてくる */
  --Cw:clamp(0, calc((var(--C) - .42) / .18), 1);                 /* 画面がシュレッダーに沈む */
  --Cm:clamp(0, calc((var(--C) - .58) / .06), 1);                 /* データベースが差し込み口の上へ */
  --Cq:clamp(0, calc((var(--C) - .64) / .16), 1);                 /* データベースが沈む */
  --Cx:clamp(0, calc((var(--C) - .86) / .1), 1);                  /* シュレッダーが消える */
  --Ca:clamp(0, min(calc((var(--C) - .43) * 30), calc((.81 - var(--C)) * 30)), 1);   /* 細切れが出ている間 */
  --eCs:calc(var(--Cs) * var(--Cs) * (3 - 2 * var(--Cs)));
  --eCr:calc(1 - (1 - var(--Cr)) * (1 - var(--Cr)));
  --bCd:calc(1 + 2.70158 * (var(--Cd) - 1) * (var(--Cd) - 1) * (var(--Cd) - 1) + 1.70158 * (var(--Cd) - 1) * (var(--Cd) - 1));
  --eCw:calc(var(--Cw) * var(--Cw));
  --eCm:calc(var(--Cm) * var(--Cm) * (3 - 2 * var(--Cm)));
  --eCq:calc(var(--Cq) * var(--Cq));
  --eCx:calc(var(--Cx) * var(--Cx));
  --O:min(clamp(0, calc(var(--p) / .015), 1), clamp(0, calc((1 - var(--p)) / .03), 1));
  --arc:min(clamp(0, calc((var(--p) - var(--mo-mv-t0) + .01) / .02), 1), clamp(0, calc((var(--mo-mv-d0) + var(--mo-mv-t) + .01 - var(--p)) / .02), 1));
  /* 「いま動いている人」の札を明るくする */
  --hlUsers:max(min(1, calc(var(--Mb) * 12), calc((1 - var(--M)) * 12)), min(1, calc((var(--G) - .6) * 12), calc((var(--mo-mv-c0) - var(--p)) * 40)));
  --hlBld:min(1, calc(var(--R) * 12), calc((1 - var(--R)) * 12));
  --hlPc:max(min(1, calc(var(--M) * 12), calc((.55 - var(--M)) * 12)), min(1, calc(var(--U) * 12), calc((1 - var(--U)) * 12)), min(1, calc(var(--G) * 12), calc((.5 - var(--G)) * 12)), min(1, calc(var(--C) * 30), calc((.3 - var(--C)) * 30)));
}
.mo-mv .mo__stage{opacity:var(--O)}
.mo-mv .mo__foot{opacity:var(--O)}
.mo__steps--7{grid-template-columns:repeat(7,minmax(0,1fr))}
.mo-mv .mo__steps li:nth-child(1){--f:var(--M)}
.mo-mv .mo__steps li:nth-child(2){--f:var(--R)}
.mo-mv .mo__steps li:nth-child(3){--f:var(--U)}
.mo-mv .mo__steps li:nth-child(4){--f:var(--T)}
.mo-mv .mo__steps li:nth-child(5){--f:var(--K)}
.mo-mv .mo__steps li:nth-child(6){--f:var(--G)}
.mo-mv .mo__steps li:nth-child(7){--f:var(--C)}

.mv-svg{display:block;width:100%;height:auto;overflow:visible;shape-rendering:geometricPrecision;text-rendering:geometricPrecision}
.mv-svg text{font-family:var(--font-sans);font-weight:500}

/* ---- 面と輪郭 ---- */
.iso-top,.iso-l,.iso-r,.db-body,.db-top,.win-face,.pc-screen{stroke:var(--iso-line);stroke-width:var(--iso-stroke);stroke-linejoin:round;vector-effect:non-scaling-stroke}
.iso-top{fill:var(--iso-top)}
.iso-l{fill:var(--iso-l)}
.iso-r{fill:var(--iso-r)}
.srv-new-l{fill:var(--iso-new-l)}
.srv-new-r{fill:var(--iso-new-r)}
.iso-shadow{fill:var(--iso-shadow)}

/* ---- サイトの画面（表の面） ---- */
.win-face{fill:#fff}
.win-bar{fill:#F3EFE7}
.win-dot{fill:var(--iso-line)}
.win-name{font-family:var(--font-serif)!important;font-weight:600;font-size:10px;fill:var(--mo-site-ink);letter-spacing:.06em}
.win-hero{fill:#EFE4D3}
.win-mt{fill:#D8C2A0}
.win-sun{fill:#F8F1E6}
.win-ln{fill:#E6E0D4}
.win-btn{fill:var(--mo-site-ink)}
/* メンテナンス中の幕（いまのサイトだけ） */
.win-maint{opacity:var(--Mo)}
.win-maint rect{fill:color-mix(in srgb,var(--mo-bad-bg) 94%,transparent)}
.win-maint text{fill:var(--mo-bad-ink);font-size:17px;font-weight:700;text-anchor:middle}
.win-maint-icon{fill:none;stroke:var(--mo-bad);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}

/* ---- データベース ---- */
.db-body{fill:var(--iso-l)}
.db-top{fill:var(--iso-top)}
.db-band{fill:none;stroke:var(--iso-line);stroke-width:1;opacity:.45}

/* ---- PHP の版の札と、灯り ---- */
.plate rect{stroke-width:1;vector-effect:non-scaling-stroke}
.plate text{text-anchor:middle;letter-spacing:.04em}
.plate--bad rect{fill:var(--mo-bad-bg);stroke:var(--mo-bad)}
.plate--bad text{fill:var(--mo-bad-ink)}
.plate--good rect{fill:var(--green);stroke:var(--green)}
.plate--good text{fill:#fff}
.mv-new .plate{transform-box:fill-box;transform-origin:center}
.mv-new .plate--bad{transform:scaleY(clamp(0, calc(1 - 2 * var(--Uf)), 1))}
.mv-new .plate--good{transform:scaleY(clamp(0, calc(2 * var(--Uf) - 1), 1))}
.srv-old-led{fill:color-mix(in srgb,var(--sage) calc(100% - 100% * var(--C)),var(--iso-r))}
.srv-new-led{fill:color-mix(in srgb,var(--sage) calc(100% * clamp(0, calc(var(--Ul) * 3 - var(--i)), 1)),var(--iso-r))}

/* ---- いまのサーバー：最後に片付ける ----
   台が真ん中へ折りたたまれて消える → 残った画面とデータベースが少し浮く → シュレッダーが降りてきて、
   画面、データベースの順に差し込み口へ沈む（口より下は clip-path で隠れる）→ シュレッダーも消える */
.mv-old-slab{transform-box:fill-box;transform-origin:50% 50%;transform:scale(calc(1 - var(--eCs)), calc(1 - var(--eCs) * .55));opacity:clamp(0, calc((1 - var(--Cs)) / .2), 1)}
.mv-pill--old{opacity:clamp(0, calc((1 - var(--Cs)) / .3), 1)}
.mv-old-win{transform:translateY(calc((var(--eCw) * 140 - var(--eCr) * 30) * 1px));opacity:clamp(0, calc((1 - var(--Cw)) / .04), 1)}
.mv-old-db{transform:translate(calc(var(--ddx) * var(--eCm) * 1px), calc((var(--ddy) * var(--eCm) + var(--eCq) * 115 - var(--eCr) * 30) * 1px));opacity:clamp(0, calc((1 - var(--Cq)) / .04), 1)}
/* 切り抜きは、効かせる時まで下へずらしておく。画面はシュレッダーが来たら、データベースは差し込み口の真上に来たら */
.mv-shred-clip--win{transform:translateY(calc((1 - clamp(0, calc(var(--Cd) * 100), 1)) * 600px))}
.mv-shred-clip--db{transform:translateY(calc((1 - clamp(0, calc((var(--Cm) - .99) * 100), 1)) * 600px))}
.mv-shred{opacity:calc(clamp(0, calc(var(--Cd) * 6), 1) * clamp(0, calc((1 - var(--Cx)) / .3), 1));transform:translateY(calc((1 - var(--bCd)) * -90px))}
.mv-shred-in{transform-box:fill-box;transform-origin:50% 80%;transform:translateX(calc((mod(calc(var(--p) * 500), 1) - .5) * 2.4px * var(--Ca))) scale(calc(1 - var(--eCx)))}
.shred-l{fill:#E7E3DA}
.shred-r{fill:#D2CCBF}
.shred-top{fill:#F4F2EC}
.shred-slot{fill:#2E2D29;stroke:var(--iso-line);stroke-width:1;vector-effect:non-scaling-stroke}
.shred-mouth{fill:#3A3833}
.shred-led{fill:color-mix(in srgb,var(--sage) calc(100% * var(--Ca)),#C9C3B6)}
.shred-icon{fill:none;stroke:#9A9488;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* 細切れの紙：出口から落ちて、床に散って消える */
.shred-strip{--s:mod(calc(var(--p) * 70 + var(--k)), 1);transform:translateY(calc(var(--s) * 24px));opacity:calc(var(--Ca) * (1 - var(--s) * var(--s)));stroke:var(--iso-line);stroke-width:.6;vector-effect:non-scaling-stroke}
.shred-strip--a{fill:#FFFFFF}
.shred-strip--b{fill:#EFE4D3}
.shred-strip--c{fill:var(--iso-l)}

/* ---- レンタルサーバー会社のビル ---- */
.bld-win{fill:color-mix(in srgb,#F4EBC9 calc(100% * clamp(0, calc(var(--Rw) * 3 - var(--w) * .3), 1)),#F3EFE7);stroke:var(--iso-line);stroke-width:1;vector-effect:non-scaling-stroke}
.bld-inside{fill:#4A4740;stroke:var(--iso-line);stroke-width:var(--iso-stroke);vector-effect:non-scaling-stroke}
.bld-shutter{transform:translateY(calc(var(--Rs) * -60px))}
.bld-shutter-face{fill:#E4DED2;stroke:var(--iso-line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.bld-shutter-ln{stroke:var(--iso-line);stroke-width:.8;opacity:.35;vector-effect:non-scaling-stroke}

/* ---- 新しいサーバー：シャッターの奥から手前へ出てくる ---- */
.mv-new{
  opacity:clamp(0, calc(var(--Rm) * 8), 1);
  transform:translate(calc(var(--sx) * (1 - var(--eRm)) * 1px), calc(var(--sy) * (1 - var(--eRm)) * 1px));
}

/* ---- 8Peak のノートPC ---- */
.pc-l,.pc-r{fill:#DAD5CA}
.pc-top{fill:#EEEBE4}
.pc-key{fill:#fff;stroke:#C9C3B6;stroke-width:.8;vector-effect:non-scaling-stroke}
.pc-screen{fill:#23241F}
.pc-bar{fill:#34362F}
.pc-title{fill:#C9D3CB;font-size:8px;letter-spacing:.06em}
.mv-mark{fill:var(--green)}
.pc-bar + svg .mv-mark,.pc-screen ~ svg .mv-mark{fill:var(--sage)}
.mv-term{font-family:var(--font-mono);font-size:10px;opacity:clamp(0, calc((var(--p) - var(--at)) / .008), 1)}
.mv-term-cmd{fill:#E9EDE6}
.mv-term-old{fill:#E59A8A}
.mv-term-new{fill:var(--sage)}
/* 8Peak の指示の線（ノートPC → 通行止め / 新しいサーバーの札 / 新しい道） */
.mv-cmd{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;stroke-dashoffset:calc(var(--p) * -1400)}
.mv-cmd--bar{opacity:min(clamp(0, calc((var(--M) - .03) * 20), 1), clamp(0, calc((.55 - var(--M)) * 20), 1))}
.mv-cmd--php{opacity:min(clamp(0, calc((var(--U) - .06) * 20), 1), clamp(0, calc((.92 - var(--U)) * 20), 1))}
.mv-cmd--route{opacity:min(clamp(0, calc((var(--G) - .03) * 20), 1), clamp(0, calc((.45 - var(--G)) * 20), 1))}
.mv-cmd--old{opacity:min(clamp(0, calc((var(--C) - .01) * 40), 1), clamp(0, calc((.2 - var(--C)) * 40), 1))}

/* ---- 移す複製。持ち上がる（最初の25%）→ 横へ（真ん中）→ 降りる（最後の25%） ---- */
.mv-copy{
  --up:clamp(0, calc(var(--t) / .25), 1);
  --go:clamp(0, calc((var(--t) - .2) / .6), 1);
  --dn:clamp(0, calc((var(--t) - .75) / .25), 1);
  --eUp:calc(1 - (1 - var(--up)) * (1 - var(--up)));
  --eGo:calc(var(--go) * var(--go) * (3 - 2 * var(--go)));
  --eDn:calc(var(--dn) * var(--dn));
  opacity:clamp(0, calc(var(--t) * 30), 1);
  transform:translate(calc(var(--dx) * var(--eGo) * 1px), calc((var(--dy) * var(--eGo) + (var(--eDn) - var(--eUp)) * var(--mo-mv-lift)) * 1px));
}
.mv-copy--site{--t:var(--Ms)}
.mv-copy--db{--t:var(--Md)}
.mv-copy .iso-l,.mv-copy .db-body{fill:color-mix(in srgb,var(--iso-new-l) calc(100% * var(--eDn)),var(--iso-l))}
.mv-copy .iso-r{fill:color-mix(in srgb,var(--iso-new-r) calc(100% * var(--eDn)),var(--iso-r))}
.mv-arc{fill:none;stroke:var(--sage);stroke-width:1.6;stroke-dasharray:3 7;stroke-linecap:round;opacity:var(--arc);stroke-dashoffset:calc(var(--p) * -900)}

/* ---- 確かめる：チェックが弾むように出る ---- */
.mv-check{transform-box:fill-box;transform-origin:center;opacity:var(--c);transform:scale(calc(.3 + .7 * var(--c)))}
.mv-check circle{fill:var(--green);stroke:#fff;stroke-width:2.5}
.mv-check path{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.mv-check--site{--c:var(--K1)}
.mv-check--db{--c:var(--K2)}

/* ---- お客さんの道と、通行止め ---- */
.mv-route{fill:none;stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;stroke-dashoffset:calc(var(--p) * -1400)}
.mv-route--old{stroke:var(--ink-2);opacity:calc(1 - var(--Gd))}
.mv-route--new{stroke:var(--green);opacity:var(--Gf)}
.mv-route-draw{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--Gd));opacity:calc(min(1, var(--Gd) * 40) * (1 - var(--Gf)))}
.mv-barrier{opacity:calc(var(--Mb) * (1 - var(--Cb)))}
.mv-barrier-in{transform:translateY(calc(((1 - var(--Mb) * (2 - var(--Mb))) + var(--Cb) * var(--Cb)) * -46px))}
.mv-barrier-leg{fill:none;stroke:var(--iso-line);stroke-width:2.4;stroke-linecap:round}
.mv-barrier-board{fill:#fff}
.mv-barrier-stripe{stroke:var(--mo-bad);stroke-width:6;clip-path:inset(0)}
.mv-barrier-edge{fill:none;stroke:var(--iso-line);stroke-width:1.6}
/* 歩いていく人。道を10区間に分けた点（move.py の walk_vars）を、--e（0〜1）に応じてつないで動かす。
   いまのサイトへ向かう人は、メンテナンス中は通行止めの手前（--bar）で止まって消える */
.mv-walker{
  --d:mod(calc(var(--p) * var(--mo-mv-walk) + var(--i) / var(--n)), 1);
  --k:calc(var(--e) * 10);
  transform:translate(calc((var(--wx0) + var(--wdx1) * clamp(0, calc(var(--k) - 0), 1) + var(--wdx2) * clamp(0, calc(var(--k) - 1), 1) + var(--wdx3) * clamp(0, calc(var(--k) - 2), 1) + var(--wdx4) * clamp(0, calc(var(--k) - 3), 1) + var(--wdx5) * clamp(0, calc(var(--k) - 4), 1) + var(--wdx6) * clamp(0, calc(var(--k) - 5), 1) + var(--wdx7) * clamp(0, calc(var(--k) - 6), 1) + var(--wdx8) * clamp(0, calc(var(--k) - 7), 1) + var(--wdx9) * clamp(0, calc(var(--k) - 8), 1) + var(--wdx10) * clamp(0, calc(var(--k) - 9), 1)) * 1px), calc((var(--wy0) + var(--wdy1) * clamp(0, calc(var(--k) - 0), 1) + var(--wdy2) * clamp(0, calc(var(--k) - 1), 1) + var(--wdy3) * clamp(0, calc(var(--k) - 2), 1) + var(--wdy4) * clamp(0, calc(var(--k) - 3), 1) + var(--wdy5) * clamp(0, calc(var(--k) - 4), 1) + var(--wdy6) * clamp(0, calc(var(--k) - 5), 1) + var(--wdy7) * clamp(0, calc(var(--k) - 6), 1) + var(--wdy8) * clamp(0, calc(var(--k) - 7), 1) + var(--wdy9) * clamp(0, calc(var(--k) - 8), 1) + var(--wdy10) * clamp(0, calc(var(--k) - 9), 1)) * 1px));
  fill:var(--ink);
}
.mv-walkers--old .mv-walker{
  --stop:calc(1 - var(--Mb) * (1 - var(--bar, .7)));
  --e:min(var(--d), var(--stop));
  opacity:calc(clamp(0, calc(var(--d) / .04), 1) * clamp(0, calc((1 - var(--d)) / .05), 1)
    * (1 - var(--Mb) * clamp(0, calc((var(--d) - var(--stop) + .06) / .06), 1)) * (1 - var(--Gd)));
}
.mv-walkers--new .mv-walker{
  --e:var(--d);
  fill:var(--green);
  /* 道ができてから、1人ずつ増えていく */
  opacity:calc(clamp(0, calc(var(--d) / .04), 1) * clamp(0, calc((1 - var(--d)) / .05), 1)
    * clamp(0, calc((var(--p) - var(--mo-mv-g0) - var(--mo-mv-g) * .7 - var(--i) * .012) / .008), 1));
}

/* ---- 札 ---- */
.mv-pill rect{fill:color-mix(in srgb,#E3ECE5 calc(100% * var(--hl, 0)),var(--white));stroke:color-mix(in srgb,var(--green) calc(100% * var(--hl, 0)),var(--line));stroke-width:1.2}
.mv-pill text{fill:var(--ink);font-weight:700;text-anchor:middle}
.mv-pill--users{--hl:var(--hlUsers)}
.mv-pill--bld{--hl:var(--hlBld)}
.mv-pill--pc{--hl:var(--hlPc)}
.mv-pill--new rect{fill:color-mix(in srgb,var(--green) calc(100% * var(--Z)),var(--white));stroke:color-mix(in srgb,var(--green) calc(100% * var(--Z)),var(--line))}
.mv-pill--new text{fill:color-mix(in srgb,#fff calc(100% * var(--Z)),var(--ink))}
.mv-pill--new{opacity:clamp(0, calc(var(--Rm) * 3), 1)}
.mv-person{fill:var(--ink)}
.mv-bicon{fill:none;stroke:var(--ink);stroke-width:1.4}
.mv-bicon-w{fill:var(--ink)}

/* ---- 狭い画面（スマホ）：図を拡大して、場面ごとにカメラが寄る ----
   --cx / --cy は viewBox の中の注目点（0〜1）、--cz は倍率。場面が変わるところで滑らかに移る */
.mo-mv{
  --c1:clamp(0, calc((var(--p) - .095) / .018), 1);
  --c2:clamp(0, calc((var(--p) - .194) / .018), 1);
  --c3:clamp(0, calc((var(--p) - .328) / .018), 1);
  --c4:clamp(0, calc((var(--p) - .46) / .018), 1);
  --c5:clamp(0, calc((var(--p) - .529) / .018), 1);
  --c6:clamp(0, calc((var(--p) - .63) / .022), 1);
  --c7:clamp(0, calc((var(--p) - .915) / .025), 1);
  /* 場面ごとの狙い：01 お客さん・いまのサーバー・ノートPC → 02 ビルと新しいサーバー → 03 ノートPCと札 → 04 全体 → 05 新しいサーバー → 06 全体 → 07 いまのサーバーとノートPC → 片付いたら全体 */
  --cx:calc(.278 + .472 * var(--c1) - .17 * var(--c2) - .11 * var(--c3) + .2 * var(--c4) - .25 * var(--c5) - .1 * var(--c6) + .1 * var(--c7));
  --cy:calc(.5 + .03 * var(--c2) - .03 * var(--c3));
  --cz:calc(1.8 + .2 * var(--c1) + .1 * var(--c2) - .7 * var(--c3) + .9 * var(--c4) - 1.1 * var(--c5) + .65 * var(--c6) - .65 * var(--c7));
}
@container (max-width:560px){
  .mo-mv .mo__stage{position:relative;aspect-ratio:1 / .95;overflow:hidden}
  .mo-mv .mv-svg{
    position:absolute;left:0;top:0;width:calc(100% * var(--cz));max-width:none;
    transform:translate(calc(50cqw - var(--cx) * 100cqw * var(--cz)), calc(47.5cqw - var(--cy) * 100cqw * var(--cz) * var(--ar)));
  }
  .mo__steps--7{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
}

/* =====================================================================
   モーション：診断
   --A お申し込み / --S 調べる / --R まとめる / --D お渡し。
   虫めがねは 9つの点を、--mK（K 番目へ移る進み具合）でつないで動かす。結果の札と報告書の行は --k 番目で出る。
   6番目までと、7番目から（VPS・クラウドの追加分）で分かれる
   ===================================================================== */
.mo-dg{
  --p:.93;
  --A:clamp(0, calc((var(--p) - var(--mo-dg-a0)) / var(--mo-dg-a)), 1);
  --S:clamp(0, calc((var(--p) - var(--mo-dg-s0)) / var(--mo-dg-s)), 1);
  --R:clamp(0, calc((var(--p) - var(--mo-dg-r0)) / var(--mo-dg-r)), 1);
  --D:clamp(0, calc((var(--p) - var(--mo-dg-d0)) / var(--mo-dg-d)), 1);
  --O:min(clamp(0, calc(var(--p) / .015), 1), clamp(0, calc((1 - var(--p)) / .03), 1));
  --V:clamp(0, calc((var(--p) - var(--mo-dg-v0)) / .025), 1);    /* VPS・クラウドの追加分が出る */
  /* 虫めがねが K 番目の点へ移る進み具合（なめらかに） */
  --u1:clamp(0, calc((var(--p) - var(--mo-dg-s1)) / var(--mo-dg-move)), 1);
  --u2:clamp(0, calc((var(--p) - var(--mo-dg-s2)) / var(--mo-dg-move)), 1);
  --u3:clamp(0, calc((var(--p) - var(--mo-dg-s3)) / var(--mo-dg-move)), 1);
  --u4:clamp(0, calc((var(--p) - var(--mo-dg-s4)) / var(--mo-dg-move)), 1);
  --u5:clamp(0, calc((var(--p) - var(--mo-dg-s5)) / var(--mo-dg-move)), 1);
  --u6:clamp(0, calc((var(--p) - var(--mo-dg-s6)) / var(--mo-dg-move)), 1);
  --u7:clamp(0, calc((var(--p) - var(--mo-dg-s7)) / var(--mo-dg-move)), 1);
  --u8:clamp(0, calc((var(--p) - var(--mo-dg-s8)) / var(--mo-dg-move)), 1);
  --u9:clamp(0, calc((var(--p) - var(--mo-dg-s9)) / var(--mo-dg-move)), 1);
  --m1:calc(var(--u1) * var(--u1) * (3 - 2 * var(--u1)));
  --m2:calc(var(--u2) * var(--u2) * (3 - 2 * var(--u2)));
  --m3:calc(var(--u3) * var(--u3) * (3 - 2 * var(--u3)));
  --m4:calc(var(--u4) * var(--u4) * (3 - 2 * var(--u4)));
  --m5:calc(var(--u5) * var(--u5) * (3 - 2 * var(--u5)));
  --m6:calc(var(--u6) * var(--u6) * (3 - 2 * var(--u6)));
  --m7:calc(var(--u7) * var(--u7) * (3 - 2 * var(--u7)));
  --m8:calc(var(--u8) * var(--u8) * (3 - 2 * var(--u8)));
  --m9:calc(var(--u9) * var(--u9) * (3 - 2 * var(--u9)));
  /* K 番目の結果が出る時刻（虫めがねが着いて少し見てから。PHP の版は長めに見る） */
  --at1:calc(var(--mo-dg-s1) + .045);
  --at2:calc(var(--mo-dg-s2) + .045);
  --at3:calc(var(--mo-dg-s3) + .045);
  --at4:calc(var(--mo-dg-s4) + .07);
  --at5:calc(var(--mo-dg-s5) + .045);
  --at6:calc(var(--mo-dg-s6) + .045);
  --at7:calc(var(--mo-dg-s7) + .045);
  --at8:calc(var(--mo-dg-s8) + .045);
  --at9:calc(var(--mo-dg-s9) + .045);
  --hlOwner:max(min(1, calc(var(--A) * 12), calc((.6 - var(--A)) * 12)), min(1, calc((var(--D) - .7) * 12), calc((.97 - var(--p)) * 40)));
  --hlPc:max(min(1, calc((var(--A) - .7) * 12), calc((var(--mo-dg-s1) - var(--p)) * 60)), min(1, calc(var(--R) * 12), calc((1 - var(--R)) * 12)));
  --hlRep:min(1, calc(var(--R) * 12), calc((var(--mo-dg-d0) + .02 - var(--p)) * 60));
}
.mo-dg .mo__stage,.mo-dg .mo__foot{opacity:var(--O)}
.mo-dg .mo__steps li:nth-child(1){--f:var(--A)}
.mo-dg .mo__steps li:nth-child(2){--f:var(--S)}
.mo-dg .mo__steps li:nth-child(3){--f:var(--R)}
.mo-dg .mo__steps li:nth-child(4){--f:var(--D)}

/* あなたの札・報告書の札 */
.mv-pill--owner{--hl:var(--hlOwner)}
.mv-pill--rep{--hl:var(--hlRep);opacity:calc(clamp(0, calc((var(--p) - var(--mo-dg-s0)) * 40), 1) * clamp(0, calc((.4 - var(--D)) * 5), 1))}
.mo-dg .mv-pill--pc{--hl:var(--hlPc)}
.dg-owner-check{--c:clamp(0, calc((var(--D) - .85) / .15), 1)}

/* 封筒：あなた → ノートPC（道は move.py の walk_vars と同じ10区間） */
.dg-path{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round;stroke-dashoffset:calc(var(--p) * -1400);
  opacity:min(clamp(0, calc(var(--A) * 20), 1), clamp(0, calc((1 - var(--A)) * 10), 1))}
.dg-env{
  --e:clamp(0, calc((var(--A) - .1) / .7), 1);
  --k:calc(var(--e) * 10);
  transform:translate(calc((var(--wx0) + var(--wdx1) * clamp(0, calc(var(--k) - 0), 1) + var(--wdx2) * clamp(0, calc(var(--k) - 1), 1) + var(--wdx3) * clamp(0, calc(var(--k) - 2), 1) + var(--wdx4) * clamp(0, calc(var(--k) - 3), 1) + var(--wdx5) * clamp(0, calc(var(--k) - 4), 1) + var(--wdx6) * clamp(0, calc(var(--k) - 5), 1) + var(--wdx7) * clamp(0, calc(var(--k) - 6), 1) + var(--wdx8) * clamp(0, calc(var(--k) - 7), 1) + var(--wdx9) * clamp(0, calc(var(--k) - 8), 1) + var(--wdx10) * clamp(0, calc(var(--k) - 9), 1)) * 1px),
                      calc((var(--wy0) + var(--wdy1) * clamp(0, calc(var(--k) - 0), 1) + var(--wdy2) * clamp(0, calc(var(--k) - 1), 1) + var(--wdy3) * clamp(0, calc(var(--k) - 2), 1) + var(--wdy4) * clamp(0, calc(var(--k) - 3), 1) + var(--wdy5) * clamp(0, calc(var(--k) - 4), 1) + var(--wdy6) * clamp(0, calc(var(--k) - 5), 1) + var(--wdy7) * clamp(0, calc(var(--k) - 6), 1) + var(--wdy8) * clamp(0, calc(var(--k) - 7), 1) + var(--wdy9) * clamp(0, calc(var(--k) - 8), 1) + var(--wdy10) * clamp(0, calc(var(--k) - 9), 1)) * 1px));
  opacity:calc(clamp(0, calc(var(--A) * 30), 1) * clamp(0, calc((1 - var(--e)) * 25), 1));
}
.dg-env-in rect{fill:#fff;stroke:var(--iso-line);stroke-width:1.6}
.dg-env-in path{fill:none;stroke:var(--iso-line);stroke-width:1.4;stroke-linejoin:round}

/* あなたのサイトの札：最初は無色、PHP の版を見たら赤に裏返る */
.plate--plain rect{fill:#F3EFE7;stroke:var(--iso-line)}
.plate--plain text{fill:var(--ink)}
.dg-site .plate{transform-box:fill-box;transform-origin:center}
.dg-site{--Pf:clamp(0, calc((var(--p) - var(--at4) + .01) / .02), 1)}
.dg-site .plate--plain{transform:scaleY(clamp(0, calc(1 - 2 * var(--Pf)), 1))}
.dg-site .plate--bad{transform:scaleY(clamp(0, calc(2 * var(--Pf) - 1), 1))}
.srv-dg-led{fill:var(--sage)}

/* 8Peak の指示（調べ始める時） */
.dg-cmd{opacity:min(clamp(0, calc((var(--p) - var(--mo-dg-s0)) * 40), 1), clamp(0, calc((var(--mo-dg-s1) + .02 - var(--p)) * 40), 1))}

/* 虫めがね */
.dg-lens{
  transform:translate(calc((var(--lx0) + var(--ldx1) * var(--m1) + var(--ldx2) * var(--m2) + var(--ldx3) * var(--m3) + var(--ldx4) * var(--m4) + var(--ldx5) * var(--m5) + var(--ldx6) * var(--m6) + var(--ldx7) * var(--m7) + var(--ldx8) * var(--m8) + var(--ldx9) * var(--m9)) * 1px),
                      calc((var(--ly0) + var(--ldy1) * var(--m1) + var(--ldy2) * var(--m2) + var(--ldy3) * var(--m3) + var(--ldy4) * var(--m4) + var(--ldy5) * var(--m5) + var(--ldy6) * var(--m6) + var(--ldy7) * var(--m7) + var(--ldy8) * var(--m8) + var(--ldy9) * var(--m9)) * 1px));
  opacity:min(clamp(0, calc((var(--p) - var(--mo-dg-s0) - .015) * 40), 1), clamp(0, calc((var(--mo-dg-r0) + .01 - var(--p)) * 40), 1));
}
/* 移っている間は少しだけ大きくなる */
.dg-lens-in{transform:scale(calc(1 + .12 * (var(--u1) - var(--m1) + var(--u2) - var(--m2) + var(--u3) - var(--m3) + var(--u4) - var(--m4) + var(--u5) - var(--m5) + var(--u6) - var(--m6) + var(--u7) - var(--m7) + var(--u8) - var(--m8) + var(--u9) - var(--m9))))}
.dg-lens-glass{fill:color-mix(in srgb,#fff 35%,transparent);stroke:none}
.dg-lens-ring{fill:none;stroke:var(--iso-line);stroke-width:5}
.dg-lens-handle{stroke:var(--green);stroke-width:11;stroke-linecap:round}
.dg-lens-shine{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.9}

/* 結果の札：K 番目が --atK で弾むように出る。6番目までは「さらに」が出たら、追加分の3つはまとめるで消える（報告書に書き込み済み） */
.dg-tag,.dg-lead{
  --t:clamp(0, calc((var(--p) - var(--at1)) / .012), 1);
  --gone:clamp(0, calc((var(--p) - var(--mo-dg-v0)) / .02), 1);
}
.dg-tag[style*="--k:2"],.dg-lead[style*="--k:2"]{--t:clamp(0, calc((var(--p) - var(--at2)) / .012), 1)}
.dg-tag[style*="--k:3"],.dg-lead[style*="--k:3"]{--t:clamp(0, calc((var(--p) - var(--at3)) / .012), 1)}
.dg-tag[style*="--k:4"],.dg-lead[style*="--k:4"]{--t:clamp(0, calc((var(--p) - var(--at4)) / .012), 1)}
.dg-tag[style*="--k:5"],.dg-lead[style*="--k:5"]{--t:clamp(0, calc((var(--p) - var(--at5)) / .012), 1)}
.dg-tag[style*="--k:6"],.dg-lead[style*="--k:6"]{--t:clamp(0, calc((var(--p) - var(--at6)) / .012), 1)}
.dg-tag[style*="--k:7"],.dg-lead[style*="--k:7"]{--t:clamp(0, calc((var(--p) - var(--at7)) / .012), 1)}
.dg-tag[style*="--k:8"],.dg-lead[style*="--k:8"]{--t:clamp(0, calc((var(--p) - var(--at8)) / .012), 1)}
.dg-tag[style*="--k:9"],.dg-lead[style*="--k:9"]{--t:clamp(0, calc((var(--p) - var(--at9)) / .012), 1)}
.dg-tag[style*="--k:7"],.dg-lead[style*="--k:7"],.dg-tag[style*="--k:8"],.dg-lead[style*="--k:8"],.dg-tag[style*="--k:9"],.dg-lead[style*="--k:9"]{--gone:clamp(0, calc((var(--p) - var(--mo-dg-r0)) / .03), 1)}
.dg-tag{transform-box:fill-box;transform-origin:center;opacity:calc(var(--t) * (1 - var(--gone)));transform:scale(calc(.6 + .4 * var(--t)))}
.dg-lead{fill:none;stroke:var(--iso-line);stroke-width:1.2;stroke-dasharray:2 3;opacity:calc(var(--t) * (1 - var(--gone)) * .7)}
.dg-tag .mv-pill rect{stroke-width:1.4}
.dg-tag--ok .mv-pill rect{fill:#EEF4EF;stroke:var(--green)}
.dg-tag--bad .mv-pill rect{fill:var(--mo-bad-bg);stroke:var(--mo-bad)}
.dg-tag--bad .mv-pill text{fill:var(--mo-bad-ink)}
.dg-tag--info .mv-pill rect{fill:#fff;stroke:var(--line)}
.dg-ic--ok{fill:var(--green)}
.dg-ic--bad{fill:var(--mo-bad)}
.dg-ic--info{fill:var(--sage)}
.dg-ic-mark{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* 報告書：調べ始めると下からせり上がり、結果が1行ずつ入る。まとめるで「次にやること」が入り、お渡しで飛んでいく */
.dg-report{
  --rise:clamp(0, calc((var(--p) - var(--mo-dg-s0)) / .03), 1);
  --go:calc(var(--D) * var(--D) * (3 - 2 * var(--D)));
  transform:translate(calc(var(--rdx) * var(--go) * 1px), calc((var(--rdy) * var(--go) - 160 * var(--go) * (1 - var(--go))) * 1px));
  opacity:calc(var(--rise) * clamp(0, calc((1 - var(--D)) / .12), 1));
}
.dg-report-in{transform-box:fill-box;transform-origin:center;transform:translateY(calc((1 - var(--rise)) * 26px)) scale(calc(1 - .75 * var(--go)))}
.rep-l,.rep-r{fill:#E4DED2}
.rep-top{fill:#fff}
.rep-face{fill:#fff;stroke:var(--iso-line);stroke-width:var(--iso-stroke);vector-effect:non-scaling-stroke}
.rep-head{fill:#F3EFE7}
.rep-title{font-family:var(--font-serif)!important;font-weight:600;font-size:14px;fill:var(--ink)}
.rep-label{font-size:11.5px;fill:var(--ink-2)}
.rep-value{font-size:11.5px;font-weight:700;fill:var(--ink);text-anchor:end}
.rep-value--bad{fill:var(--mo-bad-ink)}
.rep-value--ok{fill:var(--green)}
.rep-rule{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.rep-row{opacity:clamp(0, calc((var(--p) - var(--at1) - .004) / .01), 1)}
.rep-row[style*="--k:2"]{opacity:clamp(0, calc((var(--p) - var(--at2) - .004) / .01), 1)}
.rep-row[style*="--k:3"]{opacity:clamp(0, calc((var(--p) - var(--at3) - .004) / .01), 1)}
.rep-row[style*="--k:4"]{opacity:clamp(0, calc((var(--p) - var(--at4) - .004) / .01), 1)}
.rep-row[style*="--k:5"]{opacity:clamp(0, calc((var(--p) - var(--at5) - .004) / .01), 1)}
.rep-row[style*="--k:6"]{opacity:clamp(0, calc((var(--p) - var(--at6) - .004) / .01), 1)}
.rep-row[style*="--k:7"]{opacity:clamp(0, calc((var(--p) - var(--at7) - .004) / .01), 1)}
.rep-row[style*="--k:8"]{opacity:clamp(0, calc((var(--p) - var(--at8) - .004) / .01), 1)}
.rep-row[style*="--k:9"]{opacity:clamp(0, calc((var(--p) - var(--at9) - .004) / .01), 1)}
.rep-sub{font-size:10px;font-weight:700;fill:var(--green);letter-spacing:.06em;opacity:var(--V)}
.rep-next{opacity:clamp(0, calc((var(--R) - .35) / .25), 1)}
.rep-next rect{fill:var(--mo-bad-bg);stroke:var(--mo-bad);stroke-width:1;vector-effect:non-scaling-stroke}
.rep-next-label{font-size:10px;fill:var(--mo-bad-ink);letter-spacing:.08em}
.rep-next-text{font-size:11px;font-weight:700;fill:var(--mo-bad-ink)}

/* VPS・クラウドの追加分：「さらに」の札、台の上にせり上がるメールと DNS の箱、台の側面の OS の札 */
.dg-callout{opacity:calc(var(--V) * (1 - clamp(0, calc((var(--p) - var(--mo-dg-r0)) / .03), 1)));transform:translateY(calc((1 - var(--V)) * 10px))}
.dg-callout .mv-pill rect{fill:var(--green);stroke:var(--green)}
.dg-callout .mv-pill text{fill:#fff}
.dg-box{--b:clamp(0, calc((var(--V) - .2 * var(--j, 0)) / .8), 1);opacity:clamp(0, calc(var(--b) * 3), 1);transform:translateY(calc((1 - var(--b) * (2 - var(--b))) * 30px))}
.dg-box--dns{--j:1}
.xbox-l{fill:var(--iso-new-l)}
.xbox-r{fill:var(--iso-new-r)}
.dg-box-ic{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dg-os{opacity:var(--V)}
.dg-os rect{fill:var(--green)}
.dg-os text{fill:#fff;text-anchor:middle;letter-spacing:.06em}

/* 狭い画面（スマホ）：カメラが寄る。
   01 あなたとノートPC → 02 調べている間は虫めがねを追いかける → 03 報告書 → 04 全体（報告書があなたへ）。
   虫めがねの点（--fx0 / --fdxK ほか、viewBox の中の割合）は diagnosis.py が svg の style に書く */
.mo-dg{
  --c1:clamp(0, calc((var(--p) - var(--mo-dg-s0)) / .02), 1);
  --c2:clamp(0, calc((var(--p) - var(--mo-dg-r0) + .005) / .02), 1);
  --c3:clamp(0, calc((var(--p) - var(--mo-dg-d0) + .005) / .02), 1);
}
.mo-dg .mv-svg{
  /* 調べている間の狙い（虫めがねと結果の札の中間。始点は虫めがねが出てくる場所） */
  --sx:calc(var(--fx0) + var(--fdx1) * var(--m1) + var(--fdx2) * var(--m2) + var(--fdx3) * var(--m3) + var(--fdx4) * var(--m4) + var(--fdx5) * var(--m5) + var(--fdx6) * var(--m6) + var(--fdx7) * var(--m7) + var(--fdx8) * var(--m8) + var(--fdx9) * var(--m9));
  --sy:calc(var(--fy0) + var(--fdy1) * var(--m1) + var(--fdy2) * var(--m2) + var(--fdy3) * var(--m3) + var(--fdy4) * var(--m4) + var(--fdy5) * var(--m5) + var(--fdy6) * var(--m6) + var(--fdy7) * var(--m7) + var(--fdy8) * var(--m8) + var(--fdy9) * var(--m9));
  /* 場面ごとの狙いと倍率。重み（1-c1）（c1-c2）（c2-c3）（c3）で混ぜる */
  --cz:calc(1.55 * (1 - var(--c1)) + 2.05 * (var(--c1) - var(--c2)) + 2 * (var(--c2) - var(--c3)) + 1.08 * var(--c3));
  --cxr:calc(.323 * (1 - var(--c1)) + var(--sx) * (var(--c1) - var(--c2)) + .75 * (var(--c2) - var(--c3)) + .463 * var(--c3));
  --cyr:calc(.5 * (1 - var(--c1)) + var(--sy) * (var(--c1) - var(--c2)) + .42 * (var(--c2) - var(--c3)) + .5 * var(--c3));
  /* 図の外が見えないよう、狙いを端で止める */
  --cx:clamp(calc(.5 / var(--cz)), var(--cxr), calc(1 - .5 / var(--cz)));
  --cy:clamp(min(.5, calc(.475 / (var(--ar) * var(--cz)))), var(--cyr), max(.5, calc(1 - .475 / (var(--ar) * var(--cz)))));
}
@container (max-width:560px){
  .mo-dg .mo__stage{position:relative;aspect-ratio:1 / .95;overflow:hidden}
  .mo-dg .mv-svg{
    position:absolute;left:0;top:0;width:calc(100% * var(--cz));max-width:none;
    transform:translate(calc(50cqw - var(--cx) * 100cqw * var(--cz)), calc(47.5cqw - var(--cy) * 100cqw * var(--cz) * var(--ar)));
  }
}

/* =====================================================================
   モーション：HTML化
   --L 洗い出す / --E 書き出す / --F フォームをつなぐ / --G 案内する / --C 片付ける / --Z 対象外の札。
   歩く人・道・指示の線・台の折りたたみは、お引越しの部品をそのまま使う（下で、お引越し側の名前に読み替えて渡す）
   ===================================================================== */
.mo-ht{
  --p:.9;
  --L:clamp(0, calc((var(--p) - var(--mo-ht-l0)) / var(--mo-ht-l)), 1);
  --E:clamp(0, calc((var(--p) - var(--mo-ht-e0)) / var(--mo-ht-e)), 1);
  --F:clamp(0, calc((var(--p) - var(--mo-ht-f0)) / var(--mo-ht-f)), 1);
  --G:clamp(0, calc((var(--p) - var(--mo-ht-g0)) / var(--mo-ht-g)), 1);
  --C:clamp(0, calc((var(--p) - var(--mo-ht-c0)) / var(--mo-ht-c)), 1);
  --Z:clamp(0, calc((var(--p) - var(--mo-ht-z0)) / var(--mo-ht-z)), 1);
  --O:min(clamp(0, calc(var(--p) / .015), 1), clamp(0, calc((1 - var(--p)) / .03), 1));
  /* 洗い出す：紙が扇に広がる */
  --Lf:clamp(0, calc((var(--L) - .25) / .55), 1);
  --eLf:calc(1 - (1 - var(--Lf)) * (1 - var(--Lf)) * (1 - var(--Lf)));
  /* 書き出す：HTML の台が降りる → 紙が1枚ずつ飛ぶ → 新しいサイトが組み上がる */
  --Eb:clamp(0, calc(var(--E) / .15), 1);
  --bEb:calc(1 + 2.70158 * (var(--Eb) - 1) * (var(--Eb) - 1) * (var(--Eb) - 1) + 1.70158 * (var(--Eb) - 1) * (var(--Eb) - 1));
  --Ew:clamp(0, calc((var(--E) - .8) / .2), 1);
  /* フォームをつなぐ */
  --Fm:clamp(0, calc((var(--F) - .25) / .5), 1);
  --eFm:calc(var(--Fm) * var(--Fm) * (3 - 2 * var(--Fm)));
  --Fl:clamp(0, calc((var(--F) - .7) / .2), 1);
  /* お引越しの部品に渡す名前 */
  --mo-mv-g0:var(--mo-ht-g0);
  --mo-mv-g:var(--mo-ht-g);
  --mo-mv-walk:8;
  --Mb:0;
  --Rm:1;
  --Gd:clamp(0, calc((var(--G) - .3) / .45), 1);
  --Gf:clamp(0, calc((var(--G) - .75) / .25), 1);
  --Cw:clamp(0, calc((var(--C) - .25) / .25), 1);
  --eCw:calc(var(--Cw) * var(--Cw));
  --Cs:clamp(0, calc((var(--C) - .5) / .35), 1);
  --eCs:calc(var(--Cs) * var(--Cs) * (3 - 2 * var(--Cs)));
  /* 「いま動いている人」の札 */
  --hlUsers:min(1, calc((var(--G) - .6) * 12), calc((.97 - var(--p)) * 40));
  --hlPc:max(min(1, calc(var(--L) * 12), calc((.3 - var(--L)) * 12)), min(1, calc(var(--E) * 12), calc((.3 - var(--E)) * 12)),
             min(1, calc(var(--F) * 12), calc((.3 - var(--F)) * 12)), min(1, calc(var(--G) * 12), calc((.5 - var(--G)) * 12)),
             min(1, calc(var(--C) * 12), calc((.3 - var(--C)) * 12)));
  --hlFsv:min(1, calc((var(--F) - .6) * 12), calc((1.4 - var(--F)) * 12));
}
.mo-ht .mo__stage,.mo-ht .mo__foot{opacity:var(--O)}
.mo-ht .mo__steps li:nth-child(1){--f:var(--L)}
.mo-ht .mo__steps li:nth-child(2){--f:var(--E)}
.mo-ht .mo__steps li:nth-child(3){--f:var(--F)}
.mo-ht .mo__steps li:nth-child(4){--f:var(--G)}
.mo-ht .mo__steps li:nth-child(5){--f:var(--C)}

/* 指示の線：場面ごと */
.ht-cmd--list{opacity:min(clamp(0, calc(var(--L) * 30), 1), clamp(0, calc((.3 - var(--L)) * 30), 1))}
.ht-cmd--export{opacity:min(clamp(0, calc(var(--E) * 30), 1), clamp(0, calc((.3 - var(--E)) * 30), 1))}
.ht-cmd--form{opacity:min(clamp(0, calc(var(--F) * 30), 1), clamp(0, calc((.3 - var(--F)) * 30), 1))}
.ht-cmd--route{opacity:min(clamp(0, calc((var(--G) - .03) * 20), 1), clamp(0, calc((.45 - var(--G)) * 20), 1))}
.ht-cmd--clean{opacity:min(clamp(0, calc(var(--C) * 30), 1), clamp(0, calc((.25 - var(--C)) * 30), 1))}

/* いまのサイト：画面とデータベースが倒れ、台が折りたたまれる（台は .mv-old-slab の動きを使う） */
.srv-ht-led{fill:color-mix(in srgb,var(--sage) calc(100% - 100% * var(--C)),var(--iso-r))}
.ht-old-win,.ht-old-db{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(1 - var(--eCw)));opacity:clamp(0, calc((1 - var(--Cw)) / .15), 1)}

/* HTML の台：上から降りてきて少し沈む */
.htm-l{fill:var(--iso-new-l)}
.htm-r{fill:var(--iso-new-r)}
.ht-base{opacity:clamp(0, calc(var(--Eb) * 5), 1);transform:translateY(calc((1 - var(--bEb)) * -90px))}
.ht-pill-new{opacity:clamp(0, calc(var(--Eb) * 3), 1)}

/* 新しいサイト：紙が届き終わると、下からせり上がって現れる。薄い台に合わせて画面を下げてある（--drop） */
.ht-new{transform:translateY(calc(var(--drop) * 1px));opacity:clamp(0, calc(var(--Ew) * 3), 1)}
.ht-new-in{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(.2 + .8 * var(--Ew)))}
.ht-new .iso-l{fill:var(--iso-new-l)}
.ht-new .iso-r{fill:var(--iso-new-r)}

/* ページの紙：扇に広がり（洗い出す）、1枚ずつ弧を描いて HTML の台へ（書き出す） */
.ht-page{
  --s:clamp(0, calc((var(--E) - .15 - var(--i) * .1) / .25), 1);
  --es:calc(var(--s) * var(--s) * (3 - 2 * var(--s)));
  transform:translate(calc((var(--fx) * var(--eLf) * (1 - var(--es)) + var(--tx) * var(--es)) * 1px),
                      calc((var(--fy) * var(--eLf) * (1 - var(--es)) + var(--ty) * var(--es) - 140 * var(--es) * (1 - var(--es))) * 1px));
  opacity:calc(clamp(0, calc(var(--Lf) * 6), 1) * clamp(0, calc((1 - var(--s)) / .12), 1));
}
.page-l,.page-r{fill:#E9E4D8}
.page-top{fill:#fff}
.page-face{fill:#fff;stroke:var(--iso-line);stroke-width:1.2;vector-effect:non-scaling-stroke}
.page-hero{fill:#EFE4D3}
.page-ln{fill:#E2DCCF}
.ht-count{opacity:calc(clamp(0, calc((var(--L) - .55) * 10), 1) * clamp(0, calc((.95 - var(--E)) * 10), 1))}
.ht-count .mv-pill rect{fill:var(--green);stroke:var(--green)}
.ht-count .mv-pill text{fill:#fff}

/* フォームサービス */
.fsv-l{fill:#E7ECF0}
.fsv-r{fill:#D3DCE3}
.fsv-ic{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fsv-bar{fill:color-mix(in srgb,var(--green) calc(100% * var(--Fl)),#D3DCE3)}
.ht-pill-fsv{--hl:var(--hlFsv)}
.ht-fsv-check{--c:clamp(0, calc((var(--F) - .88) / .12), 1)}

/* フォームの札：新しいサイトから抜け出して、フォームサービスへ。届いたら点線でつながる */
.ht-fcard{
  transform:translate(calc(var(--tx) * var(--eFm) * 1px), calc((var(--drop) + var(--ty) * var(--eFm) - 120 * var(--eFm) * (1 - var(--eFm))) * 1px));
  opacity:calc(clamp(0, calc((var(--F) - .2) * 30), 1) * clamp(0, calc((1 - var(--Fm)) / .1), 1));
}
.fcard-l,.fcard-r{fill:#DCE8DF}
.fcard-top{fill:#fff}
.fcard-face{fill:#fff;stroke:var(--green);stroke-width:1.4;vector-effect:non-scaling-stroke}
.fcard-ln{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.fcard-btn{fill:var(--green)}
.ht-link{fill:none;stroke:var(--green);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round;stroke-dashoffset:calc(var(--p) * -1400);opacity:calc(var(--Fl) * clamp(0, calc(var(--Ew) * 3), 1))}

/* 受付メールの封筒：新しいサイトのフォーム → フォームサービス → お客さん。
   道を16区間に分けた点（html.py の mail_vars）を --d（0〜1）でつなぐ。--mhalf より先（フォームサービスから先）は受付メールの色。
   お客さんが新しいサイトに流れ始めてから、3通がずれてくり返す */
.mo-ht{--mailOn:calc(var(--mo-ht-g0) + var(--mo-ht-g) * .85)}
.ht-mail{
  --d:mod(calc((var(--p) - var(--mailOn)) * 7 + var(--i) / 3), 1);
  --k:calc(var(--d) * 16);
  --back:clamp(0, calc((var(--d) - var(--mhalf)) * 40), 1);
  transform:translate(calc((var(--mx0) + var(--mdx1) * clamp(0, calc(var(--k) - 0), 1) + var(--mdx2) * clamp(0, calc(var(--k) - 1), 1) + var(--mdx3) * clamp(0, calc(var(--k) - 2), 1) + var(--mdx4) * clamp(0, calc(var(--k) - 3), 1) + var(--mdx5) * clamp(0, calc(var(--k) - 4), 1) + var(--mdx6) * clamp(0, calc(var(--k) - 5), 1) + var(--mdx7) * clamp(0, calc(var(--k) - 6), 1) + var(--mdx8) * clamp(0, calc(var(--k) - 7), 1) + var(--mdx9) * clamp(0, calc(var(--k) - 8), 1) + var(--mdx10) * clamp(0, calc(var(--k) - 9), 1) + var(--mdx11) * clamp(0, calc(var(--k) - 10), 1) + var(--mdx12) * clamp(0, calc(var(--k) - 11), 1) + var(--mdx13) * clamp(0, calc(var(--k) - 12), 1) + var(--mdx14) * clamp(0, calc(var(--k) - 13), 1) + var(--mdx15) * clamp(0, calc(var(--k) - 14), 1) + var(--mdx16) * clamp(0, calc(var(--k) - 15), 1)) * 1px),
                      calc((var(--my0) + var(--mdy1) * clamp(0, calc(var(--k) - 0), 1) + var(--mdy2) * clamp(0, calc(var(--k) - 1), 1) + var(--mdy3) * clamp(0, calc(var(--k) - 2), 1) + var(--mdy4) * clamp(0, calc(var(--k) - 3), 1) + var(--mdy5) * clamp(0, calc(var(--k) - 4), 1) + var(--mdy6) * clamp(0, calc(var(--k) - 5), 1) + var(--mdy7) * clamp(0, calc(var(--k) - 6), 1) + var(--mdy8) * clamp(0, calc(var(--k) - 7), 1) + var(--mdy9) * clamp(0, calc(var(--k) - 8), 1) + var(--mdy10) * clamp(0, calc(var(--k) - 9), 1) + var(--mdy11) * clamp(0, calc(var(--k) - 10), 1) + var(--mdy12) * clamp(0, calc(var(--k) - 11), 1) + var(--mdy13) * clamp(0, calc(var(--k) - 12), 1) + var(--mdy14) * clamp(0, calc(var(--k) - 13), 1) + var(--mdy15) * clamp(0, calc(var(--k) - 14), 1) + var(--mdy16) * clamp(0, calc(var(--k) - 15), 1)) * 1px));
  opacity:calc(clamp(0, calc((var(--p) - var(--mailOn) - var(--i) / 21) / .004), 1)
    * clamp(0, calc(var(--d) / .03), 1) * clamp(0, calc((1 - var(--d)) / .04), 1));
}
.ht-mail-in{transform:scale(calc(1 + .15 * var(--back)))}
.ht-mail-in rect{fill:color-mix(in srgb,#EEF4EF calc(100% * var(--back)),#fff);stroke:color-mix(in srgb,var(--green) calc(100% * var(--back)),var(--iso-line));stroke-width:1.6}
.ht-mail-in path{fill:none;stroke:color-mix(in srgb,var(--green) calc(100% * var(--back)),var(--iso-line));stroke-width:1.4;stroke-linejoin:round}
.ht-mail-path{fill:none;stroke:var(--sage);stroke-width:1.6;stroke-dasharray:2 8;stroke-linecap:round;stroke-dashoffset:calc(var(--p) * -1000);opacity:calc(.8 * clamp(0, calc((var(--p) - var(--mailOn) - .01) * 40), 1))}
.ht-mail-note{opacity:clamp(0, calc((var(--p) - var(--mailOn) - .02) * 40), 1)}
.ht-mail-note .mv-pill rect{fill:#EEF4EF;stroke:var(--green)}
.ht-mail-note .mv-pill text{fill:var(--green)}

/* 札 */
.mo-ht .mv-pill--pc{--hl:var(--hlPc)}
.ht-badge{opacity:var(--Z);transform:translateY(calc((1 - var(--Z)) * 12px))}
.ht-badge .mv-pill rect{fill:var(--green);stroke:var(--green)}
.ht-badge .mv-pill text{fill:#fff}

/* 狭い画面（スマホ）：場面ごとにカメラが寄る。
   01 いまのサイトとノートPC → 02 全体（紙が飛ぶ）→ 03 新しいサイトとフォームサービス → 04 全体 → 05 いまのサイトとノートPC → 対象外の札で全体 */
.mo-ht{
  --k1:clamp(0, calc((var(--p) - var(--mo-ht-e0) + .005) / .02), 1);
  --k2:clamp(0, calc((var(--p) - var(--mo-ht-f0) + .005) / .02), 1);
  --k3:clamp(0, calc((var(--p) - var(--mo-ht-g0) + .005) / .02), 1);
  --k4:clamp(0, calc((var(--p) - var(--mo-ht-c0) + .005) / .02), 1);
  --k5:clamp(0, calc((var(--p) - var(--mo-ht-z0) + .01) / .02), 1);
  --cx:calc(.3 + .2 * var(--k1) + .243 * var(--k2) - .293 * var(--k3) - .11 * var(--k4) + .16 * var(--k5));
  --cy:.5;
  --cz:calc(1.7 - .3 * var(--k1) + .55 * var(--k2) - .8 * var(--k3) + .65 * var(--k4) - .8 * var(--k5));
}
@container (max-width:560px){
  .mo-ht .mo__stage{position:relative;aspect-ratio:1 / .95;overflow:hidden}
  .mo-ht .mv-svg{
    position:absolute;left:0;top:0;width:calc(100% * var(--cz));max-width:none;
    transform:translate(calc(50cqw - var(--cx) * 100cqw * var(--cz)), calc(47.5cqw - var(--cy) * 100cqw * var(--cz) * var(--ar)));
  }
  .mo-ht .mo__steps--5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}
}

/* =====================================================================
   特設ページ（php/*.blade.php）
   ===================================================================== */
.ph-link{display:inline-block;font-size:.88rem;color:var(--green);border-bottom:1px solid var(--sage);padding-bottom:1px;transition:border-color var(--hover-dur) ease-out}
.ph-link:hover{border-bottom-color:var(--green)}

/* ---- 表紙（php/hero） ---- */
.ph-hero{padding-block:clamp(40px,8vw,96px) clamp(48px,8vw,96px)}
.ph-hero h1{font-size:clamp(1.9rem,5.6vw,3.3rem);line-height:1.42;margin-bottom:24px}
.ph-hero__lead{max-width:var(--measure);color:var(--ink-2);display:grid;gap:.8em;margin-bottom:28px}
.ph-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.ph-hero__facts{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:0 clamp(24px,5vw,56px);border-top:1px solid var(--line);padding-top:16px}
.ph-hero__facts dt{font-size:.75rem;letter-spacing:.12em;color:var(--green)}
.ph-hero__facts dd{font-family:var(--font-serif);font-size:clamp(1rem,2.2vw,1.2rem);font-variant-numeric:tabular-nums}
.ph-hero__asof{margin-top:14px;font-size:.78rem;color:var(--ink-2)}

/* ---- セルフチェック（php/check。判定は php.js） ---- */
.ph-check{padding-block:var(--sec-y);border-top:1px solid var(--line);background:#F2F4EC}
.chk{display:none;gap:28px;margin-top:36px;max-width:820px}
.js .chk{display:grid}
.chk__nojs{margin-top:24px}
.chk__nojs a{color:var(--green);border-bottom:1px solid var(--sage)}
.js .chk__nojs{display:none}
.chk__q{border:0;min-width:0}
.chk__q[hidden]{display:none}
.chk__q legend{display:flex;align-items:baseline;gap:12px;font-family:var(--font-serif);font-size:1.1rem;font-weight:600;margin-bottom:12px}
.chk__q legend span{font-family:var(--font-sans);font-size:.72rem;font-weight:400;letter-spacing:.14em;color:var(--sage);font-variant-numeric:tabular-nums}
.chk__hint{font-size:.8rem;color:var(--ink-2);margin:-4px 0 12px}
.chk__opts{display:flex;flex-wrap:wrap;gap:8px}
.chk__opts label{position:relative;cursor:pointer}
.chk__opts input{position:absolute;opacity:0;pointer-events:none}
.chk__opts span{
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--white);border:1px solid var(--line);font-size:.86rem;line-height:1.4;
  transition:border-color var(--hover-dur) ease-out,background-color var(--hover-dur) ease-out,color var(--hover-dur) ease-out;
}
.chk__opts label:hover span{border-color:var(--green)}
.chk__opts input:checked + span{background:var(--green);border-color:var(--green);color:#fff}
.chk__opts input:focus-visible + span{outline:2px solid var(--green);outline-offset:3px}

.chk__out{max-width:820px}
.res{margin-top:32px;padding:clamp(22px,3vw,32px);border-radius:var(--radius);background:var(--white);border:1px solid var(--line);border-left:4px solid var(--sage);display:grid;gap:10px;justify-items:start}
.res[hidden]{display:none}
.res--warn{border-left-color:var(--sand)}
.res--bad{border-left-color:var(--mo-bad)}
.res__tag{font-size:.75rem;letter-spacing:.12em;color:var(--green)}
.res--bad .res__tag{color:var(--mo-bad-ink)}
.res h3{font-size:clamp(1.15rem,2.4vw,1.4rem)}
.res p:not(.res__tag){font-size:.9rem;color:var(--ink-2);max-width:var(--measure)}
.res .btn{margin-top:6px;white-space:normal;text-align:center}
.res__plans{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.res__plans .btn{margin-top:0}

/* ---- なぜ防げないのか（php/why） ---- */
.ph-why{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.ph-why__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.ph-why__in p{max-width:var(--measure);margin-bottom:1em}
.ph-why__fig img{border-radius:var(--radius);border:1px solid var(--line)}

/* ---- プラン（php/plans）。タブで切り替え、モーションの下に、罫線で区切った説明の行を置く ---- */
.ph-plans{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.plan-list{margin-top:40px;border-top:1px solid var(--line)}
.plan{padding-block:clamp(28px,4vw,44px);border-bottom:1px solid var(--line);scroll-margin-top:88px}
.plan[hidden]{display:none}
.plan__motion{margin-bottom:clamp(24px,4vw,40px)}
.plan__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.5fr);gap:clamp(16px,3vw,44px)}

/* タブ：JS が動くときだけ出す。罫線の上に4つ並べ、選んでいるものは緑の線と白い面 */
.plan-tabs{display:none}
.js .plan-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:36px;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.js .ph-plans .plan-list{margin-top:0;border-top:0;overflow-x:clip;touch-action:pan-y pinch-zoom}  /* 横の動きはフリックの切り替えに使う（php.js） */
.js .ph-plans .plan{border-bottom:0;padding-top:clamp(24px,3.5vw,40px)}
.plan-tab{
  position:relative;display:grid;gap:4px;justify-items:start;text-align:left;
  padding:16px clamp(12px,1.6vw,20px) 18px;border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;
  border-radius:var(--radius) var(--radius) 0 0;
  transition:background-color var(--hover-dur) ease-out,color var(--hover-dur) ease-out;
}
.plan-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background-color var(--hover-dur) ease-out}
.plan-tab:hover{background:color-mix(in srgb,var(--white) 60%,transparent)}
.plan-tab:hover::after{background:var(--sage)}
.plan-tab[aria-selected="true"]{background:var(--white)}
.plan-tab[aria-selected="true"]::after{background:var(--green)}
.plan-tab__name{font-family:var(--font-serif);font-weight:600;font-size:clamp(.92rem,1.5vw,1.05rem);line-height:1.5}
.plan-tab__price{font-size:.8rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.plan-tab[aria-selected="true"] .plan-tab__price{color:var(--green)}
.plan-tab:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.plan h3{font-size:clamp(1.15rem,2.2vw,1.35rem);margin-bottom:8px}
.plan__for{font-size:.82rem;color:var(--ink-2);line-height:1.8}
.plan__price{font-family:var(--font-serif);font-size:clamp(1.25rem,2.6vw,1.6rem);color:var(--green);line-height:1.4;font-variant-numeric:tabular-nums}
.plan__price--list{display:grid;gap:10px;align-content:start}
.plan__price--list dt{font-family:var(--font-sans);font-size:.75rem;color:var(--ink-2);letter-spacing:.04em;word-break:keep-all}  /* 折り返すのは空白と <wbr> の所だけ */
.plan__price--list dd{font-size:clamp(1.05rem,2vw,1.25rem)}
.plan__body{display:grid;gap:.8em;justify-items:start}
.plan__body p{font-size:.88rem;color:var(--ink-2);line-height:1.9}
.plan__body .btn{margin-top:6px}
.ph-plans__tail{margin-top:20px;font-size:.83rem;color:var(--ink-2)}

/* ---- 進め方（php/flow）。トップの .flow を使う ---- */

/* ---- 記録（php/record） ---- */
.ph-record{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.ph-record__lead{max-width:var(--measure);color:var(--ink-2)}
.ph-quote{margin:clamp(28px,4vw,44px) 0;padding-left:clamp(18px,3vw,28px);border-left:2px solid var(--sage);max-width:36em}
.ph-quote p{font-family:var(--font-serif);font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:1.8}
.ph-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.8rem;color:var(--ink-2)}
.ph-quote cite a{border-bottom:1px solid var(--sage)}
.ph-quote cite a:hover{color:var(--green)}
.ph-posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,44px);border-top:1px solid var(--line)}
.ph-post{display:grid;gap:6px;align-content:start;padding:22px 0 26px;border-bottom:1px solid var(--line);transition:color var(--hover-dur) ease-out}
.ph-post:hover{color:var(--green)}
.ph-post__meta{display:flex;gap:12px;font-size:.75rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ph-post__meta span{color:var(--green)}
.ph-post__title{font-family:var(--font-serif);font-size:1rem;line-height:1.6}
.ph-post__excerpt{font-size:.82rem;color:var(--ink-2);line-height:1.8}

/* ---- よくある質問（php/faq） ---- */
.ph-faq{padding-block:var(--sec-y);border-top:1px solid var(--line)}
.ph-faq__in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;padding:20px 40px 20px 0;
  font-family:var(--font-serif);font-size:1rem;font-weight:600;line-height:1.6;
  transition:color var(--hover-dur) ease-out;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--green)}
.faq__item summary::before,.faq__item summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:1px;background:var(--green)}
.faq__item summary::after{transform:rotate(90deg);transition:transform var(--hover-dur) ease-out}
.faq__item[open] summary::after{transform:rotate(0)}
.faq__item p{font-size:.88rem;color:var(--ink-2);max-width:var(--measure);margin-bottom:.8em}
.faq__item p:last-child{margin-bottom:22px}

/* ---- お申し込み（php/apply）。見た目はトップのお問い合わせ（.contact / .form）をそのまま使う ---- */
.ph-apply{scroll-margin-top:72px}
.form__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* ---- レスポンシブ ---- */
@media (max-width:900px){
  .ph-why__in,.ph-faq__in{grid-template-columns:minmax(0,1fr)}
  .plan__row{grid-template-columns:minmax(0,1fr) auto}
  .plan__body{grid-column:1 / -1}
  .plan__price{text-align:right}
  .plan__price--list{text-align:left}
}
@media (max-width:560px){
  .ph-hero__facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .plan__row{grid-template-columns:minmax(0,1fr);gap:12px}
  .plan__price{text-align:left}
  /* タブは4つが一度に見えるよう、2列×2段の枠にする（横スクロールだと気づきにくいため）。選んでいる枠は白地に緑の線 */
  .js .plan-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border-bottom:0}
  .plan-tab{padding:12px 14px 13px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--white) 45%,transparent)}
  .plan-tab::after{left:-1px;right:-1px;bottom:-1px;height:3px;border-radius:0 0 var(--radius) var(--radius)}
  .plan-tab[aria-selected="true"]{border-color:var(--green)}
  .plan-tab__name{font-size:.88rem}
  .plan-tab__price{font-size:.76rem}
  .ph-posts{grid-template-columns:minmax(0,1fr)}
  .form__pair{grid-template-columns:minmax(0,1fr)}
}