/* ==========================================================================
   ソフトシンク モバイルメニュー（子テーマ実装）
   Responsive Menu プラグインの置き換え。プラグインに依存しない。
   2026-11-14
   ========================================================================== */

.st-mnav-toggle,
.st-mnav,
.st-mnav-overlay {
    display: none;
}

@media (max-width: 767px) {

    /* ---- ハンバーガーボタン ---- */
    .st-mnav-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 19px;
        width: 45px;
        height: 48px;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 5px;
        background: #000;
        color: #fff;
        cursor: pointer;
        z-index: 100000;
        -webkit-appearance: none;
        appearance: none;
    }

    .st-mnav-toggle .st-mnav-bars {
        display: block;
        position: relative;
        width: 24px;
        height: 16px;
        margin: 7px auto 0;
    }

    .st-mnav-toggle .st-mnav-bars span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        -webkit-transition: -webkit-transform .25s ease, opacity .2s ease, top .25s ease;
        transition: transform .25s ease, opacity .2s ease, top .25s ease;
    }

    .st-mnav-toggle .st-mnav-bars span:nth-child(1) { top: 0; }
    .st-mnav-toggle .st-mnav-bars span:nth-child(2) { top: 7px; }
    .st-mnav-toggle .st-mnav-bars span:nth-child(3) { top: 14px; }

    .st-mnav-toggle .st-mnav-text {
        display: block;
        margin-top: 5px;
        font-size: 11px;
        line-height: 1;
        letter-spacing: .02em;
    }

    .st-mnav-toggle[aria-expanded="true"] .st-mnav-bars span:nth-child(1) {
        top: 7px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .st-mnav-toggle[aria-expanded="true"] .st-mnav-bars span:nth-child(2) {
        opacity: 0;
    }
    .st-mnav-toggle[aria-expanded="true"] .st-mnav-bars span:nth-child(3) {
        top: 7px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    /* ---- 背景オーバーレイ ---- */
    .st-mnav-overlay {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .4);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: opacity .25s ease, visibility .25s ease;
        transition: opacity .25s ease, visibility .25s ease;
        z-index: 99997;
    }
    .st-mnav-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* ---- スライドパネル ---- */
    .st-mnav {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 75%;
        max-width: 320px;
        height: 100%;
        background: #212121;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform .25s ease;
        transition: transform .25s ease;
        z-index: 99998;
    }
    .st-mnav.is-open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .st-mnav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .st-mnav li {
        position: relative;
        margin: 0;
        border-bottom: 1px solid #444;
    }
    .st-mnav a {
        display: block;
        padding: 24px 54px 24px 20px;
        background: #212121;
        color: #fff;
        font-size: 14px;
        line-height: 1.4;
        text-decoration: none;
    }
    .st-mnav a strong {
        font-weight: normal;
    }
    .st-mnav a:hover,
    .st-mnav a:focus {
        background: #2f2f2f;
        color: #fff;
    }

    /* ---- サブメニュー ---- */
    .st-mnav .sub-menu {
        display: none;
    }
    .st-mnav .sub-menu.is-open {
        display: block;
    }
    .st-mnav .sub-menu a {
        padding-left: 36px;
        background: #1a1a1a;
        font-size: 13px;
    }
    .st-mnav .sub-menu a:hover,
    .st-mnav .sub-menu a:focus {
        background: #272727;
    }

    .st-mnav-sub-toggle {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        height: 70px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 12px;
        line-height: 70px;
        text-align: center;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .st-mnav-sub-toggle:before {
        content: "\25BC";
        display: inline-block;
        -webkit-transition: -webkit-transform .2s ease;
        transition: transform .2s ease;
    }
    .st-mnav-sub-toggle[aria-expanded="true"]:before {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    /* 管理バーが出ている場合はボタンを下げる */
    body.admin-bar .st-mnav-toggle {
        top: 61px;
    }
    body.admin-bar .st-mnav {
        top: 46px;
        height: calc(100% - 46px);
    }
}