<{* 見出し変更 *}>
<{assign var="stock_label" value="在庫："}>
<{assign var="heading_explain" value="DETAIL"}>
<{assign var="heading_together" value="RECOMMEND"}>
<{assign var="heading_review" value="REVIEW"}>

<!-- slick -->
<link rel="preload" href="https://img.shop-pro.jp/tmpl_js/89/slick.min.js" as="script" crossorigin="anonymous" />
<script type="text/javascript" src="https://img.shop-pro.jp/tmpl_js/89/slick.min.js" defer></script>
<link rel="preload" as="style" href="https://img.shop-pro.jp/tmpl_js/89/slick.css" onload="this.onload=null;this.rel='stylesheet'" />
<link rel="preload" as="style" href="https://img.shop-pro.jp/tmpl_js/89/slick-theme.css" onload="this.onload=null;this.rel='stylesheet'" />
<noscript>
  <link rel="stylesheet" href="https://img.shop-pro.jp/tmpl_js/89/slick.css" />
  <link rel="stylesheet" href="https://img.shop-pro.jp/tmpl_js/89/slick-theme.css" />
</noscript>

<div class="p-product">
  <!-- パンくずリスト -->
  <div class="c-breadcrumbs u-container">
    <ul class="c-breadcrumbs-list">
      <li class="c-breadcrumbs-list__item">
        <a href="<{$home_url}>">
          <{$breadcrumbs_top}>
        </a>
      </li>
      <{if $bid_name != ""}>
      <li class="c-breadcrumbs-list__item">
        <a href="<{$bid_link}>">
          <{$bid_name}>
        </a>
      </li>
      <{/if}>
      <{if $sid_name != ""}>
      <li class="c-breadcrumbs-list__item">
        <a href="<{$sid_link}>">
          <{$sid_name}>
        </a>
      </li>
      <{/if}>
    </ul>
  </div><!-- /.c-breadcrumbs -->
  <!-- //パンくずリスト -->

  <{if $product.id != ""}>
  <div class="p-product u-container">
    <form name="product_form" method="post" action="<{$cart_url}>">
      <div class="p-product-main">
        <!-- 商品画像 -->
        <div class="p-product-img">
          <div class="p-product-img__main js-images-slider">
            <div class="p-product-img__main-item">
              <{if $product.img_url != ""}>
              <img src="<{$product.img_url}>" alt="<{$product.name|strip_tags|escape:'html'}>" />
              <{else}>
              <img src="https://img.shop-pro.jp/tmpl_img/86/no-image.jpg" alt="<{$product.name|strip_tags|escape:'html'}>" />
              <{/if}>
            </div>
            <{if $otherimg_num != 0}>
            <{section name=num loop=$otherimg}>
              <{if $otherimg[num].url != ""}>
              <div class="p-product-img__main-item">
                <img data-lazy="<{$otherimg[num].url}>" alt="<{$product.name|strip_tags|escape:'html'}>" />
              </div>
              <{/if}>
            <{/section}>
            <{/if}>
          </div>
          <{if $otherimg_num != 0}>
          <div class="p-product-img__thumb">
            <div class="u-overflow-slide">
              <ul class="p-product-thumb-list">
                <{if $product.img_url != ""}>
                <li class="p-product-thumb-list__item">
                  <div class="p-product-thumb-list__img">
                    <img src="<{$product.img_url}>" alt="<{$product.name|strip_tags|escape:'html'}>" />
                  </div>
                </li>
                <{/if}>
                <{section name=num loop=$otherimg}>
                  <{if $otherimg[num].url != ""}>
                  <li class="p-product-thumb-list__item">
                    <div class="p-product-thumb-list__img">
                      <img src="<{$otherimg[num].url}>" alt="<{$product.name|strip_tags|escape:'html'}>" />
                    </div>
                  </li>
                  <{/if}>
                <{/section}>
              </ul>
            </div>
          </div>
          <{/if}>
        </div>
        <!-- // 商品画像 -->
        <!-- 商品情報 -->
        <div class="p-product-info">
          <h2 class="p-product-info__ttl">
            <{$product_name|strip_tags}>
          </h2>
          <!-- 型番 -->
          <div class="p-product-info__id">
            <{$product.model}>
          </div>
          <!-- // 型番 -->
          <!-- 価格・定価 -->				
          <div class="p-product-price">
          <{if $option_price.min != $option_price.max}>
            <{assign var="price_from" value="～"}>
          <{else}>
            <{assign var="price_from" value=""}>
          <{/if}>
          <{if $members_login_flg == true && $product.discount_flg == true}>
            <div class="p-product-price__sell">
            <{if $product.sales|regex_replace:"/円\(.*\)/":"x" == $product.sales}>
              <{$product.sales|regex_replace:'/円/':'<span class="u-font-small">円</span>'}><{if $price_from != ""}><span class="u-font-small"><{$price_from}></span><{/if}>
            <{else}>
							<{$product.sales|regex_replace:'/円\(/':'<span class="u-font-small">円('|regex_replace:'/\)/':')</span>'}><{if $price_from != ""}><span class="u-font-small"><{$price_from}></span><{/if}>
            <{/if}>
              <span class="p-product-price__discount"><{$product.discount_rate}>OFF</span>
            </div>
          <{else}>
            <div class="p-product-price__sell">
            <{if $product.sales|regex_replace:"/円\(.*\)/":"x" == $product.sales}>
              <{$product.sales|regex_replace:'/円/':'<span class="u-font-small">円</span>'}><{if $price_from != ""}><span class="u-font-small"><{$price_from}></span><{/if}>
						<{else}>
              <{$product.sales|regex_replace:'/円\(/':'<span class="u-font-small">円('|regex_replace:'/\)/':')</span>'}><{if $price_from != ""}><span class="u-font-small"><{$price_from}></span><{/if}>
            <{/if}>
            </div>
          <{/if}>
          <{if $members_login_flg == true && $product.discount_flg == true}>
            <div class="p-product-price__normal is-strikethrough">
              通常価格：<{$product.regular_price}><{if $option_price.min_regular != $option_price.max_regular}>～<{/if}>
            </div>
          <{/if}>
          <{if $product.price_disp}>
            <div class="p-product-price__list-price">
              定価：<{$product.price}>
            </div>
          <{/if}>
          </div>
          <!-- // 価格・定価 -->
          <div class="p-product-sexpl">
            <{$product.simple_explain}>
          </div>
          <!-- オプション情報 -->
          <{if $opt_url != ""}>
          <div class="p-product-option">
            <{if $option_output_mode}>
            <{* 表形式 *}>
            <div class="p-product-option-tbl" id="prd-opt-table">
              <{$option_table}>
            </div>
            <!-- コメントアウト
            <div class="p-product-option-select" id="prd-opt-select">
              <{section name=num loop=$option}>
              <div class="p-product-option-select__box">
                <div class="p-product-option-select__ttl">
                  <{$option[num].name}>
                </div>
                <select name="<{$option[num].select_name}>" class="product_cart_select">
                  <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
                </select>
              </div>
              <{/section}>
            </div>
            -->
            <{else}>
            <{* セレクトメニュー *}>
            <div class="p-product-option-select">
              <{section name=num loop=$option}>
              <div class="p-product-option-select__box">
                <div class="p-product-option-select__ttl">
                  <{$option[num].name}>
                </div>
                <select name="<{$option[num].select_name}>" aria-label="<{$option[num].name}>" class="product_cart_select">
                  <{html_options values=$option_value[num].id output=$option_value[num].name selected=$key}>
                </select>
              </div>
              <{/section}>
            </div>
            <{/if}>
          </div><!-- /.p-product-option -->
          <{/if}>
          <!-- // オプション情報 -->
          <!-- 名入れ設定 -->
          <{if $product.product_text_titles}>
          <div class="p-product-name">
            <{foreach from=$product.product_text_titles key=key item=val}>
            <div class="p-product-name__ttl">
              <{$val|escape}>
            </div>
            <div class="p-product-name__body">
              <input type="text" name="product_text[<{$key|escape}>]" value="" />
            </div>
            <{/foreach}>
          </div>
          <{/if}>
          <!-- //名入れ設定 -->
          <!-- 購入フォーム -->
          <div class="p-product-form">
            <{if !$shop_stop_flg && $product.soldout_flg == 0 && !$product.login_sale_flg}>
            <div class="p-product-form__quantity" id="quantity">購入数</div>
            <div class="p-product-form-stock">
              <div class="p-product-form-stock__input">
                <a href="<{$num_dw_url}>" class="p-product-form-stock__down" aria-label="decrease"><svg role="img" aria-hidden="true"><use href="#stock-minus"></use></svg></a>
                <input type="text" aria-labelledby="quantity" name="product_num" value="<{$product.init_num}>" />
                <a href="<{$num_up_url}>" class="p-product-form-stock__up" aria-label="increase"><svg role="img" aria-hidden="true"><use href="#stock-plus"></use></svg></a>
              </div>
              <span class="p-product-form-stock__unit"><{$product.unit}></span>
              <{if $product.stock_disp}>
              <div class="p-product-form-stock__stock">
                <{$stock_label}><{$product.stock_str}>
              </div>
              <{/if}>
            </div>
            <{/if}>
            <div class="p-product-form-btn">
              <div class="p-product-form-btn__cart">
              <{if $product.soldout_flg == 0 && !$shop_stop_flg && !$product.login_sale_flg}>
              <{if $is_enable_async_cart_in_pc}>
                <button type="submit" class="c-btn-cart">
                  <svg role="img" aria-hidden="true"><use href="#icon-cart"></use></svg>カートに入れる
                </button>
              <{else}>
                <div class="disable_cartin">
                  <button class="c-btn-cart" type="submit">
                    <svg role="img" aria-hidden="true"><use href="#icon-cart"></use></svg>カートに入れる
                  </button>
                </div>
              <{/if}>

              <{else}>
              <{if $product.soldout_flg}>
                <button class="c-btn-cart is-soldout" type="button" disabled="disabled">
                  SOLD OUT
                </button>
              <{elseif $product.login_sale_flg}>
                <div class="c-btn-cart is-membersonly">
                  <svg role="img" aria-hidden="true"><use href="#icon-cart"></use></svg>会員のみ購入できます
                </div>
              <{/if}>
              <{/if}>
              <{if $shop_stop_flg}>
                <button class="c-btn-cart is-disabled" type="button" disabled="disabled">
                  休止中
                </button>
              <{/if}>
              </div>

              <{* お気に入り追加ボタン *}>
              <div class="c-btn-favorite">
                <button type="button" aria-label="favorite button" <{favorite_button_attribute added_class="is-added" product_id=$product.id}>>
                  <svg role="img" aria-hidden="true"><use xlink:href="#icon-heart"></use></svg>
                </button>
              </div>
            </div><!-- /.p-product-form-btn -->
            <p class="p-product-form__error-message stock_error"></p>
          </div><!-- /.p-product-form -->
          <!-- // 購入フォーム -->
          <!-- 商品用ソーシャルボタン -->
          <!--<ul class="p-product-sns-list">
            <li class="p-product-sns-list__item">
              <{* line *}><{$line_button}>
            </li>
            <li class="p-product-sns-list__item">
              <{* Facebook_like *}><{facebook_like layout="button_count" width=110 action="like"}>
            </li>
            <li class="p-product-sns-list__item">
              <{* twitter *}><{twitter_tweet}>
            </li>
          </ul>-->
          <!-- // 商品用ソーシャルボタン -->
          <ul class="p-product-link-list">
						<{* プルダウン時のみ表示 *}>
            <{if $opt_url != "" && !$option_output_mode}>
            <li class="p-product-link-list__item">
              <a href="<{$opt_url}>">オプションの価格・在庫詳細</a>
            </li>
            <{/if}>
            <li class="p-product-link-list__item">
              <a href="<{$sk_url}>#return">返品について</a>
            </li>
            <li class="p-product-link-list__item">
              <a href="<{$sk_url}>#info">特定商取引法に基づく表記</a>
            </li>
            <li class="p-product-link-list__item">
              <a href="<{$prod_inq_url}>">この商品について問い合わせる</a>
            </li>
            <!--<li class="p-product-link-list__item">
              <a href="<{$keep_shopping_url}>">買い物を続ける</a>
            </li>-->
          </ul>
        </div><!-- /.p-product-info -->
      </div><!-- /.p-product-main -->
      <!-- // 商品情報・カート -->
      <div class="p-product-detail">
        <!-- 商品説明 -->
        <div class="p-product-explain">
          <h3 class="p-product__ttl">
            <{$heading_explain}>
          </h3>
          <div class="p-product-explain__body">
            <{$product.explain}>
          </div>
        </div>
        <!-- //商品説明 -->
      </div><!-- /.p-product-detail -->
      <!-- 組合せ購入 -->
      <{if $together_product_num != 0}>
      <div class="p-product-recommend">
        <h3 class="p-product__ttl">
          <{$heading_together}>
        </h3>
        <ul class="p-product-recommend-list">
          <{section name=num loop=$together_product}>
          <li class="p-product-recommend-list__item">
            <a href="<{$together_product[num].link_url}>">
              <div class="p-product-recommend-list__img">
              <{if $together_product[num].img_url != ""}>
                <img src="<{$together_product[num].img_url}>" alt="<{$together_product[num].name|strip_tags|escape:'html'}>" class="together_product_list_img show item_img" loading="lazy" loading="lazy" />
              <{else}>
                <img src="https://img.shop-pro.jp/tmpl_img/76/noimage.png" alt="<{$together_product[num].name|strip_tags|escape:'html'}>" class="together_product_list_img show item_img" loading="lazy" />
              <{/if}>
              </div>
              <div class="p-product-recommend-list__ttl">
                <{$together_product[num].name}>
              </div>
              <{if !$together_product[num].soldout_flg}>
              <div class="p-product-recommend-list__price<{if $members_login_flg && $together_product[num].discount_flg}> is-discount<{/if}>">
                <{* 販売価格（ログイン時は会員価格） *}>
                <{$together_product[num].price}><{if $together_product[num].option_price.min != $together_product[num].option_price.max}>～<{/if}>
                <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
                <{if $members_login_flg && $together_product[num].discount_flg}><span class="p-product-recommend-list__discount"><{$together_product[num].discount_rate}>OFF</span><{/if}>
              </div>
              <{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
              <{if $members_login_flg && $together_product[num].discount_flg}>
              <div class="p-product-recommend-list__price is-strikethrough">
                <{$together_product[num].regular_price}><{if $together_product[num].option_price.min_regular != $together_product[num].option_price.max_regular}>～<{/if}>
              </div>
              <{/if}>
              <{else}>
              <{* 売り切れの表記 *}>
              <div class="p-product-recommend-list__price is-soldout">
                SOLD OUT
              </div>
              <{/if}>
              <{* お気に入り追加ボタン *}>
              <div class="c-btn-favorite">
                <button type="button" <{favorite_button_attribute added_class="is-added" product_id=$together_product[num].id}>>
                  <svg role="img" aria-hidden="true"><use xlink:href="#icon-heart"></use></svg>
                </button>
              </div>
              <{* 簡易説明文 *}>
              <{if $together_product[num].s_expl != ""}>
              <div class="p-product-recommend-list__expl">
                <{$together_product[num].s_expl}>
              </div>
              <{/if}>
            </a>
          </li>
          <{/section}>
        </ul>
      </div>
      <{/if}><!-- /.p-product-other -->
      <!-- //組合せ購入 -->
      <!-- レビュー -->
      <{if $review_use_flg}>
      <div class="p-product-review">
        <h3 class="p-product__ttl">
          <{$heading_review}>
        </h3>
        <{section name=num loop=$reviewlist}>
        <div class="p-product-review__item">
          <div class="p-product-review__heading">
            <div class="p-product-review__rates">
            <{section name=star start=0 loop=$review_star_num step=1}>
              <{if $reviewlist[num].star > $smarty.section.star.index}>
              <svg class="p-product-review__rate is-color" role="img" aria-hidden="true"><use xlink:href="#star"></use></svg>
              <{else}>
              <svg class="p-product-review__rate" role="img" aria-hidden="true"><use xlink:href="#star"></use></svg>
              <{/if}>
            <{/section}>
            </div>
            <{if $reviewlist[num].title != ""}>
            <div class="p-product-review__ttl">
              <{$reviewlist[num].title}>
            </div>
            <{/if}>
            <ul class="p-product-review-info">
              <li class="p-product-review-info__item is-type">
                <{if $reviewlist[num].nickname != ""}><{$reviewlist[num].nickname}> <{/if}>
                <{if $reviewlist[num].nendai != ""}> <{$reviewlist[num].nendai}> <{/if}>
                <{if $reviewlist[num].sex != ""}> <{$reviewlist[num].sex}> <{/if}>
              </li>
              <li class="p-product-review-info__item is-date">
                <{$reviewlist[num].date}>
              </li>
            </ul>
          </div>
          <{if $reviewlist[num].img_url != ""}>
          <div class="p-product-review__img">
            <img src="<{$reviewlist[num].img_url}>" alt="<{$reviewlist[num].title|strip_tags|escape:'html'}>" loading="lazy" />
          </div>
          <{/if}>
          <div class="p-product-review__body">
            <{$reviewlist[num].comment}>
          </div>
          <!-- ショップからの返信コメント-->
          <{if $reviewlist[num].res_date != ""}>
          <div class="p-product-review-reply">
            <div class="p-product-review-reply__ttl">
              ショップからのコメント
            </div>
            <div class="p-product-review-reply__body">
              <{$reviewlist[num].res_comment}>
            </div>
            <div class="p-product-review-reply__date">
              <{$reviewlist[num].res_date}>
            </div>
          </div>
          <{/if}>
        </div>
        <{/section}>
        <div class="p-product-review__btn">
          <a href="<{$review_send_url}>" class="c-btn is-arrow">
            WRITE REVIEW
          </a>
        </div>
      </div><!-- /.p-product-review -->
      <{/if}>
      <!-- //レビュー -->

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

  <{* ↓↓ デバイスサイズ変更時にオプション選択フォームの表示切替に使用 ↓↓ *}>
  <{if $option_output_mode}>
  <div class="hide">
    <div class="prd-opt-select">
      <{section name=num loop=$option}>
      <div class="p-product-option-select__box">
        <div class="p-product-option-select__ttl">
          <{$option[num].name}>
        </div>
        <select name="<{$option[num].select_name}>" class="product_cart_select">
          <{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}>
</div><!-- /.p-product（大外） -->

<script type="text/javascript" defer>
$(function () {
  // サムネイル画像のslick連動
  const slider = ".js-images-slider";
  const mainItem = ".p-product-img__main-item";
  const thumbnailItem = ".p-product-thumb-list__item";

  $(thumbnailItem).each(function() {
    let index = $(thumbnailItem).index(this);
    $(this).attr("data-index",index);
  });

  $(slider).on('init',function(slick) {
    let index = $(mainItem+".slick-slide.slick-current").attr("data-slick-index");
    $(thumbnailItem+'[data-index="'+index+'"]').addClass("is-current");
  });

  $(slider).slick( {
    autoplay: false,
    arrows: true,
    infinite: true,
		lazyLoad: 'progressive',
    touchThreshold: 8,
  });

  $(thumbnailItem).on('click',function() {
    let index = $(this).attr("data-index");
    $(slider).slick("slickGoTo",index,false);
  });

  $(slider).on('beforeChange',function(event,slick, currentSlide,nextSlide){
    $(thumbnailItem).each(function() {
      $(this).removeClass("is-current");
    });
    $(thumbnailItem+'[data-index="'+nextSlide+'"]').addClass("is-current");
  });
});
</script>

<{* 構造化データ urlは $rss_urlを加工して使っている *}>
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "<{$product.name|strip_tags}>",
  "description": "<{$product.explain|strip_tags|escape:'javascript'}>",
  "sku": "<{$product.model}>",
  "image": "<{$product.img_url|strip_tags}>",
  "offers": {
    "@type": "Offer",
    "url": "<{$rss_url|replace:"?mode=rss":""}>?pid=<{$product.id}>",
    <{if $product.soldout_flg == 1}>
    "availability": "https://schema.org/SoldOut",
    <{else}>
    "availability": "https://schema.org/InStock",
    <{/if}>
    "price": "<{$product.sales|regex_replace:"/[^0-9.]/":""}>",
    "priceCurrency": "JPY"
  }
}
</script>