/* ============================================================
   ペット送迎予約システム 提案書（ビューブリッジ）— レイアウト用 CSS（原本）
   色・角丸・影・フォントは、MDT の assets/app.p-css（変更なしで先に読み込む）のトークンを使う。
   ここでは MDT にないスライド用の配置だけを決める。
   ※ このファイルのクラス名は、build.p-py が「p-」を付けて出力する（app.p-css とぶつからないように）。
   スライド寸法 1280×720（16:9）。印刷は PDF 1ページ＝1スライド。
   ============================================================ */
:root{
  --navy:var(--sidebar,#0f1526); --navy-tx:#a8b1c7;
  --th:#e8f0fe; --th-line:#b9d0f7;
  --ok-ink:#00692a; --warn-ink:#9a3d00; --cat-ink:#4b22a8;
  --red:#d6293e;
  --s:1;
}
html,body{margin:0;padding:0}
body{font-family:var(--ui);font-size:14px;line-height:22px;color:var(--ink);background:#e3e9f4;-webkit-font-smoothing:antialiased;counter-reset:sl}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
svg{display:block}

/* ---------- deck ---------- */
.p-deck{display:flex;flex-direction:column;align-items:center;gap:28px;padding:28px 0 56px}
.p-frame{width:calc(1280px*var(--s));height:calc(720px*var(--s));flex:none;scroll-margin-top:16px}
.p-slide{
  width:1280px;height:720px;position:relative;overflow:hidden;
  background:var(--page);transform:scale(var(--s));transform-origin:0 0;
  counter-increment:sl;border-radius:var(--r);
}
.p-slide .p-body{position:absolute;left:72px;right:72px;top:150px;bottom:64px}
.p-body.p-fx{display:flex;flex-direction:column;gap:20px}
.p-grow{flex:1;min-height:0}

/* header / footer */
.p-hd{position:absolute;left:72px;right:72px;top:44px}
.p-hd .p-kick{display:flex;align-items:center;gap:10px;font:700 11px/16px var(--ui);letter-spacing:.12em;color:var(--brand);text-transform:uppercase}
.p-hd .p-kick i{display:block;width:22px;height:3px;border-radius:2px;background:var(--brand)}
.p-hd h1{font:700 30px/40px var(--ui);margin-top:6px;letter-spacing:-.01em}
.p-hd .p-lead{margin-top:4px;font-size:14px;line-height:22px;color:var(--muted);max-width:none;white-space:nowrap}
.p-hd .p-legend{position:absolute;right:0;top:6px;display:flex;gap:14px;align-items:center;font-size:11.5px;line-height:16px;color:var(--ink)}
.p-hd .p-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.p-hd .p-legend i{display:inline-block;width:20px;height:12px;border-radius:3px;border:1.5px solid #E0A800;background:#FFE9A0}
.p-hd .p-legend i.p-f{border:1px solid #c7cde0;background:#fff}
.p-ft{position:absolute;left:72px;right:72px;bottom:24px;display:flex;align-items:center;justify-content:space-between;font:500 11px/16px var(--ui);color:var(--muted);letter-spacing:.04em}
.p-ft .p-lg{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.p-ft .p-pg::after{content:counter(sl,decimal-leading-zero);font-weight:700;color:var(--ink);font-size:12px}
.p-mk{width:20px;height:20px;border-radius:var(--r-sm);background:var(--brand);display:grid;place-items:center;color:#fff;font:800 10px/1 var(--ui)}

/* ---------- parts ---------- */
.p-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 24px}
.p-c.p-t{border-top:5px solid var(--brand);padding-top:16px}
.p-c.p-t.p-ok{border-top-color:var(--ok)}.p-c.p-t.p-warn{border-top-color:var(--warn)}.p-c.p-t.p-cat{border-top-color:var(--cat)}.p-c.p-t.p-gray{border-top-color:#b8b8b8}
.p-c.p-fl{display:flex;flex-direction:column}.p-push{margin-top:auto}
.p-c.p-soft{background:var(--brand-soft);border-color:var(--brand-line)}
.p-lb{font:700 11px/16px var(--ui);letter-spacing:.08em;color:var(--brand);text-transform:uppercase}
.p-lb.p-ok{color:var(--ok)}.p-lb.p-warn{color:var(--warn)}.p-lb.p-cat{color:var(--cat)}.p-lb.p-mut{color:var(--muted)}
.p-big{white-space:nowrap;font:800 40px/46px var(--ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p-big small{font:600 15px/22px var(--ui);margin-left:4px;letter-spacing:0}
.p-h2{font:600 16px/24px var(--ui)}
.p-h3{font:700 14px/22px var(--ui)}
.p-mut{color:var(--muted)}
.p-sm{font-size:12px;line-height:18px}
.p-xs{font-size:11px;line-height:16px}
.p-sep{height:1px;background:var(--line);margin:10px 0}
.p-grid{display:grid;gap:20px}
.p-g2{grid-template-columns:repeat(2,1fr)}.p-g3{grid-template-columns:repeat(3,1fr)}.p-g4{grid-template-columns:repeat(4,1fr)}.p-g5{grid-template-columns:repeat(5,1fr)}.p-g6{grid-template-columns:repeat(6,1fr)}
.p-row{display:flex;gap:20px}.p-col{display:flex;flex-direction:column;gap:16px}
.p-fill{flex:1;min-width:0}
.p-ctr{text-align:center}.p-right{text-align:right}
.p-num{font-variant-numeric:tabular-nums}

/* バッジ（MDT: 丸薬型にしない。角丸6px） */
.p-bdg{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-sm);font:500 11.5px/16px var(--ui);white-space:nowrap}
.p-bdg.p-info{background:var(--brand-soft);color:#1a47b0}.p-bdg.p-ok{background:var(--ok-soft);color:var(--ok-ink)}
.p-bdg.p-warn{background:var(--warn-soft);color:var(--warn-ink)}.p-bdg.p-cat{background:var(--cat-soft);color:var(--cat-ink)}
.p-bdg.p-gray{background:var(--surface-2);color:#4a4a4a;border:1px solid var(--line)}
.p-bdg.p-min{background:#FFEDA3;color:#5C4300;border:1px solid #F0C94A}
.p-bdg.p-line{background:#fff;border:1px solid var(--brand-line);color:var(--brand-d)}

/* 差し替え箇所（記入欄） */
.p-ph{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:var(--r-sm);background:var(--warn-soft);border:1px dashed var(--warn);color:var(--warn-ink);font:600 11px/16px var(--ui);white-space:nowrap}
.p-ph::before{content:"✎";margin-right:5px;font-size:11px}

.p-ul li{position:relative;padding-left:16px}
.p-ul li+li{margin-top:6px}
.p-ul li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:2px;background:var(--brand)}
.p-ul.p-sm li::before{top:7px}
.p-ul.p-md{font-size:14px;line-height:22px}.p-ul.p-md li{padding-left:18px}.p-ul.p-md li+li{margin-top:11px}.p-ul.p-md li::before{top:8px;width:7px;height:7px}
.p-ul.p-md2{font-size:13.5px;line-height:21px}.p-ul.p-md2 li{padding-left:16px}.p-ul.p-md2 li+li{margin-top:8px}.p-ul.p-md2 li::before{top:8px}
.p-ul.p-ok li::before{background:var(--ok)}.p-ul.p-warn li::before{background:var(--warn)}

/* 表（MDT の表: 見出しは薄い青・黒文字・11px・線 #b9d0f7。カードの先頭にあるので上線はカード枠が兼ねる） */
table.p-tb{width:100%;border-collapse:collapse;font-size:13px;line-height:20px}
.p-tb th{background:var(--th);color:#000;text-align:left;font:500 11px/16px var(--ui);padding:10px 14px;border-top:0;border-bottom:1px solid var(--th-line);white-space:nowrap}
.p-tb td{padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.p-tb tr:last-child td{border-bottom:0}
.p-tb td.p-k{font-weight:700;white-space:nowrap}
.p-tb.p-lg td{padding:14px 14px;font-size:14px;line-height:22px}.p-tb.p-md td{padding:11px 14px;font-size:13.5px;line-height:21px}
.p-tb.p-dense{font-size:11.5px;line-height:15px}.p-tb.p-dense th{padding:7px 10px}.p-tb.p-dense td{padding:4px 10px;white-space:nowrap}.p-tb.p-dense td.p-k{font-size:11.5px}.p-tb.p-dense .p-bdg{height:16px;font-size:10px;padding:0 7px}
.p-tbw{background:#fff;border:1px solid var(--line);border-top-color:var(--th-line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}

.p-num-ci{width:28px;height:28px;border-radius:25%;background:var(--brand);color:#fff;display:grid;place-items:center;font:700 13px/1 var(--ui);flex:none}
.p-ico{width:44px;height:44px;border-radius:var(--r-sm);background:var(--brand-soft);border:1px solid var(--brand-line);display:grid;place-items:center;color:var(--brand);flex:none}
.p-ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 表紙（白と青。他のページと同じトンマナ。右半分は写真） ---------- */
.p-slide.p-cover{background:linear-gradient(180deg,#fff 0%,#EEF4FF 100%)}
.p-cover .p-topbar{position:absolute;left:0;top:0;right:0;height:10px;background:var(--brand);z-index:5}
.p-cover .p-brandrow{position:absolute;left:84px;top:60px;display:flex;align-items:center;gap:12px}
.p-cover .p-brandrow .p-mk{width:38px;height:38px;border-radius:var(--r-sm);font-size:15px}
.p-cover .p-brandrow b{display:block;font:800 18px/24px var(--ui);letter-spacing:-.01em;color:var(--ink)}
.p-cover .p-brandrow div span{display:block;font:500 10.5px/16px var(--ui);color:var(--muted);letter-spacing:.12em}
.p-cover .p-tt{position:absolute;left:84px;top:190px;width:520px}
.p-cover .p-tt .p-kick{font:700 12px/16px var(--ui);letter-spacing:.2em;color:var(--brand);display:flex;align-items:center;gap:10px}
.p-cover .p-tt .p-kick i{display:block;width:26px;height:3px;border-radius:2px;background:var(--brand)}
.p-cover .p-tt h1{font:800 52px/64px var(--ui);letter-spacing:-.02em;margin-top:16px;color:var(--ink)}
.p-cover .p-tt h1 em{font-style:normal;color:var(--brand)}
.p-cover .p-tt .p-sub{font:400 16px/28px var(--ui);color:var(--muted);margin-top:18px}
.p-cover .p-chips{position:absolute;left:84px;top:508px;display:flex;gap:10px}
.p-cover .p-chips span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--r-sm);font:600 12.5px/16px var(--ui);background:#fff;color:var(--brand-d);border:1px solid var(--brand-line)}
.p-cover .p-chips span.p-o{background:var(--brand);color:#fff;border-color:var(--brand)}
.p-cover .p-meta{position:absolute;left:84px;bottom:56px;display:flex;gap:48px}
.p-cover .p-meta .p-l{font:700 10px/14px var(--ui);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.p-cover .p-meta .p-v{font:600 15px/24px var(--ui);color:var(--ink);margin-top:2px}
.p-cover .p-photo-r{position:absolute;left:640px;top:0;right:0;bottom:0;overflow:hidden}
.p-cover .p-photo-r img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* ---------- サイトマップ（カードのツリー） ---------- */
.p-tree{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center}
.p-tree .p-root{position:relative;z-index:2}
.p-tree .p-root::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:20px;margin-left:-1px;background:var(--brand-line)}
.p-tree .p-groups{position:relative;display:flex;width:100%;gap:14px;margin-top:20px;padding-top:20px}
.p-tree .p-groups::before{content:"";position:absolute;top:0;height:2px;background:var(--brand-line);left:calc(50%/var(--n));right:calc(50%/var(--n))}
.p-tree .p-groups.p-one::before{display:none}
.p-tree .p-g{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:stretch}
.p-tree .p-g::before{content:"";position:absolute;left:50%;top:-20px;width:2px;height:20px;margin-left:-1px;background:var(--brand-line)}
.p-tree .p-gh{height:32px;border-radius:var(--r-sm);background:var(--navy);color:#fff;font:700 12.5px/32px var(--ui);text-align:center;position:relative;z-index:2;letter-spacing:.04em}
.p-tree .p-leaves{position:relative;display:flex;flex-direction:column;gap:7px;padding-top:12px}
.p-tree .p-leaves::before{content:"";position:absolute;left:50%;top:0;bottom:14px;width:2px;margin-left:-1px;background:var(--brand-line)}
.p-node{position:relative;z-index:2;display:flex;align-items:center;gap:6px;min-height:30px;padding:4px 9px;border-radius:var(--r-sm);font:500 11.5px/15px var(--ui);color:var(--ink);background:#fff;border:1px solid #c7cde0}
.p-node b{flex:none;font:700 9.5px/1 var(--ui);color:#8b93a8;letter-spacing:.02em}
.p-node span{flex:1;min-width:0}
.p-node.p-m{background:#FFF3C4;border:1.5px solid #E0A800;font-weight:700;color:#4a3800}
.p-node.p-m b{color:#8a6500}
.p-node i.p-sh{flex:none;font:600 9px/1 var(--ui);font-style:normal;color:#5b6178;background:#fff;border:1px solid #c7cde0;border-radius:4px;padding:2px 4px}
.p-node.p-f{color:#4a4f66}
.p-node.p-rt{min-height:40px;font-size:14px;justify-content:center;text-align:center;padding:6px 26px;gap:10px}
.p-node.p-rt b{font-size:10.5px}

/* ---------- ガント ---------- */
.p-gt{display:grid;grid-template-columns:210px 1fr;border:1px solid var(--line);border-top-color:var(--th-line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.p-gt .p-gh{background:var(--th);border-bottom:1px solid var(--th-line);font:500 11px/16px var(--ui);padding:10px 14px}
.p-gt .p-gm{display:grid;background:var(--th);border-bottom:1px solid var(--th-line)}
.p-gt .p-gm div{font:500 11px/16px var(--ui);padding:10px 0;text-align:center;border-left:1px solid var(--th-line)}
.p-gt .p-gm div:first-child{border-left:0}
.p-gt .p-gl{padding:0 14px;height:48px;border-bottom:1px solid var(--line);font-weight:700;display:flex;flex-direction:column;justify-content:center;font-size:13px;line-height:18px}
.p-gt .p-gl small{font-weight:400;color:var(--muted);font-size:11px;line-height:15px}
.p-gt .p-gc{position:relative;height:48px;border-bottom:1px solid var(--line)}
.p-gt .p-gl.p-last,.p-gt .p-gc.p-last{border-bottom:0}
.p-gt .p-bar{position:absolute;top:12px;height:24px;border-radius:var(--r-sm);background:var(--brand);color:#fff;font:600 11px/24px var(--ui);padding:0 8px;white-space:nowrap;overflow:hidden}
.p-gt .p-bar.p-ok{background:var(--ok)}.p-gt .p-bar.p-cat{background:var(--cat)}.p-gt .p-bar.p-warn{background:var(--warn)}.p-gt .p-bar.p-gray{background:#8b93a8}
.p-gt .p-ms{position:absolute;top:14px;width:20px;height:20px;transform:rotate(45deg);background:var(--warn);border-radius:4px}

/* ---------- 御見積書 ---------- */
.p-est .p-party{font:700 18px/26px var(--ui)}
.p-est .p-kv{display:grid;grid-template-columns:76px 1fr;row-gap:6px;font-size:12px;line-height:18px}
.p-est .p-kv dt{color:var(--muted)}.p-est .p-kv dd{margin:0;font-weight:600}
.p-est .p-amt{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:10px 0}
.p-est .p-amt .p-v{font:800 32px/40px var(--ui);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.p-est .p-tb tr.p-sum td{background:var(--surface-2);font-weight:600}
.p-est .p-tb tr.p-tot td{background:var(--brand-soft);font-weight:800;font-size:15px;border-top:1px solid var(--brand-line)}

/* ---------- 印刷 / 画面 ---------- */
@page{size:1280px 720px;margin:0}
@media print{
  :root{--s:1 !important}
  body{background:none}
  .p-deck{display:block;padding:0}
  .p-frame{break-after:page;page-break-after:always;margin:0}
  .p-slide{border-radius:0}
  .p-hint{display:none !important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.p-hint{position:fixed;right:16px;bottom:14px;background:var(--navy);color:#fff;border-radius:var(--r-sm);font:500 12px/18px var(--ui);padding:8px 14px;opacity:.9;z-index:10}
.p-hint kbd{font:700 11px var(--ui);background:rgba(255,255,255,.16);border-radius:4px;padding:1px 6px;margin:0 2px}

/* ミニマム構成のサイトマップは画面が少ないので、カードを大きくする */
.p-tree.p-lg .p-node{min-height:40px;font-size:13.5px;line-height:18px;padding:6px 12px}
.p-tree.p-lg .p-node.p-rt{min-height:48px;font-size:16px}
.p-tree.p-lg .p-gh{height:36px;line-height:36px;font-size:13.5px}
.p-tree.p-lg .p-leaves{gap:10px}

/* 御見積書は、前提条件を入れるために表を少し詰める */
.p-est .p-tb{font-size:12.5px;line-height:18px}
.p-est .p-tb th{padding:8px 12px}
.p-est .p-tb td{padding:6px 12px}
.p-est .p-tb tr.p-tot td{font-size:14px}

/* ---------- モックの画面写真 ---------- */
.p-phpage{display:flex;gap:40px;align-items:flex-start}
.p-phl{width:318px;height:490px;flex:none}
.p-phrow{display:flex;gap:30px;flex:1;justify-content:center}
.p-phw{display:flex;flex-direction:column;align-items:center;width:208px}
.p-phone{position:relative;width:208px;padding:6px;border-radius:40px;background:#0d0f14;border:2px solid #9aa1ad;box-shadow:0 18px 34px rgba(20,30,70,.28),inset 0 0 0 1px #2b2f38}
.p-phone::before{content:"";position:absolute;left:-4px;top:88px;width:3px;height:30px;border-radius:2px;background:#9aa1ad}
.p-phone::after{content:"";position:absolute;right:-4px;top:120px;width:3px;height:52px;border-radius:2px;background:#9aa1ad}
.p-phone .p-scr{border-radius:33px;overflow:hidden;background:#fff}
.p-phone .p-scr img{width:100%;display:block}
.p-phone .p-sb{height:27px;display:flex;align-items:center;justify-content:space-between;padding:3px 20px 0 22px;background:#fff;font:700 11px/1 var(--ui);color:#111}
.p-phone .p-sb em{font-style:normal;display:flex;align-items:center;gap:4px;font-size:9.5px}
.p-phone .p-sb b{display:block;width:17px;height:8px;border-radius:2.5px;border:1.2px solid #111;position:relative}
.p-phone .p-sb b::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:11px;border-radius:1px;background:#111}
.p-phone .p-di{position:absolute;z-index:2;top:13px;left:50%;transform:translateX(-50%);width:64px;height:19px;border-radius:12px;background:#000}
.p-phc{margin-top:12px;text-align:center;font:700 13px/20px var(--ui)}
.p-phc span{display:block;font:500 11.5px/16px var(--ui);color:var(--muted)}
.p-pcrow{display:flex;gap:24px}
.p-pcw{flex:1;min-width:0}
.p-pcs{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 10px 26px rgba(20,30,70,.16);background:#fff}
.p-pcs img{display:block;width:100%;aspect-ratio:1440/900;object-fit:cover}
.p-pcc{margin-top:10px;font:700 13px/20px var(--ui)}
.p-pcc span{margin-left:10px;font:500 12px/18px var(--ui);color:var(--muted)}
.p-pcpts{display:flex;gap:28px;margin-top:14px;padding:14px 20px}
.p-pcpts>div{flex:1;font-size:12.5px;line-height:19px;padding-left:16px;position:relative}
.p-pcpts i{position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.p-mockbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 24px;border-radius:var(--r);border:1px solid var(--brand-line);background:var(--brand-soft)}
.p-mockbtn{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 22px;border-radius:var(--r-sm);background:var(--brand);color:#fff;font:700 15px/22px var(--ui);text-decoration:none}
.p-mockbtn span{font:500 12px/16px var(--lat);opacity:.9}
.p-mockbtn:hover{background:var(--brand-d);color:#fff}