/* ===== 動画の額 =====
   大きな会社のサイトで見る置き方に寄せる：
   ・題名の帯や録画マークのような「道具っぽいもの」は画面の外に出さない
   ・操作は、止めているときとカーソルを載せたときだけ、静かに現れる
   ・進み具合は画面のいちばん下のヘアラインだけ。いまの場面の頭から終わりまでを、幅いっぱいで流す（場面ごとに0から。K 2026-09-30）
   ・下に章を文字で並べる */
.vp{position:relative;width:100%;margin-inline:auto;padding:0;
  color:#e9eef8;font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif}
.vp.fm{max-width:min(1240px,calc((100svh - 210px) * 1.7778))}
.vp.fm .vp-head{display:none}
.vp.fm .vp-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:#05070e;line-height:normal;
  border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(3,6,14,.9),
    0 70px 130px -55px rgba(2,5,14,.95),0 24px 60px -34px rgba(2,5,14,.75)}
.vp-screen b,.vp-screen span,.vp-screen p,.vp-screen small,.vp-screen em,.vp-screen li{line-height:normal}
.vp.fm .vp-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;border-radius:inherit;
  background:radial-gradient(130% 100% at 50% 38%,transparent 56%,rgba(3,6,14,.44) 100%)}
/* いま何場面目か（画面の左上に小さく） */
.fm-chip{position:absolute;z-index:9;left:18px;top:16px;margin:0;display:flex;align-items:baseline;gap:8px;
  padding:5px 12px 6px;border-radius:99px;background:rgba(6,10,20,.5);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12)}
.fm-chip i{font-style:normal;font:600 10px/1 "Jost",sans-serif;letter-spacing:.18em;color:#88a6dc}
.fm-chip b{font-size:11px;font-weight:700;letter-spacing:.1em;color:#eaf0fb}
.fm-chip.in{animation:fmchip .5s cubic-bezier(.2,.9,.3,1)}
@keyframes fmchip{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* 字幕 */
.vp-sub{position:absolute;left:0;right:0;bottom:0;z-index:9;padding:44px 7% 26px;pointer-events:none;
  background:linear-gradient(transparent,rgba(4,7,16,.6) 52%,rgba(4,7,16,.88));text-align:center}
.vp-sub p{margin:0;display:inline-block;max-width:44em;font-size:clamp(13px,1.28vw,17px);line-height:1.6;
  font-weight:600;letter-spacing:.03em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.65);
  opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.9,.3,1)}
.vp-sub p.on{opacity:1;transform:none}
/* 操作（止めているときと、カーソルを載せたときだけ出る） */
.vp-ui{position:absolute;z-index:10;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;
  opacity:0;transform:translateY(5px);transition:opacity .28s ease,transform .28s ease}
.vp.fm:hover .vp-ui,.vp.fm.paused .vp-ui,.vp.fm:focus-within .vp-ui{opacity:1;transform:none}
.vp-btn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#e7eefb;
  background:rgba(8,12,24,.52);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  cursor:pointer;transition:.18s}
.vp-btn:hover{background:rgba(24,38,70,.72);border-color:rgba(255,255,255,.3)}
.vp-btn svg{width:13px;height:13px}
.vp-time{font:500 11px/1 "Jost",sans-serif;letter-spacing:.1em;color:#b9c8e4;
  padding:0 2px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.vp-ui .vp-cc{font-size:9.5px;letter-spacing:.16em;color:#9fb2d4;padding:3px 7px;border-radius:4px;
  border:1px solid rgba(255,255,255,.18)}
/* 進み具合：画面のいちばん下のヘアライン。いまの場面だけを幅いっぱいで流す（場面が変わると0から） */
.vp.fm .fm-meter{position:absolute;z-index:11;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14);cursor:pointer;
  border-radius:0 0 16px 16px;overflow:hidden;transition:height .18s ease,background .18s ease}
.vp.fm .fm-meter:hover{height:6px;background:rgba(255,255,255,.22)}
.vp.fm .fm-meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#5b8cf0,#a9c7ff);box-shadow:0 0 12px rgba(127,168,255,.55)}
/* ★この .vp-seg の規則は、いまは「編集機能の動画」（edit-demo.js の #vp-bar の区切り）にだけ当たっている。
   区切りを画面の下端いっぱいに重ね、いまの章の区切り（.on＝高さ8px）だけが見える＝章ごとに幅いっぱいで流れる見え方を作っている。
   K はこの見え方を基準にしている（2026-09-30）。消したり範囲を狭めたりすると、編集機能の動画の進み具合が変わる */
.vp-seg{position:absolute;z-index:11;left:0;right:0;bottom:0;display:flex;gap:2px;height:3px}
.vp-seg button{position:relative;height:100%;background:rgba(255,255,255,.14);cursor:pointer;
  overflow:hidden;transition:background .2s}
.vp-seg button:hover{background:rgba(255,255,255,.3)}
.vp-seg button i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#5b8cf0,#a9c7ff)}
.vp-seg button:first-child{border-bottom-left-radius:16px}
.vp-seg button:last-child{border-bottom-right-radius:16px}
/* 中央の再生ボタン */
.vp-big{position:absolute;left:50%;top:50%;z-index:12;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:rgba(8,13,26,.5);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.28);
  color:#fff;cursor:pointer;transition:.22s;opacity:0;pointer-events:none}
.vp-big.on{opacity:1;pointer-events:auto}
.vp-big:hover{transform:translate(-50%,-50%) scale(1.06);background:rgba(26,42,78,.7)}
.vp-big svg{width:24px;height:24px;margin-left:3px}
/* 下に並べる章（文字だけ） */
.vp-idx{display:flex;flex-wrap:wrap;gap:clamp(12px,2.6vw,40px);justify-content:center;margin-top:clamp(16px,1.9vw,26px)}
.vp-idx button{display:flex;align-items:baseline;gap:8px;padding:8px 2px 9px;cursor:pointer;
  border-top:1px solid transparent;transition:.22s}
