{block:NotLoadItemsPage}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
{FaviconTag}
{CanonicalTag}
{block:IndexPage}{HeadLinkNextPrevTag}{/block:IndexPage}
{block:ItemPage}{MetaItemInfoTag}{/block:ItemPage}
{block:NotItemPage}{MetaShopInfoTag}{/block:NotItemPage}
{JQueryTag}
<script src="{BASEURL}/js/jquery.bottom-1.0.js"></script>
<script src="{BASEURL}/js/change_status.js?{UpdateTime}"></script>
<link rel="stylesheet" href="/css/shopTemplate/common.css?{UpdateTime}">
<link rel="stylesheet" href="https://basefile.akamaized.net/magnet-official-ec/5cd2a30027e3f/lightbox.min.css">
<link rel="stylesheet" href="https://git.bagooon.com/root/d-shop/pages/style.css">
<title>{PageTitle}</title>
{GoogleAnalyticsTag}
<meta name="BASE-Theme-Name" content="はんなり">
<meta name="BASE-Theme-Version" content="1">
<meta name="color:btnBg" content="#EFB39C" label="ボタン色">
<meta name="color:btnTxt" content="#fff" label="ボタンテキスト色">
<meta name="color:headerbg" content="#fff" label="ヘッダー背景色">
<meta name="color:headertext" content="#6A5249" label="ヘッダー文字色">
<meta name="color:footertext" content="#6A5249" label="フッター文字色">
<style>
.c-button__anchor,
.p-pickup .slick-dots li button::before,
.p-categoy__title::before,
.c-headlineA::before,
.btnCustom,
.inquirySection #buttonLeave,
#buyButton button,
.p-recommend::before,
.p-footer__information,
.p-footer::before,
.p-btnBuy{
color: {color:btnTxt};
background: {color:btnBg};
}
.p-search__submit svg{
fill: #000;
}
.u-colorMain,
.c-categorysmall__item,
#about .blog_publish{
color: {color:btnBg};
}
.p-price__num--soldout,
.p-price__rate--soldout,
#postageOpen,
.main #about .read_more a{
color: {TextColor} !important;
}
#widgetSection .text{
color: #000;
}
.p-search,
.p-search--header{
border-color: {color:TextColor};
}
.p-news{
border-bottom-color: {color:btnBg};
}
.p-hamburger p, .p-hamburger:before, .p-hamburger:after{
background: {color:TextColor};
}
.p-header, .p-nav__item>a::before, .p-nav__item:hover .p-nav__item__hover, nav #appsItemCategoryTag .appsItemCategoryTag_child{
background: {color:headerbg};
}
.p-nav__item>a, nav #appsItemCategoryTag .appsItemCategoryTag_child a{
color: {color:headertext};
}
.p-footer,
.p-footer .p-nav__item>a{
color: {color:footertext};
}
#telnumValid img{
background: none;
}
.social a{
background: #fff;
width: 32px;
height: 32px;
padding: 3px 6px;
border-radius: 16px;
display: block !important;
}
.social a img{
width: 100% !important;
margin: 0 !important;
}
.telnumValid:hover .telnumValid__txt{
color: #000;
}
.NoItemInquiry{
text-decoration: underline;
}
.NoItemInquiry:hover{
text-decoration: none;
}
.p-item__title{
word-wrap: break-word;
word-break: break-all;
}
@media screen and (max-width: 767px) {
.p-hamburger p::before, .p-hamburger p::after{
background: {color:headertext};
}
.p-nav{
background: {color:headerbg};
}
}
</style>
{block:Hidden}
<meta name="image:keyvisual" content="https://basefile.akamaized.net/magnet-official-ec/5c6bcb6bebbfe/top_default.jpg" label="TOP画像の設定">
<meta name="if:Exlink" content="1" label="外部リンクを利用する">
<meta name="text:Exlink_ttl" content="公式サイト" label="外部リンクタイトル">
<meta name="text:Exlink_url" content="https://base-hannari.tumblr.com/ask" label="外部リンクURL">
<meta name="if:ShowPickup" content="1" label="いち押し商品を利用する">
<meta name="if:Pickup_item1" content="1" label="1枚目を利用する">
<meta name="image:Pickup_item1_img" content="" label="1枚目 - 商品画像">
<meta name="text:Pickup_item1_url" content="" label="1枚目 - 商品URL">
<meta name="text:Pickup_item1_ttl" content="いち押し商品のタイトル1" label="1枚目 - 商品タイトル">
<meta name="text:Pickup_item1_desc" content="いち押し商品についての説明が入ります。ぜひこの場所を効果的にご利用ください。" label="1枚目 - 商品説明">
<meta name="if:Pickup_item2" content="1" label="2枚目を利用する">
<meta name="image:Pickup_item2_img" content="" label="2枚目 - 商品画像">
<meta name="text:Pickup_item2_url" content="" label="2枚目 - 商品URL">
<meta name="text:Pickup_item2_ttl" content="いち押し商品のタイトル2" label="2枚目 - 商品タイトル">
<meta name="text:Pickup_item2_desc" content="いち押し商品についての説明が入ります。ぜひこの場所を効果的にご利用ください。" label="2枚目 - 商品説明">
<meta name="if:Pickup_item3" content="1" label="3枚目を利用する">
<meta name="image:Pickup_item3_img" content="" label="3枚目 - 商品画像">
<meta name="text:Pickup_item3_url" content="" label="3枚目 - 商品URL">
<meta name="text:Pickup_item3_ttl" content="いち押し商品のタイトル3" label="3枚目 - 商品タイトル">
<meta name="text:Pickup_item3_desc" content="いち押し商品についての説明が入ります。ぜひこの場所を効果的にご利用ください。" label="3枚目 - 商品説明">
<meta name="if:ShowRecommend" content="1" label="おすすめ商品を利用する">
<meta name="if:Recommend_item1" content="1" label="1枚目を利用する">
<meta name="image:Recommend_item1_img" content="" label="1枚目 - 商品画像">
<meta name="text:Recommend_item1_url" content="" label="1枚目 - 商品URL">
<meta name="text:Recommend_item1_ttl" content="おすすめ商品のタイトル1" label="1枚目 - 商品タイトル">
<meta name="text:Recommend_item1_price" content="" label="1枚目 - 商品価格">
<meta name="if:Recommend_item2" content="1" label="2枚目を利用する">
<meta name="image:Recommend_item2_img" content="" label="2枚目 - 商品画像">
<meta name="text:Recommend_item2_url" content="" label="2枚目 - 商品URL">
<meta name="text:Recommend_item2_ttl" content="おすすめ商品のタイトル2" label="2枚目 - 商品タイトル">
<meta name="text:Recommend_item2_price" content="" label="2枚目 - 商品価格">
<meta name="if:Recommend_item3" content="1" label="3枚目を利用する">
<meta name="image:Recommend_item3_img" content="" label="3枚目 - 商品画像">
<meta name="text:Recommend_item3_url" content="" label="3枚目 - 商品URL">
<meta name="text:Recommend_item3_ttl" content="おすすめ商品のタイトル3" label="3枚目 - 商品タイトル">
<meta name="text:Recommend_item3_price" content="" label="3枚目 - 商品価格">
<meta name="if:ShowInfo" content="1" label="案内情報(ニュース)を利用する">
<meta name="if:ShowInfo_item1" content="1" label="1行目を利用する">
<meta name="text:ShowInfo_item1_date" content="2018.04.03" label="1行目 - 投稿日時">
<meta name="text:ShowInfo_item1_ttl" content="お知らせなどが入ります。" label="1行目 - タイトル">
<meta name="text:ShowInfo_item1_url" content="" label="1行目 - URL">
<meta name="if:ShowInfo_item2" content="1" label="2行目を利用する">
<meta name="text:ShowInfo_item2_date" content="2018.04.02" label="2行目 - 投稿日時">
<meta name="text:ShowInfo_item2_ttl" content="お知らせなどが入ります。" label="2行目 - タイトル">
<meta name="text:ShowInfo_item2_url" content="" label="2行目 - URL">
<meta name="if:ShowInfo_item3" content="1" label="3行目を利用する">
<meta name="text:ShowInfo_item3_date" content="2018.04.01" label="2行目 - 投稿日時">
<meta name="text:ShowInfo_item3_ttl" content="お知らせなどが入ります。" label="3行目 - タイトル">
<meta name="text:ShowInfo_item3_url" content="" label="3行目 - URL">
<meta name="text:freeSpace" content="フリースペースです。バナーやお知らせなど自由に利用できます。（aタグ、imgタグ等も可）" label="フリースペース">
<meta name="image:About_img" content="https://basefile.akamaized.net/magnet-official-ec/5c6bd2c9157d3/about_default.jpg" label="ABOUTページ - メイン画像">
{/block:Hidden}
{BackgroundTag}
</head>
<body style="color: {TextColor}">
<input id="base_url" type="hidden" value="{BASEURL}" />
<div class="l-wrap {block:ShopPublic}{block:IndexPage}{block:NoIndexPageCategory}{block:NoIndexPageSearch}u-headerscroll{/block:NoIndexPageSearch}{/block:NoIndexPageCategory}{/block:IndexPage}{/block:ShopPublic}">
<header class="l-header p-header">
<div class="p-header__inner u-flex">
<div class="p-header__sitename">
<h1><a href="{IndexPageURL}">{LogoTag}</a></h1>
</div>
<nav class="l-nav">
<ul class="p-nav">
<li class="p-nav__item"><a href="{IndexPageURL}">ホーム</a></li>
<li class="p-nav__item"><a href="{AboutPageURL}">お店について</a></li>
{block:AppsItemCategory}
<li class="p-nav__item">
<a>カテゴリー</a>
<div class="p-nav__item__hover">{AppsItemCategoryCategoriesTag}</div>
</li>
{/block:AppsItemCategory}
{block:AppsBlog}
<li class="p-nav__item"><a href="{BlogPageURL}">読み物</a></li>
{/block:AppsBlog}
<li class="p-nav__item"><a href="{ContactPageURL}">お問い合わせ</a></li>
{block:if-Exlink}
<li class="p-nav__item">
<a href="{block:text-Exlink_url}{text:Exlink_url}{/block:text-Exlink_url}" target="_blank">
{block:text-Exlink_ttl}{text:Exlink_ttl}{/block:text-Exlink_ttl}
</a>
</li>
{/block:if-Exlink}
<li class="p-nav__item u-sp p-search--header">
<form class="p-search__form" role="search" method="get" action="{SearchPageURL}">
<input class="p-search__input u-search__input--nav" type="text" name="q" id="s" placeholder="検索する" value="{IndexPageSearch}">
<button class="p-search__submit" type="submit">
<svg id="search_icon" data-name="search_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><title>search</title><path d="M267.6,253.1l-72.7-72.7a91.4,91.4,0,1,0-12.3,13.1l72.3,72.3ZM122,198.1a74.3,74.3,0,1,1,74.3-74.2A74.4,74.4,0,0,1,122,198.1Z"/></svg>
</button>
</form>
</li>
<li class="p-nav__item">
<ul class="p-menu__nav__icon u-flex">
{block:ShopInstagramId}
<li class="p-menu__nav__icon__item u-sp">
<a href="http://instagram.com/{ShopInstagramId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa509376d28b/icon_sns_i.png"></a>
</li>
{/block:ShopInstagramId}
{block:ShopTwitterId}
<li class="p-menu__nav__icon__item u-sp">
<a href="https://twitter.com/{ShopTwitterId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa509466b494/icon_sns_t.png"></a>
</li>
{/block:ShopTwitterId}
{block:ShopFacebookId}
<li class="p-menu__nav__icon__item u-sp">
<a href="https://facebook.com/{ShopFacebookId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa50924bc54b/icon_sns_f.png"></a>
</li>
{/block:ShopFacebookId}
{block:ShopAmebaId}
<li class="p-menu__nav__icon__item u-sp">
<a href="http://ameblo.jp/{ShopAmebaId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa508dcce502/icon_sns_a.png"></a>
</li>
{/block:ShopAmebaId}
<li>
{BASEMenuTag}
</li>
</ul>
</li>
</ul>
</nav>
<div class="p-hamburger u-sp js-hamburger"><p></p></div>
</div>
</header>
<div class="l-main">
{block:ShopPublic}
{block:IndexPage}
{block:NoIndexPageCategory}
{block:NoIndexPageSearch}
<section>
<div class="l-inner">
<div class="p-keyvisual"><img src="{image:keyvisual}"></div>
</div>
</section>
{block:if-ShowPickup}
<section class="l-section p-pickup">
<div class="l-inner c-contentblock">
<h2 class="c-contentblock__headline--large c-headline">
<span class="c-headline__main">いち押し商品</span>
<span class="c-headline__sub">Pickup items</span>
</h2>
<div class="p-pickup__contents c-contentblock__main--large">
{block:if-Pickup_item1}
<div class="p-pickup__item">
<div class="p-pickup__thumb">
<img src="{image:Pickup_item1_img}">
</div>
<div class="p-pickup__body">
<h3 class="u-font20 u-mb32 u-fontno">
{block:text-Pickup_item1_ttl}{text:Pickup_item1_ttl}{/block:text-Pickup_item1_ttl}
</h3>
<p class="u-mb24">
{block:text-Pickup_item1_desc}{text:Pickup_item1_desc}{/block:text-Pickup_item1_desc}
</p>
<div class="c-button--right">
<a href="{block:text-Pickup_item1_url}{text:Pickup_item1_url}{/block:text-Pickup_item1_url}" class="c-button__anchor">詳細はこちら</a>
</div>
</div>
</div>
{/block:if-Pickup_item1}
{block:if-Pickup_item2}
<div class="p-pickup__item">
<div class="p-pickup__thumb">
<img src="{image:Pickup_item2_img}">
</div>
<div class="p-pickup__body">
<h3 class="u-font20 u-mb32 u-fontno">
{block:text-Pickup_item2_ttl}{text:Pickup_item2_ttl}{/block:text-Pickup_item2_ttl}
</h3>
<p class="u-mb24">
{block:text-Pickup_item2_desc}{text:Pickup_item2_desc}{/block:text-Pickup_item2_desc}
</p>
<div class="c-button--right">
<a href="{block:text-Pickup_item2_url}{text:Pickup_item2_url}{/block:text-Pickup_item2_url}" class="c-button__anchor">詳細はこちら</a>
</div>
</div>
</div>
{/block:if-Pickup_item2}
{block:if-Pickup_item3}
<div class="p-pickup__item">
<div class="p-pickup__thumb">
<img src="{image:Pickup_item3_img}">
</div>
<div class="p-pickup__body">
<h3 class="u-font20 u-mb32 u-fontno">
{block:text-Pickup_item3_ttl}{text:Pickup_item3_ttl}{/block:text-Pickup_item3_ttl}
</h3>
<p class="u-mb24">
{block:text-Pickup_item3_desc}{text:Pickup_item3_desc}{/block:text-Pickup_item3_desc}
</p>
<div class="c-button--right">
<a href="{block:text-Pickup_item3_url}{text:Pickup_item3_url}{/block:text-Pickup_item3_url}" class="c-button__anchor">詳細はこちら</a>
</div>
</div>
</div>
{/block:if-Pickup_item3}
</div>
</div>
</section>
{/block:if-ShowPickup}
{block:if-ShowRecommend}
<section class="l-section p-recommend">
<div class="l-inner c-contentblock">
<h2 class="c-contentblock__headline--large c-headline">
<span class="c-headline__main">おすすめ商品</span>
<span class="c-headline__sub">Recommend items</span>
</h2>
<div class="p-recommend__contents c-contentblock__main--large">
{block:if-Recommend_item1}
<a href="{block:text-Recommend_item1_url}{text:Recommend_item1_url}{/block:text-Recommend_item1_url}" class="p-recommend__item">
<div class="p-recommend__thumb u-mb24">
<img src="{image:Recommend_item1_img}" alt="{text:Recommend_item1_ttl}" title="{text:Recommend_item1_ttl}">
</div>
<div class="p-recommend__body">
<h3 class="u-font18 u-fontno">{block:text-Recommend_item1_ttl}{text:Recommend_item1_ttl}{/block:text-Recommend_item1_ttl}</h3>
<div class="u-font20 u-colorMain">￥{block:text-Recommend_item1_price}{text:Recommend_item1_price}{/block:text-Recommend_item1_price}</div>
</div>
</a>
{/block:if-Recommend_item1}
{block:if-Recommend_item2}
<a href="{block:text-Recommend_item2_url}{text:Recommend_item2_url}{/block:text-Recommend_item2_url}" class="p-recommend__item">
<div class="p-recommend__thumb u-mb24">
<img src="{image:Recommend_item2_img}" alt="{text:Recommend_item2_ttl}" title="{text:Recommend_item2_ttl}">
</div>
<div class="p-recommend__body">
<h3 class="u-font18 u-fontno">{block:text-Recommend_item2_ttl}{text:Recommend_item2_ttl}{/block:text-Recommend_item2_ttl}</h3>
<div class="u-font20 u-colorMain">￥{block:text-Recommend_item2_price}{text:Recommend_item2_price}{/block:text-Recommend_item2_price}</div>
</div>
</a>
{/block:if-Recommend_item2}
{block:if-Recommend_item3}
<a href="{block:text-Recommend_item3_url}{text:Recommend_item3_url}{/block:text-Recommend_item3_url}" class="p-recommend__item">
<div class="p-recommend__thumb u-mb24">
<img src="{image:Recommend_item3_img}" alt="{text:Recommend_item3_ttl}" title="{text:Recommend_item3_ttl}">
</div>
<div class="p-recommend__body">
<h3 class="u-font18 u-fontno">{block:text-Recommend_item3_ttl}{text:Recommend_item3_ttl}{/block:text-Recommend_item3_ttl}</h3>
<div class="u-font20 u-colorMain">￥{block:text-Recommend_item3_price}{text:Recommend_item3_price}{/block:text-Recommend_item3_price}</div>
</div>
</a>
{/block:if-Recommend_item3}
</div>
</div>
</section>
{/block:if-ShowRecommend}
{block:if-ShowInfo}
<section class="l-section p-news">
<div class="l-inner c-contentblock">
<h2 class="c-contentblock__headline--large c-headline">
<span class="c-headline__main">お知らせ</span>
<span class="c-headline__sub">Information</span>
</h2>
<div class="p-news__contents c-contentblock__main--large">
{block:if-ShowInfo_item1}
{block:text-ShowInfo_item1_url}<a href="{text:ShowInfo_item1_url}" class="p-news__item">{/block:text-ShowInfo_item1_url}
{block:not_text-ShowInfo_item1_url}<div class="p-news__item">{/block:not_text-ShowInfo_item1_url}
<div class="u-colorMain">{block:text-ShowInfo_item1_date}{text:ShowInfo_item1_date}{/block:text-ShowInfo_item1_date}</div>
<h3 class="u-font18 u-fontno u-mb8">{block:text-ShowInfo_item1_ttl}{text:ShowInfo_item1_ttl}{/block:text-ShowInfo_item1_ttl}</h3>
{block:not_text-ShowInfo_item1_url}</div>{/block:not_text-ShowInfo_item1_url}
{block:text-ShowInfo_item1_url}</a>{/block:text-ShowInfo_item1_url}
{/block:if-ShowInfo_item1}
{block:if-ShowInfo_item2}
{block:text-ShowInfo_item2_url}<a href="{text:ShowInfo_item2_url}" class="p-news__item">{/block:text-ShowInfo_item2_url}
{block:not_text-ShowInfo_item2_url}<div class="p-news__item">{/block:not_text-ShowInfo_item2_url}
<div class="u-colorMain">{block:text-ShowInfo_item2_date}{text:ShowInfo_item2_date}{/block:text-ShowInfo_item2_date}</div>
<h3 class="u-font18 u-fontno u-mb8">{block:text-ShowInfo_item2_ttl}{text:ShowInfo_item2_ttl}{/block:text-ShowInfo_item2_ttl}</h3>
{block:not_text-ShowInfo_item2_url}</div>{/block:not_text-ShowInfo_item2_url}
{block:text-ShowInfo_item2_url}</a>{/block:text-ShowInfo_item2_url}
{/block:if-ShowInfo_item2}
{block:if-ShowInfo_item3}
{block:text-ShowInfo_item3_url}<a href="{text:ShowInfo_item3_url}" class="p-news__item">{/block:text-ShowInfo_item3_url}
{block:not_text-ShowInfo_item3_url}<div class="p-news__item">{/block:not_text-ShowInfo_item3_url}
<div class="u-colorMain">{block:text-ShowInfo_item3_date}{text:ShowInfo_item3_date}{/block:text-ShowInfo_item3_date}</div>
<h3 class="u-font18 u-fontno u-mb8">{block:text-ShowInfo_item3_ttl}{text:ShowInfo_item3_ttl}{/block:text-ShowInfo_item3_ttl}</h3>
{block:not_text-ShowInfo_item3_url}</div>{/block:not_text-ShowInfo_item3_url}
{block:text-ShowInfo_item3_url}</a>{/block:text-ShowInfo_item3_url}
{/block:if-ShowInfo_item3}
</div>
</div>
</section>
{/block:if-ShowInfo}
{/block:NoIndexPageSearch}
{/block:NoIndexPageCategory}
{/block:IndexPage}
{block:HasItems}
<section class="l-section p-products">
<div class="l-inner c-contentblock">
<div class="c-contentblock__headline">
<h2 class="c-headline u-mb40">
<span class="c-headline__main">商品一覧</span>
<span class="c-headline__sub">Item lists</span>
</h2>
{block:AppsItemCategory}
<div class="p-categoy u-mb40 u-pc">
<h2 class="p-categoy__title">カテゴリー</h2>
{AppsItemCategoryCategoriesTag}
</div>
{/block:AppsItemCategory}
<div class="p-freespace u-pc">
{block:text-freeSpace}{text:freeSpace}{/block:text-freeSpace}
</div>
</div>
<div class="p-products__contents c-contentblock__main">
{block:IndexPageCategory}
<h3 class="c-headlineA u-font20 u-mb16">{IndexPageCategory}</h3>
{block:HasAppsItemCategoryChildCategories}
<div class="c-categorysmall u-mb40">
{block:AppsItemCategoryChildCategories}
<a href="{AppsItemCategoryChildCategoryPageURL}" class="c-categorysmall__item">
{AppsItemCategoryChildCategoryName}
</a>
{/block:AppsItemCategoryChildCategories}
</div>
{/block:HasAppsItemCategoryChildCategories}
{/block:IndexPageCategory}
<div class="p-search u-pc u-mb40">
<form class="p-search__form" role="search" method="get" action="{SearchPageURL}">
<input class="p-search__input" type="text" name="q" id="s" placeholder="検索する" value="{IndexPageSearch}">
<button class="p-search__submit" type="submit">
<svg id="search_icon" data-name="search_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><title>search</title><path d="M267.6,253.1l-72.7-72.7a91.4,91.4,0,1,0-12.3,13.1l72.3,72.3ZM122,198.1a74.3,74.3,0,1,1,74.3-74.2A74.4,74.4,0,0,1,122,198.1Z"/></svg>
</button>
</form>
</div>
<div class="p-products__list" id="mainContent">
{block:Items}
<a href="{ItemPageURL}" class="p-products__item">
<div class="p-products__thumb u-mb16">
{block:ItemImage1}
<img src="{ItemImage1URL-300}" alt="{ItemTitle}" title="{ItemTitle}">
{/block:ItemImage1}
{block:NoItemImage1}
<img src="{ItemNoImageURL}">
{/block:NoItemImage1}
</div>
<div class="p-products__body">
<h3 class="u-font18 u-fontno">{ItemTitle}</h3>
{block:HasItemStock}
{block:NoItemProperPrice}
<div class="u-colorMain u-font20">{ItemPrice}</div>
{/block:NoItemProperPrice}
{block:HasItemProperPrice}
<div class="p-price">
<div class="p-price__num u-font20">{ItemPrice}</div>
<div class="p-price__rate u-font16">{ItemDiscountRate}</div>
</div>
{/block:HasItemProperPrice}
{/block:HasItemStock}
{block:NoItemStock}
<div class="p-price">
<div class="p-price__num--soldout u-font20">{ItemPrice}</div>
<div class="p-price__rate--soldout u-font16">SOLD OUT</div>
</div>
{/block:NoItemStock}
</div>
{block:AppsItemLabel}
<div class="p-products__label">{AppsItemLabelTag}</div>
{/block:AppsItemLabel}
</a>
{/block:Items}
</div>
<div class="p-freespace u-sp">
{block:text-freeSpace}{text:freeSpace}{/block:text-freeSpace}
</div>
</div>
</div>
<div id="loading" style="display: none;text-align: center;">
<img src="/img/loading.gif" style="width: 110px; padding: 20px 0;" />
</div>
<span id="max_page" style="display: none;">{MaxPageNumber}</span>
<span id="next_page" style="display: none;">{NextPageNumber}</span>
<script type="text/javascript">
var process_flg = false;
var end_flg = false;
$(window).bottom({proximity: 0.05});
$(window).on('bottom', function() {
if (process_flg == false && end_flg == false) {
var max_page = $("#max_page").text();
var next_page = $('#next_page').text();
if (eval(max_page) >= eval(next_page)) {
$.ajax({
url: "{LoadItemsPageURL}" + next_page + "{LoadItemsPageURLParams}",
dataType: 'html',
beforeSend: function () {
process_flg = true;
$('#loading').css('display', 'block');
},
success: function (data) {
$('#mainContent').append(data);
next_page = eval(next_page) + 1;
$('#next_page').text(next_page);
objectFitImages('img');
},
complete: function () {
process_flg = false;
$('#loading').css('display', 'none');
}
});
} else {
end_flg = true;
}
}
});
</script>
</section>
{/block:HasItems}
{block:NoItems}
{block:IndexPage}
<section class="l-section p-products">
<div class="l-inner c-contentblock">
<div class="c-contentblock__headline">
<h2 class="c-headline u-mb40">
<span class="c-headline__main">商品一覧</span>
<span class="c-headline__sub">Item lists</span>
</h2>
{block:AppsItemCategory}
<div class="p-categoy u-mb40 u-pc">
<h2 class="p-categoy__title">カテゴリー</h2>
{AppsItemCategoryCategoriesTag}
</div>
{/block:AppsItemCategory}
<div class="p-freespace u-pc">
{block:text-freeSpace}{text:freeSpace}{/block:text-freeSpace}
</div>
</div>
<div class="p-products__contents c-contentblock__main">
<h3 class="c-headlineA u-font20 u-mb16">{lang:ItemSearchResult}</h3>
<p>{lang:NoItemsMessage}</p>
</div>
</div>
</section>
{/block:IndexPage}
{/block:NoItems}
{/block:ShopPublic}
{block:NotShopPublic}
<div class="l-ready">
{lang:NotShopPublicMessage}
</div>
{/block:NotShopPublic}
{block:AboutPage}
<section class="l-inner l-section">
<div class="c-contentblock">
<h2 class="c-headline u-mb40 c-contentblock__headline">
<span class="c-headline__main">お店について</span>
<span class="c-headline__sub">About shop</span>
</h2>
<div class="c-contentblock__main">
<img src="{image:About_img}">
<p class="p-about__text">{ShopIntroduction}</p>
<ul class="p-menu__nav__icon u-flex">
{block:ShopInstagramId}
<li class="p-menu__nav__icon__item">
<a href="http://instagram.com/{ShopInstagramId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa509376d28b/icon_sns_i.png"></a>
</li>
{/block:ShopInstagramId}
{block:ShopTwitterId}
<li class="p-menu__nav__icon__item">
<a href="https://twitter.com/{ShopTwitterId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa509466b494/icon_sns_t.png"></a>
</li>
{/block:ShopTwitterId}
{block:ShopFacebookId}
<li class="p-menu__nav__icon__item">
<a href="https://facebook.com/{ShopFacebookId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa50924bc54b/icon_sns_f.png"></a>
</li>
{/block:ShopFacebookId}
{block:ShopAmebaId}
<li class="p-menu__nav__icon__item">
<a href="http://ameblo.jp/{ShopAmebaId}" target="_blank"><img src="https://basefile.akamaized.net/magnet-official-ec/5aa508dcce502/icon_sns_a.png"></a>
</li>
{/block:ShopAmebaId}
</ul>
</div>
</div>
</section>
{/block:AboutPage}
{block:BlogPage}
<section class="l-inner l-section">
<div class="c-contentblock">
<h2 class="c-headline u-mb40 c-contentblock__headline">
<span class="c-headline__main">読み物</span>
<span class="c-headline__sub">Blog</span>
</h2>
<div class="c-contentblock__main">
{BlogContentsTag}
</div>
</div>
</section>
{/block:BlogPage}
{block:ContactPage}
<section class="l-inner l-section">
<div class="c-contentblock">
<h2 class="c-headline u-mb40 c-contentblock__headline">
<span class="c-headline__main">お問い合わせ</span>
<span class="c-headline__sub">Contact us</span>
</h2>
<div class="c-contentblock__main">
{ContactContentsTag}
</div>
</div>
</section>
{/block:ContactPage}
{block:PrivacyPage}
<section class="l-inner l-section">
<div class="c-contentblock">
<h2 class="c-headline u-mb40 c-contentblock__headline">
<span class="c-headline__main">プライバシーポリシー</span>
<span class="c-headline__sub">Privacy policy</span>
</h2>
<div class="c-contentblock__main">
{PrivacyContentsTag}
</div>
</div>
</section>
{/block:PrivacyPage}
{block:LawPage}
<section class="l-inner l-section">
<div class="c-contentblock">
<h2 class="c-headline u-mb40 c-contentblock__headline">
<span class="c-headline__main">特定商取引法に基づく表記</span>
<span class="c-headline__sub">Act on specified commercial transactions</span>
</h2>
<div class="c-contentblock__main">
{LawContentsTag}
</div>
</div>
</section>
{/block:LawPage}
{block:ItemPage}
<section class="l-inner l-section p-item">
<div class="p-item__block">
<div class="p-item__addcart">
{block:AppsItemLabel}
<div class="p-item__label">{AppsItemLabelTag}</div>
{/block:AppsItemLabel}
<h1 class="p-item__title">{ItemTitle}{block:ItemDigitalContent}<br>( {ItemDigitalContent} ){/block:ItemDigitalContent}</h1>
{block:HasItemStock}
{block:NoItemProperPrice}
<div class="u-colorMain u-font20">{ItemPrice}</div>
{/block:NoItemProperPrice}
{block:HasItemProperPrice}
<div class="p-price">
<div class="p-price__num--per u-font20">{ItemProperPrice}</div>
<div class="p-price__num u-font20">{ItemPrice}</div>
<div class="p-price__rate u-font16">{ItemDiscountRate}</div>
</div>
{/block:HasItemProperPrice}
<form id="purchaseForm" name="menu" action="{AddToCartURL}" method="post">
{ItemSelectTag}
<div id="buyButton"><button class="p-btnBuy" type="submit">{lang:AddToCart}</button></div>
</form>
{/block:HasItemStock}
{block:NoItemStock}
<div class="p-price">
<div class="p-price__num--soldout u-font20">{ItemPrice}</div>
<div class="p-price__rate--soldout u-font16">SOLD OUT</div>
</div>
<a class="NoItemInquiry" href="{ContactPageURL}/items/{ItemId}">{lang:NoItemInquiry}</a>
{/block:NoItemStock}
<div class="p-item__note">
{ItemAttentionTag}
</div>
</div>
<div class="p-item__details">
<div class="p-item__thumb">
<div class="p-item__preview">
{block:NoItemImage1}<img src="{ItemNoImageURL}">{/block:NoItemImage1}
{block:ItemImage1}<a href="{ItemImage1URL-origin}" data-lightbox="Image-01"><img src="{ItemImage1URL-640}"></a>{/block:ItemImage1}
</div>
<div class="p-item__photos">
{block:NoItemImage1}<div class="p-item__photo is-active"><img src="{ItemNoImageURL}"></div>{/block:NoItemImage1}
{block:ItemImage1}<div class="p-item__photo is-active" data-src="{ItemImage1URL-origin}"><img src="{ItemImage1URL-640}"></div>{/block:ItemImage1}
{block:ItemImage2}<div class="p-item__photo" data-src="{ItemImage2URL-origin}"><img src="{ItemImage2URL-640}"></div>{/block:ItemImage2}
{block:ItemImage3}<div class="p-item__photo" data-src="{ItemImage3URL-origin}"><img src="{ItemImage3URL-640}"></div>{/block:ItemImage3}
{block:ItemImage4}<div class="p-item__photo" data-src="{ItemImage4URL-origin}"><img src="{ItemImage4URL-640}"></div>{/block:ItemImage4}
{block:ItemImage5}<div class="p-item__photo" data-src="{ItemImage5URL-origin}"><img src="{ItemImage5URL-640}"></div>{/block:ItemImage5}
{block:ItemImage6}<div class="p-item__photo" data-src="{ItemImage6URL-origin}"><img src="{ItemImage6URL-640}"></div>{/block:ItemImage6}
{block:ItemImage7}<div class="p-item__photo" data-src="{ItemImage7URL-origin}"><img src="{ItemImage7URL-640}"></div>{/block:ItemImage7}
{block:ItemImage8}<div class="p-item__photo" data-src="{ItemImage8URL-origin}"><img src="{ItemImage8URL-640}"></div>{/block:ItemImage8}
{block:ItemImage9}<div class="p-item__photo" data-src="{ItemImage9URL-origin}"><img src="{ItemImage9URL-640}"></div>{/block:ItemImage9}
{block:ItemImage10}<div class="p-item__photo" data-src="{ItemImage10URL-origin}"><img src="{ItemImage10URL-640}"></div>{/block:ItemImage10}
{block:ItemImage11}<div class="p-item__photo" data-src="{ItemImage11URL-origin}"><img src="{ItemImage11URL-640}"></div>{/block:ItemImage11}
{block:ItemImage12}<div class="p-item__photo" data-src="{ItemImage12URL-origin}"><img src="{ItemImage12URL-640}"></div>{/block:ItemImage12}
{block:ItemImage13}<div class="p-item__photo" data-src="{ItemImage13URL-origin}"><img src="{ItemImage13URL-640}"></div>{/block:ItemImage13}
{block:ItemImage14}<div class="p-item__photo" data-src="{ItemImage14URL-origin}"><img src="{ItemImage14URL-640}"></div>{/block:ItemImage14}
{block:ItemImage15}<div class="p-item__photo" data-src="{ItemImage15URL-origin}"><img src="{ItemImage15URL-640}"></div>{/block:ItemImage15}
{block:ItemImage16}<div class="p-item__photo" data-src="{ItemImage16URL-origin}"><img src="{ItemImage16URL-640}"></div>{/block:ItemImage16}
{block:ItemImage17}<div class="p-item__photo" data-src="{ItemImage17URL-origin}"><img src="{ItemImage17URL-640}"></div>{/block:ItemImage17}
{block:ItemImage18}<div class="p-item__photo" data-src="{ItemImage18URL-origin}"><img src="{ItemImage18URL-640}"></div>{/block:ItemImage18}
{block:ItemImage19}<div class="p-item__photo" data-src="{ItemImage19URL-origin}"><img src="{ItemImage19URL-640}"></div>{/block:ItemImage19}
{block:ItemImage20}<div class="p-item__photo" data-src="{ItemImage20URL-origin}"><img src="{ItemImage20URL-640}"></div>{/block:ItemImage20}
</div>
</div>
<div class="p-item__body">
{ItemDetail}
</div>
<div class="p-item__buttons">
<div class="p-item__button">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="{ItemRedirectUrl}" data-lang="ja" data-hashtags="{TwitterDataHashtags}" data-via="{TwitterDataVia}">{lang:Tweet}</a>
</div>
<div class="p-item__button">
<div class="fb-share-button" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u&src=sdkpreparse">シェア</a></div>
</div>
<div class="p-item__button">
{EmbedWidgetTag}
</div>
<div class="p-item__button">
{IllegalReportTag}
</div>
</div>
</div>
</div>
<div class="p-shopReview">
{block:AppsReview}{AppsReviewTag}{/block:AppsReview}
</div>
</section>
<section class="l-section p-recommend">
<div class="l-inner c-contentblock">
<h2 class="c-contentblock__headline--large c-headline">
<span class="c-headline__main">おすすめ商品</span>
<span class="c-headline__sub">Recommend items</span>
</h2>
<div class="p-recommend__contents c-contentblock__main--large">
{block:if-Recommend_item1}
<a href="{block:text-Recommend_item1_url}{text:Recommend_item1_url}{/block:text-Recommend_item1_url}" class="p-recommend__item">
<div class="p-recommend__thumb u-mb24">
<img src="{image:Recommend_item1_img}" alt="{text:Recommend_item1_ttl}" title="{text:Recommend_item1_ttl}">
</div>
<div class="p-recommend__body">
<h3 class="u-font18 u-fontno">{block:text-Recommend_item1_ttl}{text:Recommend_item1_ttl}{/block:text-Recommend_item1_ttl}</h3>
<div class="u-font20 u-colorMain">￥{block:text-Recommend_item1_price}{text:Recommend_item1_price}{/block:text-Recommend_item1_price}</div>
</div>
</a>
{/block:if-Recommend_item1}
{block:if-Recommend_item2}
<a href="{block:text-Recommend_item2_url}{text:Recommend_item2_url}{/block:text-Recommend_item2_url}" class="p-recommend__item">
<div class="p-recommend__thumb u-mb24">
<img src="{image:Recommend_item2_img}" alt="{text:Recommend_item2_ttl}" title="{text:Recommend_item2_ttl}">
</div>
<div class="p-recommend__body">
<h3 class="u-font18 u-fontno">{block:text-Recommend_item2_ttl}{text:Recommend_item2_ttl}{/block:text-Recommend_item2_ttl}</h3>
<div class="u-font20 u-colorMain">￥{block:text-Recommend_item2_price}{text:Recommend_item2_price}{/block:text-Recommend_item2_price}</div>
</div>
</a>
{/block:if-Recommend_item2}
{block:if-Recommend_item3}
<a href="{block:text-Recommend_item3_url}{text:Recommend_item3_url}{/block:text-Recommend_item3_url}" class="p-recommend__item">
<div class="p-recommend__thumb u-mb24">
<img src="{image:Recommend_item3_img}" alt="{text:Recommend_item3_ttl}" title="{text:Recommend_item3_ttl}">
</div>
<div class="p-recommend__body">
<h3 class="u-font18 u-fontno">{block:text-Recommend_item3_ttl}{text:Recommend_item3_ttl}{/block:text-Recommend_item3_ttl}</h3>
<div class="u-font20 u-colorMain">￥{block:text-Recommend_item3_price}{text:Recommend_item3_price}{/block:text-Recommend_item3_price}</div>
</div>
</a>
{/block:if-Recommend_item3}
</div>
</div>
</section>
{/block:ItemPage}
</div>
<footer class="l-footer p-footer">
<nav class="l-nav--footer l-section">
<ul class="p-nav">
<li class="p-nav__item"><a href="{IndexPageURL}">ホーム</a></li>
<li class="p-nav__item"><a href="{AboutPageURL}">お店について</a></li>
{block:AppsItemCategory}
<li class="p-nav__item">
<a>カテゴリー</a>
<div class="p-nav__item__hover">{AppsItemCategoryCategoriesTag}</div>
</li>
{/block:AppsItemCategory}
{block:AppsBlog}
<li class="p-nav__item"><a href="{BlogPageURL}">読み物</a></li>
{/block:AppsBlog}
<li class="p-nav__item"><a href="{ContactPageURL}">お問い合わせ</a></li>
{block:if-Exlink}
<li class="p-nav__item">
<a href="{block:text-Exlink_url}{text:Exlink_url}{/block:text-Exlink_url}" target="_blank">
{block:text-Exlink_ttl}{text:Exlink_ttl}{/block:text-Exlink_ttl}
</a>
</li>
{/block:if-Exlink}
</ul>
</nav>
<div class="p-footer__information">
<div class="p-footer__lang">
{block:AppsI18n}{AppsI18nTag}{/block:AppsI18n}
</div>
<div class="p-footer__copyright">
<a class="p-footer__link" href="{PrivacyPageURL}">{lang:Privacy}</a>
<a class="p-footer__link" href="{LawPageURL}">{lang:Law}</a>
<p class="p-footer__name">© {ShopName}</p>
</div>
</div>
</footer>
</div>
<input id="base_url" type="hidden" value="{BASEURL}" style="display: none;" />
<script src="https://basefile.akamaized.net/magnet-official-ec/5c5a86213ca55/slick.min.js"></script>
<script src="https://basefile.akamaized.net/magnet-official-ec/5bc6b0b543e4e/ofi.min.js"></script>
<script src="https://basefile.akamaized.net/magnet-official-ec/5cd28f0914384/lightbox.min.js"></script>
<script>
objectFitImages('img');//オブジェクトフィット・Edge,IE対応
//------------------------------------------------------------------------------
//クリックイベント
//------------------------------------------------------------------------------
$(document)
.on('click', '.js-scroll', nextSection)
.on('click', '.js-pagenation', pagenation)
.on('click', '.js-hamburger', navOpen)
.on('click', '.is-active.js-hamburger, .l-overlay', navClose)
;
function nextSection() {
var h = $('header').height();
var target = $(this).parents('section').next('section');
$("html,body").animate({scrollTop: target.offset().top - h});
}
function pagenation() {
var num = $(this).index('.p-detail__main__list__item');
$('.swiper-pagination').find('span').eq(num).click();
}
function navOpen() {
$('.js-hamburger, .l-nav').addClass('is-active');
$('body').append($('<div>').addClass('l-overlay'));
no_scroll('.l-main');
}
function navClose() {
$('.js-hamburger, .l-nav').removeClass('is-active');
$('.l-overlay').remove();
return_scroll('.l-main');
}
//------------------------------------------------------------------------------
// スクロール禁止用関数
//------------------------------------------------------------------------------
function no_scroll(elm){
var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(elm).on(scroll_event,function(e){e.preventDefault();});//PC用
$(elm).on('touchmove.noScroll', function(e) {e.preventDefault();});//SP用
$('body').css('overflow-y', 'hidden');
}
function return_scroll(elm){
var scroll_event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
$(elm).off(scroll_event);//PC用
$(elm).off('.noScroll');//SP用
$('body').css('overflow-y', '');
}
//------------------------------------------------------------------------------
//slick
//------------------------------------------------------------------------------
$('div.p-pickup__contents').slick({
dots: true,
fade: true,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false
}
}
]
});
$('div.p-item__photo').on('click',function(){
$('div.p-item__photo').removeClass('is-active');
$(this).addClass('is-active');
var index = $('div.p-item__photo').index(this);
var src = $(this).find('img').attr('src');
var originSrc = $(this).attr('data-src');
$('div.p-item__preview').html('<a href="'+ originSrc +'" data-lightbox="Image-'+ index +'"><img src="'+ src +'"></a>');
objectFitImages('img');
});
//------------------------------------------------------------------------------
// ipad表示用
//------------------------------------------------------------------------------
var ua = navigator.userAgent.toLowerCase();
var isAndroidTablet = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') == -1);
var isiPad = (ua.indexOf('ipad') > -1);
function setZoom(){
var scale = $(window).width() / HTML_WIDTH * 100 + "%";
$('body').css({'zoom' : scale, width: '100%' });
}
var HTML_WIDTH = "1200";
if(isAndroidTablet || isiPad) $(window).resize(function(){ setZoom() });
if(isAndroidTablet || isiPad) setZoom();
</script>
<!-- script:Facebook -->
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=350947278320210&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- script:Twitter -->
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
</body>
</html>
{/block:NotLoadItemsPage}
{block:LoadItemsPage}
{block:Items}
<a href="{ItemPageURL}" class="p-products__item">
<div class="p-products__thumb u-mb16">
{block:ItemImage1}
<img src="{ItemImage1URL-300}" alt="{ItemTitle}" title="{ItemTitle}">
{/block:ItemImage1}
{block:NoItemImage1}
<img src="{ItemNoImageURL}">
{/block:NoItemImage1}
</div>
<div class="p-products__body">
<h3 class="u-font18 u-fontno">{ItemTitle}</h3>
{block:HasItemStock}
{block:NoItemProperPrice}
<div class="u-colorMain u-font20">{ItemPrice}</div>
{/block:NoItemProperPrice}
{block:HasItemProperPrice}
<div class="p-price">
<div class="p-price__num u-font20">{ItemPrice}</div>
<div class="p-price__rate u-font16">{ItemDiscountRate}</div>
</div>
{/block:HasItemProperPrice}
{/block:HasItemStock}
{block:NoItemStock}
<div class="p-price">
<div class="p-price__num--soldout u-font20">{ItemPrice}</div>
<div class="p-price__rate--soldout u-font16">SOLD OUT</div>
</div>
{/block:NoItemStock}
</div>
{block:AppsItemLabel}
<div class="p-products__label">{AppsItemLabelTag}</div>
{/block:AppsItemLabel}
</a>
{/block:Items}
{/block:LoadItemsPage}
