/* ==========================================================
   POSレジ 商品ページ（pos.html）専用スタイル
   - .pos-flow の3ステップ端末モック（コード描画）
   - .pos-zig のモニター／連携図／店内図モック（コード描画）
   - 接頭辞 ps-（pos 以外に影響させない）
   ========================================================== */

/* ---------- 共通トークン ---------- */
.pos-flow,.pos-zig-content{
	--ps-o:#0145f2;
	--ps-o-d:#0134c0;
	--ps-o-m:#3d7bff;
	--ps-o-l:#8fb0ff;
	--ps-o-xl:#cfe0ff;
	--ps-tint:#eff6ff;
	--ps-tint2:#e8f0ff;
	--ps-ink:#1f2430;
	--ps-line:#e4e8f0;
	--ps-gray:#666;
	--ps-green:#0f9d58;
	--ps-orange:#f28c28;
}

/* ページバナー：共通 page.css の渐变は禁止規約に抵触するため単色に上書き
   （装飾円 .banner-zs はそのまま・pos.html のみで使用） */
.page-banner{background:#eff6ff;}

/* ==========================================================
   1. 会計操作の流れ：タブレット端末モック（4:3）
   ========================================================== */
.pos-flow .pos-flow-pic{padding:44px 36px 10px;}

.ps-tab{--ps-fs:.86;position:relative;width:100%;max-width:480px;margin:0 auto;background:var(--ps-ink);border-radius:calc(14px * var(--ps-fs));padding:calc(9px * var(--ps-fs));box-shadow:0 16px 34px rgba(20,40,90,.20);}
.ps-tab-in{position:relative;background:#fff;border-radius:calc(6px * var(--ps-fs));overflow:hidden;aspect-ratio:4 / 3;}

/* ステップ番号（page.css の .step-no の色だけ pos 用に） */
.pos-flow .step-no{background:var(--ps-o);border-color:var(--ps-o);color:#fff;text-shadow:none;box-shadow:0 6px 14px rgba(1,69,242,.28);}

/* ---------- 画面1：注文管理（卓次整理） ---------- */
.ps-s1{display:flex;background:#f7f9fe;height:100%;}
.ps-s1-side{flex:none;width:calc(56px * var(--ps-fs));background:#fff;border-right:1px solid var(--ps-line);padding:calc(10px * var(--ps-fs)) 0;display:flex;flex-direction:column;align-items:center;gap:calc(9px * var(--ps-fs));}
.ps-s1-logo{width:calc(20px * var(--ps-fs));height:calc(20px * var(--ps-fs));border-radius:calc(5px * var(--ps-fs));background:var(--ps-o);}
.ps-s1-nav{position:relative;width:calc(34px * var(--ps-fs));height:calc(28px * var(--ps-fs));border-radius:calc(6px * var(--ps-fs));background:#f2f5fb;}
.ps-s1-nav::before,.ps-s1-nav::after{content:"";position:absolute;left:50%;transform:translate(-50%,0);}
.ps-s1-nav.i-home::before{top:calc(9px * var(--ps-fs));width:calc(10px * var(--ps-fs));height:calc(8px * var(--ps-fs));background:#aab4c4;border-radius:calc(1px * var(--ps-fs));}
.ps-s1-nav.i-home::after{top:calc(5px * var(--ps-fs));width:0;height:0;border-left:calc(6px * var(--ps-fs)) solid transparent;border-right:calc(6px * var(--ps-fs)) solid transparent;border-bottom:calc(4px * var(--ps-fs)) solid #aab4c4;}
.ps-s1-nav.i-list{background:var(--ps-tint2);}
.ps-s1-nav.i-list::before{top:calc(9px * var(--ps-fs));width:calc(12px * var(--ps-fs));height:calc(2px * var(--ps-fs));background:var(--ps-o);box-shadow:0 calc(4px * var(--ps-fs)) 0 var(--ps-o),0 calc(8px * var(--ps-fs)) 0 var(--ps-o);}
.ps-s1-nav.i-grid::before{top:calc(10px * var(--ps-fs));width:calc(3px * var(--ps-fs));height:calc(3px * var(--ps-fs));border-radius:50%;background:#aab4c4;box-shadow:calc(6px * var(--ps-fs)) 0 0 #aab4c4,0 calc(6px * var(--ps-fs)) 0 #aab4c4,calc(6px * var(--ps-fs)) calc(6px * var(--ps-fs)) 0 #aab4c4;}
.ps-s1-nav.i-yen::before{content:"¥";left:0;transform:none;top:calc(5px * var(--ps-fs));width:100%;text-align:center;font-size:calc(12px * var(--ps-fs));line-height:1;color:#aab4c4;font-weight:700;}
.ps-s1-nav.i-box::before{top:calc(9px * var(--ps-fs));width:calc(12px * var(--ps-fs));height:calc(10px * var(--ps-fs));border:calc(1.6px * var(--ps-fs)) solid #aab4c4;border-radius:calc(2px * var(--ps-fs));}
.ps-s1-nav.i-box::after{top:calc(13px * var(--ps-fs));width:calc(4px * var(--ps-fs));height:calc(1.6px * var(--ps-fs));background:#aab4c4;}

.ps-s1-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(7px * var(--ps-fs));padding:calc(9px * var(--ps-fs)) calc(10px * var(--ps-fs));}
.ps-s1-top{display:flex;align-items:center;gap:calc(6px * var(--ps-fs));}
.ps-s1-store{display:flex;align-items:center;gap:calc(4px * var(--ps-fs));font-size:calc(9px * var(--ps-fs));color:#333;font-weight:600;white-space:nowrap;}
.ps-s1-store b{font-size:calc(7px * var(--ps-fs));font-weight:500;color:var(--ps-o);background:var(--ps-tint2);border-radius:calc(3px * var(--ps-fs));padding:calc(1px * var(--ps-fs)) calc(4px * var(--ps-fs));}
.ps-s1-date{margin-left:auto;font-size:calc(7px * var(--ps-fs));color:#8a93a3;white-space:nowrap;}
.ps-s1-ico{position:relative;flex:none;width:calc(10px * var(--ps-fs));height:calc(10px * var(--ps-fs));border-radius:50%;background:#e4e9f2;}
.ps-s1-ico.is-bell::after{content:"";position:absolute;right:calc(-1px * var(--ps-fs));top:calc(-1px * var(--ps-fs));width:calc(3px * var(--ps-fs));height:calc(3px * var(--ps-fs));border-radius:50%;background:var(--ps-orange);}
.ps-s1-tabs{display:flex;align-items:center;gap:calc(4px * var(--ps-fs));flex-wrap:wrap;}
.ps-s1-tab{font-size:calc(7.5px * var(--ps-fs));color:#5a6474;background:#fff;border:1px solid var(--ps-line);border-radius:calc(20px * var(--ps-fs));padding:calc(2.5px * var(--ps-fs)) calc(7px * var(--ps-fs));white-space:nowrap;}
.ps-s1-tab.is-on{background:var(--ps-o);border-color:var(--ps-o);color:#fff;}
.ps-s1-upd{margin-left:auto;font-size:calc(7.5px * var(--ps-fs));color:var(--ps-o);border:1px solid var(--ps-o-l);border-radius:calc(20px * var(--ps-fs));padding:calc(2.5px * var(--ps-fs)) calc(8px * var(--ps-fs));background:#fff;white-space:nowrap;}
.ps-s1-sec{font-size:calc(8px * var(--ps-fs));color:#3c4452;font-weight:600;}
.ps-s1-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:calc(6px * var(--ps-fs));}
.ps-s1-card{background:#fff;border:1px solid var(--ps-line);border-radius:calc(5px * var(--ps-fs));padding:calc(5px * var(--ps-fs)) calc(6px * var(--ps-fs));display:flex;flex-direction:column;gap:calc(2px * var(--ps-fs));min-width:0;}
.ps-s1-card b{font-size:calc(9px * var(--ps-fs));color:#2b3242;line-height:1.2;}
.ps-s1-card em{font-size:calc(6.5px * var(--ps-fs));font-style:normal;border-radius:calc(3px * var(--ps-fs));padding:calc(1px * var(--ps-fs)) calc(3px * var(--ps-fs));align-self:flex-start;white-space:nowrap;}
.ps-s1-card s{font-size:calc(7px * var(--ps-fs));text-decoration:none;color:#8a93a3;line-height:1.2;}
.ps-s1-card.is-idle em{background:#eef1f6;color:#7d8694;}
.ps-s1-card.is-use{border-color:var(--ps-o-l);}
.ps-s1-card.is-use em{background:var(--ps-tint2);color:var(--ps-o);}
.ps-s1-card.is-rent em{background:#fdf1e3;color:#c96a12;}
.ps-s1-foot{margin-top:auto;display:flex;align-items:center;gap:calc(6px * var(--ps-fs));background:#fff;border-top:1px solid var(--ps-line);padding:calc(7px * var(--ps-fs)) 0 0;}
.ps-s1-search{font-size:calc(7px * var(--ps-fs));color:#9aa3b2;border:1px dashed #d6dce6;border-radius:calc(3px * var(--ps-fs));padding:calc(2px * var(--ps-fs)) calc(6px * var(--ps-fs));white-space:nowrap;}
.ps-s1-count{font-size:calc(6.5px * var(--ps-fs));color:#8a93a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ps-s1-move{margin-left:auto;font-size:calc(7px * var(--ps-fs));color:#fff;background:var(--ps-o);border-radius:calc(3px * var(--ps-fs));padding:calc(3px * var(--ps-fs)) calc(7px * var(--ps-fs));white-space:nowrap;}

/* ---------- 画面2：預かり金額を入力（お支払い） ---------- */
.ps-s2{display:flex;flex-direction:column;background:#f7f9fe;height:100%;}
.ps-s2-date{flex:none;text-align:center;font-size:calc(8px * var(--ps-fs));color:#8a93a3;background:#fff;border-bottom:1px solid var(--ps-line);padding:calc(6px * var(--ps-fs)) 0;}
.ps-s2-body{flex:1;min-height:0;display:flex;gap:calc(8px * var(--ps-fs));padding:calc(9px * var(--ps-fs)) calc(10px * var(--ps-fs));}
.ps-s2-left{flex:1.1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:calc(8px * var(--ps-fs));}
.ps-s2-card{background:#fff;border:1px solid var(--ps-line);border-radius:calc(6px * var(--ps-fs));padding:calc(8px * var(--ps-fs)) calc(9px * var(--ps-fs));}
.ps-s2-ttl{font-size:calc(9px * var(--ps-fs));font-weight:600;color:#2b3242;padding:0 0 calc(5px * var(--ps-fs)) calc(5px * var(--ps-fs));border-left:calc(3px * var(--ps-fs)) solid var(--ps-o);margin-bottom:calc(5px * var(--ps-fs));}
.ps-s2-row{display:flex;justify-content:space-between;gap:calc(6px * var(--ps-fs));font-size:calc(8px * var(--ps-fs));color:#5a6474;padding:calc(2.5px * var(--ps-fs)) 0;}
.ps-s2-row span{font-size:calc(8px * var(--ps-fs));white-space:nowrap;}
.ps-s2-row b{color:#2b3242;font-weight:600;font-size:calc(8px * var(--ps-fs));white-space:nowrap;}
.ps-s2-row.is-sum{border-top:1px solid var(--ps-line);margin-top:calc(3px * var(--ps-fs));padding-top:calc(5px * var(--ps-fs));}
.ps-s2-row.is-sum b{color:var(--ps-o);font-size:calc(11px * var(--ps-fs));}
.ps-s2-methods{display:flex;gap:calc(5px * var(--ps-fs));}
.ps-s2-m{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:calc(4px * var(--ps-fs));border:1px solid var(--ps-line);border-radius:calc(5px * var(--ps-fs));padding:calc(5px * var(--ps-fs)) calc(3px * var(--ps-fs));font-size:calc(6.5px * var(--ps-fs));color:#5a6474;background:#fff;white-space:nowrap;overflow:hidden;}
.ps-s2-m i{flex:none;width:calc(13px * var(--ps-fs));height:calc(10px * var(--ps-fs));border-radius:calc(2px * var(--ps-fs));background:#dfe6f1;}
.ps-s2-m.is-on{border-color:var(--ps-o);background:var(--ps-tint);color:var(--ps-o);}
.ps-s2-m.is-on i{background:var(--ps-o);}
.ps-s2-right{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(5px * var(--ps-fs));background:#fff;border:1px solid var(--ps-line);border-radius:calc(6px * var(--ps-fs));padding:calc(7px * var(--ps-fs));}
.ps-s2-quick{flex:none;display:flex;gap:calc(4px * var(--ps-fs));}
.ps-s2-quick span{flex:1;text-align:center;font-size:calc(7.5px * var(--ps-fs));color:var(--ps-o);border:1px solid var(--ps-o-l);border-radius:calc(4px * var(--ps-fs));padding:calc(3px * var(--ps-fs)) 0;background:var(--ps-tint);white-space:nowrap;}
.ps-s2-keys{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:calc(4px * var(--ps-fs));}
.ps-s2-keys span{display:flex;align-items:center;justify-content:center;background:#f4f7fc;border-radius:calc(4px * var(--ps-fs));font-size:calc(9px * var(--ps-fs));color:#2b3242;font-weight:600;}
.ps-s2-conf{flex:none;text-align:center;background:var(--ps-o);color:#fff;font-size:calc(9px * var(--ps-fs));font-weight:600;border-radius:calc(5px * var(--ps-fs));padding:calc(6px * var(--ps-fs)) 0;}
.ps-s2-print{flex:none;text-align:center;font-size:calc(7.5px * var(--ps-fs));color:var(--ps-o);text-decoration:underline;}

/* ---------- 画面3：会計完了 ---------- */
.ps-s3{display:flex;flex-direction:column;gap:calc(8px * var(--ps-fs));background:#f7f9fe;padding:calc(8px * var(--ps-fs));height:100%;}
.ps-s3-head{flex:none;display:flex;align-items:baseline;gap:calc(8px * var(--ps-fs));background:#fff;border:1px solid var(--ps-line);border-radius:calc(6px * var(--ps-fs));padding:calc(7px * var(--ps-fs)) calc(10px * var(--ps-fs));}
.ps-s3-head b{font-size:calc(12px * var(--ps-fs));color:#2b3242;}
.ps-s3-head span{font-size:calc(7px * var(--ps-fs));color:#8a93a3;white-space:nowrap;}
.ps-s3-card{flex:1;min-height:0;position:relative;background:#fff;border:1px solid var(--ps-line);border-radius:calc(6px * var(--ps-fs));padding:calc(10px * var(--ps-fs));display:flex;flex-direction:column;gap:calc(6px * var(--ps-fs));}
.ps-s3-ok{align-self:center;font-size:calc(8.5px * var(--ps-fs));color:#fff;background:var(--ps-green);border-radius:calc(20px * var(--ps-fs));padding:calc(4px * var(--ps-fs)) calc(14px * var(--ps-fs));white-space:nowrap;}
.ps-s3-chg{text-align:center;}
.ps-s3-chg span{display:block;font-size:calc(8px * var(--ps-fs));color:#8a93a3;}
.ps-s3-chg b{display:block;font-size:calc(30px * var(--ps-fs));color:#2b3242;line-height:1.15;}
.ps-s3-rows{border-top:1px dashed var(--ps-line);padding-top:calc(6px * var(--ps-fs));display:flex;flex-direction:column;gap:calc(3px * var(--ps-fs));max-width:calc(140px * var(--ps-fs));}
.ps-s3-row{display:flex;justify-content:space-between;gap:calc(8px * var(--ps-fs));font-size:calc(8px * var(--ps-fs));color:#5a6474;}
.ps-s3-row span{font-size:calc(8px * var(--ps-fs));white-space:nowrap;}
.ps-s3-row b{color:#2b3242;font-size:calc(8px * var(--ps-fs));white-space:nowrap;}
.ps-s3-side{position:absolute;right:calc(12px * var(--ps-fs));top:50%;transform:translate(0,-50%);display:flex;flex-direction:column;gap:calc(5px * var(--ps-fs));width:calc(84px * var(--ps-fs));}
.ps-s3-side i{display:block;height:calc(15px * var(--ps-fs));border:1px dashed #cfd6e2;border-radius:calc(3px * var(--ps-fs));}
.ps-s3-side span{text-align:center;font-size:calc(7.5px * var(--ps-fs));color:var(--ps-o);border:1px solid var(--ps-o-l);border-radius:calc(4px * var(--ps-fs));padding:calc(3.5px * var(--ps-fs)) 0;background:#fff;white-space:nowrap;}
.ps-s3-btns{margin-top:auto;display:flex;justify-content:center;gap:calc(10px * var(--ps-fs));}
.ps-s3-btns span{font-size:calc(8.5px * var(--ps-fs));border-radius:calc(5px * var(--ps-fs));padding:calc(6px * var(--ps-fs)) calc(16px * var(--ps-fs));white-space:nowrap;}
.ps-s3-btns .is-ghost{color:var(--ps-o);border:1px solid var(--ps-o);}
.ps-s3-btns .is-main{color:#fff;background:var(--ps-o);}

/* ==========================================================
   2. 多次元データ分析：モニター／連携図／店内図モック
   ========================================================== */
.pos-zig .pos-zig-pic{width:240px;align-self:center;margin:26px 12px 26px 22px;}

/* ---------- PCモニター（16:10） ---------- */
.ps-mon{--ps-fs:.82;width:100%;max-width:480px;margin:0 auto;background:var(--ps-ink);border-radius:calc(10px * var(--ps-fs));padding:calc(7px * var(--ps-fs));}
.ps-mon-in{position:relative;background:#fff;border-radius:calc(3px * var(--ps-fs));overflow:hidden;aspect-ratio:16 / 10;}
.ps-mon-neck{width:calc(54px * var(--ps-fs));height:calc(9px * var(--ps-fs));margin:0 auto;background:#2c3342;}
.ps-mon-base{width:calc(120px * var(--ps-fs));height:calc(4px * var(--ps-fs));margin:0 auto;border-radius:calc(2px * var(--ps-fs));background:#1f2430;}

/* パネル共通 */
.ps-m-p{background:#fff;border:1px solid #edf1f8;border-radius:calc(4px * var(--ps-fs));padding:calc(6px * var(--ps-fs)) calc(7px * var(--ps-fs));display:flex;flex-direction:column;min-width:0;min-height:0;}
.ps-m-ttl{font-size:calc(8px * var(--ps-fs));font-weight:600;color:#2b3242;padding-bottom:calc(3px * var(--ps-fs));white-space:nowrap;}

/* ---------- 画面1：POS本体でのデータ分析 ---------- */
.ps-m1{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:1.35fr .72fr 1fr;gap:calc(6px * var(--ps-fs));padding:calc(7px * var(--ps-fs));background:#f7f9fe;height:100%;}
.ps-m1-line{grid-row:1 / 3;}
.ps-m1-svg{display:block;width:100%;height:100%;min-height:0;}
.ps-m1-x{display:flex;justify-content:space-between;padding-top:calc(2px * var(--ps-fs));}
.ps-m1-x span{font-size:calc(5.5px * var(--ps-fs));color:#9aa3b2;}
.ps-m1-kpi{flex-direction:row;align-items:center;gap:calc(6px * var(--ps-fs));}
.ps-m1-kpi-ico{flex:none;width:calc(22px * var(--ps-fs));height:calc(22px * var(--ps-fs));border-radius:calc(5px * var(--ps-fs));background:var(--ps-tint2);position:relative;}
.ps-m1-kpi-ico::before{content:"";position:absolute;left:calc(5px * var(--ps-fs));bottom:calc(5px * var(--ps-fs));width:calc(3px * var(--ps-fs));height:calc(8px * var(--ps-fs));background:var(--ps-o);border-radius:calc(1px * var(--ps-fs));box-shadow:calc(5px * var(--ps-fs)) calc(-2px * var(--ps-fs)) 0 var(--ps-o-l),calc(10px * var(--ps-fs)) calc(-5px * var(--ps-fs)) 0 var(--ps-o-m);}
.ps-m1-kpi b{display:block;font-size:calc(8px * var(--ps-fs));color:#2b3242;line-height:1.3;}
.ps-m1-kpi span{display:block;font-size:calc(6.5px * var(--ps-fs));color:#8a93a3;line-height:1.3;}
.ps-m1-bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:calc(6px * var(--ps-fs));padding:0 calc(2px * var(--ps-fs));}
.ps-m1-bars s{flex:1;background:var(--ps-o);border-radius:calc(2px * var(--ps-fs)) calc(2px * var(--ps-fs)) 0 0;text-decoration:none;}
.ps-m1-donut{grid-column:1 / 3;flex-direction:row;align-items:center;gap:calc(6px * var(--ps-fs));}
.ps-m1-donut svg{flex:none;width:calc(44px * var(--ps-fs));height:calc(44px * var(--ps-fs));}
.ps-m1-dl{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2px * var(--ps-fs));}
.ps-m1-dl span{display:flex;align-items:center;gap:calc(3px * var(--ps-fs));font-size:calc(5.5px * var(--ps-fs));color:#5a6474;white-space:nowrap;}
.ps-m1-dl span::before{content:"";flex:none;width:calc(5px * var(--ps-fs));height:calc(5px * var(--ps-fs));border-radius:calc(1px * var(--ps-fs));}
.ps-m1-dl span:nth-child(1)::before{background:var(--ps-o-d);}
.ps-m1-dl span:nth-child(2)::before{background:var(--ps-o-m);}
.ps-m1-dl span:nth-child(3)::before{background:var(--ps-o-l);}
.ps-m1-dl span:nth-child(4)::before{background:var(--ps-o-xl);}

/* ---------- 画面2：PC管理画面での詳細分析 ---------- */
.ps-m2{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:calc(6px * var(--ps-fs));padding:calc(7px * var(--ps-fs));background:#f7f9fe;height:100%;}
.ps-m2-fun svg{display:block;width:100%;height:100%;min-height:0;}
.ps-m2-donut{flex-direction:row;align-items:center;gap:calc(6px * var(--ps-fs));}
.ps-m2-donut svg{flex:none;width:calc(40px * var(--ps-fs));height:calc(40px * var(--ps-fs));}
.ps-m2-dl{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(2px * var(--ps-fs));}
.ps-m2-dl span{display:flex;align-items:center;gap:calc(3px * var(--ps-fs));font-size:calc(5.5px * var(--ps-fs));color:#5a6474;white-space:nowrap;}
.ps-m2-dl span::before{content:"";flex:none;width:calc(5px * var(--ps-fs));height:calc(5px * var(--ps-fs));border-radius:calc(1px * var(--ps-fs));}
.ps-m2-dl span:nth-child(1)::before{background:var(--ps-o-d);}
.ps-m2-dl span:nth-child(2)::before{background:var(--ps-o-m);}
.ps-m2-dl span:nth-child(3)::before{background:var(--ps-o-l);}
.ps-m2-dl span:nth-child(4)::before{background:var(--ps-o-xl);}
.ps-m2-bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:calc(8px * var(--ps-fs));padding:0 calc(4px * var(--ps-fs));}
.ps-m2-bars s{flex:1;background:var(--ps-o-m);border-radius:calc(2px * var(--ps-fs)) calc(2px * var(--ps-fs)) 0 0;text-decoration:none;}
.ps-m2-bars s:nth-child(4){background:var(--ps-o);}
.ps-m2-tbl table{width:100%;border-collapse:collapse;}
.ps-m2-tbl th{font-size:calc(5.5px * var(--ps-fs));color:#8a93a3;font-weight:500;text-align:left;padding:calc(2px * var(--ps-fs)) calc(3px * var(--ps-fs));border-bottom:1px solid #edf1f8;white-space:nowrap;}
.ps-m2-tbl td{font-size:calc(5.5px * var(--ps-fs));color:#3c4452;padding:calc(2.5px * var(--ps-fs)) calc(3px * var(--ps-fs));border-bottom:1px solid #f4f7fd;white-space:nowrap;}
.ps-m2-tbl tr:last-child td{border-bottom:0;}

/* ---------- 画面3：外部分析ツールとの連携（連携図） ---------- */
.ps-link{--ps-fs:.82;width:100%;max-width:480px;margin:0 auto;aspect-ratio:16 / 10;background:#fff;border:1px solid var(--ps-line);border-radius:calc(10px * var(--ps-fs));padding:calc(12px * var(--ps-fs));display:grid;grid-template-columns:auto calc(52px * var(--ps-fs)) 1fr;grid-template-rows:repeat(3,1fr);align-items:center;gap:calc(5px * var(--ps-fs));}
.ps-link-cloud{grid-row:1 / 4;justify-self:center;position:relative;z-index:1;width:calc(88px * var(--ps-fs));height:calc(60px * var(--ps-fs));background:var(--ps-tint);border:calc(2px * var(--ps-fs)) solid var(--ps-o);border-radius:calc(30px * var(--ps-fs));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1px * var(--ps-fs));}
.ps-link-cloud::before{content:"";position:absolute;z-index:-1;left:calc(10px * var(--ps-fs));top:calc(-13px * var(--ps-fs));width:calc(28px * var(--ps-fs));height:calc(28px * var(--ps-fs));border-radius:50%;background:var(--ps-tint);border:calc(2px * var(--ps-fs)) solid var(--ps-o);}
.ps-link-cloud::after{content:"";position:absolute;z-index:-1;right:calc(8px * var(--ps-fs));top:calc(-8px * var(--ps-fs));width:calc(20px * var(--ps-fs));height:calc(20px * var(--ps-fs));border-radius:50%;background:var(--ps-tint);border:calc(2px * var(--ps-fs)) solid var(--ps-o);}
.ps-link-cloud b{font-size:calc(9px * var(--ps-fs));color:var(--ps-o);font-weight:700;line-height:1.2;}
.ps-link-cloud span{font-size:calc(6.5px * var(--ps-fs));color:#5a6474;line-height:1.2;}
.ps-link-conn{position:relative;height:0;border-top:calc(2px * var(--ps-fs)) dashed var(--ps-o-l);}
.ps-link-conn::before,.ps-link-conn::after{content:"";position:absolute;top:calc(-4px * var(--ps-fs));border:calc(4px * var(--ps-fs)) solid transparent;}
.ps-link-conn::before{left:calc(-1px * var(--ps-fs));border-right-color:var(--ps-o-l);}
.ps-link-conn::after{right:calc(-1px * var(--ps-fs));border-left-color:var(--ps-o-l);}
.ps-link-tool{display:flex;align-items:center;gap:calc(7px * var(--ps-fs));background:#fff;border:1px solid var(--ps-line);border-radius:calc(6px * var(--ps-fs));padding:calc(6px * var(--ps-fs)) calc(9px * var(--ps-fs));box-shadow:0 calc(3px * var(--ps-fs)) calc(8px * var(--ps-fs)) rgba(20,40,90,.06);}
.ps-link-tool span{font-size:calc(9px * var(--ps-fs));color:#2b3242;font-weight:600;white-space:nowrap;}
.ps-tico{flex:none;position:relative;width:calc(24px * var(--ps-fs));height:calc(24px * var(--ps-fs));border-radius:calc(6px * var(--ps-fs));background:var(--ps-tint2);}
.ps-tico.is-mon::before{content:"";position:absolute;left:calc(5px * var(--ps-fs));top:calc(4px * var(--ps-fs));right:calc(5px * var(--ps-fs));height:calc(11px * var(--ps-fs));border:calc(1.6px * var(--ps-fs)) solid var(--ps-o);border-radius:calc(2px * var(--ps-fs));}
.ps-tico.is-mon::after{content:"";position:absolute;left:50%;bottom:calc(3px * var(--ps-fs));width:calc(8px * var(--ps-fs));height:calc(2px * var(--ps-fs));background:var(--ps-o);transform:translate(-50%,0);}
.ps-tico.is-crm{border-radius:50%;background:var(--ps-o);}
.ps-tico.is-crm em{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:calc(6.5px * var(--ps-fs));font-style:normal;color:#fff;font-weight:700;}
.ps-tico.is-doc::before{content:"";position:absolute;left:calc(5px * var(--ps-fs));top:calc(4px * var(--ps-fs));right:calc(5px * var(--ps-fs));bottom:calc(4px * var(--ps-fs));background:#fff;border:calc(1.6px * var(--ps-fs)) solid var(--ps-o);border-radius:calc(2px * var(--ps-fs));}
.ps-tico.is-doc::after{content:"";position:absolute;left:calc(8px * var(--ps-fs));right:calc(8px * var(--ps-fs));top:calc(9px * var(--ps-fs));height:calc(1.6px * var(--ps-fs));background:var(--ps-o);box-shadow:0 calc(4px * var(--ps-fs)) 0 var(--ps-o);}

/* ---------- 画面4：場所を選ばないリアルタイム確認（店内図） ---------- */
.ps-floor{display:flex;flex-direction:column;gap:calc(6px * var(--ps-fs));padding:calc(8px * var(--ps-fs));background:#f2f6fd;height:100%;}
.ps-floor-legend{flex:none;display:flex;justify-content:flex-end;gap:calc(8px * var(--ps-fs));}
.ps-floor-legend span{display:flex;align-items:center;gap:calc(3px * var(--ps-fs));font-size:calc(7px * var(--ps-fs));color:#5a6474;white-space:nowrap;}
.ps-floor-legend span::before{content:"";width:calc(8px * var(--ps-fs));height:calc(8px * var(--ps-fs));border-radius:calc(2px * var(--ps-fs));}
.ps-floor-legend .is-use::before{background:var(--ps-o);}
.ps-floor-legend .is-order::before{background:var(--ps-orange);}
.ps-floor-legend .is-idle::before{background:#c3cad6;}
.ps-floor-room{flex:1;min-height:0;position:relative;background:#fff;border:1px solid #dbe4f2;border-radius:calc(5px * var(--ps-fs));padding:calc(7px * var(--ps-fs)) calc(9px * var(--ps-fs));display:flex;flex-direction:column;gap:calc(6px * var(--ps-fs));}
.ps-floor-sec{font-size:calc(7.5px * var(--ps-fs));color:#8a93a3;}
.ps-floor-row{display:flex;gap:calc(7px * var(--ps-fs));}
.ps-floor-tbl{flex:1;min-width:0;position:relative;height:calc(36px * var(--ps-fs));border-radius:calc(6px * var(--ps-fs));background:#f4f7fc;border:1px solid #e2e9f4;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(3px * var(--ps-fs));}
.ps-floor-tbl s{position:absolute;left:50%;top:calc(6px * var(--ps-fs));width:calc(6px * var(--ps-fs));height:calc(6px * var(--ps-fs));border-radius:50%;transform:translate(-50%,0);text-decoration:none;}
.ps-floor-tbl b{font-size:calc(6.5px * var(--ps-fs));color:#5a6474;font-weight:500;white-space:nowrap;}
.ps-floor-tbl.is-use{background:var(--ps-tint);border-color:var(--ps-o-l);}
.ps-floor-tbl.is-use s{background:var(--ps-o);}
.ps-floor-tbl.is-use b{color:var(--ps-o);}
.ps-floor-tbl.is-order{background:#fdf6ec;border-color:#f3ddba;}
.ps-floor-tbl.is-order s{background:var(--ps-orange);}
.ps-floor-tbl.is-order b{color:#c96a12;}
.ps-floor-tbl.is-idle s{background:#c3cad6;}
.ps-floor-kit{position:absolute;right:calc(9px * var(--ps-fs));bottom:calc(7px * var(--ps-fs));width:calc(70px * var(--ps-fs));height:calc(30px * var(--ps-fs));background:#eef1f6;border-radius:calc(4px * var(--ps-fs));display:flex;align-items:center;justify-content:center;font-size:calc(7px * var(--ps-fs));color:#8a93a3;}

/* ==========================================================
   レスポンシブ対応
   ※ --ps-fs は「画面実寸に対する中身の縮尺」。各断点で
     実測（内容が一切はみ出さない最大値）から 3〜5% の余裕を引いて決定。
   ========================================================== */

/* ---------- 1280px以下：小さめのノートPC ---------- */
@media screen and (max-width: 1280px) {
	.pos-flow .pos-flow-pic{padding:40px 30px 10px}
	.ps-tab{--ps-fs:.82}
	.pos-zig .pos-zig-pic{width:210px;margin:22px 10px 22px 18px}
	.ps-mon,.ps-link{--ps-fs:.72}
}

/* ---------- 1100px以下：3カラムの各カードがさらに狭くなるため中身を縮める ---------- */
@media screen and (max-width: 1100px) {
	.pos-flow .pos-flow-pic{padding:38px 22px 10px}
	.ps-tab{--ps-fs:.62}
}

/* ---------- 1024px以下：タブレット横 ---------- */
@media screen and (max-width: 1024px) {
	.pos-flow .pos-flow-pic{padding:34px 20px 10px}
	.ps-tab{--ps-fs:.58}
	.pos-zig .pos-zig-pic{width:220px;margin:22px 12px 22px 20px}
	.ps-mon,.ps-link{--ps-fs:.72}
}

/* ---------- 900px以下：タブレット縦 ---------- */
@media screen and (max-width: 900px) {
	.ps-tab{--ps-fs:.48}
	.pos-zig .pos-zig-pic{width:240px;margin:22px 12px 22px 20px}
	.ps-mon,.ps-link{--ps-fs:.82}
}

/* ---------- 768px以下：タブレット小 / スマホ横（3ステップが1列になる） ---------- */
@media screen and (max-width: 768px) {
	.pos-flow .pos-flow-pic{padding:30px 20px 8px}
	.ps-tab{--ps-fs:1.1;max-width:420px}
	.pos-zig .pos-zig-pic{width:220px;margin:20px 12px 20px 18px}
	.ps-mon,.ps-link{--ps-fs:.72}
}

/* ---------- 480px以下：スマホ縦 ---------- */
@media screen and (max-width: 480px) {
	.pos-flow .pos-flow-pic{padding:26px 16px 8px}
	.ps-tab{--ps-fs:.92;max-width:400px}
	.pos-zig .pos-zig-pic{width:100%;max-width:300px;margin:20px auto 14px}
	.ps-mon,.ps-link{--ps-fs:.97}
}

/* ---------- 390px以下：小さめのスマホ ---------- */
@media screen and (max-width: 390px) {
	.ps-tab{--ps-fs:.68}
	.ps-mon,.ps-link{--ps-fs:.95}
}

/* ==========================================================
   3. スクロール出現アニメーション（display.html の .dp-reveal と同型）
   ※ JS が [data-pos-reveal] に .pos-reveal を付与。JS無効時はそのまま表示。
      data-pos-reveal の値は遅延の段数（0→0ms, 1→120ms, 2→240ms…）。
   ========================================================== */
.pos-reveal{
	opacity: 0;
	transform: translate(0,28px);
	transition: opacity .7s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.pos-reveal.pos-in{opacity: 1;transform: translate(0,0);}
@media (prefers-reduced-motion: reduce){
	.pos-reveal{opacity: 1;transform: none;transition: none;}
}

/* ==========================================================
   4. PC端ホバー効果（display.html と同型の「上浮＋影＋枠色」）
   ※ ホバーはポインタ環境のみ（769px以上）で有効。タッチ端末では無効。
   ※ 上浮は独立プロパティ translate で実装し、出現アニメーションの
      transform（.pos-reveal.pos-in の translate(0,0)）と競合させない。
      transition は出現アニメーションと同じ Duration を内包する。
   ========================================================== */
@media screen and (min-width: 769px) {
	.pos-flow-li,.pos-adv-li,.pos-zig,.pos-pay-col,.pos-vs-col,.pos-point-li,.pos-config-li{
		transition:
			opacity .7s ease,
			transform .6s cubic-bezier(.22,.61,.36,1),
			translate .3s ease,
			box-shadow .3s ease,
			border-color .3s ease,
			background .3s ease;
	}
	/* 独立したカード：ホバーで上浮＋影＋枠を淡青に */
	.pos-flow-li:hover,.pos-adv-li:hover,.pos-zig:hover,.pos-pay-col:hover,.pos-vs-col:hover{
		translate: 0 -5px;
		box-shadow: 0 14px 32px rgba(20,50,120,.12);
		border-color: #c9dafd;
	}
	/* 枠線を共有する一体型のグループ（pos-point / pos-config）は背景色だけで反応 */
	.pos-point-li:hover,.pos-config-li:hover{background: #f6faff;}
}