/* =========================================================
   PS WORKS 共通スタイル(全ページ共通のヘッダー/フッター/ナビ)
   header.php / footer.php から読み込んで使用します
   ========================================================= */
:root{
  --navy:#1c4a63;
  --navy-dark:#12303f;
  --pink:#ef5f7c;
  --yellow:#f4c542;
  --yellow-deep:#f7d915;
  --lightblue:#cfe9f2;
  --lightblue-2:#e7f4f8;
  --text:#33424a;
  --white:#ffffff;
  --font-jp:"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-round:"M PLUS Rounded 1c", var(--font-jp);
}

.psw-header, .psw-nav, .psw-footer{ font-family:var(--font-jp); color:var(--text); box-sizing:border-box; }
.psw-header *, .psw-nav *, .psw-footer *{ box-sizing:border-box; }
.psw-header a, .psw-nav a, .psw-footer a{ text-decoration:none; color:inherit; }
.psw-header img, .psw-footer img{ max-width:100%; display:block; }

/* ---------- ヘッダー ---------- */
/* ナビは常に透過の絶対配置。背景の帯柄(header_bk.png)は各ページのヒーロー/タイトルバー側が
   1枚の画像として持ち、ナビはその上に重なる(front-page.phpの.psw-hero、page-solution.cssの
   .psw-solution-titlebarを参照)。ナビ側とタイトルバー側で別々に同じ画像を描画すると
   拡大率の違いで柄がズレて見えるため、画像の保持元を1箇所に統一している。 */
.psw-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; position:absolute; top:0; left:0; right:0; background:transparent; z-index:20;
}
.psw-logo img{ height:80px; width:auto; }

/* ---------- ナビ ---------- */
.psw-nav{ display:flex; align-items:center; gap:32px; }
.psw-nav ul{ list-style:none; display:flex; gap:40px; margin:0; padding:0; font-weight:700; color:var(--navy-dark); align-items:center; }
.psw-header .psw-nav > ul{ color:#fff; }
.psw-footer .psw-nav > ul{ color:#fff; align-items:flex-start; }
.cta-mini{
  background:var(--yellow); color:var(--navy-dark); padding:9px 18px; border-radius:2px;
  font-weight:700; font-size:.85rem; white-space:nowrap;
}
.psw-nav-toggle{
  display:none; flex-direction:column; justify-content:space-between;
  width:30px; height:18px; background:none; border:0; padding:0; cursor:pointer;
}
.psw-nav-toggle .bar{ display:block; width:100%; height:2px; background:#fff; border-radius:1px; }
.psw-nav-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- ナビ: ドロップダウン(サブメニュー) ---------- */
.psw-nav .menu-item-has-children{ position:relative; }
.psw-nav .menu-item-has-children > a::after{ content:" \25be"; font-size:.8em; }
.psw-nav .sub-menu{
  display:none; position:absolute; top:100%; left:0; z-index:30; min-width:180px;
  list-style:none; margin:0; padding:8px 0; background:#fff; flex-direction:column; gap:0;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.psw-nav .sub-menu li{ width:100%; }
.psw-nav .sub-menu a{ display:block; padding:10px 20px; font-weight:700; white-space:nowrap; }
.psw-nav .sub-menu a:hover{ background:var(--lightblue-2); }
.psw-nav .menu-item-has-children:hover > .sub-menu,
.psw-nav .menu-item-has-children:focus-within > .sub-menu,
.psw-nav .menu-item-has-children.sub-open > .sub-menu{ display:flex; }

/* フッターのナビはホバー式プルダウンにせず、Digital Solutionの下に常時リンクを表示する */
.psw-footer .psw-nav .menu-item-has-children > a::after{ content:none; }
.psw-footer .psw-nav .sub-menu{
  display:block; position:static; box-shadow:none; background:transparent;
  padding:6px 0 0; margin:0; min-width:0; color:#fff;
}
.psw-footer .psw-nav .sub-menu a{
  padding:4px 0; font-weight:400; font-size:.85rem; opacity:.85; color:#fff;
}
.psw-footer .psw-nav .sub-menu a:hover{ background:transparent; text-decoration:underline; }

/* ---------- フッター ---------- */
.psw-footer{ 
  background:#1C92B4;
color:#fff; font-size:.9rem; line-height:1.6; 
}
.psw-footer-top{
  display:flex; align-items:center; justify-content:space-between; padding:22px 32px;
}
.psw-footer-top.inner{ max-width:1180px; margin:0 auto; padding:40px 24px; 
}
.psw-footer .psw-logo{
  display:inline-flex; align-items:center; 

}
.psw-footer-right{ display:flex; align-items:flex-start; gap:32px; }
.psw-footer-cta{ display:flex; align-items:center; gap:12px; }
.psw-footer-cta .cta-outline{
  background:var(--navy); color:#fff; padding:9px 18px; border-radius:2px;
  font-weight:700; font-size:.85rem; white-space:nowrap;
}
.psw-footer-dog{ max-width:1180px; margin:0 auto; padding:0 32px 16px; text-align:right; }
.psw-footer-dog img{ width:110px; height:auto; margin-left:auto; }
.psw-footer-bottom{
  background:#1C92B4; text-align:center; padding:18px; font-size:.8rem; color:#fff;
}
.psw-footer-bottom a{ margin:0 14px; }

/* ---------- NEWSカテゴリバッジ(複数ページで使用) ---------- */
.psw-news-badge{
  display:inline-block; margin-left:auto; flex-shrink:0;
  padding:3px 12px; border:1px solid currentColor; border-radius:20px;
  font-size:.75rem; font-weight:700; line-height:1.6; white-space:nowrap;
}
.psw-news-badge.cat-psw{ color:var(--navy); }
.psw-news-badge.cat-auvik{ color:#7c4dff; }
.psw-news-badge.cat-checkmk{ color:#15b371; }
.psw-news-badge.cat-bright{ color:var(--pink); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px){
  .psw-nav ul{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    align-items:flex-start; padding:16px 32px; gap:16px; display:none; box-shadow:0 8px 12px rgba(0,0,0,.06);
  }
  .psw-header .psw-nav > ul{ color:var(--navy-dark); }
  .psw-nav.open ul{ display:flex; }
  .psw-nav-toggle{ display:flex; }
  .psw-header{ padding:14px 20px; }
  .psw-logo img{ height:34px; }
  .psw-nav .sub-menu{
    position:static; display:block; box-shadow:none; padding:0 0 0 16px; background:transparent;
  }
  .psw-nav .sub-menu a{ padding:6px 0; }
  .psw-footer-top{ flex-direction:column; gap:16px; padding:22px 20px; }
  .psw-footer-right{ flex-direction:column; align-items:center; gap:16px; width:100%; }
  .psw-footer-top .psw-nav ul{ position:static; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; box-shadow:none; padding:0; background:transparent; color:#fff; }
  .psw-footer-cta{ justify-content:center; }
  .psw-footer-dog{ padding:0 20px 12px; }
  .psw-footer-dog img{ width:80px; }
}