<link href="https://img.shop-pro.jp/s_tmpl_js/28/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://img.shop-pro.jp/tmpl_js/73/jquery.tile.js"></script>
<script type="text/javascript" src="https://img.shop-pro.jp/tmpl_js/73/jquery.skOuterClick.js"></script>

<!-- スマートフォン用ヘッダー -->
<div id="sp-header" class="visible-phone">
  <div class="toolbar">
    <ul class="toolbar__inner u-cf clearfix">
      <li class="toolbar__item toolbar__item--menu">
        <a href="" class="u-toggle">
          <div class="u-wrap">
            <i class="fa fa-bars fa-lg"></i><span>メニュー</span>
          </div>
        </a>
      </li>
      <li class="inline toolbar__item toolbar__item--cart">
        <a href="<{$view_cart_url}>">
          <div class="u-wrap">
            <i class="fa fa-shopping-cart fa-lg"></i>
            <{if $incart_total_count == 0}>
              <span class="toolbar__item__count"><{$incart_total_count}></span>
            <{else}>
              <span class="toolbar__item__count toolbar__item__count--in"><{$incart_total_count}></span>
            <{/if}>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="section section--shopname">
    <div class="section__inner">
      <h1 class="shopname">
        <a href="<{$home_url}>"><{$logo}></a>
      </h1>
    </div>
  </div>
</div>
<!-- // スマートフォン用ヘッダー -->

<!-- デスクトップ用ヘッダー(481px以上で表示) -->
<div class="wrapper pad_t_10">
  <!-- 会員メニュー -->
  <ul class="inline pull-right hidden-phone txt_r">
    <li>
      <a href="<{$view_myaccount_url}>" class="txt_c_333"><i class="icon-b icon-user va-10 mar_r_5"></i>マイアカウント</a>
    </li>
    <{if $members_use_flg == true}>
      <{if $members_login_flg == false}>
        <{if $members_register_flg == true}>
          <li>
            <a href="<{$members_regi_url}>" class="txt_c_333"><i class="icon-b icon-adduser va-10 mar_r_5"></i>会員登録</a>
          </li>
        <{/if}>
        <li>
          <a href="<{$members_login_url}>" class="txt_c_333"><i class="icon-b icon-login va-10 mar_r_5"></i>ログイン</a>
        </li>
      <{else}>
        <li>
          <a href="<{$members_login_url}>" class="txt_c_333"><i class="icon-b icon-logout va-10 mar_r_5"></i>ログアウト</a>
        </li>
      <{/if}>
      <li>
        <a href="<{$view_cart_url}>" class="txt_c_333"><i class="icon-b icon-cart va-10 mar_r_5"></i>カートを見る</a>
      </li>
    <{/if}>
  </ul>
  <!-- // 会員メニュー(481px以上で表示) -->
</div>

<div class="pc-header hidden-phone">
  <!-- あと○円で送料無料(481px以上で表示) -->
  <{if $incart != "" && $incart_delivery}>
    <div class="visible-phone">
      <ul class="unstyled bgc_gray txt_12">
        <{section name=num loop=$incart_delivery}>
          <li>
            <{$incart_delivery[num].delivery_name}>
            <{if $incart_delivery[num].balance > 0}>：
              あと<b><{$incart_delivery[num].balance}>円</b>で<b>送料無料！</b>
            <{else}>
              送料無料です！
            <{/if}>
          </li>
        <{/section}>
      </ul>
    </div>
  <{/if}>
  <!-- // あと○円で送料無料(481px以上で表示) -->
  <div class="txt_24" style="padding-left:1%;"><a href="<{$home_url}>"><{$logo}></a></div>
  <div style="padding-left:1%;">
    <ul class="dropmenu inline mar_t_10 txt_16">
      <li class="pad_v_10 mar_r_20">
				<a href="#"><i class="icon-lg-b icon-chevron_down va-30 mar_r_5"></i>カテゴリーから探す</a>
        <ul>
          <{section name=num loop=$category}>
            <li>
              <a href="<{$category[num].link_url}>">
                <{$category[num].name}>
              </a>
            </li>
          <{/section}>
        </ul>
      </li>
      <li class="pad_v_10 mar_r_20">
        <a href="#"><i class="icon-lg-b icon-chevron_down va-30 mar_r_5"></i>グループから探す</a>
        <ul>
          <{section name=num loop=$group}>
            <li>
              <a href="<{$group[num].link_url}>">
                <{$group[num].name}>
              </a>
            </li>
          <{/section}>
        </ul>
      </li>
      <li class="pad_v_10 mar_r_20"><a href="<{$sk_url}>#info" class="txt_c_333"><i class="icon-lg-b icon-help va-30 mar_r_5"></i>ショップについて</a></li>
      <{if $manager_url != ""}><li class="pad_v_10 mar_r_20"><a href="<{$manager_url}>" class="txt_c_333"><i class="icon-lg-b icon-pencil va-30 mar_r_5"></i>ショップブログ</a></li><{/if}>
      <li class="pad_v_10 mar_r_20"><a href="<{$view_inq_url}>" class="txt_c_333"><i class="icon-lg-b icon-mail va-30 mar_r_5"></i>お問い合わせ</a></li>
    </ul>
  </div>
