/* ヒーローが使う動く見本の部品（工場の3D・スケジューラー・売上・見積・勤怠・注文書）の見た目。会社ページ（company.html）で使う。
   出どころは /js/lai-samples-parts.js の冒頭（ツクデジのLPから写したもの。改変の一覧もそこ）。ヒーローの枠そのものの見た目は lai-samples-hero.css。
   すべて外枠 .lai-smp の中だけに効かせる（company.css にも .q .req .b などの短い名前があり、くくらずに置くと互いに崩れる）。
   :root は書き換えない。色・影の変数は .lai-smp の中に持つ。
   文字は 13px を下回らない（会社ページの決まり）。Canvas と図面の SVG の中の文字は絵の一部なので別。
   キーフレームは smp- を付ける（ページ側の pop・flash などと名前がぶつからないように）。 */
.lai-smp { --ink:#243044; --inksoft:#4A5568; --paper:#F7F5EF; --card:#FFFFFF;
  --line:#E6E2D6; --linesoft:#F0EDE4;
  --green:#107C41; --greendark:#0B5C30; --greenbg:#EDF7F0; --greenline:#BFE3CC; --mint:#6EE7A8;
  --hanko:#C73E3A; --hankobg:#FBEDEC; --amber:#9A6206; --amberbg:#FDF3E1; --mute:#7A7670;
  --night:#151E2D; --deep:#1B2331; --white:#FFFFFF; --codeY:#F5C26B; --codeB:#8EC5FF;
  --maru:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;
  --sans:'Noto Sans JP','Hiragino Sans','Yu Gothic','Meiryo',sans-serif;
  --hand:'Klee One','Hiragino Mincho ProN',serif;
  --mono:'JetBrains Mono','Noto Sans JP',ui-monospace,Consolas,monospace;
  --shadow-sm:0 1px 3px rgba(30,42,58,.06),0 4px 12px rgba(30,42,58,.08);
  --shadow-md:0 2px 8px rgba(30,42,58,.08),0 12px 32px rgba(30,42,58,.10);
  --shadow-lg:0 4px 12px rgba(30,42,58,.08),0 24px 56px rgba(30,42,58,.14);
  --ease:cubic-bezier(.22,1,.36,1); }
