{"id":535,"date":"2026-05-14T08:42:07","date_gmt":"2026-05-13T23:42:07","guid":{"rendered":"https:\/\/hiroshima-akiya.jp\/web\/?page_id=535"},"modified":"2026-05-14T22:02:09","modified_gmt":"2026-05-14T13:02:09","slug":"%e3%83%86%e3%82%b9%e3%83%88-2","status":"publish","type":"page","link":"https:\/\/hiroshima-akiya.jp\/?page_id=535","title":{"rendered":"\u30c6\u30b9\u30c8"},"content":{"rendered":"<style>\r\n.estate-card-list {\r\n  display: grid;\r\n  grid-template-columns: repeat(2, 1fr);\r\n  gap: 30px;\r\n}\r\n\r\n.estate-card {\r\n  --estate-anime-speed: 1.6s;\r\n  --estate-anime-ease: cubic-bezier(0.22, 1, 0.36, 1);\r\n\r\n  position: relative;\r\n  display: block;\r\n  width: 100%;\r\n  aspect-ratio: 3 \/ 2;\r\n  overflow: hidden;\r\n  background-size: cover;\r\n  background-position: center;\r\n  text-decoration: none;\r\n  color: #fff !important;\r\n}\r\n\r\n\/* \u30c6\u30fc\u30de\u5074\u306e a:hover \u306a\u3069\u3067\u6587\u5b57\u8272\u304c\u5909\u308f\u308b\u306e\u3092\u9632\u3050 *\/\r\n.estate-card,\r\n.estate-card:link,\r\n.estate-card:visited,\r\n.estate-card:hover,\r\n.estate-card:active,\r\n.estate-card:focus,\r\n.estate-card * {\r\n  color: #fff !important;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* \u901a\u5e38\u6642\uff1a\u4e0b\u3060\u3051\u30b0\u30e9\u30c7\u30fc\u30b7\u30e7\u30f3 *\/\r\n.estate-card__overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n  background: linear-gradient(\r\n    to bottom,\r\n    rgba(120, 120, 120, 0) 0%,\r\n    rgba(120, 120, 120, 0.15) 42%,\r\n    rgba(120, 120, 120, 0.75) 100%\r\n  );\r\n}\r\n\r\n\/* \u30ed\u30fc\u30eb\u30aa\u30fc\u30d0\u30fc\u6642\u306b\u5168\u4f53\u3078\u5747\u4e00\u306b\u304b\u304b\u308b\u30b0\u30ec\u30fc *\/\r\n.estate-card__overlay::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  inset: 0;\r\n  background: rgba(110, 110, 110, 0.88);\r\n  opacity: 0;\r\n  transition: opacity var(--estate-anime-speed) var(--estate-anime-ease);\r\n}\r\n\r\n\/* \u30c6\u30ad\u30b9\u30c8\u5168\u4f53 *\/\r\n.estate-card__content {\r\n  position: absolute;\r\n  left: 5%;\r\n  right: 5%;\r\n  bottom: 9%;\r\n  z-index: 2;\r\n  font-family: serif;\r\n  line-height: 1.7;\r\n  transition: transform var(--estate-anime-speed) var(--estate-anime-ease);\r\n}\r\n\r\n.estate-card__date {\r\n  font-size: clamp(16px, 2.1vw, 27px);\r\n  letter-spacing: 0.18em;\r\n  margin-bottom: 0.45em;\r\n}\r\n\r\n.estate-card__title {\r\n  font-size: clamp(19px, 2.7vw, 34px);\r\n  letter-spacing: 0.12em;\r\n}\r\n\r\n\/* \u6700\u521d\u306f\u96a0\u308c\u3066\u3044\u308b\u672c\u6587 *\/\r\n.estate-card__text {\r\n  font-size: clamp(18px, 2.5vw, 34px);\r\n  letter-spacing: 0.05em;\r\n  line-height: 1.55;\r\n  margin-top: 1.35em;\r\n\r\n  opacity: 0;\r\n  transform: translateY(34px);\r\n  max-height: 0;\r\n  overflow: hidden;\r\n\r\n  transition:\r\n    opacity var(--estate-anime-speed) var(--estate-anime-ease),\r\n    transform var(--estate-anime-speed) var(--estate-anime-ease),\r\n    max-height var(--estate-anime-speed) var(--estate-anime-ease);\r\n}\r\n\r\n\/* \u77e2\u5370 *\/\r\n.estate-card__arrow {\r\n  position: absolute;\r\n  right: 8%;\r\n  bottom: 7%;\r\n  z-index: 3;\r\n  width: 19%;\r\n  height: 18px;\r\n}\r\n\r\n\/* \u77e2\u5370\u306e\u6a2a\u7dda *\/\r\n.estate-card__arrow::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  left: 0;\r\n  top: 50%;\r\n  width: 100%;\r\n  height: 2px;\r\n  background: #fff;\r\n  transform: translateY(-50%);\r\n}\r\n\r\n\/* \u77e2\u5370\u306e\u5148\u7aef\uff1a\u4e0a\u5074\u3060\u3051 *\/\r\n.estate-card__arrow::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  right: 0;\r\n  top: 50%;\r\n  width: 22px;\r\n  height: 2px;\r\n  background: #fff;\r\n  transform-origin: right center;\r\n  transform: translateY(-50%) rotate(28deg);\r\n}\r\n\r\n\/* PC\u306e\u30ed\u30fc\u30eb\u30aa\u30fc\u30d0\u30fc\u6642 *\/\r\n@media (hover: hover) and (pointer: fine) {\r\n  .estate-card:hover .estate-card__overlay::before {\r\n    opacity: 1;\r\n  }\r\n\r\n  .estate-card:hover .estate-card__text {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n    max-height: 220px;\r\n  }\r\n}\r\n\r\n\/* \u30b9\u30de\u30db\u306e\u30bf\u30c3\u30d7\u6642\uff1aJS\u3067 is-active \u304c\u4ed8\u304f *\/\r\n.estate-card.is-active .estate-card__overlay::before {\r\n  opacity: 1;\r\n}\r\n\r\n.estate-card.is-active .estate-card__text {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n  max-height: 220px;\r\n}\r\n\r\n\/* \u30b9\u30de\u30db\u8abf\u6574 *\/\r\n@media only screen and (max-width: 800px) {\r\n  .estate-card-list {\r\n    grid-template-columns: 1fr;\r\n    gap: 20px;\r\n  }\r\n\r\n  .estate-card {\r\n    aspect-ratio: 3 \/ 2;\r\n  }\r\n\r\n  .estate-card__content {\r\n    left: 5%;\r\n    right: 5%;\r\n    bottom: 9%;\r\n  }\r\n\r\n  .estate-card__date {\r\n    font-size: 16px;\r\n  }\r\n\r\n  .estate-card__title {\r\n    font-size: 22px;\r\n  }\r\n\r\n  .estate-card__text {\r\n    font-size: 22px;\r\n  }\r\n\r\n  .estate-card__arrow {\r\n    width: 22%;\r\n    right: 8%;\r\n    bottom: 7%;\r\n  }\r\n\r\n  .estate-card__arrow::after {\r\n    width: 20px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<div class=\"estate-card-list\">\r\n\r\n  <a href=\"https:\/\/example.com\/\" class=\"estate-card\" style=\"background-image: url('\u753b\u50cfURL\u3092\u3053\u3053\u306b\u5165\u308c\u3066\u304f\u3060\u3055\u3044');\">\r\n    <div class=\"estate-card__overlay\"><\/div>\r\n\r\n    <div class=\"estate-card__content\">\r\n      <div class=\"estate-card__date\">2026.00.00<\/div>\r\n      <div class=\"estate-card__title\">\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8<\/div>\r\n      <div class=\"estate-card__text\">\r\n        \u6d77\u6cbf\u3044\u30a8\u30ea\u30a2\u306e\u9591\u9759\u306a\u4f4f\u5b85\u56e3\u5730\u306b\u4f4d\u7f6e\u3059\u308b\u3001\u65e5\u5f53\u305f\u308a\u826f\u597d\u306a\u7269\u4ef6\u3067\u3059\uff01\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"estate-card__arrow\"><\/div>\r\n  <\/a>\r\n\r\n  <a href=\"https:\/\/example.com\/\" class=\"estate-card\" style=\"background-image: url('\u753b\u50cfURL\u3092\u3053\u3053\u306b\u5165\u308c\u3066\u304f\u3060\u3055\u3044');\">\r\n    <div class=\"estate-card__overlay\"><\/div>\r\n\r\n    <div class=\"estate-card__content\">\r\n      <div class=\"estate-card__date\">2026.00.00<\/div>\r\n      <div class=\"estate-card__title\">\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8<\/div>\r\n      <div class=\"estate-card__text\">\r\n        \u3053\u3053\u306b\u5225\u306e\u8aac\u660e\u6587\u304c\u5165\u308a\u307e\u3059\u3002\u8907\u6570\u8a2d\u7f6e\u3057\u3066\u3082\u305d\u308c\u305e\u308c\u72ec\u7acb\u3057\u3066\u52d5\u304d\u307e\u3059\u3002\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"estate-card__arrow\"><\/div>\r\n  <\/a>\r\n\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const cards = document.querySelectorAll('.estate-card');\r\n\r\n  if (!cards.length) return;\r\n\r\n  function isTouchDevice() {\r\n    return window.matchMedia('(hover: none), (pointer: coarse)').matches;\r\n  }\r\n\r\n  function closeAllCards(exceptCard) {\r\n    cards.forEach(function (card) {\r\n      if (card !== exceptCard) {\r\n        card.classList.remove('is-active');\r\n      }\r\n    });\r\n  }\r\n\r\n  cards.forEach(function (card) {\r\n    card.addEventListener('click', function (e) {\r\n      if (!isTouchDevice()) return;\r\n\r\n      if (!card.classList.contains('is-active')) {\r\n        e.preventDefault();\r\n        closeAllCards(card);\r\n        card.classList.add('is-active');\r\n      }\r\n    });\r\n  });\r\n\r\n  let startX = 0;\r\n  let startY = 0;\r\n  let moved = false;\r\n\r\n  document.addEventListener('touchstart', function (e) {\r\n    if (!isTouchDevice()) return;\r\n\r\n    const touch = e.touches[0];\r\n    startX = touch.clientX;\r\n    startY = touch.clientY;\r\n    moved = false;\r\n  }, { passive: true });\r\n\r\n  document.addEventListener('touchmove', function (e) {\r\n    if (!isTouchDevice()) return;\r\n\r\n    const touch = e.touches[0];\r\n    const diffX = Math.abs(touch.clientX - startX);\r\n    const diffY = Math.abs(touch.clientY - startY);\r\n\r\n    if (diffX > 10 || diffY > 10) {\r\n      moved = true;\r\n    }\r\n  }, { passive: true });\r\n\r\n  document.addEventListener('touchend', function (e) {\r\n    if (!isTouchDevice()) return;\r\n    if (moved) return;\r\n\r\n    const touchedCard = e.target.closest('.estate-card');\r\n\r\n    if (!touchedCard) {\r\n      closeAllCards(null);\r\n    }\r\n  }, { passive: true });\r\n});\r\n<\/script>","protected":false},"excerpt":{"rendered":"2026.00.00 \u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8 \u6d77\u6cbf\u3044\u30a8\u30ea\u30a2\u306e\u9591\u9759\u306a\u4f4f\u5b85\u56e3\u5730\u306b\u4f4d\u7f6e\u3059\u308b\u3001\u65e5\u5f53\u305f\u308a\u826f\u597d\u306a\u7269\u4ef6\u3067\u3059\uff01 2026.00.00 \u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8\u30c6\u30ad\u30b9\u30c8 \u3053\u3053\u306b\u5225\u306e\u8aac\u660e\u6587\u304c\u5165\u308a\u307e\u3059\u3002\u8907\u6570\u8a2d\u7f6e\u3057\u3066\u3082\u305d\u308c\u305e\u308c\u72ec\u7acb\u3057\u3066<a href=\"https:\/\/hiroshima-akiya.jp\/?page_id=535\"> &#8230;\u7d9a\u304d\u3092\u8aad\u3080<\/a>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-535","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=\/wp\/v2\/pages\/535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=535"}],"version-history":[{"count":6,"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=\/wp\/v2\/pages\/535\/revisions"}],"predecessor-version":[{"id":1383,"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=\/wp\/v2\/pages\/535\/revisions\/1383"}],"wp:attachment":[{"href":"https:\/\/hiroshima-akiya.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}