/* =====================================================================
   日本で家を買う 受付ページ（多言語・台湾）の見た目と動き。2026-10-13。
   - 冒頭: 夕暮れの東京と富士山のベクター画像（template-parts/japan-home/scene.php）＋桜の花びら
   - 「なぜUMJなのか」節（template-parts/japan-home/why.php）
   - スクロールで現れる動き（assets/js/official-page-japan-home-motion.js が .jh-pre を付け外しする）
   動きを減らす設定（prefers-reduced-motion）の利用者には、動きを全部止める。
   WEXAL のパス単位キャッシュを避けるため、既存CSSとは別ファイルにしている。
   ===================================================================== */

/* ---------- 冒頭（夕暮れの東京） ---------- */
.jh-page .jh-hero--scene { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #14283F; min-height: clamp(560px, 86vh, 780px); display: flex; align-items: center; padding: var(--umj-s6) 0 var(--umj-s5); }
.jh-hero-bg { position: absolute; inset: 0; z-index: -2; }
.jh-scene { display: block; width: 100%; height: 100%; transform-origin: 68% 85%; animation: jhKenBurns 32s ease-in-out infinite alternate; }
.jh-hero--scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,19,32,.86) 0%, rgba(10,19,32,.62) 42%, rgba(10,19,32,.12) 78%, rgba(10,19,32,0) 100%); }
.jh-page[dir="rtl"] .jh-hero--scene::after { background: linear-gradient(270deg, rgba(10,19,32,.86) 0%, rgba(10,19,32,.62) 42%, rgba(10,19,32,.12) 78%, rgba(10,19,32,0) 100%); }
@media (max-width: 760px) {
  /* スマホ幅では背景を横に広げて右へずらし、富士山の頂上が見えるようにする */
  .jh-hero-bg { left: -120%; right: -20%; }
  .jh-page[dir="rtl"] .jh-hero-bg { left: -120%; right: -20%; }
  .jh-hero--scene::after { background: linear-gradient(180deg, rgba(10,19,32,.78) 0%, rgba(10,19,32,.6) 55%, rgba(10,19,32,.35) 100%); }
  .jh-page[dir="rtl"] .jh-hero--scene::after { background: linear-gradient(180deg, rgba(10,19,32,.78) 0%, rgba(10,19,32,.6) 55%, rgba(10,19,32,.35) 100%); }
}
.jh-hero-content { position: relative; width: 100%; }
.jh-hero-content > * { max-width: 40rem; }
.jh-hero--scene .jh-eyebrow { color: var(--umj-orange-light); }
.jh-hero--scene .jh-h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.jh-hero--scene .jh-lead { color: rgba(255,255,255,.92); }
.jh-hero--scene .jh-lead b { color: #FFD48A; }
.jh-hero--scene .jh-notice { color: rgba(255,255,255,.72); }
.jh-hero--scene .jh-btn { min-height: 44px; }
.jh-hero--scene .jh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.jh-hero--scene .jh-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.jh-hero--scene .jh-btn:focus-visible { outline: 3px solid #FFD48A; outline-offset: 3px; }
.jh-hero-content > * { animation: jhRise .9s var(--umj-ease) both; }
.jh-hero-content > *:nth-child(2) { animation-delay: .12s; }
.jh-hero-content > *:nth-child(3) { animation-delay: .24s; }
.jh-hero-content > *:nth-child(4) { animation-delay: .36s; }
.jh-hero-content > *:nth-child(5) { animation-delay: .48s; }

/* 夜景の瞬き */
.jh-star { animation: jhTwinkle 4.6s ease-in-out infinite; }
.jh-win { animation: jhWindow 6s ease-in-out infinite; }
.jh-win--home { animation-duration: 9s; }
.jh-beacon { animation: jhBeacon 1.6s steps(2, end) infinite; }
.jh-sun { transform-origin: 1080px 470px; animation: jhGlow 9s ease-in-out infinite; }

/* 桜の花びら */
.jh-petals { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.jh-petals span { position: absolute; top: -6%; width: 13px; height: 10px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #FFE1EA, #F7A8C1); opacity: .85; animation: jhFall 14s linear infinite; }
.jh-petals span:nth-child(1)  { left: 8%;  animation-delay: 0s;   animation-duration: 15s; }
.jh-petals span:nth-child(2)  { left: 18%; animation-delay: 3s;   animation-duration: 12s; transform: scale(.8); }
.jh-petals span:nth-child(3)  { left: 29%; animation-delay: 6s;   animation-duration: 17s; }
.jh-petals span:nth-child(4)  { left: 41%; animation-delay: 1.5s; animation-duration: 13s; transform: scale(.7); }
.jh-petals span:nth-child(5)  { left: 53%; animation-delay: 8s;   animation-duration: 16s; }
.jh-petals span:nth-child(6)  { left: 62%; animation-delay: 4.5s; animation-duration: 12.5s; transform: scale(.9); }
.jh-petals span:nth-child(7)  { left: 71%; animation-delay: 10s;  animation-duration: 18s; }
.jh-petals span:nth-child(8)  { left: 80%; animation-delay: 2.2s; animation-duration: 14.5s; transform: scale(.75); }
.jh-petals span:nth-child(9)  { left: 88%; animation-delay: 7.2s; animation-duration: 13.5s; }
.jh-petals span:nth-child(10) { left: 95%; animation-delay: 11s;  animation-duration: 16.5s; transform: scale(.85); }

/* ---------- なぜUMJなのか ---------- */
.jh-page .jh-why { background: linear-gradient(180deg, var(--umj-white) 0%, var(--umj-bg) 100%); border-bottom: 1px solid var(--umj-line); }
.jh-why-head { max-width: 46rem; margin-bottom: var(--umj-s4); }
.jh-why-lead { margin: 0; font-size: 16px; color: var(--umj-sub); }
.jh-why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--umj-s4); align-items: center; }
@media (max-width: 860px) { .jh-why-grid { grid-template-columns: 1fr; } }
.jh-why-photos { position: relative; min-height: 420px; }
.jh-why-photo { position: absolute; margin: 0; overflow: hidden; border-radius: var(--umj-radius); box-shadow: 0 18px 40px rgba(20,40,63,.18); }
.jh-why-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--umj-ease); }
.jh-why-photo:hover img { transform: scale(1.05); }
.jh-why-photo--a { top: 0; left: 0; width: 78%; aspect-ratio: 4 / 3; }
.jh-why-photo--b { bottom: 0; right: 0; width: 60%; aspect-ratio: 4 / 3; border: 6px solid #fff; }
.jh-page[dir="rtl"] .jh-why-photo--a { left: auto; right: 0; }
.jh-page[dir="rtl"] .jh-why-photo--b { right: auto; left: 0; }
.jh-why-badge { position: absolute; left: 6%; bottom: 8%; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--umj-navy); color: #fff; font-family: var(--umj-display); font-size: 13px; letter-spacing: .28em; }
.jh-page[dir="rtl"] .jh-why-badge { left: auto; right: 6%; }
@media (max-width: 860px) { .jh-why-photos { min-height: 0; aspect-ratio: 4 / 3.4; } }
.jh-why-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--umj-s2); }
@media (max-width: 560px) { .jh-why-cards { grid-template-columns: 1fr; } }
.jh-why-card { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: var(--umj-s3); background: var(--umj-white); border: 1px solid var(--umj-line); border-radius: var(--umj-radius); transition: transform .3s var(--umj-ease), box-shadow .3s var(--umj-ease); }
.jh-why-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,40,63,.10); }
.jh-why-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(242,129,29,.12); color: var(--umj-orange-dark); }
.jh-why-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--umj-navy); line-height: 1.45; }
.jh-why-card p { margin: 0; font-size: 14px; color: var(--umj-sub); line-height: 1.75; }
.jh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--umj-s2); margin: var(--umj-s4) 0 0; padding: var(--umj-s3); border-radius: var(--umj-radius); background: var(--umj-navy); color: #fff; }
@media (max-width: 560px) { .jh-stats { grid-template-columns: 1fr; } }
.jh-stat { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; gap: 4px; }
.jh-stat dd { margin: 0; font-family: var(--umj-display); font-size: clamp(34px, 5vw, 48px); font-weight: 600; line-height: 1.1; color: #FFD48A; font-variant-numeric: tabular-nums; }
.jh-stat dt { font-size: 13px; color: rgba(255,255,255,.82); }

/* ---------- スクロールで現れる ---------- */
.jh-page [data-jh-reveal] { transition: opacity .8s var(--umj-ease), transform .8s var(--umj-ease); transition-delay: var(--jh-delay, 0ms); }
.jh-page [data-jh-reveal].jh-pre { opacity: 0; transform: translateY(26px); }

/* 時間差（インラインstyleを使わずクラスで指定。テーマのQAがstyle属性を禁じているため） */
.jh-delay-1 { --jh-delay: 110ms; } .jh-delay-2 { --jh-delay: 220ms; } .jh-delay-3 { --jh-delay: 330ms; }
.jh-scene .d0 { animation-delay: 0s; }   .jh-scene .d1 { animation-delay: 1.1s; } .jh-scene .d2 { animation-delay: 2.2s; } .jh-scene .d3 { animation-delay: 3.3s; }
.jh-scene .d4 { animation-delay: 4.4s; } .jh-scene .d5 { animation-delay: 5.5s; } .jh-scene .d6 { animation-delay: 6.6s; } .jh-scene .d7 { animation-delay: 7.7s; }
.jh-scene .t0 { animation-duration: 4s; } .jh-scene .t1 { animation-duration: 5.5s; } .jh-scene .t2 { animation-duration: 6.5s; } .jh-scene .t3 { animation-duration: 7.5s; }

/* ---------- キーフレーム ---------- */
@keyframes jhKenBurns { from { transform: scale(1); } to { transform: scale(1.06) translateY(-1%); } }
@keyframes jhRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes jhTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes jhWindow { 0%, 100% { opacity: .95; } 45% { opacity: .95; } 55% { opacity: .35; } 70% { opacity: .9; } }
@keyframes jhBeacon { 0% { opacity: 1; } 100% { opacity: .15; } }
@keyframes jhGlow { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes jhFall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: .85; }
  100% { transform: translate3d(-90px, 110vh, 0) rotate(540deg); opacity: .2; }
}

/* ---------- 動きを減らす設定の利用者 ---------- */
@media (prefers-reduced-motion: reduce) {
  .jh-scene, .jh-star, .jh-win, .jh-beacon, .jh-sun, .jh-petals span, .jh-hero-content > * { animation: none !important; }
  .jh-petals { display: none; }
  .jh-page [data-jh-reveal], .jh-page [data-jh-reveal].jh-pre { opacity: 1; transform: none; transition: none; }
  .jh-why-photo img, .jh-why-card { transition: none; }
  .jh-why-photo:hover img, .jh-why-card:hover { transform: none; }
}