@charset "UTF-8";
/* ============================================================
   motion.css — 営業AIソリューション LP：スクロール演出
   読み込み順： reset.css → index.css → motion.css（必ず最後）
   対になる JS： js/motion.js

   【方針】
   - index.css には一切手を入れず、このファイルと motion.js だけで完結させる。
     不要になったら <link> と <script> を外すだけで元に戻る。
   - HTML も編集しない。対象要素は motion.js がセレクタで拾い、
     .reveal / --reveal-i / --py などを付与する。
   - すべての演出は <html class="js-motion"> が付いたときだけ有効。
     JS が動かない環境・prefers-reduced-motion の環境では
     何も起きず、通常どおり全要素が最初から表示される。
   - 動かすプロパティは opacity / transform のみ（レイアウトを揺らさない）。
     hover 用に transform を使っているクラスは index.css に存在しないため、
     ここで transform を使っても衝突しない。

   【演出の内訳】
   1) ヒーロー      … 読み込み時に上から順に立ち上がる（スクロール非依存）
   2) 各パーツ      … 画面に入ったら下から 28px ふわっと出る。
                      カード類は 80ms ずつ時間差（--reveal-i は JS が付与）
   3) パララックス  … ヒーロー背景・ヒーロー本文・セクション画像を
                      スクロール量に応じてわずかにずらす（--py は JS が更新）
   ============================================================ */

/* ------------------------------------------------------------
   2) スクロール時の出現（reveal）
   ------------------------------------------------------------ */
.js-motion .reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  /* 時間差。--reveal-i はグループ内の通し番号（0〜）を JS が付ける */
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
  will-change: opacity, transform;
}

.js-motion .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* 表示が終わった要素は will-change を解除して GPU レイヤーを減らす
   （is-done は transitionend 後に JS が付ける） */
.js-motion .reveal.is-done {
  will-change: auto;
  transition-delay: 0s;
}

/* 横方向から入るバリエーション（導入の流れ：階層の矢印など） */
.js-motion .reveal--left {
  transform: translate3d(-28px, 0, 0);
}

.js-motion .reveal--scale {
  transform: scale(0.96);
}

/* セクション見出し：リード文は少しだけ遅らせて、見出し → 本文の順に読ませる */
.js-motion .sec-head > .reveal:nth-child(2) {
  transition-delay: 140ms;
}

.js-motion .reveal--fade {
  transform: none;
}

/* ------------------------------------------------------------
   1) ヒーロー：読み込み時のシーケンス
   ------------------------------------------------------------ */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js-motion .hero__kicker,
.js-motion .hero__title,
.js-motion .hero__sub,
.js-motion .hero__desc,
.js-motion .hero__actions,
.js-motion .hero__facts .fact {
  opacity: 0;
}

/* is-loaded は DOMContentLoaded 直後に JS が <html> へ付ける */
.js-motion.is-loaded .hero__kicker,
.js-motion.is-loaded .hero__title,
.js-motion.is-loaded .hero__sub,
.js-motion.is-loaded .hero__desc,
.js-motion.is-loaded .hero__actions,
.js-motion.is-loaded .hero__facts .fact {
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-motion.is-loaded .hero__kicker  { animation-delay: 0.10s; }
.js-motion.is-loaded .hero__title   { animation-delay: 0.22s; }
.js-motion.is-loaded .hero__sub     { animation-delay: 0.38s; }
.js-motion.is-loaded .hero__desc    { animation-delay: 0.50s; }
.js-motion.is-loaded .hero__actions { animation-delay: 0.62s; }
.js-motion.is-loaded .hero__facts .fact:nth-child(1) { animation-delay: 0.80s; }
.js-motion.is-loaded .hero__facts .fact:nth-child(2) { animation-delay: 0.92s; }
.js-motion.is-loaded .hero__facts .fact:nth-child(3) { animation-delay: 1.04s; }

/* キッカーの横棒は左から伸びる */
@keyframes hero-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.js-motion.is-loaded .hero__kicker-bar {
  transform-origin: left center;
  animation: hero-bar 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

/* ------------------------------------------------------------
   3) パララックス
   ------------------------------------------------------------ */

/* --- ヒーロー背景 ---
   index.css は .hero 自身に background-image を敷いている。
   JS 有効時はそれを外し、::before を 1 枚のレイヤーにして transform で動かす
   （background-position を動かすより描画コストが低く、iOS でも安定する）。
   上下に 12% ずつ大きくしておき、動いても地が見えないようにする。 */
.js-motion .hero {
  background-image: none;
  overflow: hidden;
}

.js-motion .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: -12%;
  bottom: -12%;
  background-color: var(--hero-fallback);
  background-image: var(--img-hero-pc);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* --bg-y は .hero に JS がセットする（.hero__inner の --py とは別変数） */
  transform: translate3d(0, var(--bg-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
}

@media (max-width: 900px) {
  .js-motion .hero::before {
    background-image: var(--img-hero-sp);
    background-position: center top;
  }
}

/* ヒーローの本文は背景より少し速く上へ抜ける（奥行きの演出）。
   ※フェードアウトは不要との判断で解除済み（motion.js 側の fade も削除） */
.js-motion .hero__inner {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* 拡大せず、ほんの少しだけ動かすもの（切り抜き不要） */
.js-motion .kdb-figure__img {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* 実際のクラス名は .sec-visual__figure ではなく .sec-visual */
.js-motion .sec-visual,
.js-motion .layer-card__figure {
  overflow: hidden;
}

/* ------------------------------------------------------------
   モーション配慮
   motion.js 側でも reduce のときは js-motion を付けないが、
   付いたあとに OS 設定が変わった場合に備えて CSS でも全て打ち消す。
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .hero__kicker,
  .js-motion .hero__title,
  .js-motion .hero__sub,
  .js-motion .hero__desc,
  .js-motion .hero__actions,
  .js-motion .hero__facts .fact,
  .js-motion .hero__kicker-bar,
  .js-motion .hero__inner,
  .js-motion .hero::before,
  .js-motion .sec-visual__img,
  .js-motion .layer-card__visual,
  .js-motion .kdb-figure__img {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}
