@charset "UTF-8";
/**
 * animation.css — スクロール出現アニメーションの機構（全ページ共通）
 *
 * 動きの語彙は 5種（up / fade / left / right / pop）＋自動ずらし1機構だけ。
 * 基準は 0.6s / cubic-bezier(0.33, 1, 0.68, 1)（＝ easeOutCubic）。
 * 種類が増えても同じサイトの動きに感じられるよう、ここでしか定義しない。
 *
 * 長さ（--anim-duration）とイージング（--anim-ease）は「経路」で出し分ける。
 *   スクロール経路               0.6s  easeOutCubic     … 画面に入った時に出す通常の動き
 *   読み込み時経路（data-anim-load） 0.9s  easeOutCubic     … ファーストビューの登場（CEO 指示でワンテンポ遅く）
 *   ヘッダー（.header）            1.2s  easeOutCubic     … 変化が分かるようさらにゆっくり
 *   ポップ（.js-popUps の子）       0.7s  back.out(1.7)相当 … 跳ねながら順に現れる
 * 上書きは同じ詳細度のため「後に書いた方が勝つ」。順番を入れ替えないこと。
 *
 * 当て先は JS フックの .js-anim ではなく [data-anim]。
 * 操作用クラス（JS が探す目印）と装飾用（見た目）を分ける取り決めのため。
 *
 * 隠し状態は html.is-anim-ready 配下にだけ書く。
 * このクラスは assets/js/scroll-anim.js の初期化に成功した時だけ付くので、
 * JS が動かない環境ではクラスが付かず、全内容が最初から見える。
 *
 * アニメーションさせるのは transform と opacity だけ（描画のやり直しを起こさない2つ）。
 * will-change は書かない（一発物には不要）。
 */

/* -----------------------------------------------------------------------------
 * 隠し状態（未表示の対象だけ）
 * -------------------------------------------------------------------------- */
html.is-anim-ready [data-anim]:not(.is-inview) {
  opacity: 0;
}

/* 基調。見出し・カード・帯 */
html.is-anim-ready [data-anim="up"]:not(.is-inview) {
  transform: translateY(20px);
}

/* 大きな面と行リスト。移動なしで透明度だけ */
html.is-anim-ready [data-anim="fade"]:not(.is-inview) {
  transform: none;
}

/* 左右対比の文脈がある箇所だけ（find-by-use の2カード） */
html.is-anim-ready [data-anim="left"]:not(.is-inview) {
  transform: translateX(-24px);
}

html.is-anim-ready [data-anim="right"]:not(.is-inview) {
  transform: translateX(24px);
}

/* .js-popUps の子（scroll-anim.js が付ける）。縮小から原寸へ跳ねて出る */
html.is-anim-ready [data-anim="pop"]:not(.is-inview) {
  transform: scale(.8);
}

/* 読み込み時経路（ファーストビュー）はゆっくり動く分だけ移動量を大きくする。
   スクロール経路の移動量は従来のまま（上の指定）。 */
html.is-anim-ready [data-anim="up"][data-anim-load]:not(.is-inview) {
  transform: translateY(32px);
}

html.is-anim-ready [data-anim="left"][data-anim-load]:not(.is-inview) {
  transform: translateX(-36px);
}

html.is-anim-ready [data-anim="right"][data-anim-load]:not(.is-inview) {
  transform: translateX(36px);
}

/* -----------------------------------------------------------------------------
 * 動き
 * --anim-delay は scroll-anim.js が要素へ直接書き込む（自動ずらし・手動指定の両方）。
 * 指定が無い間は 0s として扱う。
 * -------------------------------------------------------------------------- */
html.is-anim-ready [data-anim] {
  transition-property: opacity, transform;
  transition-duration: var(--anim-duration, .6s);
  transition-timing-function: var(--anim-ease, cubic-bezier(.33, 1, .68, 1));
  transition-delay: var(--anim-delay, 0s);
}

/* 読み込み時経路（ファーストビュー）はワンテンポ遅く */
html.is-anim-ready [data-anim-load] {
  --anim-duration: .9s;
}

/* ヘッダーだけさらにゆっくり（0.6s では変化が分からないという指摘のため） */
html.is-anim-ready .header {
  --anim-duration: 1.2s;
}

/* ポップ（.js-popUps の子）。跳ね戻りのイージングは GSAP の back.out(1.7) 相当。
   読み込み時経路の 0.9s より後に書いて上書きする（詳細度は同じ）。 */
html.is-anim-ready .js-popUps > * {
  --anim-duration: .7s;
  --anim-ease: cubic-bezier(.34, 1.56, .64, 1);
}

/* -----------------------------------------------------------------------------
 * 表示済み（一度付いたら監視解除。以降は完成状態のまま）
 * -------------------------------------------------------------------------- */
html.is-anim-ready [data-anim].is-inview {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------------
 * 視差効果を減らす設定（OS 側）— 減衰ではなく無効化
 * scroll-anim.js が該当時に is-anim-ready を付けずに終了するため上の指定は発動しないが、
 * 読み込み後に設定が変わった場合の保険として、動きと隠し状態をここでも打ち消す。
 * （transition だけ消すと隠れたままになるので opacity・transform も戻す）
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.is-anim-ready [data-anim],
  html.is-anim-ready [data-anim]:not(.is-inview) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}