{"title":"アウトレット","description":"\u003cstyle\u003e\n  .gallery00 {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 10px;\n    margin-top:40px;\n  }\n\n  \/* ---- Card ---- *\/\n  .card00 {\n    position: relative;\n    display: block;\n    background: #fff;\n    cursor: pointer;\n    overflow: hidden;\n\n    \/* load-in animation *\/\n    opacity: 0;\n    transform: translateY(16px);\n    animation: fadeInUp .7s ease forwards;\n  }\n  .card00:nth-child(odd){ animation-delay: .05s; }\n  .card00:nth-child(even){ animation-delay: .15s; }\n\n  .card00 img{\n    width: 100%;\n    height: auto;\n    transition: transform .35s ease, filter .35s ease;\n    border:none;\n  }\n\n  \/* ---- Text overlay (top, always visible) ---- *\/\n  .overlay00{\n    position: absolute;\n    top: 20px; left: 0; right: 0;\n    padding: 8px 12px;\n    background: rgba(255,255,255,.96);\n    color: #111;\n    font-size: 70%;\n    font-weight: 600;\n    line-height: 1;\n    width:90%;\n    margin:0 auto;\n    text-align:center;\n\n    \/* appear with the card *\/\n    opacity: 0;\n    transform: translateY(-8px);\n    animation: dropIn .6s ease forwards;\n    animation-delay: .2s; \/* 少し遅れて出る *\/\n  }\n\n  \/* ---- Hover effects ---- *\/\n  .card00:hover img{\n    transform: scale(1.00);\n    filter: brightness(1.05);\n  }\n\n  \/* ✨ shine effect (ピカッ) *\/\n  .card00::after{\n    content: \"\";\n    position: absolute;\n    top: -20%;\n    left: -150%;\n    width: 60%;\n    height: 140%;\n    transform: skewX(-25deg);\n    background: linear-gradient(\n      90deg,\n      rgba(255,255,255,0) 0%,\n      rgba(255,255,255,.75) 45%,\n      rgba(255,255,255,0) 100%\n    );\n    pointer-events: none;\n  }\n  .card00:hover::after{\n    animation: shine .7s ease;\n  }\n\n  \/* ---- Animations ---- *\/\n  @keyframes fadeInUp{\n    to{ opacity:1; transform: translateY(0); }\n  }\n  @keyframes dropIn{\n    to{ opacity:1; transform: translateY(0); }\n  }\n  @keyframes shine{\n    0%   { left: -150%; }\n    100% { left: 160%; }\n  }\n\n  \/* ---- Responsive ---- *\/\n  @media (max-width: 1024px){\n    .gallery00{ grid-template-columns: repeat(3,1fr); }\n  }\n  @media (max-width: 768px){\n    .gallery00{ grid-template-columns: repeat(2,1fr); }\n  }\n  \/* ▼▼ 修正：スマホでも2列にする ▼▼ *\/\n  @media (max-width: 480px){\n    body{ padding: 20px; }\n    .gallery00{ grid-template-columns: repeat(2,1fr); gap: 14px; } \/* ← ここを1fr→2列へ *\/\n    .overlay00{ font-size: 13px; }\n  }\n\n  @media screen and (min-width: 750px) {\n    .collection-hero__description { max-width: 100%; }\n  }\n\n  \/* ▼ 12\/8 スクロールで表示するためにアニメを一旦止める ▼ *\/\n.card00,\n.card00 .overlay00 {\n  animation: none;   \/* 既存の animation を無効化 *\/\n  opacity: 0;        \/* 最初は非表示 *\/\n}\n\n\/* カード本体はフェードイン（上から） *\/\n.card00.is-visible {\n  animation: fadeInUp .7s ease forwards;\n}\n\n\/* テキストエリア自体は表示状態にしておく（中身が演出される） *\/\n.card00.is-visible .overlay00 {\n  opacity: 1;\n}\n\n\/* ▼ 白い帯が左から右に伸びるアニメ ▼ *\/\n.overlay00 {\n  position: absolute;\n  overflow: hidden; \/* 中の白帯をはみ出させない *\/\n  z-index: 1;\n  background: transparent; \/* 背景は擬似要素に任せる *\/\n}\n\n.overlay00::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: rgba(255,255,255,.96);\n  transform-origin: left center;\n  transform: scaleX(0);          \/* 最初は左端で0 *\/\n}\n\n\/* .is-visible になったら白い帯を流す *\/\n.card00.is-visible .overlay00::before {\n  animation: overlayWipe 0.6s ease forwards;\n}\n\n\/* ▼ 文字を一文字ずつ出す準備 ▼ *\/\n\/* JSで .overlay00 の中身を \u003cspan\u003eで分割する前提 *\/\n.overlay00 span {\n  display: inline-block;\n  opacity: 0;\n  transform: translateY(0.4em);\n}\n\n\/* カードが見えたら span それぞれにアニメーション＋ディレイ *\/\n.card00.is-visible .overlay00 span {\n  animation: charIn 0.45s ease forwards;\n  animation-delay: calc(0.25s + var(--char-delay)); \n  \/* 0.25s は白帯が動き始めて少ししてから *\/\n}\n\n\/* ▼ 追加のキーフレーム ▼ *\/\n@keyframes overlayWipe {\n  0%   { transform: scaleX(0); }\n  100% { transform: scaleX(1); }\n}\n\n@keyframes charIn {\n  from {\n    opacity: 0;\n    transform: translateY(0.4em);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\u003c\/style\u003e\n\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/outlet_header.jpg\" width=\"100%\" alt=\"種類で選ぶバナー\"\u003e\n\n\u003cdiv class=\"gallery00\"\u003e\n\u003c!-- すべての商品 --\u003e\n  \u003ca href=\"https:\/\/shop.zakkokumaihonpo.com\/collections\/all\" class=\"card00\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/button_on_all.jpg\" alt=\"すべての商品\"\u003e\n    \u003c!--\u003cdiv class=\"overlay00\"\u003eすべての商品\u003c\/div\u003e--\u003e\n  \u003c\/a\u003e\n\n  \u003c!-- 雑穀米・ごはん --\u003e\n  \u003ca href=\"https:\/\/shop.zakkokumaihonpo.com\/collections\/%E3%83%96%E3%83%AC%E3%83%B3%E3%83%89%E9%9B%91%E7%A9%80%E7%B1%B3\" class=\"card00\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/button_on_zakkoku.jpg\" alt=\"雑穀米・ごはん\"\u003e\n    \u003c!--\u003cdiv class=\"overlay00\"\u003e雑穀米・ごはん\u003c\/div\u003e--\u003e\n  \u003c\/a\u003e\n\n  \u003c!-- お菓子・スイーツ --\u003e\n  \u003ca href=\"https:\/\/shop.zakkokumaihonpo.com\/collections\/%E3%82%B9%E3%82%A4%E3%83%BC%E3%83%84-%E3%81%9D%E3%81%AE%E4%BB%96\" class=\"card00\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/button_on_sweet.jpg\" alt=\"お菓子・スイーツ\"\u003e\n    \u003c!--\u003cdiv class=\"overlay00\"\u003eお菓子・スイーツ\u003c\/div\u003e--\u003e\n  \u003c\/a\u003e\n\n  \u003c!-- 食品・お惣菜 --\u003e\n  \u003ca href=\"https:\/\/shop.zakkokumaihonpo.com\/collections\/%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%A7%E9%81%B8%E3%81%B6-%E3%82%B9%E3%83%9A%E3%82%B7%E3%83%A3%E3%83%AB-%E3%83%86%E3%82%A3%E3%83%BC\" class=\"card00\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/button_on_sozai.jpg\" alt=\"食品・お惣菜\"\u003e\n    \u003c!--\u003cdiv class=\"overlay00\"\u003e食品・お惣菜\u003c\/div\u003e--\u003e\n  \u003c\/a\u003e\n\n  \u003c!-- 賞味期限間近 --\u003e\n  \u003ca href=\"\" class=\"card00\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/button_on_syoumi.jpg\" alt=\"賞味期限間近\"\u003e\n    \u003c!--\u003cdiv class=\"overlay00\"\u003e賞味期限間近\u003c\/div\u003e--\u003e\n  \u003c\/a\u003e\n\n  \u003c!-- 50％OFF以上 --\u003e\n  \u003ca href=\"\" class=\"card00\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/button_on_50off.jpg\" alt=\"50％OFF以上\"\u003e\n    \u003c!--\u003cdiv class=\"overlay00\"\u003e50％OFF以上\u003c\/div\u003e--\u003e\n  \u003c\/a\u003e\n\n  \u003c!-- 人気商品 --\u003e\n  \u003ca href=\"https:\/\/shop.zakkokumaihonpo.com\/collections\/%E4%BB%8A%E6%9C%88%E3%81%AE%E5%A3%B2%E3%82%8C%E7%AD%8B%E3%83%A9%E3%83%B3%E3%82%AD%E3%83%B3%E3%82%B0\" class=\"card00\"\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0615\/9400\/9815\/files\/button_on_ninki.jpg\" alt=\"人気商品\"\u003e\n    \u003c!--\u003cdiv class=\"overlay00\"\u003e人気商品\u003c\/div\u003e--\u003e\n  \u003c\/a\u003e\n\n  \u003c\/div\u003e\n  \u003cscript\u003e\ndocument.addEventListener('DOMContentLoaded', function () {\n  const cards = document.querySelectorAll('.card00');\n  const overlays = document.querySelectorAll('.overlay00');\n\n  \/\/ ① テキストを一文字ずつ \u003cspan\u003e に分割\n  overlays.forEach(overlay =\u003e {\n    const text = overlay.textContent.trim();\n    overlay.textContent = ''; \/\/ 一旦空にする\n\n    Array.from(text).forEach((ch, index) =\u003e {\n      const span = document.createElement('span');\n      span.textContent = ch;\n      \/\/ 文字ごとの遅延（0.04秒刻みくらい）\n      span.style.setProperty('--char-delay', (index * 0.04) + 's');\n      overlay.appendChild(span);\n    });\n  });\n\n  if (!cards.length) return;\n\n  \/\/ ② IntersectionObserver が使えない場合 → 全部表示\n  if (!('IntersectionObserver' in window)) {\n    cards.forEach(card =\u003e card.classList.add('is-visible'));\n    return;\n  }\n\n  \/\/ ③ 画面に入ったら is-visible を付与\n  const observer = new IntersectionObserver(\n    (entries, obs) =\u003e {\n      entries.forEach(entry =\u003e {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('is-visible');\n          obs.unobserve(entry.target); \/\/ 1回表示したら監視解除\n        }\n      });\n    },\n    {\n      root: null,\n      threshold: 0.3\n    }\n  );\n\n  cards.forEach(card =\u003e observer.observe(card));\n});\n\u003c\/script\u003e","products":[],"url":"https:\/\/shop.zakkokumaihonpo.com\/collections\/outlet.oembed","provider":"【公式】雑穀米本舗 - 公式オンラインストア（公式直なら最安値）","version":"1.0","type":"link"}