.vp-idx i{font-style:normal;font:600 10px/1 "Jost",sans-serif;letter-spacing:.18em}
.vp-idx i{color:#61719a}
.vp-idx b{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:#7d8cae;transition:color .22s}
.vp-idx button:hover b{color:#c6d3ea}
.vp-idx button.on{border-top-color:#7ea4ee}
.vp-idx button.on i{color:#9dbcff}
.vp-idx button.on b{color:#f0f5ff}

/* ===================== 場面 ===================== */
.fm-stage{position:absolute;inset:0}
.fm-stage>section{position:absolute;inset:0;opacity:0;pointer-events:none}

/* --- 1 カタログ --- */
.fm-roll{position:absolute;inset:-7% -2%;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.fm-roll .c{overflow:hidden}
.fm-roll .t{display:grid;gap:14px;will-change:transform}
.fm-roll img{width:100%;aspect-ratio:1;display:block;border-radius:8px;object-fit:cover;box-shadow:0 18px 34px -20px rgba(0,0,0,.9);transition:opacity .7s ease,filter .7s ease,transform .7s cubic-bezier(.2,.9,.3,1)}
.fm-s1.dim .fm-roll img{opacity:.28;filter:saturate(.6) brightness(.8) blur(.6px)}
.fm-s1.dim .fm-roll img.pick{opacity:1;filter:none;transform:scale(1.05);box-shadow:0 30px 70px -22px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.5),0 0 60px 6px rgba(127,168,255,.35)}
.fm-ring{position:absolute;z-index:4;border-radius:12px;opacity:0;pointer-events:none;overflow:visible;box-shadow:0 0 0 2px #cfe0ff,0 0 0 8px rgba(127,168,255,.22),0 0 44px 8px rgba(127,168,255,.28)}
.fm-ring .shine{position:absolute;inset:0;border-radius:10px;overflow:hidden;pointer-events:none}
.fm-ring .shine::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);opacity:0}
.fm-ring.go .shine::after{animation:fmshine 1.1s .15s cubic-bezier(.3,.7,.3,1) both}
@keyframes fmshine{from{left:-60%;opacity:0}20%{opacity:1}to{left:120%;opacity:0}}
.fm-ring b{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#08101f;background:#fff;padding:6px 13px 6px 9px;border-radius:99px;box-shadow:0 12px 26px -10px rgba(0,0,0,.9)}
.fm-ring b .ck{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#2fae76;color:#fff}
.fm-ring b .ck svg{width:10px;height:10px}
.fm-ring.go b{animation:fmpop .5s .2s cubic-bezier(.2,1.4,.4,1) both}
@keyframes fmpop{from{opacity:0;transform:translate(-50%,8px) scale(.85)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.fm-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(60% 60% at 50% 50%,transparent 30%,rgba(5,8,16,.62) 100%)}

/* --- 2〜5 作成画面（ガラスの額・奥行き） --- */
.fm-app{position:absolute;inset:7.4% 3.2% 12.6%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto minmax(0,1fr);
  border-radius:14px;overflow:hidden;background:#f3f5f9;color:#0b1730;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 1px 0 rgba(255,255,255,.35) inset,0 46px 100px -40px rgba(0,0,0,.95),0 20px 40px -24px rgba(0,0,0,.8);
  transform:perspective(2000px) rotateX(1.6deg);transform-origin:50% 100%}
.fm-app::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 26%),linear-gradient(180deg,rgba(255,255,255,.18),transparent 12%)}
.fm-s2::before,.fm-s3::before,.fm-s4::before,.fm-s5::before{content:"";position:absolute;left:10%;right:10%;top:6%;bottom:10%;z-index:0;pointer-events:none;background:radial-gradient(60% 60% at 50% 45%,rgba(84,132,255,.34),transparent 70%),radial-gradient(40% 50% at 84% 70%,rgba(255,106,77,.18),transparent 70%);filter:blur(30px)}
.fm-bar{grid-column:1/-1;display:flex;align-items:center;gap:7px;height:34px;padding:0 13px;background:linear-gradient(180deg,#fff,#f6f8fb);border-bottom:1px solid rgba(11,23,48,.08);font-size:11.5px;color:#5b6786}
.fm-bar>i{width:8px;height:8px;border-radius:50%;background:#dfe4ee}
.fm-bar>i:nth-child(1){background:#ff5f56}.fm-bar>i:nth-child(2){background:#ffbd2e}.fm-bar>i:nth-child(3){background:#27c93f}
.fm-bar span{margin-left:6px;font-weight:700;color:#0b1730;letter-spacing:.02em}
.fm-bar em{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-style:normal;color:#2f7d5a;font-weight:700;font-size:11px}
.fm-bar em i{width:6px;height:6px;border-radius:50%;background:#2fae76;box-shadow:0 0 0 3px rgba(47,174,118,.22)}
.fm-l{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:14px 14px 12px;background:#fff;border-right:1px solid rgba(11,23,48,.07);overflow:hidden}
.fm-lh{margin:0 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#0b1730}
.fm-lh small{display:block;margin-top:3px;font-size:10.5px;font-weight:500;color:#6f7a94}
.fm-r{position:relative;min-width:0;min-height:0;background:#e6eaf2;display:flex;flex-direction:column}
.fm-rh{display:flex;align-items:center;gap:8px;padding:9px 13px;background:#fff;border-bottom:1px solid rgba(11,23,48,.07);font-size:11.5px;color:#5b6786}
.fm-rh b{font-size:12px;color:#0b1730;letter-spacing:.02em}
.fm-rh .pill{padding:2px 8px;border-radius:99px;background:#eef2f9;font-size:10px;font-weight:700;color:#4a5a7d}
.fm-rh em{margin-left:auto;font-style:normal;font-weight:700;color:#0b1730;font-size:11.5px;display:inline-flex;align-items:baseline;gap:3px}
.fm-rh em b{display:inline-block;font-size:14px;transform-origin:50% 60%}
.fm-rh em.pro i{font:700 9px/1 "Jost",sans-serif;letter-spacing:.14em;padding:3px 6px;border-radius:5px;background:#0b1730;color:#fff;margin-right:6px;font-style:normal}
.fm-scr{flex:1;min-height:0;overflow:hidden;position:relative;padding:11px}
.fm-page{display:grid;gap:9px;zoom:var(--z,1);width:364px;margin:0 auto}
.fm-page .row{position:relative;background:#fff;overflow:hidden;border-radius:3px;box-shadow:0 2px 10px -4px rgba(11,23,48,.35);
  display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.fm-page .row>*{min-height:0}
.fm-page .row::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;box-shadow:inset 0 0 0 0 transparent;transition:box-shadow .3s}
.fm-page .row.hot::after{box-shadow:inset 0 0 0 2px #2fae76}
.fm-page .row.act::after{box-shadow:inset 0 0 0 3px #2fae76,0 0 26px rgba(47,174,118,.35)}
/* 追加された段（K 2026-09-30：効果は左の部品ではなく、右の完成予想図の中の段に出す）
   段の場所が開いて入る（.enter → 0fr から 1fr）→ ぷくっと膨らむ（JS）→ 緑の枠がはっきり光って消える → 光の帯が走る。
   以前の光は段の内側に付けた影だったので、外へ広がる分が段の overflow:hidden で切れて弱く見えていた。外の光は段そのものの影で出す */
.fm-page .row.enter{grid-template-rows:0fr}
.fm-page .row.added{animation:fmadded 1.6s .3s cubic-bezier(.3,.7,.3,1) both}
@keyframes fmadded{0%{box-shadow:0 2px 10px -4px rgba(11,23,48,.35)}
  14%,64%{box-shadow:0 0 0 4px rgba(47,174,118,.3),0 0 22px 4px rgba(47,174,118,.5),0 2px 10px -4px rgba(11,23,48,.35)}
  100%{box-shadow:0 2px 10px -4px rgba(11,23,48,.35)}}
.fm-page .row.added::after{animation:fmring 1.6s .3s ease-out both}
@keyframes fmring{0%{box-shadow:inset 0 0 0 0 rgba(47,174,118,0)}14%,64%{box-shadow:inset 0 0 0 3px #2fae76}100%{box-shadow:inset 0 0 0 0 rgba(47,174,118,0)}}
.fm-page .row.added::before{content:"";position:absolute;z-index:4;top:0;bottom:0;left:-40%;width:35%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:fmsweep .9s .42s cubic-bezier(.3,.7,.3,1) both;pointer-events:none}
@keyframes fmsweep{from{left:-40%;opacity:0}15%{opacity:1}to{left:120%;opacity:0}}
.fm-plus{position:absolute;z-index:6;opacity:0;padding:5px 11px;border-radius:99px;background:#2fae76;color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.04em;box-shadow:0 10px 22px -8px rgba(47,174,118,.9),0 0 0 2px #fff;pointer-events:none;white-space:nowrap}
.fm-arr{position:absolute;top:50%;z-index:5;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transform:translateY(-50%);background:rgba(8,14,28,.72);color:#fff;opacity:0;transition:opacity .3s}
.fm-arr.l{left:10px}.fm-arr.r{right:10px}
.fm-arr svg{width:13px;height:13px}
.fm-info{position:absolute;left:50%;bottom:11px;z-index:5;transform:translateX(-50%);opacity:0;display:flex;align-items:center;gap:8px;padding:6px 13px;border-radius:99px;white-space:nowrap;background:rgba(8,14,28,.84);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;box-shadow:0 14px 30px -14px rgba(0,0,0,.9);transition:opacity .3s}
.fm-info b{color:#8ff0c4}
.fm-info .dots{display:inline-flex;gap:4px}.fm-info .dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3)}.fm-info .dots i.on{background:#8ff0c4}
.fm-info .n{display:inline-flex;align-items:center;gap:6px;padding:2px 4px;border-radius:99px;background:rgba(255,255,255,.12)}
.fm-info .n i{font-style:normal;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);font-size:12px;line-height:1}
.fm-info .n i.on{background:#2fae76}
.fm-cur{position:absolute;z-index:7;width:20px;height:20px;margin:-2px 0 0 -2px;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));transition:opacity .25s}
.fm-tap{position:absolute;z-index:6;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(120,165,255,.34);opacity:0;pointer-events:none}

/* 2：4問 → 部品カード（型3つ＋「ほかの型」） */
/* 見出しは作成画面と同じ「01 STRUCTURE／構成を決めます」（app.css の .eyebrow・.sec-h h2 を、動画の縮尺 約0.82倍で）。K 2026-09-30 */
.fm-sech{margin:2px 0 4px}
.fm-sech .eyebrow{display:inline-flex;align-items:center;gap:.6em;margin:0;font:600 9px/1 "Inter",sans-serif;letter-spacing:.18em;color:#2a56a6;text-transform:uppercase}
.fm-sech .eyebrow::before{content:"";width:15px;height:2px;border-radius:2px;background:#e0553c}
.fm-sech h2{margin:7px 0 0;font-family:var(--head,"Zen Kaku Gothic New"),sans-serif;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:.01em;color:#0b1730}
.fm-qs{display:grid;gap:9px;align-content:start;transition:opacity .35s,transform .35s}
.fm-qs.done{position:absolute;inset:14px;opacity:0;transform:translateY(-8px);pointer-events:none}
.fm-q{padding:9px 11px;border-radius:10px;background:#f7f9fc;border:1px solid rgba(11,23,48,.06)}
.fm-q b{display:block;font-size:11.5px;font-weight:700;color:#28344f;margin-bottom:6px}
.fm-q .opts{display:flex;flex-wrap:wrap;gap:5px}
.fm-q .opts span{padding:5px 9px;border-radius:99px;border:1px solid rgba(11,23,48,.14);background:#fff;font-size:10.5px;font-weight:600;color:#3a465f;transition:.25s}
.fm-q .opts span.on{color:#1d3f7f;border-color:#2a56a6;background:#eaf0fb;box-shadow:0 0 0 3px rgba(42,86,166,.14)}
/* 複数可の問いで最初に押したもの＝「主」（作成画面 app.css の .opt.main・.opt small と同じ。K 2026-10-01） */
.fm-q .opts span small{display:inline-block;margin-left:4px;padding:0 5px;border-radius:99px;background:#2a56a6;color:#fff;font-size:8.5px;font-weight:800;line-height:1.5;vertical-align:1px}
.fm-q.done{border-color:rgba(47,174,118,.35)}
.fm-ready{display:none;align-items:center;gap:8px;margin-top:2px;padding:9px 11px;border-radius:10px;background:#e6f6ee;color:#1f7a4f;font-size:11.5px;font-weight:700}
.fm-ready i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#2fae76;color:#fff}.fm-ready i svg{width:11px;height:11px}
.fm-ready.on{display:flex;animation:fmpopin .45s cubic-bezier(.2,1.2,.4,1) both}
@keyframes fmpopin{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.fm-parts{position:absolute;inset:14px 14px 12px;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;display:flex;flex-direction:column;min-height:0}
.fm-parts.in{opacity:1;transform:none}
.fm-plist{list-style:none;margin:0;padding:0 2px 8px 0;display:grid;gap:8px;overflow:hidden;flex:1;min-height:0;align-content:start}
.fm-pc{position:relative;padding:8px 9px 9px;border-radius:11px;background:#f7f9fc;border:1px solid rgba(11,23,48,.07);transition:background .3s,border-color .3s,box-shadow .3s,transform .25s}
/* 押しても部品カードの枠や大きさは変えない。選択ボタンが入るだけ（K 2026-09-30） */
.fm-pch{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.fm-pch b{font-size:11.5px;font-weight:800;color:#0b1730;letter-spacing:.01em}
.fm-pch em{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 6px;border-radius:99px;background:#fdeee9;color:#c0402a}
.fm-pch small{margin-left:auto;font-size:9.5px;font-weight:600;color:#8b95ad}
.tg{flex:none;width:28px;height:16px;border-radius:99px;background:#d7dde8;position:relative;transition:background .3s}
.tg i{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.on>.fm-pch .tg,.on>.tg{background:#2fae76}
.on>.fm-pch .tg i,.on>.tg i{transform:translateX(12px)}
.fm-pcv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.fm-pcv .v{position:relative;border-radius:6px;overflow:hidden;background:#fff;border:1.5px solid rgba(11,23,48,.08);transition:border-color .3s,box-shadow .3s}
.fm-pcv .v img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.fm-pcv .v.sel{border-color:#2a56a6;box-shadow:0 0 0 2px rgba(42,86,166,.18)}
.fm-pcv .v.sel::after{content:"";position:absolute;right:4px;top:4px;width:10px;height:10px;border-radius:50%;background:#2a56a6;box-shadow:0 0 0 2px #fff}
.fm-pcv .more{display:grid;place-content:center;justify-items:center;gap:1px;border-radius:6px;border:1.5px dashed rgba(11,23,48,.18);background:linear-gradient(135deg,#f7f9fc,#eef2f8);color:#4a5a7d;text-align:center;aspect-ratio:16/10}
.fm-pcv .more b{font:800 12px/1 "Inter",sans-serif;letter-spacing:-.02em}
.fm-pcv .more small{font-size:8.5px;font-weight:700;letter-spacing:.04em}
.fm-plist.mini{gap:6px}
.fm-plist.mini li{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:#fff;border:1px solid rgba(47,174,118,.32);font-size:11.5px;font-weight:700;color:#28344f}
.fm-plist.mini li b{font-weight:700}

/* 4：写真（K 2026-10-01 作り直し）。作成画面「04 PHOTOS」の見た目を、動画の縮尺で整えたもの。
   左で入れても右の完成予想図には入らない（作成画面と同じ）。入れるのは2枚だけ */
.fm-phs{flex:1;min-height:0;display:grid;gap:7px;align-content:start;overflow:hidden}
.fm-phtop{display:grid;gap:5px}
.fm-phlead{margin:0;font-size:9.5px;line-height:1.55;color:#5b6786}
.fm-phlead b{color:#0b1730}
.fm-phrow{display:flex;align-items:center;gap:12px}
.fm-phcnt{font-size:10px;color:#5b6786}
.fm-phcnt b{display:inline-block;font:800 13px/1 "Inter",sans-serif;color:#0b1730;transform-origin:50% 60%}
.fm-phbtn{justify-self:start;padding:5px 11px;border-radius:8px;background:#2a56a6;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.02em;box-shadow:0 6px 14px -8px rgba(42,86,166,.9)}
.fm-psec{padding:7px 8px 8px;border-radius:11px;background:#f7f9fc;border:1px solid rgba(11,23,48,.07)}
.fm-psh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.fm-psh img{width:40px;aspect-ratio:16/10;object-fit:cover;border-radius:4px;border:1px solid rgba(11,23,48,.1);background:#fff}
.fm-psh b{display:block;font-size:11.5px;font-weight:800;color:#0b1730;letter-spacing:.02em}
.fm-psh small{display:block;margin-top:1px;font-size:9.5px;color:#6f7a94}
.fm-pslots{display:grid;gap:6px}
.fm-pslots.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fm-pslot{position:relative;display:grid;gap:5px;align-content:start;padding:7px 8px 8px;border-radius:9px;border:1.5px dashed #e2b765;background:#fffaf1;transition:border-color .3s,background .3s}
.fm-pslots.n1 .fm-pslot{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);grid-template-rows:auto 1fr;column-gap:10px}
.fm-pslots.n1 .fm-pslot .pv{grid-column:2;grid-row:1/3;aspect-ratio:16/9}
.fm-pslots.n1 .fm-pslot .fb{align-self:end}
.fm-pslot .sl b{display:block;font-size:10px;font-weight:800;color:#0b1730;line-height:1.35}
.fm-pslot .sl small{display:block;margin-top:1px;font-size:8.5px;color:#8a6a2e}
.fm-pslot .pv{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#f6eedd}
.fm-pslot .pv .hint{padding:0 7px;font-size:8.5px;line-height:1.5;color:#9a7b45;text-align:center}
.fm-pslot .pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fm-pslot .fb{justify-self:start;padding:4px 9px;border-radius:6px;background:#0b1730;color:#fff;font-size:9px;font-weight:700;letter-spacing:.02em}
.fm-pslot.ok{border-style:solid;border-color:rgba(47,174,118,.6);background:#f2fbf6}
.fm-pslot.ok .fb{background:#fff;color:#0b1730;box-shadow:inset 0 0 0 1px rgba(11,23,48,.18)}
.fm-pslot.ok::after{content:"";position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:#2fae76 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/10px no-repeat;box-shadow:0 0 0 2px #fff}
/* 入れられなかった枠：「お届けまでに」の札（作成画面の「あとで」と同じ考え方。枠は空けたまま依頼できる） */
.fm-pslot .later{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-style:normal;white-space:nowrap;padding:3px 8px;border-radius:99px;background:#e0553c;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.04em;box-shadow:0 6px 14px -6px rgba(224,85,60,.9);opacity:0;pointer-events:none}
.fm-pslot.wait{border-color:#e98d6f;background:#fff5f1}
.fm-pslot.wait .pv{background:#fbe7df}
.fm-pslot.wait .pv .hint{opacity:.35}
.fm-pslot.wait .later{opacity:1}
/* お届けまでに用意する写真の案内（写真用意案内UI を、動画の縮尺で前に出したもの。文言は作成画面のとおり） */
.fm-guide{position:absolute;z-index:6;right:4.6%;top:11%;width:min(47%,580px);display:grid;gap:8px;padding:15px 17px 16px;border-radius:14px;background:#fff;color:#0b1730;opacity:0;
  box-shadow:0 0 0 1px rgba(11,23,48,.06),0 40px 90px -30px rgba(0,0,0,.9),0 16px 34px -20px rgba(0,0,0,.6)}
.fm-guide .gk{margin:0;font-size:14px;font-weight:800;letter-spacing:.04em}
.fm-guide .gd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 11px;border-radius:9px;background:#fdf6e6;border:1px solid #efd9a6}
.fm-guide .gd b{font-size:11.5px;font-weight:800}
.fm-guide .gd span{font-size:10px;color:#6f6a5c}
.fm-guide .gi{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid rgba(11,23,48,.1)}
.fm-guide .gt{margin:0;display:flex;align-items:baseline;gap:8px}
.fm-guide .gt b{font-size:12.5px;font-weight:800}
.fm-guide .gt em{font-style:normal;font-size:10.5px;color:#6f7a94}
.fm-guide .gw{margin:0 0 2px;font-size:10.5px;color:#28344f}
.fm-guide .gl{margin:0;display:grid;grid-template-columns:52px 1fr;gap:8px;font-size:10px;line-height:1.55;color:#28344f}
.fm-guide .gl span{font-weight:800;color:#6f7a94}
.fm-guide .gl.ng{color:#a2482c}.fm-guide .gl.ng span{color:#c0522f}
/* 「写真を選ぶ」で開く手元の写真の一覧（作成画面では端末の写真を選ぶ画面）。押した写真に青い輪 → 枠まで飛んで収まる。
   動きは位置と大きさだけで付ける（scale やぼかしを使うと写真と文字がにじむ） */
.fm-pick{position:absolute;z-index:6;left:0;top:0;width:252px;padding:10px 10px 11px;border-radius:12px;background:#fff;color:#0b1730;opacity:0;pointer-events:none;
  box-shadow:0 0 0 1px rgba(11,23,48,.08),0 28px 60px -22px rgba(0,0,0,.85),0 10px 24px -14px rgba(0,0,0,.55)}
.fm-pick p{margin:0 0 8px;display:flex;align-items:baseline;gap:8px}
.fm-pick p b{font-size:11.5px;font-weight:800}.fm-pick p span{font-size:9.5px;color:#6f7a94}
.fm-pick .pg{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.fm-pick .pg span{position:relative;display:block;border-radius:6px;overflow:hidden;aspect-ratio:1;box-shadow:0 0 0 1px rgba(11,23,48,.08);transition:box-shadow .2s}
.fm-pick .pg img{width:100%;height:100%;object-fit:cover;display:block}
.fm-pick .pg span.sel{box-shadow:0 0 0 3px #2a56a6}
.fm-pick .pg span.sel::after{content:"";position:absolute;right:4px;top:4px;width:15px;height:15px;border-radius:50%;background:#2a56a6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/9px no-repeat;box-shadow:0 0 0 2px #fff}
.fm-fly{position:absolute;z-index:6;object-fit:cover;border-radius:6px;box-shadow:0 22px 44px -16px rgba(0,0,0,.85),0 0 0 2px #fff;pointer-events:none}
/* スマホの前に敷く暗い幕（以前の blur の代わり） */
.fm-scrim{position:absolute;z-index:6;inset:0;background:radial-gradient(70% 80% at 50% 45%,rgba(5,8,16,.72),rgba(5,8,16,.9));opacity:0;pointer-events:none}
/* 納品後：アプリ（スマホ）。写真は SNS に投稿するのと同じ手つきで入る（枠を押す → 最近の写真から1枚 → 反映） */
.fm-phone{position:absolute;z-index:7;inset:5.5% 0 15%;display:flex;justify-content:center;opacity:0;pointer-events:none}
.fm-phone .pf{position:relative;height:100%;aspect-ratio:9/19;padding:7px;border-radius:34px;background:linear-gradient(160deg,#2a3245,#0b0f19 60%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 50px 100px -30px rgba(0,0,0,.95),0 20px 40px -20px rgba(0,0,0,.8)}
.fm-phone .scr{position:relative;height:100%;border-radius:27px;overflow:hidden;background:#f3f5f9;display:flex;flex-direction:column;color:#0b1730}
.fm-phone .scr::before{content:"";position:absolute;z-index:3;left:50%;top:6px;width:30%;height:14px;margin-left:-15%;border-radius:99px;background:#0b0f19}
.pa-top{flex:none;display:flex;align-items:center;gap:6px;padding:26px 10px 8px;background:#fff;border-bottom:1px solid rgba(11,23,48,.08);font-size:10px}
.pa-top img{border-radius:50%}
.pa-top b{font-size:11px;font-weight:800;letter-spacing:.02em}
.pa-top span{padding:2px 6px;border-radius:5px;background:#eef2f9;font-size:8.5px;color:#4a5a7d;font-weight:700}
.pa-top em{margin-left:auto;font-style:normal;padding:4px 9px;border-radius:7px;background:#2a56a6;color:#fff;font-size:9px;font-weight:800;transition:background .25s,box-shadow .25s}
.pa-top em.on{background:#2fae76;box-shadow:0 0 0 3px rgba(47,174,118,.25)}
.pa-site{flex:1;min-height:0;overflow:hidden;padding:8px;display:grid;gap:7px;align-content:start}
.pa-hero{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:#222}
.pa-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pa-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.6))}
.pa-hero p{position:absolute;z-index:1;left:9px;bottom:7px;margin:0;color:#fff}
.pa-hero b{font-family:"Shippori Mincho B1",serif;font-size:14px;letter-spacing:.08em;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.pa-h{margin:2px 0 0;font-size:10.5px;font-weight:800;letter-spacing:.08em}
.pa-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pa-c{display:grid;gap:3px}
.pa-c .im{position:relative;display:grid;place-content:center;justify-items:center;gap:1px;aspect-ratio:4/3;border-radius:7px;overflow:hidden;background:#f4f7fb;border:1.5px dashed #9fb6d8}
.pa-c .im i{font-style:normal;font-size:15px;line-height:1;color:#5d7fae}
.pa-c .im small{font-size:7.5px;font-weight:700;color:#5d7fae}
.pa-c .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pa-c:first-child .im,.pa-c.ok .im{border:0}
.pa-c .nm{font-size:8.5px;font-weight:700;color:#3a465f}
.pa-sheet{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:10px 9px 14px;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 -14px 30px -12px rgba(11,23,48,.45)}
.pa-sheet::before{content:"";display:block;width:30px;height:3px;margin:0 auto 8px;border-radius:99px;background:#d5dbe6}
.pa-sheet p{margin:0 0 7px;display:flex;align-items:baseline;gap:7px}
.pa-sheet p b{font-size:11px;font-weight:800}.pa-sheet p span{font-size:8.5px;color:#6f7a94}
.pa-roll{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.pa-roll img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:3px}
.pa-toast{position:absolute;z-index:5;left:0;right:0;top:64px;margin:0 auto;width:max-content;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 8px;border-radius:99px;background:rgba(11,18,32,.92);color:#fff;font-size:9.5px;font-weight:700;box-shadow:0 12px 26px -10px rgba(0,0,0,.8)}
.pa-toast i{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#2fae76}.pa-toast i svg{width:9px;height:9px}
/* 指（スマホの上ではカーソルの代わりに、触れた所に丸） */
.fm-touch{position:absolute;z-index:9;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.42);border:2px solid rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(0,0,0,.35);opacity:0;pointer-events:none}

/* 5：文章（K 2026-10-01 作り直し）。作成画面「③中身」の1問ずつの画面（情報入力UI）を、動画の縮尺で整えたもの。
   答えたそばから、右の完成予想図の行き先に入る（入った所が一度だけ黄色く光る） */
#fm-app5 .fm-l{background:#f3f5f9}
.fm-prog{display:flex;align-items:center;gap:10px;margin:0 0 9px;font-size:10.5px;color:#6f7a94}
.fm-prog .pc{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.fm-prog .pc em{font-style:normal}
.fm-prog .pc b{font-weight:800;color:#0b1730}
.fm-prog .pc i{font:600 10.5px/1 "Inter",sans-serif;font-style:normal;color:#0b1730}
.fm-prog .tr{flex:1;min-width:40px;height:5px;border-radius:3px;background:#dfe4ee;overflow:hidden}
.fm-prog .tr i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#2a56a6,#6f9cff)}
.fm-prog small{font-size:9.5px;white-space:nowrap}
.fm-qcard{flex:1;min-height:0;overflow:hidden;padding:13px 14px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(11,23,48,.06),0 12px 28px -18px rgba(11,23,48,.45);display:flex;flex-direction:column}
.fm-qcard .where{display:flex;align-items:center;gap:9px}
.fm-qcard .where img{width:58px;aspect-ratio:16/10;object-fit:cover;border-radius:5px;border:1px solid rgba(11,23,48,.12)}
.fm-qcard .where b{display:block;font-size:11px;font-weight:800;color:#0b1730}
.fm-qcard .where small{display:block;margin-top:2px;font-size:9.5px;color:#6f7a94}
.fm-qcard .dest{display:flex;align-items:flex-start;gap:6px;margin:10px 0 11px;padding:6px 9px;border-radius:7px;background:#eaf0fb;color:#2a56a6;font-size:9.5px;line-height:1.5}
.fm-qcard .dest svg{flex:none;width:11px;height:11px;margin-top:2px}
.fm-qcard h3{margin:0;font-size:15px;font-weight:800;line-height:1.45;letter-spacing:.01em;color:#0b1730}
.fm-qcard .help{margin:4px 0 0;font-size:10px;line-height:1.55;color:#6f7a94}
.fm-qcard .qin{margin-top:11px}
.fm-qcard .acts{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:6px}
.fm-qcard .acts .sp{flex:1}
.fm-qcard .b{padding:7px 14px;border-radius:8px;font-size:11px;font-weight:800;transition:transform .15s,background .15s}
.fm-qcard .b.line{background:#fff;box-shadow:inset 0 0 0 1.5px #d9dfea;color:#3a465f}
.fm-qcard .b.ghost{color:#6f7a94}
.fm-qcard .b.blue{padding:7px 18px;background:#2a56a6;color:#fff;box-shadow:0 8px 18px -10px rgba(42,86,166,.9)}
.fm-qcard .b.press{transform:scale(.94);background:#1d3f7f}
/* 入力欄。打った文字のうしろでカーソルが点滅する */
.fm-tin{position:relative;display:flex;align-items:center;min-width:0;min-height:36px;padding:0 12px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1.5px #d9dfea;font-size:13px;font-weight:600;color:#0b1730;transition:box-shadow .2s,background .2s,opacity .2s}
.fm-tin .ph{color:#a9b2c4;font-weight:500}
.fm-tin.has .ph{display:none}
.fm-tin .v{white-space:pre}
.fm-tin.focus{box-shadow:inset 0 0 0 1.5px #2a56a6,0 0 0 3px rgba(42,86,166,.16)}
.fm-tin.focus .v::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-.15em;background:#2a56a6;animation:fmcaret .9s steps(1) infinite}
.fm-tin.focus:not(.has) .ph{margin-left:2px}
@keyframes fmcaret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* 営業時間：型を先に選ぶ（毎日同じ／平日と土日祝で違う／曜日ごとに違う）。平日と土日祝で違うにすると、平日・土・日・祝の4行 */
.fm-hrs .rad{display:flex;flex-wrap:wrap;gap:6px}
.fm-hrs .r{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1.5px #d9dfea;font-size:10.5px;font-weight:700;color:#3a465f;transition:.2s}
.fm-hrs .r i{width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #b8c2d4;background:#fff;transition:.2s}
.fm-hrs .r.on{box-shadow:inset 0 0 0 1.5px #2a56a6,0 0 0 3px rgba(42,86,166,.12);background:#eef3fc;color:#1d3f7f}
.fm-hrs .r.on i{box-shadow:inset 0 0 0 3.5px #2a56a6}
.fm-hrs .tbl{display:grid;gap:6px;margin-top:9px}
.fm-hrs .hr{display:grid;grid-template-columns:30px minmax(0,1fr) 12px minmax(0,1fr) auto;align-items:center;gap:6px}
.fm-hrs .hr.x{display:none}.fm-hrs .hr.x.open{display:grid}
.fm-hrs .hr>b{font-size:11px;font-weight:800;color:#0b1730}
.fm-hrs .hr>i{font-style:normal;text-align:center;font-size:11px;color:#6f7a94}
.fm-hrs .fm-tin{min-height:28px;padding:0 10px;font-size:11.5px}
.fm-hrs .rest{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;color:#6f7a94;white-space:nowrap}
.fm-hrs .rest s{width:12px;height:12px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #b8c2d4;background:#fff center/9px no-repeat;transition:.2s}
.fm-hrs .rest.on{color:#1d3f7f}
.fm-hrs .rest.on s{box-shadow:none;background-color:#2a56a6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")}
.fm-hrs .hr.off .fm-tin{opacity:.4;background:#f3f5f9}
/* 選択肢（業種に合わせた「場面」） */
.fm-chips5{display:flex;flex-wrap:wrap;gap:6px}
.fm-chips5 span{padding:6px 11px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 1.5px #d9dfea;font-size:10.5px;font-weight:700;color:#3a465f;transition:background .2s,box-shadow .2s,color .2s}
.fm-chips5 span.on{background:#eef3fc;box-shadow:inset 0 0 0 1.5px #2a56a6;color:#1d3f7f}
.fm-rcap{margin:0;padding:8px 13px;background:#fff;border-top:1px solid rgba(11,23,48,.07);font-size:10.5px;font-weight:700;color:#5b6786}

/* 6：できあがり → 制作陣 → お届け → アプリ */
.fm-flow{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:clamp(12px,2vw,26px);align-items:stretch;padding:5.5% 5% 13%}
.fm-flow figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.fm-flow .tag{font:700 10px/1 "Jost","Zen Kaku Gothic New",sans-serif;letter-spacing:.24em;color:#7f97c4}
.fm-flow .win{flex:1;min-height:0;border-radius:10px;overflow:hidden;background:#e6eaf2;box-shadow:0 36px 76px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.12)}
.fm-flow .win .fm-scr{height:100%;padding:9px}
.fm-soon{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;border-radius:10px;border:1px dashed rgba(146,172,224,.45);background:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 9px,transparent 9px 18px),rgba(255,255,255,.035)}
.fm-soon b{font-size:13px;letter-spacing:.04em;color:#dbe5f7}.fm-soon span{font-size:11px;color:#8fa1c2}
.fm-flow figcaption{font-size:12px;font-weight:700;letter-spacing:.03em;color:#d3ddf0;line-height:1.5}
.fm-flow figcaption small{display:block;margin-top:4px;font-size:10.5px;font-weight:500;color:#8b9ab8;line-height:1.55}
.fm-f3,.fm-team{opacity:0;transform:translateX(18px);transition:opacity .6s cubic-bezier(.2,.9,.3,1),transform .6s cubic-bezier(.2,.9,.3,1)}
.fm-flow.team .fm-team,.fm-flow.deliver .fm-f3{opacity:1;transform:none}
.fm-team{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px)}
.fm-team .ar{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);color:#9dbcff;border:1px solid rgba(255,255,255,.14)}
.fm-team .ar svg{width:13px;height:13px}
.fm-team .crew{display:grid;justify-items:center;gap:6px;padding:16px 18px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);text-align:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.fm-team .faces{display:flex;gap:8px;margin:4px 0 2px}
.fm-team .faces i{display:grid;place-items:center;width:44px;height:52px;border-radius:12px;border:1.5px dashed rgba(157,188,255,.55);background:rgba(157,188,255,.08);color:rgba(157,188,255,.7)}
.fm-team .faces i svg{width:20px;height:20px}
.fm-team .crew b{font-size:12px;letter-spacing:.03em;color:#fff}
.fm-team .crew small{font-size:10px;line-height:1.55;color:#aab6d6}
.fm-team .days{margin-top:4px;padding:5px 11px;border-radius:99px;background:linear-gradient(135deg,#ff8466,#e8492c);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;box-shadow:0 10px 22px -10px rgba(232,73,44,.9)}
.fm-team .days b{font:800 15px/1 "Inter",sans-serif;margin-right:2px}
.fm-portal{position:absolute;inset:6% 6% 13%;opacity:0;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#eaedf2;color:#0b1730;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 46px 100px -40px rgba(0,0,0,.95);pointer-events:none}
.pt-top{display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;background:#fff;border-bottom:1px solid rgba(11,23,48,.08);font-size:11.5px;color:#6f7a94}
.pt-top .brand{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:#0b1730;letter-spacing:.02em}
.pt-top .pg{padding:5px 9px;border-radius:7px;font-weight:600}
.pt-top .pg:first-of-type{background:#eef2f9;color:#0b1730}
.pt-top .bell{position:relative;margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef2f9;color:#3a465f}
.pt-top .bell svg{width:15px;height:15px}
.pt-top .bell i{position:absolute;right:-2px;top:-2px;width:14px;height:14px;border-radius:50%;background:#e0553c;color:#fff;font:700 9px/14px "Inter",sans-serif;text-align:center;font-style:normal}
.pt-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
.pt-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(11,23,48,.05),0 10px 24px -18px rgba(11,23,48,.35);min-height:0;overflow:hidden}
.pt-card .k{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#6f7a94}
.pt-card b{font-size:16px;font-weight:800;line-height:1.5;color:#0b1730}
.pt-card small{font-size:12px;line-height:1.6;color:#6f7a94}
.pt-card .btn{margin-top:auto;align-self:flex-start;padding:9px 14px;border-radius:9px;background:#1d3f7f;color:#fff;font-size:12.5px;font-weight:700}
.pt-card .btn.one{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#2a56a6,#7c5cff)}
.pt-card .btn.one svg{width:14px;height:14px}
.pt-card.live b{display:inline-flex;align-items:center;gap:6px;color:#1f7a4f}
.pt-card.live .dot{width:10px;height:10px;border-radius:50%;background:#2fae76;box-shadow:0 0 0 4px rgba(47,174,118,.2)}
.pt-card.score b{font:800 44px/1 "Inter",sans-serif;letter-spacing:-.03em;color:#0b1730}
.pt-card.score b i{font:700 14px/1 "Inter",sans-serif;font-style:normal;color:#6f7a94;margin-left:2px}
.pt-card .pt-bar{height:9px;border-radius:99px;background:#eef2f9;overflow:hidden}
.pt-card .pt-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#2a56a6,#7c5cff)}
.pt-card.ai b span{font:800 34px/1 "Inter",sans-serif}
.pt-card.ai b i{font:700 14px/1 "Inter",sans-serif;font-style:normal;color:#6f7a94}
.pt-card .hm{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;height:64px;align-items:end;margin-top:auto}
.pt-card .hm i{display:block;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#ff9f80,#e0553c)}
.pt-card .hm i:nth-child(1){height:100%}.pt-card .hm i:nth-child(2){height:78%}.pt-card .hm i:nth-child(3){height:52%;background:linear-gradient(180deg,#8fabe3,#2a56a6)}.pt-card .hm i:nth-child(4){height:40%;background:linear-gradient(180deg,#8fabe3,#2a56a6)}.pt-card .hm i:nth-child(5){height:24%;background:linear-gradient(180deg,#8fabe3,#2a56a6)}
.pt-cap{margin:0;padding:10px 16px 12px;font-size:11.5px;color:#3a465f;text-align:center;background:#fff;border-top:1px solid rgba(11,23,48,.06)}
.pt-cap b{color:#0b1730}

@media(max-width:700px){
  /* スマホ：横長の額では作成画面が読めないので、縦長の額にして左右の欄を上下に重ねる */
  .vp.fm .vp-screen{aspect-ratio:9/13}
  .fm-chip{left:10px;top:10px;padding:4px 9px 5px}.fm-chip b{font-size:10px}
  .vp-sub{padding:30px 5% 18px}.vp-sub p{font-size:12px}
  /* 3列にする。外側の2列は消して、選ぶ一枚の列（3列目）が真ん中に来るようにする */
  .fm-roll{grid-template-columns:repeat(3,1fr);gap:9px;inset:-6% -3%}.fm-roll .t{gap:9px}.fm-roll .c:nth-child(1),.fm-roll .c:nth-child(5){display:none}
  .fm-app{inset:9.5% 3% 12%;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,.44fr) minmax(0,.56fr);transform:none;border-radius:10px}
  .fm-l{padding:9px 10px;border-right:0;border-bottom:1px solid rgba(11,23,48,.08)}
  .fm-lh{font-size:11px;margin-bottom:7px}.fm-lh small{font-size:9.5px;margin-top:2px}
  .fm-rh{padding:7px 10px}.fm-rh b{font-size:11px}.fm-rh .pill{font-size:9px}
  .fm-scr{padding:8px}
  .fm-qs{gap:6px}.fm-q{padding:6px 8px}.fm-q b{font-size:10px;margin-bottom:4px}.fm-q .opts span{font-size:9px;padding:3px 7px}
  .fm-sech{margin:0 0 2px}.fm-sech .eyebrow{font-size:7.5px}.fm-sech .eyebrow::before{width:11px}.fm-sech h2{margin-top:5px;font-size:13.5px}
  .fm-ready{font-size:10px;padding:6px 8px}
  .fm-parts{inset:9px 10px}
  .fm-plist{gap:6px}.fm-pc{padding:6px 7px 7px}.fm-pch{margin-bottom:5px}.fm-pch b{font-size:10px}.fm-pch em{font-size:8px}.fm-pch small{font-size:8.5px}
  .fm-pcv{gap:3px}.fm-pcv .more b{font-size:10px}.fm-pcv .more small{font-size:7.5px}
  .tg{width:24px;height:14px}.tg i{width:10px;height:10px}.on>.fm-pch .tg i,.on>.tg i{transform:translateX(10px)}
  .fm-plist.mini{grid-template-columns:1fr 1fr;gap:4px}.fm-plist.mini li{padding:5px 7px;font-size:9.5px;gap:6px}
  .fm-info{font-size:10px;padding:5px 10px;bottom:8px}
  .fm-flow{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:10% 5% 13%}
  .fm-f3{display:none}
  .fm-team{justify-content:center}.fm-team .ar:first-child{display:none}
  .fm-team .crew{padding:10px 12px;gap:4px}.fm-team .faces i{width:34px;height:40px}.fm-team .crew b{font-size:11px}.fm-team .crew small{font-size:9px}
  .fm-portal{inset:9.5% 3% 13%}
  .pt-top{height:34px;padding:0 10px;gap:8px;font-size:10px}.pt-top .pg{padding:4px 6px}
  .pt-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;padding:8px}
  .pt-card{padding:8px 9px;gap:3px}.pt-card .k{font-size:8.5px}.pt-card b{font-size:11px}.pt-card small{font-size:8.5px}.pt-card .btn{font-size:9px;padding:4px 7px}
  .pt-card.score b{font-size:20px}.pt-cap{font-size:10px;padding:7px 10px 8px}
  .vp-time{min-width:64px;font-size:10.5px}
}
@media(max-width:700px){
  /* 4（スマホ）：右の完成予想図には写真が入らない（作成画面と同じ）ので、狭い画面では左の写真の枠だけを大きく出す */
  #fm-app4{grid-template-rows:auto minmax(0,1fr)}
  #fm-app4 .fm-r{display:none}
  .fm-phs{gap:6px}.fm-phlead{font-size:9px}#fm-app4 .fm-sech .eyebrow{display:none}#fm-app4 .fm-sech h2{margin-top:0}
  .fm-phrow{gap:8px}.fm-phbtn{font-size:9px;padding:4px 8px}.fm-phcnt{font-size:9px}.fm-phcnt b{font-size:11px}
  .fm-psec{padding:6px 7px 7px}.fm-psh{margin-bottom:5px}.fm-psh img{width:34px}.fm-psh b{font-size:10px}.fm-psh small{display:none}
  .fm-pslots{gap:4px}.fm-pslot{padding:5px 6px 6px;gap:4px}.fm-pslot .sl b{font-size:8.5px}.fm-pslot .sl small{font-size:7.5px}
  .fm-pslot .pv .hint{font-size:7.5px;padding:0 4px}.fm-pslot .fb{font-size:8px;padding:3px 6px}.fm-pslot .later{font-size:7.5px;padding:2px 6px}
  .fm-pslots.n3 .fm-pslot .pv{aspect-ratio:2/1}.fm-pslots.n1 .fm-pslot{grid-template-columns:minmax(0,1fr) minmax(0,.5fr)}
  .fm-guide{left:4%;right:4%;width:auto;top:9.5%;bottom:13%;align-content:start;overflow:hidden;padding:11px 12px;gap:6px;border-radius:12px}
  .fm-guide .gk{font-size:12px}.fm-guide .gd{padding:6px 8px}.fm-guide .gd b{font-size:10px}.fm-guide .gd span{font-size:9px}
  .fm-guide .gi{padding:8px 9px;gap:3px}.fm-guide .gt b{font-size:11px}.fm-guide .gw{font-size:9.5px}.fm-guide .gl{grid-template-columns:40px 1fr;gap:6px;font-size:9px}
  .fm-phone{inset:9% 0 14%}
  .fm-pick{width:196px;padding:8px 8px 9px}.fm-pick p b{font-size:10px}.fm-pick p span{font-size:8.5px}.fm-pick .pg{gap:4px}
  .pa-top{padding:24px 8px 7px;gap:4px}.pa-top b{font-size:10px;white-space:nowrap}.pa-top span{font-size:7.5px;white-space:nowrap}.pa-top em{font-size:8px;padding:3px 7px;white-space:nowrap}
  /* 5（スマホ）：問いの欄を広くとる。部品の札は省き、行き先・問い・答えを見せる */
  #fm-app5{grid-template-rows:auto minmax(0,.6fr) minmax(0,.4fr)}
  .fm-prog{gap:6px;margin-bottom:6px;font-size:9px}.fm-prog .pc i{font-size:9px}.fm-prog small{display:none}
  .fm-qcard{padding:9px 10px 9px}.fm-qcard .where{display:none}
  .fm-qcard .dest{display:none}
  .fm-qcard h3{font-size:12px}.fm-qcard .help{font-size:8.5px}.fm-qcard .qin{margin-top:7px}
  .fm-tin{min-height:30px;font-size:11.5px}
  .fm-hrs .rad{gap:4px}.fm-hrs .r{padding:4px 7px;font-size:8.5px;gap:4px}.fm-hrs .r i{width:9px;height:9px}
  .fm-hrs .tbl{gap:4px;margin-top:6px}.fm-hrs .hr{grid-template-columns:24px minmax(0,1fr) 10px minmax(0,1fr) auto;gap:4px}
  .fm-hrs .fm-tin{min-height:22px;font-size:9.5px;padding:0 7px}.fm-hrs .hr>b{font-size:9.5px}.fm-hrs .rest{font-size:8.5px}
  .fm-chips5{gap:4px}.fm-chips5 span{font-size:8.5px;padding:4px 8px}
  .fm-hrs .tbl{gap:3px}.fm-qcard .acts{padding-top:5px}.fm-qcard .b{font-size:9px;padding:5px 10px}.fm-qcard .b.blue{padding:5px 12px}
  .fm-rcap{display:none}
}
@media(prefers-reduced-motion:reduce){
  .vp-sub p{transition:none}.fm-roll .t{transform:none!important}
}

/* ===== 「お届けしたあとに写真を入れる」の短い動画 ===== */
.vp.ap{max-width:min(880px,100%)}
.ap-app{position:absolute;inset:4% 5% 12%;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;
  background:#f3f5f9;color:#0b1730;box-shadow:0 36px 80px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1)}
.ap-bar{flex:none;display:flex;align-items:center;gap:9px;height:34px;padding:0 12px;background:#fff;
  border-bottom:1px solid rgba(11,23,48,.08);font-size:11.5px;color:#5b6786}
.ap-bar b{font-size:12.5px;color:#0b1730}
.ap-bar span{padding:2px 7px;border-radius:5px;background:#eef2f9;font-size:10.5px}
.ap-bar em{margin-left:auto;font-style:normal;padding:5px 11px;border-radius:7px;background:#2f7fe8;color:#fff;
  font-size:11px;font-weight:700;transition:.25s}
.ap-bar em.on{background:#2fae76;box-shadow:0 0 0 4px rgba(47,174,118,.25)}
.ap-page{flex:1;min-height:0;overflow:hidden;padding:10px;display:grid;gap:9px;align-content:start;background:#e9edf4}
.ap-hero{position:relative;height:96px;border-radius:8px;overflow:hidden;background:#fff}
.ap-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ap-hero p{position:absolute;left:12px;bottom:10px;color:#fff;font-size:10px;letter-spacing:.14em;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.ap-hero p b{display:block;margin-top:2px;font-size:14px;letter-spacing:.02em}
.ap-sec{background:#fff;border-radius:8px;padding:9px 10px 10px}
.ap-h{font-size:11px;font-weight:700;letter-spacing:.06em;margin-bottom:7px}
.ap-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ap-c{display:grid;gap:4px}
.ap-c img,.ap-c .ap-slot{width:100%;aspect-ratio:3/2;border-radius:5px;object-fit:cover;display:block}
.ap-c span{font-size:9.5px;color:#5b6786}
.ap-g{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ap-g img,.ap-g .ap-slot{width:100%;aspect-ratio:1;border-radius:5px;object-fit:cover;display:block}
.ap-slot{display:grid;place-items:center;background:#f4f7fb;border:1.5px dashed #9fb6d8;
  animation:apblink 1.6s ease-in-out infinite}
.ap-slot b{font-size:9px;font-weight:700;color:#5d7fae;letter-spacing:.04em}
.ap-slot.filled{border:0;animation:none;padding:0}
.ap-slot.filled img{width:100%;height:100%;object-fit:cover;display:block;border-radius:5px}
@keyframes apblink{0%,100%{background:#f4f7fb}50%{background:#e4eefb}}
/* 端末の写真から選ぶ */
.ap-sheet,.ap-crop{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);width:min(74%,520px);
  padding:12px 14px 14px;border-radius:14px;background:#fff;color:#0b1730;opacity:0;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(11,23,48,.08)}
.ap-sh{display:flex;align-items:baseline;gap:8px;margin-bottom:9px;font-size:12.5px}
.ap-sh b{font-weight:700}
.ap-sh span{font:600 10px/1 "Jost",sans-serif;letter-spacing:.1em;color:#6f7a94;
  padding:3px 6px;border-radius:5px;background:#eef2f9}
.ap-roll{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ap-roll img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.ap-roll img:first-child{outline:2px solid #2f7fe8;outline-offset:1px}
.ap-cw{position:relative;height:130px;border-radius:8px;overflow:hidden;background:#10141d}
.ap-cw img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55}
.ap-cw i{position:absolute;left:8%;top:8%;right:8%;bottom:8%;outline:2px solid #fff;
  box-shadow:0 0 0 9999px rgba(10,14,22,.5)}
.ap-ok{display:inline-block;margin-top:10px;padding:8px 16px;border-radius:8px;background:#2f7fe8;color:#fff;
  font-size:12px;font-weight:700}
.ap-done{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;opacity:0;
  background:rgba(6,10,20,.78);backdrop-filter:blur(6px);text-align:center}
.ap-done b{font-size:clamp(15px,2vw,21px);letter-spacing:.04em;color:#fff}
.ap-done span{font-size:12px;color:#b9c8e4}
@media(max-width:640px){
  .ap-app{inset:3% 3.5% 14%}
  .ap-sheet,.ap-crop{width:88%;padding:10px 11px 12px}
  .ap-cw{height:96px}
}

/* ===== 場面3：セクション数の「− 数字 ＋」（K 2026-09-30）。作成画面の .stepper と同じ形（角8px・3つに区切る）。日本語は出さない =====
   完成予想図の部品の右上に置く（部品と一緒に拡大されるので、画面の大きさに合わせて大きくなる） */
.fm-page .row .fm-step{position:absolute;z-index:6;top:8px;right:8px;display:inline-flex;align-items:stretch;height:26px;border-radius:8px;overflow:hidden;
  background:#fff;box-shadow:0 0 0 1px rgba(11,23,48,.16),0 8px 20px -8px rgba(11,23,48,.55),0 2px 4px rgba(11,23,48,.12);
  font:600 13px/26px "Inter","Zen Kaku Gothic New",sans-serif;color:#0b1730;opacity:0;transform:translateY(-4px) scale(.96);transform-origin:100% 0;
  transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.fm-page .row .fm-step.on{opacity:1;transform:none}
.fm-step i{font-style:normal;display:grid;place-items:center;width:28px;font:500 16px/1 "Inter",sans-serif;color:#1d3f7f;background:#fff;transition:background .18s ease,transform .18s ease}
.fm-step b{position:relative;display:grid;place-items:center;min-width:32px;overflow:hidden;font-weight:700;border-left:1px solid rgba(11,23,48,.12);border-right:1px solid rgba(11,23,48,.12);font-variant-numeric:tabular-nums}
/* 数字は − ＋ と同じく縦の真ん中に（以前は上に寄っていた） */
.fm-step b span{display:block;line-height:1;text-align:center}
.fm-step i.press{background:#dfe9fb;transform:scale(.9)}
/* 押した瞬間：＋の周りに青い輪がひとつ広がる */
.fm-step i.plus{position:relative}
.fm-step i.plus::after{content:"";position:absolute;inset:3px;border-radius:6px;box-shadow:0 0 0 0 rgba(42,86,166,.55);opacity:0}
.fm-step i.plus.press::after{animation:fmstepring .6s ease-out}
@keyframes fmstepring{0%{opacity:1;box-shadow:0 0 0 0 rgba(42,86,166,.55)}100%{opacity:0;box-shadow:0 0 0 8px rgba(42,86,166,0)}}
@media(max-width:700px){.fm-page .row .fm-step{top:5px;right:5px}}

/* − ボタンにも押した輪の演出（K 2026-09-30「減らす」動作を追加） */
.fm-step i.minus{position:relative}
.fm-step i.minus::after{content:"";position:absolute;inset:3px;border-radius:6px;box-shadow:0 0 0 0 rgba(200,60,40,.5);opacity:0}
.fm-step i.minus.press::after{animation:fmstepringm .6s ease-out}
@keyframes fmstepringm{0%{opacity:1;box-shadow:0 0 0 0 rgba(200,60,40,.5)}100%{opacity:0;box-shadow:0 0 0 8px rgba(200,60,40,0)}}