/* 「できること」の図を、実物の写真と本物の画面でつなぐ形にしたもの（/guide/quest-app-port-v2/。scripts/export_port.py が元の .qa-flow と差し替える）。
   ユーザー「今の図解ではできることが分からない。使い方ガイドの2つ目の場面のように分かりやすく、ただしそのまま持ってくるのではなく、このページに合わせて」（2026-10-12）。
   左 Meta Quest 3（DMM VRプレイヤーで再生）→ 真ん中 AVScript Connector の「DMMに連動中」の画面 → 右 A10ピストンSA+PLUS。
   見えたら線が左から伸び、右に届くと A10ピストンSA+PLUS が動く（動きは port-flow.js。見本の作品の AVScript の通りに動く） */
.qg-app .pf{position:relative;margin:34px 0 0;padding:8px 0 0}
.pf-row{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;justify-items:center;column-gap:clamp(40px,7vw,110px)}
.pf figure{position:relative;margin:0;text-align:center}
.pf figcaption{margin-top:14px;line-height:1.5}
.pf figcaption b{display:block;font-size:16px;font-weight:700;color:var(--ink,#eeeff2)}
.pf figcaption span{display:block;margin-top:2px;font-size:14px;color:#a3a7b0}
.pf-q img{display:block;width:clamp(150px,19vw,240px);height:auto}
.pf-s img{display:block;width:clamp(140px,15vw,190px);height:auto;border-radius:14px;box-shadow:0 0 0 1px #2a2d34;transition:box-shadow .35s ease-out}
.pf-s.on img{box-shadow:0 0 0 2px #eeeff2}
.pf-dimg{position:relative;display:block;height:clamp(210px,23vw,290px);aspect-ratio:271/591;margin:0 auto}
.pf-dimg img{display:block;width:100%;height:100%}
/* A10ピストンSA+PLUS の窓の中の赤い光が上下する（使い方ガイドの2つ目の場面と同じ作り） */
.pf-win{position:absolute;left:49.1%;width:25%;top:60%;height:30%;transform:translateX(-50%);border-radius:999px;overflow:hidden;background:rgba(14,16,32,.9);box-shadow:inset 0 0 0 1.5px rgba(255,44,74,.9)}
.pf-win i{--p:.5;position:absolute;left:14%;right:14%;height:42%;top:calc(4% + (1 - var(--p)) * 50.4%);border-radius:999px;background:#ff2c4a;box-shadow:0 0 10px #ff2c4a}
/* 線: 左（Meta Quest 3 → 画面）は白、右（画面 → 機器）は機器の光と同じ赤。伸びきったら点が流れる */
.pf-ln{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pf-ln path{fill:none;stroke-width:3;stroke-linecap:round}
.pf-ln .a{stroke:rgba(238,239,242,.3)}
.pf-ln .b{stroke:rgba(255,44,74,.45)}
.pf-ln .f{stroke-width:5;stroke-dasharray:2 22;opacity:0;transition:opacity .2s}
.pf-ln .a.f{stroke:#eeeff2}
.pf-ln .b.f{stroke:#ff2c4a}
.pf-ln .t{font-size:13px;font-weight:700;fill:#ff6b80}
/* もう一度見る: 図を押すと最初から */
.pf-again{display:block;margin:18px auto 0;padding:8px 14px;border:0;background:none;color:#a3a7b0;font:inherit;font-size:13px;cursor:pointer;border-radius:8px}
.pf-again:hover{color:#eeeff2}
.pf-again:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* スマホ: 3つを横に並べると小さすぎるので、画面を上の真ん中、Meta Quest 3 を左下、A10ピストンSA+PLUS を右下に置く（使い方ガイドの2つ目の場面の縦長と同じ並び） */
@media (max-width:760px){
  .qg-app .pf{margin-top:26px;max-width:440px;margin-inline:auto}
  .pf-row{grid-template-columns:1fr 1fr;grid-template-areas:"s s" "q d";column-gap:12px;row-gap:0}
  .pf-s{grid-area:s;margin-bottom:-28px}
  .pf-q{grid-area:q;align-self:end}
  .pf-d{grid-area:d;align-self:end}
  .pf-q img{width:min(40vw,170px)}
  .pf-s img{width:min(40vw,170px)}
  .pf-dimg{height:min(46vw,200px)}
  .pf figcaption b{font-size:15px}
  .pf figcaption span{font-size:13px}
}
@media (max-width:390px){
  .pf figcaption b{font-size:14px}
  .pf figcaption span{font-size:12px;white-space:nowrap}  /* 「DMM VRプレイヤーで再生」を途中で折らない（列より少し広くても隣とは重ならない） */
  .pf-ln .t{font-size:12px}
  .pf-s{margin-bottom:0}  /* 狭いと A10ピストンSA+PLUS の上が画面の説明に重なるので、詰めない */
}

/* v3: Meta Quest 3 の上に、中で見ている動画を小さな画面で流す（下の小さな三角でヘッドセットとつなぐ）。A10ピストンSA+PLUS はこの動画に合わせて動く */
.pf-v{position:relative;display:block;width:clamp(170px,20vw,250px);margin:0 auto 14px;border-radius:10px;box-shadow:0 0 0 1px #2a2d34}
.pf-v video{display:block;width:100%;height:auto;aspect-ratio:1100/500;object-fit:cover;border-radius:10px;background:#16181d}
.pf-v::after{content:'';position:absolute;left:50%;top:100%;margin-left:-8px;border:8px solid transparent;border-top-color:#2a2d34}
.pf-has-v .pf-q img{width:clamp(130px,15vw,190px)}
@media (max-width:760px){
  .pf-v{width:min(42vw,180px);margin-bottom:10px}
  .pf-has-v .pf-q img{width:min(34vw,140px)}
  .pf-has-v .pf-s{margin-bottom:14px}  /* 動画の画面が、真ん中の画面の説明に近づきすぎないように */
}

/* PC版（.pf-pc）: 左は PC と VIVE Pro 2（黒い機器なので後ろに明るい灰色の面）、真ん中は横長の PC の画面 */
.pf-pc .pf-q>img{background:#eef0f3;border-radius:12px;padding:6px;box-sizing:border-box}
.pf-has-v.pf-pc .pf-q img{width:clamp(150px,17vw,220px)}
.pf-pc .pf-s img{width:clamp(220px,24vw,300px);border-radius:8px}
@media (max-width:760px){
  .pf-has-v.pf-pc .pf-q img{width:min(40vw,170px)}
  .pf-pc .pf-s img{width:min(80vw,320px)}
}
@media (max-width:760px){ .pf-pc .pf-ln .t{display:none} }  /* 横長の画面の右に置く場所がない（赤い線で分かる） */