<link rel="stylesheet" type="text/css" href="./js/jquery.bxslider/jquery.bxslider.css" />
<script type="text/javascript" src="./js/jquery.bxslider/jquery.bxslider.min.js"></script>

<div id="product" class="mar_t_20">
  <!-- パンくずリスト -->
  <div class="small-12 large-12 columns">
    <ul class="topicpath-nav inline txt_12">
      <li><a href="<{$home_url}>">ホーム</a></li>
      <{if $bid_name != ""}>
        <li>&nbsp;&gt;&nbsp;<a href="<{$bid_link}>"><{$bid_name}></a></li>
      <{/if}>
      <{if $sid_name != ""}>
        <li>&nbsp;&gt;&nbsp;<a href="<{$sid_link}>"><{$sid_name}></a></li>
      <{/if}>
    </ul>
    <{section name=cnt loop=$group_breadcrumb_list}>
      <ul class="topicpath-nav inline txt_12">
        <li><a href="<{$home_url}>">ホーム</a></li>
        <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}>
          <li>&nbsp;&gt;&nbsp;<a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"><{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li>
        <{/section}>
      </ul>
    <{/section}>
  </div>
  <!-- //パンくずリスト -->

  <{if $product.id != ""}>
    <form name="product_form" method="post" action="<{$cart_url}>">
      <h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn"><{$product_name}></h2>
      <div class="row">
        <!-- 商品画像 -->
        <div class="container-section product-image col-right col-xs-12 col-sm-6 col-lg-7 col">
          <div class="product-image-main">
            <ul class="bxslider">
              <{if $product.img_url != ""}>
                <li><img src="<{$product.img_url}>" class="mainImage" alt="<{$productlist[num].name}>" /></li>
              <{else}>
                <li><img src="https://img.shop-pro.jp/tmpl_img/68/prd_lst_noimage.png" class="mainImage" alt="<{$productlist[num].name}>" /></li>
              <{/if}>
              <{section name=num loop=$otherimg}>
                <{if $otherimg[num].url != ""}>
                  <li><img src="<{$otherimg[num].url}>" alt="サムネイル画像" /></li>
                <{/if}>
              <{/section}>
            </ul>
          </div>
          <{if $otherimg_num != 0}>
            <div class="product-image-thumb grid_row">
              <ul class="row custom-thumb">
                <{if $product.img_url != ""}>
                  <li class="col-lg-2 col thumb-unit">
                    <a data-slide-index="0" href="#"><img src="<{$product.img_url}>" class="thumb" alt="サムネイル画像" /></a>
                  </li>
                <{/if}>
                <{section name=num loop=$otherimg}>
                  <{if $otherimg[num].url != ""}>
                  <li class="col-lg-2 col thumb-unit">
                    <a data-slide-index="<{$smarty.section.num.iteration}>" href="#"><img src="<{$otherimg[num].url}>" class="thumb" alt="サムネイル画像" /></a>
                  </li>
                  <{/if}>
                <{/section}>
              </ul>
            </div>
          <{/if}>
        </div>
        <!-- //商品画像 -->

        <div class="product_info_block col-xs-12 col-sm-6 col-lg-5 col">
          <!-- 商品情報 -->
          <div class="product-spec-block">
            <table class="product-spec-table none_border_table table">
              <{if $product.model != ""}>
                <tr>
                  <th class="product-spec-title">型番</th>
                  <td><{$product.model}></td>
                </tr>
              <{/if}>
              <!--<{if $product.price_disp && $product.price != $product.sales}>
                <tr>
                  <th>定価</th>
                  <td><{$product.price}></td>
                </tr>
              <{/if}>-->
              <{if $members_login_flg == true && $product.discount_flg == true}>
                <tr>
                  <th>販売価格</th>
                  <td><{$product.regular_price}></td>
                </tr>
              <{/if}>
              <{if $product.soldout_flg == 0 }>
                <tr>
                  <th><{if $members_login_flg == true && $product.discount_flg == true}>会員価格<{else}>販売価格<{/if}></th>
                  <td>
                    <{* 販売価格 *}>
                    <div class="product_sales"><{$product.sales}></div>
                    <{* 割引率 *}>
                    <{if $members_login_flg == true && $product.discount_flg == true}>
                      <div class="product_discount"><{$product.discount_rate}>OFF!!</div>
                    <{/if}>
                  </td>
                </tr>
              <{/if}>
              <{if $product.stock_disp}>
                <tr>
                  <th>在庫状況</th>
                  <td><{$product.stock_str}></td>
                </tr>
              <{/if}>

              <!-- オプション情報（プルダウン形式） -->
              <{if $opt_url != ""}>
                <{if !$option_output_mode}>
                  <tbody id="prd_opt_select">
                    <{section name=num loop=$option}>
                      <tr class="product-order-form">
                        <th><{$option[num].name}></th>
                        <td>
                          <select name="<{$option[num].select_name}>">
                            <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
                          </select>
                        </td>
                      </tr>
                    <{/section}>
                  </tbody>
                <{/if}>
              <{/if}>
              <!-- // オプション情報（プルダウン形式） -->

              <!-- 名入れ -->
              <{if $product.product_text_titles}>
                <{foreach from=$product.product_text_titles key=key item=val}>
                  <tr class="product-order-form">
                    <th><{$val|escape}></th>
                    <td>
                      <input type="text" name="product_text[<{$key|escape}>]" value="" class="text-titles-list__detail-text" />
                    </td>
                  </tr>
                <{/foreach}>
              <{/if}>
              <!-- // 名入れ -->

              <!-- 数量 -->
              <{if $shop_stop_flg == false}>
                <tr>
                  <th>数量</th>
                  <td>
                    <{if $product.soldout_flg == 0 && $product.login_sale_flg == false}>
                      <input type="text" name="product_num" value="<{$product.init_num}>" class="product-cart-init-num" />
                      <div class="product-unit"><{$product.unit}></div>
                    <{else}>
                      <{if $product.soldout_flg == 1}>
                        <div class="product_soldout_msg"> - </div>
                      <{elseif $product.login_sale_flg == true}>
                        <div class="product-member-sale-msg">会員のみ購入できます</div>
                      <{/if}>
                    <{/if}>
                  </td>
                </tr>
              <{/if}>
              <!-- // 数量 -->
            </table>
            <!-- // 商品情報 -->

            <!-- オプション情報（表形式） -->
            <{if $opt_url != ""}>
              <{if $option_output_mode}>
                <div id="prd-opt-table" class="txt_c">
                  <{$option_table}>
                </div>
                <!-- 幅が狭いときはプルダウンになります（JSで表示・非表示） -->
                <div id="prd-opt-select">
                  <{section name=num loop=$option}>
                    <div class="col col-lg-6 col-sm-12 mar_b_20">
                      <div><{$option[num].name}></div>
                      <select name="<{$option[num].select_name}>">
                        <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
                      </select>
                    </div>
                  <{/section}>
                </div>
              <{/if}>
            <{/if}>
            <!-- // オプション情報（表形式） -->

            <!-- カートに入れるボタン -->
            <{if $product.soldout_flg == 0 && $shop_stop_flg == false && $product.login_sale_flg == false}>
              <div class="stock_error"></div>
              <div class="disable_cartin product_cart_area">
                <input class="btn btn-02 btn-xlg btn-block btn-addcart" type="submit" value="カートに入れる" />
              </div>
              <{if $easy_order_flg == true}>
                <div class="disable_quick">
                  <a href="<{$easy_order_url}>" class="btn btn-02 btn-xlg btn-block product-cart-btn product-quick-order-btn">クイック購入</a>
                </div>
              <{/if}>
            <{elseif $product.soldout_flg == 1}>
              <div class="disable_cartin product_cart_area">
                <input class="btn btn-02 btn-xlg btn-block" type="button" value="SOLD OUT" disabled="disabled" />
              </div>
            <{/if}>
            <!-- カートに入れるボタン -->

            <!-- 商品関連リンク -->
            <div class="col col-lg-12 mar_b_30">
              <ul class="mar_b_20">
                <{if $review_use_flg}>
                  <li><a href="<{$review_lst_url}>">レビューを見る(<{$review_item_num}>件)</a></li>
                  <li><a href="<{$review_send_url}>">レビューを投稿</a></li>
                <{/if}>
                <{if $opt_url != ""}>
                  <li><a href="<{$opt_url}>">オプションの値段詳細</a></li>
                <{/if}>
                <li><a href="<{$sk_url}>#info">特定商取引法に基づく表記（返品等）</a></li>
                <li><a href="<{$prod_teach_url}>">この商品を友達に教える</a></li>
                <li><a href="<{$prod_inq_url}>">この商品について問い合わせる</a></li>
                <li><a href="<{$keep_shopping_url}>">買い物を続ける</a></li>
              </ul>
              <ul class="unstyled">
                <li>
                  <{* line *}><{$line_button}>
                  <{* twitter *}><{twitter_tweet}>
                  <{* Facebook_like *}><span class="fb_adjust"><{facebook_like layout="button_count" width=90 action="like"}></span>
                </li>
                <li>
                  <{* カラメルお気に入り *}>
                  <{$calamel_favorite_link_button}>
                </li>
              </ul>
            </div>
            <!-- // 商品関連リンク -->
          </div>
        </div>
      </div><!-- // .row -->

      <div class="row">
        <!-- 商品説明文 -->
        <div class="product-order-exp clearfix col-lg-12 mar_t_50 mar_b_50">
          <{$product.explain}>
        </div>
        <!-- // 商品説明文 -->
      </div>

      <!-- 組合せ購入 -->
      <{if $together_product_num != 0}>
        <div class="together-block">
          <h2 class="pad_l_10 mar_b_20 txt_28 txt_fwn bor_b_1">あなたにおすすめの商品</h2>
          <ul class="prd-lst row unstyled">
            <{section name=num loop=$together_product}>
              <li class="col col-lg-4 col-sm-12 txt_c pad_20">
                <a href="<{$together_product[num].link_url}>">
                  <{if $together_product[num].img_url != ""}>
                    <img src="<{$together_product[num].img_url}>" alt="<{$together_product[num].name}>" class="show mar_auto mar_b_10" />
                  <{else}>
                    <img src="https://img.shop-pro.jp/tmpl_img/73/noimage.png" alt="<{$together_product[num].name}>" class="show mar_auto mar_b_10" />
                  <{/if}>
                </a>
                <a href="<{$together_product[num].link_url}>"><{$together_product[num].name}></a>
              </li>
            <{/section}>
          </ul>
        </div>
      <{/if}>
      <!-- // 組合せ購入 -->

      <{$product.info}>
    </form>
  <{else}>
    <{if $product.hide_flg == true}>
      <p class="mar_t_50 txt_c txt_18">この商品を閲覧するにはログインが必要です。</p>
    <{else}>
      <p class="mar_t_50 txt_c txt_18">現在、この商品は扱っておりません。</p>
    <{/if}>
  <{/if}>
