/* =====================================================================
   受託者向けLP A-1 サービス画面の見せ方 2026-10-24
   参考ページ（マリオカート8 デラックスとは？）の型に合わせる
   - 画面は主張の「証拠」。主張1つに1〜2枚、まっすぐ・控えめな大きさで置く
   - 画面全体ではなく、主張を証明する部分だけを切り抜く
   - 札（.stamp）で「どこを見ればいいか」を言葉で指す
   - 傾けて流すのは、量を感じさせる列（.reel）だけ
   - 使う状況が大事な画面は、状況（依頼者の机のモニター）の中に置く
   ===================================================================== */

/* ---------- 証拠の画面 ---------- */
.proof {
  position: relative; margin: 0;
  border: 1px solid var(--gold-line); border-radius: 8px;
  background: #0b0c10;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.proof img { width: 100%; height: auto; border-radius: 7px; }
.band.paper .proof { border-color: rgba(43, 33, 18, .25); box-shadow: 0 14px 30px rgba(43, 33, 18, .25); }

/* 見る場所を指す札。札は飾りなので少しだけ傾ける（画面は傾けない） */
.stamp {
  position: absolute; z-index: 3; left: var(--sx, -10px); top: var(--sy, -16px);
  margin: 0; padding: 6px 12px; border-radius: 6px;
  background: var(--gold); color: #1a1206;
  font-weight: 900; font-size: clamp(12px, 1.05vw, 14px); line-height: 1.4;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5); white-space: nowrap; transform: rotate(-3deg);
}
.stamp.r { left: auto; right: var(--sx, -10px); transform: rotate(3deg); }
.stamp.b { top: auto; bottom: var(--sy, -16px); }
.band.paper .stamp { background: var(--red); color: #fff; }
.shot-note { display: block; margin-top: 12px; font-size: 12px; color: var(--ink-2); }
.band.paper .shot-note { color: #5a4a2e; }

/* ---------- FV: 査定ランク → 応募できる案件 ---------- */
.hero-stage .fv-rank { position: absolute; z-index: 3; left: -2%; top: 4%; width: 78%; --d: 10; }
.hero-stage .fv-terms { position: absolute; z-index: 3; left: 16%; top: 42%; width: 64%; --d: 16; }
.hero-stage .hs-chara { z-index: 2; right: -12%; width: 40%; }
.hero-stage .hs-line { z-index: 4; left: 62%; top: 26%; width: 12%; height: 30%; --d: 13; }

/* 量を感じさせる列（傾けたまま）。切り抜きは縦横比が違うので高さで揃える */
.hero .reel figure { width: auto; }
.hero .reel img { height: clamp(130px, 13vw, 190px); width: auto; aspect-ratio: auto; object-fit: contain; background: #0b0c10; }

/* ---------- 査定 ---------- */
.appraise-stage .ap-result { position: relative; z-index: 2; margin-left: 10%; }
.appraise-stage .chara { z-index: 3; left: -14%; bottom: -40%; width: 26%; }

/* ---------- ランク ---------- */
.rank-proof { position: relative; display: grid; gap: 0; }
.rank-proof .rk-main { width: 88%; z-index: 1; }
.rank-proof .rk-sub { width: 62%; margin: -3% 0 0 auto; z-index: 2; }
.rank-proof .chara { width: 30%; left: -14%; bottom: -12%; }

/* ---------- 依頼者の机：画面を状況の中に置く ---------- */
.monitor { position: relative; margin: 0 0 56px; padding: 12px 12px 16px; border-radius: 14px; background: linear-gradient(180deg, #2a2d35, #15171c); box-shadow: 0 24px 50px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.monitor img { width: 100%; height: auto; border-radius: 4px; }
.monitor::before { content: ""; position: absolute; left: 50%; bottom: -42px; width: 16%; height: 42px; translate: -50% 0; background: linear-gradient(180deg, #1c1f25, #2a2d35); clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.monitor::after { content: ""; position: absolute; left: 50%; bottom: -48px; width: 34%; height: 8px; translate: -50% 0; border-radius: 4px; background: #2a2d35; }
.monitor .stamp { --sx: 30%; --sy: 52%; }
.monitor-cap { position: absolute; z-index: 3; left: -4%; top: -22px; background: var(--red); color: #fff; font-weight: 900; font-size: 13px; padding: 6px 12px; border-radius: 4px; transform: rotate(-3deg); }
.card-stage .chara { width: 26%; right: -12%; top: auto; bottom: -18%; }

/* ---------- 成長の3時点 ---------- */
.timeline .proof { margin-bottom: 16px; }
.timeline .proof img { aspect-ratio: 5 / 2; object-fit: contain; background: #0b0c10; }

/* ---------- 案件 ---------- */
.quest-proof { position: relative; margin: 48px 0 0 auto; width: 86%; }
.quest-proof .chara { width: 22%; left: -24%; bottom: -30%; }

/* ---------- 条件 ---------- */
.cond:has(.pay-proof) { grid-template-columns: .85fr 1.35fr; }
.pay-proof { display: grid; gap: 16px; }
.pay-proof .proof:nth-child(2) { width: 52%; margin-left: auto; }
.cond .proof.char { width: 72%; margin-inline: auto; }

/* ---------- はじめ方 ---------- */
.begin-stage .proof.board { width: 82%; margin-left: auto; z-index: 2; }

@media (max-width: 900px) {
  .hero-stage .fv-rank { width: 76%; }
  .hero-stage .fv-terms { width: 60%; left: 18%; }
}
@media (max-width: 760px) {
  .rank-proof .chara, .quest-proof .chara { display: none; }
  .quest-proof { width: 100%; }
  .cond:has(.pay-proof) { grid-template-columns: 1fr; }
  .appraise-stage .ap-result { margin-left: 16%; }
  .pay-proof .proof:nth-child(2) { width: 72%; }
  .cond .proof.char { width: 86%; }
  .monitor { padding: 8px 8px 10px; }
  .card-stage .chara { width: 30%; right: -6%; bottom: -22%; }
}
@media (max-width: 640px) {
  .stamp { font-size: 11px; padding: 5px 9px; }
  .hero-stage .fv-rank { width: 82%; top: 4%; }
  .hero-stage .fv-terms { width: 66%; left: 12%; top: 42%; }
  .hero-stage .hs-line { left: 60%; top: 22%; }
}