/* 杉戸タクシー ポップな動き（2026-10-20）。山中商店と同じ水準の動きを、杉戸タクシー向けに弾む・親しみのある調子で。
   既存の st-watch / st-rise / st-chars の仕組みには手を入れず、移動は translate / scale / rotate（個別プロパティ）で足すので、
   既存の transform 指定（transform:none!important や Swiper の位置）と衝突しない。
   隠してから出す演出は、JSが動いたとき（html.pp-on）だけ有効にする。
   reduced-motion：表示のための動きは止めない（殿の環境は常時ON）。自動で繰り返す装飾だけ弱める。 */
:root { --pp-pop: cubic-bezier(.34,1.56,.64,1); --pp-pop-soft: cubic-bezier(.22,1.3,.36,1); --pp-ease: cubic-bezier(.23,1,.32,1); }

/* 1. 見出しを1文字ずつ下からぴょこっと（JSが .pp-ch に分割した見出し） */
html.pp-on .pp-head .pp-ch { display:inline-block; opacity:0; translate:0 .55em; scale:1.25; rotate:6deg; transition:opacity .3s var(--pp-ease), translate .62s var(--pp-pop), scale .62s var(--pp-pop), rotate .62s var(--pp-pop); transition-delay:calc(var(--i) * 34ms); }
html.pp-on .pp-head.pp-in .pp-ch { opacity:1; translate:0 0; scale:1; rotate:0deg; }
html.pp-on .pp-head .pp-ch.-w { white-space:nowrap; }
@media (max-width:767px) { html.pp-on .pp-head .pp-ch { transition-delay:calc(var(--i) * 22ms); } }

/* 2. 英字の小見出し（eyebrow）を左からすべり込ませる */
html.pp-on .pp-eyebrow { opacity:0; translate:-1.2em 0; transition:opacity .4s var(--pp-ease), translate .6s var(--pp-pop); }
html.pp-on .pp-eyebrow.pp-in { opacity:1; translate:0 0; }

/* 3. カードやパネルが、少し跳ねて出る（JSが .pp-card を付けた要素を順番に） */
html.pp-on .pp-card { opacity:0; translate:0 28px; scale:.94; transition:opacity .45s var(--pp-ease), translate .7s var(--pp-pop-soft), scale .7s var(--pp-pop-soft); transition-delay:calc(var(--i, 0) * 70ms); }
html.pp-on .pp-card.pp-in { opacity:1; translate:0 0; scale:1; }

/* 4. カード・ボタンのホバー：持ち上がって少し弾む（マウスのある端末だけ） */
@media (hover:hover) {
  html.st-brand-a :is(.st-kv-actions__card,.st-ride-card,.st-area-card,.top-service__item,.st-bento__panel,.st-drv__card,.st-solutions__card,.st-ct,.st-route,.flowc,.voice,.lp-day__card,.st-history-card__faq,.top-intro__link,.st-rail__item,.st-mv,.num,.fitq,.lp-co__points li,.rc-steps li,.st-step) { transition:translate .45s var(--pp-pop), scale .45s var(--pp-pop), rotate .45s var(--pp-pop), box-shadow .35s var(--pp-ease); }
  html.st-brand-a :is(.st-kv-actions__card,.st-ride-card,.st-area-card,.top-service__item,.st-bento__panel,.st-drv__card,.st-solutions__card,.st-ct,.st-route,.flowc,.voice,.lp-day__card,.top-intro__link,.st-rail__item,.st-mv,.num,.lp-co__points li,.rc-steps li,.st-step):hover { translate:0 -8px; rotate:-.6deg; box-shadow:0 1.6rem 2.8rem rgba(4,34,92,.18); }
  html.st-brand-a .st-kv-actions__card:hover { scale:1.03; }
  html.st-brand-a .st-kv-actions__card .st-kv-actions__icon { transition:scale .45s var(--pp-pop), rotate .45s var(--pp-pop); }
  html.st-brand-a .st-kv-actions__card:hover .st-kv-actions__icon { scale:1.14; rotate:-8deg; }
  html.st-brand-a :is(.st-btn,.lp-btn,.st-contact__tel a,.st-contact__form a,.st-heritage__more,.fit__tel,.st-training-cta__contact a,.c-btn,.pill) { transition:translate .4s var(--pp-pop), scale .4s var(--pp-pop), background-color .3s, color .3s; }
  html.st-brand-a :is(.st-btn,.lp-btn,.st-contact__tel a,.st-contact__form a,.st-heritage__more,.fit__tel,.st-training-cta__contact a,.c-btn,.pill):hover { translate:0 -3px; scale:1.04; }
  html.st-brand-a :is(.st-ride-card,.st-area-card,.top-service__item,.st-mv,.st-rail__item,.voice) img { transition:scale .6s var(--pp-pop); }
  html.st-brand-a :is(.st-ride-card,.st-area-card,.top-service__item,.st-mv,.st-rail__item):hover img { scale:1.06; }
}
html.st-brand-a :is(.st-kv-actions__card,.st-btn,.lp-btn,.st-mobile-actions a,.st-contact__tel a):active { scale:.96; transition-duration:.12s; }

