<!-- slick -->
<link rel="preload" as="script" href="https://img.shop-pro.jp/tmpl_js/89/slick.min.js" 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>

<!-- スライドショー（デザイン＞スライドショー） -->
<{if $tpl_name == "top"}>
<div><{* class="u-container"を追加すると横幅が狭まる *}>
  <{if $slideshow_html}>
  <{$slideshow_html|regex_replace:'/<link rel[\s\S]+?<\/script>/':''|regex_replace:'/<style>[\s\S]*?<\/style>/':''|replace:'src':'data-lazy'|regex_replace:'/((<div id="slider">.*?<img\s+))data-lazy="/s':'$1src="'}>

  <script type="text/javascript" defer>
    $(function() {
      //スライドショー（slick）のパラメータ
      $('#slider').slick({
        arrows: false,
        autoplay: true,
        autoplaySpeed: 8000,//CSSのアニメーション時間も併せて調整すること
        dots:true,
        fade: true,
        lazyLoad: 'progressive',
        pauseOnFocus: false,
        slidesToShow: 1,
        slidesToScroll: 1,
      });

      //slick キャプション
      $('#slider img').each(function(){
        var str= "";
        var ttl = $(this).attr("title");
        var link = $(this).parent().attr("href");
        if(ttl != "") str = str + '<h2 class="p-mv-caption__ttl">' + ttl + '</h2>';
        if(link != undefined) str = str + '<div class="p-mv-caption__link"><a href="' + link + '"><{$mv_link_label}></a></div>';
        str = '<div class="p-mv-caption">' + str + '</div>';
        //空またはundefinedが入っている場合で処理が変わる
        if(ttl != "") {
          if(link != undefined) {
            $(this).parent().parent().append(str);
          } else {
            $(this).parent().append(str);	
          }
        } else if(link != undefined) {
          $(this).parent().css('pointer-events','initial');
        }
      });

      //slickのアニメーション、SP時は実行しない
      if (window.matchMedia('(min-width:768px)').matches) {
        $('#slider .slick-slide').eq(0).addClass("is-animation");
        $('#slider').on('beforeChange',function(slick,currentSlide,nextSlide){
          len = $("#slider .slick-slide").length;
          if( nextSlide == len-1 ){
            $("#slider .slick-slide").eq(0).addClass("is-animation");
          }else{
            $("#slider .slick-slide").eq(nextSlide+1).addClass("is-animation");
          }
        });
        $('#slider').on('afterChange',function(slick,currentSlide){
          len = $("#slider .slick-slide").length;
          for(var i=0;i<len;i++) {
            if(i!=currentSlide['currentSlide']) $("#slider .slick-slide").eq(i).removeClass("is-animation");
          }
        });
        $('#slider .slick-dots li').on('click',function(){
          var index = $('#slider .slick-dots li').index(this);
          $('#slider .slick-slide').eq(index).addClass("is-animation");
        });
      }
    });
  </script>
  <{/if}>
</div>
<{/if}>
<!-- //スライドショー -->

<!-- お知らせ（ショップ情報＞お知らせ） -->
<{$info}>
<!-- //お知らせ -->

<!-- カテゴリー（商品＞カテゴリー） -->
<{if $category|@count != 0}>
<div class="c-category">
  <div class="u-container">	
    <div class="c-heading">
      <div class="c-heading__left">
        <h2 class="c-heading-ttl">CATEGORY</h2>
      </div>
    </div>
  </div>
  <div class="u-container-scroll">
    <ul class="c-category-list">
      <{foreach from=$category item=cate name=cate}>
      <li class="c-category-list__item">
        <a class="c-category-list__link" href="<{$cate.link_url}>">
          <{if $cate.img_url != ""}>
          <div class="c-category-list__img">
            <{* loading="lazy"をつけるとSP時に端が切れる *}>
            <img src="<{$cate.img_url}>" alt="<{$cate.name|strip_tags|escape:'html'}>カテゴリー">
          </div>
          <{/if}>
          <div class="c-category-list__ttl"><{$cate.name}></div>
        </a>
      </li>
      <{/foreach}>
      <!-- 以下不要
      <li class="c-category-list__item">
        <a class="c-category-list__link" href="">
          <div class="c-category-list__img">
            <div class="c-bulb">
              <svg role="img" aria-label="bulb icon"><use xlink:href="#bulb"></use></svg>コードを修正すれば、<span class="u-bold">GROUP（BRAND）</span>の第一階層などを表示することもできます。
            </div>
          </div>
        </a>
      </li> -->
    </ul>
  </div>
</div>
<{/if}>
<!-- //カテゴリー -->

