{"id":1646,"date":"2026-06-11T01:44:03","date_gmt":"2026-06-10T16:44:03","guid":{"rendered":"https:\/\/web.erikarie.info\/demo4\/?page_id=1646"},"modified":"2026-06-11T01:50:12","modified_gmt":"2026-06-10T16:50:12","slug":"%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%93%e3%82%b8%e3%83%a5%e3%82%a2%e3%82%8b%e3%83%86%e3%82%b9%e3%83%88%ef%bd%9c%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%a7%e5%ba%83%e3%81%8c%e3%82%8b","status":"publish","type":"page","link":"https:\/\/web.erikarie.info\/demo4\/","title":{"rendered":"\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u308b\u30c6\u30b9\u30c8\uff5c\u30b9\u30af\u30ed\u30fc\u30eb\u3067\u5e83\u304c\u308b"},"content":{"rendered":"\n<!-- ============================================================\n     \u30b9\u30af\u30ed\u30fc\u30eb\u3067\u753b\u50cf\u306e\u8868\u793a\u7bc4\u56f2\u304c\u5e83\u304c\u308b\u30d2\u30fc\u30ed\u30fc\u6f14\u51fa\uff08SWELL\u7528\uff09\n     \u4f7f\u3044\u65b9\uff1a\u56fa\u5b9a\u30da\u30fc\u30b8\u306b\u300c\u30ab\u30b9\u30bf\u30e0HTML\u300d\u30d6\u30ed\u30c3\u30af\u3092\u8ffd\u52a0\u3057\u3001\n            \u3053\u306e\u30b3\u30fc\u30c9\u3092\u4e38\u3054\u3068\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002\n     \u753b\u50cf\u5dee\u3057\u66ff\u3048\uff1a\u4e0b\u306e <img decoding=\"async\" src=\"...\"> \u3092\u5909\u66f4\n     ============================================================ -->\n<div class=\"srv-stage\" id=\"srvStage\">\n  <div class=\"srv-sticky\">\n    <div class=\"srv-window\" id=\"srvWindow\">\n      <img decoding=\"async\" class=\"srv-img\" src=\"https:\/\/web.erikarie.info\/demo4\/wp-content\/uploads\/2026\/06\/1000_F_298794120_gcGLH0XBOVCBx5yjbVP7RleCRVpKUUn0.jpg\" alt=\"\u30e1\u30a4\u30f3\u30d3\u30b8\u30e5\u30a2\u30eb\">\n      <div class=\"srv-caption\" id=\"srvCaption\">\n        <span class=\"srv-en\">DISCOVER MORE<\/span>\n        <h2 class=\"srv-ttl\">\u305d\u306e\u5148\u306b\u3042\u308b\u666f\u8272\u3078<\/h2>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* SWELL\u306e\u56fa\u5b9a\u30da\u30fc\u30b8\u4f59\u767d\u30fb\u6700\u5927\u5e45\u3092\u30ea\u30bb\u30c3\u30c8\u3057\u3066\u5168\u5e45\u3067\u898b\u305b\u308b *\/\n.srv-stage{\n  position:relative;\n  height:320vh;                 \/* \u2190 \u6f14\u51fa\u306e\u5c3a\u3002\u5927\u304d\u3044\u307b\u3069\u3086\u3063\u304f\u308a *\/\n  width:100vw;\n  margin-left:calc(50% - 50vw); \/* \u89aa\u8981\u7d20\u306e\u5de6\u53f3\u4f59\u767d\u3092\u6253\u3061\u6d88\u3057\u3066\u5168\u5e45\u5316 *\/\n  margin-right:calc(50% - 50vw);\n}\n.srv-sticky{\n  position:sticky;\n  top:0;\n  height:100vh;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  background:#e9e3d6;            \/* \u2190 \u4f59\u767d\u306e\u80cc\u666f\u8272\u3002\u304a\u597d\u307f\u3067 *\/\n  overflow:hidden;\n}\n.srv-window{\n  position:relative;\n  overflow:hidden;\n  border-radius:4px;\n  will-change:width,height,border-radius;\n  box-shadow:0 30px 60px -25px rgba(28,26,23,.45);\n}\n.srv-img{\n  position:absolute;\n  top:50%;left:50%;\n  transform:translate(-50%,-50%);\n  width:100vw;\n  height:100vh;\n  object-fit:cover;\n  display:block;\n  max-width:none;               \/* SWELL\u306eimg\u5e45\u5236\u9650\u3092\u89e3\u9664 *\/\n}\n.srv-caption{\n  position:absolute;\n  left:0;right:0;bottom:0;\n  padding:2.5rem 2rem;\n  color:#fff;\n  text-align:center;\n  background:linear-gradient(to top,rgba(20,18,15,.7),transparent);\n  opacity:0;\n  transform:translateY(20px);\n  transition:opacity .5s ease,transform .5s ease;\n}\n.srv-caption.is-show{opacity:1;transform:translateY(0)}\n.srv-en{\n  display:block;\n  font-family:\"Helvetica Neue\",sans-serif;\n  letter-spacing:.35em;\n  font-size:.7rem;\n  opacity:.85;\n}\n.srv-ttl{\n  color:#fff;\n  font-weight:400;\n  font-size:clamp(1.4rem,4vw,2.4rem);\n  letter-spacing:.08em;\n  margin:.4rem 0 0;\n}\n@media (prefers-reduced-motion:reduce){\n  .srv-stage{height:auto}\n  .srv-sticky{position:static;height:auto;padding:6vh 1rem}\n  .srv-window{width:min(92vw,1100px)!important;height:auto!important;aspect-ratio:16\/9}\n  .srv-img{position:static;transform:none;width:100%;height:100%}\n  .srv-caption{opacity:1;transform:none}\n}\n<\/style>\n\n<script>\n(function(){\n  var stage   = document.getElementById('srvStage');\n  var win     = document.getElementById('srvWindow');\n  var caption = document.getElementById('srvCaption');\n  if(!stage || !win) return;\n\n  \/\/ \u6700\u521d\u306b\u898b\u305b\u308b\u300c\u306e\u305e\u304d\u7a93\u300d\u306e\u30b5\u30a4\u30ba\uff08px\uff09\n  var START_W = 300, START_H = 300, START_R = 4;\n\n  function update(){\n    var rect  = stage.getBoundingClientRect();\n    var total = stage.offsetHeight - window.innerHeight;\n    if(total <= 0) return;\n    var p = -rect.top \/ total;            \/\/ 0(\u958b\u59cb) \u2192 1(\u5168\u4f53\u8868\u793a)\n    p = Math.min(1, Math.max(0, p));\n    var e = p * p * (3 - 2 * p);          \/\/ smoothstep\n\n    var w = START_W + (window.innerWidth  - START_W) * e;\n    var h = START_H + (window.innerHeight - START_H) * e;\n    var r = START_R * (1 - e);\n\n    win.style.width  = w + 'px';\n    win.style.height = h + 'px';\n    win.style.borderRadius = r + 'px';\n\n    if(caption){\n      if(e > 0.9) caption.classList.add('is-show');\n      else        caption.classList.remove('is-show');\n    }\n  }\n\n  var ticking = false;\n  function onScroll(){\n    if(!ticking){\n      window.requestAnimationFrame(function(){ update(); ticking=false; });\n      ticking = true;\n    }\n  }\n  window.addEventListener('scroll', onScroll, {passive:true});\n  window.addEventListener('resize', update);\n  update();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>DISCOVER MORE \u305d\u306e\u5148\u306b\u3042\u308b\u666f\u8272\u3078<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-1646","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/pages\/1646","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/comments?post=1646"}],"version-history":[{"count":3,"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/pages\/1646\/revisions"}],"predecessor-version":[{"id":1652,"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/pages\/1646\/revisions\/1652"}],"wp:attachment":[{"href":"https:\/\/web.erikarie.info\/demo4\/wp-json\/wp\/v2\/media?parent=1646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}