@charset "UTF-8";
/* =============================================================
   公開ページのハンバーガーメニュー(ドロワー .wp-menu)
   ※ tailwind.css の preflight と管理画面CSS(mase_fuc_get_css)より後に読み込むこと。
     読み込みは partial/_head_tailwind.html.twig。
   ============================================================= */
/* --- 公開ページのハンバーガーメニュー(.wp-menu) ---
   mase既定の .e-overlayMenu(全面の暗いオーバーレイ)を、
   「半透明の暗幕(=.e-overlayMenu 自身) + 右寄せの白いドロワー(=.wp-menu-panel)」に変える。
   ・開閉クラス(.open/.close)と keyframes(top を 0 へ animate)は mase 既定のまま使うため、
     top:0 / height:100dvh は維持し、ヘッダー分は padding-top で逃がす。
   ・管理画面(_backend)も同じドロワーを使う。従来は ._z:not(._backend) でスコープしていたが
     管理画面のヘッダー/メニューも一般画面に揃える方針になったため、`.wp-menu` クラス自体を
     opt-in のスイッチとして扱う(このクラスを付けたドロワーだけが対象)。 */
.e-overlayMenu.wp-menu {
    background-color: rgba(15, 23, 42, .45); /* slate-900/45 の暗幕 */
    /* 下端は画面にベタ付けせず余白を残す(内容が多くパネルが最大高になった時に
       ログアウト等のボタンが画面の縁と接して窮屈に見えるため)。 */
    padding: 0 0 1rem;
    /* ドロワーはヘッダー(ツールバー+ヘッダー)の直下から始める。ヘッダーは sticky で
       常に画面上端に居るので「ヘッダー下端の実測値」を _embed_overlayMenu の JS が
       --wp-menu-top に入れる(文字サイズ「大」・SP/PCで高さが変わるため rem 固定だと
       数px〜十数pxの隙間や潜り込みが出る)。下は JS 無効時のフォールバック。 */
    padding-top: var(--wp-menu-top, 6.5rem);
}
.e-overlayMenu.wp-menu .wp-menu-panel {
    display: flex;
    flex-direction: column;
    margin-left: auto;              /* 右寄せドロワー */
    width: min(24rem, 100%);
    max-height: 100%;
    overflow: hidden;
    background-color: #fff;
    border-left: 1px solid #e2e8f0;
    border-bottom-left-radius: .75rem;
    border-bottom-right-radius: .75rem;
    box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
    /* mase既定の .e-overlayMenu は暗い背景前提で文字色が白系(--color-gray-light)。
       白いドロワーでは既定色を暗色に戻す。
       ※ここでは子孫セレクタで color を上書きしない: specificity が Tailwind の
         text-slate-800 等(クラス1つ)を上回り、個別指定が全部潰れて白のままになる。 */
    color: #334155; /* slate-700 */
    line-height: 1.5;
}
.e-overlayMenu.wp-menu :where(h2, span) {
    font-size: inherit;
    font-weight: inherit;
}
/* mase既定の .e-overlayMenu .split a / a::before(アイコン注入)を無効化 */
.e-overlayMenu.wp-menu a::before,
.e-overlayMenu.wp-menu a::after { content: none; }
.e-overlayMenu.wp-menu a:hover { opacity: 1; }
@media (max-width: 640px) {
    /* SPは横いっぱい。下端の余白は少しだけ詰める(画面が狭いぶん本文を優先) */
    .e-overlayMenu.wp-menu { padding-bottom: .75rem; }
    .e-overlayMenu.wp-menu .wp-menu-panel {
        width: 100%;
        border-left: 0;
    }
}