{"id":2483,"date":"2024-10-05T13:56:05","date_gmt":"2024-10-05T04:56:05","guid":{"rendered":"https:\/\/hiros-choice.com\/wordpress\/wordpress\/?page_id=2483"},"modified":"2026-01-09T18:51:18","modified_gmt":"2026-01-09T09:51:18","slug":"%e5%a4%a7%e4%bc%9a%e8%a6%81%e9%a0%85","status":"publish","type":"page","link":"https:\/\/hiros-choice.com\/ja\/title-top\/","title":{"rendered":"\u3010TOP\u3011\u30bf\u30a4\u30c8\u30eb"},"content":{"rendered":"<!-- =========================\r\n     HERO\uff1aTOP \u52d5\u753b\u30d2\u30fc\u30ed\u30fc\r\n     ========================= -->\r\n<div class=\"hero-layer\">\r\n\r\n  <!-- \u80cc\u666f\uff1aYouTube\u52d5\u753b\uff08\u5168\u9762\u30ab\u30d0\u30fc\uff09 -->\r\n  <div class=\"hero-bg hero-bg--video\" aria-hidden=\"true\">\r\n    <div class=\"hero-video-bg\">\r\n      <iframe\r\n        src=\"https:\/\/www.youtube.com\/embed\/9Erl4a7yM4o?autoplay=1&#038;mute=1&#038;loop=1&#038;playlist=9Erl4a7yM4o&#038;controls=0&#038;rel=0&#038;modestbranding=1&#038;playsinline=1&#038;iv_load_policy=3&#038;disablekb=1\"\r\n        title=\"Hero Background Video\"\r\n        frameborder=\"0\"\r\n        allow=\"autoplay; encrypted-media; picture-in-picture\"\r\n        allowfullscreen\r\n      ><\/iframe>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u524d\u9762\uff1a\u4e2d\u592e\u30b3\u30f3\u30c6\u30f3\u30c4\u67f1 -->\r\n  <div class=\"hero-front\">\r\n    <div class=\"hero-stack hero-fade-group\">\r\n\r\n      <!-- \u30bf\u30a4\u30c8\u30eb\u30ed\u30b4 -->\r\n      <div class=\"hero-title hero-fade hero-delay-1\">\r\n        <img decoding=\"async\" src=\"https:\/\/hiros-choice.com\/wp-content\/uploads\/2025\/12\/top_bg_title.png\" alt=\"\">\r\n      <\/div>\r\n\r\n      <!-- Support\u30dc\u30bf\u30f3 -->\r\n      <div class=\"hero-support hero-fade hero-delay-2\">\r\n        <a class=\"hero-support-btn\" href=\"https:\/\/hiros-choice.com\/support\/\" target=\"_blank\" rel=\"noopener\">Support<\/a>\r\n      <\/div>\r\n\r\n      <!-- \u30b9\u30dd\u30f3\u30b5\u30fc\u30ed\u30b4 -->\r\n      <div class=\"hero-logo hero-fade hero-delay-3\">\r\n        <a href=\"https:\/\/www.sanyo-trading.co.jp\/\" target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/hiros-choice.com\/wp-content\/uploads\/2025\/12\/sanyo_logo.png\" alt=\"\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <!-- SNS\u30a2\u30a4\u30b3\u30f3 -->\r\n      <div class=\"hero-sns hero-fade hero-delay-4\">\r\n        <a href=\"https:\/\/www.facebook.com\/hiros.choice\/\" target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/hiros-choice.com\/wp-content\/uploads\/2025\/12\/icon_fb.png\" alt=\"Facebook\">\r\n        <\/a>\r\n        <a href=\"https:\/\/www.instagram.com\/hiros_choice\/\" target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/hiros-choice.com\/wp-content\/uploads\/2025\/12\/icon_ig.png\" alt=\"Instagram\">\r\n        <\/a>\r\n        <a href=\"https:\/\/www.youtube.com\/@HIROsCHOICE\" target=\"_blank\" rel=\"noopener\">\r\n          <img decoding=\"async\" src=\"https:\/\/hiros-choice.com\/wp-content\/uploads\/2025\/12\/icon_youtube.png\" alt=\"Youtube\">\r\n        <\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* =========================\r\n   HERO\u5168\u4f53\uff1a\u9ad8\u3055\u57fa\u6e96\r\n========================= *\/\r\n.hero-layer{\r\n  --heroH: 100svh;\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: var(--heroH);\r\n  overflow: hidden;\r\n  background: #000;\r\n}\r\n\r\n\/* =========================\r\n   \u80cc\u666f\u52d5\u753b\r\n========================= *\/\r\n.hero-bg{\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n}\r\n.hero-video-bg{\r\n  position: absolute;\r\n  inset: 0;\r\n  overflow: hidden;\r\n}\r\n.hero-video-bg iframe{\r\n  position: absolute;\r\n  top: 52%;\r\n  left: 50%;\r\n  width: 100vw;\r\n  height: calc(100vw * 9 \/ 16);\r\n  min-height: var(--heroH);\r\n  min-width: calc(var(--heroH) * 16 \/ 9);\r\n  transform: translate(-50%, -50%) scale(1.14);\r\n  border: 0;\r\n  pointer-events: none;\r\n}\r\n.hero-bg::after{\r\n  content:\"\";\r\n  position:absolute;\r\n  inset:0;\r\n  background: linear-gradient(\r\n    to bottom,\r\n    rgba(10,20,40,.65),\r\n    rgba(10,20,40,.85)\r\n  );\r\n  z-index:2;\r\n}\r\n\r\n\/* =========================\r\n   \u524d\u9762\u30b3\u30f3\u30c6\u30f3\u30c4\u67f1\r\n========================= *\/\r\n.hero-front{\r\n  position: relative;\r\n  z-index: 3;\r\n  min-height: var(--heroH);\r\n  width: min(720px, 100%);\r\n  margin: 0 auto;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding:\r\n    calc(env(safe-area-inset-top) + 14px)\r\n    0\r\n    calc(env(safe-area-inset-bottom) + 32px);\r\n}\r\n\r\n.hero-stack{\r\n  width: min(520px, 100%);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: clamp(20px, 3.4svh, 34px);\r\n  transform: translateY(10px);\r\n  padding-bottom: clamp(28px, 7svh, 90px);\r\n}\r\n\r\n\/* =========================\r\n   \u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u6f14\u51fa\r\n========================= *\/\r\n.hero-fade{\r\n  opacity: 0;\r\n  transform: translateY(12px);\r\n  animation: heroFadeUp 1.2s ease-out forwards;\r\n}\r\n\r\n.hero-delay-1{ animation-delay: .3s; }\r\n.hero-delay-2{ animation-delay: .55s; }\r\n.hero-delay-3{ animation-delay: .8s; }\r\n.hero-delay-4{ animation-delay: 1.05s; }\r\n\r\n@keyframes heroFadeUp{\r\n  to{\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n\/* =========================\r\n   \u30bf\u30a4\u30c8\u30eb\u30ed\u30b4\r\n========================= *\/\r\n.hero-title{\r\n  width: 460px;\r\n  max-width: 96vw;\r\n  text-align: center;\r\n  margin-bottom: clamp(72px, 12svh, 140px);\r\n}\r\n.hero-title img{\r\n  width: 100%;\r\n  height: auto;\r\n  display: block;\r\n}\r\n\r\n\/* =========================\r\n   Support\u30dc\u30bf\u30f3\r\n========================= *\/\r\n.hero-support{\r\n  width: 320px;\r\n  max-width: 86vw;\r\n  margin-bottom: clamp(28px, 5.5svh, 54px);\r\n}\r\n.hero-support-btn{\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  height: 54px;\r\n  font-family: serif;\r\n  font-size: 18px;\r\n  color: #fff !important;\r\n  text-decoration: none !important;\r\n  border: 2px solid rgba(255,255,255,.9);\r\n  border-radius: 999px;\r\n  background: rgba(0,0,0,.22);\r\n  backdrop-filter: blur(2px);\r\n}\r\n\r\n\/* =========================\r\n   \u30b9\u30dd\u30f3\u30b5\u30fc\u30ed\u30b4\r\n========================= *\/\r\n.hero-logo{\r\n  width: 165px;\r\n}\r\n.hero-logo img{\r\n  width: 100%;\r\n  height: auto;\r\n  display: block;\r\n}\r\n\r\n\/* =========================\r\n   SNS\u30a2\u30a4\u30b3\u30f3\r\n========================= *\/\r\n.hero-sns{\r\n  margin-top: 8px;\r\n  display: flex;\r\n  gap: 24px;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.hero-sns img{\r\n  width: 38px;\r\n  height: 38px;\r\n  display: block;\r\n}\r\n\r\n\/* =========================\r\n   \u5c0f\u578b\u7aef\u672b\u5fae\u8abf\u6574\r\n========================= *\/\r\n@media (max-width: 360px){\r\n  .hero-title{ width: 390px; }\r\n  .hero-support{ width: 300px; }\r\n  .hero-sns img{ width: 42px; height: 42px; }\r\n}\r\n<\/style>\r\n","protected":false},"excerpt":{"rendered":"<p>Support<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2483","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/pages\/2483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/comments?post=2483"}],"version-history":[{"count":241,"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/pages\/2483\/revisions"}],"predecessor-version":[{"id":3075,"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/pages\/2483\/revisions\/3075"}],"wp:attachment":[{"href":"https:\/\/hiros-choice.com\/ja\/wp-json\/wp\/v2\/media?parent=2483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}