@charset "UTF-8";
/* ============================================================
   hero-deco.css — 営業AIソリューション LP：装飾レイヤー
   （ヒーローの建物・植栽・小物＋01/05 セクションの人物イラスト）
   読み込み順： reset.css → index.css → hero-deco.css → motion.css
   対になる HTML： .hero 内の .hero-deco ／ #issue・#process 内の .figure-deco

   【方針】
   - index.css には手を入れない。このファイルと HTML の
     .hero-deco ブロックを消せば完全に元へ戻る。
   - 装飾は .hero__inner（z-index:1）より下、背景画像より上に敷く。
     pointer-events:none / aria-hidden="true" なので操作・読み上げには影響しない。
   - 要素は2階層にする。
       外側 span … 読み込み時の「登場」（transform）
       内側 img  … 常時の「浮遊」ループ（transform）
     同じ要素に transform を使うアニメを2つ当てると片方が無効になるため。
   - パララックスは motion.js に任せる（--py を読むだけ）。
     motion.js が無くても装飾は静かに浮いているだけで成立する。

   【調整の入口】
     配置・大きさ・速度はすべて「配置」節のカスタムプロパティで完結。
       --w   … 表示幅
       --dly … 登場ディレイ（浮遊の位相ずらしも兼ねる）
       --dur … 浮遊1往復の時間
       --o   … 表示後の不透明度
       --r0 / --r1 … 浮遊時の回転（葉のゆらぎ用）
       --sx  … -1 で左右反転
   ============================================================ */

/* ------------------------------------------------------------
   レイヤー
   ------------------------------------------------------------ */
/* 装飾が画面外へはみ出さないように切る。
   motion.css も js-motion 時に同じ指定をしているが、
   JS が動かない環境でも必要なのでここで無条件に当てる。 */
.hero {
  overflow: hidden;
}

.hero-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* --back（植物）→ --front（小物）の順に DOM へ置くことで、
   小物が植物の手前に来る。z-index は使わない。 */

.hero-deco__item {
  position: absolute;
  display: block;
  width: var(--w, 120px);
  opacity: 0;
  animation: deco-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--dly, 0s) both;
}

.hero-deco__item img {
  width: 100%;
  animation: deco-float var(--dur, 7s) ease-in-out var(--dly, 0s) infinite alternate;
  will-change: transform;
}

@keyframes deco-in {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.96);
  }
  to {
    opacity: var(--o, 1);
    transform: none;
  }
}

@keyframes deco-float {
  from {
    transform: translate3d(0, 0, 0) scaleX(var(--sx, 1)) rotate(var(--r0, 0deg));
  }
  to {
    transform: translate3d(0, -12px, 0) scaleX(var(--sx, 1)) rotate(var(--r1, 0deg));
  }
}

/* ------------------------------------------------------------
   配置（PC基準：901px 以上）
   ------------------------------------------------------------ */

/* --- 奥：建物と植栽 --- */
/* いずれも地に着いている絵なので、浮遊はごく小さくする（下の deco-float-still）。
   建物は透明余白を切り落とし済みなので bottom: 0 でそのまま接地する。
   建物はコーナーから少し内側へ寄せ、両端の植栽と重ねて奥行きを出す。 */
.deco--office {
  left: 0%;
  bottom: 0;
  --w: clamp(160px, 19vw, 200px);
  --dly: 0.44s;
  --dur: 9s;
}

.deco--factory {
  right: 0%;
  bottom: 0;
  --w: clamp(190px, 22vw, 340px);
  --dly: 0.54s;
  --dur: 10s;
}

.deco--corner-l {
  left: 0;
  bottom: 0;
  --w: clamp(110px, 13vw, 200px);
  --dly: 0.64s;
  --dur: 9.5s;
}

.deco--corner-r {
  right: 0;
  bottom: 0;
  --w: clamp(100px, 12vw, 185px);
  --dly: 0.74s;
  --dur: 10.5s;
}

/* --- 手前：小物 --- */
.deco--pc {
  right: 25%;
  bottom: 9%;
  --w: clamp(64px, 7vw, 110px);
  --dly: 1.10s;
  --dur: 7.4s;
  --r0: -2deg;
  --r1: 2deg;
}

/* CTAボタンと重なるため、見出し上の余白（上部中央）へ移設 */
.deco--book {
  left: 46%;
  top: 15%;
  --w: clamp(56px, 6vw, 92px);
  --dly: 1.20s;
  --dur: 8.2s;
  --r0: 3deg;
  --r1: -3deg;
}

.deco--mail {
  left: 47%;
  bottom: 7%;
  --w: clamp(44px, 4.6vw, 72px);
  --dly: 1.30s;
  --dur: 6.4s;
  --r0: -3deg;
  --r1: 3deg;
}

