@charset "UTF-8";
/* ==========================================================================
   animation.css — 動きはすべてこのファイルに隔離する
   強度: 控えめ（スクロールリビール＋ホバー＋FVの自動再生）
   静止時（prefers-reduced-motion: reduce）はカンプと完全一致すること
   ========================================================================== */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------
   1. スクロールリビール（初期非表示は .js 配下限定）
   -------------------------------------------------- */
.js .js-reveal,
.js .js-reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .8s var(--ease-out-quint),
    transform .8s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0s);
}

.js-reveal.is-inview,
.js-reveal-group.is-inview > * {
  opacity: 1;
  transform: none;
}

/* マーキー内のカードは移動させない（流れる位置と競合するため） */
.js .jirei__carousel.js-reveal { transform: none; }

/* --------------------------------------------------
   1-2. 施工事例マーキー（ゆっくり流す）
   リスト1本 = 19枚 × (390 + gap35) = 8075px
   147s → 実効 約55px/秒（推奨レンジ 40〜80px/秒）
   ここだけ linear（等速でないと折返しで速度が変わって見える）
   -------------------------------------------------- */
@keyframes jirei-flow { to { transform: translateX(-50%); } }

.js .jirei__track { animation: jirei-flow 147s linear infinite; }
.jirei__carousel.is-paused .jirei__track { animation-play-state: paused; }

@media (hover: hover) {
  .jirei__carousel:hover .jirei__track { animation-play-state: paused; }
}

.jirei__pause { transition: background-color .25s ease, transform .25s var(--ease-out-quint); }
@media (hover: hover) {
  .jirei__pause:hover { transform: scale(1.08); background: #fff; }
}

/* --------------------------------------------------
   2. FV（LCP保護のためJS発火にせずCSSで自動再生）
   -------------------------------------------------- */
@keyframes fv-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 走っている作業員は進行方向（右向き）に合わせて画面外から走り込む */
@keyframes run-in {
  from { opacity: 0; transform: translateX(-140px); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0); }
}
/* 吹き出しは軽く跳ねて出す */
@keyframes bubble-pop {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

.js .fv__tags     { animation: fv-in .9s var(--ease-out-expo) .05s both; }
.js .fv__title-1  { animation: fv-in .9s var(--ease-out-expo) .15s both; }
.js .fv__title-2  { animation: fv-in .9s var(--ease-out-expo) .25s both; }
.js .fv__sub      { animation: fv-in .9s var(--ease-out-expo) .35s both; }
.js .fv__badges   { animation: fv-in .9s var(--ease-out-expo) .45s both; }
.js .fv__actions  { animation: fv-in .9s var(--ease-out-expo) .55s both; }

/* 吹き出し（絶対配置。scaleはレイアウトに影響しない） */
.js .fv__bubble--left   { animation: bubble-pop .8s var(--ease-out-quart) .5s both; }
.js .fv__bubble--right  { animation: bubble-pop .8s var(--ease-out-quart) .62s both; }

/* 走り込み（左→右の進行方向に合わせて左から入る） */
.js .fv__worker--left   { animation: run-in 1.1s var(--ease-out-expo) .55s both; }
.js .fv__worker--right  { animation: run-in 1.1s var(--ease-out-expo) .75s both; }

/* 工場シルエットは動かさず遅れてフェードのみ */
.js .fv__factory--left  { animation: fv-fade 1.2s var(--ease-out-quart) .35s both; }
.js .fv__factory--right { animation: fv-fade 1.2s var(--ease-out-quart) .45s both; }

/* CTA2の作業員: セクション到達時に走り込む（JSで .is-inview を付与） */
.js .cta2__worker { opacity: 0; }
.cta2.is-inview .cta2__worker--left  { animation: run-in 1.1s var(--ease-out-expo) .1s both; }
.cta2.is-inview .cta2__worker--right { animation: run-in 1.1s var(--ease-out-expo) .28s both; }

/* --------------------------------------------------
   3. ホバー（タッチ端末のスティッキーホバーを防ぐ）
   -------------------------------------------------- */
.c-btn { transition: opacity .35s var(--ease-out-quint), transform .35s var(--ease-out-quint); }
.c-btn:hover { opacity: 1; }        /* base.css の opacity:.85 を打ち消す */

@media (hover: hover) {
  .c-btn:hover,
  .c-btn:focus-visible { transform: translateY(-3px); }
  .c-btn--line:hover,
  .c-btn--line:focus-visible { box-shadow: 0 8px 20px rgba(6, 199, 85, .32); }
  .c-btn--mail:hover,
  .c-btn--mail:focus-visible { box-shadow: 0 8px 20px rgba(255, 131, 0, .28); }
}

/* カード類: 4px浮き＋控えめな影（数値規範の上質レンジ内） */
.nayami-card,
.reason,
.strength,
.case__body,
.koushu__tag {
  transition:
    transform .4s var(--ease-out-quint),
    box-shadow .4s var(--ease-out-quint);
}

@media (hover: hover) {
  .nayami-card:hover,
  .reason:hover,
  .strength:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .07);
  }
  .case:hover .case__body {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .07);
  }
  .koushu__tag:hover { transform: translateX(4px); }
}

/* --------------------------------------------------
   4. reduced-motion（既定は即時表示）
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .js-reveal,
  .js .js-reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .fv__tags,
  .js .fv__title-1,
  .js .fv__title-2,
  .js .fv__sub,
  .js .fv__badges,
  .js .fv__actions,
  .js .fv__bubble--left,
  .js .fv__bubble--right,
  .js .fv__worker--left,
  .js .fv__worker--right,
  .js .fv__factory--left,
  .js .fv__factory--right,
  .js .cta2__worker,
  .cta2.is-inview .cta2__worker--left,
  .cta2.is-inview .cta2__worker--right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .js .jirei__track { animation-play-state: paused !important; }
  .c-btn,
  .nayami-card,
  .reason,
  .strength,
  .case__body,
  .koushu__tag,
  .jirei__pause { transition: none !important; }
  html { scroll-behavior: auto !important; }
}