<header_common>
    <div class="header">
        <h1 class="header__logo"><a href="{base}/"></a></h1>

        <div class="header__parts">
            <div class="header-gnavi">
                <nav class="header-gnavi__nav">
                    <ul class="header-gnavi__nav__list">
                        <li>
                            <a href="{ base }/" class="header-gnavi__nav__list__link">HOME</a>
                        </li>
                        <li>
                            <a href="{ base }/dock/" class="header-gnavi__nav__list__link">人間ドック</a>
                        </li>
                        <li>
                            <a href="{ base }/menu/" class="header-gnavi__nav__list__link">健康診断</a>
                            <div class="header-gnavi__nav__list__mega-wrap">
                                <ul class="header-gnavi__nav__list__mega-wrap__list">
                                    <li><a href="{ base }/menu/" class="header-gnavi__nav__list__mega-wrap__list__link">定期健康診断</a></li>
                                    <li><a href="{ base }/menu/kenpo.html" class="header-gnavi__nav__list__mega-wrap__list__link">協会けんぽ補助利用</a></li>
                                    <li><a href="{ base }/menu/#ank-regular02" class="header-gnavi__nav__list__mega-wrap__list__link">FCF福岡市中小企業従業員福祉協会の補助利用による健康診断</a></li>
                                    <li><a href="{ base }/menu/#ank-regular03" class="header-gnavi__nav__list__mega-wrap__list__link">労災保険二次健康診断等</a></li>
                                    <li><a href="{ base }/menu/special.html" class="header-gnavi__nav__list__mega-wrap__list__link">特殊健康診断</a></li>
                                    <li><a href="{ base }/menu/special.html#ank-special02" class="header-gnavi__nav__list__mega-wrap__list__link">行政指導・通達に関わる健康診断</a></li>
                                    <li><a href="{ base }/menu/resident.html" class="header-gnavi__nav__list__mega-wrap__list__link">市町村住民健診</a></li>
                                    <li><a href="{ base }/menu/resident.html#ank-resident02" class="header-gnavi__nav__list__mega-wrap__list__link">学校教職員健診、及び学生・生徒健診</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="{ base }/personal/flow.html" class="header-gnavi__nav__list__link">個人の方へ</a>
                            <div class="header-gnavi__nav__list__mega-wrap">
                                <ul class="header-gnavi__nav__list__mega-wrap__list">
                                    <li><a href="{ base }/personal/flow.html" class="header-gnavi__nav__list__mega-wrap__list__link">予約から受診までの流れ</a></li>
                                    <li><a href="{ base }/personal/flow.html#ank-flow01" class="header-gnavi__nav__list__mega-wrap__list__link">ご予約の方法</a></li>
                                    <li><a href="{ base }/personal/flow.html#ank-flow02" class="header-gnavi__nav__list__mega-wrap__list__link">問診票の登録・記入</a></li>
                                    <li><a href="{ base }/personal/attention.html" class="header-gnavi__nav__list__mega-wrap__list__link">健診前・当日の注意事項</a></li>
                                    <li><a href="{ base }/personal/" class="header-gnavi__nav__list__mega-wrap__list__link">健康診断・測定結果の見方</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="{ base }/co_customer/" class="header-gnavi__nav__list__link">法人の方へ</a>
                            <div class="header-gnavi__nav__list__mega-wrap">
                                <ul class="header-gnavi__nav__list__mega-wrap__list">
                                    <li><a href="{ base }/co_customer/" class="header-gnavi__nav__list__mega-wrap__list__link">健康診断実施までの流れ</a></li>
                                    <li><a href="{ base }/co_customer/kentarou.html" class="header-gnavi__nav__list__mega-wrap__list__link">健康診断データ管理ソフト「健太郎」</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="{ base }/facility/" class="header-gnavi__nav__list__link">施設のご案内</a>
                            <div class="header-gnavi__nav__list__mega-wrap">
                                <ul class="header-gnavi__nav__list__mega-wrap__list">
                                    <li><a href="{ base }/facility/#ank-facility01" class="header-gnavi__nav__list__mega-wrap__list__link">労衛研健診センター（南区那の川）</a></li>
                                    <li><a href="{ base }/facility/#ank-facility02" class="header-gnavi__nav__list__mega-wrap__list__link">天神健診センター</a></li>
                                    <li><a href="{ base }/facility/#ank-facility03" class="header-gnavi__nav__list__mega-wrap__list__link">健診スクエア博多</a></li>
                                    <li><a href="{ base }/facility/#ank-facility04" class="header-gnavi__nav__list__mega-wrap__list__link">延岡健診センター</a></li>
                                    <li><a href="{ base }/facility/#ank-facility05" class="header-gnavi__nav__list__mega-wrap__list__link">宇部センター</a></li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="{ base }/downloads/" class="header-gnavi__nav__list__link">資料請求</a>
                        </li>
                        <li>
                            <a href="{ base }/recruit/" class="header-gnavi__nav__list__link">採用情報</a>
                        </li>
                    </ul>
                </nav>
                
                <div class="header-gnavi__sub">
                    <ul class="header-gnavi__sub__list">
                        <li>
                            <a href="{ base }/corporation/" class="header-gnavi__sub__list__link">労衛研について</a>
                        </li>
                        <li>
                            <a href="{ base }/facility/" class="header-gnavi__sub__list__link">アクセス</a>
                        </li>
                        <li>
                            <a href="{ base }/faq/" class="header-gnavi__sub__list__link">よくあるご質問</a>
                        </li>
                    </ul>

                    <div class="header-gnavi__sub__search"><a href="#search" class="header-gnavi__sub__search__btn">サイト内検索</a></div>
                    <!--サイト内検索-->
                    <div class="remodal" data-remodal-id="search" id="modal-area">
                        <form method="get" action="https://www.google.co.jp/search" class="remodal-search">
                        <input type="text" onfocus="if (this.value == 'キーワード') this.value = '';" onblur="if (this.value == '') this.value = '';" value="" name="q" class="remodal-search__input-text" placeholder="キーワード">
                        <input type="hidden" name="ie" value="utf-8">
                        <input type="hidden" name="oe" value="utf-8">
                        <input type="hidden" name="hl" value="ja">
                        <input type="hidden" name="domains" value="https://www.rek.or.jp/">
                        <input type="hidden" name="sitesearch" value="https://www.rek.or.jp/" checked="checked">
                        <button type="submit" class="remodal-search__input-btn">検索</button>
                        </form>
                        <button data-remodal-action="close" class="remodal-close-btn"></button>
                    </div>
                    <!--/サイト内検索-->

                    <div class="header-gnavi__sub__font-size">
                        <p class="header-gnavi__sub__font-size__text">文字サイズ変更</p>
                        <ul id="font-size" class="header-gnavi__sub__font-size__btn-list">
                            <li class="header-gnavi__sub__font-size__btn-list__item small"><button aria-label="文字サイズを小に変更">小</button></li>
                            <li class="header-gnavi__sub__font-size__btn-list__item middle"><button aria-label="文字サイズを中に変更">中</button></li>
                            <li class="header-gnavi__sub__font-size__btn-list__item large"><button aria-label="文字サイズを大に変更">大</button></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="header__parts__btn-box">
                <div class="header__parts__btn-box__item"><a href="https://www.aitel-reservation.jp/SmartAIQ/login" target="_blank" class="header__parts__btn-box__item__btn web">WEB問診</a></div>
                <div class="header__parts__btn-box__item"><a href="{ base }/reserve/" class="header__parts__btn-box__item__btn reserve">予約する</a></div>
            </div>

            <div class="header__parts__menu">
                <button class="header__parts__menu__btn">
                    <span class="bar"></span>
                </button>
            </div>
        </div>
    </div>

    
    <div class="menu-box">
        <div class="menu-box__inner">
            <nav class="menu-box__nav">
                <ul class="menu-box__nav__list">
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/" class="menu-box__nav__list__item__link">HOME</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/reserve/" class="menu-box__nav__list__item__link">ご予約</a>
                        <button class="menu-box__nav__list__item__acc"></button>
                        <ul class="menu-box__nav__list__item__sub">
                            <li><a href="{base}/reserve/vacant.html" class="menu-box__nav__list__item__sub__link">健診センター予約空き状況</a></li>
                            <li><a href="{base}/reserve/tel.html" class="menu-box__nav__list__item__sub__link">折り返し電話サービス</a></li>
                        </ul>
                    </li>
                    
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/dock/" class="menu-box__nav__list__item__link">人間ドック</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/option/" class="menu-box__nav__list__item__link">オプション検査</a>
                    </li>
                    
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/menu/" class="menu-box__nav__list__item__link">健康診断</a>
                        <button class="menu-box__nav__list__item__acc"></button>
                        <ul class="menu-box__nav__list__item__sub">
                            <li><a href="{base}/menu/" class="menu-box__nav__list__item__sub__link">定期健康診断</a></li>
                            <li><a href="{base}/menu/kenpo.html" class="menu-box__nav__list__item__sub__link">協会けんぽ補助利用</a></li>
                            <li><a href="{base}/menu/#ank-regular02" class="menu-box__nav__list__item__sub__link">FCF福岡市中小企業従業員福祉協会の補助利用による定期健康診断</a></li>
                            <li><a href="{base}/menu/#ank-regular03" class="menu-box__nav__list__item__sub__link">労災保険二次健康診断等</a></li>
                            <li><a href="{base}/menu/special.html" class="menu-box__nav__list__item__sub__link">特殊健康診断</a></li>
                            <li><a href="{base}/menu/special.html#ank-special02" class="menu-box__nav__list__item__sub__link">行政指導・通達に関わる健康診断</a></li>
                            <li><a href="{base}/menu/resident.html" class="menu-box__nav__list__item__sub__link">市町村住民健診</a></li>
                            <li><a href="{base}/menu/resident.html#ank-resident02" class="menu-box__nav__list__item__sub__link">学校教職員健診、及び学生・生徒健診</a></li>
                        </ul>
                    </li>
                    
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/personal/flow.html" class="menu-box__nav__list__item__link">個人の方へ</a>
                        <button class="menu-box__nav__list__item__acc"></button>
                        <ul class="menu-box__nav__list__item__sub">
                            <li><a href="{base}/personal/flow.html" class="menu-box__nav__list__item__sub__link">予約から受診までの流れ</a></li>
                            <li><a href="{base}/personal/flow.html#ank-flow01" class="menu-box__nav__list__item__sub__link">ご予約の方法</a></li>
                            <li><a href="{base}/personal/flow.html#ank-flow02" class="menu-box__nav__list__item__sub__link">問診票の登録・記入</a></li>
                            <li><a href="{base}/personal/attention.html" class="menu-box__nav__list__item__sub__link">健診前・当日の注意事項</a></li>
                            <li><a href="{base}/personal/" class="menu-box__nav__list__item__sub__link">健康診断・測定結果の見方</a></li>
                        </ul>
                    </li>
                    
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/co_customer/" class="menu-box__nav__list__item__link">法人の方へ</a>
                        <button class="menu-box__nav__list__item__acc"></button>
                        <ul class="menu-box__nav__list__item__sub">
                            <li><a href="{base}/co_customer/" class="menu-box__nav__list__item__sub__link">健康診断実施までの流れ</a></li>
                            <li><a href="{base}/co_customer/kentarou.html" class="menu-box__nav__list__item__sub__link">健康診断データ管理ソフト「健太郎」</a></li>
                        </ul>
                    </li>
                    
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/facility/" class="menu-box__nav__list__item__link">施設のご案内</a>
                        <button class="menu-box__nav__list__item__acc"></button>
                        <ul class="menu-box__nav__list__item__sub">
                            <li><a href="{base}/facility/#ank-facility01" class="menu-box__nav__list__item__sub__link">労衛研健診センター（南区那の川）</a></li>
                            <li><a href="{base}/facility/#ank-facility02" class="menu-box__nav__list__item__sub__link">天神健診センター</a></li>
                            <li><a href="{base}/facility/#ank-facility03" class="menu-box__nav__list__item__sub__link">健診スクエア博多</a></li>
                            <li><a href="{base}/facility/#ank-facility04" class="menu-box__nav__list__item__sub__link">延岡健診センター</a></li>
                            <li><a href="{base}/facility/#ank-facility05" class="menu-box__nav__list__item__sub__link">宇部センター</a></li>
                        </ul>
                    </li>
                    
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/corporation/" class="menu-box__nav__list__item__link">労衛研について</a>
                        <button class="menu-box__nav__list__item__acc"></button>
                        <ul class="menu-box__nav__list__item__sub">
                            <li><a href="{base}/corporation/" class="menu-box__nav__list__item__sub__link">基本理念・ごあいさつ</a></li>
                            <li><a href="{base}/corporation/about.html" class="menu-box__nav__list__item__sub__link">概要・近年のあゆみ</a></li>
                            <li><a href="{base}/corporation/association.html" class="menu-box__nav__list__item__sub__link">関連団体・医師会精検登録</a></li>
                            <li><a href="{base}/corporation/files.html" class="menu-box__nav__list__item__sub__link">情報公開</a></li>
                            <li><a href="{base}/corporation/kenko/" class="menu-box__nav__list__item__sub__link">健康経営</a></li>
                        </ul>
                    </li>
                </ul>


                <ul class="menu-box__nav__list">
                    <li class="menu-box__nav__list__item">
                        <a href="{base}/business/" class="menu-box__nav__list__item__link">事業概要</a>
                        <button class="menu-box__nav__list__item__acc"></button>
                        <ul class="menu-box__nav__list__item__sub">
                            <li><a href="{base}/business/#ank-business01" class="menu-box__nav__list__item__sub__link">健康管理体制</a></li>
                            <li><a href="{base}/business/#ank-business02" class="menu-box__nav__list__item__sub__link">巡回健診</a></li>
                            <li><a href="{base}/business/#ank-business03" class="menu-box__nav__list__item__sub__link">巡回レディース健診</a></li>
                            <li><a href="{base}/business/#ank-business04" class="menu-box__nav__list__item__sub__link">精度管理事業</a></li>
                            <li><a href="{base}/business/support.html" class="menu-box__nav__list__item__sub__link">健康増進事業</a></li>
                            <li><a href="{base}/business/measurement.html" class="menu-box__nav__list__item__sub__link">作業環境測定</a></li>
                            <li><a href="{base}/business/public.html#ank-public01" class="menu-box__nav__list__item__sub__link">公益事業</a></li>
                            <li><a href="{base}/business/public.html#ank-public02" class="menu-box__nav__list__item__sub__link">奨学金事業</a></li>
                        </ul>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/stresscheck/" class="menu-box__nav__list__item__link">ストレスチェックに役立つ資料集</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/smart_aiq/" class="menu-box__nav__list__item__link">Web問診システム（smartAIQ）のご案内</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/movie/" class="menu-box__nav__list__item__link">動画</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/news/" class="menu-box__nav__list__item__link">ニュース</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/recruit/" class="menu-box__nav__list__item__link">採用情報</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/inquiry/" class="menu-box__nav__list__item__link">お問い合わせ</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/downloads/" class="menu-box__nav__list__item__link">資料請求</a>
                    </li>

                    <li class="menu-box__nav__list__item">
                        <a href="{base}/faq/" class="menu-box__nav__list__item__link">よくあるご質問</a>
                    </li>
                </ul>
            </nav>


            <div class="menu-box__other">
                <div class="menu-box__other__font-size">
                    <p class="menu-box__other__font-size__text">文字サイズ変更</p>
                    <ul id="font-size" class="menu-box__other__font-size__btn-list">
                        <li class="menu-box__other__font-size__btn-list__item small"><button aria-label="文字サイズを小に変更">小</button></li>
                        <li class="menu-box__other__font-size__btn-list__item middle"><button aria-label="文字サイズを中に変更">中</button></li>
                        <li class="menu-box__other__font-size__btn-list__item large"><button aria-label="文字サイズを大に変更">大</button></li>
                    </ul>
                </div>

                <div class="menu-box__other__search"><a href="#search" class="menu-box__other__search__btn">サイト内検索</a></div>

                <div class="menu-box__other__contact-box">
                    <a href="tel:092-526-1033" class="menu-box__other__contact-box__tel">092-526-1033</a>
                    <p class="menu-box__other__contact-box__text">電話受付／8:30～17:00（月～金）</p>
                    <p class="menu-box__other__contact-box__text mb15">※土曜：不定休　日祝：休み</p>
                    <div class="menu-box__other__contact-box__inquiry"><a href="{base}/#text/" class="menu-box__other__contact-box__inquiry__btn">お問い合わせ</a></div>
                </div>
            </div>
        </div>
    </div>


    <div class="floting-contact-box">
        <div class="floting-contact-box__head">
            <p class="floting-contact-box__head__title">お問い合わせ</p>
        </div>
        <div class="floting-contact-box__body">
            <a href="tel:092-526-1033" class="floting-contact-box__body__tel">092-526-1033</a>
            <p class="floting-contact-box__body__text">電話受付／8:30～17:00（月～金）</p>
            <p class="floting-contact-box__body__text mb15">※土曜：不定休　日祝：休み</p>
            <div class="floting-contact-box__body__inquiry"><a href="{base}/inquiry/" class="floting-contact-box__body__inquiry__btn">お問い合わせ</a></div>
        </div>
    </div>


    <script>
        this.on('mount', function() {
            //ハンバーガーメニュー
            var menuBtn = document.querySelector('.header__parts__menu__btn');
            var menuInner = document.querySelector('.menu-box');

            menuBtn.addEventListener('click', function() {
                menuBtn.classList.toggle('on');
                menuInner.classList.toggle('on');
            });

            $(document).on("click", ".menu-box__nav__list__item__sub__link", function(e) {
                if ($(this).parents(".menu-box").length) {
                    $(".header__parts__menu__btn").trigger("click");
                }
            });
        });

        this.on('mount', function() {
            // ハンバーガーメニューボタンがクリックされたときのイベントハンドラを設定
            $(".header__parts__menu__btn").click(function () {
                // 現在のbodyタグのoverflowスタイルを確認
                if ($("body").css("overflow") === "hidden") {
                    // もしoverflowがhiddenなら、bodyのスタイルを元に戻す
                    // $("body").css({ height: "", overflow: "" });
                    $("body").removeClass("open");
                } else {
                    // そうでなければ、bodyにheight: 100%とoverflow: hiddenを設定し、スクロールを無効にする
                    // $("body").css({ height: "100%", overflow: "hidden" });
                    $("body").addClass("open");
                }
            });
        });

        // ハンバーガーメニュー内アコーディオン
        this.on('mount', function() {
            $(".menu-box__nav__list__item__acc").click(function () {
                $(this).next().slideToggle();
                $(this).toggleClass("active");
            });
        });

        // current
        this.on('mount', function() {
            var targetSelector = '.header-gnavi__nav__list li'
            var currentClass = 'now'
            var current = location.pathname.replace(this.base, '').split('/')[1] + '/'

            var href = this.base+'/' + current
            // ディレクトリTOPの場合、`//`となってしまうので、置換
            href = href.replace('//', '/')
            var $currentObj = current.length > 0 ?
            $(targetSelector+' > a[href="'+href+'"]') : $()

            if ($currentObj.length > 0) {
                $currentObj.addClass(currentClass)
            } else {
                if (current.length === 0) {
                    $(targetSelector+':first').addClass(currentClass)
                }
            }
            var j$ = jQuery;

            // MEGA MENU
            $('.header-gnavi__nav__list > li').hover(function(){
                Panel = $(this).children('.header-gnavi__nav__list__mega-wrap');
                Panel.each(function(){
                    Panel.css({display:'block',opacity:'0'}).stop().animate({opacity:'1'},300);
                });
            },function(){
                Panel.css({display:'none'});
            });
        });
		
		//ヘッダ
        this.on('mount', function() {
            if (this.level1('')) {//topのみ
                $('.header').toggleClass('header--top');
            }
        });
        
        this.on('mount', function() {
            if (this.level1('')) {//topのみ
				var header = $('.header')
				var main = $('.main-slider')
                if (main.length === 0) return;

				var	main_offset = main.offset();
                if (!main_offset) return;

                var	main_height = main.height();

                //main_negative = 48;//.main-sliderと重なっているネガティブマージン分
				var	header_height = header.height();
					$(window).scroll(function () {
						if($(window).scrollTop() < main_offset.top + main_height - header_height) {
							header.addClass('header--top');
							//header.removeClass('transform');
						}else {
							header.removeClass('header--top');
							//header.addClass('transform');
					}
				});
            }
        });

        // フォントサイズ
        this.on('mount', function () {
            const key = "font";
            let data = localStorage.getItem(key);

            function setFont(size) {
                $("#font-size li").removeClass("font-size-now");

                if (size === "small") {
                    $("html").css("font-size", "8px");
                    $("#font-size li.small").addClass("font-size-now");
                } else if (size === "middle") {
                    $("html").css("font-size", "10px");
                    $("#font-size li.middle").addClass("font-size-now");
                } else if (size === "large") {
                    $("html").css("font-size", "12px");
                    $("#font-size li.large").addClass("font-size-now");
                }
                
                localStorage.setItem(key, size);
            }

            // 初期表示
            if (data) {
                setFont(data);
            }

            // クリックイベント
            $("#font-size li button").on("click", function () {
                const $li = $(this).parent();

                if ($li.hasClass("small")) {
                    setFont("small");
                } else if ($li.hasClass("middle")) {
                    setFont("middle");
                } else if ($li.hasClass("large")) {
                    setFont("large");
                }
            });
        });
    </script>

</header_common>
