

.fv-tenten{background:#19192D;height:clamp(600px,calc(100svh - 66px),900px);display:flex;align-items:stretch}
.fv-tenten .fv-bg{background:radial-gradient(ellipse 70% 60% at 68% 46%,#24244A 0%,#19192D 70%);overflow:hidden}
 
.fv.fv-tenten{padding:0}
.fv-b.fv-tenten::before{content:none}
.fv-b.fv-tenten .fv-bg{animation:none;transform:none;will-change:auto}
.fv-tenten .fv-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
 
.fv-tenten .fv-bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(25,25,45,.72) 0%,rgba(25,25,45,.3) 26%,rgba(25,25,45,0) 42%),
    linear-gradient(90deg,rgba(25,25,45,.55) 0%,rgba(25,25,45,0) 40%)}
.fv-tenten .wrap{display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:0;
  padding-top:96px;padding-bottom:64px}

 
.fv-tenten .fv-en span{display:inline-block;opacity:0;transform:translateY(.42em);
  animation:tt-word .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d0,.6s) + var(--w,0) * .09s)}
.fv-tenten .fv-en span:nth-child(2){--w:1}.fv-tenten .fv-en span:nth-child(3){--w:2}
.fv-tenten .fv-en span:nth-child(4){--w:3}.fv-tenten .fv-en span:nth-child(5){--w:4}
.fv-tenten .fv-jp{animation:tt-wipe 1.3s cubic-bezier(.3,.6,.2,1) calc(var(--d0,.6s) + .65s) both}
.fv-tenten .fv-cta{animation:tt-fade .9s ease calc(var(--d0,.6s) + 1.25s) both}
 
.fv-tenten[data-tenten="a"]{--d0:2.6s}
.fv-tenten[data-tenten="b"]{--d0:4.2s}
.fv-tenten[data-tenten="c"]{--d0:1.6s}
@keyframes tt-word{to{opacity:1;transform:none}}
@keyframes tt-wipe{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes tt-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
 
.fv-tenten.tt-still .fv-en span,.fv-tenten.tt-still .fv-jp,.fv-tenten.tt-still .fv-cta,
.fv-tenten:not(.tt-on) .fv-en span,.fv-tenten:not(.tt-on) .fv-jp,.fv-tenten:not(.tt-on) .fv-cta{animation:none;opacity:1;transform:none;clip-path:none}

@media(max-width:880px){
  .fv-tenten{height:clamp(560px,calc(100svh - 66px),820px)}
  .fv-tenten .fv-bg{background:radial-gradient(ellipse 90% 50% at 50% 30%,#24244A 0%,#19192D 72%)}
  .fv-tenten .wrap{padding-top:40px;padding-bottom:36px}
  .fv-tenten .fv-bg::after{background:linear-gradient(0deg,rgba(25,25,45,.85) 0%,rgba(25,25,45,.5) 34%,rgba(25,25,45,0) 54%)}
}
@media(prefers-reduced-motion:reduce){
  .fv-tenten .fv-en span,.fv-tenten .fv-jp,.fv-tenten .fv-cta{animation:none;opacity:1;transform:none;clip-path:none}
}



.fv-tenten .fv-bg>canvas{transition:opacity 1.8s ease-in-out}
.fv-tenten.tt-handed .fv-bg>canvas{opacity:0}
.fv-tenten .tt-photos{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.8s ease-in-out}
.fv-tenten.tt-handed .tt-photos{opacity:1}
.fv-tenten .tt-photo{position:absolute;inset:0;background-size:cover;background-position:center 46%;
  opacity:0;transition:opacity 1.2s ease-in-out;animation:wx-hero-zoom 22s ease-out infinite alternate}
.fv-tenten .tt-photo.is-active{opacity:1}
.fv-tenten .tt-photo--1{background-image:url(lp-an1-hero-hd.webp?v=a30cf0a667)}
.fv-tenten .tt-photo--2{background-image:url(wx-hero-2-hd.webp?v=3ebfc05534)}
.fv-tenten .tt-photo--3{background-image:url(wx-hero-3-hd.webp?v=407bda5761)}
 
.fv-tenten .tt-photo:not(.tt-photo--code)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(25,25,45,.5) 0%,rgba(25,25,45,.4) 58%,rgba(25,25,45,.2) 100%)}
.fv-tenten.tt-still .tt-photos,.fv-tenten.tt-still .tt-photo,.fv-tenten.tt-still .fv-bg>canvas{transition:none;animation:none}
@keyframes wx-hero-zoom{to{transform:scale(1.045)}}
@media(max-width:900px){
  .fv-tenten .tt-photo--1{background-image:url(lp-an1-hero-mobile.webp?v=f3ff404145)}
  .fv-tenten .tt-photo--2{background-image:url(wx-hero-2-mobile.webp?v=f550e4f681)}
  .fv-tenten .tt-photo--3{background-image:url(wx-hero-3-mobile.webp?v=df73c3a4ae)}
}
 
.fv-tenten .tt-photo--code{background:#19192D;animation:none}