/* 5. すぎたっくん・社長などのキャラクター：ぴょんと登場して、そのあと軽く呼吸 */
html.pp-on .pp-chara { opacity:0; translate:0 36px; scale:.82; rotate:-6deg; transition:opacity .4s var(--pp-ease), translate .8s var(--pp-pop), scale .8s var(--pp-pop), rotate .8s var(--pp-pop); }
html.pp-on .pp-chara.pp-in { opacity:1; translate:0 0; scale:1; rotate:0deg; }
html.pp-on .pp-chara.pp-live { animation:pp-breathe 3.6s ease-in-out infinite; animation-delay:var(--pp-d, 0s); }
@keyframes pp-breathe { 0%,100% { translate:0 0; rotate:0deg; } 30% { translate:0 -6px; rotate:-1.5deg; } 60% { translate:0 -2px; rotate:1deg; } }
@media (max-width:767px) { @keyframes pp-breathe { 0%,100% { translate:0 0; } 50% { translate:0 -4px; } } }

/* 6. 数字：カウントが着地したら、ぽんと弾む */
.pp-land { animation:pp-land .55s var(--pp-pop); }
@keyframes pp-land { 0% { scale:1; } 40% { scale:1.18; } 100% { scale:1; } }
html.st-brand-a .js-count, html.st-brand-a .num dd { display:inline-block; }

/* 7. 吹き出し：ぽよんと出る */
html.st-brand-a .st-menu__random__comment { transition:opacity .3s var(--pp-ease), visibility .3s, transform .55s var(--pp-pop); }
html.st-brand-a .st-boss__bubble { scale:.5; transform-origin:20% 100%; transition:opacity .3s var(--pp-ease), scale .5s var(--pp-pop); }
html.st-brand-a .st-boss__bubble.is-on { scale:1; }
html.pp-on .c-bubble.pp-bubble { opacity:0; scale:.4; transform-origin:30% 100%; transition:opacity .3s var(--pp-ease), scale .6s var(--pp-pop); }
html.pp-on .c-bubble.pp-bubble.pp-in { opacity:1; scale:1; }

/* 8. メニュー：右からすべり込み、項目が順番にぴょこっと */
html.st-brand-a .st-menu .st-menu__body { translate:3.2rem 0; transition:translate .55s var(--pp-pop); }
html.st-brand-a .st-menu.is-open .st-menu__body { translate:0 0; }
html.st-brand-a .st-menu .st-menu__parent { opacity:0; translate:0 12px; transition:opacity .35s var(--pp-ease), translate .5s var(--pp-pop); }
html.st-brand-a .st-menu.is-open .st-menu__parent { opacity:1; translate:0 0; }
html.st-brand-a .st-menu.is-open .st-menu__parent:nth-of-type(n) { transition-delay:calc(var(--pp-m, 0) * 45ms + 120ms); }

/* 9. 配車ボタン：「押せる」と気づくように、ときどき弾む */
html.st-brand-a .st-fab:not(.is-open) .st-fab__btn { animation:pp-nudge 4.2s var(--pp-ease) 3s infinite; }
html.st-brand-a .st-mobile-actions a { animation:pp-nudge 5.4s var(--pp-ease) 4s infinite; }
html.st-brand-a .st-mobile-actions a:nth-child(2) { animation-delay:4.25s; }
html.st-brand-a .st-mobile-actions a:nth-child(3) { animation-delay:4.5s; }
@keyframes pp-nudge { 0%,82%,100% { translate:0 0; scale:1; } 87% { translate:0 -5px; scale:1.04; } 92% { translate:0 0; scale:.98; } 96% { translate:0 -2px; scale:1.01; } }

/* 10. 採用の地域LP：ヒーロー見出しの入場を、reduced-motion でも再生する（他ページと同じ方針）。着地は少し弾む */
.lp-js .lp-hero__line>span { animation:pp-lp-rise 1.05s var(--pp-pop-soft) both; }
.lp-js .lp-hero__line:nth-child(2)>span { animation-delay:.14s; }
.lp-js .lp-hero__line:nth-child(3)>span { animation-delay:.28s; }
@keyframes pp-lp-rise { from { transform:translateY(105%); } to { transform:none; } }

/* 自動で繰り返す装飾だけ、reduced-motion では弱める */
@media (prefers-reduced-motion:reduce) {
  html.pp-on .pp-chara.pp-live { animation-duration:9s; }
  html.st-brand-a .st-fab:not(.is-open) .st-fab__btn, html.st-brand-a .st-mobile-actions a { animation-iteration-count:2; }
}

/* 分割した文字は、親の見出しの大きさ・色・縁取り・影をそのまま受け継ぐ（位置で span を装飾する既存CSSに拾われないように） */
html.pp-on .pp-head .pp-ch:not(#pp-a):not(#pp-b) { font-size:inherit!important; color:inherit!important; -webkit-text-fill-color:inherit!important; -webkit-text-stroke:inherit!important; text-shadow:inherit!important; paint-order:inherit!important; line-height:inherit!important; font-weight:inherit!important; background:none!important; margin:0!important; padding:0!important; vertical-align:baseline!important; transform:none!important; }