/* 建物・植栽は移動量をごく小さくする（回転もしない） */
.deco--office img,
.deco--factory img,
.deco--corner-l img,
.deco--corner-r img {
  animation-name: deco-float-still;
}

@keyframes deco-float-still {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -4px, 0);
  }
}

/* ------------------------------------------------------------
   パララックス（motion.js が --py を更新したときだけ効く）
   ------------------------------------------------------------ */
.js-motion .hero-deco {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* ------------------------------------------------------------
   レスポンシブ
   タブレット以下は情報量を落とし、SPでは建物と植栽だけにする
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .deco--book {
    left: 42%;
    top: 12%;
  }

  .deco--pc {
    right: 21%;
  }
}

@media (max-width: 900px) {
  .deco--office,
  .deco--factory {
    --w: 34vw;
    bottom: 10px;
  }

  .deco--factory {
    --w: 40vw;
  }

  .deco--corner-l {
    --w: 26vw;
  }

  .deco--corner-r {
    --w: 23vw;
  }

  /* 文字量が増えて余白が消えるため、小物は畳む */
  .deco--pc,
  .deco--book,
  .deco--mail {
    display: none;
  }
}

/* ============================================================
   人物イラスト（01 PAIN POINT / 05 PROCESS）
   ============================================================
   セクションの下端から上半身だけを覗かせる。
   人物は縦横比 1:3 前後と縦に長いため、全身を置くと大きな空きが必要になる。
   ここでは表示枠の高さを固定し、はみ出す下半身を切り落とす。

   本文と重ならないよう、装飾の高さぶんの余白は
   .section__inner の padding-bottom を上書きして確保する。
   （index.css は触らず、ここで上書きする） */
#issue,
#process {
  position: relative;
  --fig-w: clamp(120px, 13vw, 190px);  /* 人物の幅 */
  --fig-h: calc(var(--fig-w) * 1.1);   /* 見せる高さ。大きくするほど下まで写る */
  --fig-space: var(--fig-h);
}

/* --- 01 PAIN POINT：右側に大きく置き、上下の余白を詰める ---
   RESULT のテキストは中央寄せで右側が空いているため、
   確保する余白（--fig-space）を実際の高さ（--fig-h）より小さくして
   人物をせり上がらせている。 */
#issue {
  --fig-w: clamp(150px, 17vw, 140px);
  --fig-h: calc(var(--fig-w) * 2);
  --fig-space: 100px;
}

/* z-index は position 指定がないと効かないため、relative を必ずセットで書く。
   ただしイラストを本文より前面に出したいので、装飾側をさらに上に置く */
#issue > .section__inner,
#process > .section__inner {
  position: relative;
  z-index: 1;
}

/* reveal 中の will-change で本文側に一時的な重なり文脈ができるため、
   装飾を確実に前面へ（#kdb と同じ扱い） */
#issue .figure-deco,
#process .figure-deco {
  z-index: 2;
}


.figure-deco {
  position: absolute;
  bottom: 0;
  z-index: 0;
  width: var(--fig-w);
  height: var(--fig-h);
  overflow: hidden; /* 下半身を切る */
  pointer-events: none;
}

.figure-deco img {
  width: 100%;
  height: auto; /* 上端を基準に切り取られる */
}

/* 画面が広いときはコンテンツ幅（最大1240px）の端に、
   狭いときは画面の端に寄せる */
.figure-deco--left {
  left: max(0px, calc(50% - 620px));
}

#issue .figure-deco--right {
  right: max(0px, calc(50% - 420px));
}

#process .figure-deco--right {
  right: max(0px, calc(50% - 620px));
}

/* タブレット以下は縦に詰まるので出さない */
@media (max-width: 1024px) {
  .figure-deco {
    display: none;
  }

  #issue > .section__inner,
  #process > .section__inner {
    padding-bottom: clamp(48px, 7vw, 96px);
  }
}

/* --- ナレッジデータベース：図版の右側の白い余白に立たせる --- */
#kdb {
  position: relative;
  --fig-w: clamp(120px, 11vw, 165px);
  --fig-h: calc(var(--fig-w) * 1.9); /* 頭〜太もも。上げるほど下まで写る */
}

#kdb > .section__inner {
  position: relative;
  z-index: 1;
}

/* 図版は白背景の不透明画像なので、人物を前面に出さないと塗りつぶされる */
#kdb .figure-deco {
  z-index: 2;
}

/* 人物の右端をコンテンツ（図版）の右端に合わせる
   572px = コンテナ幅の半分 620px − 左右パディング 48px */
#kdb .figure-deco--right {
  right: max(0px, calc(50% - 572px));
}

/* ------------------------------------------------------------
   モーション配慮
   動きだけ止め、装飾そのものは表示したままにする
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-deco,
  .hero-deco__item,
  .hero-deco__item img,
  .figure-deco {
    animation: none;
    opacity: var(--o, 1);
    transform: none;
  }
}