</div>
<!-- // デスクトップ用ヘッダー -->

<{* スライドショー *}>
<{if $slideshow_html}>
<div id="p-slider" class="mar_t_30">
  <{$slideshow_html}>
</div>
<script type="text/javascript">
  $(function() {
    $('#slider').bxSlider({
      auto: true,
      controls: false,
      pause: 10000,
      speed: 200,
      controls: true,
      captions: true,
      pager: true,
      mode: 'fade',
      responsive: true,
      easing: 'ease'
    });
  });
</script>
<{/if}>
<{* // スライドショー *}>

<div class="wrapper container mar_auto pad_t_20">
  <div class="row">
    <div id="contents" class="col col-lg-9 col-sm-12 mar_b_50">
      <{include file = $file_name}>

      <!-- 最近チェックした商品 -->
      <{if $history_num != 0}>
        <div class="mar_b_50">
          <h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn bor_b_1">最近チェックした商品</h2>
          <ul class="row unstyled">
            <{section name=num loop=$history max="6"}>
              <li class="col col-sm-4 col-lg-2 history-unit txt_10 mar_b_20 txt_c">
                <a href="<{$history[num].link_url}>">
                  <{if $history[num].img_url != ""}>
                    <img src="<{$history[num].img_url}>" alt="<{$history[num].name}>" class="show mar_auto mar_b_10" />
                  <{else}>
                    <img src="https://img.shop-pro.jp/tmpl_img/73/noimage.png" alt="<{$history[num].name}>" class="show mar_auto mar_b_10" />
                  <{/if}>
                </a>
                <div>
                  <a href="<{$history[num].link_url}>"><{$history[num].name}></a>
                </div>
                <{if $history[num].soldout_flg == false}>
                  <{$history[num].price}>
                  <{if $members_login_flg == true && $history[num].discount_flg == true}>
                    <{$history[num].discount_rate}>OFF!!
                  <{/if}>
                <{else}>
                  SOLD OUT
                <{/if}>
              </li>
            <{/section}>
          </ul>
        </div>
      <{/if}>
<!--HTTrack用			
<div class="mar_b_50">
  <h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn bor_b_1">最近チェックした商品</h2>
  <ul class="row unstyled">
    <li class="col col-sm-4 col-lg-2 history-unit txt_10 mar_b_20 txt_c" style="height: 172px;">
      <a href="?pid=136220528">
        <img src="https://img21.shop-pro.jp/PA01424/042/product/136220528_th.jpg?cmsp_timestamp=20190213104133" alt="White Table" class="show mar_auto mar_b_10">
      </a>
      <div>
        <a href="?pid=136220528">White Table</a>
      </div>
      900円(税込)
    </li>
    <li class="col col-sm-4 col-lg-2 history-unit txt_10 mar_b_20 txt_c" style="height: 172px;">
      <a href="?pid=148413785">
        <img src="https://img21.shop-pro.jp/PA01424/042/product/148413785_th.jpg?cmsp_timestamp=20200129135744" alt="Gray Desk Lamp " class="show mar_auto mar_b_10">
      </a>
      <div>
        <a href="?pid=148413785">Gray Desk Lamp </a>
      </div>
      900円(税込)
    </li>
    <li class="col col-sm-4 col-lg-2 history-unit txt_10 mar_b_20 txt_c" style="height: 172px;">
      <a href="?pid=136212487">
        <img src="https://img21.shop-pro.jp/PA01424/042/product/136212487_th.jpg?cmsp_timestamp=20190221215324" alt="<img class='new_mark_img1' src='https://img.shop-pro.jp/img/new/icons1.gif' style='border:none;display:inline;margin:0px;padding:0px;width:auto;' />Gray Table" class="show mar_auto mar_b_10">
      </a>
      <div>
        <a href="?pid=136212487"><img class="new_mark_img1" src="https://img.shop-pro.jp/img/new/icons1.gif" style="border:none;display:inline;margin:0px;padding:0px;width:auto;">Gray Table</a>
      </div>
      500円(税込)
    </li>
    <li class="col col-sm-4 col-lg-2 history-unit txt_10 mar_b_20 txt_c" style="height: 172px;">
      <a href="?pid=148413733">
        <img src="https://img21.shop-pro.jp/PA01424/042/product/148413733_th.jpg?cmsp_timestamp=20200129135438" alt="White Pendant Lamp" class="show mar_auto mar_b_10">
      </a>
      <div>
        <a href="?pid=148413733">White Pendant Lamp</a>
      </div>
      850円(税込)
    </li>
    <li class="col col-sm-4 col-lg-2 history-unit txt_10 mar_b_20 txt_c" style="height: 172px;">
      <a href="?pid=139216566">
        <img src="https://img21.shop-pro.jp/PA01424/042/product/139216566_th.jpg?cmsp_timestamp=20190213104306" alt="Sofa Chair" class="show mar_auto mar_b_10">
      </a>
      <div>
        <a href="?pid=139216566">Sofa Chair</a>
      </div>
      2,000円(税込)
    </li>
    <li class="col col-sm-4 col-lg-2 history-unit txt_10 mar_b_20 txt_c" style="height: 172px;">
      <a href="?pid=139216408">
        <img src="https://img21.shop-pro.jp/PA01424/042/product/139216408_th.jpg?cmsp_timestamp=20190213105254" alt="Wooden Table" class="show mar_auto mar_b_10">
      </a>
      <div>
        <a href="?pid=139216408">Wooden Table</a>
      </div>
      900円(税込)
    </li>
  </ul>
</div>-->

      <!-- // 最近チェックした商品 -->
    </div>
    <div id="side" class="col col-lg-3 col-sm-12 mar_t_20 mar_b_50">
      <!-- あと○円で送料無料(481px以上で表示) -->
      <{if $incart != "" && $incart_delivery}>
        <div class="hidden-phone">
          <ul class="unstyled pad_10 bgc_gray txt_12">
            <{section name=num loop=$incart_delivery}>
              <li>
                <{$incart_delivery[num].delivery_name}>
                <{if $incart_delivery[num].balance > 0}>：
                  あと<b><{$incart_delivery[num].balance}>円</b>で<b>送料無料！</b>
                <{else}>
                  送料無料です！
                <{/if}>
              </li>
            <{/section}>
          </ul>
        </div>
      <{/if}>
      <!-- // あと○円で送料無料(481px以上で表示) -->
      <!-- 商品検索フォーム -->
      <form action="<{$product_search_url}>" method="get" class="mar_b_50" id="srch">
        <{$product_search_mode}>
        <select name="cid" class="mar_b_10">
          <option value="">カテゴリーを選択</option>
          <{section name=num loop=$category}>
            <option value="<{$category[num].id}>"><{$category[num].name}></option>
          <{/section}>
        </select>
        <input type="text" name="keyword" value="" />
        <button class="btn btn-xs"><i class="icon-lg-b icon-search va-35"></i></button>
      </form>
      <!-- // 商品検索フォーム -->
      <!-- カテゴリーリスト -->
      <{section name=num loop=$category}>
        <{if $smarty.section.num.first }>
          <div>
            <h3 class="pad_l_10">カテゴリーから探す</h3>
            <ul class="unstyled bor_b_1 mar_b_50">
        <{/if}>
              <li class="pad_10 bor_t_1">
                <a href="<{$category[num].link_url}>" class="show txt_c_333">
                  <{if $category[num].img_url != ""}>
                    <img src="<{$category[num].img_url}>" class="show hidden-phone mar_b_5" />
                  <{/if}>
                  <{$category[num].name}>
                </a>
              </li>
        <{if $smarty.section.num.last }>
            </ul>
          </div>
        <{/if}>
      <{/section}>
      <!-- // カテゴリーリスト -->
      <!-- グループリスト -->
      <{section name=num loop=$group}>
        <{if $smarty.section.num.first }>
          <div>
            <h3 class="pad_l_10">グループから探す</h3>
            <ul class="unstyled bor_b_1 mar_b_50">
        <{/if}>
            <li class="pad_10 bor_t_1">
              <a href="<{$group[num].link_url}>" class="show txt_c_333">
                <{if $group[num].img_url != ""}>
                  <img src="<{$group[num].img_url}>" class="show hidden-phone mar_b_5" />
                <{/if}>
                <{$group[num].name}>
              </a>
            </li>
        <{if $smarty.section.num.last }>
            </ul>
          </div>
        <{/if}>
      <{/section}>
      <!-- // グループリスト -->
      <div>
        <h3 class="pad_l_10">コンテンツ</h3>
        <ul class="unstyled bor_b_1 mar_b_50">
          <!-- フリーページ -->
          <{if $free_area_flg == true}>
            <{section name=num loop=$freepage}>
              <li class="pad_10 bor_t_1"><a href="<{$freepage[num].link_url}>" class="show txt_c_333"><{$freepage[num].page_title}></a></li>
            <{/section}>
          <{/if}>
          <!-- // フリーページ -->
          <{if $manager_url != ""}><li class="pad_10 bor_t_1"><a href="<{$manager_url}>" class="show txt_c_333">ショップブログ</a></li><{/if}>
          <li class="pad_10 bor_t_1"><a href="<{$sk_url}>#payment" class="show txt_c_333">お支払い方法について</a></li>
          <li class="pad_10 bor_t_1"><a href="<{$sk_url}>" class="show txt_c_333">配送方法・送料について</a></li>					
          <{if $mailmaga_url != ""}>
            <li class="pad_10 bor_t_1"><a href="<{$mailmaga_url}>" class="show txt_c_333">メルマガ登録・解除</a></li>
          <{/if}>
          <!-- 会員メニュー(480px以下で表示) -->
          <li class="pad_10 bor_t_1 visible-phone"><a href="<{$view_myaccount_url}>" class="txt_c_333">マイアカウント</a></li>
          <{if $members_use_flg == true}>
            <{if $members_login_flg == false}>
              <{if $members_register_flg == true}>
                <li class="pad_10 bor_t_1 visible-phone"><a href="<{$members_regi_url}>" class="txt_c_333">会員登録</a></li>
              <{/if}>
              <li class="pad_10 bor_t_1 visible-phone"><a href="<{$members_login_url}>" class="txt_c_333">ログイン</a></li>
            <{else}>
              <li class="pad_10 bor_t_1 visible-phone"><a href="<{$members_login_url}>" class="txt_c_333">ログアウト</a></li>
            <{/if}>
          <{/if}>
          <!-- // 会員メニュー(480px以下で表示) -->
        </ul>
      </div>
      <{if $qrcode_url}>
        <div class="hidden-phone mar_b_50">
          <h3 class="pad_l_10">モバイルショップ</h3>
          <img src="<{$qrcode_url}>" class="show mar_auto" />
        </div>
      <{/if}>
      <{if $manager_name != "" && $manager_memo != ""}>
        <div class="hidden-phone mar_b_50">
          <h3 class="pad_l_10">ショップについて</h3>
          <{if $manager_img != ""}>
            <img src="<{$manager_img}>" class="show mar_auto" />
          <{/if}>
          <p class="txt_fwb txt_c mar_t_10 mar_b_10"><{$manager_name}></p>
          <p>
            <{$manager_memo}>
          </p>
        </div>
      <{/if}>
    </div>
  </div>
</div>

<!-- フッター -->
  <div id="footer" class="pad_v_30 bor_t_1 txt_c">
    <ul class="inline container">
      <li><a href="<{$home_url}>">ホーム</a></li>
      <li><a href="<{$sk_url}>">支払・配送について</a></li>
      <li><a href="<{$sk_url}>#info">特定商取引法に基づく表記</a></li>
      <li><a href="<{$privacy_url}>">プライバシーポリシー</a></li>
      <li><a href="<{$view_inq_url}>">お問い合わせ</a></li>
    </ul>
    <address><{$e_copyright}></address>
  </div>
<!-- // フッター -->

<!-- スマートフォン用ドロワーメニュー -->
<div id="drawer" class="drawer">
  <!-- 閉じるボタン -->
  <div class="drawer__item drawer__item--close">
    <a href="" class="u-close">
      <i class="icon-lg-b icon-close"></i>
    </a>
  </div> 
  <!-- // 閉じるボタン -->
  <!-- 検索窓 -->
  <div class="drawer__item">
  <div class="drawer__item__name">
      <form action="./" method="GET">
        <input type="hidden" name="mode" value="srh" />
        <input type="text" name="keyword" placeholder="なにかお探しですか？" class="keyword keyword--small" />
        <button class="button button--blue button--small"><span>検索</span></button>
      </form>
    </div>
  </div>
  <!-- // 検索窓 -->

  <div class="drawer__item">
    <a href="./" class="drawer__item__name">
      <span class="drawer__item__name__icon--left"><i class="fa fa-home fa-fw fa-lg"></i></span>
      <span class="drawer__item__name__text">ホームへ戻る</span>
      <span class="drawer__item__name__icon--right"><i class="fa fa-chevron-right fa-fw"></i></span>
    </a>
  </div>

  <!-- カテゴリーリスト -->
  <{section name=num loop=$category}>
    <{if $smarty.section.num.first}>
      <div class="drawer__item drawer__item--accordion u-accordion">
        <a class="drawer__item__name u-accordion__name">
          <span class="drawer__item__name__icon--left"><i class="fa fa-list-ul fa-fw fa-lg"></i></span>
          <span class="drawer__item__name__text">カテゴリーから探す</span>
          <span class="drawer__item__name__icon--right"><i class="fa fa-chevron-down fa-fw"></i></span>
        </a>
        <ul>
          <li class="linklist__item">
            <a href="<{$home_url}>?mode=srh&cid=&keyword=">
              <span class="linklist__item__text">すべての商品</span>
            </a>
          </li>
    <{/if}>
          <li class="linklist__item">
            <a href="<{$category[num].link_url}>">
              <span class="linklist__item__text"><{$category[num].name}></span>
            </a>
          </li>
    <{if $smarty.section.num.last}>
        </ul>
      </div>
    <{/if}>
  <{/section}>
  <!-- // カテゴリーリスト -->
  <!-- グループリスト -->
  <{section name=num loop=$group}>
    <{if $smarty.section.num.first}>
      <div class="drawer__item drawer__item--accordion u-accordion">
        <a class="drawer__item__name u-accordion__name">
          <span class="drawer__item__name__icon--left"><i class="fa fa-tags fa-fw fa-lg"></i></span>
          <span class="drawer__item__name__text">グループから探す</span>
          <span class="drawer__item__name__icon--right"><i class="fa fa-chevron-down fa-fw"></i></span>
        </a>
        <ul>
    <{/if}>
          <li class="linklist__item">
            <a href="<{$group[num].link_url}>">
              <span class="linklist__item__text"><{$group[num].name}></span>
            </a>
          </li>
    <{if $smarty.section.num.last}>
        </ul>
      </div>
    <{/if}>
  <{/section}>
  <!-- // グループリスト -->

  <div class="drawer__item">
    <a href="<{$sk_url}>" class="drawer__item__name">
      <span class="drawer__item__name__icon--left"><i class="fa fa-question-circle fa-fw fa-lg"></i></span>
      <span class="drawer__item__name__text">ショップについて</span>
      <span class="drawer__item__name__icon--right"><i class="fa fa-chevron-right fa-fw"></i></span>
    </a>
  </div>

  <div class="drawer__item">
    <a href="<{$view_inq_url}>" class="drawer__item__name">
      <span class="drawer__item__name__icon--left"><i class="fa fa-envelope fa-fw fa-lg"></i></span>
      <span class="drawer__item__name__text">お問い合わせ</span>
      <span class="drawer__item__name__icon--right"><i class="fa fa-chevron-right fa-fw"></i></span>
    </a>
  </div>

  <div class="drawer__item drawer__item--accordion u-accordion">
    <a class="drawer__item__name u-accordion__name">
      <span class="drawer__item__name__icon--left"><i class="fa fa-user fa-fw fa-lg"></i></span>
      <span class="drawer__item__name__text">アカウント</span>
      <span class="drawer__item__name__icon--right"><i class="fa fa-chevron-down fa-fw"></i></span>
    </a>
    <ul style="display: none;">
      <li class="linklist__item">
        <a href="<{$members_regi_url}>">
          <span class="linklist__item__text">会員登録</span>
        </a>
      </li>
      <li class="linklist__item">
        <a href="<{$members_login_url}>">
          <span class="linklist__item__text">ログイン</span>
        </a>
      </li>
    </ul>
  </div>
</div>
<!-- スマートフォン用ドロワーメニュー -->
<!-- モーダルウィンドウ -->
<div id="overlay" class="overlay" style="display: none;"></div>
<!-- // モーダルウィンドウ -->

<!-- カラーミーキット初期JS -->
<script type="text/javascript">
  // viewport
  var viewport = document.createElement('meta');
  viewport.setAttribute('name', 'viewport');
  viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0');
  document.getElementsByTagName('head')[0].appendChild(viewport);
	
	$(function () {
    function window_size_switch_func() {
      if($(window).width() >= 768) {
        // product option switch -> table
        $('#prd-opt-table').html($('.prd-opt-table').html());
        $('#prd-opt-table table').addClass('table table-bordered');
        $('#prd-opt-select').empty();
      } else {
        // product option switch -> select
        $('#prd-opt-table').empty();
        if($('#prd-opt-select > *').size() == 0) {
          $('#prd-opt-select').append($('.prd-opt-select').html());
        }
      }
    }
    window_size_switch_func();
    $(window).load(function () {
      $('.history-unit').tile();
    });
    $(window).resize(function () {
      window_size_switch_func();
      $('.history-unit').tile();
    });
  });
</script>
<!-- // カラーミーキット初期JS -->

<!-- スマートフォン用メニュー機能 -->
<script  type="text/javascript">
// ドロワーメニュー
$(function(){
  var $content = $('#wrapper'),
  $drawer = $('#drawer'),
  $button = $('.u-toggle'),
  isOpen = false;
  $button.on('touchstart click', function () {
    if(isOpen) {
      $drawer.removeClass('open');
      $content.removeClass('open');
      isOpen = false;
    } else {
      $drawer.addClass('open');
      $content.addClass('open');
      isOpen = true;
    }
    $("#overlay").fadeIn("fast");
    return false;
  });
  $('.u-close, #overlay').on('touchstart click', function (e) {
    e.stopPropagation();
    if(isOpen) {
      e.preventDefault();
      $drawer.removeClass('open');
      $content.removeClass('open');
      $("#overlay").fadeOut("fast");
      isOpen = false;
    }
  });
});

// アコーディオンメニュー
$(function(){
  $('.u-accordion ul').hide();
  $('.u-accordion .u-accordion__name').click(function(e){
    $(this).toggleClass("u-ac--active");
    $(this).find(".fa-chevron-down").toggleClass("fa-rotate-180");
    $(this).next("ul").slideToggle('fast');
  });
});
</script>
<!-- // スマートフォン用メニュー機能 -->