/* ============================================================
   doukouban.com — モバイル用グローバルナビ（ドロワー）
   2026-08-12 追加 ／ 同日 レビュー指摘を反映して改訂

   ■ なぜ要るのか
     960px以下で .gnav が display:none になっていたため、
     スマホにはグローバルナビが「一つも無い」状態だった。
     ヘッダーのCTAとフッターのサイトマップしか導線が無く、回遊できない。

   ■ 方針
     ・既存の <nav class="gnav"> をそのままパネルとして使う。
       リンクの一覧を二重に持たない（片方だけ直す事故を作らない）。
     ・このファイルは site.css / トップのインラインCSS の "後" に読み込む。
       セレクタも .site-header を噛ませて既存より強くしてあるので、
       読み込み順が入れ替わっても負けない。
     ・ブレークポイントは 960px に統一する。
       トップのインラインCSSは 920px だが、こちらが優先されるので実害は無い。

   ■ ★ html.nav-js というフラグについて（ここが要）
     たたむ／たたまないの判定は **.js ではなく .nav-js** で行う。
     ・.nav-js は各ページの <head> 内のインラインscriptが付ける。
       CSSが効き始める前に確定するので、初回描画でヘッダーが
       縦積み(約417px)→68px に潰れるレイアウトジャンプが起きない。
       （.js は各ページ末尾で付くので、これに乗せると必ずジャンプする。
         実測 CLS 0.398。レビューで指摘されて分離した）
     ・開閉の配線も同じ <head> のインラインscriptが持っている。
       外部JSファイルにすると、それ1本が落ちたときに
       「スマホのナビが全部消える」に逆戻りするため、外に出さない。
       このサイトは元々 reveal も各ページにインラインしている＝作法どおり。
     ・.nav-js が付かない環境（JS無効）では、たたまずに縦並びで常時表示する。
       ナビは常にアクセスできる状態を保つ。
   ============================================================ */

/* デスクトップではボタンを出さない（display:none なのでタブ順にも入らない） */
.nav-toggle{ display:none; }

@media (max-width: 960px){

  /* ---------- ハンバーガーボタン ----------
     JSが動いていないときは出さない。押しても何も起きない飾りを置かないため。 */
  .nav-js .site-header .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    flex:none;
    width:44px; height:44px;          /* タップ目標44px（Appleの推奨下限） */
    margin-left:4px; margin-right:-10px;
    padding:0; border:0; background:transparent;
    color:#141414; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .site-header .nav-toggle:focus-visible{
    outline:2px solid #E60012; outline-offset:2px; border-radius:6px;
  }

  .site-header .nav-toggle__bars{ position:relative; display:block; }
  .site-header .nav-toggle__bars,
  .site-header .nav-toggle__bars::before,
  .site-header .nav-toggle__bars::after{
    content:""; display:block;
    width:22px; height:2px; border-radius:2px;
    background:currentColor;
    transition:transform .22s ease, background-color .18s ease;
  }
  .site-header .nav-toggle__bars::before{ position:absolute; left:0; top:-7px; }
  .site-header .nav-toggle__bars::after { position:absolute; left:0; top:7px;  }

  /* 開いているときは × に変える */
  .site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
  .site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(7px)  rotate(45deg);  }
  .site-header .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform:translateY(-7px) rotate(-45deg); }

  /* ---------- ヘッダーの詰め ---------- */
  .site-header .header-inner{ gap:12px; }
  .site-header .btn-header{ margin-left:auto; }

  /* ---------- パネル本体（JSあり＝たたむ） ---------- */
  .nav-js .site-header .gnav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; margin:0;
    padding:2px 0 10px;
    padding-inline:clamp(20px, 5vw, 40px);
    background:#fff;
    border-top:1px solid rgba(20,20,20,.08);
    border-bottom:1px solid rgba(20,20,20,.10);
    box-shadow:0 20px 40px rgba(20,20,20,.12);
    max-height:calc(100vh - 68px);
    max-height:calc(100dvh - 68px);   /* iOSのURLバー伸縮に追従させる */
    overflow-y:auto;
    overscroll-behavior:contain;      /* パネル端で本文が動き出さないように */
    -webkit-overflow-scrolling:touch;
  }
  .nav-js .site-header.nav-open .gnav{ display:flex; }

  /* ---------- パネル本体（JSなし＝常時表示） ----------
     ボタンは出さず、ナビを縦に並べて常に触れる状態にする。
     ヘッダーが縦に伸びるので、この時だけ sticky を解除する
     （417pxのヘッダーが画面に貼り付いたままだと本文が読めない）。 */
  html:not(.nav-js) .site-header{ position:static; }
  html:not(.nav-js) .site-header .header-inner{ flex-wrap:wrap; height:auto; padding-block:10px; }
  html:not(.nav-js) .site-header .gnav{
    display:flex; flex-direction:column; gap:0;
    flex-basis:100%; margin:0; padding:0 0 4px;
  }

  /* ---------- パネル内のリンク ---------- */
  .site-header .gnav a{
    display:block;
    padding:15px 2px;
    font-size:15px; letter-spacing:.04em;
    color:#141414;
    border-bottom:1px solid rgba(20,20,20,.07);
  }
  .site-header .gnav a:last-child{ border-bottom:0; }
  .site-header .gnav a::after{ display:none; }        /* 下線アニメはドロワーでは使わない */
  .site-header .gnav a[aria-current="page"]{ color:#E60012; font-weight:700; }
}

/* ============================================================
   小さい画面でヘッダーを1行に収める
   ・ハンバーガーを足したぶん(44px)、375px幅では素のままだと
     ロゴ＋CTA＋ボタンが入りきらず右端がはみ出す。
   ・CTAは文字だけ小さくして、当たり判定(44px)は削らない。
     .btn は inline-flex + align-items:center なので min-height だけで中央に乗る。
   ・上の 960px ブロックより後に書くこと（gap を上書きするため）。
   ============================================================ */
@media (max-width: 560px){
  .site-header .header-inner{ gap:8px; }
  .site-header .logo svg,
  .site-header .logo img{ height:28px; }
  .site-header .btn-header{ min-height:44px; padding:0 16px; font-size:13px; }
}

@media (prefers-reduced-motion: reduce){
  .site-header .nav-toggle__bars,
  .site-header .nav-toggle__bars::before,
  .site-header .nav-toggle__bars::after{ transition:none; }
}

/* 紙にハンバーガーは要らない（このサイトには他に @media print が無い） */
@media print{
  .site-header .nav-toggle{ display:none !important; }
}