</div>

<{* ↓↓ デバイスサイズ変更時にオプション選択フォームの表示切替に使用 ↓↓ *}>
<{if $option_output_mode}>
  <div class="hide">
    <div class="prd-opt-select">
      <{section name=num loop=$option}>
        <div class="col col-lg-6 col-sm-12 mar_b_20">
          <div><{$option[num].name}></div>
          <select name="<{$option[num].select_name}>">
            <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
          </select>
        </div>
      <{/section}>
    </div>
    <div class="prd-opt-table">
      <{$option_table}>
    </div>
  </div>
<{/if}>

<!-- bxSlider起動用（パラメータ追加はここでします。実行タイミングは.loadです） -->
<script type="text/javascript">
$(window).load(function(){
  $('.bxslider').bxSlider({
    slideWidth: 1000, //画像の横幅を指定
    swipeThreshold: 10,
    mode: 'horizontal',
    pagerCustom: '.custom-thumb',
    onSliderLoad: function(index){
      $('.container-section').css('opacity','1');
    }
  });
});
</script>
<!-- // bxSlider起動用（パラメータ追加ここでします） -->
<!-- サムネイル画像の高さ揃え -->
<script type="text/javascript">
  $(function () {
    $(window).load(function () {
      $('.thumb-unit').tile();
    });
    $(window).resize(function () {
      $('.thumb-unit').tile();
    });
  });
</script>
<!-- // サムネイル画像の高さ揃え -->