:where(.lai-smp) button { font:inherit; }
@keyframes smp-blink { 0%,100% { opacity:1; } 50% { opacity:.3; } }
@keyframes smp-pop { from { opacity:0; transform:translateY(8px) scale(.97); } }
@keyframes smp-flash { from { background:rgba(110,231,168,.6); } to { background:rgba(16,124,65,.06); } }
.lai-smp .av { flex:none; width:30px; height:30px; border-radius:50%; background:#E9E5DA; color:var(--inksoft); display:grid; place-items:center; font-family:var(--maru); font-weight:900; font-size:13px; }
/* 見本：数字のカード（3D・スケジューラーで共通） */
.lai-smp .kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.lai-smp .kpi { background:var(--white); border:1px solid #E3E8E5; border-radius:10px; padding:6px 12px; min-width:0; }
.lai-smp .kpi small { display:block; font-size:13px; font-weight:700; color:var(--mute); line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lai-smp .kpi b { display:block; font-family:var(--maru); font-size:20px; font-weight:900; line-height:1.35; white-space:nowrap; font-variant-numeric:tabular-nums; transition:color .3s; }
.lai-smp .kpi b em { font-style:normal; font-family:var(--sans); font-size:13px; font-weight:700; margin-left:4px; }
.lai-smp .kpi b.ng { color:var(--hanko); }
.lai-smp .kpi b.ok { color:var(--green); }
/* 工場の3Dマップ */
.lai-smp .f3d { position:relative; height:340px; border:1px solid #E3E8E5; border-radius:10px; overflow:hidden; background:radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #EEF2F0 70%, #E4EAE7 100%); }
.lai-smp .f3d canvas { display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
.lai-smp .f3d canvas:active { cursor:grabbing; }
.lai-smp .f3d-card { position:absolute; left:0; top:0; z-index:2; width:196px; padding:8px 12px 9px; background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-lg); font-size:13px; line-height:1.6; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; pointer-events:none; }
.lai-smp .f3d-card.on { opacity:1; transform:none; }
.lai-smp .f3d-card b { display:flex; justify-content:space-between; align-items:center; gap:8px; font-family:var(--maru); font-size:14px; margin-bottom:2px; }
.lai-smp .stt { font-family:var(--sans); font-size:13px; font-weight:700; color:var(--white); border-radius:20px; padding:0 8px; white-space:nowrap; }
.lai-smp .stt.run { background:#18A058; }
.lai-smp .stt.setup { background:#B87708; }
.lai-smp .stt.stop { background:#C73E3A; }
.lai-smp .f3d-card .rate { display:block; height:5px; margin:2px 0 5px; border-radius:3px; background:#EEF1EF; overflow:hidden; }
.lai-smp .f3d-card .rate i { display:block; height:100%; background:var(--green); }
.lai-smp .f3d-card .nt { display:block; margin-top:4px; padding-top:4px; border-top:1px dashed var(--line); font-weight:700; color:var(--inksoft); }
/* 立体の見本の上に出す操作の案内（最初に触ると消える） */
.lai-smp .hint3d { position:absolute; left:50%; bottom:12px; z-index:3; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; font-weight:700; color:var(--white); background:rgba(36,48,68,.86); border-radius:20px; padding:5px 14px 5px 10px; pointer-events:none; box-shadow:0 4px 14px rgba(36,48,68,.18); transition:opacity .4s, transform .4s; }
.lai-smp .hint3d i { font-style:normal; font-size:14px; }
.lai-smp .hint3d { animation:smp-hint3d 2.4s ease-in-out infinite; }
@keyframes smp-hint3d { 0%, 100% { transform:translateX(-50%); } 50% { transform:translateX(-50%) translateY(-3px); } }
.lai-smp .hint3d.off { opacity:0; animation:none; }
@container (max-width:420px) {
  .lai-smp .hint3d { font-size:13px; bottom:8px; }
}
/* 生産スケジューラー */
.lai-smp .s-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lai-smp .s-sub { font:inherit; cursor:pointer; font-size:13px; font-weight:700; color:var(--greendark); background:var(--white); border:1.5px solid var(--greenline); border-radius:8px; padding:6px 12px; white-space:nowrap; }
.lai-smp .s-sub:hover { background:var(--greenbg); }
.lai-smp .s-msg { flex-basis:100%; font-size:13px; font-weight:700; color:var(--inksoft); min-height:1.5em; }
.lai-smp .gantt { background:var(--white); border:1px solid #E3E8E5; border-radius:10px; padding:6px 10px 6px; }
.lai-smp .g-body { position:relative; }
.lai-smp .g-row { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:stretch; border-top:1px solid #EEF1EF; }
.lai-smp .g-row:first-child { border-top:0; }
.lai-smp .g-row span { align-self:center; font-size:13px; font-weight:700; color:var(--inksoft); white-space:nowrap; }
.lai-smp .g-row i { background:repeating-linear-gradient(90deg, #EEF1EF 0 1px, transparent 1px calc(100% / 6)); }
.lai-smp .g-lane { position:absolute; left:58px; right:0; top:0; bottom:0; }
.lai-smp .g-bar { position:absolute; display:flex; align-items:center; padding:0 6px; border-radius:6px; color:var(--white); font-family:var(--mono); font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.18); transition:left .75s var(--ease), top .75s var(--ease), width .75s var(--ease); }
.lai-smp .g-bar.clash { background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.32) 0 4px, transparent 4px 8px) !important; }
.lai-smp .g-bar.late { outline:2px solid var(--hanko); outline-offset:1px; }
.lai-smp .g-bar.rush.new { animation:smp-pop .45s var(--ease) both; }
@media (max-width:560px) {
  .lai-smp .g-bar { justify-content:center; padding:0 2px; }
  .lai-smp .g-bar span { display:none; }
}
.lai-smp .g-axis { display:grid; grid-template-columns:58px minmax(0,1fr); margin-top:2px; }
.lai-smp .g-axis div { display:flex; justify-content:space-between; font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums; }
.lai-smp .g-axis i { font-style:normal; }
.lai-smp .g-key { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; font-weight:700; color:var(--mute); }
.lai-smp .g-key i { display:inline-block; width:18px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; background:#8CA0B3; }
.lai-smp .g-key .k1 { outline:2px solid var(--hanko); outline-offset:1px; }
.lai-smp .g-key .k2 { background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 3px, transparent 3px 6px); }
@media (max-width:560px) {
  .lai-smp .f3d { height:270px; }
  .lai-smp .kpi { padding:6px 9px; }
  .lai-smp .kpi b { font-size:17px; }
  .lai-smp .kpi b em { display:none; }
}
.lai-smp .x-ng { color:var(--hanko); font-weight:700; }
.lai-smp .xchip { font:inherit; cursor:pointer; font-size:13px; font-weight:700; color:var(--inksoft); background:var(--white); border:1.5px solid var(--line); border-radius:20px; padding:2px 12px; white-space:nowrap; }
.lai-smp .xchip.on { color:var(--white); background:var(--green); border-color:var(--green); }
/* 売上・見積・勤怠の見本が共通で使う部品 */
.lai-smp .nx { display:grid; gap:10px; }
.lai-smp .nx-tools { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; }
.lai-smp .nx-tools .gbtn { font-size:13.5px; padding:6px 14px; }
.lai-smp .nx-tip { font-size:13px; font-weight:700; color:var(--mute); }
.lai-smp .nx-msg { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:13px; min-height:1.6em; }
.lai-smp .kpi b em { font-style:normal; font-family:var(--sans); font-size:13px; font-weight:700; margin-left:6px; }
.lai-smp .cr-btns { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.lai-smp .cr-btns b { min-width:62px; text-align:center; font-family:var(--mono); font-size:15px; color:var(--ink); }
.lai-smp .cr-b { font:inherit; cursor:pointer; font-size:13px; font-weight:700; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:9px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px; transition:transform .1s, background .2s; }
.lai-smp .cr-b.on { background:var(--green); border-color:var(--green); color:#fff; }
.lai-smp .cr-b.press { transform:scale(.94); background:var(--greenbg); }
.lai-smp .cr-b i { width:10px; height:10px; border-radius:3px; }
/* 売上ダッシュボード */
.lai-smp .sdb { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px; align-items:stretch; }
.lai-smp .sdb-chart { position:relative; background:var(--white); border:1px solid #E3E8E5; border-radius:10px; padding:34px 10px 8px; }
.lai-smp .sdb-bars { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:4px; align-items:end; height:150px; }
.lai-smp .sdb-bar { display:grid; grid-template-rows:1fr auto; gap:3px; height:100%; padding:0; border:0; background:none; cursor:pointer; font:inherit; }
.lai-smp .sdb-bar i { align-self:end; display:block; border-radius:4px 4px 1px 1px; background:#A6D8B8; transition:height .6s var(--ease), background .3s; }
.lai-smp .sdb-bar.gross i { background:#9FC1E0; }
.lai-smp .sdb-bar.on i { background:var(--green); }
.lai-smp .sdb-bar.gross.on i { background:#2E6DA4; }
.lai-smp .sdb-bar span { font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums; }
.lai-smp .sdb-tip { position:absolute; left:10px; top:8px; font-size:13px; white-space:nowrap; }
.lai-smp .sdb-tip em { font-style:normal; font-weight:700; margin-left:8px; }
.lai-smp .sdb-tip em.up { color:var(--green); }
.lai-smp .sdb-tip em.dn { color:var(--hanko); }
.lai-smp .sdb-top { background:var(--white); border:1px solid #E3E8E5; border-radius:10px; padding:10px 12px; display:grid; gap:8px; align-content:start; }
.lai-smp .sdb-top h4 { margin:0; font-size:13px; color:var(--mute); }
.lai-smp .sdb-row { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:8px; align-items:center; font-size:13px; }
.lai-smp .sdb-row i { height:8px; border-radius:4px; background:#EEF1EF; overflow:hidden; }
.lai-smp .sdb-row i b { display:block; height:100%; background:var(--green); border-radius:4px; }
.lai-smp .sdb-row em { font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; }
.lai-smp .sdb-row em { white-space:nowrap; }
/* 見積書の作成 */
.lai-smp .quo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:start; }
.lai-smp .quo-l { display:grid; gap:6px; }
.lai-smp .quo-it { display:flex; justify-content:space-between; align-items:center; gap:8px; background:var(--white); border:1px solid #E3E8E5; border-radius:10px; padding:6px 10px; font-size:13px; font-weight:700; }
.lai-smp .quo-it small { display:block; font-size:13px; font-weight:500; color:var(--mute); }
.lai-smp .quo-it .cr-b { padding:2px 10px; }
.lai-smp .quo-q { min-width:30px; text-align:center; font-family:var(--mono); }
.lai-smp .quo-l .gbtn { justify-self:start; font-size:13.5px; padding:6px 14px; }
.lai-smp .quo-doc { position:relative; background:#FFFDF8; border:1px solid var(--line); border-radius:6px; padding:12px 14px; box-shadow:var(--shadow-sm); font-size:13px; }
.lai-smp .quo-h { display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:4px; }
.lai-smp .quo-h b { letter-spacing:.3em; font-size:15px; }
.lai-smp .quo-h span { font-size:13px; color:var(--mute); font-family:var(--mono); }
.lai-smp .quo-to { margin:6px 0; font-weight:700; }
.lai-smp .quo-doc table { width:100%; border-collapse:collapse; }
.lai-smp .quo-doc td { border-bottom:1px solid #E6E2D6; padding:3px 4px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lai-smp .quo-doc td.r { text-align:right; }
.lai-smp .quo-doc tr.new td { animation:smp-flash 1.2s ease-out; }
.lai-smp .quo-empty { color:#B9BEC4; white-space:normal !important; }
.lai-smp .quo-sum { display:grid; grid-template-columns:1fr auto; gap:2px 12px; margin-top:6px; font-variant-numeric:tabular-nums; }
.lai-smp .quo-sum b { text-align:right; }
.lai-smp .quo-sum .t { font-size:14.5px; font-weight:900; color:var(--greendark); border-top:1px solid var(--ink); padding-top:2px; }
.lai-smp .quo-stamp { position:absolute; right:12px; top:34px; width:34px; height:34px; border:2px solid var(--hanko); color:var(--hanko); border-radius:4px; display:grid; place-items:center; font-size:13px; font-weight:900; transform:rotate(-6deg); opacity:.8; }
/* 勤怠の集計 */
.lai-smp .wkt { display:grid; gap:4px; background:var(--white); border:1px solid #E3E8E5; border-radius:10px; padding:8px 10px; }
.lai-smp .wkt-row { display:grid; grid-template-columns:44px minmax(0,1fr) 50px; gap:8px; align-items:center; font-size:13px; }
.lai-smp .wkt-row > span { font-weight:700; color:var(--inksoft); }
.lai-smp .wkt-row > b { text-align:right; font-family:var(--mono); font-size:13px; }
.lai-smp .wkt-tr { position:relative; height:16px; background:#F3F5F4; border-radius:4px; }
.lai-smp .wkt-tr i { position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:#6CBB8E; transition:width .7s var(--ease), background .3s; }
.lai-smp .wkt-tr i.warn { background:#E0A33A; }
.lai-smp .wkt-tr i.ng { background:var(--hanko); }
.lai-smp .wkt-tr u { position:absolute; top:-3px; bottom:-3px; left:90%; border-left:2px dashed var(--hanko); }
.lai-smp .wkt-ax .wkt-tr { background:none; height:14px; }
.lai-smp .wkt-ax em { position:absolute; transform:translateX(-50%); font-style:normal; font-size:13px; color:var(--mute); white-space:nowrap; }
.lai-smp .wkt-ax em.lim { color:var(--hanko); font-weight:700; }
@container (max-width:520px) {
  .lai-smp .sdb, .lai-smp .quo { grid-template-columns:1fr; }
  .lai-smp .sdb-bar span { font-size:13px; }
}
.lai-smp .chip { font-size:13px; font-weight:700; color:var(--amber); background:var(--amberbg); border-radius:20px; padding:1px 10px; }
.lai-smp .chip.ok { color:var(--greendark); background:var(--greenbg); }
.lai-smp .box { background:var(--white); border:1px solid #E3E8E5; border-radius:10px; }
.lai-smp .dtbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.lai-smp .dtbl th { text-align:left; font-weight:500; color:var(--mute); background:#FAFBFA; padding:6px 12px; font-size:13px; }
.lai-smp .dtbl td { padding:7px 12px; border-top:1px solid #EEF1EF; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lai-smp .dtbl .r { text-align:right; }
.lai-smp .dtbl tr.hit td { animation:smp-flash 1.2s ease-out; font-weight:700; }
.lai-smp .dtbl tr.new { animation:smp-pop .4s var(--ease) both; }
.lai-smp .done-chip { display:inline-block; font-size:13px; font-weight:700; color:var(--white); background:var(--green); border-radius:8px; padding:6px 12px; animation:smp-pop .4s var(--ease) both; }
.lai-smp .tbl-scroll { overflow-x:auto; overflow-y:hidden; }
.lai-smp .gbtn { font:inherit; cursor:pointer; border:0; background:var(--green); color:var(--white); font-weight:700; font-size:14.5px; border-radius:8px; padding:8px 18px; box-shadow:0 2px 0 var(--greendark); white-space:nowrap; transition:transform .1s, box-shadow .1s; }
.lai-smp .gbtn:hover { transform:translateY(-1px); box-shadow:0 3px 0 var(--greendark); }
.lai-smp .gbtn:active, .lai-smp .gbtn.press { transform:translateY(2px); box-shadow:0 0 0 var(--greendark); }
/* 注文書の読み取り（ヒーローの3つ目の例） */
.lai-smp .ocr { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:14px; align-items:start; }
@media (max-width:620px) {
  .lai-smp .ocr { grid-template-columns:1fr; }
}
.lai-smp .paper { position:relative; overflow:hidden; background:#FFFDF8; border:1px solid var(--line); border-radius:6px; padding:14px 14px 16px; box-shadow:var(--shadow-sm); transform:rotate(-1deg); }
.lai-smp .paper-t { font-weight:700; letter-spacing:.3em; font-size:14px; margin-bottom:4px; }
.lai-smp .paper-to { font-family:var(--hand); font-size:13px; color:var(--inksoft); margin-bottom:8px; }
.lai-smp .paper table { width:100%; border-collapse:collapse; }
.lai-smp .paper th { background:#F2EFE6; border:1px solid #D8D2C2; font-weight:700; color:var(--inksoft); padding:2px 6px; font-size:13px; text-align:left; }
.lai-smp .paper td { border:1px solid #D8D2C2; padding:3px 6px; font-family:var(--hand); font-size:14px; color:#1E2D4A; white-space:nowrap; }
.lai-smp .paper .hanko { position:absolute; right:12px; top:10px; width:38px; height:38px; border:2px solid var(--hanko); color:var(--hanko); border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:900; transform:rotate(-12deg); opacity:.85; font-family:var(--maru); }
.lai-smp .scan { position:absolute; left:0; right:0; top:0; height:40px; background:linear-gradient(transparent, rgba(110,231,168,.35)); border-bottom:2px solid var(--mint); box-shadow:0 0 18px var(--mint); opacity:0; pointer-events:none; }
.lai-smp .scanning .scan { opacity:1; animation:smp-scanmv 1.6s ease-in-out 2; }
@keyframes smp-scanmv { 0% { transform:translateY(-40px); } 50% { transform:translateY(190px); } 100% { transform:translateY(-40px); } }
.lai-smp .paper tr.hl td { box-shadow:inset 0 0 0 2px var(--mint); background:rgba(110,231,168,.18); }
@media (prefers-reduced-motion: reduce) {
  .lai-smp *, .lai-smp *::before, .lai-smp *::after { animation:none !important; transition:none !important; }
}