@charset "UTF-8";
/* ── LP テキストアニメーション（スクロール表示） ── */

.wf-anim-item{
  --wf-dur:.9s;
  --wf-ease:cubic-bezier(.22,.61,.2,1);
  will-change:opacity,transform,filter,clip-path;
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview),
.wf-anim-item:not(.is-inview){
  opacity:0;
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="left"],
.wf-anim-item:not(.is-inview)[data-wf-anim="left"]{
  clip-path:inset(0 100% 0 0);
  transform:translateX(min(calc(-16/750*var(--lp-vw)),-12px));
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="down"],
.wf-anim-item:not(.is-inview)[data-wf-anim="down"]{
  clip-path:inset(0 0 100% 0);
  transform:translateY(min(calc(-10/750*var(--lp-vw)),-8px));
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="up"],
.wf-anim-item:not(.is-inview)[data-wf-anim="up"]{
  transform:translateY(calc(18/750*var(--lp-vw)));
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="scale"],
.wf-anim-item:not(.is-inview)[data-wf-anim="scale"]{
  transform:scale(.82);
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="right"],
.wf-anim-item:not(.is-inview)[data-wf-anim="right"]{
  clip-path:inset(0 0 0 100%);
  transform:translateX(calc(16/750*var(--lp-vw)));
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="fade"],
.wf-anim-item:not(.is-inview)[data-wf-anim="fade"]{
  opacity:0;
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="fly-left"],
.wf-anim-item:not(.is-inview)[data-wf-anim="fly-left"]{
  opacity:0;
  transform:translateX(min(calc(-90/750*var(--lp-vw)),-68px));
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="fly-right"],
.wf-anim-item:not(.is-inview)[data-wf-anim="fly-right"]{
  opacity:0;
  transform:translateX(calc(90/750*var(--lp-vw)));
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="left"],
.wf-anim-item.is-inview[data-wf-anim="left"]{
  animation:wfAnimLeft var(--wf-dur) var(--wf-ease) forwards;
  animation-delay:calc(var(--wf-i,0)*.12s);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="down"],
.wf-anim-item.is-inview[data-wf-anim="down"]{
  animation:wfAnimDown var(--wf-dur) var(--wf-ease) forwards;
  animation-delay:calc(var(--wf-i,0)*.12s);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="up"],
.wf-anim-item.is-inview[data-wf-anim="up"]{
  animation:wfAnimUp var(--wf-dur) var(--wf-ease) forwards;
  animation-delay:calc(var(--wf-i,0)*.12s);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="scale"],
.wf-anim-item.is-inview[data-wf-anim="scale"]{
  animation:wfAnimScale .85s var(--wf-ease) forwards;
  animation-delay:calc(var(--wf-i,0)*.1s);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="right"],
.wf-anim-item.is-inview[data-wf-anim="right"]{
  animation:wfAnimRight var(--wf-dur) var(--wf-ease) forwards;
  animation-delay:calc(var(--wf-i,0)*.12s);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="fade"],
