<header_common>
    <!--ヘッダー-->
    <div class="header">
        <div class="header-logo">
            <a href="{base}/">
                <picture>
                    <source srcset="{base}/assets/img/common/logo_sp.png" media="(max-width: 767px)">
                    <img src="{base}/assets/img/common/logo.png" alt="医療法人 博仁会 採用サイト">
                </picture>
            </a>
        </div>

        <div class="header-nav">
            <nav>
                <ul class="header-nav-list">
                    <li>
                        <a href="{base}/">HOME</a>
                    </li>
                    <li>
                        <a href="{base}/about/">私たちについて</a>
                    </li>
                    <li>
                        <a href="{base}/workstyle/">Work style</a>
                    </li>
                    <li>
                        <a href="{base}/career/">教育・キャリア</a>
                    </li>
                    <li>
                        <a href="{base}/qualification/">認定資格者</a>
                    </li>
                    <li>
                        <a href="{base}/welfare/">福利厚生</a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="header-entry">
            <a href="{base}/requirements/">Entry<span>募集要項</span></a>
        </div>

        <button id="nav-toggle" aria-label="メニューを開く" aria-controls="gloval-nav" aria-expanded="false">
            <div>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>

        <div id="gloval-nav" aria-hidden="true">
            <div class="gloval-nav-inner">
                <ul class="gloval-nav-list">
                    <li>
                        <a href="{base}/">HOME</a>
                    </li>
                    <li>
                        <a href="{base}/now/">福リハNOW</a>
                    </li>
                    <li class="has-accordion">
                        <a href="{base}/about/" class="has-child">
                            私たちについて
                        </a>
                        <button class="accordion-toggle" aria-expanded="false" aria-label="サブメニューを開く"></button>
                        <ul class="accordion-list">
                            <li><a href="{base}/about/department.html">部門紹介</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="{base}/workstyle/">Work style</a>
                    </li>
                    <li class="has-accordion">
                        <a href="{base}/career/" class="has-child">
                            教育・キャリア
                        </a>
                        <button class="accordion-toggle" aria-expanded="false" aria-label="サブメニューを開く"></button>
                        <ul class="accordion-list">
                            <li><a href="{base}/career/careerpath.html">キャリアパス</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="{base}/qualification/">認定資格者</a>
                    </li>
                    <li>
                        <a href="{base}/welfare/">福利厚生</a>
                    </li>
                </ul>
                <a href="{base}/requirements/" class="gloval-nav-entry">Entry<span>募集要項</span></a>
                <ul class="gloval-nav-sub">
                    <li>
                        <a href="{base}/privacy/">プライバシーポリシー</a>
                    </li>
                    <li>
                        <a href="{base}/sitemap/">サイトマップ</a>
                    </li>
                </ul>
            </div>
        </div>

        <div id="gloval-nav-overlay" tabindex="-1"></div>
    </div>
    <!--/ヘッダー-->

    <script>
        // カレント設定
        this.on('mount', function () {
            var current = location.pathname.replace(this.base, '').split('/')[1];
            if (current.length === 0 || current === 'index.html') {
                $('.header-nav-list li > a[href="' + this.base + '/"]').closest('a').addClass('active').attr('aria-current', 'page');
            } else {
                $('.header-nav-list li > a[href^="' + this.base + '/' + current + '/"]').closest('a').addClass('active').attr('aria-current', 'page');
            }
        });
        // ハンバーガー
        this.on('mount', function() {
            function openMenu() {
                $('body').addClass('open');
                $('#nav-toggle').attr({
                    'aria-expanded': 'true',
                    'aria-label': 'メニューを閉じる'
                });
                $('#gloval-nav').attr('aria-hidden', 'false');
            }
            function closeMenu() {
                $('body').removeClass('open');
                $('#nav-toggle').attr({
                    'aria-expanded': 'false',
                    'aria-label': 'メニューを開く'
                });
                $('#gloval-nav').attr('aria-hidden', 'true');
            }
            function toggleMenu() {
                $('body').hasClass('open') ? closeMenu() : openMenu();
            }
            // ハンバーガー開閉
            $(document).on('click', '#nav-toggle', toggleMenu);
            // オーバーレイクリックで閉じる
            $(document).on('click', '#gloval-nav-overlay', closeMenu);
            // アコーディオン
            $(document).on('click', '.accordion-toggle', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const $parent = $(this).closest('.has-accordion');
                const $content = $parent.children('.accordion-list'); // ←修正
                const isOpen = $parent.hasClass('open');
                if (isOpen) {
                    $content.stop(true, true).slideUp(300);
                    $parent.removeClass('open');
                    $(this).attr('aria-expanded', 'false');
                } else {
                    $content.stop(true, true).slideDown(300);
                    $parent.addClass('open');
                    $(this).attr('aria-expanded', 'true');
                }
            });
            // キーボード
            $(document).on('keydown', '#nav-toggle', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    toggleMenu();
                }
            });
            $(document).on('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeMenu();
                }
            });
        });
    </script>
</header_common>
