{"title":"VIERMOREグラデデザイン用：test","description":"\u003c!-- FV --\u003e\n\u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/1_01_5_2d08749c-1536-44f2-a41a-dee515cafb41.jpg?v=1783652333\" style=\"vertical-align:middle; margin-bottom:-1px;\"\u003e\u003cbr\u003e\n\n\u003ca href=\"#bottom\"\u003e\n  \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/1_02_13_5a242ed0-744b-47ce-a669-2a059d20d5d0.jpg?v=1783321808\" style=\"vertical-align:middle; margin-bottom:-1px;\"\u003e\u003cbr\u003e\n\u003c\/a\u003e\n\n\u003cdiv class=\"viewmore-wrap\"\u003e\n\n  \u003cdiv class=\"viewmore-content\" id=\"viewmore\"\u003e\n\n    \u003c!-- メッセージ --\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/1_03_7_a3a876d7-c25b-4714-bc75-322bdd6a673c.jpg?v=1783321808\" style=\"vertical-align:middle; margin-bottom:-1px;\"\u003e\u003cbr\u003e\n\n    \u003ca href=\"#bottom\"\u003e\n      \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/1_04_3_953fe7d1-ea3c-4b84-82b0-85d4925aa207.jpg?v=1783321808\" style=\"vertical-align:middle; margin-bottom:-1px;\"\u003e\u003cbr\u003e\n    \u003c\/a\u003e\n\n    \u003c!-- 気になる商品は？ --\u003e\n    \u003cimg src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0585\/6044\/6615\/files\/1_05_2_c543e53c-706a-413d-8aa5-f69303b63fc0.jpg?v=1783652333\" style=\"vertical-align:middle; margin-bottom:-1px;\"\u003e\u003cbr\u003e\n\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"viewmore-overlay\"\u003e\n\u003cbutton class=\"viewmore-btn\"\u003e\n  VIEW MORE\n\u003c\/button\u003e\n  \u003c\/div\u003e\n\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n.viewmore-wrap{\n    position:relative;\n}\n\n.viewmore-content{\n    max-height:700px;\n    overflow:hidden;\n    transition:max-height .8s ease;\n}\n\n.viewmore-content.open{\n    max-height:99999px;\n}\n\n.viewmore-overlay{\n\n    position:absolute;\n\n    left:0;\n    right:0;\n    bottom:0;\n\n    height:220px;\n\n    display:flex;\n    justify-content:center;\n    align-items:flex-end;\n\n    padding-bottom:30px;\n\n    background:linear-gradient(\n        rgba(255,255,255,0),\n        rgba(255,255,255,.92) 55%,\n        rgba(255,255,255,1) 100%\n    );\n\n    transition:.35s;\n}\n\n.viewmore-overlay.hide{\n    opacity:0;\n    pointer-events:none;\n}\n\n.viewmore-btn {\n    width: auto;             \/* 横幅制限を解除 *\/\n    height: auto;            \/* 高さ制限を解除 *\/\n    background: transparent; \/* 背景を透明に *\/\n    border: none;            \/* 枠線を削除 *\/\n\n    color: #333;             \/* 文字色 *\/\n    font-size: 13px;         \/* 文字サイズ調整 *\/\n    letter-spacing: .25em;   \/* 文字間隔 *\/\n    font-weight: 400;\n\n    cursor: pointer;\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    padding-bottom: 25px;    \/* 矢印（::before, ::after）が入るスペースを確保 *\/\n    position: relative;\n\n    transition: opacity .25s;\n}\n\n\/* ホバー時の挙動 *\/\n.viewmore-btn:hover {\n    background: transparent;\n    opacity: 0.7;\n}\n\n\/* 矢印の共通パーツ *\/\n.viewmore-btn::before,\n.viewmore-btn::after {\n    content: \"\";\n    position: absolute;\n    bottom: 5px;             \/* 下からの位置 *\/\n    width: 40px;             \/* 線の長さ（画像の広めな矢印に調整） *\/\n    height: 1px;             \/* 線の太さ *\/\n    background: #444;        \/* 矢印の色 *\/\n}\n\n\/* 左側の線 *\/\n.viewmore-btn::before {\n    left: calc(50% - 39px);  \/* 線の幅に合わせて中央でくっつくよう調整 *\/\n    transform: rotate(20deg);\/* ゆるやかな角度に調整 *\/\n    transform-origin: right center;\n}\n\n\/* 右側の線 *\/\n.viewmore-btn::after {\n    right: calc(50% - 39px); \/* 線の幅に合わせて中央でくっつくよう調整 *\/\n    transform: rotate(-20deg);\/* ゆるやかな角度に調整 *\/\n    transform-origin: left center;\n}\n\n\n\u003c\/style\u003e\n\n\u003cscript\u003e\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n\n    const btn = document.querySelector(\".viewmore-btn\");\n    const content = document.querySelector(\".viewmore-content\");\n    const overlay = document.querySelector(\".viewmore-overlay\");\n\n    btn.addEventListener(\"click\", function(){\n\n        content.classList.add(\"open\");\n        overlay.classList.add(\"hide\");\n\n    });\n\n});\n\u003c\/script\u003e\n\n","products":[],"url":"https:\/\/feliture.shop\/collections\/test-6.oembed","provider":"Feliture","version":"1.0","type":"link"}