@charset "UTF-8";
/* ============================================================
   北斗パートナーズ 2026 テーマ｜共通スタイル
   design/top.html・consulting.html・dx-lp.html の3ページすべてに
   同一内容で存在していたルールのみを集約したファイル。
   ページ固有のルールは各テンプレート側の <style> に残しています。
   ============================================================ */

/* ------------------------------------------------------------
   1. 元ファイル（Claude Design 書き出し）のランタイム用リセット
      3ページとも <head> に同一内容で入っていたもの
   ------------------------------------------------------------ */
x-dc{display:none!important}
html,body{height:100%;margin:0}
#dc-root,#dc-root>.sc-host{height:100%}

/* ------------------------------------------------------------
   2. 3ページ共通のベーススタイル
      （design の各ページ <style data-dc-tpl="4"> から抽出）
   ------------------------------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#F5F7FA;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
::selection{background:#E08A2B;color:#fff;}
h2,h3,h4,p,li,blockquote{text-wrap:pretty;line-break:strict;word-break:auto-phrase;}
@media (max-width:640px){ .brk{display:none;} }
.photoband{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;}
@media (min-width:1921px){
  .photoband{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:1920px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);}
}
:focus-visible{outline:3px solid #E08A2B;outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* スマホ幅でだけ改行する <br class="sbrk">。
   DX専用LP と 下層3ページ（お問い合わせ）の両方で使うため、ここに1本化している。
   （以前は page-dx.php のページ固有CSSと sub.css に分かれていた） */
.sbrk{display:none;}
@media (max-width:767px){ .sbrk{display:inline;} }

/* ------------------------------------------------------------
   3. グローバルナビの現在地表示
      表示中のページに対応するナビ項目だけ、青背景＋アンバー枠にする。
      トップページでは選択なし。
   ------------------------------------------------------------ */
/* ナビのリンクは design 由来のインラインstyleを持つため、
   打ち消す必要のある color / font-weight だけ !important を付けている。 */
header a[data-nav].is-current{
  background:#184098;color:#fff !important;font-weight:800 !important;box-shadow:0 0 0 1.5px #E08A2B;
}

/* ------------------------------------------------------------
   4. ヘッダー／ハンバーガーメニュー（WordPress 実装で新規追加）
      元ファイルは React で描画されており、静的HTMLには
      スマホ用メニューのマークアップが残っていなかったため新規作成。
      切り替え幅 1080px は元 React の window.innerWidth < 1080 に準拠。
   ------------------------------------------------------------ */
.hk-navtoggle{
  display:none;
  position:relative;
  width:46px;height:46px;
  flex-shrink:0;
  align-items:center;justify-content:center;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.28);
  border-radius:13px;
  padding:0;
}
.hk-navtoggle:hover{background:rgba(255,255,255,.08);}
.hk-navtoggle .hk-bars{
  position:relative;display:block;width:20px;height:14px;
}
.hk-navtoggle .hk-bars span{
  position:absolute;left:0;display:block;width:20px;height:2px;border-radius:2px;
  background:#fff;transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.hk-navtoggle .hk-bars span:nth-child(1){top:0;}
.hk-navtoggle .hk-bars span:nth-child(2){top:6px;}
.hk-navtoggle .hk-bars span:nth-child(3){top:12px;}
.hk-navtoggle[aria-expanded="true"] .hk-bars span:nth-child(1){top:6px;transform:rotate(45deg);}
.hk-navtoggle[aria-expanded="true"] .hk-bars span:nth-child(2){opacity:0;}
.hk-navtoggle[aria-expanded="true"] .hk-bars span:nth-child(3){top:6px;transform:rotate(-45deg);}

.hk-drawer{
  position:absolute;left:0;right:0;top:100%;
  background:#102C66;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 34px rgba(11,28,72,.36);
  display:none;
  overflow:hidden;
  max-height:calc(100vh - 78px);
  overflow-y:auto;
}
.hk-drawer.is-open{display:block;}
.hk-drawer-inner{
  max-width:1240px;margin:0 auto;padding:14px 24px 24px;
  display:flex;flex-direction:column;gap:6px;
}
.hk-drawer-inner a.hk-drawer-link{
  display:block;padding:14px 12px;border-radius:12px;
  color:rgba(255,255,255,.92);font-weight:700;font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hk-drawer-inner a.hk-drawer-link.is-current{
  background:#184098;color:#fff;font-weight:800;box-shadow:0 0 0 1.5px #E08A2B;
  border-bottom-color:transparent;
}
.hk-drawer-tel{
  display:flex;flex-direction:column;gap:2px;
  padding:16px 12px 4px;line-height:1.2;
}
.hk-drawer-tel span:first-child{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.65);letter-spacing:.04em;}
.hk-drawer-tel span:last-child{font-family:Inter,sans-serif;font-weight:800;font-size:26px;color:#fff;letter-spacing:.01em;}
.hk-drawer-cta{
  margin-top:10px;text-align:center;
  background:#E08A2B;color:#fff;font-weight:900;font-size:16px;
  padding:15px 22px;border-radius:15px;
  box-shadow:0 6px 16px rgba(224,138,43,.4);
}
body.hk-menu-open{overflow:hidden;}

@media (max-width:1079px){
  .hk-navtoggle{display:flex;}
  .hk-globalnav{display:none !important;}
  .hk-headercta{display:none !important;}
}
@media (min-width:1080px){
  .hk-drawer{display:none !important;}
}
