<common_header>
	<div class="header">
		<h1 class="header__logo">
			<a href="{ base }/" class="header__logo__link">
				<img src="{ base }/assets/img/common/logo.svg" alt="北九州病院グループ 社会福祉法人 敬愛会">
			</a>
		</h1>
		<nav>
			<div class="header__nav">
				<ul class="header__nav__list">
					<li class="header__nav__list__item">
						<a href="{ base }/" class="header__nav__list__item__link home">
							HOME
						</a>
					</li>
					<li class="header__nav__list__item">
						<a href="{ base }/aboutus/" class="header__nav__list__item__link">
							敬愛会について
						</a>
					</li>
					<li class="header__nav__list__item">
						<a href="{ base }/facility/" class="header__nav__list__item__link">
							施設紹介
						</a>
					</li>
					<li class="header__nav__list__item">
						<a href="{ base }/admission/" class="header__nav__list__item__link">
							入居のお手続き
						</a>
					</li>
					<li class="header__nav__list__item">
						<a href="{ base }/contact/" class="header__nav__list__item__link">
							お問い合わせ
						</a>
					</li>
				</ul>
				<a href="{ base }/recruit/" class="header__nav__recruit-btn">
					<span class="header__nav__recruit-btn__text">
						採用情報
					</span>
				</a>
			</div>
			<button class="menu-btn">
				<span class="menu-btn__bar"></span>
			</button>
			<div class="menu">
				<div class="menu__inner">
					<ul class="menu__inner__nav">
						<li class="menu__inner__nav__item">
							<ul class="menu__inner__nav__item__list">
								<li class="menu__inner__nav__item__list__item">
									<a href="{ base }/" class="menu__inner__nav__item__btn">
										HOME
									</a>
								</li>
								<li class="menu__inner__nav__item__list__item">
									<a href="{ base }/information/" class="menu__inner__nav__item__btn">
										お知らせ
									</a>
								</li>
								<li class="menu__inner__nav__item__list__item">
									<a href="{ base }/aboutus/" class="menu__inner__nav__item__btn">
										敬愛会について
									</a>
									<span class="accc-open-btn"></span>
									<div class="accc-box02">
										<ul class="menu__inner__nav__item__sub">
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/aboutus/greeting.html" class="menu__inner__nav__item__sub__item__link">
													理事長ごあいさつ
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/aboutus/outline.html" class="menu__inner__nav__item__sub__item__link">
													沿革・概要
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/aboutus/disclosure.html" class="menu__inner__nav__item__sub__item__link">
													情報公開
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/aboutus/magazine.html" class="menu__inner__nav__item__sub__item__link">
													広報誌
												</a>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</li>
						<li class="menu__inner__nav__item">
							<ul class="menu__inner__nav__item__list">
								<li class="menu__inner__nav__item__list__item">
									<a href="{ base }/facility/" class="menu__inner__nav__item__btn">
										施設紹介
									</a>
									<span class="accc-open-btn"></span>
									<div class="accc-box02">
										<ul class="menu__inner__nav__item__sub">
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility01.html" class="menu__inner__nav__item__sub__item__link">
													特別養護老人ホームみどり苑
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility02.html" class="menu__inner__nav__item__sub__item__link">
													特別養護老人ホームみどり苑ユニット棟
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility03.html" class="menu__inner__nav__item__sub__item__link">
													特別養護老人ホーム みどり苑ショートステイ
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility04.html" class="menu__inner__nav__item__sub__item__link">
													みどり苑ケアプランステーション
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility05.html" class="menu__inner__nav__item__sub__item__link">
													ケアハウスグリーンホーム
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility06.html" class="menu__inner__nav__item__sub__item__link">
													みどり苑デイサービスセンター
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility07.html" class="menu__inner__nav__item__sub__item__link">
													特別養護老人ホームみどり苑宗像
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/facility/facility08.html" class="menu__inner__nav__item__sub__item__link">
													特別養護老人ホームみどり苑宗像ショートステイ
												</a>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</li>
						
						<li class="menu__inner__nav__item">
							<ul class="menu__inner__nav__item__list">
								<li class="menu__inner__nav__item__list__item">
									<a href="{ base }/admission/" class="menu__inner__nav__item__btn">
										入居のお手続き
									</a>
								</li>
								<li class="menu__inner__nav__item__list__item">
									<a href="{ base }/recruit/" class="menu__inner__nav__item__btn">
										採用情報
									</a>
									<span class="accc-open-btn"></span>
									<div class="accc-box02">
										<ul class="menu__inner__nav__item__sub">
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/recruit/koga.html" class="menu__inner__nav__item__sub__item__link">
													先輩紹介（古賀）
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/recruit/munakata.html" class="menu__inner__nav__item__sub__item__link">
													先輩紹介（宗像）
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/recruit/welfare.html" class="menu__inner__nav__item__sub__item__link">
													福利厚生
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/recruit/volunteer.html" class="menu__inner__nav__item__sub__item__link">
													ボランティア募集
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/recruit/requirements/" class="menu__inner__nav__item__sub__item__link">
													募集要項
												</a>
											</li>
											<li class="menu__inner__nav__item__sub__item">
												<a href="{ base }/recruit/entry/" class="menu__inner__nav__item__sub__item__link">
													エントリーフォーム
												</a>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</li>
					</ul>
					<ul class="menu__inner__other">
						<li class="menu__inner__other__item">
							<a href="{ base }/privacy/" class="menu__inner__other__item__link">
								プライバシーポリシー
							</a>
						</li>
						<li class="menu__inner__other__item">
							<a href="{ base }/sitemap/" class="menu__inner__other__item__link">
								サイトマップ
							</a>
						</li>
						<li class="menu__inner__other__item">
							<a href="{ base }/contact/" class="menu__inner__other__item__link">
								お問い合わせ
							</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</div>
    <script>
		this.on('mount', function() {
            
            //ハンバーガーメニュー
            var menuBtn = document.querySelector('.menu-btn');
            var menuInner = document.querySelector('.menu');
            var j$ = jQuery;
        
            menuBtn.addEventListener('click', function() {
                menuBtn.classList.toggle('on');
                menuInner.classList.toggle('on');
            });

            // 1300px以下のみ、サブメニューをアコーディオン化
            var setupAccordion = function() {
                var isAccordion = window.innerWidth <= 1300;

                j$('.accc-open-btn').each(function() {
                    var $btn = j$(this);
                    var $box = $btn.next('.accc-box02');
                    if ($box.length === 0) return;

                    $btn.off('click.headerAcc');

                    if (isAccordion) {
                        if (!$btn.hasClass('close')) {
                            $btn.addClass('close');
                        }
                        $box.hide();

                        $btn.on('click.headerAcc', function(e) {
                            e.preventDefault();
                            var params = {height: "toggle", opacity: "toggle"};
                            var $list = $btn.closest('.menu__inner__nav__item__list');

                            $btn.toggleClass('close');
                            $box.stop(true, true).animate(params);

                            $list.find('.accc-open-btn').not($btn).addClass('close');
                            $list.find('.accc-box02:visible').not($box).stop(true, true).animate(params);
                        });
                    } else {
                        $btn.removeClass('close');
                        $box.show();
                    }
                });
            };

            setupAccordion();
            window.addEventListener('resize', setupAccordion);
        });

        // current
        this.on('mount', function() {
            var targetSelector = '.header__nav__list__item'
            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;
        });

    </script>
</common_header>
