/**
 * SP ハンバーガーメニュー（index / companies 共通）
 * 背景画像は .mobile-nav__bg に後から指定
 */

/* メニュー専用固定ロゴ（.header-logo と併用しない — 特異性で display:block され二重表示になるのを防ぐ） */
.site-header .header-logo--menu {
    display: none;
}

.mobile-nav {
    display: none;
}

@media screen and (max-width: 767px) {
    .mobile-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 210;
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-nav.is-open {
        pointer-events: auto;
        visibility: visible;
    }

    .mobile-nav__backdrop {
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-nav.is-open .mobile-nav__backdrop {
        opacity: 1;
    }

    .mobile-nav__panel {
        position: absolute;
        left: 0;
        right: 0;
        top: var(--mobile-nav-top, 80px);
        bottom: 0;
        max-height: none;
        display: flex;
        flex-direction: column;
        z-index: 1;
        transform: translateY(-8px);
        opacity: 0;
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .mobile-nav.is-open .mobile-nav__panel {
        transform: translateY(0);
        opacity: 1;
    }

    /* 背景画像はここに background-image 等で指定 */
    .mobile-nav__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background-image: url(../img/mobile-nav-bg.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        aspect-ratio: 375/460;
    }

    .mobile-nav__nav {
        position: relative;
        flex: 1;
        z-index: 1;
        padding: 72px 30px 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-nav__item + .mobile-nav__item {
        margin-top: 28px;
    }

    .mobile-nav__link {
        display: block;
        position: relative;
        padding: 4px 0 4px 32px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        text-decoration: none;
        line-height: 1.4;
    }

    .mobile-nav__link::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 11px;
        height: 10px;
        background-color: #fff;
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }

    .mobile-nav__link:active {
        opacity: 0.85;
    }

    body.is-mobile-nav-open {
        overflow: hidden;
        touch-action: none;
    }

    /* メニュー展開時：ヘッダーは白ベース＋青ロゴ・閉じるアイコン用 */
    .site-header .mv-section__content.is-menu-open {
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .site-header .mv-section__content.is-menu-open .header-menu-button span {
        background-color: #0037cb;
    }

    /* メニュー開時：スクロール連動ロゴは隠し、固定ロゴのみ表示 */
    .site-header .mv-section__content.is-menu-open .header-logo--menu {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        max-width: none;
        object-fit: contain;
        pointer-events: none;
    }

    .site-header .mv-section__content.is-menu-open .header-logo--scroll {
        visibility: hidden;
    }

    .site-header .mv-section__content.is-menu-open picture.header-logo {
        visibility: hidden;
    }
}