/* ============================================================
   DEMO SHOWCASE (scoped under .demo-slot)
   段階ビルド演出: タイプライター → フェーズ表示(スピナー) → 1行ずつ出力
   色は globalforce.css の :root 変数(--blue/--sky/--navy 等)をそのまま使用
   ============================================================ */
.demo-slot{ display:block; background:#fff; min-height:0; place-items:initial; }
.dwin{ font-family:"Noto Sans JP", system-ui, sans-serif; color:var(--ink); }

/* ---- prompt row (typewriter) ---- */
.dprompt-row{ display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); }
.dai{ width:26px; height:26px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:var(--grad); color:#fff; font-family:"Inter",sans-serif; font-weight:800; font-size:12px; }
.dprompt{ font-size:15px; color:var(--ink); white-space:pre-wrap; }
.dcaret{ display:inline-block; width:2px; height:18px; background:var(--blue); margin-left:1px; vertical-align:-3px; opacity:0; }
.dwin.typing .dcaret{ opacity:1; animation:dblink 1s step-end infinite; }
@keyframes dblink{ 50%{ opacity:0; } }

/* ---- build log / phase status ---- */
.dlog{ display:flex; align-items:center; gap:9px; padding:9px 18px; border-bottom:1px solid var(--line-2);
  background:var(--bg-tint); min-height:38px; font-size:12.5px; color:var(--ink-3); font-weight:600; }
.dspin{ width:13px; height:13px; border-radius:50%; border:2px solid #c9dcff; border-top-color:var(--blue); opacity:0; flex:none; }
.dwin.building .dspin{ opacity:1; animation:dspin .7s linear infinite; }
@keyframes dspin{ to{ transform:rotate(360deg); } }
.dwin.building .dstatus{ color:var(--blue); }
.dwin.done .dlog{ color:#0a8f5b; }
.dwin.done .dspin{ opacity:1; border:none; position:relative; animation:none; background:#10b981; }
.dwin.done .dspin::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:9px; }
.dprog{ margin-left:auto; font-family:"Inter",sans-serif; font-size:11px; color:var(--ink-3); font-weight:700; letter-spacing:.02em; }

/* ---- generic line-by-line reveal ---- */
.dbody [data-li]{ opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.dbody [data-li].on{ opacity:1; transform:none; }

/* ============================================================
   DEMO A — 資料作成（実用品質スライドを1枚ずつ生成）
   ============================================================ */
.ddeck{ padding:18px; background:linear-gradient(180deg,#f7faff,#fff); display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.dslide{ aspect-ratio:16/10; background:#fff; border:1px solid var(--line); border-radius:9px; padding:11px 12px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.dslide .snum{ position:absolute; right:9px; bottom:7px; font-family:"Inter",sans-serif; font-size:7px; color:var(--ink-3); letter-spacing:.1em; }
.dslide .sbar{ height:4px; width:32px; border-radius:3px; background:var(--grad); margin-bottom:8px; }
.dslide .sh{ font-size:10px; font-weight:800; color:var(--ink); line-height:1.32; margin-bottom:4px; }
.dslide .sli{ font-size:7.5px; color:var(--ink-2); line-height:1.5; display:flex; gap:4px; margin-top:3px; }
.dslide .sli::before{ content:""; width:3px; height:3px; border-radius:50%; background:var(--sky); margin-top:4px; flex:none; }
.dslide .sli.num::before{ display:none; }
.dslide .sli .n{ font-family:"Inter",sans-serif; font-weight:800; color:var(--blue); font-size:7.5px; }
/* title slide */
.dslide.title{ background:var(--grad-cta); color:#fff; justify-content:center; }
.dslide.title .sbar{ background:rgba(255,255,255,.85); }
.dslide.title .sh{ color:#fff; font-size:12.5px; line-height:1.3; }
.dslide.title .ssub{ font-size:7.5px; color:rgba(255,255,255,.88); margin-top:4px; }
.dslide.title .sco{ font-family:"Inter",sans-serif; font-size:7px; color:rgba(255,255,255,.8); margin-top:auto; letter-spacing:.1em; }
/* chart slide */
.dchart{ display:flex; align-items:flex-end; gap:5px; height:40px; margin-top:auto; }
.dchart .bar{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--sky),var(--blue)); height:0; transition:height .8s cubic-bezier(.2,.7,.2,1); }
.dslide[data-li].on .dchart .bar{ height:var(--h); }
.dxlab{ display:flex; justify-content:space-between; font-size:6px; color:var(--ink-3); margin-top:3px; padding:0 1px; }
/* kpi slide */
.dslide.kpi{ justify-content:center; }
.dkpi{ font-family:"Inter",sans-serif; font-weight:800; font-size:27px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dslide.kpi .scap{ font-size:8px; color:var(--ink-2); margin-top:4px; }
.dslide.kpi .ssmall{ font-size:7px; color:var(--ink-3); margin-top:2px; }

/* ============================================================
   DEMO B — ホームページ作成（左ステップ→右で上から組み上げ）
   ============================================================ */
.dsiteSplit{ display:grid; grid-template-columns:212px 1fr; min-height:360px; }
.bsteps{ border-right:1px solid var(--line); padding:16px 14px; background:var(--bg-tint); font-size:12.5px; }
.bsteps .bstep{ display:flex; gap:9px; align-items:flex-start; padding:9px 0; color:var(--ink-3); }
.bsteps .bstep .bd{ width:18px; height:18px; border-radius:50%; border:2px solid #cdd9f2; flex:none; margin-top:1px;
  display:grid; place-items:center; font-size:9px; color:transparent; transition:all .35s; }
.bsteps .bstep.on{ color:var(--ink); }
.bsteps .bstep.on .bd{ background:#10b981; border-color:#10b981; color:#fff; }
.bbrowser{ padding:14px; background:#eef0f6; }
.bframe{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:var(--shadow-sm); }
.bbar{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:#f7f8fc; }
.bbar .burl{ flex:1; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:10.5px; color:var(--ink-3); padding:4px 12px; }
.bbar .bdots{ display:flex; gap:5px; }
.bbar .bdots i{ width:9px; height:9px; border-radius:50%; display:block; }
.bbar .bdots i:nth-child(1){ background:#ff5f57; } .bbar .bdots i:nth-child(2){ background:#febc2e; } .bbar .bdots i:nth-child(3){ background:#28c840; }
.cafe{ font-family:"Hiragino Mincho ProN","Yu Mincho",serif; min-height:250px; }
.cafe .cbar{ display:flex; align-items:center; padding:10px 18px; border-bottom:1px solid #efe9e0; background:#fffdf9; }
.cafe .cbar .clogo{ font-weight:800; color:#6f5436; font-size:15px; letter-spacing:.04em; }
.cafe .cbar .cmenu{ margin-left:auto; display:flex; gap:14px; font-size:11px; color:#8c7a64; align-items:center; }
.cafe .cbar .cmenu .cbk{ background:#6f5436; color:#fff; padding:5px 13px; border-radius:999px; font-size:11px; }
.cafe .chero{ position:relative; height:170px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; overflow:hidden; }
.cafe .chero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cafe .chero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(40,28,18,.2),rgba(40,28,18,.58)); }
.cafe .chero .chtx{ position:relative; z-index:1; }
.cafe .chero h3{ margin:0; font-size:24px; letter-spacing:.06em; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.cafe .chero p{ margin:8px 0 0; font-size:12px; opacity:.95; }
.cafe .chero .chb{ display:inline-block; margin-top:12px; background:#fff; color:#6f5436; font-weight:700; font-size:11px; padding:7px 17px; border-radius:999px; }
.cafe .cmenuwrap{ padding:18px 18px 4px; }
.cafe .cmh{ text-align:center; font-size:10px; letter-spacing:.34em; color:#b09a7e; }
.cafe .cmt{ text-align:center; font-size:16px; color:#4a3a28; margin:3px 0 14px; letter-spacing:.12em; }
.cafe .citems{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cafe .cit{ text-align:center; }
.cafe .cit img{ width:100%; height:86px; object-fit:cover; border-radius:10px; display:block; }
.cafe .cit .cnm{ font-size:12px; color:#4a3a28; margin-top:8px; }
.cafe .cit .cpr{ font-size:12px; color:#9c7b4f; font-weight:700; margin-top:2px; }
.cafe .cinfo{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; padding:13px; font-size:11px; color:#7a6a54;
  border-top:1px solid #efe9e0; margin-top:14px; background:#fbf7f0; }
.cafe .cinfo b{ color:#4a3a28; }
.cafe .cfoot{ background:#3a2f26; color:#cbb9a3; font-size:10px; text-align:center; padding:12px; letter-spacing:.1em; }

/* ============================================================
   DEMO C — メール作成・送信（1行ずつ清書 → 送信）
   ============================================================ */
.dout{ padding:18px; background:linear-gradient(180deg,#f7faff,#fff); }
.mcard{ max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
.mrowx{ display:flex; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line-2); font-size:13px; }
.mrowx .mlx{ color:var(--ink-3); width:40px; flex:none; }
.mrowx .mvx{ color:var(--ink); }
.mbodyx{ padding:16px; font-size:13px; color:var(--ink-2); line-height:1.95; }
.mbodyx p{ margin:0 0 4px; }
.msentx{ display:flex; align-items:center; gap:8px; justify-content:center; padding:13px; background:#ecfdf5; color:#0a8f5b; font-weight:700; font-size:13px; }
.msentx .mchk{ width:18px; height:18px; border-radius:50%; background:#10b981; color:#fff; display:grid; place-items:center; font-size:11px; }

/* ============================================================
   DEMO D — 議事録作成（要点を順に整理）
   ============================================================ */
.docx{ padding:22px 24px; max-width:560px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); }
.docx h4{ margin:0; font-size:18px; letter-spacing:.04em; }
.docx .dmeta{ color:var(--ink-3); font-size:11.5px; margin:5px 0 12px; border-bottom:1px solid var(--line-2); padding-bottom:11px; }
.docx .dsec{ margin:11px 0; }
.docx .dsec .dh{ font-weight:800; font-size:11px; color:var(--blue); letter-spacing:.06em; margin-bottom:4px; }
.docx .dsec p{ font-size:13px; color:var(--ink-2); margin:0; line-height:1.8; }
.docx .dtodo{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); margin:6px 0; }
.docx .dtodo .dcb{ width:16px; height:16px; border-radius:5px; background:#10b981; color:#fff; display:grid; place-items:center; font-size:10px; flex:none; }

/* ============================================================
   DEMO E — 見積書（A4縦・上から書き込み・自動スクロール）
   ============================================================ */
.da4view{ height:430px; overflow:hidden; background:#e9edf4; padding:18px 0; }
.da4{ width:330px; margin:0 auto; background:#fff; box-shadow:0 12px 32px rgba(20,40,80,.16); border:1px solid var(--line); padding:24px 26px 28px; }
.da4 .qhead{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.da4 .qhead h4{ margin:0; font-size:17px; letter-spacing:.34em; font-weight:900; color:var(--ink); }
.da4 .qmeta{ font-size:9px; color:var(--ink-3); text-align:right; line-height:1.8; }
.da4 .qto{ font-size:12.5px; font-weight:700; color:var(--ink); border-bottom:1.5px solid var(--ink); padding-bottom:6px; margin-bottom:12px; }
.da4 .qgreet{ font-size:9.5px; color:var(--ink-2); line-height:1.7; margin-bottom:13px; }
.da4 .qtotbox{ display:flex; justify-content:space-between; align-items:center; background:var(--grad-soft); border:1px solid #cfe0fb; border-radius:8px; padding:11px 14px; margin-bottom:16px; }
.da4 .qtotbox .l{ font-size:10px; font-weight:700; color:var(--ink-2); }
.da4 .qtotbox .v{ font-family:"Inter",sans-serif; font-size:18px; font-weight:800; color:var(--blue); }
.da4 table{ width:100%; border-collapse:collapse; font-size:9.5px; }
.da4 thead th{ text-align:left; color:#fff; background:var(--navy); padding:6px 8px; font-weight:600; font-size:8.5px; letter-spacing:.04em; }
.da4 th.r, .da4 td.r{ text-align:right; }
.da4 tbody td{ padding:7px 8px; border-bottom:1px solid var(--line); color:var(--ink-2); }
.da4 td.r{ font-variant-numeric:tabular-nums; }
.da4 .qsum{ margin-top:11px; margin-left:auto; width:62%; }
.da4 .qsum .qrow{ display:flex; justify-content:space-between; font-size:10px; padding:4px 8px; color:var(--ink-2); }
.da4 .qsum .qrow.total{ background:var(--navy); color:#fff; font-weight:800; border-radius:6px; font-size:11.5px; padding:8px; margin-top:4px; font-variant-numeric:tabular-nums; }
.da4 .qnote{ margin-top:16px; font-size:8px; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:9px; line-height:1.7; }
.da4 .qsign{ margin-top:14px; display:flex; justify-content:flex-end; align-items:center; gap:9px; font-size:9px; color:var(--ink-2); }
.da4 .qstamp{ width:34px; height:34px; border:1.5px solid #d9534f; border-radius:50%; color:#d9534f; display:grid; place-items:center;
  font-size:6.5px; line-height:1.15; text-align:center; transform:rotate(-8deg); opacity:.85; }

/* ============================================================
   DEMO F — インスタ投稿作成（リサーチ→投稿文→画像→下書き）
   ============================================================ */
.igcard{ max-width:380px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm); }
.igtop{ display:flex; align-items:center; gap:9px; padding:10px 12px; }
.igtop .igav{ width:30px; height:30px; border-radius:50%; background:var(--grad); flex:none; }
.igtop .ighn{ font-size:13px; font-weight:800; color:var(--ink); line-height:1.25; }
.igtop .ighn span{ display:block; font-weight:500; font-size:10.5px; color:var(--ink-3); }
.igimg{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--bg-tint); }
.igimg img{ width:100%; height:100%; object-fit:cover; }
.igimg .iggen{ position:absolute; top:9px; right:9px; background:rgba(15,23,42,.74); color:#fff; font-size:10px; font-weight:700; padding:4px 9px; border-radius:999px; }
.igacts{ display:flex; gap:14px; padding:10px 12px 4px; color:var(--ink-2); }
.igacts .ico{ width:22px; height:22px; }
.igcap{ padding:2px 12px 6px; font-size:12.5px; line-height:1.7; color:var(--ink-2); }
.igcap b{ color:var(--ink); }
.igtags{ padding:0 12px 14px; font-size:12.5px; line-height:1.7; color:var(--blue); font-weight:600; }
.igdraft{ display:flex; align-items:center; gap:8px; justify-content:center; padding:13px; background:#ecfdf5; color:#0a8f5b; font-weight:700; font-size:13px; }
.igdraft .mchk{ width:18px; height:18px; border-radius:50%; background:#10b981; color:#fff; display:grid; place-items:center; font-size:11px; flex:none; }
/* Demo F — フェーズごとの成果物カード（リサーチ→投稿文→画像→完成投稿） */
.igflow{ height:430px; overflow:hidden; padding:16px 18px; background:linear-gradient(180deg,#f7faff,#fff); }
.igstep{ max-width:430px; margin:0 auto 16px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }
.igstep-h{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line-2); font-size:13px; font-weight:800; color:var(--ink); background:var(--bg-tint); }
.igstep-n{ width:20px; height:20px; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; font-family:"Inter",sans-serif; font-size:11px; font-weight:800; flex:none; }
.igresearch{ padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.igr-row{ display:flex; gap:10px; font-size:12px; line-height:1.55; }
.igr-k{ flex:none; width:96px; color:var(--ink-3); font-weight:700; font-size:11px; }
.igr-row span:last-child{ color:var(--ink-2); }
.igr-tags{ color:var(--blue)!important; font-weight:600; }
.igcaption-box{ padding:13px 15px; font-size:12.5px; line-height:1.75; color:var(--ink-2); }
.igcaption-box p{ margin:0; }
.igcaption-box .igtags2{ color:var(--blue); font-weight:600; margin-top:8px; }
.iggen-img{ position:relative; }
.iggen-img img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.iggen-badge{ position:absolute; top:10px; right:10px; background:rgba(15,23,42,.74); color:#fff; font-size:10px; font-weight:700; padding:4px 9px; border-radius:999px; }
.igstep .igcard{ max-width:none; border:none; border-radius:0; box-shadow:none; }

/* Demo F — 横スライド・カルーセル（フェーズを1枚ずつ・インスタ投稿サイズ） */
.igcarousel{ position:relative; width:100%; max-width:400px; height:470px; margin:0 auto; overflow:hidden;
  background:linear-gradient(180deg,#f7faff,#fff); }
.igslide{ position:absolute; inset:0; transform:translateX(100%); opacity:0;
  transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .45s ease; display:flex; flex-direction:column; }
.igslide.active{ transform:translateX(0); opacity:1; }
.igslide.prev{ transform:translateX(-100%); opacity:0; }
.igslide-pad{ padding:24px 24px; justify-content:flex-start; }
.igs-tag{ font-size:11px; font-weight:800; color:var(--blue); letter-spacing:.04em; margin-bottom:16px; }
.igs-tag.float{ position:absolute; top:14px; left:16px; z-index:3; background:rgba(255,255,255,.92); padding:5px 11px; border-radius:999px; box-shadow:var(--shadow-sm); margin:0; }
.igs-h{ font-size:18px; font-weight:800; color:var(--ink); margin:0 0 16px; }
.igs-list{ display:flex; flex-direction:column; gap:13px; }
.igs-li{ font-size:13px; color:var(--ink-2); line-height:1.55; border-left:3px solid var(--sky); padding-left:12px; }
.igs-li .igs-k{ display:block; font-size:10.5px; font-weight:700; color:var(--ink-3); margin-bottom:2px; }
.igs-caption{ font-size:14px; line-height:1.9; color:var(--ink-2); }
.igs-caption p{ margin:0; }
.igs-caption .igs-tags{ color:var(--blue); font-weight:600; margin-top:14px; }
/* 生成ビジュアル＝インスタの「保存したくなる」見出し画像 */
.igvisual{ position:relative; flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:center;
  padding:26px 24px; color:#fff; text-align:center;
  background:
    radial-gradient(circle at 80% 16%, rgba(96,165,250,.55) 0%, transparent 42%),
    radial-gradient(circle at 12% 92%, rgba(37,99,235,.5) 0%, transparent 46%),
    linear-gradient(155deg,#0b2350 0%,#16357a 52%,#1d4ed8 100%); }
.igvisual::before{ content:""; position:absolute; inset:0; opacity:.15; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px, transparent 1px); background-size:16px 16px; }
.igv-glow{ position:absolute; border-radius:50%; filter:blur(34px); pointer-events:none; }
.igv-glow.g1{ width:160px; height:160px; background:rgba(125,211,252,.45); top:-44px; right:-34px; }
.igv-glow.g2{ width:150px; height:150px; background:rgba(59,130,246,.4); bottom:-46px; left:-32px; }
.igv-badge{ position:absolute; top:12px; right:12px; z-index:3; background:rgba(8,16,40,.5); color:#fff; font-size:10px; font-weight:700; padding:4px 10px; border-radius:999px; }
.igv-kicker{ position:relative; z-index:2; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-size:11px; font-weight:800; letter-spacing:.1em; color:#cfe3ff; margin-bottom:13px; }
.igv-kicker .ico{ width:14px; height:14px; }
.igv-kicker .dot2{ width:3px; height:3px; border-radius:50%; background:#7dd3fc; }
.igv-title{ position:relative; z-index:2; font-size:25px; font-weight:900; line-height:1.36; margin-bottom:20px; }
.igv-title .hl{ position:relative; white-space:nowrap; }
.igv-title .hl::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:3px; height:8px; background:rgba(125,211,252,.55); border-radius:3px; z-index:-1; }
.igv-pair{ position:relative; z-index:2; display:flex; align-items:stretch; justify-content:center; gap:11px; }
.igv-letter{ flex:1; max-width:120px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28); border-radius:16px; padding:14px 10px; }
.igv-letter .lt{ font-family:"Inter",sans-serif; font-size:46px; font-weight:800; line-height:1; display:block; }
.igv-letter.alt .lt{ color:#7dd3fc; }
.igv-letter .ph{ display:block; font-family:"Inter",sans-serif; font-size:12px; color:rgba(255,255,255,.72); margin:3px 0 9px; }
.igv-letter .tip{ display:block; font-size:11px; line-height:1.5; color:rgba(255,255,255,.94); }
/* 口腔断面の発音図 */
.igv-mouth{ width:100%; max-width:104px; margin:0 auto 7px; display:block; }
.igv-mouth svg{ width:100%; height:auto; display:block; }
.igv-letter .lt-sm{ display:block; font-family:"Inter",sans-serif; font-size:16px; font-weight:800; line-height:1; }
.igv-letter .lt-sm em{ font-style:normal; font-weight:600; font-size:11px; color:rgba(255,255,255,.7); margin-left:5px; }
.igv-letter.alt .lt-sm{ color:#7dd3fc; }
.igv-letter .ph2{ display:block; font-family:"Inter",sans-serif; font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.62); margin:4px 0 7px; }
.igcard-slide .igv-mouth{ max-width:78px; margin-bottom:5px; }
.igcard-slide .igv-letter .lt-sm{ font-size:13px; }
.igv-vs{ align-self:center; font-family:"Inter",sans-serif; font-size:13px; font-weight:800; color:rgba(255,255,255,.8); flex:none; }
.igv-foot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; margin-top:20px; font-size:11px; color:rgba(255,255,255,.86); }
.igv-foot .hd{ font-family:"Inter",sans-serif; font-weight:700; }
.igv-foot .sw{ display:inline-flex; align-items:center; gap:4px; font-weight:700; }
.igv-foot .sw .ico{ width:13px; height:13px; }
/* スライド4：完成投稿（枠いっぱい・サムネはコンパクトに） */
.igcard-slide{ margin:0; height:100%; max-width:none; border:none; border-radius:0; box-shadow:none; display:flex; flex-direction:column; }
.igcard-slide .igvisual{ flex:1; padding:16px; }
.igcard-slide .igv-kicker, .igcard-slide .igv-foot, .igcard-slide .igv-badge{ display:none; }
.igcard-slide .igv-title{ font-size:18px; margin-bottom:13px; }
.igcard-slide .igv-letter{ padding:10px 8px; max-width:104px; }
.igcard-slide .igv-letter .lt{ font-size:32px; }
.igcard-slide .igv-letter .ph{ margin:2px 0 6px; }

/* ============================================================
   DEMO G — 動画テロップ・余白カット（テロップ生成→余白を自動カット）
   ============================================================ */
.vstage{ padding:18px; background:linear-gradient(180deg,#f7faff,#fff); }
.vframe{ position:relative; max-width:480px; margin:0 auto; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#0f172a; box-shadow:var(--shadow-sm); }
.vframe img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.vplay{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; }
.vplay .ico{ width:20px; height:20px; color:var(--blue); margin-left:2px; }
.vtelop{ position:absolute; left:50%; bottom:13px; transform:translateX(-50%); background:rgba(15,23,42,.82); color:#fff; font-weight:800; font-size:14px; padding:6px 15px; border-radius:9px; white-space:nowrap; }
.dbody [data-li].vtelop{ transform:translateX(-50%) translateY(10px); }
.dbody [data-li].vtelop.on{ transform:translateX(-50%); }
.vtl{ max-width:480px; margin:14px auto 0; }
.vtlh{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--ink-3); margin-bottom:6px; }
.vtlh .vcut{ color:#dc2626; font-weight:700; }
.vtrack{ display:flex; height:34px; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.vseg{ height:100%; }
.vseg.keep{ flex:1 1 0; min-width:16px; background:linear-gradient(180deg,var(--sky),var(--blue)); border-right:2px solid #fff; }
.vseg.cut{ flex:0 0 22%; background:repeating-linear-gradient(45deg,#fecaca,#fecaca 5px,#fca5a5 5px,#fca5a5 10px); transition:flex-basis .8s ease,opacity .6s ease; }
.dwin.done .vseg.cut{ flex-basis:0; opacity:0; }
.vdone{ display:flex; align-items:center; gap:8px; justify-content:center; padding:13px; margin:6px auto 0; max-width:480px; color:#0a8f5b; font-weight:700; font-size:13px; }
.vdone .mchk{ width:18px; height:18px; border-radius:50%; background:#10b981; color:#fff; display:grid; place-items:center; font-size:11px; flex:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:680px){
  .ddeck{ grid-template-columns:repeat(2,1fr); }
  .dsiteSplit{ grid-template-columns:1fr; }
  .bsteps{ border-right:none; border-bottom:1px solid var(--line); }
  .da4view{ height:400px; }
  .da4{ width:290px; padding:20px 20px 24px; }
  .vtelop{ font-size:12px; padding:5px 12px; }
}