{"id":22521,"date":"2025-05-20T14:51:51","date_gmt":"2025-05-20T05:51:51","guid":{"rendered":"https:\/\/rika.honoya-shop.jp\/?p=22521"},"modified":"2025-05-21T16:48:33","modified_gmt":"2025-05-21T07:48:33","slug":"elementor-22521","status":"publish","type":"post","link":"https:\/\/rika.honoya-shop.jp\/?p=22521","title":{"rendered":"Elementor #22521"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"22521\" class=\"elementor elementor-22521\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43f78a2a e-flex e-con-boxed e-con e-parent\" data-id=\"43f78a2a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b28cfe8 elementor-widget elementor-widget-text-editor\" data-id=\"5b28cfe8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\n<p class=\"wp-block-paragraph\">6789<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8b0e0c9 e-flex e-con-boxed e-con e-parent\" data-id=\"8b0e0c9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-569b7bf e-con-full e-flex e-con e-child\" data-id=\"569b7bf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-012210e e-con-full reboot-stacking-card-area e-flex e-con e-child\" data-id=\"012210e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-7b2f025 e-flex e-con-boxed e-con e-child\" data-id=\"7b2f025\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-35a21a9 e-con-full e-flex e-con e-child\" data-id=\"35a21a9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-414c681 elementor-widget elementor-widget-heading\" data-id=\"414c681\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Features<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-22385ea elementor-widget elementor-widget-text-editor\" data-id=\"22385ea\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u543e\u8f29\u306f\u732b\u3067\u3042\u308b\u3002\u540d\u524d\u306f\u307e\u3060\u306a\u3044\u3002\u3069\u3053\u3067\u751f\u308c\u305f\u304b\u9813\u3068\u898b\u5f53\u304c\u3064\u304b\u306c\u3002\u4f55\u3067\u3082\u8584\u6697\u3044\u3058\u3081\u3058\u3081\u3057\u305f\u6240\u3067\u30cb\u30e3\u30fc\u30cb\u30e3\u30fc\u6ce3\u3044\u3066\u3044\u305f\u4e8b\u3060\u3051\u306f\u8a18\u61b6\u3057\u3066\u3044\u308b\u3002<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f19d8d2 elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"f19d8d2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">See More Details<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd8cce1 e-con-full reboot-stacked-cards e-flex e-con e-child\" data-id=\"dd8cce1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a80a330 e-con-full e-flex e-con e-child\" data-id=\"a80a330\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-21596ca elementor-widget elementor-widget-heading\" data-id=\"21596ca\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Benefit<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-64cbbbd elementor-widget elementor-widget-heading\" data-id=\"64cbbbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Benefits We'll Use Everyday<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b66b61e e-con-full e-flex e-con e-child\" data-id=\"b66b61e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-03563ba elementor-widget elementor-widget-heading\" data-id=\"03563ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Money<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78b1ed9 elementor-widget elementor-widget-heading\" data-id=\"78b1ed9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Promote Financial Wellbeing<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3cb4868 e-con-full e-flex e-con e-child\" data-id=\"3cb4868\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab4d1fd elementor-widget elementor-widget-heading\" data-id=\"ab4d1fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our People<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-260e6b6 elementor-widget elementor-widget-heading\" data-id=\"260e6b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Friendly Staff Ready To Help<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0cc4150 e-con-full e-flex e-con e-child\" data-id=\"0cc4150\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5cfb36e elementor-widget elementor-widget-heading\" data-id=\"5cfb36e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Jobs<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-499dae3 elementor-widget elementor-widget-heading\" data-id=\"499dae3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Find Great People<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1768400 e-con-full e-flex e-con e-child\" data-id=\"1768400\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-218d2cf elementor-widget elementor-widget-heading\" data-id=\"218d2cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Benefit<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9cd4dd elementor-widget elementor-widget-heading\" data-id=\"d9cd4dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Benefits We'll Use Everyday<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-913c6ed e-con-full e-flex e-con e-child\" data-id=\"913c6ed\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc48972 elementor-widget elementor-widget-heading\" data-id=\"dc48972\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Money<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94ca33b elementor-widget elementor-widget-heading\" data-id=\"94ca33b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Promote Financial Wellbeing<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9d4445a e-con-full e-flex e-con e-child\" data-id=\"9d4445a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;,&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f4406df elementor-widget elementor-widget-heading\" data-id=\"f4406df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our People<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bbbf0c elementor-widget elementor-widget-heading\" data-id=\"0bbbf0c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Friendly Staff Ready To Help<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38675f8 elementor-widget elementor-widget-html\" data-id=\"38675f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u2705 HTML\u69cb\u9020 -->\r\n<div class=\"reboot-stacking-card-area\">\r\n  <div class=\"reboot-stacked-cards\">\r\n    <div class=\"stack-card\"><h2>Our Benefit<\/h2><p>Benefits We'll Use Everyday<\/p><\/div>\r\n    <div class=\"stack-card\"><h2>Our Money<\/h2><p>Promote Financial Wellbeing<\/p><\/div>\r\n    <div class=\"stack-card\"><h2>Our People<\/h2><p>Friendly Staff Ready To Help<\/p><\/div>\r\n    <div class=\"stack-card\"><h2>Our Jobs<\/h2><p>Find Great People<\/p><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2705 CSS\u30b9\u30bf\u30a4\u30eb -->\r\n<style>\r\n.reboot-stacking-card-area {\r\n  position: relative;\r\n  height: 100vh;\r\n  perspective: 1000px;\r\n  --card-scroll-height: 400;\r\n  --card-rotate: 15;\r\n  overflow-x: hidden;\r\n}\r\n\r\n.reboot-stacked-cards {\r\n  position: sticky;\r\n  top: 50px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n}\r\n\r\n.stack-card {\r\n  background: linear-gradient(to right, #ffecd2, #fcb69f);\r\n  border-radius: 12px;\r\n  padding: 30px;\r\n  margin: 0 auto 50px;\r\n  width: 90%;\r\n  max-width: 350px;\r\n  height: 250px;\r\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\r\n  transform-origin: bottom center;\r\n  transform-style: preserve-3d;\r\n  transition: transform 0.6s ease, opacity 0.3s ease;\r\n  opacity: 0;\r\n}\r\n\r\n.stack-card.reboot-active-card {\r\n  opacity: 1;\r\n}\r\n<\/style>\r\n\r\n<!-- \u2705 JavaScript -->\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\r\n<script>\r\nif (!window.rebootNonce100) {\r\n  window.rebootNonce100 = true;\r\n\r\n  $(document).ready(function () {\r\n    const $cards = $('.stack-card');\r\n    const $area = $('.reboot-stacking-card-area');\r\n    const scrollHeight = parseInt(getComputedStyle($area[0]).getPropertyValue('--card-scroll-height')) || 400;\r\n    const rotateDeg = parseInt(getComputedStyle($area[0]).getPropertyValue('--card-rotate')) || 15;\r\n\r\n    function updateCards() {\r\n      const scrollTop = $(window).scrollTop();\r\n      const areaTop = $area.offset().top;\r\n      const index = Math.floor((scrollTop - areaTop) \/ scrollHeight);\r\n\r\n      $cards.each(function (i) {\r\n        const angle = (index - i) * rotateDeg;\r\n        if (i <= index) {\r\n          $(this).addClass('reboot-active-card');\r\n        } else {\r\n          $(this).removeClass('reboot-active-card');\r\n        }\r\n        $(this).css('transform', `rotateX(${angle}deg)`);\r\n      });\r\n    }\r\n\r\n    $(window).on('scroll resize', updateCards);\r\n    updateCards();\r\n  });\r\n}\r\n<\/script>\r\n\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\r\n<script>\r\n\r\nif(!rebootNonce100){\r\n    \r\nvar rebootNonce100 = true\r\n\r\n$(document).ready(function() {\r\n    \r\nvar previousScrollTop = [],\r\ncards = [],\r\ncardScrollHeight = [],\r\ncardRotate = [],\r\ncardContainer = [],\r\nstickyTop = [],\r\nstickyCon = []\r\n\r\nfunction cardSlideUp(){\r\n\r\n$('.reboot-stacking-card-area').each(function(i){\r\n    \r\n    var $this = $(this),\r\n    scrollTop = $(document).scrollTop(),\r\n    cardAreaTop = $this.offset().top,\r\n    index = Math.floor((scrollTop - cardAreaTop - stickyTop[i]) \/ cardScrollHeight[i]),\r\n    totalCards = cards[i].length\r\n    \r\n    cards[i].removeClass('reboot-active-card')\r\n    cards[i].each(function(j){\r\n        if( j <= index ) {\r\n            $(this).addClass('reboot-active-card')\r\n        }\r\n        if(index >= -1 && index < totalCards - 1){\r\n            $(this).css({\r\n                'transform': `rotate(${ -1*j*cardRotate[i] + (index+1)*cardRotate[i] }deg)`\r\n            })\r\n        }\r\n    })\r\n    \r\n    previousScrollTop[i] = scrollTop\r\n})\r\n\r\n}\r\n\r\nfunction setValues(){\r\n$('.reboot-stacking-card-area').each(function(i){\r\n    var $this = $(this)\r\n    stickyTop[i] = 0\r\n    if(stickyCon[i].outerHeight() > $(window).height()){\r\n        stickyTop[i] = cardContainer[i].offset().top - stickyCon[i].offset().top - $(window).height()\/2\r\n    }\r\n    stickyCon[i].css('top', -1*stickyTop[i])\r\n    cardScrollHeight[i] = $this.css('--card-scroll-height') ? parseInt($this.css('--card-scroll-height').trim()) : 400\r\n    cardRotate[i] = $this.css('--card-rotate') ? parseInt($this.css('--card-rotate').trim()) : 9\r\n    cards[i].each(function(j) {\r\n        $(this).css({\r\n            'transform': `rotate(-${j * cardRotate[i]}deg)`,\r\n            'z-index': cards[i].length - j\r\n        })\r\n    })\r\n    $this.css('height', stickyCon[i].outerHeight() +  ((cards[i].length - 1) * cardScrollHeight[i]) + 'px' )\r\n})\r\n\r\n}\r\n\r\n$(document).on('scroll', cardSlideUp)\r\n$(window).on('resize', function(){\r\n    setValues()\r\n    cardSlideUp()\r\n})\r\n\r\nfunction init(){\r\n$('.reboot-stacking-card-area').each(function(i){\r\n    var $this = $(this)\r\n    cards[i] = $this.find('.reboot-stacked-cards > .e-con, .reboot-stacked-cards > .e-container, .reboot-stacked-cards > .e-con-inner > .e-con, .reboot-stacked-cards > .e-con-inner > .e-container')\r\n    stickyCon[i] = $this.children('.e-con, .e-container').eq(0)\r\n    stickyCon[i].parents().each(function(){\r\n        if( !$(this).is('html') ){ $(this).css('overflow', 'visible') }\r\n    })\r\n    previousScrollTop[i] = $(document).scrollTop()\r\n    cardContainer[i] = $this.find('.reboot-stacked-cards')\r\n})\r\n\r\nsetValues()\r\ncardSlideUp()\r\n}\r\n\r\ninit()\r\n    \r\n})\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a1e192f e-flex e-con-boxed e-con e-parent\" data-id=\"a1e192f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-751ec04 e-con-full e-flex e-con e-child\" data-id=\"751ec04\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6eef9ee elementor-widget elementor-widget-html\" data-id=\"6eef9ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u2705 HTML\u90e8\u5206 -->\n<div class=\"reboot-stacking-card-area\">\n  <div class=\"reboot-stacked-cards\">\n    <div class=\"stack-card\"><h2>Card 1<\/h2><p>Benefits We'll Use Everyday<\/p><\/div>\n    <div class=\"stack-card\"><h2>Card 2<\/h2><p>Promote Financial Wellbeing<\/p><\/div>\n    <div class=\"stack-card\"><h2>Card 3<\/h2><p>Friendly Staff Ready To Help<\/p><\/div>\n    <div class=\"stack-card\"><h2>Card 4<\/h2><p>Find Great People<\/p><\/div>\n  <\/div>\n<\/div>\n\n<!-- \u2705 CSS -->\n<style>\nhtml, body {\n  margin: 0;\n  padding: 0;\n}\n.reboot-stacking-card-area {\n  position: relative;\n  height: 2500px; \/* \u30b9\u30af\u30ed\u30fc\u30eb\u91cf\u306b\u5fdc\u3058\u3066\u8abf\u6574\u53ef *\/\n  perspective: 1200px;\n  --card-scroll-height: 400;\n  --card-rotate: 15;\n}\n.reboot-stacked-cards {\n  position: sticky;\n  top: 100px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.stack-card {\n  background: linear-gradient(to right, #f8f8f8, #e0e0e0);\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 60px;\n  width: 90%;\n  max-width: 350px;\n  height: 250px;\n  box-shadow: 0 8px 20px rgba(0,0,0,0.15);\n  transform-origin: bottom center;\n  transform-style: preserve-3d;\n  opacity: 0;\n  transition: transform 0.5s ease, opacity 0.3s ease;\n}\n.stack-card.reboot-active-card {\n  opacity: 1;\n}\n<\/style>\n\n<!-- \u2705 JavaScript -->\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\n<script>\nif (!window.rebootNonce100) {\n  window.rebootNonce100 = true;\n\n  $(document).ready(function () {\n    const $area = $('.reboot-stacking-card-area');\n    const $cards = $('.stack-card');\n    const scrollHeight = parseInt(getComputedStyle($area[0]).getPropertyValue('--card-scroll-height')) || 400;\n    const rotateDeg = parseInt(getComputedStyle($area[0]).getPropertyValue('--card-rotate')) || 15;\n\n    function updateCards() {\n      const scrollTop = $(window).scrollTop();\n      const areaTop = $area.offset().top;\n      const index = Math.floor((scrollTop - areaTop) \/ scrollHeight);\n\n      $cards.each(function (i) {\n        const angle = (index - i) * rotateDeg;\n        if (i <= index) {\n          $(this).addClass('reboot-active-card');\n        } else {\n          $(this).removeClass('reboot-active-card');\n        }\n        $(this).css('transform', `rotateX(${angle}deg)`);\n      });\n    }\n\n    $(window).on('scroll resize', updateCards);\n    updateCards();\n  });\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f49d742 e-flex e-con-boxed e-con e-parent\" data-id=\"f49d742\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a2e3c38 e-con-full e-flex e-con e-child\" data-id=\"a2e3c38\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-91e1f89 elementor-widget elementor-widget-html\" data-id=\"91e1f89\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u2705 \u30b9\u30af\u30ed\u30fc\u30eb3D\u30ab\u30fc\u30c9\uff1aElementor\u7528 -->\n<div style=\"height: 3000px;\">\n  <div class=\"reboot-stacking-card-area\">\n    <div class=\"reboot-stacked-cards\">\n      <div class=\"stack-card\"><h2>Card 1<\/h2><p>Benefits We'll Use Everyday<\/p><\/div>\n      <div class=\"stack-card\"><h2>Card 2<\/h2><p>Promote Financial Wellbeing<\/p><\/div>\n      <div class=\"stack-card\"><h2>Card 3<\/h2><p>Friendly Staff Ready To Help<\/p><\/div>\n      <div class=\"stack-card\"><h2>Card 4<\/h2><p>Find Great People<\/p><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\nhtml, body {\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n}\n.reboot-stacking-card-area {\n  position: relative;\n  height: 100vh;\n  perspective: 1000px;\n  --card-scroll-height: 400;\n  --card-rotate: 15;\n}\n.reboot-stacked-cards {\n  position: sticky;\n  top: 120px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.stack-card {\n  background: linear-gradient(to right, #e0c3fc, #8ec5fc);\n  border-radius: 16px;\n  padding: 30px;\n  margin-bottom: 80px;\n  width: 90%;\n  max-width: 350px;\n  height: 250px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n  transform-origin: bottom center;\n  transform-style: preserve-3d;\n  transition: transform 0.5s ease, opacity 0.4s ease;\n  opacity: 0;\n}\n.stack-card.reboot-active-card {\n  opacity: 1;\n}\n<\/style>\n\n<script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.min.js\"><\/script>\n<script>\nif (!window.rebootStackInitialized) {\n  window.rebootStackInitialized = true;\n\n  jQuery(document).ready(function ($) {\n    const $area = $('.reboot-stacking-card-area');\n    const $cards = $('.stack-card');\n    const scrollHeight = parseInt(getComputedStyle($area[0]).getPropertyValue('--card-scroll-height')) || 400;\n    const rotateDeg = parseInt(getComputedStyle($area[0]).getPropertyValue('--card-rotate')) || 15;\n\n    function updateCards() {\n      const scrollTop = $(window).scrollTop();\n      const areaTop = $area.offset().top;\n      const index = Math.floor((scrollTop - areaTop) \/ scrollHeight);\n\n      $cards.each(function (i) {\n        const angle = (index - i) * rotateDeg;\n        if (i <= index) {\n          $(this).addClass('reboot-active-card');\n        } else {\n          $(this).removeClass('reboot-active-card');\n        }\n        $(this).css('transform', `rotateX(${angle}deg)`);\n      });\n    }\n\n    $(window).on('scroll resize', updateCards);\n    updateCards();\n  });\n}\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>6789 Our Features \u543e\u8f29&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"vkexunit_cta_each_option":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-22521","post","type-post","status-publish","format-standard","hentry","category-hokkaido-farmer"],"acf":[],"_links":{"self":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts\/22521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22521"}],"version-history":[{"count":13,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts\/22521\/revisions"}],"predecessor-version":[{"id":22534,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=\/wp\/v2\/posts\/22521\/revisions\/22534"}],"wp:attachment":[{"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rika.honoya-shop.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}