/* ===== mastudio 共通ヘッダーナビ：スマホでハンバーガーに畳む =====
   2026-09-15 新規 / index.html・guide.html・privacy.html の3ページが読む
   🔴 ナビは 480px 以下で画面外にはみ出していた（実測）。560px 以上は問題なし。
      しきい値は余裕を見て 599px 以下をハンバーガーにする。
   🟢 JavaScript 不要（チェックボックスとラベルだけで開閉する）        */

.site-header-row{ position:relative; }

/* チェックボックス本体は常に隠す（見えないが、開閉の状態を持つ） */
.nav-toggle{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.site-nav{
  display:flex;
  gap:var(--space-4);
  font-size:14px;
}

/* ハンバーガーのボタンはPCでは出さない */
.nav-burger{ display:none; }

@media screen and (max-width:599px){
  /* 🔴 home.css の .wrap は position:relative; z-index:1 を持っている。
     ヘッダーも後続セクションも同じ z-index:1 なので、後から来るセクションが
     上に描かれ、開いたメニューが本文の下に潜る（2026-09-15 ローカル描画で発覚）。
     ヘッダーだけ層を上げる。 */
  header.wrap{
    position:relative;
    z-index:100;
  }

  .nav-burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:30px;
    height:30px;
    cursor:pointer;
    flex:0 0 auto;
  }
  .nav-burger span{
    display:block;
    height:2px;
    width:100%;
    background:var(--color-text);
    border-radius:2px;
    transition:transform .2s, opacity .2s;
  }
  /* 開いているときは × に変える */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ナビ本体は畳んでおき、チェックが入ったときだけ開く */
  .site-nav{
    display:none;
    position:absolute;
    top:100%;
    left:calc(var(--space-8) * -1);
    right:calc(var(--space-8) * -1);
    flex-direction:column;
    gap:0;
    background:var(--color-bg);
    border-top:1px solid var(--color-divider);
    border-bottom:1px solid var(--color-divider);
    box-shadow:var(--shadow-md);
    z-index:50;
  }
  .nav-toggle:checked ~ .site-nav{ display:flex; }
  .site-nav a{
    padding:14px var(--space-8);
    border-bottom:1px solid var(--color-divider);
  }
  .site-nav a:last-child{ border-bottom:0; }
}

/* キーボード操作でボタンの位置が分かるようにする */
.nav-toggle:focus-visible ~ .nav-burger{
  outline:2px solid var(--color-accent);
  outline-offset:3px;
  border-radius:4px;
}