/* TOP ヒーロー（案A：巻物オープニング＋奥行きのある里山） */
.hx{position:relative;height:100svh;min-height:620px;max-height:960px;overflow:hidden;background:#fbf3e2}
.hx-scene,.hx-layer{position:absolute;inset:0;width:100%;height:100%}
.hx-layer{will-change:transform}
.hx-front{z-index:3;pointer-events:none}
.hx-chars{position:absolute;z-index:2;right:max(4vw,calc(50% - 600px));bottom:max(5.4vw,9svh);display:flex;align-items:flex-end;gap:0;pointer-events:none}
.hx-chars img{width:clamp(150px,19vw,290px);height:auto;filter:drop-shadow(0 10px 18px rgba(80,50,20,.25))}
.hx-nk{margin-left:-2vw}
.hx-copy{position:relative;z-index:4;padding-top:clamp(56px,11vh,140px)}
.hx-copy::before{content:"";position:absolute;left:-60px;top:20px;width:min(760px,90vw);height:420px;z-index:-1;
  background:radial-gradient(closest-side,rgba(251,243,226,.92),rgba(251,243,226,0));pointer-events:none}
.hx h1{font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.4;max-width:15em}
.hx h1 em{font-style:normal;color:var(--vermilion-deep)}
.hx-line{display:block}
.hx h1 .sub{display:block;font-size:max(.95rem,.36em);color:var(--ink-soft);margin-top:12px;font-weight:700;letter-spacing:.06em}
.hx .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hx .btn.ghost{background:rgba(255,255,255,.75)}
.hx-stamp{display:inline-block;vertical-align:.35em;margin-left:.35em;padding:.28em .45em;
  border:3px solid #b23a2a;border-radius:10px;color:#b23a2a;font-weight:900;line-height:1.2;letter-spacing:.05em;background:rgba(255,248,236,.75);font-size:.4em;white-space:nowrap;
  transform:rotate(-12deg);box-shadow:inset 0 0 0 3px rgba(178,58,42,.25)}
.hx-particles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.hx-particles .p{position:absolute;top:-4%;left:var(--x);width:var(--s);height:var(--s);opacity:0}
.hx-particles .spark{border-radius:50%;background:radial-gradient(circle,#fff6c9 0 30%,#f3c35a 60%,transparent 70%)}
.hx-particles .leaf{border-radius:2px 60% 2px 60%;background:#e59a3c}
.hx-scroll{position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;font-size:.7rem;letter-spacing:.3em;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.hx-scroll i{display:block;width:2px;height:34px;background:linear-gradient(#fff,rgba(255,255,255,0))}
.hx-intro{display:none}

@media (max-width:760px){
  .hx{min-height:640px}
  .hx-copy{padding-top:28px}
  .hx h1{font-size:clamp(1.7rem,7.4vw,2.2rem)}
  .hx-chars{left:50%;right:auto;transform:translateX(-50%);bottom:max(10vw,8svh)}
  .hx-chars img{width:min(40vw,210px)}
  /* 下の固定ボタンに隠れないよう、景色ごと少し上げる */
  .hx-scene{bottom:76px;height:auto}
  .hx-front{height:calc(100% - 76px)}
  .hx-scene .hx-layer{height:100%}
  .hx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:#5e7d4f;z-index:3}
  .hx-chars{bottom:calc(66px + 13svh)}
  .hx-stamp{display:none}
  .hx-scroll{display:none}
  .hx .cta .btn{padding:10px 18px}
}

/* ===== 動き（「動きを減らす」設定では出さない） ===== */
@media (prefers-reduced-motion:no-preference){
  /* オープニング：組みひもが走り、巻物（ふすま）が左右に開く */
  .hx-on .hx-intro{display:block;position:fixed;inset:0;z-index:100;pointer-events:none;animation:hx-intro-out .01s linear 1.25s forwards}
  .hx-intro-l,.hx-intro-r{position:absolute;top:0;bottom:0;width:50.5%;background:#2b2522;
    background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px)}
  .hx-intro-l{left:0;animation:hx-open-l .6s cubic-bezier(.7,0,.2,1) .65s forwards}
  .hx-intro-r{right:0;animation:hx-open-r .6s cubic-bezier(.7,0,.2,1) .65s forwards}
  .hx-intro-mark{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;animation:hx-fade-out .3s ease .6s forwards}
  .hx-cord{width:min(520px,70vw);height:12px}
  .hx-cord path{fill:none;stroke:#e3a72f;stroke-width:10;stroke-dasharray:600;stroke-dashoffset:600;animation:hx-draw .45s ease-out .05s forwards}
  .hx-intro-name{color:#fbf1dc;font-size:clamp(2.2rem,7vw,3.4rem);font-weight:900;letter-spacing:.2em;opacity:0;animation:hx-name .45s ease .15s forwards}
  .hx-intro-sub{color:#e3a72f;font-size:.9rem;letter-spacing:.5em;font-weight:700;opacity:0;animation:hx-name .45s ease .3s forwards}
  @keyframes hx-draw{to{stroke-dashoffset:0}}
  @keyframes hx-name{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
  @keyframes hx-fade-out{to{opacity:0;transform:scale(1.04)}}
  @keyframes hx-open-l{to{transform:translateX(-101%)}}
  @keyframes hx-open-r{to{transform:translateX(101%)}}
  @keyframes hx-intro-out{to{visibility:hidden}}

  /* 2回目以降の表示（同じタブ）では、オープニングを省いてすぐ始める */
  .hx-seen .hx-intro{display:none!important}
  .hx-on{--hx-base:1s}
  .hx-seen{--hx-base:.15s}

  /* 里山：最初にゆっくり寄る */
  .hx-on .hx-scene{animation:hx-zoom 2.6s cubic-bezier(.2,.8,.2,1) var(--hx-base) both}
  @keyframes hx-zoom{from{transform:scale(1.08)}to{transform:none}}
  .hx-on .hx-sun{transform-origin:1180px 250px;animation:hx-glow 6s ease-in-out infinite}
  @keyframes hx-glow{50%{transform:scale(1.08);opacity:.85}}
  .hx-on .hx-clouds{animation:hx-drift 40s linear infinite alternate}
  @keyframes hx-drift{to{transform:translateX(80px)}}
  .hx-on .hx-shine path{animation:hx-shine 3s ease-in-out infinite}
  .hx-on .hx-shine path:nth-child(2n){animation-delay:-1.5s}
  @keyframes hx-shine{50%{opacity:.15}}
  .hx-on .hx-lantern{transform-origin:303px 700px;animation:hx-sway 3.5s ease-in-out infinite}
  @keyframes hx-sway{50%{transform:rotate(3deg)}}

  /* 見出し：筆でなぞるように左から現れる */
  .hx-on .hx-line{clip-path:inset(0 100% 0 0);animation:hx-wipe .9s cubic-bezier(.7,0,.2,1) calc(var(--hx-base) + .2s + var(--i) * .22s) forwards}
  @keyframes hx-wipe{to{clip-path:inset(0 0 0 0)}}
  .hx-on .hx-rise{opacity:0;transform:translateY(14px);animation:hx-up .7s ease calc(var(--hx-base) + .3s + var(--i) * .2s) forwards}
  @keyframes hx-up{to{opacity:1;transform:none}}

  /* 「できた」の判子 */
  .hx-on .hx-stamp{opacity:0;animation:hx-stamp .45s cubic-bezier(.3,1.6,.5,1) calc(var(--hx-base) + 1.3s) forwards}
  @keyframes hx-stamp{from{opacity:0;transform:rotate(-12deg) scale(2.4)}to{opacity:1;transform:rotate(-12deg) scale(1)}}

  /* ドロン：煙が出て、二人が丘の向こうから飛び出す */
  .hx-puff{position:absolute;bottom:0;width:60%;height:70%;opacity:0;pointer-events:none;
    background:radial-gradient(circle at 30% 60%,#fff 0 22%,transparent 23%),radial-gradient(circle at 55% 45%,#fff 0 26%,transparent 27%),radial-gradient(circle at 78% 62%,#fff 0 20%,transparent 21%);filter:blur(3px)}
  .hx-puff-1{left:0}.hx-puff-2{right:0}
  .hx-on .hx-puff{animation:hx-puff .9s ease-out calc(var(--hx-base) + .1s) both}
  .hx-on .hx-puff-2{animation-delay:calc(var(--hx-base) + .3s)}
  @keyframes hx-puff{0%{opacity:0;transform:scale(.4)}25%{opacity:.95}100%{opacity:0;transform:scale(1.5) translateY(-20px)}}
  .hx-on .hx-nm{transform:translateY(105%);animation:hx-pop .8s cubic-bezier(.3,1.5,.5,1) calc(var(--hx-base) + .25s) forwards,hx-bob 4s ease-in-out calc(var(--hx-base) + 1.2s) infinite}
  .hx-on .hx-nk{transform:translateY(105%);animation:hx-pop .8s cubic-bezier(.3,1.5,.5,1) calc(var(--hx-base) + .45s) forwards,hx-bob 4.4s ease-in-out calc(var(--hx-base) + 1.6s) infinite}
  @keyframes hx-pop{to{transform:translateY(0)}}
  @keyframes hx-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1.5deg)}}

  /* 舞う光と葉 */
  .hx-on .hx-particles .p{animation:hx-fall var(--t) linear calc(var(--hx-base) + var(--d)) infinite}
  @keyframes hx-fall{
    0%{opacity:0;transform:translate(0,0) rotate(0)}
    10%{opacity:.9}
    50%{transform:translate(40px,48vh) rotate(180deg)}
    90%{opacity:.8}
    100%{opacity:0;transform:translate(-20px,96vh) rotate(360deg)}
  }

  .hx-scroll i{animation:hx-scroll 1.8s ease-in-out infinite}
  @keyframes hx-scroll{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
}
/* 絵の背景（layer-*.webp）を使うとき：SVGの xMidYMax slice と同じ置き方 */
.hx-img{object-fit:cover;object-position:center bottom}