/* サロクル 製品画面のイメージ
 * ------------------------------------------------------------
 * 実際の画面をCSSで描いたものです。画像ファイルを使っていないので、
 * どの画面サイズでもくっきり表示され、内容が古くなることもありません。
 * 営業用のどのページからでも読み込めるよう、単独のファイルにしています。
 */
/* スマートフォンの枠 */
.mock-phone{width:264px;flex:none;border-radius:30px;background:#131f33;padding:9px;box-shadow:0 26px 60px rgba(19,31,51,.45),0 0 0 1px rgba(255,255,255,.12) inset}
.mock-phone .scr{background:#fff;border-radius:23px;overflow:hidden;height:512px;display:flex;flex-direction:column;font-size:11px;color:#241f20;line-height:1.55;text-align:left}
.mp-hdr{display:flex;align-items:center;gap:6px;padding:9px 11px;border-bottom:1px solid #ebe6e6;flex:none}
.mp-hdr .lg{width:15px;height:15px;border-radius:50%;background:conic-gradient(from 200deg,#ff8a4c,#e5324b 70%,transparent 0);position:relative}
.mp-hdr .lg::after{content:'';position:absolute;inset:4.5px;border-radius:50%;background:#e5324b}
.mp-hdr b{font-size:12px;letter-spacing:.02em}
.mp-hdr .sp{flex:1}
.mp-hdr .pill{border:1px solid #ebe6e6;border-radius:9px;padding:2px 7px;font-size:8.5px;color:#79706f}
.mp-hero{height:112px;flex:none;background:linear-gradient(135deg,#f7d6de,#e8a0b0);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;letter-spacing:.04em;font-size:11px;text-shadow:0 1px 4px rgba(0,0,0,.18)}
.mp-body{padding:10px 11px;overflow:hidden;flex:1}
.mp-body .nm{font-weight:800;font-size:12.5px;line-height:1.4}
.mp-body .rt{display:flex;align-items:center;gap:5px;margin:4px 0 7px}
.mp-body .rt .st{color:#f5a623;font-size:10px;letter-spacing:1px}
.mp-body .rt b{font-size:12px}
.mp-body .rt span{font-size:9px;color:#79706f}
.mp-tabs{display:flex;gap:9px;border-bottom:1px solid #ebe6e6;padding-bottom:5px;margin-bottom:8px;font-size:9px;color:#79706f}
.mp-tabs .on{color:#e5324b;font-weight:700;border-bottom:2px solid #e5324b;padding-bottom:4px;margin-bottom:-6px}
.mp-av{width:100%;border-collapse:collapse;font-size:8.5px;text-align:center}
.mp-av th,.mp-av td{border:1px solid #eee7e7;padding:3px 0;font-weight:600}
.mp-av th{background:#faf8f7;color:#79706f;font-size:7.5px}
.mp-av .o2{color:#e5324b}.mp-av .o1{color:#e66d00}.mp-av .ng{color:#cfc8c7}
.mp-cta{flex:none;padding:8px 11px;border-top:1px solid #ebe6e6;display:flex;gap:6px;align-items:center;background:#fff}
.mp-cta .tel{width:30px;height:30px;border-radius:6px;border:1px solid #ebe6e6;display:flex;align-items:center;justify-content:center;color:#57504f;font-size:12px}
.mp-cta .go{flex:1;background:#ff7a00;color:#fff;border-radius:6px;text-align:center;padding:7px;font-weight:800;font-size:10.5px;line-height:1.25}
.mp-cta .go small{display:block;font-size:7.5px;font-weight:600;opacity:.92}

/* パソコンの枠（管理画面） */
.mock-win{flex:1;min-width:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 22px 56px rgba(19,31,51,.3),0 0 0 1px rgba(19,31,51,.12)}
.mw-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#e9edf3;border-bottom:1px solid #dce1e9}
.mw-bar i{width:9px;height:9px;border-radius:50%;background:#c7cfd9;display:block}
.mw-bar .url{flex:1;margin-left:8px;background:#fff;border-radius:11px;height:17px}
.mw-top{display:flex;align-items:center;gap:8px;background:#131f33;color:#fff;padding:7px 12px;font-size:11px;font-weight:700}
.mw-top .lg{width:13px;height:13px;border-radius:50%;background:conic-gradient(from 200deg,#ff8a4c,#e5324b 70%,transparent 0);position:relative}
.mw-top .lg::after{content:'';position:absolute;inset:4px;border-radius:50%;background:#e5324b}
.mw-top small{font-weight:500;opacity:.85;font-size:10px}
.mw-body{display:flex;min-height:260px}
.mw-side{width:112px;flex:none;border-right:1px solid #dce1e9;padding:8px 0;background:#fff}
.mw-side div{font-size:9.5px;color:#4a5462;padding:5px 11px;display:flex;align-items:center;gap:6px}
.mw-side div::before{content:'';width:11px;height:11px;border-radius:3px;background:#e3e9f0;flex:none}
.mw-side div.on{background:#eef4fb;color:#235fa3;font-weight:700;border-left:2px solid #2f7dd1}
.mw-side div.on::before{background:#2f7dd1}
.mw-side .grp{font-size:8px;color:#8b94a1;padding:8px 11px 2px}
.mw-side .grp::before{display:none}
.mw-main{flex:1;min-width:0;padding:11px 13px;background:#f4f7fa}
.mw-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mw-h b{font-size:13px}
.mw-h .btn2{margin-left:auto;background:#2f7dd1;color:#fff;border-radius:5px;padding:4px 10px;font-size:9.5px;font-weight:700}
.mw-grid{background:#fff;border:1px solid #dce1e9;border-radius:7px;overflow:hidden}
.mw-grid .hd{display:grid;grid-template-columns:34px repeat(4,1fr);background:#f7f9fb;border-bottom:1px solid #dce1e9;font-size:8.5px;color:#646e7c;font-weight:700}
.mw-grid .hd span{padding:5px 4px;text-align:center;border-left:1px solid #dce1e9}
.mw-grid .hd span:first-child{border-left:0}
.mw-rows{position:relative;display:grid;grid-template-columns:34px repeat(4,1fr);grid-auto-rows:20px}
.mw-rows .t{font-size:7.5px;color:#8b94a1;padding:2px 4px 0;text-align:right;border-top:1px solid #f0f3f7}
.mw-rows .c{border-left:1px solid #eef1f5;border-top:1px solid #f0f3f7}
.mw-blk{position:absolute;border-radius:4px;color:#fff;font-size:8px;font-weight:700;padding:3px 5px;line-height:1.35;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.mw-blk small{display:block;font-weight:600;opacity:.92;font-size:7px}
.mw-blk.b1{background:#4f8ff7}.mw-blk.b2{background:#58b36d}.mw-blk.b3{background:#9b6fd4}.mw-blk.b4{background:#a7adb5}
.mw-blk.gap{background:repeating-linear-gradient(45deg,#e8edf3 0 4px,#f7f9fb 4px 8px);color:#8d99a6;box-shadow:none;border:1px solid #dde3ea}

/* 2枚を並べる場所 */
.shots{display:flex;align-items:flex-start;gap:22px;justify-content:center}
@media(max-width:900px){.shots{flex-direction:column;align-items:center}.mock-win{width:100%}}

/* ヒーローの2段組み */
.hero-2{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hero-2 .shot{display:flex;justify-content:center}
@media(max-width:960px){.hero-2{grid-template-columns:1fr;gap:28px}.hero-2 .shot{order:2}}


.cap3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:920px;margin:34px auto 0}
.cap3 b{display:block;font-size:15px;margin-bottom:5px}
.cap3 p{font-size:13.5px;color:#4a5462;line-height:1.85}
@media(max-width:760px){.cap3{grid-template-columns:1fr;gap:16px;text-align:center}}