{"title":"accessories-besty","description":"\u003cp\u003e  \u003c\/p\u003e  \u003cstyle\u003e\n    @font-face {\n      font-display: swap;\n      src: url(\"https:\/\/staticdn.vivaia.com\/oneapi\/fonts\/Roboto-Regular.ttf\");\n    }\n\n    @font-face {\n      font-display: swap;\n      src: url(\"https:\/\/staticdn.vivaia.com\/oneapi\/fonts\/NotoSerif-Regular.ttf\");\n    }\n\n    @font-face {\n      font-weight: 300;\n      font-display: swap;\n      src: url(\"https:\/\/staticdn.vivaia.com\/oneapi\/fonts\/Roboto-Light.ttf\");\n    }\n\n    * {\n      padding: 0;\n      margin: 0;\n    }\n\n    .besty {\n      width: 100%;\n      padding-bottom: 4.1666667vw;\n    }\n  .besty .new_desc{\n          font-size: 1.0416667vw;\n          font-weight: 500;\n          line-height: 1.25vw;\n      left: 8.8541667vw;\n      top: 20.625vw;\n          position: absolute;\n         \n  }\n    .besty .show-big {\n      display: block;\n    }\n    .besty .show-m{\n      display: none;\n    }\n    .besty .desc {\n      font-size: 15px;\n      font-weight: 500;\n      line-height: 1.25vw;\n      margin-bottom: 2.0833333vw;\n      margin-top: 0.3125vw;\n\n    }\n\n    .m-4 {\n      margin-top: 4.1666667vw;\n\n    }\n\n    .p_b {\n      position: absolute;\n      top: 13.1875vw;\n      left: 4.625vw;\n    }\n\n    .scroll-list {\n       height: 25vw;\n      \/* padding-bottom: 40px; *\/\n      \/* margin-bottom: 40px; *\/\n     \n    }\n\n    .scroll-list::-webkit-scrollbar {\n      display: none;\n    }\n\n    .line-scrollbar {\n      width: 100%;\n      \/* height: 4px; *\/\n      margin-top: 0px !important;\n      overflow-x: scroll;\n\n    }\n\n   \n\n\n   \n    .pc_scroll_height_div {\n      width: 100%;\n      height: 4.1666667vw;\n      padding-top: 2.0833333vw;\n      background: linear-gradient(0deg, #F8F7F5, #F8F7F5), #FFFFFF;\n    }\n\n    .space-w-m-t-b .space-w-style .common-title {\n      padding-top: 80px;\n    }\n\n\n\n    .besty .space-w {\n      margin: 0 auto;\n      width: 73.75vw;\n      margin-top: 4.167vw;\n      margin-bottom: 4.167vw;\n    }\n\n    .besty .space-w-style {\n      margin: 0 auto;\n      width: 68.75vw;\n    }\n\n    .besty .space-w-m-t-b {\n      margin-top: 4.167vw;\n      margin-bottom: 4.167vw;\n    }\n\n    .besty .common-text-area {\n      margin-bottom: 2.083vw;\n    }\n\n    .besty .common-title {\n      font-size: 1.563vw;\n      line-height: 2.083vw;\n      font-weight: 600;\n    }\n\n    .besty .common-img {\n      width: 100%;\n      \n    }\n\n    .besty ::-webkit-scrollbar {\n      height: 4px;\n    }\n\n    .besty ::-webkit-scrollbar-button {\n      background-color: transparent;\n    }\n\n    .besty ::-webkit-scrollbar-track {\n      background-color: #d9d9d9;\n      border-radius: 0.521vw;\n    }\n\n    .besty ::-webkit-scrollbar-thumb {\n      background-color: #191817;\n      border-radius: 0.521vw;\n    }\n\n    .besty .scroll-list {\n      display: flex;\n      overflow-x: scroll;\n      overflow-y: hidden;\n      width: 100%;\n      padding-bottom: 2.083vw;\n      padding-left: 15.625vw;\n      padding-right: 15.625vw;\n      box-sizing: border-box;\n    }\n\n    .besty .scroll-item {\n      width: 23.438vw;\n      margin-left: 2.083vw;\n    \n     \n      flex-shrink: 0;\n      \/* background-color: #ffffff; *\/\n    }\n\n    .besty .scroll-item-first {\n      margin-left: 0;\n    }\n\n    .besty img {\n      display: block;\n    }\n\n    .title {\n      width: 100%;\n\n      font-size: 1.563vw;\n      font-weight: 600;\n      line-height: 2.083vw;\n\n    }\n\n\n\n    .space-w {\n      width: 68.75vw;\n      margin: 0 auto 4.167vw;\n    }\n\n    @media screen and (max-width: 768px) {\n      .besty .new_desc{\nfont-size: 3.7333333vw;\nfont-weight: 500;\nline-height: 6.4vw;\ntop: 68.2666667vw;\nleft: 27.7333333vw;\n\n         \n  }\n      .besty{\n        padding-bottom: 12.8vw;\n      }\n      .besty .desc {\nfont-size: 3.7333333vw;\nfont-weight: 500;\nline-height: 4.8vw;\nletter-spacing: 0px;\ntext-align: left;\n\n      margin-bottom: 5.3333333vw;\n      margin-top: 1.0666667vw;\n\n    }\n\n    .m-4 {\n      margin-top: 10.6666667vw;\n\n    }\n\n    .p_b {\n      position: absolute;\n      top: 96.466667vw;\n      left: 4.333333vw;\n    }\n      .space-w-m-t-b .space-w-style .common-title {\n        padding-top: 50px;\n      }\n\n      .besty .show-big {\n        display: none;\n      }\n.besty .show-m{\n  display: block;\n}\n      .besty .space-w {\n        width: 89.333vw;\n        margin-top: 12.8vw;\n        margin-bottom: 12.8vw;\n      }\n\n      .besty .space-w-style {\n        width: 89.333vw;\n      }\n\n      .besty .space-w-m-t-b {\n        margin-top: 12.8vw;\n        margin-bottom: 12.8vw;\n      }\n\n      .besty .common-text-area {\n        margin-bottom: 5.333vw;\n      }\n\n      .besty .common-title {\n        font-size: 6.4vw;\n        line-height: 8.533vw;\n      }\n\n      .besty .scroll-list {\n        padding-bottom: 0;\n        padding-left: 5.333vw;\n        padding-right: 5.333vw;\n      }\n\n      .besty .scroll-item {\n        width: 76.267vw;\n        margin-left: 5.333vw;\n      }\n\n      .besty .scroll-item-first {\n        margin-left: 0;\n      }\n\n\n\n      .pc_scroll_height_div {\n        display: none\n      }\n\n      .space-w-m-t-b .space-w-style .common-title {\n        padding-top: 12.8vw;\n      }\n\n      .besty .show-big {\n        display: none;\n      }\n\n      .besty .space-w {\n        width: 89.333vw;\n        margin-top: 12.8vw;\n        margin-bottom: 12.8vw;\n      }\n\n      .besty .space-w-style {\n        width: 89.333vw;\n      }\n\n      .besty .space-w-m-t-b {\n        margin-top: 12.8vw;\n        margin-bottom: 12.8vw;\n      }\n\n      .besty .common-text-area {\n        margin-bottom: 5.333vw;\n      }\n\n      .besty .common-title {\n        font-size: 6.4vw;\n        line-height: 8.533vw;\n      }\n\n      .besty .scroll-list {\n        height: 100%;\n        padding-bottom: 12.8vw;\n        padding-left: 5.333vw;\n        padding-right: 5.333vw;\n      }\n\n      .besty .scroll-item {\n        width: 76.267vw;\n        margin-left: 5.333vw;\n      }\n\n      .besty .scroll-item-first {\n        margin-left: 0;\n      }\n\n\n\n      .pc_scroll_height_div {\n        display: none\n      }\n\n      .padding-common {\n        \/* padding-left: 5.208vw;\n        padding-right: 5.208vw; *\/\n        box-sizing: border-box;\n      }\n\n      .title {\n        font-size: 18px;\n        line-height: 8.533vw;\n        text-align: left;\n        font-weight: 600;\n        \/* max-width: 78.125vw; *\/\n        padding-bottom: 0;\n      }\n\n      .banner-bottom-common-title {\n        margin-bottom: 0;\n\n      }\n\n    \n\n      .banner-bottom-common {\n        position: relative;\n        margin-bottom: 12.8vw;\n        width: 100%;\n      }\n\n      .m-4 {\n        margin: 0;\n\n      }\n    }\n  \u003c\/style\u003e  \u003cdiv class=\"besty\"\u003e  \u003c!-- 1 --\u003e  \u003cdiv class=\"banner-bottom-common m-4\" style=\"position: relative;\"\u003e  \u003cdiv class=\"p_b\"\u003e  \u003cdiv class=\"title padding-common banner-bottom-common-title\"\u003eDIY Charms - Ribbon\u003c\/div\u003e  \u003cdiv class=\"desc\"\u003eRemovable, skin-friendly, durable, and made from sustainable materials\u003c\/div\u003e  \u003c\/div\u003e  \u003cpicture\u003e  \u003csource srcset=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/Rectangle%202062-M.jpg\" media=\"(max-width: 768px)\"\u003e  \u003cimg style=\"width: 100%;\" src=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/Rectangle%206421-PC.jpg\" alt=\"VIVAIA\"\u003e\u003c\/picture\u003e  \u003c\/div\u003e  \u003c!-- 2 --\u003e  \u003cdiv class=\"banner-bottom-common space-w\"\u003e  \u003cdiv class=\"title padding-common banner-bottom-common-title\"\u003eMake your own shoes with DIY\u003c\/div\u003e  \u003cdiv class=\"desc\"\u003eCreate three outfits with one shoe charm. Bring out your unknown style.\u003c\/div\u003e  \u003cdiv class=\"show-big\"\u003e\u003cvideo style=\"display: block;\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"100%\"\u003e                  \u003csource src=\"https:\/\/cdnimg.vivaia.com\/VA\/video\/goods_deta\/20230801_6065\/20230731-VIVAIA2-2pc.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\u003c\/div\u003e  \u003cdiv class=\"show-m\"\u003e\u003cvideo style=\"display: block;\" autoplay=\"autoplay\" loop=\"loop\" muted=\"\" controls=\"controls\" width=\"100%\"\u003e                  \u003csource src=\"https:\/\/cdnimg.vivaia.com\/VA\/video\/goods_deta\/20230801_6065\/20230801-VIVAIA2-2m-.mp4\" type=\"video\/mp4\"\u003e\u003c\/video\u003e\u003c\/div\u003e  \u003c\/div\u003e  \u003c!-- 3 --\u003e  \u003cdiv class=\"full-w space-w-m-t-b\" style=\"margin-bottom: 0px; background: linear-gradient(0deg, #F8F7F5, #F8F7F5), #FFFFFF;\"\u003e  \u003cdiv class=\"common-text-area space-w-style\"\u003e  \u003cdiv class=\"common-title\"\u003eReference coordination\u003c\/div\u003e  \u003c\/div\u003e  \u003cdiv class=\"scroll-list\"\u003e  \u003cdiv class=\"scroll-item scroll-item-first\" style=\"position: relative;\"\u003e  \u003cpicture\u003e  \u003csource srcset=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475m.jpg\" media=\"(max-width:768px)\"\u003e  \u003cimg class=\"common-img\" src=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/Rectangle%202058.jpg\" alt=\"\"\u003e\u003c\/picture\u003e  \u003cdiv class=\"new_desc\"\u003eRibbon - Adyna\u003c\/div\u003e  \u003c\/div\u003e  \u003cdiv class=\"scroll-item \" style=\"position: relative;\"\u003e  \u003cpicture\u003e  \u003csource srcset=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475-5-M.jpg\" media=\"(max-width:768px)\"\u003e  \u003cimg class=\"common-img\" src=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6057\/Rectangle%202058-2-PC.jpg\" alt=\"\"\u003e\u003c\/picture\u003e  \u003cdiv class=\"new_desc\"\u003eRibbon - Dora\u003c\/div\u003e  \u003c\/div\u003e  \u003cdiv class=\"scroll-item \" style=\"position: relative;\"\u003e  \u003cpicture\u003e  \u003csource srcset=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475-2-M.jpg\" media=\"(max-width:768px)\"\u003e  \u003cimg class=\"common-img\" src=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6063\/Rectangle%202058-PC.jpg\" alt=\"\"\u003e\u003c\/picture\u003e  \u003cdiv class=\"new_desc\"\u003eRibbon - Elina\u003c\/div\u003e  \u003c\/div\u003e  \u003cdiv class=\"scroll-item \" style=\"position: relative;\"\u003e  \u003cpicture\u003e  \u003csource srcset=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475-1-M.jpg\" media=\"(max-width:768px)\"\u003e  \u003cimg class=\"common-img\" src=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475-1-M.jpg\" alt=\"\"\u003e\u003c\/picture\u003e  \u003cdiv class=\"new_desc\"\u003eRibbon - Droa\u003c\/div\u003e  \u003c\/div\u003e  \u003cdiv class=\"scroll-item \" style=\"position: relative;\"\u003e  \u003cpicture\u003e  \u003csource srcset=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475-3-M.jpg\" media=\"(max-width:768px)\"\u003e  \u003cimg class=\"common-img\" src=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6061\/Rectangle%202058-4-PC.jpg\" alt=\"\"\u003e\u003c\/picture\u003e  \u003cdiv class=\"new_desc\"\u003eRibbon - Cadi\u003c\/div\u003e  \u003c\/div\u003e  \u003cdiv class=\"scroll-item \" style=\"position: relative;\"\u003e  \u003cpicture\u003e  \u003csource srcset=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475-4-M.jpg\" media=\"(max-width:768px)\"\u003e  \u003cimg class=\"common-img\" src=\"https:\/\/cdnimg.vivaia.com\/VA\/image\/goods_deta\/20230801_6065\/image%20475-4-M.jpg\" alt=\"\"\u003e\u003c\/picture\u003e  \u003cdiv class=\"new_desc\"\u003eRibbon - Addie\u003c\/div\u003e  \u003c\/div\u003e  \u003c\/div\u003e  \u003c\/div\u003e  \u003cdiv class=\"pc_scroll_height_div\"\u003e  \u003cdiv class=\"space-w line-scrollbar show-big\"\u003e  \u003cdiv class=\"content\"\u003e  \u003c\/div\u003e  \u003c\/div\u003e  \u003c\/div\u003e  \u003c\/div\u003e  \u003cscript\u003e\n    const scroll_items = document.querySelectorAll('.scroll-list .scroll-item')\n    let scroll_items_sum_width = 0\n    scroll_items.forEach((item, index) =\u003e {\n      if (index === 0) {\n        scroll_items_sum_width += Math.round(parseFloat(getComputedStyle(item).width))\n\n\n      } else {\n        scroll_items_sum_width += Math.round(parseFloat(getComputedStyle(item).width)) + (Math.round(parseFloat(getComputedStyle(item).marginLeft)))\n\n      }\n    })\n    scroll_items_sum_width = scroll_items_sum_width + 2 * parseInt(getComputedStyle(document.querySelector('.scroll-list')).paddingLeft)\n\n    const scollList_width = document.querySelector('.scroll-list').clientWidth\n\n    document.querySelector('.line-scrollbar .content').style.width = (scroll_items_sum_width \/ scollList_width.toFixed(2) * 100) + '%'\n\n    document.querySelector('.line-scrollbar').addEventListener('scroll', e =\u003e handleEvent1(e), false)\n\n    document.querySelector('.scroll-list').addEventListener('scroll', e =\u003e handleEvent2(e), false)\n\n    let slide_switch = 0\n    let timerId\n\n    function debounce () {\n      if (timerId) {\n        clearTimeout(timerId)\n      }\n      timerId = setTimeout(() =\u003e {\n        slide_switch = 0\n      }, 300)\n\n    }\n\n    function handleEvent1 (e) {\n      if (slide_switch === 2) return\n      slide_switch = 1\n      const line_width = parseInt(getComputedStyle(document.querySelector('.line-scrollbar .content')).width)\n      console.log(scroll_items_sum_width, e.target.scrollLeft \/ line_width)\n      console.log(document.querySelector('.scroll-list'))\n\n\n      document.querySelector('.scroll-list').scrollLeft = parseInt(scroll_items_sum_width * (e.target.scrollLeft \/ line_width))\n      debounce()\n    }\n    function handleEvent2 (e) {\n      if (slide_switch === 1) return\n      slide_switch = 2\n      const rate = e.target.scrollLeft \/ scroll_items_sum_width\n      console.log(document.querySelector('.scroll-list').scrollLeft, scroll_items_sum_width)\n\n\n      const bar = document.querySelector('.line-scrollbar')\n\n      bar.scrollLeft = scroll_items_sum_width * rate.toFixed(2)\n      debounce()\n    }\n  \u003c\/script\u003e","products":[],"url":"https:\/\/checkout.vivaia.jp\/en\/collections\/accessories-besty.oembed","provider":"VIVAIA JAPAN","version":"1.0","type":"link"}