<common_header>
	<div class="header">
		<div class="header__logo">
			<a href="{ base }/" class="header__logo__link">
				<img src="{ base }/assets/img/common/logo.svg" alt="株式会社コンテンツ">
			</a>
			<p class="header__logo__tagline">九州福岡の採用支援会社</p>
		</div>
		<nav class="header__nav" aria-label="グローバルナビゲーション">
			<ul class="header__nav__list">
				<li class="header__nav__list__item">
					<a href="{ base }/" class="header__nav__list__item__link header__nav__list__item__link--home"></a>
				</li>
				<li class="header__nav__list__item">
					<a href="{ base }/reason/" class="header__nav__list__item__link">選ばれる理由</a>
				</li>
				<li class="header__nav__list__item">
					<a href="{ base }/service/" class="header__nav__list__item__link">サービス</a>
				</li>
				<li class="header__nav__list__item">
					<a href="{ base }/case/" class="header__nav__list__item__link">成功事例</a>
				</li>
				<li class="header__nav__list__item">
					<a href="{ base }/company/" class="header__nav__list__item__link">会社概要</a>
				</li>
				<li class="header__nav__list__item">
					<a href="{ base }/faq/" class="header__nav__list__item__link">よくある質問</a>
				</li>
			</ul>
			<div class="header__nav__cv">
				<a href="tel:0927355088" class="header__nav__cv__tel">
					<span class="header__nav__cv__tel__icon">
						<img src="{ base }/assets/img/common/icon_tel.svg" alt="">
					</span>
					<span class="header__nav__cv__tel__text">
						<span class="header__nav__cv__tel__text__num">092-735-5088</span>
						<span class="header__nav__cv__tel__text__hours">受付 平日9：30～18：00</span>
					</span>
				</a>
				<a href="{ base }/contact/" class="header__nav__cv__btn">
					<span class="header__nav__cv__btn__icon">
						<img src="{ base }/assets/img/common/icon_mail_white.svg" alt="">
					</span>
					<span class="header__nav__cv__btn__text">まずは無料相談</span>
				</a>
			</div>
		</nav>
		<button class="menu-btn">
			<span class="menu-btn__bar"></span>
		</button>
		<div class="menu">
			<div class="menu__box">
				<div class="menu__inner">
					<nav class="menu__nav" aria-label="モバイルナビゲーション">
						<ul class="menu__nav__list">
							<li class="menu__nav__list__item">
								<a href="{ base }/" class="menu__nav__list__item__link menu__nav__list__item__link--home">HOME</a>
							</li>
							<li class="menu__nav__list__item">
								<a href="{ base }/reason/" class="menu__nav__list__item__link">選ばれる理由</a>
							</li>
							<li class="menu__nav__list__item">
								<a href="{ base }/service/" class="menu__nav__list__item__link">サービス</a>
							</li>
							<li class="menu__nav__list__item">
								<a href="{ base }/case/" class="menu__nav__list__item__link">成功事例</a>
							</li>
							<li class="menu__nav__list__item">
								<a href="{ base }/company/" class="menu__nav__list__item__link">会社概要</a>
							</li>
							<li class="menu__nav__list__item">
								<a href="{ base }/faq/" class="menu__nav__list__item__link">よくある質問</a>
							</li>
						</ul>
					</nav>
					<div class="menu__btn">
						<a href="{ base }/contact/" class="menu__btn__contact">
							<span class="menu__btn__contact__text">
								まずは無料相談
							</span>
						</a>
						<div class="menu__btn__privacy">
							<a href="{ base }/privacy/" class="menu__btn__privacy__link">
								プライバシーポリシー
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		this.on('mount', function() {
			var $root = $(this.root);
			var currentClass = 'now';
			var $sectionLinks = $root.find('.header__nav__list__item__link:not(.header__nav__list__item__link--home), .menu__nav__list__item__link:not(.menu__nav__list__item__link--home)');
			var normalizePath = function(pathname) {
				var normalized = pathname.replace(/\/+$/, '');
				return normalized.length ? normalized : '/';
			};
			var currentPath = normalizePath(location.pathname);
			var matchedLength = -1;
			var matchedHref = null;

			var isSectionMatch = function(linkPath, path) {
				if (linkPath === '/') {
					return path === '/';
				}
				return path === linkPath || path.indexOf(linkPath + '/') === 0;
			};

			$sectionLinks.removeClass(currentClass);
			$root.find('.header__nav__list__item__link--home, .menu__nav__list__item__link--home').removeClass(currentClass);

			$sectionLinks.each(function() {
				var linkPath = normalizePath(new URL($(this).attr('href'), location.origin).pathname);
				if (isSectionMatch(linkPath, currentPath) && linkPath.length > matchedLength) {
					matchedLength = linkPath.length;
					matchedHref = $(this).attr('href');
				}
			});

			if (matchedHref) {
				$root.find('.header__nav__list__item__link[href="' + matchedHref + '"], .menu__nav__list__item__link[href="' + matchedHref + '"]').addClass(currentClass);
			} else if (currentPath === '/') {
				$root.find('.header__nav__list__item__link--home, .menu__nav__list__item__link--home').addClass(currentClass);
			}

			$root.find('.menu-btn').off('click.commonHeader').on('click.commonHeader', function() {
				$(this).toggleClass('on');
				$root.find('.menu').toggleClass('on');
			});
		});
	</script>
</common_header>
