{"id":6,"date":"2023-07-03T14:24:35","date_gmt":"2023-07-03T05:24:35","guid":{"rendered":"https:\/\/www.eliale.co.jp\/?page_id=6"},"modified":"2025-06-13T18:57:24","modified_gmt":"2025-06-13T09:57:24","slug":"%e5%84%aa%e3%82%8c%e3%81%9f%e3%82%af%e3%83%aa%e3%82%a8%e3%83%bc%e3%82%bf%e3%83%bc%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e7%be%8e%e3%81%97%e3%81%84%e3%83%9d%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%aa","status":"publish","type":"page","link":"https:\/\/www.eliale.co.jp\/","title":{"rendered":"\u30c8\u30c3\u30d7\u30da\u30fc\u30b8"},"content":{"rendered":"\n<div class=\"swell-block-fullWide pc-py-40 sp-py-40 has-bg-img -parallax alignfull lazyload animated fadeInBottomRight  u-mb-ctrl u-mb-0\" style=\"background-color:rgba(255, 255, 255, 0.5)\" data-bg=\"https:\/\/www.eliale.co.jp\/wp-content\/uploads\/2025\/06\/AdobeStock_1503121076-scaled-e1749799662545.jpeg\"><div class=\"swell-block-fullWide__inner l-article\">\n<h2 class=\"wp-block-heading is-style-section_ttl\">\u682a\u5f0f\u4f1a\u793eEliAle\u306b\u3064\u3044\u3066<\/h2>\n\n\n\n<!-- \u25bc \u5916\u67a0\u30a2\u30cb\u30e1\u4ed8\u304d\u30bb\u30af\u30b7\u30e7\u30f3 -->\n<div class=\"stroke anim\" id=\"eliale-stroke\">\n  <div class=\"border top\"><\/div>\n  <div class=\"border right\"><\/div>\n  <div class=\"border bottom\"><\/div>\n  <div class=\"border left\"><\/div>\n\n  <!-- \u25bc EliAle \u30bb\u30af\u30b7\u30e7\u30f3\u5185\u5bb9 \u25bc -->\n  <div id=\"eliale-container\" style=\"text-align: center; padding: 40px 20px;\">\n    <div id=\"letters\" style=\"font-size: 64px; font-weight: 700;\">\n      <span class=\"letter\">E<\/span>\n      <span class=\"letter\">l<\/span>\n      <span class=\"letter\">i<\/span>\n      <span class=\"letter\">A<\/span>\n      <span class=\"letter\">l<\/span>\n      <span class=\"letter\">e<\/span>\n    <\/div>\n    <div id=\"meanings\" style=\"margin-top: 30px;\">\n      <p class=\"meaning\">\u4ed5\u4e8b\u3092\u697d\u3057\u304f <span class=\"highlight\">(Enjoy)<\/span><\/p>\n      <p class=\"meaning\">\u65e5\u3005\u306e\u751f\u6d3b <span class=\"highlight\">(Life)<\/span> \u3092<\/p>\n      <p class=\"meaning\">\u9762\u767d\u3044 <span class=\"highlight\">(Interesting)<\/span> \u3068\u601d\u3048\u308b\u3082\u306e\u306b\u3002<\/p>\n      <p class=\"meaning\">\u4e00\u4eba\u4e00\u4eba\u304c\u610f\u601d\u3092\u6301\u3063\u3066\u884c\u52d5 <span class=\"highlight\">(Act)<\/span> \u3057\u3066\u3044\u3051\u308b\u3088\u3046\u306b\u3002<\/p>\n      <p class=\"meaning\">\u3053\u306e\u4f1a\u793e\u304c\u6700\u5f8c <span class=\"highlight\">(Last)<\/span> \u306e\u62e0\u308a\u6240\u3067\u3042\u308b\u3088\u3046\u306b\u3002<\/p>\n      <p class=\"meaning\">\u6642\u306b\u306f\u793e\u54e1\u304c\u308f\u304c\u307e\u307e <span class=\"highlight\">(Ego)<\/span> \u3092\u8a00\u3048\u308b\u74b0\u5883\u306b\u3002<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- \u25bc CSS\uff08\u5168\u4f53\uff09 -->\n<style>\n\/* \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7528\u30e9\u30c3\u30d1\u30fc *\/\n.stroke {\n  opacity: 0;\n  transform: translate(80px, 60px);\n  transition: opacity 1.2s ease-out, transform 1.2s ease-out;\n  background: #f9f9f9;\n  max-width: 800px;\n  margin: 80px auto;\n  position: relative;\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.stroke.is-animated {\n  opacity: 1;\n  transform: translate(0, 0);\n}\n\n.stroke .border {\n  position: absolute;\n  opacity: 0;\n}\n\n.stroke .border.top,\n.stroke .border.bottom {\n  width: calc(100% - 20px);\n}\n\n.stroke .border.top {\n  border-top: 3px solid #362ae0;\n  right: 0;\n  top: 0;\n}\n\n.stroke .border.bottom {\n  border-bottom: 3px solid #362ae0;\n  left: 0;\n  bottom: 0;\n}\n\n.stroke .border.right,\n.stroke .border.left {\n  height: calc(100% - 20px);\n}\n\n.stroke .border.right {\n  border-right: 3px solid #362ae0;\n  right: 0;\n  top: 0;\n}\n\n.stroke .border.left {\n  border-left: 3px solid #362ae0;\n  left: 0;\n  bottom: 0;\n}\n\n.stroke.is-animated .border {\n  opacity: 1;\n}\n\n.stroke.is-animated .border.top,\n.stroke.is-animated .border.bottom {\n  animation: stroke-width 1.8s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.stroke.is-animated .border.right,\n.stroke.is-animated .border.left {\n  animation: stroke-height 1.8s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n@keyframes stroke-width {\n  0% { width: 0; opacity: 1; }\n  100% { width: calc(100% - 20px); opacity: 1; }\n}\n\n@keyframes stroke-height {\n  0% { height: 0; opacity: 1; }\n  100% { height: calc(100% - 20px); opacity: 1; }\n}\n\n#letters .letter {\n  opacity: 0;\n  display: inline-block;\n  margin: 0 8px;\n  color: #000;\n  text-shadow: 12px 6px 30px rgba(0, 0, 0, 0.4);\n  transition: opacity 0.6s ease, transform 0.6s ease;\n  transform: translateY(20px);\n}\n\n#letters .letter.shown {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n#meanings .meaning {\n  opacity: 0;\n  font-size: 18px;\n  margin: 10px 0;\n  color: #333;\n  transition: opacity 0.6s ease;\n}\n\n#meanings .meaning.shown {\n  opacity: 1;\n}\n\n.highlight {\n  color: #C3922F;\n  font-weight: bold;\n  animation: glow 2s infinite alternate;\n}\n\n@keyframes glow {\n  from {\n    text-shadow: 0 0 6px #C3922F;\n  }\n  to {\n    text-shadow: 0 0 20px #C3922F;\n  }\n}\n<\/style>\n\n<!-- \u25bc JavaScript\uff08\u30b9\u30af\u30ed\u30fc\u30eb\u6642\u306b\u8868\u793a\uff09 -->\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    const section = document.querySelector('.stroke');\n    const letters = document.querySelectorAll(\"#letters .letter\");\n    const meanings = document.querySelectorAll(\"#meanings .meaning\");\n\n    const observer = new IntersectionObserver(entries => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          section.classList.add(\"is-animated\");\n          letters.forEach((letter, index) => {\n            setTimeout(() => {\n              letter.classList.add(\"shown\");\n              meanings[index]?.classList.add(\"shown\");\n            }, (index + 1) * 400);\n          });\n          observer.unobserve(section);\n        }\n      });\n    }, { threshold: 0.3 });\n\n    observer.observe(section);\n  });\n<\/script>\n\n\n\n<pre id=\"block-1e833297-0860-40fd-bfaa-1498ec5cead5\" class=\"wp-block-preformatted\">\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000<\/pre>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-black-color has-alpha-channel-opacity has-black-background-color has-background is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center is-style-section_ttl\">\u3054\u6848\u5185<\/h2>\n\n\n\n<div style=\"perspective: 1200px; height: 400px; display: flex; justify-content: center; align-items: center; overflow: hidden;\">\n  <div class=\"carousel3d\" style=\"position: relative; width: 300px; height: 300px; transform-style: preserve-3d; animation: spin 20s linear infinite; animation-play-state: running;\">\n\n    <!-- \u30ab\u30fc\u30c91 -->\n    <a href=\"https:\/\/www.eliale.co.jp\/?page_id=7\" class=\"card card-shadow\" style=\"transform: rotateY(0deg) translateZ(400px);\">\n      <img decoding=\"async\" src=\"https:\/\/www.eliale.co.jp\/wp-content\/uploads\/2025\/06\/AdobeStock_234538987-scaled.jpeg\" alt=\"\u4f1a\u793e\u6982\u8981\">\n      <div class=\"caption\">\u4f1a\u793e\u6982\u8981<\/div>\n    <\/a>\n\n    <!-- \u30ab\u30fc\u30c92 -->\n    <a href=\"https:\/\/www.eliale.co.jp\/?page_id=8\" class=\"card card-shadow\" style=\"transform: rotateY(72deg) translateZ(400px);\">\n      <img decoding=\"async\" src=\"https:\/\/www.eliale.co.jp\/wp-content\/uploads\/2025\/06\/AdobeStock_303760065-scaled.jpeg\" alt=\"\u304a\u554f\u3044\u5408\u308f\u305b\">\n      <div class=\"caption\">\u304a\u554f\u3044\u5408\u308f\u305b<\/div>\n    <\/a>\n\n    <!-- \u30ab\u30fc\u30c93 -->\n    <a href=\"https:\/\/arwrk.net\/recruit\/z9rbxfif7ii2rvy\" class=\"card card-shadow\" style=\"transform: rotateY(144deg) translateZ(400px);\">\n      <img decoding=\"async\" src=\"https:\/\/www.eliale.co.jp\/wp-content\/uploads\/2025\/06\/AdobeStock_749827512-scaled.jpeg\" alt=\"\u6c42\u4eba\u60c5\u5831\">\n      <div class=\"caption\">\u6c42\u4eba\u60c5\u5831<\/div>\n    <\/a>\n\n    <!-- \u30ab\u30fc\u30c94 -->\n    <a href=\"https:\/\/www.eliale.co.jp\/?page_id=307\" class=\"card card-shadow\" style=\"transform: rotateY(216deg) translateZ(400px);\">\n      <img decoding=\"async\" src=\"https:\/\/www.eliale.co.jp\/wp-content\/uploads\/2025\/06\/AdobeStock_1033780748-scaled.jpeg\" alt=\"\u4e8b\u696d\u5185\u5bb9\">\n      <div class=\"caption\">\u4e8b\u696d\u5185\u5bb9<\/div>\n    <\/a>\n\n    <!-- \u30ab\u30fc\u30c95 -->\n    <a href=\"\/gallery\" class=\"card card-shadow\" style=\"transform: rotateY(288deg) translateZ(400px);\">\n      <img decoding=\"async\" src=\"https:\/\/www.eliale.co.jp\/wp-content\/uploads\/2025\/06\/AdobeStock_116671774-scaled.jpeg\" alt=\"\u30ae\u30e3\u30e9\u30ea\u30fc\">\n      <div class=\"caption\">\u30ae\u30e3\u30e9\u30ea\u30fc<\/div>\n    <\/a>\n\n  <\/div>\n<\/div>\n\n<style>\n@keyframes spin {\n  from { transform: rotateY(0deg); }\n  to   { transform: rotateY(360deg); }\n}\n\n.carousel3d:hover {\n  animation-play-state: paused !important;\n}\n\n.card {\n  position: absolute;\n  width: 160px;\n  height: 240px;\n  top: 30px;\n  left: 70px;\n  border-radius: 12px;\n  overflow: hidden;\n  transform-style: preserve-3d;\n  text-decoration: none;\n  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;\n}\n\n.card img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  filter: brightness(0.95) contrast(1.05);\n}\n\n.card .caption {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background: rgba(0,0,0,0.55);\n  color: white;\n  font-size: 18px;\n  font-weight: bold;\n  text-align: center;\n  padding: 10px;\n  box-sizing: border-box;\n}\n\n.card-shadow {\n  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);\n}\n\n.card-shadow:hover {\n  transform: scale(1.07) translateZ(20px);\n  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);\n  filter: brightness(1.05);\n}\n\n\/* \u30e2\u30d0\u30a4\u30eb\u5bfe\u5fdc *\/\n@media screen and (max-width: 768px) {\n  .card {\n    width: 120px !important;\n    height: 180px !important;\n  }\n  .card .caption {\n    font-size: 14px;\n    padding: 8px;\n  }\n}\n\n\n<\/style>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","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-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":132,"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":386,"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/386"}],"wp:attachment":[{"href":"https:\/\/www.eliale.co.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}