<nav_common_sp>
	<div class="nav-wrapper">
		<div class="menu-mobile-wrapper">
			<a href="{ base }/"><img src="{ base }/common/logo.png" alt="阪九フェリー"></a>
			<a href="{ base }/funeco/" class="funeko-sp"><img src="{ base }/common/funeko_sp.png"></a>
            <!--各国語モーダル-->
			<!-- <a href="{ base }/" id="open" target="_blank" class="language-sp-btn"><img src="{ base }/common/icon_language.png"></a>
            <div id="modal">
                <div class="modal-list-language">
                    <ul class="modal-list-language__list">
                        <li class="modal-list-language__item">
                            <a href="https://www.han9f.co.jp/" target="_blank" class="modal-list-language__link">日本語</a>
                        </li>
                        <li class="modal-list-language__item">
                            <a href="https://www.han9f.co.jp/en/" target="_blank" class="modal-list-language__link">ENGLISH</a>
                        </li>
                        <li class="modal-list-language__item">
                            <a href="https://global.han9f.co.jp/tw/" target="_blank" class="modal-list-language__link">中文繁體</a>
                        </li>
                        <li class="modal-list-language__item">
                            <a href="https://global.han9f.co.jp/cn/" target="_blank" class="modal-list-language__link">中文简体</a>
                        </li>
                        <li class="modal-list-language__item">
                            <a href="https://www.han9f.co.jp/ko/" target="_blank" class="modal-list-language__link">한국어</a>
                        </li>
                    </ul>
                </div>
                <button id="close">×</button>
            </div> -->
            <!-- <div id="overlay"></div> -->
            <!--//各国語モーダル-->
			<!-- <a class="menu-mobile" href="#menu">
				<span></span>
				<span></span>
				<span></span>
			</a> -->
			<!-- <button type="button" class="drawer-toggle drawer-hamburger">
			  <span class="sr-only">toggle navigation</span>
			  <span class="drawer-hamburger-icon"></span>
			</button> -->
            <a href="https://fnet.han9f.co.jp/login.php" class="nav-login tbsp" target="_blank"><img src="{ base }/common/key-red.svg" alt=""><span class="nav-login__text">ログイン</span></a>
            <!--★モーダルウィンドウ有り <a href="#" class="nav-login tbsp modal-login"><img src="{ base }/common/key-red.svg" alt=""><span class="nav-login__text">ログイン</span></a> -->
            <div id="nav-toggle" class="tbsp" title="メニュー">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div id="nav-close" class="">&nbsp;</div>
			<!--<img src="{ base }/common/menu_text.png" alt="メニュー" class="menu-sp-text">-->
		</div>

        <div id="gloval-nav" class="tbsp">
            <!--gloval-nav-contents-->
            <nav class="gloval-nav-contents">
                <div class="gloval-nav-hometop">
                    <a href="{ base }/"><img src="{ base }/common/logo.png" alt="メニュー"></a>
                </div>
                <ul class="gloval-nav__language-list">
                    <!-- <li class="gloval-nav__language-list__item"><a href="https://www.han9f.co.jp/" class="gloval-nav__language-list__link">日本語</a> </li> -->
                    <li class="gloval-nav__language-list__item"><a href="https://www.han9f.co.jp/en/" class="gloval-nav__language-list__link">ENGLISH</a> </li>
                    <li class="gloval-nav__language-list__item"><a href="https://global.han9f.co.jp/tw/" class="gloval-nav__language-list__link">中文繁體</a> </li>
                    <li class="gloval-nav__language-list__item"><a href="https://global.han9f.co.jp/cn/" class="gloval-nav__language-list__link">中文简体</a> </li>
                    <li class="gloval-nav__language-list__item"><a href="https://www.han9f.co.jp/ko/" class="gloval-nav__language-list__link">한국어</a> </li>
                </ul>
                <div class="gloval-nav-reserve">
                    
                    <p class="navigation-accordion gloval-nav-reserve__accordion-link">フェリーのご予約</p>
                    <ul class="gloval-nav-reserve__list">
                        <li class="gloval-nav-reserve__item">
                            <ul>
                                <li>
                                    <a href="{ base }/reserve/net.html" class="gloval-nav-reserve__link-title">ネットから予約</a>
                                </li>
                                <li>
                                    <a href="{ base }/reserve/tel.html" class="gloval-nav-reserve__link-title">電話で予約</a>
                                </li>
                                <li>
                                    <a href="{ base }/reserve/window.html" class="gloval-nav-reserve__link-title">窓口で予約</a>
                                </li>
                            </ul>
                        </li>
                        <li class="gloval-nav-reserve__item">
                            <a href="{ base }/reserve/" class="gloval-nav-reserve__link-title">ご予約について</a>
                            <ul>
                                <!-- <li>
                                    <a href="{ base }/reserve/cancel/about_change.html" class="gloval-nav-reserve__link-sub">変更について</a>
                                </li>
                                <li>
                                    <a href="{ base }/reserve/cancel/about_cancel.html" class="gloval-nav-reserve__link-sub">取り消しについて</a>
                                </li> -->
                                <li>
                                    <a href="{ base }/reserve/#notice" class="gloval-nav-reserve__link-sub">ご予約に関する注意事項</a>
                                </li>
                                <!-- <li>
                                    <a href="https://mweb.han9f.co.jp/editno.php" target="_blank" class="gloval-nav-reserve__link-sub">ご予約の確認</a>
                                </li>
                                <li>
                                    <a href="http://mweb.han9f.co.jp/vacant.php" target="_blank" class="gloval-nav-reserve__link-sub">空席照会</a>
                                </li> -->
                                <li>
                                    <a href="fnet.han9f.co.jp/yoyaku/simulation.php" target="_blank" class="gloval-nav-reserve__link-sub">運賃シミュレーション</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <ul class="gloval-nav-normal">
                    <li>
                        <p class="navigation-accordion gloval-nav-normal__accordion-link">運航ダイヤ</p>
                        <ul class="gloval-nav-normal__list">
                            <li class="gloval-nav-normal__item">
                                <a href="{ base }/timetable/" class="gloval-nav-normal__link-title">航路・運航スケジュール</a>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <p class="navigation-accordion-sub gloval-nav-normal__link-title">乗り場とアクセス</p>
                                <ul class="navigation-accordion-sub__contents">
                                    <li>
                                        <a href="{ base }/access/" class="gloval-nav-normal__link-sub">アクセスTOP</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/access/shinmoji.html" class="gloval-nav-normal__link-sub">新門司</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/access/izumiotsu.html" class="gloval-nav-normal__link-sub">泉大津</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/access/kobe.html" class="gloval-nav-normal__link-sub">神戸</a>
                                    </li>
                                    <li>
                                        <a href="/uploads/information/0000000503.pdf?1603271012?1603327228" target="_blank" class="gloval-nav-normal__link-sub">バリアフリールート</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/access/flow.html" class="gloval-nav-normal__link-sub">手続きの流れ</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <a href="{ base }/contact_bus/" class="gloval-nav-normal__link-title">連絡バスのご案内</a>
                            </li>
                            <!--<li class="gloval-nav-normal__item">
                                <a href="{ base }/boarding_info/pdf/ferry_guidebook.pdf" target="_blank" class="gloval-nav-normal__link-title">ガイドブック（PDF）</a>
                            </li>-->
                        </ul>
                    </li>
                    <li>
                        <p class="navigation-accordion gloval-nav-normal__accordion-link">運賃料金と割引</p>
                        <ul class="gloval-nav-normal__list">
                            <li class="gloval-nav-normal__item">
                                <a href="{ base }/fare/" class="gloval-nav-normal__link-title">運賃適用期間・各種運賃</a>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <a href="{ base }/fare/discount.html" class="gloval-nav-normal__link-title">各種割引⼀覧</a>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <a href="{ base }/fare/rule.html" class="gloval-nav-normal__link-title">割引計算ルール</a>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <a href="https://fnet.han9f.co.jp/yoyaku/simulation.php" class="gloval-nav-normal__link-title" target="_blank">運賃シミュレーション</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <p class="navigation-accordion gloval-nav-normal__accordion-link">船舶紹介</p>
                        <ul class="gloval-nav-normal__list">
                            <li class="gloval-nav-normal__item">
                                <a href="{ base }/ships/" class="gloval-nav-normal__link-title">船舶紹介TOP</a>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <p class="navigation-accordion-sub gloval-nav-normal__link-title">いずみ</p>
                                <ul class="navigation-accordion-sub__contents">
                                    <li>
                                        <a href="{ base }/ships/room/index.html" class="gloval-nav-normal__link-sub">客室のご紹介</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/rest/izumi/" class="gloval-nav-normal__link-sub">レストラン</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/other/" class="gloval-nav-normal__link-sub">船内施設</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <p class="navigation-accordion-sub gloval-nav-normal__link-title">ひびき</p>
                                <ul class="navigation-accordion-sub__contents">
                                    <li>
                                        <a href="{ base }/ships/room/index.html" class="gloval-nav-normal__link-sub">客室のご紹介</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/rest/hibiki/" class="gloval-nav-normal__link-sub">レストラン</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/other/" class="gloval-nav-normal__link-sub">船内施設</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <p class="navigation-accordion-sub gloval-nav-normal__link-title">せっつ</p>
                                <ul class="navigation-accordion-sub__contents">
                                    <li>
                                        <a href="{ base }/ships/room/room3.html" class="gloval-nav-normal__link-sub">客室のご紹介</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/rest/settsu/" class="gloval-nav-normal__link-sub">レストラン</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/other/facility2" class="gloval-nav-normal__link-sub">船内施設</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="gloval-nav-normal__item">
                                <p class="navigation-accordion-sub gloval-nav-normal__link-title">やまと</p>
                                <ul class="navigation-accordion-sub__contents">
                                    <li>
                                        <a href="{ base }/ships/room/room3.html" class="gloval-nav-normal__link-sub">客室のご紹介</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/rest/yamato/" class="gloval-nav-normal__link-sub">レストラン</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/other/facility2" class="gloval-nav-normal__link-sub">船内施設</a>
                                    </li>
                                </ul>
                            </li>
                            <!-- <li class="gloval-nav-normal__item">
                                <p class="navigation-accordion-sub gloval-nav-normal__link-title">つくし</p>
                                <ul class="navigation-accordion-sub__contents">
                                    <li>
                                        <a href="{ base }/ships/room/room2.html" class="gloval-nav-normal__link-sub">客室のご紹介</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/rest/tsukushi/" class="gloval-nav-normal__link-sub">レストラン</a>
                                    </li>
                                    <li>
                                        <a href="{ base }/ships/other/facility3.html" class="gloval-nav-normal__link-sub">船内施設</a>
                                    </li>
                                </ul>
                            </li> -->
                            <li class="gloval-nav-normal__item">
                                <a href="{ base }/ships/shop/" class="gloval-nav-normal__link-title">売店・お土産</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="{ base }/pickup/" class="gloval-nav__link">観光情報</a>
                    </li>
                    <li>
                        <a href="{ base }/dantai/" class="gloval-nav__link">団体のお客様へ</a>
                    </li>
                    <li>
                        <a href="{ base }/funeco/" class="gloval-nav__link">阪九フェリーのふねこ</a>
                    </li>
                </ul>
            </nav>
            <!--//gloval-nav-contents-->

            <ul class="gloval-nav-other01">
                <li class="gloval-nav-other01__item">
                    <a href="{ base }/boarding_info/" class="gloval-nav-other01__link">乗船のお客様へ</a>
                </li>
                <li class="gloval-nav-other01__item">
                    <a href="{ base }/contact_bus/" class="gloval-nav-other01__link">連絡バスのご案内</a>
                </li>
                <li class="gloval-nav-other01__item">
                    <a href="{ base }/channel/" class="gloval-nav-other01__link">CM・動画ギャラリー</a>
                </li>
                <li class="gloval-nav-other01__item">
                    <a href="{ base }/live/" class="gloval-nav-other01__link">船内ライブ</a>
                </li>
            </ul>

            <ul class="gloval-nav-other02">
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/faq/" class="gloval-nav-other02__link">よくあるご質問</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/contact/" class="gloval-nav-other02__link">お問い合わせ</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/company/" class="gloval-nav-other02__link">企業情報</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/guide/modal.html" class="gloval-nav-other02__link">物流案内</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/transaction/" class="gloval-nav-other02__link">特定商取引法に基づく表記</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/policy/" class="gloval-nav-other02__link">ご利用規約</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/privacy/" class="gloval-nav-other02__link">個人情報保護方針</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/agreement/" class="gloval-nav-other02__link">運送約款</a>
                </li>
                <li class="gloval-nav-other02__item">
                    <a href="{ base }/sitemap/" class="gloval-nav-other02__link">サイトマップ</a>
                </li>
            </ul>
        </div>
        <!--//スマホ-->
	</div>

    <script type="text/javascript">
        //スマホ時ハンバーガーメニュー
        this.on('mount', function() {
            var state = false;//stateという変数にfalseを代入
            var scrollpos;//スクロールの位置を取得
            $('#nav-toggle, #nav-close').on('click', function(){
                $('body').toggleClass('open');
                if(state == false) {　//bodyにopenクラスがあるとき
                    scrollpos = $(window).scrollTop();　//クリックした時のトップからの位置を取得・代入
                    $('html').addClass('scroll-prevent').css({'top': -scrollpos});　//クリックした時にscroll-preventを付与
                    state = true;
                } else {　//bodyにopenクラスがない時
                    $('html').removeClass('scroll-prevent').css({'top': 0});
                    window.scrollTo( 0 , scrollpos );
                    state = false;
                }
            });
        });

        this.on('mount', function() {
            $(".navigation-accordion").on("click", function() {
                $(this).next().slideToggle();
                $(this).toggleClass("active");
            });
        });

        this.on('mount', function() {
            $(".navigation-accordion-sub").on("click", function() {
                $(this).next().slideToggle();
                $(this).toggleClass("active");
            });
        });
    </script>

	<!-- <script type="text/javascript">
		this.on('mount', function() {
			$('.drawer').drawer();
		})
	</script> -->
    <script type="text/javascript">
        this.on('mount', function() {
            $("#open").on("click", function(e) {
                e.preventDefault();
                $("#overlay, #modal").addClass("active-modal");

                $("#close, #overlay").on("click", function() {
                    $("#overlay, #modal").removeClass("active-modal");
                    return false;
                });
            });
        });
    </script>
</nav_common_sp>
