<nav_common_pc>
	<div class="nav-wrapper">
		<!-- スマホ用ヘッダー -->

		<!-- スマホ用ヘッダー ここまで -->

		<div class="nav-menu">
			<ul class="nav-menu__list">
				<li class="nav-menu__item nav-menu-home"><a href="{ base }/" class="nav-gloval-link"><img src="{ base }/common/icon_home.png" alt="home"><span class="sp">HOME</span></a></li>
				<li class="nav-menu__item nav-menu-reservation">
					<a href="{ base }/reserve/" class="megamenu-icon-arrow nav-gloval-link">フェリーのご予約</a>
					<ul class="nav-menu-inner">
						<li class="nav-menu-inner__item">
                            <a href="{ base }/reserve/" class="nav-inner-link">ご予約について</a>
							<ul class="nav-menu-column">
								<!-- <li><a href="{ base }/reserve/cancel/about_change.html" class="sub-nav">変更について</a></li>
								<li><a href="{ base }/reserve/cancel/about_cancel.html" class="sub-nav">取り消しについて</a></li> -->
                                <li><a href="{ base }/reserve/#notice" class="sub-nav">ご予約に関する注意事項</a></li>
							</ul>
						</li>
                        <li class="nav-menu-inner__item">
                            <p class="nav-inner-link nav-inner-link--link-none">ご予約方法について</p>
							<ul class="nav-menu-column">
								<li><a href="{ base }/reserve/net.html" class="sub-nav">ネットから予約</a></li>
								<li><a href="{ base }/reserve/tel.html" class="sub-nav">電話で予約</a></li>
                                <li><a href="{ base }/reserve/window.html" class="sub-nav">窓口で予約</a></li>
							</ul>
						</li>
						<!-- <li><a href="{ base }/fare/">運賃料金と割引</a>
							<ul>
								<li><a href="{ base }/fare/">旅客運賃・⼿荷物</a></li>
								<li><a href="{ base }/fare/automobile/">⾃動⾞航送運賃</a></li>
								<li><a href="{ base }/fare/baggage/">原付・バイク航送運賃</a></li>
								<li><a href="{ base }/fare/discount.html">各種割引⼀覧</a></li>
							</ul>
						</li> -->
						<li class="nav-menu-inner__item">
							<ul class="nav-menu-column mt-none">
								<!-- <li><a href="https://mweb.han9f.co.jp/editno.php" target="_blank" class="outside sub-nav">ご予約の確認</a></li>
								<li><a href="http://mweb.han9f.co.jp/vacant.php" target="_blank" class="outside sub-nav">空席照会</a></li> -->
								<li><a href="https://fnet.han9f.co.jp/yoyaku/simulation.php" target="_blank" class="outside sub-nav">運賃シミュレーション</a></li>
							</ul>
						</li>
					</ul>
				</li>
                <li class="nav-menu__item">
                    <a href="{ base }/timetable/" class="megamenu-icon-arrow nav-gloval-link">運航ダイヤ</a>
					<ul class="nav-menu-inner">
						<li class="nav-menu-inner__item">
                            <a href="{ base }/timetable/" class="nav-inner-link">航路・運航スケジュール</a>
							<ul class="nav-menu-column">
                                <li><a href="{ base }/timetable/#izumi" class="sub-nav">新門司 ⇔ 泉大津</a></li>
								<li><a href="{ base }/timetable/#kobe" class="sub-nav">新門司 ⇔ 神戸</a></li>
                                <li><a href="{ base }/timetable/#schedule" class="sub-nav">運航表</a></li>
							</ul>
						</li>
						<li class="nav-menu-inner__item">
                            <a href="{ base }/access/" class="nav-inner-link">乗り場とアクセス</a>
							<ul class="nav-menu-column">
                                <li><a href="{ base }/access/shinmoji.html" class="sub-nav">新門司</a></li>
								<li><a href="{ base }/access/izumiotsu.html" class="sub-nav">泉大津</a></li>
                                <li><a href="{ base }/access/kobe.html" class="sub-nav">神戸</a></li>
                                <li><a href="/uploads/information/0000000503.pdf?1603271012?1603327228" target="_blank" class="sub-nav">バリアフリールート</a></li>
                                <li><a href="{ base }/access/flow.html" class="sub-nav">手続きの流れ</a></li>
							</ul>
						</li>
						<li class="nav-menu-inner__item">
                            <ul class="nav-menu-column mt-none">
                                <li><a href="{ base }/contact_bus/" class="nav-inner-link">連絡バスのご案内</a></li>
                                <!-- <li><a href="{ base }/boarding_info/pdf/ferry_guidebook.pdf" target="_blank" class="nav-inner-link">ガイドブック（PDF）</a></li> -->
                            </ul>
						</li>
					</ul>
				</li>
                <li class="nav-menu__item">
                    <a href="{ base }/fare/" class="megamenu-icon-arrow nav-gloval-link">運賃料金と割引</a>
					<ul class="nav-menu-inner">
						<!--<li class="nav-menu-inner__item">
                            <a href="{ base }/fare/" class="nav-inner-link">旅客運賃・⼿荷物</a>
							<ul class="nav-menu-column">
                                <li><a href="{ base }/fare/" class="sub-nav">いずみ/ひびき/せっつ</a></li>
								<li><a href="{ base }/fare/" class="sub-nav">やまと/つくし</a></li>
							</ul>
						</li>-->
						<li class="nav-menu-inner__item">
							<ul class="nav-menu-column mt-none">
                                <li><a href="{ base }/fare/" class="nav-inner-link">運賃料金と割引</a></li>
                                <li><a href="{ base }/fare/discount.html" class="nav-inner-link">各種割引⼀覧</a></li>
                                <li><a href="{ base }/fare/rule.html" class="nav-inner-link">割引計算ルール</a></li>
							</ul>
						</li>
						<li class="nav-menu-inner__item">
                            <ul class="nav-menu-column mt-none">
                                <!-- <li><a href="https://mweb.han9f.co.jp/editno.php" target="_blank" class="outside sub-nav">ご予約の確認</a></li>
                                <li><a href="http://mweb.han9f.co.jp/vacant.php" target="_blank" class="outside sub-nav">空席照会</a></li> -->
                                <li><a href="https://fnet.han9f.co.jp/yoyaku/simulation.php" target="_blank" class="outside sub-nav">運賃シミュレーション</a></li>
                            </ul>
						</li>
					</ul>
				</li>
				<li class="nav-menu__item">
					<a href="{ base }/ships/" class="megamenu-icon-arrow nav-gloval-link">船舶紹介</a>
					<ul class="nav-menu-inner">
						<li class="nav-menu-inner__item nav-menu-inner__item--column6">
                            <a href="{ base }/ships/#izumi" class="nav-inner-link">いずみ</a>
							<ul class="nav-menu-column">
								<li><a href="{ base }/ships/room/index.html" class="sub-nav">客室のご紹介</a></li>
								<li><a href="{ base }/ships/rest/izumi/" class="sub-nav">レストラン</a></li>
                                <li><a href="{ base }/ships/other/" class="sub-nav">船内施設</a></li>
							</ul>
						</li>
						<li class="nav-menu-inner__item nav-menu-inner__item--column6">
                            <a href="{ base }/ships/#hibiki" class="nav-inner-link">ひびき</a>
							<ul class="nav-menu-column">
                                <li><a href="{ base }/ships/room/index.html" class="sub-nav">客室のご紹介</a></li>
								<li><a href="{ base }/ships/rest/hibiki/" class="sub-nav">レストラン</a></li>
                                <li><a href="{ base }/ships/other/" class="sub-nav">船内施設</a></li>
							</ul>
						</li>
                        <li class="nav-menu-inner__item nav-menu-inner__item--column6">
                            <a href="{ base }/ships/#settsu" class="nav-inner-link">せっつ</a>
							<ul class="nav-menu-column">
                                <li><a href="{ base }/ships/room/room3.html" class="sub-nav">客室のご紹介</a></li>
								<li><a href="{ base }/ships/rest/settsu/" class="sub-nav">レストラン</a></li>
                                <li><a href="{ base }/ships/other/facility2" class="sub-nav">船内施設</a></li>
							</ul>
						</li>
                        <li class="nav-menu-inner__item nav-menu-inner__item--column6">
                            <a href="{ base }/ships/#yamato" class="nav-inner-link">やまと</a>
							<ul class="nav-menu-column">
                                <li><a href="{ base }/ships/room/room3.html" class="sub-nav">客室のご紹介</a></li>
								<li><a href="{ base }/ships/rest/yamato/" class="sub-nav">レストラン</a></li>
                                <li><a href="{ base }/ships/other/facility2" class="sub-nav">船内施設</a></li>
							</ul>
						</li>
                        <!-- <li class="nav-menu-inner__item nav-menu-inner__item--column6">
                            <a href="{ base }/ships/#tsukushi" class="nav-inner-link">つくし</a>
							<ul class="nav-menu-column">
                                <li><a href="{ base }/ships/room/room2.html" class="sub-nav">客室のご紹介</a></li>
								<li><a href="{ base }/ships/rest/tsukushi/" class="sub-nav">レストラン</a></li>
                                <li><a href="{ base }/ships/other/facility3.html" class="sub-nav">船内施設</a></li>
							</ul>
						</li> -->
						<li class="nav-menu-inner__item nav-menu-inner__item--column6">
                            <ul class="nav-menu-column mt-none">
                                <li><a href="{ base }/ships/shop/" class="nav-inner-link">売店・お土産</a></li>
                                <!-- <li><a href="{ base }/ships/bath/" class="nav-inner-link">大浴場・その他船内施設</a></li>
                                <li><a href="{ base }/live/" class="nav-inner-link">船内ライブ</a></li>
                                <li><a href="{ base }/stay/" class="nav-inner-link">ゆっくりステイ</a></li>
                                <li><a href="{ base }/boarding_info/" class="nav-inner-link">乗船のお客様へ</a></li> -->
                            </ul>
						</li>
					</ul>
				</li>
				<li class="nav-menu__item">
					<a href="{ base }/pickup/" class="megamenu-icon-arrow nav-gloval-link">観光情報</a>
				</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		this.on('mount', function() {
			"use strict";

			$('.nav-menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
			//Checks if li has sub (ul) and adds class for toggle icon - just an UI
			$('.nav-menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');

			//fadein
			$(".nav-menu > ul > li").hover(
			function (e) {
				if ($(window).width() > 959) {
					$(this).children("ul").fadeIn(150);
					e.preventDefault();
			}}, function (e) {
					if ($(window).width() > 959) {
						$(this).children("ul").fadeOut(150);
						e.preventDefault();
					}
				}
			);
		})
	</script>


	<script type="text/javascript">
		// current
		this.on('mount', function() {

			var current = location.pathname.split('/')[1];

			//	jsのデバッグchromeのF12のコンソールにでるよ
			//	console.log(current);
			//	 || current === 'reserve'を追加

			if (current.length === 0 || current === 'index.html' || current === 'reserve') {
				$('.nav-menu > ul > li.nav-menu-reservation > a').addClass('current-red');
			} else {
				$('.nav-menu > ul > li > a[href^="'+this.base+'/' + current + '/"]').addClass('current');
			}
		})
	</script>
</nav_common_pc>
