/* ================================================================
   （株）日本ハイテック — 10 防犯ネットワークカメラ（/content04/）
   ページ固有スタイル。共通クラスは common.css を使用し、ここでは
   このページだけで使う装飾・レイアウトのみを定義する。
   ================================================================ */

/* ===== リード（ページ冒頭の導入文＋タグ） ===== */
.nh-page .cam-deco{
  top:70px;right:-50px;width:280px;height:280px;color:var(--peach-deep);
}
.nh-page .cam-tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.nh-page .cam-tag{
  background:var(--paper);border:1.5px solid var(--line);color:var(--ink);
  font-size:12.5px;font-weight:700;padding:9px 20px;border-radius:20px;
}

/* ===== できること（特徴カード） ===== */
.nh-page .cam-feature{background:var(--paper);}
.nh-page .cam-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.nh-page .cam-feature-card{
  background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:32px 26px;transition:transform .25s ease, box-shadow .25s ease;
}
.nh-page .cam-feature-card:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(150,110,70,.14);}
.nh-page .cam-feature-icon{
  width:48px;height:48px;border-radius:16px 16px 16px 4px;
  background:linear-gradient(135deg,var(--peach-deep),var(--coral-deep));
  color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.nh-page .cam-feature-icon svg{width:24px;height:24px;}
.nh-page .cam-feature-title{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  font-size:15.5px;font-weight:900;color:var(--ink);margin-bottom:10px;line-height:1.5;
}
.nh-page .cam-feature-text{color:var(--ink-soft);font-size:13px;line-height:1.8;}

/* ===== サービス紹介ブロック（写真＋テキスト交互） ===== */
.nh-page .svc-block{padding:64px 0;border-bottom:1.5px solid var(--line);}
.nh-page .svc-block:last-of-type{border-bottom:none;}
.nh-page .svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.nh-page .svc-grid.rev .svc-photo{order:2;}
.nh-page .svc-photo{
  border-radius:var(--r-md);overflow:hidden;height:320px;
  box-shadow:0 20px 40px rgba(150,110,70,.15);
}
.nh-page .svc-text .svc-sub{
  font-size:12px;color:var(--coral-deep);font-weight:700;margin-bottom:8px;
  display:block;letter-spacing:.05em;
}
.nh-page .svc-text h3{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  font-size:clamp(20px,2.4vw,26px);font-weight:900;margin-bottom:14px;color:var(--ink);
}
.nh-page .svc-text p{color:var(--ink-soft);font-size:14.5px;}

/* ===== 導入の流れ ===== */
.nh-page .cam-flow{background:var(--mint-deep);}
.nh-page .cam-flow .sec-title{color:#fff;}
.nh-page .cam-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.nh-page .cam-flow-card{
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);
  border-radius:var(--r-md);padding:30px 24px;position:relative;
}
.nh-page .cam-flow-num{
  font-size:26px;font-weight:800;color:var(--glow);margin-bottom:14px;
}
.nh-page .cam-flow-title{
  font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  font-size:14.5px;font-weight:900;color:#fff;margin-bottom:10px;line-height:1.5;
}
.nh-page .cam-flow-text{color:var(--ink-on-dark);font-size:12.5px;line-height:1.8;}

/* ===== レスポンシブ ===== */
@media (max-width:920px){
  .nh-page .svc-grid{grid-template-columns:1fr;}
  .nh-page .svc-grid.rev .svc-photo{order:0;}
  .nh-page .svc-photo{height:260px;}
  .nh-page .cam-feature-grid{grid-template-columns:1fr 1fr;}
  .nh-page .cam-flow-grid{grid-template-columns:1fr 1fr;}
  .nh-page .cam-deco{width:200px;height:200px;top:20px;right:-40px;}
}
@media (max-width:600px){
  .nh-page .cam-feature-grid{grid-template-columns:1fr;}
  .nh-page .cam-flow-grid{grid-template-columns:1fr;}
}