<!-- おすすめ商品（商品＞おすすめ商品） -->
<{if $recommend|@count != 0}>
<div class="c-section">
  <div class="u-container">
    <div class="c-heading">
      <div class="c-heading__left">
        <h2 class="c-heading-ttl"><{$heading_recommend}></h2>
      </div>
    </div>
  </div>
  <div class="u-container-scroll">
    <ul class="c-item-list">
      <{section name=num loop=$recommend}>
      <li class="c-item-list__item u-fade-4item">
        <a href="<{$recommend[num].link_url}>">
          <div class="c-item-list__img">
            <{if $recommend[num].img_url != ""}>
            <{* loading="lazy"をつけるとSP時に端が切れる *}>
            <img src="<{$recommend[num].img_url}>" alt="<{$recommend[num].name|strip_tags|escape:'html'}>" />
            <{else}>
            <img src="https://img.shop-pro.jp/tmpl_img/86/no-image.jpg" alt="<{$recommend[num].name|strip_tags|escape:'html'}>" />
            <{/if}>
          </div>
          <div class="c-item-list__txt">
            <div class="c-item-list__ttl">
              <{$recommend[num].name}>
            </div>
            <{if !$recommend[num].soldout_flg}>
            <div class="c-item-list__price<{if $members_login_flg && $recommend[num].discount_flg}> is-discount<{/if}>">
              <{* 販売価格（ログイン時は会員価格） *}>              
              <{$recommend[num].price}><{if $recommend[num].option_price.min != $recommend[num].option_price.max}>～<{/if}>
              <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
              <{if $members_login_flg && $recommend[num].discount_flg}><span class="c-item-list__discount"><{$recommend[num].discount_rate}>OFF</span><{/if}>
            </div>
            <{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
            <{if $members_login_flg && $recommend[num].discount_flg}>
            <div class="c-item-list__price is-strikethrough">
              <{$recommend[num].regular_price}><{if $recommend[num].option_price.min_regular != $recommend[num].option_price.max_regular}>～<{/if}>		
            </div>
            <{/if}>
            <{else}>
            <{* 売り切れの表記 *}>
            <div class="c-item-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=$recommend[num].id}> aria-label="favorite button">
                <svg role="img" aria-hidden="true"><use xlink:href="#icon-heart"></use></svg>
              </button>
            </div>
          </div>
        </a>
      </li>
      <{/section}>
    </ul>
  </div>
</div>
<{/if}>
<!-- //おすすめ商品 -->

<!-- 売れ筋商品（商品＞売れ筋商品） -->
<{if $seller|@count != 0}>
<div class="c-section">
  <div class="u-container">
    <div class="c-heading">
        <div class="c-heading__left">
      <h2 class="c-heading-ttl"><{$heading_seller}></h2>
        </div>
    </div>
  </div>
  <div class="u-container-scroll">
    <ul class="c-item-list">
      <{section name=num loop=$seller}>
      <li class="c-item-list__item u-fade-4item">
        <a href="<{$seller[num].link_url}>">
          <div class="c-item-list__img">
            <{if $seller[num].img_url != ""}>
            <{* loading="lazy"をつけるとSP時に端が切れる *}>
            <img src="<{$seller[num].img_url}>" alt="<{$seller[num].name|strip_tags|escape:'html'}>" />
            <{else}>
            <img src="https://img.shop-pro.jp/tmpl_img/86/no-image.jpg" alt="<{$seller[num].name|strip_tags|escape:'html'}>" />
            <{/if}>
          </div>
          <div class="c-item-list__txt">         
            <div class="c-item-list__ttl">
              <{$seller[num].name}>
            </div>
            <{if !$seller[num].soldout_flg}>
            <div class="c-item-list__price<{if $members_login_flg && $seller[num].discount_flg}> is-discount<{/if}>">
              <{* 販売価格（ログイン時は会員価格） *}>
              <{$seller[num].price}><{if $seller[num].option_price.min != $seller[num].option_price.max}>～<{/if}>
              <{* 割引率（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
              <{if $members_login_flg && $seller[num].discount_flg}><span class="c-item-list__discount"><{$seller[num].discount_rate}>OFF</span><{/if}>
            </div>
            <{* 通常販売価格（ログイン時、通常販売価格と会員価格が異なる場合のみ） *}>
            <{if $members_login_flg && $seller[num].discount_flg}>
            <div class="c-item-list__price is-strikethrough">
              <{$seller[num].regular_price}><{if $seller[num].option_price.min_regular != $seller[num].option_price.max_regular}>～<{/if}>
            </div>
            <{/if}>
            <{else}>
            <{* 売り切れの表記 *}>
            <div class="c-item-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=$seller[num].id}> aria-label="favorite button">
                <svg role="img" aria-hidden="true"><use xlink:href="#icon-heart"></use></svg>
              </button>
            </div>
          </div>
        </a>
      </li>
      <{/section}>
    </ul>
  </div>
</div>
<{/if}>
<!-- //売れ筋商品 -->

<!-- 店長エリア（ショップ情報＞店長エリア） -->
<div class="p-manager c-section">
  <div class="p-manager-in">
    <div class="u-fade"><h2><{$manager_name}></h2></div>
    <div class="p-manager-in__memo u-fade"><{$manager_memo}></div>
    <div class="u-fade"><a href="<{$manager_url}>" class="c-btn-view"><{$manager_link_label}></a></div>
  </div>
</div>
<style>
.p-manager {
  background-image: url(<{$manager_img}>);
}
</style>
<!-- //店長エリア -->

<!-- フリースペース（ショップ情報＞フリースペース） -->
<{$free_space}>
<!-- //フリースペース -->

<script type="text/javascript" defer>
$(function(){
  $(window).scroll(function (){
    $('.u-fade, .u-fade-3item, .u-fade-4item').each(function(){
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight + 5){
        $(this).addClass('is-scroll');
      }
    });
  });
});
</script>
