$(function() {
        var naviClicked = false;
        // ヘッダナビゲーション
        $("#navi").find("div").click(function(){
            naviClicked = true;

            // ナビゲーションがアクティブであれば、マウスオーバーを有効に.
            $("#navi")
                .find('li').hover(
                    function(){
                        if (!$(this).hasClass('sfhover')) {
                            $('#navi *').removeClass('sfhover');
                            $(this).addClass('sfhover');
                        }
                    }
                );

            var parent = $(this).parent('li');
            if (parent.hasClass('sfhover')) {
                parent
                    .removeClass('sfhover')
                    .find('li').removeClass('sfhover');
            } else {
                parent
                    .addClass('sfhover')
                    .siblings('li')
                        .removeClass('sfhover')
                        .find('li').removeClass('sfhover');
            }
        });
        // ナビゲーション以外をクリックしたらナビを閉じる.
        $(document).click(function(){
            if (!naviClicked) {
                $("#navi").find('li')
                    .off('mouseenter')
                    .off('mouseleave')
                    .removeClass('sfhover');
            } else {
                naviClicked = false;
            }
        });
    });