*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* ============================================
   全体のリセット
============================================ */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}

a {
    color: inherit;
    text-decoration: none;
}



/* ============================================
   ヘッダー
============================================ */
.header {
    display:flex;
    align-items:center;
    gap:14px;
    padding:8px 16px;
    height:56px;

    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);

    position:sticky;
    top:0;
    z-index:9999;
}



/* ロゴリンク */
.logo-link{
    display:flex;
    align-items:center;
    text-decoration:none;
}

/* ロゴ画像 */
.logo-img{
    height:30px;
    width:auto;
    display:block;
}

/* ============================================
   左サイドバー
============================================ */
.sidebar {
    width: 240px;
    background-color: white;
    padding-top: 20px;
    position: fixed;
    top: 60px;                         /* ヘッダーの下から開始（高さはお好みで） */
    left: 0;
    height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 1500;                     /* ヘッダーより下、オーバーレイより上 */
    transition: transform 0.3s ease;
}

/* 閉じた状態（PC） */
/* PC 幅だけでサイドバーをスライドアウトさせる */
@media (min-width: 900px) {
    .sidebar:not(.open) {
        transform: translateX(-100%);
        width: 0;
        pointer-events: none;
    }
}

/* 900px 以下（スマホ）は overlay 表示 */
@media (max-width: 900px) {
    .sidebar {
        display: none;
        position: fixed;
        left: 0;
        top: 60px;                     /* ヘッダーの下から */
        height: calc(100vh - 60px);
        background-color: white;
        z-index: 250;
        transform: translateX(-100%);
    }

    .sidebar.overlay-open {
        display: block;
        transform: translateX(0);
    }
}

/* ============================================
   サイドバー共通要素
============================================ */

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 14px;
    cursor: pointer;
}

.sidebar-item:hover {
    background-color: #f5f5f5;
}

/* ============================
   左メニュー用オーバーレイ
============================ */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  /* display: none;  ← ★これが原因なので削除 */
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.sidebar-overlay.is-open {
  display: block;   /* ★ 追加（または修正） */
  opacity: 1;
  pointer-events: auto;
}


/* ============================
   共通ガター（スマホ余白統一）
============================ */
:root{
  --page-gutter: 24px;  /* PC */
  --header-h: 56px;

  --history-side-w: 360px;
  --history-gap: 24px;
}
@media (max-width: 600px){
  :root{
    --page-gutter: 16px; /* ★スマホ：トップに合わせる（必要なら12pxへ） */
  }
}

/* 900px 以下（スマホ）は overlay 表示 */
@media (max-width: 900px) {
  .sidebar {
    display: none;
    position: fixed;
    left: 0;
    top: 60px;
    height: calc(100vh - 60px);
    background-color: white;

    z-index: 2500; /* ★ ここを 250 → 2500 に上げる（overlayより上） */

    transform: translateX(-100%);
  }

  .sidebar.overlay-open {
    display: block;
    transform: translateX(0);
  }
}