@charset "UTF-8";
/* 演出CSS — 効果IDは 演出仕様書.md に対応（パラメータは参考サイトの実測値） */

/* FX-12: 読込ベール（monicle: body.is-loading opacity .2s ease） */
html.js body{opacity:0;transition:opacity .2s ease}
html.js body.is-loaded{opacity:1}
html.no-js body{opacity:1}

/* FX-01: セクション出現（trailblaze 実測 = opacity/blur(8px)/translateY(1.25rem) を
   1.2s cubic-bezier(0.25,0.46,0.45,0.94)。カードは 0.2s 刻みの transition-delay・768px以上のみ） */
html.js .reveal{
  opacity:0;
  filter:blur(8px);
  transform:translateY(1.25rem);
  transition:
    opacity 1.2s cubic-bezier(0.25,0.46,0.45,0.94),
    filter 1.2s cubic-bezier(0.25,0.46,0.45,0.94),
    transform 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change:opacity,transform,filter;
}
html.js .reveal.is-visible{opacity:1;filter:none;transform:translateY(0)}
@media (min-width:768px){
  html.js .reveal.is-visible{transition-delay:calc(var(--i, 0) * .2s)}
}
html.no-js .reveal{opacity:1;filter:none;transform:none}

/* FX-05: 罫線の伸長（monicle [data-line] = width 0→100% / opacity 0→1、start "top center+=20%"） */
html.js .rule{transition:width .55s cubic-bezier(0.25,0.46,0.45,0.94), opacity .4s ease}
.rule.is-drawn{width:72px;opacity:1}
html.no-js .rule{width:72px;opacity:1}

/* FX-02: FVのマスク内スライドアップ（monicle heroAnim: y 100%→0 / 1.1s / power4.out / stagger .08）
   初期状態は motion.js（GSAP）側で設定する。GSAPが読めなかった場合はそのまま表示される。 */
.hero__title [data-hero-copy]{display:block}

/* FX-10: 数字・金額の押し上げ（monicle [data-up-text] を 1回発火 1.0s power4.out に調整） */
html.js .sim__amount .mask > span,
html.js .plan__price .mask > span{will-change:transform}

/* FX-07: 円の線描（rheos: stroke-dashoffset 1004→0 / 2s cubic-bezier(.77,0,.175,1) forwards） */
[data-circle-draw]{stroke-dasharray:var(--dash,320);stroke-dashoffset:var(--dash,320)}
[data-circle-draw].is-anim{animation:circleDraw 2s cubic-bezier(0.77,0,0.175,1) 0s 1 normal forwards running}
@keyframes circleDraw{ from{stroke-dashoffset:var(--dash,320)} to{stroke-dashoffset:0} }

/* FX-08: ラベル帯のカーテンリビール（monicle slideIn1/slideIn2 = scaleX 0→1 → 1→0） */
.pillar__no span{position:relative;display:inline-block}
html.js .pillar__no span::after{
  content:"";position:absolute;inset:-2px -6px;background:var(--gold-pale);transform:scaleX(0);transform-origin:left center;
}
html.js .pillar__no.is-visible span::after{
  animation:curtainIn .4s cubic-bezier(0.445,0.05,0.55,0.95) forwards,
            curtainOut .4s cubic-bezier(0.445,0.05,0.55,0.95) .4s forwards;
}
@keyframes curtainIn{ from{transform:scaleX(0);transform-origin:left center} to{transform:scaleX(1);transform-origin:left center} }
@keyframes curtainOut{ from{transform:scaleX(1);transform-origin:right center} to{transform:scaleX(0);transform-origin:right center} }

/* FX-06: 追従CTA（rheos: transform .3s ease / フッター交差で退避） */
html.js .fab{opacity:0;transform:translateY(8px)}
html.js .fab.is-in{opacity:1;transform:translateY(0)}
.fab.is-hidden{opacity:0 !important;transform:translateY(12px) !important;visibility:hidden}
html.no-js .fab{opacity:1;transform:none}

/* FX-09: スケールイン（monicle [data-scale-in] = width 95%→100%・scrub。transform 版で実装） */
html.js [data-scale-in]{transform:scaleX(.97);transform-origin:center;will-change:transform}

/* FX-03/04: 視差（GSAP が値を書き込む。初期状態はCSSで崩さない） */
.hero__img,[data-parallax] img{will-change:transform}

/* prefers-reduced-motion: すべて静止 */
@media (prefers-reduced-motion: reduce){
  html.js body{opacity:1;transition:none}
  html.js .reveal{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}
  html.js .rule{width:72px;opacity:1;transition:none}
  html.js .hero__title [data-hero-copy]{transform:none !important}
  html.js [data-hero-item]{opacity:1 !important}
  html.js .fab{opacity:1 !important;transform:none !important}
  html.js [data-scale-in]{transform:none !important}
  [data-circle-draw]{stroke-dashoffset:0 !important;animation:none !important}
  html.js .pillar__no span::after{display:none}
  .hero__img,[data-parallax] img{transform:none !important}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}