/* SaaS風デモ画面 第2版（2026-10-17）。部品で組み、枠の幅に合わせて全体を拡大・縮小する。
   寸法はすべて em。.sx の文字の大きさ（枠の幅の1.25%）が基準。アイコンは Lucide（ISCライセンス）の形 */
.sx-wrap{container-type:inline-size;width:100%}
.sx{--ink:#0f1b2d;--t:#3b4658;--m:#6b7586;--line:#e7eaf0;--soft:#f6f7fa;--navy:#0b2350;--gold:#b08a3e;--gold-ink:#8a6820;--gold-bg:#faf3e3;--ok:#1f7a55;--okbg:#e8f4ee;
 position:relative;font-size:1.25cqw;padding:3.2em 3.4em 3.6em;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;line-height:1.5;letter-spacing:.01em;
 background:linear-gradient(160deg,#0e2a5c 0%,#071f45 55%,#06183a 100%);border-radius:1.2em;overflow:hidden}
.sx::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:3em 3em;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.sx *{box-sizing:border-box;margin:0}
.sx .ic{width:1.15em;height:1.15em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* アプリのウィンドウ */
.sx-app{position:relative;z-index:1;display:grid;grid-template-columns:15.5em 1fr;width:80%;min-height:40em;border-radius:1em;background:#fff;overflow:hidden;
 box-shadow:0 0 0 1px rgba(255,255,255,.08),0 2.4em 5em rgba(0,0,0,.35),0 .6em 1.4em rgba(0,0,0,.18)}
.sx-side{display:flex;flex-direction:column;gap:1.1em;padding:1.1em .9em;background:var(--soft);border-right:1px solid var(--line)}
.sx-ws{display:flex;align-items:center;gap:.6em;padding:.35em .4em}
.sx-ws-logo{width:1.9em;height:1.9em;border-radius:.5em;background:linear-gradient(135deg,#c9a253,#9a742c);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95em}
.sx-ws b{font-size:.92em;font-weight:700;letter-spacing:.04em}
.sx-ws small{display:block;font-size:.7em;color:var(--m);letter-spacing:0}
.sx-ws .ic{margin-left:auto;color:var(--m);width:1em;height:1em}
.sx-find{display:flex;align-items:center;gap:.5em;padding:.5em .7em;border-radius:.55em;background:#fff;border:1px solid var(--line);color:var(--m);font-size:.8em}
.sx-find kbd{margin-left:auto;padding:0 .4em;border-radius:.3em;border:1px solid var(--line);font:inherit;font-size:.85em}
.sx-nav{display:grid;gap:.15em}
.sx-nav a{display:flex;align-items:center;gap:.65em;padding:.5em .65em;border-radius:.55em;color:var(--t);font-size:.86em;text-decoration:none}
.sx-nav a.on{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 1px 2px rgba(15,27,45,.08),0 0 0 1px var(--line)}
.sx-nav a.on .ic{color:var(--gold)}
.sx-nav a em{margin-left:auto;font-style:normal;font-size:.8em;padding:0 .45em;border-radius:99em;background:#e9edf4;color:var(--t)}
.sx-label{font-size:.7em;font-weight:700;letter-spacing:.08em;color:var(--m);padding:0 .9em}
.sx-recent{display:grid;gap:.1em}
.sx-recent span{display:block;padding:.4em .9em;font-size:.78em;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-me{margin-top:auto;display:flex;align-items:center;gap:.6em;padding:.6em .5em;border-top:1px solid var(--line)}
.sx-me b{display:block;font-size:.8em}
.sx-me small{font-size:.68em;color:var(--m)}

.sx-av{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;font-size:.72em;font-weight:700;color:#fff;flex:0 0 auto}
.sx-av.a1{background:#3d5a99}.sx-av.a2{background:#b08a3e}.sx-av.a3{background:#2f7a6b}.sx-av.a4{background:#7a5aa6}

.sx-main{display:flex;flex-direction:column;min-width:0}
.sx-top{display:flex;align-items:center;gap:.8em;padding:.85em 1.4em;border-bottom:1px solid var(--line)}
.sx-crumb{font-size:.82em;color:var(--m)}
.sx-crumb b{color:var(--ink);font-weight:700}
.sx-stack{margin-left:auto;display:flex}
.sx-stack .sx-av{border:.15em solid #fff;margin-left:-.45em}
.sx-share{display:flex;align-items:center;gap:.4em;padding:.45em .8em;border-radius:.5em;border:1px solid var(--line);font-size:.8em;font-weight:700;color:var(--t)}

.sx-thread{flex:1;display:flex;flex-direction:column;gap:1.1em;padding:1.4em 6.2em 1.4em 1.6em}
.sx-q{align-self:flex-end;display:flex;align-items:flex-end;gap:.6em}
.sx-q p{padding:.7em 1em;border-radius:1em 1em .25em 1em;background:var(--navy);color:#fff;font-size:.92em}
.sx-ans{border:1px solid var(--line);border-radius:.9em;background:#fff;box-shadow:0 1px 2px rgba(15,27,45,.04)}
.sx-ans-head{display:flex;align-items:center;gap:.55em;padding:.75em 1em;border-bottom:1px solid var(--line)}
.sx-ans-head .ic{color:var(--gold)}
.sx-ans-head b{font-size:.86em}
.sx-badge{display:inline-flex;align-items:center;gap:.3em;padding:.15em .6em;border-radius:99em;font-size:.72em;font-weight:700}
.sx-badge.gold{background:var(--gold-bg);color:var(--gold-ink)}
.sx-badge.ok{background:var(--okbg);color:var(--ok)}
.sx-ans-head .sx-badge{margin-left:auto}
.sx-ans-body{padding:.9em 1em 1em}
.sx-ans-body>p{font-size:.9em;color:var(--t)}
.sx-ans-body mark{background:linear-gradient(transparent 60%,#f1e2bd 60%);color:var(--ink);font-weight:700}
.sx-rule{width:100%;margin:.8em 0;border-collapse:collapse;font-size:.8em}
.sx-rule th,.sx-rule td{padding:.5em .75em;border:1px solid var(--line);text-align:left}
.sx-rule th{background:var(--soft);color:var(--m);font-weight:700}
.sx-rule td:last-child{font-weight:700;color:var(--navy)}
.sx-cites{display:flex;flex-wrap:wrap;gap:.45em}
.sx-cite{display:inline-flex;align-items:center;gap:.4em;padding:.3em .65em;border-radius:.45em;background:var(--soft);border:1px solid var(--line);font-size:.76em;font-weight:700;color:var(--t)}
.sx-cite i{font-style:normal;display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:.3em;background:var(--navy);color:#fff;font-size:.8em}
.sx-actions{display:flex;align-items:center;gap:.9em;padding:.6em 1em;border-top:1px solid var(--line);color:var(--m);font-size:.76em}
.sx-actions span{display:inline-flex;align-items:center;gap:.35em}
.sx-actions .sx-time{margin-left:auto}
.sx-input{margin:0 1.6em 1.3em;display:flex;align-items:center;gap:.7em;padding:.7em .7em .7em 1em;border-radius:.8em;border:1px solid #d9dee7;box-shadow:0 1px 2px rgba(15,27,45,.04);color:var(--m);font-size:.86em}
.sx-send{margin-left:auto;width:2.1em;height:2.1em;border-radius:.55em;background:var(--navy);color:#fff;display:grid;place-items:center}

/* 重ねるカード */
.sx-float{position:absolute;z-index:2;border-radius:.9em;background:#fff;box-shadow:0 1.6em 3.2em rgba(0,0,0,.28),0 .3em .8em rgba(0,0,0,.12),0 0 0 1px rgba(15,27,45,.06)}
.sx-doc{right:2.4em;top:13.5em;width:20.5em;padding:1em 1.1em}
.sx-doc-head{display:flex;align-items:center;gap:.55em;margin-bottom:.7em}
.sx-doc-icon{width:2.2em;height:2.2em;border-radius:.55em;background:var(--gold-bg);color:var(--gold-ink);display:grid;place-items:center}
.sx-doc-head b{display:block;font-size:.84em}
.sx-doc-head small{font-size:.7em;color:var(--m)}
.sx-doc-quote{padding:.7em .8em;border-left:.22em solid var(--gold);border-radius:0 .5em .5em 0;background:var(--soft);font-size:.8em;color:var(--t);line-height:1.65}
.sx-doc-quote b{color:var(--ink)}
.sx-doc-foot{display:flex;align-items:center;gap:.4em;margin-top:.7em;font-size:.72em;color:var(--m)}
.sx-doc-foot .sx-badge{margin-left:auto}
.sx-stat{left:2.2em;bottom:2.2em;width:19em;padding:1em 1.1em}
.sx-stat-top{display:flex;align-items:baseline;justify-content:space-between}
.sx-stat-top small{font-size:.74em;color:var(--m);font-weight:700}
.sx-stat-top .sx-badge{font-size:.7em}
.sx-stat-num{display:flex;align-items:baseline;gap:.35em;margin:.2em 0 .6em}
.sx-stat-num b{font-size:2em;font-weight:800;letter-spacing:-.01em;font-feature-settings:"tnum"}
.sx-stat-num span{font-size:.78em;color:var(--m)}
.sx-bars{display:flex;align-items:flex-end;gap:.35em;height:3em}
.sx-bars i{flex:1;border-radius:.2em .2em 0 0;background:#e4e8f0}
.sx-bars i.on{background:linear-gradient(180deg,#c9a253,#a07a32)}
.sx-stat-legend{display:flex;justify-content:space-between;margin-top:.4em;font-size:.66em;color:var(--m)}

/* 画面に入ったときの動き（動きを減らす設定では止める） */
@media (prefers-reduced-motion:no-preference){
 .sx-wrap.is-play .sx-ans{animation:sx-in .7s cubic-bezier(.2,.7,.25,1) .35s both}
 .sx-wrap.is-play .sx-doc{animation:sx-in .7s cubic-bezier(.2,.7,.25,1) .9s both}
 .sx-wrap.is-play .sx-stat{animation:sx-in .7s cubic-bezier(.2,.7,.25,1) 1.2s both}
 .sx-wrap.is-play .sx-bars i{animation:sx-grow .6s cubic-bezier(.2,.7,.25,1) 1.5s both;transform-origin:bottom}
}
@keyframes sx-in{from{opacity:0;transform:translateY(1em)}to{opacity:1;transform:none}}
@keyframes sx-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* 枠が狭いとき（スマートフォンなど）：左のメニューを外し、重ねるカードを下に並べる */
@container (max-width:640px){
 .sx{font-size:3.1cqw;padding:1.6em 1.2em}
 .sx-app{width:100%;grid-template-columns:1fr;min-height:0}
 .sx-side,.sx-stack,.sx-share,.sx-rule tr:nth-child(4){display:none}
 .sx-thread{padding:1em}
 .sx-input{margin:0 1em 1em}
 .sx-float{position:relative;inset:auto;width:auto;margin-top:1em}
 .sx-stat{display:none}
}

/* 現場点検・写真報告 */
.sx-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;padding:1.2em 6.2em 0 1.6em}
.sx-kpi{padding:.8em 1em;border:1px solid var(--line);border-radius:.8em;background:#fff}
.sx-kpi small{display:flex;align-items:center;gap:.4em;font-size:.74em;font-weight:700;color:var(--m)}
.sx-kpi small .ic{width:1.1em;height:1.1em}
.sx-kpi b{display:block;margin-top:.15em;font-size:1.7em;font-weight:800;letter-spacing:-.01em;font-feature-settings:"tnum"}
.sx-kpi b span{font-size:.45em;font-weight:700;color:var(--m);margin-left:.2em}
.sx-kpi.warn b{color:var(--gold-ink)}
.sx-kpi .sx-meter{height:.35em;margin-top:.5em;border-radius:99em;background:#edf0f5;overflow:hidden}
.sx-kpi .sx-meter i{display:block;height:100%;border-radius:inherit;background:var(--navy)}
.sx-kpi.warn .sx-meter i{background:var(--gold)}
.sx-report{margin:1em 6.2em 1.4em 1.6em;display:grid;grid-template-columns:1.05fr 1fr;border:1px solid var(--line);border-radius:.9em;overflow:hidden;background:#fff}
.sx-photo{position:relative;background:#dfe5ee;min-height:100%}
.sx-photo img{display:block;width:100%;height:100%;object-fit:cover}
.sx-pin{position:absolute;display:flex;align-items:center;gap:.35em;padding:.25em .6em .25em .25em;border-radius:99em;background:rgba(255,255,255,.94);font-size:.72em;font-weight:700;color:var(--ink);box-shadow:0 .3em .8em rgba(0,0,0,.2)}
.sx-pin b{width:1.5em;height:1.5em;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-size:.9em}
.sx-photo-count{position:absolute;right:.6em;bottom:.6em;display:flex;align-items:center;gap:.3em;padding:.2em .55em;border-radius:.4em;background:rgba(15,27,45,.7);color:#fff;font-size:.68em}
.sx-photo-count .ic{width:1em;height:1em}
.sx-report-body{padding:1em 1.1em}
.sx-report-body h5{margin:.45em 0 .25em;font-size:1em;font-weight:800}
.sx-meta{display:flex;flex-wrap:wrap;gap:.3em .9em;margin-bottom:.8em;font-size:.74em;color:var(--m)}
.sx-meta span{display:inline-flex;align-items:center;gap:.3em}
.sx-meta .ic{width:1em;height:1em}
.sx-checks{list-style:none;padding:0;display:grid;gap:.45em}
.sx-checks li{display:flex;align-items:center;gap:.55em;padding:.45em .6em;border-radius:.55em;background:var(--soft);font-size:.8em;color:var(--t)}
.sx-checks li .ic{color:var(--ok)}
.sx-checks li.todo{background:var(--gold-bg);color:var(--ink);font-weight:700}
.sx-checks li.todo .ic{color:var(--gold-ink)}
.sx-checks li em{margin-left:auto;font-style:normal;font-size:.85em;color:var(--m);font-weight:400}
.sx-notice{right:2.4em;top:6.5em;width:20.5em;padding:.9em 1em;display:grid;grid-template-columns:2.2em 1fr;gap:.7em}
.sx-notice .sx-doc-icon{background:var(--gold-bg)}
.sx-notice b{display:block;font-size:.84em}
.sx-notice p{font-size:.76em;color:var(--t);margin-top:.15em}
.sx-notice small{display:block;margin-top:.35em;font-size:.68em;color:var(--m)}
.sx-history{right:2.4em;bottom:2.4em;width:19em;padding:1em 1.1em}
.sx-history>small{display:block;margin-bottom:.6em;font-size:.74em;font-weight:700;color:var(--m)}
.sx-tl{position:relative;display:grid;grid-template-columns:1.9em 1fr;gap:.6em;padding-bottom:.7em}
.sx-tl:last-child{padding-bottom:0}
.sx-tl::before{content:"";position:absolute;left:.92em;top:2em;bottom:0;width:1px;background:var(--line)}
.sx-tl:last-child::before{display:none}
.sx-tl b{display:block;font-size:.8em}
.sx-tl small{font-size:.68em;color:var(--m)}
@media (prefers-reduced-motion:no-preference){
 .sx-wrap.is-play .sx-notice{animation:sx-in .7s cubic-bezier(.2,.7,.25,1) .8s both}
 .sx-wrap.is-play .sx-history{animation:sx-in .7s cubic-bezier(.2,.7,.25,1) 1.1s both}
 .sx-wrap.is-play .sx-checks li{animation:sx-in .5s cubic-bezier(.2,.7,.25,1) both}
 .sx-wrap.is-play .sx-checks li:nth-child(1){animation-delay:.3s}
 .sx-wrap.is-play .sx-checks li:nth-child(2){animation-delay:.45s}
 .sx-wrap.is-play .sx-checks li:nth-child(3){animation-delay:.6s}
 .sx-wrap.is-play .sx-kpi .sx-meter i{animation:sx-bar .9s cubic-bezier(.2,.7,.25,1) .4s both;transform-origin:left}
}
@keyframes sx-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@container (max-width:640px){
 .sx-kpis{padding:1em 1em 0;grid-template-columns:repeat(2,1fr)}
 .sx-kpis .sx-kpi:nth-child(3){display:none}
 .sx-report{margin:1em;grid-template-columns:1fr}
 .sx-photo{aspect-ratio:4/3}
 .sx-history{display:none}
}
.sx-list{margin:0 6.2em 1.4em 1.6em;border:1px solid var(--line);border-radius:.9em;overflow:hidden;background:#fff}
.sx-list>small{display:block;padding:.6em 1em;font-size:.72em;font-weight:700;color:var(--m);background:var(--soft);border-bottom:1px solid var(--line)}
.sx-row{display:grid;grid-template-columns:1fr auto auto;gap:1em;align-items:center;padding:.65em 1em;border-bottom:1px solid var(--line);font-size:.8em}
.sx-row:last-child{border-bottom:0}
.sx-row b{font-weight:700}
.sx-row small{color:var(--m)}
@container (max-width:640px){.sx-list{display:none}}
@container (max-width:640px){.sx-notice,.sx-doc{position:relative;inset:auto;width:auto;margin-top:1em}}
/* 現場点検：枠が中くらいのときは写真と確認項目を横に並べ、縦に伸びすぎないようにする */
@container (max-width:640px){
 .sx-report{grid-template-columns:.95fr 1fr}
 .sx-photo{aspect-ratio:auto;min-height:0}
 .sx-report-body{padding:.8em .9em}
 .sx-checks li{padding:.4em .5em}
}
/* スマートフォンなど、さらに狭いときは縦に積み、写真は横長にして低くする */
@container (max-width:340px){
 .sx-report{grid-template-columns:1fr}
 .sx-photo{aspect-ratio:16/9}
}
/* 横並びのときも写真が枠いっぱいに表示されるよう、写真を枠に敷き詰める */
@container (max-width:640px){.sx-photo{min-height:9em}.sx-photo img{position:absolute;inset:0}}