/* =========================================================
   HP-SUBPAGE-001 固定背景
========================================================= */
.sub-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  background:
    linear-gradient(
      rgba(255,255,255,0.22),
      rgba(255,255,255,0.22)
    ),
    url("../images/systembranch_bg2_pc.jpg");
  background-size:cover;
  background-position:center;
  z-index:-1;
  filter:brightness(1.12) saturate(1.05);
}

/* =========================================================
   HP-SUBPAGE-002 サブナビゲーション
========================================================= */
.subnav{
  display:flex;                             /* 横並びレイアウト */
  justify-content:flex-end;                 /* 右端揃え */
  margin-top:100px;                         /* 上マージン */
  padding:10px 20px;                        /* 内側余白 */
  width:100%;
  transition:transform 0.3s ease,box-shadow 0.3s ease; /* アニメーション */
  position:relative;
  z-index:1000;                             /* 他要素より前面 */
  background:rgba(14,90,255,0.35);          /* 半透明背景 */
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.subnav-wrap{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  pointer-events:auto;
}

.subnav ul{
  display:flex;                             /* 横並び */
  gap:20px;                                /* 項目間隔 */
  list-style:none;                         /* リスト記号を非表示 */
  padding:0;
  margin:0;
}

.subnav a{
  color:white;                             /* 文字色 */
  text-decoration:none;                    /* 下線を非表示 */
  padding:8px 16px;                        /* 内側余白 */
  font-size:14px;
  transition:all 0.3s ease;                /* ホバーアニメーション */
}

.subnav a:hover{
  background:rgba(0,86,179,0.15);          /* ホバー背景色 */
  transform:translateY(-3px);              /* 少し浮き上がる */
  box-shadow:0 6px 20px rgba(0,0,0,0.15);  /* 影を強調 */
}

/* =========================================================
   HP-SUBPAGE-101 SP表示（768px以下）
========================================================= */
@media(max-width:768px){
  .subnav ul{
    flex-direction:column;                  /* 縦並び */
    gap:10px;                               /* 項目間隔 */
  }

  .subnav{
    padding:15px;                           /* 内側余白 */
  }
}