/* スクロール表示アニメーション（旧 jquery.inview + animate.css の置き換え） */

/* JS が動かない環境では最初から表示する（style.css の opacity:0 を打ち消す） */
.fadeInDownTrigger,
.fadeInUpTrigger,
.fadeInLeftTrigger {
  opacity: 1;
}

html.js-reveal .fadeInDownTrigger,
html.js-reveal .fadeInUpTrigger,
html.js-reveal .fadeInLeftTrigger {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 0), 0);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-stagger, 0s) + var(--reveal-delay, 0s));
}
html.js-reveal .is-revealed {
  opacity: 1;
  transform: none;
}

/* 方向ごとの移動量（旧: 要素幅 100% ぶん移動 → 数十px に） */
.fadeInDownTrigger { --reveal-y: -16px; }
.fadeInUpTrigger { --reveal-y: 16px; }
.fadeInLeftTrigger { --reveal-x: -24px; }
/* 本文は横に流さずフェード＋わずかに上へ。見出しの少し後に出す */
.fadeInLeftTrigger.text { --reveal-x: 0; --reveal-y: 12px; --reveal-delay: 0.15s; }

/* ファーストビュー：ロゴ → キャッチの順 */
#main h1.fadeInDownTrigger { --reveal-delay: 0.1s; }
#main .exp.fadeInUpTrigger { --reveal-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .fadeInDownTrigger,
  html.js-reveal .fadeInUpTrigger,
  html.js-reveal .fadeInLeftTrigger {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- 文字サイズ（見出しが本文に対して大きすぎるのを抑える） --- */
#concept h2 {
  font-size: clamp(32px, 3.6vw, 52px);
}
#service .serviceBox .serviceDetail h3 {
  font-size: clamp(34px, 3.2vw, 48px);
  margin: 0 0 28px;
}

/* スマホは大きめ・左寄せの4段組（Making / Your / Visions A / Reality.）を維持する */
.sp-br { display: none; }
@media screen and (max-width: 720px) {
  #concept h2 { font-size: 52px; }
  .sp-br { display: inline; }
}