.wf-anim-item.is-inview[data-wf-anim="fade"]{
  animation:wfAnimFade 1.05s ease forwards;
  animation-delay:calc(var(--wf-i,0)*.12s);
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="fv-soft"],
.wf-anim-item:not(.is-inview)[data-wf-anim="fv-soft"]{
  opacity:0;
  filter:blur(calc(10/750*var(--lp-vw)));
  transform:translateY(calc(22/750*var(--lp-vw)));
  letter-spacing:.32em;
}
.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="fv-soft"],
.wf-anim-item.is-inview[data-wf-anim="fv-soft"]{
  animation:wfAnimFvSoft 1.35s cubic-bezier(.22,.61,.2,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.22s + .12s);
}
@keyframes wfAnimFvSoft{
  0%{
    opacity:0;
    filter:blur(calc(10/750*var(--lp-vw)));
    transform:translateY(calc(22/750*var(--lp-vw)));
    letter-spacing:.32em;
  }
  100%{
    opacity:1;
    filter:blur(0);
    transform:translateY(0);
    letter-spacing:.14em;
  }
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="fv-rule"],
.wf-anim-item:not(.is-inview)[data-wf-anim="fv-rule"]{
  opacity:0;
  transform:scaleX(.12);
}
.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="fv-rule"],
.wf-anim-item.is-inview[data-wf-anim="fv-rule"]{
  animation:wfAnimFvRule .9s cubic-bezier(.22,.61,.2,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.12s + .55s);
}
@keyframes wfAnimFvRule{
  0%{opacity:0;transform:scaleX(.12)}
  100%{opacity:1;transform:scaleX(1)}
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="fv-body"],
.wf-anim-item:not(.is-inview)[data-wf-anim="fv-body"]{
  opacity:0;
  transform:translateY(calc(16/750*var(--lp-vw)));
}
.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="fv-body"],
.wf-anim-item.is-inview[data-wf-anim="fv-body"]{
  animation:wfAnimFvBody 1.05s cubic-bezier(.22,.61,.2,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.16s + .78s);
}
@keyframes wfAnimFvBody{
  0%{opacity:0;transform:translateY(calc(16/750*var(--lp-vw)))}
  100%{opacity:1;transform:translateY(0)}
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="fly-left"],
.wf-anim-item.is-inview[data-wf-anim="fly-left"]{
  animation:wfAnimFlyL .9s cubic-bezier(.2,.74,.2,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.1s);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="fly-right"],
.wf-anim-item.is-inview[data-wf-anim="fly-right"]{
  animation:wfAnimFlyR .9s cubic-bezier(.2,.74,.2,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.1s);
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="moya"],
.wf-anim-item:not(.is-inview)[data-wf-anim="moya"]{
  opacity:0;
  filter:blur(calc(14/750*var(--lp-vw)));
  transform:translateY(calc(14/750*var(--lp-vw))) scale(1.015);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="moya"],
.wf-anim-item.is-inview[data-wf-anim="moya"]{
  animation:wfAnimMoya 1.55s cubic-bezier(.22,.61,.2,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.18s + .35s);
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="zu-pop"],
.wf-anim-item:not(.is-inview)[data-wf-anim="zu-pop"]{
  opacity:0;
  transform:scale(.55);
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="zu-pop"],
.wf-anim-item.is-inview[data-wf-anim="zu-pop"]{
  animation:wfAnimZuPop .78s cubic-bezier(.34,1.28,.44,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.09s + .28s);
}

