{% set limit = 3 %}
{% set productMaxLength = 10 %}
<div class="ec-headerNaviRole" style="padding-bottom: 20px;">
<div class="header-block-42">
<div class="header01">
<div class="header-block-nav">
<div class="basic-header-bottom">
<div class="mega-container">
<div class="mega-menu-wrapper p-relative">
<div class="d-flex align-items-center justify-content-between">
<div class="basic-header-logo">
<a href="{{ url('homepage') }}" title="{{ BaseInfo.shop_name }}">
<img alt="{{ BaseInfo.shop_name }}"
src="/html/user_data/logo.png?version=1730870034">
</a>
</div>
<div class="ec-headerRole__navSP">
<div class="ec-headerNavSP">
<i class="fas fa-bars"></i>
</div>
</div>
<div class="basic-header-bottom-right d-flex justify-content-end align-items-center">
<div class="basic-header-meta-items-3 d-flex align-items-center">
{% if is_granted('ROLE_USER') %}
<div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
<div class="basic-header-meta-icon-3 basic-link NavSP">
<a href="{{ url('mypage') }}" title="マイページ"> <i class="fa fa-user-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
<div class="basic-header-meta-icon-3 basic-link NavSP">
<a href="{{ url('logout') }}" title="ログアウト"> <i class="fa fa-sign-out" aria-hidden="true"></i></a>
</div>
</div>
{% else %}
<div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
<div class="basic-header-meta-icon-3 basic-link NavSP">
<a href="{{ url('entry') }}" title="新規会員登録"> <i class="fa fa-user-circle" aria-hidden="true"></i></a>
</div>
</div>
<div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center NavSP">
<div class="basic-header-meta-icon-3 basic-link NavSP">
<a href="{{ url('mypage_login') }}" title="ログイン"> <i class="fa fa-lock fa-large" aria-hidden="true"></i></a>
</div>
</div>
{% endif %}
{% if BaseInfo.option_favorite_product %}
<div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center">
<div class="basic-header-meta-icon-3 basic-link">
<a href="{{ url('mypage_favorite') }}"> <i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
{% endif %}
{% set Carts = get_all_carts() %}
{% set totalPrice = get_carts_total_price() %}
{% set totalQuantity = get_carts_total_quantity() %}
<div class="basic-header-meta-item basic-header-menu-meta d-flex align-items-center">
<div class="basic-header-meta-icon-3 basic-header-cart">
<a href="{{ url('cart') }}" title="カートへ進む">
<i class="fa fa-shopping-cart fa-large" aria-hidden="true"></i>
<span class="basic-header-cart-count">{{ totalQuantity|number_format }}</span>
</a>
{% if totalQuantity <= 0 %}
<div class="basic-header-cart-wrapper">
<h5>現在カート内に商品はございません。</h5>
</div>
{% endif %}
</div>
</div>
<div class="basic-search-btn-wrapper">
<button class="basic-search-open-btn" data-open-name="search" data-js="basic_canvas__open-btn" type="button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="background:#365055">
<div class="ec-headerNaviRole" style="color:#fff;padding-bottom: 20px;">
<div class="header-block-42">
<div class="header01">
<div class="header-block-nav">
<div class="basic-header-bottom">
<div class="mega-container">
<div class="mega-menu-wrapper p-relative">
<div class="d-flex align-items-center justify-content-between">
<div class="basic-main-menu d-none d-lg-flex align-items-center">
<nav>
<ul>
<!-- デフォルト表示形式 -->
<li class="has-dropdown">
<a href="#" data-open-name="info" data-js="basic_canvas__open-btn">
ご購入までの流れ
</a>
</li>
<!-- デフォルト表示形式 -->
<li class="has-dropdown">
<a href="" title="カテゴリ">
カテゴリ
</a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="submenu">
<li>
<a href="/products/list?category_id=7" title="カーポート・車庫">
カーポート・車庫
</a>
</li>
<li>
<a href="/products/list?category_id=16" title="倉庫・ガレージ">
倉庫・ガレージ
</a>
</li>
<li>
<a href="/products/list?category_id=8" title="サイクルポート・駐輪場">
サイクルポート・駐輪場
</a>
</li>
<li>
<a href="/products/list?category_id=9" title="ゲート">
ゲート
</a>
</li>
<li>
<a href="/products/list?category_id=12" title="テラス">
テラス
</a>
</li>
<li>
<a href="/products/list?category_id=19" title="ベランダ・バルコニー">
ベランダ・バルコニー
</a>
</li>
<li>
<a href="/products/list?category_id=18" title="オーニング・日よけ">
オーニング・日よけ
</a>
</li>
<li>
<a href="/products/list?category_id=11" title="ウッドデッキ">
ウッドデッキ
</a>
</li>
<li>
<a href="/products/list?category_id=14" title="フェンス・柵">
フェンス・柵
</a>
</li>
<li>
<a href="/products/list?category_id=25" title="門扉">
門扉
</a>
</li>
<li>
<a href="/products/list?category_id=13" title="ポスト・門柱宅配ボックス">
ポスト・門柱宅配ボックス
</a>
</li>
<li>
<a href="/products/list?category_id=15" title="物億・収納・屋外倉庫">
物億・収納・屋外倉庫
</a>
</li>
<li>
<a href="/products/list?category_id=20" title="ガーデンファニチャー">
ガーデンファニチャー
</a>
</li>
<li>
<a href="/products/list?category_id=22" title="人工芝">
人工芝
</a>
</li>
<li>
<a href="/products/list?category_id=17" title="内窓・二重窓">
内窓・二重窓
</a>
</li>
<li>
<a href="/products/list?category_id=26" title="その他">
その他
</a>
</li>
</ul>
</li>
<!-- デフォルト表示形式 -->
<li class="has-dropdown">
<a href="" title="ブランド">
ブランド
</a>
<i class="fa fa-angle-down" aria-hidden="true"></i>
<ul class="submenu">
<li>
<a href="/products/list?maker_id=1&m=LIXIL" title="LIXIL">
LIXIL
</a>
</li>
<li>
<a href="/products/list?maker_id=2&m=YKK AP" title="YKK AP">
YKK AP
</a>
</li>
<li>
<a href="/products/list?maker_id=3&m=三協アルミ" title="三協アルミ">
三協アルミ
</a>
</li>
<li>
<a href="/products/list?maker_id=4&m=四国化成" title="四国化成">
四国化成
</a>
</li>
<li>
<a href="/products/list?maker_id=5&m=タカショー" title="タカショー">
タカショー
</a>
</li>
<li>
<a href="/products/list?maker_id=8&m=パナソニック" title="パナソニック">
パナソニック
</a>
</li>
<li>
<a href="/products/list?maker_id=9&m=イナバ " title="イナバ ">
イナバ
</a>
</li>
<li>
<a href="/products/list?maker_id=10&m=ヨドコウ" title="ヨドコウ">
ヨドコウ
</a>
</li>
<li>
<a href="/products/list?maker_id=6&m=ユニソン" title="ユニソン">
ユニソン
</a>
</li>
<li>
<a href="/products/list?maker_id=7&m=エスビック" title="エスビック">
エスビック
</a>
</li>
<li>
<a href="/products/list?maker_id=1&m=13タクボ" title="タクボ">
タクボ
</a>
</li>
</ul>
</li>
{% if is_granted('ROLE_USER') %}
<li class="has-dropdown">
<a href="{{ url('mypage') }}" title="マイページ">
マイページ
</a>
</li>
<li class="has-dropdown">
<a href="{{ url('logout') }}" title="ログアウト">
ログアウト
</a>
</li>
{% else %}
<li class="has-dropdown">
<a href="{{ url('entry') }}" title="新規会員登録">
新規会員登録
</a>
</li>
<li class="has-dropdown">
<a href="{{ url('mypage_login') }}" title="ログイン">
ログイン
</a>
</li>
{% endif %}
<li class="has-dropdown">
<a href="{{ url('contact') }}" title="お問い合わせ">
お問い合わせ
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------Contact Info---------------------------------------------------->
<div class="contact-info">
<div class="basic_canvas__area" data-open-js="basic_canvas__area__info" data-js="basic_canvas__area">
<div class="basic_canvas__bg"></div>
<div class="basic_canvas__wrapper">
<div class="basic_canvas__content">
<div class="basic_canvas__top mb-40 d-flex justify-content-between align-items-center">
<div class="basic_canvas__logo logo">
<a href="{{ url('homepage') }}">
<img alt="{{ BaseInfo.shop_name }}"
src="/html/user_data/logo.png?version=1730870034">
</a>
</div>
<div class="basic_canvas__close">
<button class="basic_canvas__close-btn" type="button" data-js="basic_canvas__close-btn">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="basic_canvas__search mb-40">
<form method="get" class="searchform" action="{{ path('product_list') }}">
<button type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
<input type="text" name="name" placeholder="商品名やキーワードで検索">
</form>
</div>
<div class="basic_canvas__about d-none d-lg-block mb-30">
<h4>ご購入までの流れ</h4>
<p>ご購入までの流れについて、簡潔に記載します。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br />
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br />
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br />
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div class="basic_canvas__contact mb-30">
<h4>お見積依頼</h4>
<ul>
<li class="d-flex align-items-center gap-2">
<div class="basic_canvas__contact-icon">
<a href="tel:Line">
<i class="fa fa-phone" aria-hidden="true"></i>
</a>
</div>
<div class="basic_canvas__contact-text">
<a href="tel:Line">
Line
</a>
</div>
</li>
<li class="d-flex align-items-center gap-2">
<div class="basic_canvas__contact-icon">
<a href="mailto:support@mail.com">
<i class="fa fa-envelope-open" aria-hidden="true"></i>
</a>
</div>
<div class="basic_canvas__contact-text">
<a href="mailto:support@mail.com">
support@mail.com
</a>
</div>
</li>
</ul>
</div>
<div class="basic_canvas__social">
<ul>
<li>
<a target="_blank" rel="noreferrer" href="#facebook">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</a>
</li>
<li>
<a target="_blank" rel="noreferrer" href="#twitter">
<i class="fa fa-twitter-square" aria-hidden="true"></i>
</a>
</li>
<li>
<a target="_blank" rel="noreferrer" href="#youtube">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
</li>
<li>
<a target="_blank" rel="noreferrer" href="#google">
<i class="fa fa-google" aria-hidden="true"></i>
</a>
</li>
<li>
<a target="_blank" rel="noreferrer" href="#instagram">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------Search Form---------------------------------------------------->
<div class="search-area">
<div class="classic-search-popup-area" data-open-js="basic_canvas__area__search" data-js="basic_canvas__area">
<div class="container">
<div class="row">
<div class="col-12">
<div class="classic-search-popup">
<div class="classic-search-form">
<form method="get" class="searchform" action="{{ path('product_list') }}">
<div class="classic-search-input">
<input type="search" name="name" placeholder="商品名やキーワードで検索">
<div class="classic-search-submit">
<button type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</div>
</form>
<div class="classic-search-close">
<div class="classic-search-close-btn">
<button type="button" data-js="basic_canvas__close-btn">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>