/* =========================================================
   template-infra.css — 07 通信インフラ事業（サービス詳細ページ）
   すべて .nh-page プレフィックス付き。common.css のクラスは再定義しない。
   ========================================================= */

/* ----- リード文セクション ----- */
.nh-page .infra-lead{padding-bottom:24px;}
.nh-page .infra-deco{top:40px;right:-40px;width:260px;height:260px;color:var(--coral-deep);}
.nh-page .infra-tag-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.nh-page .infra-tag{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--peach);color:var(--coral-deep);
  font-size:13px;font-weight:700;padding:9px 20px;border-radius:30px;
  border:1.5px solid rgba(242,102,29,.18);
}

/* ----- サービス詳細ブロック ----- */
.nh-page .infra-svc{padding-top:24px;}
.nh-page .svc-block{padding:56px 0;border-bottom:1.5px solid var(--line);}
.nh-page .svc-block:last-of-type{border-bottom:none;padding-bottom:0;}
.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;box-shadow:0 20px 40px rgba(23,38,60,.14);height:280px;transition:transform .4s ease,box-shadow .4s ease;}
.nh-page .svc-photo.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:280px;box-shadow:none;}
.nh-page .svc-photo.two img{border-radius:var(--r-md);box-shadow:0 20px 40px rgba(23,38,60,.14);height:100%;}
.nh-page .svc-block:hover .svc-photo.two img{transform:translateY(-4px);}
.nh-page .svc-photo.two img{transition:transform .4s ease;}
.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);line-height:1.5;
}
.nh-page .svc-text .svc-sub-jp{font-size:.56em;font-weight:500;color:var(--ink-soft);}
.nh-page .svc-text p{color:var(--ink-soft);font-size:14.5px;}

/* ----- 施工の流れ ----- */
.nh-page .infra-flow{background:var(--mint);}
.nh-page .flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.nh-page .flow-card{
  position:relative;background:var(--paper);border-radius:var(--r-md);
  padding:32px 24px 28px;border:1.5px solid var(--line);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.nh-page .flow-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(23,38,60,.12);border-color:var(--peach-deep);}
.nh-page .flow-num{font-size:34px;font-weight:800;color:var(--peach-deep);opacity:.55;margin-bottom:10px;}
.nh-page .flow-title{font-size:15.5px;font-weight:700;color:var(--ink);margin-bottom:10px;}
.nh-page .flow-text{font-size:13px;color:var(--ink-soft);}

/* 4本のカードを矢印でつなぐ演出（PC幅のみ） */
@media (min-width:921px){
  .nh-page .flow-card:not(:last-child)::after{
    content:"";position:absolute;top:50%;right:-24px;transform:translateY(-50%);
    width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;
    border-left:8px solid var(--peach-deep);opacity:.5;z-index:1;
  }
}

/* ----- レスポンシブ ----- */
@media (max-width:920px){
  .nh-page .svc-grid{grid-template-columns:1fr;}
  .nh-page .svc-grid.rev .svc-photo{order:0;}
  .nh-page .flow-grid{grid-template-columns:1fr 1fr;}
  .nh-page .infra-deco{width:180px;height:180px;top:10px;right:-30px;}
}
@media (max-width:600px){
  .nh-page .flow-grid{grid-template-columns:1fr;}
  .nh-page .svc-photo.two,
  .nh-page .svc-photo{height:220px;}
}