@keyframes wfAnimZuPop{
  from{
    opacity:0;
    transform:scale(.55);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.wf-animate:not(.is-inview) .wf-anim-item:not(.is-inview)[data-wf-anim="cta-pop"],
.wf-anim-item:not(.is-inview)[data-wf-anim="cta-pop"]{
  opacity:0;
  transform:scale(.7) translateY(calc(24/750*var(--lp-vw)));
}

.wf-animate.is-inview .wf-anim-item.is-inview[data-wf-anim="cta-pop"],
.wf-anim-item.is-inview[data-wf-anim="cta-pop"]{
  animation:wfAnimCtaPop .92s cubic-bezier(.34,1.4,.42,1) forwards;
  animation-delay:calc(var(--wf-i,0)*.1s + .15s);
}

@keyframes wfAnimCtaPop{
  0%{
    opacity:0;
    transform:scale(.7) translateY(calc(24/750*var(--lp-vw)));
  }
  55%{
    opacity:1;
    transform:scale(1.06) translateY(0);
  }
  78%{
    transform:scale(.98) translateY(0);
  }
  100%{
    opacity:1;
    transform:scale(1) translateY(0);
  }
}

.wf-animate:not(.is-inview) .wf-anim-bar-target span,
.wf-anim-item:not(.is-inview) .wf-anim-bar-target span{
  transform:scaleX(0);
}

.wf-animate.is-inview .wf-anim-item.is-inview .wf-anim-bar-target span,
.wf-anim-item.is-inview .wf-anim-bar-target span{
  transform:scaleX(1);
  transition:transform 1s var(--wf-ease);
  transition-delay:calc(var(--wf-i,0)*.14s + .2s);
}

.wf-anim-bar-target span{
  transform-origin:left center;
  will-change:transform;
}

/* ── モニター調査：行ごとに順番に伸びる ── */
.monitor-survey__content{
  --mon-gap:1.25s;
}
.wf-anim-item:not(.is-inview)[data-wf-anim="monitor-row"]{
  opacity:0;
  transform:translateY(calc(14/750*var(--lp-vw)));
}
.wf-anim-item.is-inview[data-wf-anim="monitor-row"]{
  animation:wfAnimUp .6s var(--wf-ease) forwards;
  animation-delay:calc(var(--wf-i,0)*var(--mon-gap));
}
.monitor-survey__content .monitor-survey__track span{
  transform:scaleX(0);
  transform-origin:left center;
}
.monitor-survey__content.is-inview .monitor-survey__item.is-inview .monitor-survey__track span{
  transform:scaleX(1);
  transition:transform 1.05s cubic-bezier(.16,.72,.24,1);
  transition-delay:calc(var(--wf-i,0)*var(--mon-gap) + .42s);
}
.wf-anim-item:not(.is-inview)[data-wf-anim="monitor-pct"]{
  opacity:0;
  transform:scale(.6);
}
.wf-anim-item.is-inview[data-wf-anim="monitor-pct"]{
  animation:wfAnimMonitorPct .55s cubic-bezier(.34,1.4,.42,1) both;
  animation-delay:calc(var(--wf-i,0)*var(--mon-gap) + 1.18s);
}
@keyframes wfAnimMonitorPct{
  0%{opacity:0;transform:scale(.6)}
  60%{opacity:1;transform:scale(1.16)}
  100%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .wf-anim-item[data-wf-anim="monitor-row"],
  .wf-anim-item[data-wf-anim="monitor-pct"]{
    animation:none;
    opacity:1;
    transform:none;
  }
  .monitor-survey__content .monitor-survey__track span{transform:scaleX(1)}
}

.wf-anim-item[data-wf-anim="left"],
.wf-anim-item[data-wf-anim="right"],
.wf-anim-item[data-wf-anim="down"],
.wf-anim-item[data-wf-anim="moya"],
.gen-copy__line1.wf-anim-item,
.gen-copy__line2.wf-anim-item,
.gen-copy__vbox.wf-anim-item,
.gen-panel-copy__top.wf-anim-item,
.gen-panel-copy__main.wf-anim-item,
.habits-copy__head.wf-anim-item,
.hex-hero__lead.wf-anim-item,
.hex-hero__sub.wf-anim-item,
.dual-hero__line2.wf-anim-item,
.dual-hero__line3.wf-anim-item,
.dual-hero__core-line.wf-anim-item,
.restart-hero__line1.wf-anim-item,
.restart-hero__line2.wf-anim-item,
.catch-hero__line1.wf-anim-item,
.catch-hero__line2.wf-anim-item,
.compare-table__title.wf-anim-item,
.kuchikomi__title-en.wf-anim-item,
.kuchikomi__title-ja.wf-anim-item,
.howto-slide__title.wf-anim-item,
.faq-panel__title.wf-anim-item,
.team-intro__title--main.wf-anim-item,
.monitor-survey__head.wf-anim-item,
.kodawari-slide__title.wf-anim-item{
  overflow:hidden;
}
/* 縦書きキャッチは overflow:hidden / clip-path を外す（writing-mode:vertical-rl でクリップされるため） */
.serum-copy__catch span.wf-anim-item{
  overflow:visible;
  clip-path:none;
}

@keyframes wfAnimLeft{
  from{
    clip-path:inset(0 100% 0 0);
    opacity:0;
    transform:translateX(min(calc(-16/750*var(--lp-vw)),-12px));
  }
  to{
    clip-path:inset(0 0 0 0);
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes wfAnimDown{
  from{
    clip-path:inset(0 0 100% 0);
    opacity:0;
    transform:translateY(min(calc(-10/750*var(--lp-vw)),-8px));
  }
  to{
    clip-path:inset(0 0 0 0);
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes wfAnimUp{
  from{
    opacity:0;
    transform:translateY(calc(18/750*var(--lp-vw)));
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes wfAnimScale{
  from{
    opacity:0;
    transform:scale(.82);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes wfAnimRight{
  from{
    clip-path:inset(0 0 0 100%);
    opacity:0;
    transform:translateX(calc(16/750*var(--lp-vw)));
  }
  to{
    clip-path:inset(0 0 0 0);
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes wfAnimFade{
  from{opacity:0}
  to{opacity:1}
}

@keyframes wfAnimFlyL{
  0%{
    opacity:0;
    transform:translateX(min(calc(-90/750*var(--lp-vw)),-68px));
  }
  60%{opacity:1}
  100%{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes wfAnimFlyR{
  0%{
    opacity:0;
    transform:translateX(calc(90/750*var(--lp-vw)));
  }
  60%{opacity:1}
  100%{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes wfAnimMoya{
  0%{
    opacity:0;
    filter:blur(calc(16/750*var(--lp-vw)));
    transform:translateY(calc(16/750*var(--lp-vw))) scale(1.02);
  }
  45%{
    opacity:.55;
    filter:blur(calc(5/750*var(--lp-vw)));
  }
  100%{
    opacity:1;
    filter:blur(0);
    transform:translateY(0) scale(1);
  }
}

/* dual-hero 成分オービット */
.dual-hero.wf-animate.is-inview .dual-hero__node{
  animation:dualHeroOrbitFloat 4.8s ease-in-out infinite;
  animation-delay:calc(var(--orbit-i,0)*.45s);
}

.dual-hero.wf-animate.is-inview .dual-hero__ring{
  animation:dualHeroRingGlow 6s ease-in-out infinite;
}

@keyframes dualHeroOrbitFloat{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(min(calc(-8/750*var(--lp-vw)),-6px))}
}

@keyframes dualHeroRingGlow{
  0%,100%{opacity:.92}
  50%{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .wf-animate:not(.is-inview) .wf-anim-item,
  .wf-animate:not(.is-inview) .wf-anim-item[data-wf-anim="left"],
  .wf-animate:not(.is-inview) .wf-anim-item[data-wf-anim="down"],
  .wf-animate:not(.is-inview) .wf-anim-item[data-wf-anim="moya"],
  .wf-anim-item:not(.is-inview),
  .wf-anim-item:not(.is-inview)[data-wf-anim="left"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="right"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="down"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="fade"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="fly-left"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="fly-right"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="fv-soft"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="fv-rule"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="fv-body"],
  .wf-anim-item:not(.is-inview)[data-wf-anim="moya"]{
    clip-path:none;
    opacity:1;
    transform:none;
    filter:none;
    letter-spacing:inherit;
  }

  .wf-animate .wf-anim-item,
  .wf-anim-item{
    animation:none!important;
  }

  .dual-hero.wf-animate.is-inview .dual-hero__node,
  .dual-hero.wf-animate.is-inview .dual-hero__ring{
    animation:none!important;
  }

  .zu-grow--animate.is-inview .zu-grow__brand,
  .zu-grow--animate .zu-grow__brand,
  .zu-protect--animate.is-inview .zu-protect__brand,
  .zu-protect--animate .zu-protect__brand{
    animation:none!important;
    opacity:.1;
    transform:translateX(-50%) scale(1);
  }

  .wf-animate.is-inview .wf-anim-bar-target span,
  .wf-anim-item.is-inview .wf-anim-bar-target span{
    transition:none;
    transform:scaleX(1);
  }
}