/* 太陽光発電シミュレーション（/solar_power/simulation/） — テクノロジー感のある見せ方。ベースは style / cases / company.css */
.pg-sim{--mono:"JetBrains Mono",ui-monospace,monospace;--cy:#38d6c4}
.pg-sim .mono,.sm-tag,.sm-pipe small,.sm-hud .rd,.sm-mod .no span,.sm-time .hd2 span,.sm-tabs span,.sm-screen .bar span,.sm-src .lb,.sm-end-box .lb,.sm-online .live{font-family:var(--mono)}

/* 方眼の背景 */
.sm-grid{position:absolute;inset:0;pointer-events:none;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:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 75%)}

/* hero */
.sm-hero{position:relative;overflow:hidden;padding-bottom:clamp(64px,8vw,110px)}
.sm-top{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-top:44px;position:relative}
.sm-tag{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;color:var(--cy);border:1px solid rgba(56,214,196,.35);background:rgba(56,214,196,.06);padding:7px 14px;border-radius:999px}
.sm-tag i{font-style:normal;color:#cfd5d2;font-family:var(--ff-h);font-weight:700;letter-spacing:0}
.sm-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--cy);box-shadow:0 0 0 0 rgba(56,214,196,.6);animation:smPulse 2s infinite}
@keyframes smPulse{70%{box-shadow:0 0 0 10px rgba(56,214,196,0)}100%{box-shadow:0 0 0 0 rgba(56,214,196,0)}}
.sm-top .disp{font-size:clamp(54px,7.4vw,120px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);margin-top:22px}
.sm-top h1{font-size:clamp(28px,3vw,44px);color:#fff;margin-top:14px;line-height:1.35}
.sm-top .lead{color:#b9c2be;font-size:15.5px;line-height:2;margin-top:20px;max-width:540px}
.sm-top .lead b{color:#fff;background:linear-gradient(transparent 60%,rgba(245,179,1,.45) 60%)}
.sm-top .bts{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.sm-hud .scr{position:relative;border-radius:22px;overflow:hidden;border:1px solid rgba(56,214,196,.35);background:#0f1513;aspect-ratio:1400/650;box-shadow:0 30px 80px -30px rgba(56,214,196,.35)}
.sm-hud .scr img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.sm-hud .scan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,rgba(56,214,196,.22) 85%,rgba(56,214,196,.7));mix-blend-mode:screen;animation:smScan 4.5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes smScan{0%{transform:translateY(-100%)}100%{transform:translateY(340%)}}
.sm-hud .c{position:absolute;width:22px;height:22px;border:2px solid var(--cy)}
.sm-hud .tl{top:12px;left:12px;border-right:0;border-bottom:0}.sm-hud .tr{top:12px;right:12px;border-left:0;border-bottom:0}
.sm-hud .bl{bottom:12px;left:12px;border-right:0;border-top:0}.sm-hud .br{bottom:12px;right:12px;border-left:0;border-top:0}
.sm-hud .rd{position:absolute;font-size:10.5px;letter-spacing:.06em;color:#e9fffb;background:rgba(10,13,12,.72);backdrop-filter:blur(6px);border:1px solid rgba(56,214,196,.4);border-radius:8px;padding:6px 10px;line-height:1.5}
.sm-hud .rd b{display:block;color:var(--cy);font-size:9.5px;letter-spacing:.18em}
.sm-hud .r1{top:44px;left:44px}.sm-hud .r2{bottom:44px;right:44px;text-align:right}
.sm-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.sm-pipe li{position:relative;padding:12px 12px 10px;border:1px solid var(--line);border-radius:14px;background:var(--ink2)}
.sm-pipe li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;width:8px;height:1px;background:var(--cy)}
.sm-pipe span{font-family:var(--mono);font-size:10.5px;color:var(--cy)}
.sm-pipe b{display:block;font-size:13px;color:#fff;margin-top:2px;line-height:1.4}
.sm-pipe small{font-size:10px;color:var(--mut)}
.sm-pipe li.k{border-color:var(--amb);background:rgba(245,179,1,.08)}
.sm-pipe li.k span{color:var(--amb)}

/* 課題：所要時間の比較 */
.sm-why-g{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.sm-why .sec-t-j{font-size:clamp(24px,2.4vw,34px);margin-top:16px}
.sm-why .mut b{color:var(--ink)}
.sm-time{background:var(--ink);color:#fff;border-radius:24px;padding:28px 28px 22px}
.sm-time .hd2{font-family:var(--ff-h);font-weight:700;font-size:15px;display:flex;flex-direction:column;gap:4px}
.sm-time .hd2 span{font-size:10.5px;letter-spacing:.2em;color:var(--cy);font-weight:500}
.sm-time .row{display:grid;grid-template-columns:130px 1fr auto;gap:16px;align-items:center;margin-top:22px}
.sm-time .nm{font-size:13.5px;font-weight:700;line-height:1.4}
.sm-time .nm small{display:block;font-size:11px;color:var(--mut);font-weight:500}
.sm-time .bar{height:14px;border-radius:999px;background:var(--ink3);overflow:hidden}
.sm-time .bar i{display:block;height:100%;width:var(--w);border-radius:999px;background:repeating-linear-gradient(90deg,#5d6661 0 10px,#4d5551 10px 20px)}
.sm-time .row.k .bar i{background:linear-gradient(90deg,var(--amb),var(--amb2));box-shadow:0 0 18px rgba(245,179,1,.7)}
.sm-time .v{font-family:var(--ff-h);font-weight:900;font-size:16px;white-space:nowrap}
.sm-time .row.k .v{color:var(--amb);font-size:20px}
.sm-time .ax{display:flex;justify-content:space-between;margin:12px 0 0 146px;padding-right:100px;font-family:var(--mono);font-size:10px;color:var(--mut)}

/* 機能 */
.sm-feat{position:relative;overflow:hidden}
.sm-mod{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:center;margin-top:clamp(64px,8vw,110px);position:relative}
.sm-mod.rv2 .vis{order:-1}
.sm-mod .no{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;font-weight:700;color:#cfd5d2}
.sm-mod .no span{font-size:11px;letter-spacing:.14em;color:var(--ink);background:var(--cy);padding:4px 10px;border-radius:6px;font-weight:700}
.sm-mod h3{font-size:clamp(22px,2.4vw,34px);color:#fff;margin-top:16px}
.sm-mod .tx > p:not(.no):not(.note){color:#b9c2be;font-size:15px;line-height:2;margin-top:16px}
.sm-mod .tx b{color:#fff}
.sm-mod .note{font-size:12px;color:var(--mut);margin-top:10px}
.sm-mod .vis figure{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0f1513}
.sm-mod .vis img{width:100%;height:auto;display:block}
.sm-mod .vis figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:#e9fffb;background:rgba(10,13,12,.75);border:1px solid rgba(56,214,196,.4);border-radius:6px;padding:4px 9px}
.sm-mod .vis.two{display:grid;grid-template-columns:1fr;gap:12px}
.sm-mod .vis .mon{box-shadow:0 30px 70px -30px rgba(56,214,196,.4);border-color:rgba(56,214,196,.35)}
.sm-src{margin-top:26px;border:1px dashed rgba(56,214,196,.45);border-radius:18px;padding:20px 22px;background:rgba(56,214,196,.04)}
.sm-src .lb{font-size:10.5px;letter-spacing:.2em;color:var(--cy)}
.sm-src h4{font-size:16px;color:#fff;margin-top:6px}
.sm-src p:not(.lb){font-size:13.5px;color:#b9c2be;line-height:1.95;margin-top:8px}
.sm-src ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sm-src li{font-family:var(--mono);font-size:11px;color:var(--cy);border:1px solid rgba(56,214,196,.35);border-radius:999px;padding:3px 10px}

/* 出力レポート */
.sm-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px}
.sm-tabs button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-d);background:#fff;color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:999px;cursor:pointer;transition:.2s}
.sm-tabs button span{font-size:11px;color:var(--grn)}
.sm-tabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sm-tabs button[aria-selected=true] span{color:var(--cy)}
.sm-tabs button:focus-visible{outline:3px solid var(--amb);outline-offset:2px}
.sm-screen{margin-top:16px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line-d);box-shadow:0 30px 70px -40px rgba(10,13,12,.45)}
.sm-screen .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--ink)}
.sm-screen .bar i{width:10px;height:10px;border-radius:50%;background:#3a423f}
.sm-screen .bar i:first-child{background:#ff5f57}.sm-screen .bar i:nth-child(2){background:#febc2e}.sm-screen .bar i:nth-child(3){background:#28c840}
.sm-screen .bar span{margin-left:10px;font-size:11px;color:var(--mut)}
.sm-screen .pn{margin:0}
.sm-screen .pn img{width:100%;height:auto;display:block}
.sm-cap{font-size:12px;color:var(--mut-d);margin-top:12px}

/* オンライン商談 */
.sm-on-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.sm-online .ph{position:relative;border-radius:22px;overflow:hidden}
.sm-online .ph img{width:100%;height:auto;display:block}
.sm-online .live{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.12em;color:#fff;background:rgba(10,13,12,.75);border-radius:6px;padding:5px 10px}
.sm-online .live{color:#ff6b6b}
.sm-sub{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--cy);border:1px solid rgba(56,214,196,.4);border-radius:999px;padding:4px 14px}

/* まとめ */
.sm-end-box{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:28px;padding:clamp(32px,5vw,64px);text-align:center}
.sm-end-box .lb{position:relative;font-size:11px;letter-spacing:.22em;color:var(--cy)}
.sm-end-box h2{position:relative;font-size:clamp(22px,2.6vw,36px);margin-top:10px}
.sm-end-box .pts{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:820px;margin:32px auto 0}
.sm-end-box .pts li{border:1px solid var(--line);border-radius:16px;padding:18px 12px;background:rgba(18,23,21,.8)}
.sm-end-box .pts b{display:block;font-family:var(--ff-h);font-weight:900;font-size:clamp(20px,2vw,26px);color:var(--amb)}
.sm-end-box .pts span{font-size:12.5px;color:#b9c2be}
.sm-end-box .bts{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}

@media (max-width:1180px){
  .sm-top,.sm-why-g,.sm-mod,.sm-on-g{grid-template-columns:1fr;gap:40px}
  .sm-mod.rv2 .vis{order:0}
}
@media (max-width:720px){
  .sm-pipe{grid-template-columns:1fr 1fr}
  .sm-pipe li:not(:last-child)::after{display:none}
  .sm-hud .rd{display:none}
  .sm-time{padding:22px 18px}
  .sm-time .row{grid-template-columns:1fr auto;gap:6px 12px}
  .sm-time .bar{grid-column:1/3;grid-row:2}
  .sm-time .ax{margin-left:0;padding-right:0}
  .sm-end-box .pts{grid-template-columns:1fr}
  .sm-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
  .sm-tabs::-webkit-scrollbar{display:none}
  .sm-tabs button{flex:0 0 auto;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){ .sm-hud .scan,.sm-tag .dot{animation:none} .sm-hud .scan{display:none} }
@media (max-width:900px){ .pg-sim .sol-h{flex-direction:column;align-items:flex-start;gap:20px} }