/* ==== 基本変数 ==== */
:root{
  --bg:#eef1f5;
  --card:#fff;
  --text:#1b1e28;
  --muted:#8c94a5;
  --border:#dde2ec;
  --primary-1:#6ea2ff;
  --primary-2:#6b8df0;
  --focus:#5b8cff;
  --shadow:0 8px 30px rgba(0,0,0,0.08);
  --header-h: 64px;
}

*{box-sizing:border-box}
body{height:100%}
body{
  padding-top: var(--header-h);
  margin:0;
  font-family: "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--text);
  background:var(--bg);
}
html{ scroll-padding-top: var(--header-h); }
/* ==== 共通ヘッダー（PC想定） ==== */
.site-header{
  display: block !important;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;                      /* ドロワー(1001/1002)より下にしておく */
  background: #fff;                   /* 透過なら背景色を明示 */
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }

/*.site-header .header-inner{
  max-width:1120px; margin:0 auto;
  padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
}*/
.brand{display:flex; gap:12px; align-items:center;}
.brand-logo{width:44px; height:44px; object-fit:contain}
.brand-text{line-height:1.15}
.brand-line-ja{font-size:12px; color:#6b7280;}
.brand-line-app{font-size:22px; font-weight:700;}

.nav{ display:flex; gap:24px; align-items:center; }
.nav-item{
  display:inline-flex; gap:8px; align-items:center;
  color:#374151; text-decoration:none; font-size:14px;
}
.nav-item:hover{color:#111827}
.nav-item .bi{width:20px; height:20px; fill:currentColor}
.nav-item.profile .bi{width:28px; height:28px}

.hamburger{ display:none; border:0; background:transparent; cursor:pointer; }

/* まず .sidebar-sp は常に隠す（ドロワー内だけ後で表示） */
.sidebar-sp { display: none !important; }

/* ドロワー（右メニュー） */
.drawer{
  position:fixed; top:0; right:0; height:100vh; width:300px;
  background:#fff; box-shadow:0 6px 24px rgba(0,0,0,.15);
  transform:translateX(100%); visibility:hidden;           /* 画面外 */
  transition:transform .25s ease, visibility .25s ease;
  z-index:1002; display:none;                               /* 初期は非表示 */
  flex-direction:column;
}
.drawer.is-open{ display:flex; transform:translateX(0); visibility:visible; }
.drawer-header{ display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid #eee; }
.drawer-close{ border:0; background:transparent; font-size:22px; cursor:pointer; }
.drawer-body{ padding:12px 16px; display:flex; flex-direction:column; gap:5px; }

.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1001;
}
.drawer-backdrop[hidden]{ display:none !important; }
  .sidebar-sp {
    background: #fff;
    /*border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    height: calc(100% - 0px);*/
    max-height: 750px;
}
/* モバイル（1024px以下）：ドロワー内のクローンは表示 */
@media (max-width: 1024px){
  
  .site-header .nav { display: none !important; }
  .hamburger { display: inline-flex; width:40px; height:40px;align-items: center; }

  /* ← ここに追加：ドロワーに入ったら .sidebar-sp を表示 */
  .drawer .sidebar-sp { display: block !important; }

  /* 既存のPC用サイドバーがあれば隠す（念のため） */
  #appSidebar, .app-sidebar, .sidebar { display: none !important; }

  /* 既に入れているならそのままでOK */
  .drawer .nav { display:flex !important; flex-direction:column; gap:12px; padding: 12px 23px;
        align-items: flex-start;}
}

/* デスクトップ（1025px以上）：右メニューは常に非表示 */
@media (min-width: 1025px){
  .site-header .nav { display:flex !important; }
  .hamburger { display:none !important; }
  #mobileDrawer, #drawerBackdrop { display:none !important; }
  /* ← ここでも保険としてPCで .sidebar-sp を隠す */
  #appSidebar, .sidebar-sp { display:none !important; }
}

/* モバイルではヘッダーを抑える（必要なら表示調整） */
@media (max-width: 768px){
  .site-header .header-inner{padding:10px 14px}
  .brand-line-app{font-size:18px}
  /*.nav-item span{display:none}
     ヘッダーは非表示（PC共通パーツのみ使う） */
}