/* ============================================================
   ひといろは — アニメーションレイヤー
   ------------------------------------------------------------
   調整ポイント（duration / distance / stagger）:
   - イージング          : :root の --ease-soft
   - 汎用リビール距離     : .anim .rv の translateY(26px)
   - グループの距離/時間  : HTML側 .rv-grp の style="--gy:..px;--gd:..s"
   - グループのstagger    : HTML側 .rv-grp の data-stagger="0.1"
   - ヒーローの各delay    : 「1. ファーストビュー」ブロック内の calc() と delay
   - カウントアップ時間   : site.js 内 DUR_COUNT (ms)
   - 浮遊装飾            : @keyframes decoFloat の距離・角度・duration
   ※ すべて body.anim（JS付与）配下でのみ適用 → JS無効時は静的表示
   ============================================================ */
:root{
  --ease-soft: cubic-bezier(.22,.55,.25,1);
}

@keyframes hiFadeIn{to{opacity:1}}

/* ============ 1. ファーストビュー（index のみ / body.home） ============ */
.anim.home #sitehead{opacity:0;animation:hiFadeIn .45s ease .02s forwards}
/* ロゴ：セッション初回のみ短いフェード（PNGのためSVG描画は行わない） */
body.anim.logo-anim #sitehead a>img{opacity:0;animation:hiFadeIn .7s ease .12s forwards}

/* メインコピー：薄いブランドカラー帯が左→右へ通過した後に文字が現れる */
.hl{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
.hlt{display:inline-block}
.anim .hlt{opacity:0;transform:translateY(16px);animation:hlText .65s var(--ease-soft) calc(.38s + var(--i,0)*.12s) both}
.anim .hl::after{content:"";position:absolute;inset:4px 0;background:rgba(62,122,94,.16);border-radius:4px;transform:scaleX(0);transform-origin:0 50%;animation:hlSweep .62s var(--ease-soft) calc(.15s + var(--i,0)*.12s) both;pointer-events:none}
@keyframes hlText{to{opacity:1;transform:none}}
@keyframes hlSweep{
  0%{transform:scaleX(0);transform-origin:0 50%}
  45%{transform:scaleX(1);transform-origin:0 50%}
  55%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}
.anim .hero-desc{opacity:0;transform:translateY(12px);animation:heroUp .6s var(--ease-soft) .58s both}
.anim .hero-btn{opacity:0;transform:translateY(10px);animation:heroUp .5s var(--ease-soft) .95s both}
.anim .hero-photo{opacity:0;transform:scale(1.025);animation:heroPhoto 1s var(--ease-soft) .35s both}
.anim .hero-card{opacity:0;transform:translateX(20px);animation:heroUp .65s var(--ease-soft) .8s both}
@keyframes heroUp{to{opacity:1;transform:none}}
@keyframes heroPhoto{to{opacity:1;transform:scale(1)}}

/* ============ 2/4/8. グループリビール（stagger） ============ */
/* 使い方: 親 .rv-grp data-stagger="0.1" style="--gy:24px;--gd:.65s" / 子 .rvi */
.anim .rvi{opacity:0;transform:translateY(var(--gy,24px));transition:opacity var(--gd,.65s) var(--ease-soft),transform var(--gd,.65s) var(--ease-soft)}
.anim .rv-grp.on .rvi{opacity:1;transform:none}
/* イラストのみの微回転（カード本体は回転させない） */
.anim .rot{transform:rotate(-2deg);transition:transform .8s var(--ease-soft)}
.anim .rot-s{transform:rotate(-1.2deg);transition:transform .8s var(--ease-soft)}
.anim .rvi:nth-child(even) .rot-s{transform:rotate(1.2deg)}
.anim .rv-grp.on .rot,.anim .rv-grp.on .rot-s{transform:none}

/* ============ 3. セクション見出し（アクセント帯スイープ） ============ */
.anim .ttl-sweep{position:relative}
.anim .ttl-sweep .tt{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease-soft) .22s,transform .55s var(--ease-soft) .22s}
.anim .ttl-sweep.on .tt{opacity:1;transform:none}
.anim .ttl-sweep::after{content:"";position:absolute;left:0;top:56%;height:7px;width:min(240px,70%);background:rgba(62,122,94,.20);border-radius:4px;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.anim .ttl-sweep.on::after{animation:ttlSweep .7s var(--ease-soft) both}
@keyframes ttlSweep{
  0%{transform:scaleX(0);transform-origin:0 50%}
  48%{transform:scaleX(1);transform-origin:0 50%}
  52%{transform:scaleX(1);transform-origin:100% 50%}
  100%{transform:scaleX(0);transform-origin:100% 50%}
}

/* ============ 5. 実績数字（アイコンはカウント後にフェード） ============ */
.anim .stats-grid .stat>img{opacity:0;transform:translateY(6px) scale(.96);transition:opacity .45s ease,transform .45s ease}
.anim .stats-grid .stat.icon-in>img{opacity:1;transform:none}

/* ============ 7. 背景装飾の浮遊（2〜3個のみ） ============ */
@keyframes decoFloat{
  from{transform:translateY(-4px) rotate(-1deg)}
  to{transform:translateY(4px) rotate(1.2deg)}
}
.anim .float-deco{animation:decoFloat 12s ease-in-out -3s infinite alternate}
.anim .float-deco.f2{animation-duration:14s;animation-delay:-8s}

/* ============ 9. 最下部CTA（背景→イラスト→文章→ボタン） ============ */
.anim .cta-seq .justify-center{opacity:0;transform:translateX(8px);transition:opacity .6s var(--ease-soft) .18s,transform .6s var(--ease-soft) .18s}
.anim .cta-seq.on .justify-center{opacity:1;transform:none}
.anim .cta-seq p{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease-soft) .34s,transform .55s var(--ease-soft) .34s}
.anim .cta-seq.on p{opacity:1;transform:none}
.anim .cta-seq a.group{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-soft) .5s,transform .5s var(--ease-soft) .5s}
.anim .cta-seq.on a.group{opacity:1;transform:none}

