/**
 * smpmenu-custom.css
 * 下から上へ85%せり上がるアコーディオン型スマホメニューのスタイル
 */

/* 1. メニュー本体 (ドロワー) の設定 */
#smpmenu-drawer {
    position: fixed !important;
    bottom: 54px !important;
    right: 0 !important;
    top: auto !important;
    width: 85% !important;

    /* display: none を無効化し、常にレイアウト対象にする */
    display: block !important;
    height: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    /* 中身がはみ出さないように固定 */

    max-height: 85vh !important;
    background-color: #fff !important;
    z-index: 99999 !important;

    /* 滑らかな伸縮を実現 */
    transition: height 0.2s ease-out, visibility 0.2s !important;

    /* 上方向と左右に広がるドロップシャドウを追加（下方向には入れない） */
    box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.75) !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* メニュー展開時の状態 */
#smpmenu-drawer.smpmenu-is-active {
    height: 85vh !important;
    visibility: visible !important;
    overflow-y: auto !important;
    /* 開いた後はスクロール可能に */
}

/* 2. 背景（body）のスクロール固定 */
body.smpmenu-is-locked {
    overflow: hidden !important;
}

/* 3. ボタン自体のスタイル調整（オリジナルのデザインを再現） */
#smpmenu-button {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
}

/* 通常時のアイコン（ハンバーガー） */
#smpmenu-button::before {
    content: "";
    display: block;
    width: 33px;
    height: 33px;
    background-image: url("../images/common/icon_sticky_menu.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-bottom: 2px;
}

/* 通常時のテキスト */
#smpmenu-button span {
    font-size: 10px !important;
    line-height: 1 !important;
    color: #fff !important;
}

/* 開いている時（閉じるボタン）のスタイル */
#smpmenu-button.smpmenu-is-open {
    /* 背景色は親の赤色のまま、または必要に応じて指定 */
    background-color: transparent !important;
}

/* アイコンを X 印に切り替え */
#smpmenu-button.smpmenu-is-open::before {
    background-image: url("../images/common/icon_sticky_menu_close.png") !important;
}

/* 「メニュー」テキストを隠す */
#smpmenu-button.smpmenu-is-open span {
    font-size: 0 !important;
    visibility: hidden !important;
}

/* 「閉じる」テキストを表示 */
#smpmenu-button.smpmenu-is-open::after {
    content: "閉じる";
    display: block;
    font-size: 11px;
    color: #fff;
    margin-top: -5px;
    /* spanを隠した分だけ上に調整 */
    line-height: 1;
}


/* 4. メニュー表示時の背後のカバー（既存のシステムCSSによるオーバーレイを強制解除） */
#smpmenu-drawer::before,
#smpmenu-drawer::after,
.p-drawer__inner::before,
.p-drawer__inner::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
}

/* 親要素の背景色が干渉している場合の対策 */
.p-drawer {
    background-color: transparent !important;
}