@charset "UTF-8";
/* ==========================================================================
   AFP — Motion Layer (控えめなスクロールアニメーション)
   - .afp-reveal       単体fadeUp
   - .afp-stagger      子要素を順番にfadeUp
   - .afp-h2.is-in     ボルドー細線がスッと伸びる
   - .afp-hero::before やわらかな浮遊
   - prefers-reduced-motion 完全対応
   ========================================================================== */

/* ---- 基本 fade-up ----------------------------------------------------- */
.afp-skin .afp-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.2,.65,.25,1),
              transform .65s cubic-bezier(.2,.65,.25,1);
  will-change: opacity, transform;
}
.afp-skin .afp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---- Stagger（子を順番に） ------------------------------------------ */
.afp-skin .afp-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.65,.25,1),
              transform .55s cubic-bezier(.2,.65,.25,1);
}
.afp-skin .afp-stagger.is-in > * { opacity: 1; transform: none; }
.afp-skin .afp-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(2) { transition-delay: 60ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(3) { transition-delay: 120ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(4) { transition-delay: 180ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(5) { transition-delay: 240ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(6) { transition-delay: 300ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(7) { transition-delay: 360ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(8) { transition-delay: 420ms; }
.afp-skin .afp-stagger.is-in > *:nth-child(n+9) { transition-delay: 480ms; }

/* ---- Hero 画像はちょい強めにスケールイン ----------------------------- */
.afp-skin .afp-hero__image.afp-reveal {
  opacity: 0;
  transform: scale(.965) translateY(24px);
  transition: opacity 1.1s cubic-bezier(.18,.7,.2,1) .15s,
              transform 1.1s cubic-bezier(.18,.7,.2,1) .15s;
}
.afp-skin .afp-hero__image.afp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---- Hero 背景パターンを slow drift -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .afp-skin .afp-hero::before {
    animation: afp-hero-drift 22s ease-in-out infinite alternate;
  }
}
@keyframes afp-hero-drift {
  from { transform: translate(0, 0)        scale(1); }
  to   { transform: translate(-28px, -10px) scale(1.03); }
}

/* ---- Hero 角の英字インジケータ（薄くまたたく） ----------------------- */
@media (prefers-reduced-motion: no-preference) {
  .afp-skin .afp-hero__inner::before {
    animation: afp-blink 4.5s ease-in-out infinite;
  }
}
@keyframes afp-blink {
  0%, 100% { opacity: .35; }
  50%      { opacity: .65; }
}

/* ---- H2 / AreaHead の左パイプ装飾は廃止 --------------------------------- */
.afp-skin .afp-h2::after { content: none !important; }
.afp-skin .afp-areahead__inner::before { content: none !important; }
.afp-skin .afp-h2 { padding-bottom: 0; }

/* ---- Compare table の各行を上から順に ------------------------------- */
.afp-skin .afp-compare tbody.afp-stagger tr {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.afp-skin .afp-compare tbody.afp-stagger.is-in tr { opacity: 1; transform: none; }
.afp-skin .afp-compare tbody.afp-stagger.is-in tr:nth-child(1) { transition-delay: 0ms; }
.afp-skin .afp-compare tbody.afp-stagger.is-in tr:nth-child(2) { transition-delay: 100ms; }
.afp-skin .afp-compare tbody.afp-stagger.is-in tr:nth-child(3) { transition-delay: 200ms; }

/* ---- Hero stats の数字を 1段ふわっ -------------------------------- */
.afp-skin .afp-hero__stat-num {
  display: inline-block;
}
.afp-skin .afp-reveal.afp-hero__stats > .afp-hero__stat {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s cubic-bezier(.2,.65,.25,1),
              transform .55s cubic-bezier(.2,.65,.25,1);
}
.afp-skin .afp-reveal.afp-hero__stats.is-in > .afp-hero__stat { opacity: 1; transform: none; }
.afp-skin .afp-reveal.afp-hero__stats.is-in > .afp-hero__stat:nth-child(1) { transition-delay: 0ms; }
.afp-skin .afp-reveal.afp-hero__stats.is-in > .afp-hero__stat:nth-child(2) { transition-delay: 120ms; }
.afp-skin .afp-reveal.afp-hero__stats.is-in > .afp-hero__stat:nth-child(3) { transition-delay: 240ms; }

/* ---- fc-card: 軽く傾いて入ってくる（signature） ----------------------- */
.afp-skin .afp-fc-card.afp-reveal {
  opacity: 0;
  transform: translateY(38px) rotate(-1deg);
  transition: opacity .75s cubic-bezier(.18,.7,.2,1),
              transform .75s cubic-bezier(.18,.7,.2,1);
}
.afp-skin .afp-fc-card.afp-reveal.is-in {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
/* hover */
@media (hover: hover) {
  .afp-skin .afp-fc-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
  .afp-skin .afp-fc-card:hover { transform: translateY(-4px); }
}

/* ---- Hero image: 入場時にゆるく上昇＋scroll連動でゆっくり追従 ---------- */
/* JS側で transform をスクロール量に追従させる（data-parallax属性で制御） */
.afp-skin [data-parallax] { will-change: transform; }

/* ---- Section: 背景が下からスッと立ち上がる（控えめ） ----------------- */
.afp-skin .afp-section--tint,
.afp-skin .afp-section--sand {
  position: relative;
}
.afp-skin .afp-section--tint::before,
.afp-skin .afp-section--sand::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: inherit;
  transform-origin: bottom;
  pointer-events: none;
  z-index: 0;
}
.afp-skin .afp-section > * { position: relative; z-index: 1; }

/* ---- area-card hover ------------------------------------------------ */
@media (hover: hover) {
  .afp-skin .afp-area-card { transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s; }
}

/* ============= Reduced motion: 全停止 ================================ */
@media (prefers-reduced-motion: reduce) {
  .afp-skin .afp-reveal,
  .afp-skin .afp-stagger > *,
  .afp-skin .afp-hero__image.afp-reveal,
  .afp-skin .afp-h2::after,
  .afp-skin .afp-areahead__inner::before,
  .afp-skin .afp-compare tbody.afp-stagger tr,
  .afp-skin .afp-reveal.afp-hero__stats > .afp-hero__stat {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .afp-skin .afp-h2::after { width: 44px !important; }
  .afp-skin .afp-areahead__inner::before { height: 60% !important; }
  .afp-skin .afp-hero::before,
  .afp-skin .afp-hero__inner::before {
    animation: none !important;
  }
}