<header_common>
    <div class="header">
        <h1 class="header-logo">
            <a href="{base}/" class="header-logo__link"><img src="{base}/assets/img/common/logo.png" alt="アリウェル株式会社"></a>
        </h1>
        <nav class="header-nav">
            <ul class="header-nav__list">
                <li class="header-nav__list__item">
                    <a href="{base}/" class="header-nav__list__link">
                        HOME
                    </a>
                </li>
                <li class="header-nav__list__item">
                    <a href="{base}/about/" class="header-nav__list__link">
                        アリウェルについて
                    </a>
                </li>
                <li class="header-nav__list__item">
                    <a href="{base}/company/" class="header-nav__list__link">
                        会社概要
                    </a>
                </li>
                <li class="header-nav__list__item">
                    <a href="{base}/real_estate/" class="header-nav__list__link">
                        不動産部門
                    </a>
                </li>
                <li class="header-nav__list__item">
                    <a href="{base}/insurance/" class="header-nav__list__link">
                        保険部門
                    </a>
                </li>
                <li class="header-nav__list__item">
                    <a href="{base}/hospitality/" class="header-nav__list__link">
                        ホスピタリティ部門
                    </a>
                </li>
                <li class="header-nav__list__item">
                    <a href="{base}/recruit/" class="header-nav__list__link">
                        採用情報
                    </a>
                </li>
            </ul>
            <a href="{base}/inquiry/" class="header-nav__contact-btn">
                <span>CONTACT</span>
            </a>
        </nav>
        <div class="header-sp">
            <a href="{base}/inquiry/" class="header-sp__contact-btn"></a>
            <input id="nav-input" type="checkbox" role="button" title="MENU">
            <label id="nav-open" for="nav-input" aria-hidden="true" title="MENU">
                <span>
                    <span></span>
                </span>
            </label>
            <label id="nav-close-overlay" for="nav-input"></label>
            <div id="nav-content">
                <nav class="header-sp-nav">
                    <ul class="header-sp-nav__list">
                        <li class="header-sp-nav__list__item">
                            <a href="{base}/" class="header-sp-nav__list__link">HOME</a>
                        </li>
                        <li class="header-sp-nav__list__item">
                            <a href="{base}/about/" class="header-sp-nav__list__link">アリウェルについて</a>
                        </li>
                        <li class="header-sp-nav__list__item">
                            <a href="{base}/company/" class="header-sp-nav__list__link has-secondary">会社概要</a>
                            <span class="ac-menu"></span>
                            <ul class="header-sp-nav__secondary-list">
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/company/outline.html" class="header-sp-nav__secondary-list__link">企業情報</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/company/history.html" class="header-sp-nav__secondary-list__link">沿革</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/company/philosophy.html" class="header-sp-nav__secondary-list__link">経営理念</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/invitation/" class="header-sp-nav__secondary-list__link">勧誘方針</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/privacy/" class="header-sp-nav__secondary-list__link">プライバシーポリシー</a>
                                </li>
                            </ul>
                        </li>
                        <li class="header-sp-nav__list__item">
                            <a href="{base}/real_estate/" class="header-sp-nav__list__link has-secondary">不動産部門</a>
                            <span class="ac-menu"></span>
                            <ul class="header-sp-nav__secondary-list">
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/real_estate/brokerage.html" class="header-sp-nav__secondary-list__link">仲介事業（第二種金融商品取引業）</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/real_estate/development.html" class="header-sp-nav__secondary-list__link">開発事業</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/real_estate/leasing.html" class="header-sp-nav__secondary-list__link">賃貸・駐車場事業</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/real_estate/building.html" class="header-sp-nav__secondary-list__link">保有ビル一覧</a>
                                </li>
                            </ul>
                        </li>
                        <li class="header-sp-nav__list__item">
                            <a href="{base}/insurance/" class="header-sp-nav__list__link has-secondary">保険部門</a>
                            <span class="ac-menu"></span>
                            <ul class="header-sp-nav__secondary-list">
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/insurance/customer.html" class="header-sp-nav__secondary-list__link">お客さま本位の業務運営方針</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/insurance/damage.html" class="header-sp-nav__secondary-list__link">損害保険</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/insurance/life.html" class="header-sp-nav__secondary-list__link">生命保険</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/insurance/internet.html" class="header-sp-nav__secondary-list__link">インターネットでご契約</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/insurance/list.html" class="header-sp-nav__secondary-list__link">取扱保険会社</a>
                                </li>
                                <li class="header-sp-nav__secondary-list__item">
                                    <a href="{base}/insurance/accident.html" class="header-sp-nav__secondary-list__link">事故受付窓口</a>
                                </li>
                            </ul>
                        </li>
                        <li class="header-sp-nav__list__item">
                            <a href="{base}/hospitality/" class="header-sp-nav__list__link">ホスピタリティ部門</a>
                        </li>
                        <li class="header-sp-nav__list__item">
                            <a href="{base}/recruit/" class="header-sp-nav__list__link">採用情報</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <a href="{base}/notice/" class="top-floating-bnr"><img src="{base}/assets/img/top/floating-bnr.webp" alt="福岡商事はアリウェルへ"></a>

    <script>
        // カレント設定
        this.on('mount', function() {
            //TOPがindex.htmlの場合でも、カレント表示がつくようにする
            var current = location.pathname.replace(this.base, '').split('/')[1];
            if (current.length === 0 || current === 'index.html') {
                $('.header-nav__list__item > a[href="' + this.base + '/"]').closest('a').addClass('active');
            } else {
                $('.header-nav__list__item > a[href^="' + this.base + '/' + current + '/"]').closest('a').addClass('active');
            }
        });
        //ハンバーガーメニュー
        this.on('mount', function() {
            $('#nav-open, .ac-menu').on('click', function(){
                $(this).next().slideToggle(300);
                $(this).toggleClass('active');
            });
        });

        //ヘッダーアニメーション
        this.on('mount', function() {
            var $win = $(window),
                $header = $('.header, .top-floating-bnr'),
                animationClass = 'is-animation';

            $win.on('load scroll', function() {
                var value = $(this).scrollTop();
                if (value > 2) {
                    $header.addClass(animationClass);
                } else {
                    $header.removeClass(animationClass);
                }
            });
        });
    </script>

</header_common>