/* ============ ホバー強化（transform/opacityのみ・0.25s） ============ */
.guide-card .h-40 img{transition:transform .25s ease}
.guide-card:hover .h-40 img{transform:scale(1.02)}
.svc-card{transition:transform .3s ease,box-shadow .3s ease,border-color .25s ease}
.svc-img img{transition:transform .25s ease}
.svc-card:hover .svc-img img{transform:scale(1.025)}
.svc-card.border-moss\/25:hover{border-color:rgba(62,122,94,.8)}
.svc-card.border-sky\/25:hover{border-color:rgba(74,114,181,.8)}
.svc-card.border-ochre\/30:hover{border-color:rgba(222,158,51,.85)}
a.group img[src$="icon-mail.png"]{transition:transform .25s ease}
a.group:hover img[src$="icon-mail.png"]{transform:translateY(-1.5px)}

/* ============ 10. スマートフォン（<768px）：動きを弱める ============ */
@media (max-width:767px){
  .anim .rv{transform:translateY(16px)}
  .anim .rvi{transform:translateY(calc(var(--gy,24px)*.6))}
  .anim .hlt{transform:translateY(10px)}
  .anim .hero-desc{transform:translateY(8px)}
  .anim .hero-card{transform:translateX(12px)}
  .anim .rot,.anim .rot-s,.anim .rvi:nth-child(even) .rot-s{transform:none}
  .anim .float-deco.f2{animation:none}
  .anim .ttl-sweep::after{height:5px}
}

/* ============ 11. prefers-reduced-motion: 短いopacityのみに置換 ============ */
@media (prefers-reduced-motion:reduce){
  .anim.home #sitehead,body.anim.logo-anim #sitehead a>img{animation:none;opacity:1}
  .anim .hl::after,.anim .ttl-sweep::after{animation:none !important;opacity:0}
  .anim .hlt,.anim .hero-desc,.anim .hero-btn,.anim .hero-card,.anim .hero-photo{transform:none;animation:hiFadeIn .25s ease both}
  .anim .rv{transform:none !important;transition:opacity .25s ease}
  .anim .rvi{transform:none !important;transition:opacity .25s ease;transition-delay:0s !important}
  .anim .rot,.anim .rot-s,.anim .rvi:nth-child(even) .rot-s{transform:none;transition:none}
  .anim .float-deco{animation:none !important}
  .anim .ttl-sweep .tt{transform:none;transition:opacity .25s ease}
  .anim .cta-seq p,.anim .cta-seq a.group,.anim .cta-seq .justify-center{transform:none !important;transition:opacity .25s ease}
  .anim .stats-grid .stat>img{transform:none;transition:opacity .2s ease}
  .guide-card:hover,.svc-card:hover,.voice-card:hover,.news-card:hover{transform:none}
  .guide-card:hover .h-40 img,.svc-card:hover .svc-img img{transform:none}
}