$(function(){

    var menu_flg = 0;
    var nav = $("#header_nav");

    $(".sp-menu-button").click(function(){
        if(menu_flg){
            $(this).removeClass("spOpen");
            nav.fadeOut(400);
            menu_flg = 0;
        }
        else{
            $(this).addClass("spOpen");
            nav.fadeIn(400);
            menu_flg = 1;
        }
        return false;
    });

    // (fadeOut関数の影響)でインラインスタイル（style="display: none;"）が書かれてしまうので以下の処理が必要。
    var buttonDisplay = $('.sp-menu-button').css('display');
    $(window).on('load resize', function(){
        buttonDisplay = $('.sp-menu-button').css('display');
        // メディアクエリによって display: none;されたタイミングでif構文の実行
        if ('none' == buttonDisplay) {
            // nav（<ul id="header_nav">）にstyle属性を空に変更。
            // 空に変更することでCSSファイルのCSSが当たる。
            nav.attr("style", "");
        }
    });
 });