/* ================================================================
   BELLSERVE — DWH構築支援ページ（/dwh）専用スタイル
   共有の styles.css のあとに読み込む。ここの定義はこのページだけに効く。
   イラストはパンフレット（X-Decision_pamphlet_A4）の作画ルールに合わせている：
     ・太めの丸い線（stroke-width 3 / linecap round）
     ・1色につき濃淡2トーン（--c1 線、--c2 面）＋パステルの下地（--cbg）
     ・足元に薄い影、きらめき（4方向の星）を1〜2個
   色の系統を変えたいときは .ilw の5変数だけを触れば全イラストに反映される。
   ================================================================ */

/* ---- パンフレット準拠のイラストスタイル ---- */
.ilw{ --c1:#2f80b8; --c2:#8cc3e3; --cbg:#dceaf5; }
.ilw.v-orange{ --c1:#c4571f; --c2:#ee9f6b; --cbg:#fae3d4; }
.ilw.v-gold{   --c1:#b07d12; --c2:#e6c45e; --cbg:#f8eecd; }
.ilw.v-purple{ --c1:#7a50c0; --c2:#b89ae2; --cbg:#eadff8; }
.ilw.v-green{  --c1:#3e6f5c; --c2:#8fc4ac; --cbg:#dcefe4; }
.ilw.v-blue{   --c1:#2f80b8; --c2:#8cc3e3; --cbg:#dceaf5; }

.il{ display:block; width:100%; height:auto; }
.il .ln{ fill:none; stroke:var(--c1); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.il .ln2{ fill:none; stroke:var(--c2); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.il .sh{ fill:var(--c1); opacity:.12; }
.il .f1{ fill:var(--c1); }
.il .f2{ fill:var(--c2); }
.il .fw{ fill:#fff; stroke:var(--c1); stroke-width:3; stroke-linejoin:round; }
.il .fc{ fill:var(--c2); stroke:var(--c1); stroke-width:3; stroke-linejoin:round; }
.il .bg{ fill:var(--cbg); }
.il .tx{ font-family:"Noto Sans JP",sans-serif; font-weight:700; fill:var(--c1); }
.il .txw{ font-family:"Noto Sans JP",sans-serif; font-weight:700; fill:#fff; }
.il .spk{ fill:var(--c1); opacity:.9; }

/* ---- ページ内レイアウト ---- */
/* ---- dwh page: page-scoped ---- */
  .hero-il{ background:var(--surface); border:1px solid var(--border); border-radius:28px; box-shadow:var(--shadow); padding:18px; }

  .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; }
  @media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
  .cmp{ border:1px solid var(--border); border-radius:22px; padding:26px 28px 28px; background:var(--surface); }
  .cmp.before{ background:var(--bg); }
  .cmp.after{ border-color:var(--accent); box-shadow:var(--shadow); }
  .cmp .ilw{ margin:-4px 0 20px; }
  .cmp .il{ border-radius:16px; }
  .cmp .tag{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:5px 13px; margin-bottom:16px; }
  .cmp.before .tag{ background:var(--grid); color:var(--ink-2); }
  .cmp.after .tag{ background:var(--accent); color:var(--accent-ink); }
  .cmp ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
  .cmp li{ font-size:14.5px; color:var(--ink-2); display:flex; gap:9px; align-items:flex-start; line-height:1.8; }
  .cmp.before li::before{ content:"×"; color:var(--muted); font-weight:700; flex:none; }
  .cmp.after li::before{ content:"✓"; color:var(--accent); font-weight:700; flex:none; }

  .note-band{ margin-top:22px; background:var(--surface); border:1px solid var(--grid); border-radius:18px; padding:20px 24px; font-size:14.5px; color:var(--ink-2); line-height:1.95; }
  .note-band b{ color:var(--ink); }

  .svc{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  @media (max-width:760px){ .svc{ grid-template-columns:1fr; } }
  .svc .card{ display:flex; flex-direction:column; }
  .svc .ilw{ margin:-6px -6px 18px; }
  .svc .il{ border-radius:18px; }
  .svc .num{ margin-bottom:12px; }

  .envs{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
  @media (max-width:760px){ .envs{ grid-template-columns:1fr; } }
  .env{ border:1px solid var(--border); border-radius:18px; padding:18px 20px; background:var(--surface); display:flex; gap:14px; align-items:flex-start; }
  .env .ilw{ width:52px; flex:none; }
  .env .il{ border-radius:14px; }
  .env .n{ font-weight:700; font-size:14.5px; }
  .env .d{ font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.7; }

  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; border:1px solid var(--grid); border-radius:20px; overflow:hidden; background:var(--surface); }
  @media (max-width:860px){ .steps{ grid-template-columns:1fr; } }
  .step{ padding:22px 24px; border-left:1px solid var(--grid); }
  .step:first-child{ border-left:none; }
  @media (max-width:860px){ .step{ border-left:none; border-top:1px solid var(--grid); } .step:first-child{ border-top:none; } }
  .step .k{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--accent); font-weight:700; }
  .step .n{ font-size:14.5px; font-weight:700; margin-top:8px; }
  .step .d{ font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.75; }

  .cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  @media (max-width:760px){ .cases{ grid-template-columns:1fr; } }
  .case{ background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:22px 22px 26px; display:flex; flex-direction:column; gap:16px; }
  .case .il{ border-radius:16px; }
  .case h3{ font-size:16px; line-height:1.75; padding:0 4px; }
  .case .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding:0 4px; }
  .case .tags span{ font-size:11.5px; color:var(--ink-2); border:1px solid var(--border-strong); border-radius:999px; padding:5px 12px; }
  .cases-note{ margin-top:18px; font-size:12px; color:var(--muted); line-height:1.85; }

  .lead-band{ background:var(--surface); border:1px solid var(--accent); border-radius:24px; padding:34px 38px; margin-bottom:46px; box-shadow:var(--shadow);
    display:grid; grid-template-columns:230px 1fr; gap:34px; align-items:center; }
  @media (max-width:760px){ .lead-band{ grid-template-columns:1fr; padding:26px 24px; gap:22px; } }
  .lead-band .il{ border-radius:18px; }
  .lead-band h3{ font-size:19px; line-height:1.7; }
  .lead-band p{ color:var(--ink-2); font-size:14.5px; margin:14px 0 0; line-height:2; }