/*
 * custom-mobile-menu.css
 *
 * ■ 方針
 *   - JSのイベントキャプチャを用いて、Themifyが閉じる処理を行う前にフェードアウトを割り込ませる。
 *   - CSSの広範な上書きを避け、特定の状態（開く・閉じる）の時のみアニメーションを適用する。
 */

/* 1. 基本設定：Themifyの拡大・縮小やスライド移動を無効化し、画面中央に固定 */
div.mobile-menu-module {
    transform: scale(1) !important;
    left: 0 !important;
    right: 0 !important;
    transition: none !important;
    padding-top: 25px;
    /* Themifyのスライド用transitionを無効化 */
}

.themify_builder .body-overlay {
    background: transparent;
}

/* 2. 開くとき（Themifyが .visible を付与した時） */
div.mobile-menu-module.visible {
    animation: menuFadeIn 0.3s ease forwards !important;
}

/* 3. 閉じるとき（JSで .is-closing を付与した時） */
div.mobile-menu-module.is-closing {
    /* 閉じるアニメーション中はThemifyの妨害を防ぐため強制表示 */
    display: block !important;
    animation: menuFadeOut 0.3s ease forwards !important;
    /* 閉じる際にスライドして消えるのを防ぐため位置を固定 */
    left: 0 !important;
    right: 0 !important;
}

@keyframes menuFadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    1% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes menuFadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }

    99% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* =========================================================
   メニューアイテムの順次フェードイン（Staggered Animation）
   ========================================================= */

/* メニューアイテムの初期状態（透明・少し下にずらす） */
div.mobile-menu-module>ul.nav>li {
    opacity: 0;
    transform: translateY(15px);
}

/* メニューが開いた時（親に.visibleが付与された時）にフェードイン */
div.mobile-menu-module.visible>ul.nav>li {
    animation: menuItemFadeIn 0.4s ease forwards;
}

/* 閉じている途中(.is-closing)は、そのまま状態を維持（親ごとフェードアウトする） */
div.mobile-menu-module.is-closing>ul.nav>li {
    opacity: 1;
    transform: translateY(0);
}

@keyframes menuItemFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から順番に表示を遅延させる (間隔を詰めて30個目まで設定) */
div.mobile-menu-module.visible>ul.nav>li:nth-child(1) {
    animation-delay: 0.03s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(2) {
    animation-delay: 0.06s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(3) {
    animation-delay: 0.09s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(4) {
    animation-delay: 0.12s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(5) {
    animation-delay: 0.15s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(6) {
    animation-delay: 0.18s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(7) {
    animation-delay: 0.21s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(8) {
    animation-delay: 0.24s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(9) {
    animation-delay: 0.27s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(10) {
    animation-delay: 0.30s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(11) {
    animation-delay: 0.33s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(12) {
    animation-delay: 0.36s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(13) {
    animation-delay: 0.39s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(14) {
    animation-delay: 0.42s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(15) {
    animation-delay: 0.45s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(16) {
    animation-delay: 0.48s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(17) {
    animation-delay: 0.51s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(18) {
    animation-delay: 0.54s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(19) {
    animation-delay: 0.57s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(20) {
    animation-delay: 0.60s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(21) {
    animation-delay: 0.63s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(22) {
    animation-delay: 0.66s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(23) {
    animation-delay: 0.69s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(24) {
    animation-delay: 0.72s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(25) {
    animation-delay: 0.75s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(26) {
    animation-delay: 0.78s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(27) {
    animation-delay: 0.81s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(28) {
    animation-delay: 0.84s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(29) {
    animation-delay: 0.87s;
}

div.mobile-menu-module.visible>ul.nav>li:nth-child(30) {
    animation-delay: 0.90s;
}

/* =========================================================
   クローズボタン（×）のスクロール追従・最前面固定
   ========================================================= */
.mobile-menu-module>.menu-close {
    /* スクロールしても上部に固定する */
    position: sticky !important;
    top: 0px !important;

    /* リンクと重なった際に必ず×ボタンが優先してクリックされるように最前面へ */
    z-index: 10000 !important;

    /* absolute を解除し、右寄せにするための設定 */
    display: block !important;
    margin-left: auto !important;
    margin-right: 20px !important;
    right: auto !important;
}