@charset "utf-8";
/* CSS Document */
<h1 class="shop-name">
    <a href="<{$url.top}>">
        <{if $shop.logo_url}>
            <img src="<{$shop.logo_url}>" alt="<{$shop.name}>">
        <{else}>
            <{$shop.name}>
        <{/if}>
    </a>
</h1>

<nav class="header-nav">
    <div class="header-icon header-search">
    <div class="search-box-inline">
        <input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" class="side-search-keyword search-keyword" placeholder="キーワード・カテゴリ">
        <a href="<{$search_form.search_url}>" class="search-url"><i class="fi fi-rr-search flaticon-icon"></i></a>
    </div>
</div>
            <div class="header-icon header-favorite">
    <a href="<{$url.favorite}>">
        <i class="fi fi-rr-heart flaticon-icon"></i>
        <span class="header-icon-label">お気に入り</span>
    </a>
</div>
    <div class="header-icon header-favorite">
        <a href="<{$url.favorite}>">
            <i class="fi fi-rr-user flaticon-icon"></i>
        <span class="header-icon-label">ログイン</span></a>
    </div>
    <div class="header-icon header-cart">
        <a href="<{$url.cart}>"><i class="fi fi-rr-basket-shopping-simple flaticon-icon"></i>
        <span class="cart-badge cart-count" <{if !$cart.has_item}>style="display:none;"<{/if}>><{$cart.total_quantity}></span><span class="header-icon-label">カート</span></a>
    </div>
    <div class="cart-notification" style="display: none;">商品が追加されました！</div>

    <div class="header-icon header-menu">
        <button class="menu-toggle" aria-expanded="false">
            <i class="fi fi-rr-menu-burger flaticon-icon"></i>
            <i class="fi fi-rr-cross-small flaticon-icon"></i>
            <span class="header-icon-label">メニュー</span>
        </button>
    </div>
</nav>

<ul class="hamburger-menu" id="menu"> 
    <div class="menu-wrap">
        <{section name=i loop=$category_menu.list}>
        <li class="level-1"> <!-- 1階層目 -->
            <a href="<{$category_menu.list[i].url}>" class="category-link">
                <{$category_menu.list[i].name}>
                <{if $category_menu.list[i].child_category.has_item}>
                    <i class="fi fi-rr-plus-small flaticon-icon"></i>
                <{else}>
                    <i class="fi fi-rr-angle-small-right"></i>
                <{/if}>
            </a>
            <{if $category_menu.list[i].child_category.has_item}>
                <!-- 2階層目 -->
                <ul class="sub-menu" aria-hidden="true">
                    <{section name=j loop=$category_menu.list[i].child_category.list}>
                        <li class="level-2">
                            <a href="<{$category_menu.list[i].child_category.list[j].url}>" class="category-link">
                                <{$category_menu.list[i].child_category.list[j].name}>
                                <{if $category_menu.list[i].child_category.list[j].child_category.has_item}>
                                    <i class="fi fi-rr-plus-small flaticon-icon"></i>
                                <{else}>
                                    <i class="fi fi-rr-angle-small-right"></i>
                                <{/if}>
                            </a>
                            <{if $category_menu.list[i].child_category.list[j].child_category.has_item}>
                                <!-- 3階層目 -->
                                <ul class="sub-menu" aria-hidden="true">
                                    <{section name=k loop=$category_menu.list[i].child_category.list[j].child_category.list}>
                                        <li class="level-3">
                                            <a href="<{$category_menu.list[i].child_category.list[j].child_category.list[k].url}>" class="category-link">
                                                <{$category_menu.list[i].child_category.list[j].child_category.list[k].name}>
                                                <{if $category_menu.list[i].child_category.list[j].child_category.list[k].child_category.has_item}>
                                                    <i class="fi fi-rr-plus-small flaticon-icon"></i>
                                                <{else}>
                                                    <i class="fi fi-rr-angle-small-right"></i>
                                                <{/if}>
                                            </a>
                                            <{if $category_menu.list[i].child_category.list[j].child_category.list[k].child_category.has_item}>
                                                <!-- 4階層目 -->
                                                <ul class="sub-menu" aria-hidden="true">
                                                    <{section name=l loop=$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list}>
                                                        <li class="level-4">
                                                            <a href="<{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].url}>" class="category-link">
                                                                <{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].name}>
                                                                <{if $category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.has_item}>
                                                                    <i class="fi fi-rr-plus-small flaticon-icon"></i>
                                                                <{else}>
                                                                    <i class="fi fi-rr-angle-small-right"></i>
                                                                <{/if}>
                                                            </a>
                                                            <{if $category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.has_item}>
                                                                <!-- 5階層目 -->
                                                                <ul class="sub-menu" aria-hidden="true">
                                                                    <{section name=m loop=$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.list}>
                                                                        <li class="level-5">
                                                                            <a href="<{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.list[m].url}>" class="category-link"><{$category_menu.list[i].child_category.list[j].child_category.list[k].child_category.list[l].child_category.list[m].name}>
                                                                                <i class="fi fi-rr-angle-small-right"></i>
                                                                            </a>
                                                                        </li>
                                                                    <{/section}>
                                                                </ul>
                                                            <{/if}>
                                                        </li>
                                                    <{/section}>
                                                </ul>
                                            <{/if}>
                                        </li>
                                    <{/section}>
                                </ul>
                            <{/if}>
                        </li>
                    <{/section}>
                </ul>
            <{/if}>
        </li>
        <{/section}>

        <{if $bulk_menu.has_item}>
            <li class="bulk-menu">
                <{section name=i loop=$bulk_menu.list}>
                <a href="<{$bulk_menu.list[i].url}>" class="category-link"><{$bulk_menu.list[i].name}>
                    <i class="fi fi-rr-angle-small-right"></i>
                </a>
                <{/section}>
            </li>
        <{/if}>

        <li>
        <div class="shop-info">
            <div class="order-history">
                <a href="<{$url.order_history}>">購入履歴</a>
            </div>
            <div class="about-company">
                <a href="<{$url.company}>">ショップについて</a>
            </div>
            <{if $member.is_logged_in}>
                <div class="logout center">
                    <a href="<{$url.logout}>">Log out</a>
                </div>
            <{else}>
                <div class="login center">
                    <a href="<{$url.login}>">Log in</a>
                </div>
                <div class="entry">
                    <a href="<{$url.member_entry}>"><i class="fi fi-rr-circle-user flaticon-icon"></i>新規会員登録</a>
                </div>
            <{/if}>
        </div>
        </li>
    </div>
</ul>