/* ===== SP/タブレット/タッチ端末用マスコット（lib/sp-mascot.js）のCSS =====
   2026-09-09 assets/mobile-1.css（175〜265行）から一字一句そのまま移動。
   理由: iPad Pro 横向き(1194/1366px)は「幅>1024 かつ タッチ」で、PC虎(tiger-nav.js はタッチで起動しない)も
   SP虎(mobile-1.css が max-width:1024 でしか読まれない)も出なかった。
   読み込み条件は index.html の <link media> と下の @media を「幅≤1024 または hover:none または pointer:coarse」に揃え、
   tiger-nav.js の除外条件と完全に相補にしている（虎はどの端末でも必ず1匹）。
   ≤1024px の見た目は移動前と同一（ルール本体は無変更）。 */

/* ===== SP/タブレット専用マスコット v5「金線の振り付け」（lib/sp-mascot.js が body 直下に生成） =====
   金線の上に固定で住み、セクションの節目ごとに「実際に歩いて」定位置を移る（PC版振り付けの軽量版）。
   その場歩きはピン留め区間で背景が動かず嘘に見えるため廃止。transform遷移の時間はJSが距離から算出。
   スプライト送りは必ずpx（%は「画像幅−ボックス幅」比で破綻）。サイズは --spmh-h だけで全追従。 */
@media (max-width:1024px), (hover:none), (pointer:coarse){
  .spmh{
    --spmh-h:clamp(72px, 12vw + 30px, 150px);   /* 画面幅連動: 390→77px / 768→122px / 1024→153px */
    position:fixed;
    right:2vw;
    bottom:calc(max(8.5vh,66px) - 6px);   /* 足元を金線に6px食い込ませ接地 */
    width:calc(var(--spmh-h) * 1.07);
    height:var(--spmh-h);
    z-index:96;
    pointer-events:none;
    transform:translateX(calc(-100vw - 100%));   /* 初期=画面外左（入場前） */
    transition-property:transform;
    transition-timing-function:linear;
  }
  .spmh__walk,.spmh__sit{
    position:absolute;top:0;bottom:0;left:50%;
    transform:translateX(-50%);
    display:none;
    background-repeat:no-repeat;
    background-position:0 0;
  }
  .spmh__walk{
    width:calc(var(--spmh-h) * 1.07);
    background-image:url("../assets/mascot/_web/sp/tiger-walk-sprite.png");
    background-size:calc(var(--spmh-h) * 1.07 * 16) 100%;
  }
  .spmh__sit{
    width:calc(var(--spmh-h) * 1.15);
    background-image:url("../assets/mascot/_web/sp/tiger-hero-blink.png");
    background-size:calc(var(--spmh-h) * 1.15 * 12) 100%;
  }
  /* --- 入場（画面外左→右端の定位置。素材は左向き→右歩きは反転） --- */
  .spmh.is-enter{animation:spmh-enter 3.2s linear forwards}
  .spmh.is-enter .spmh__walk{
    display:block;
    transform:translateX(-50%) scaleX(-1);
    animation:spmh-walkstep .8s steps(16) infinite;
  }
  /* --- 待機 --- */
  .spmh.is-seated .spmh__sit{display:block}
  .spmh.is-blink .spmh__sit{animation:spmh-blink 1.1s steps(12) 1}
  /* --- 歩行（JSが transform とduration を駆動。向きは is-flip） --- */
  .spmh.is-walking .spmh__sit{display:none}
  .spmh.is-walking .spmh__walk{
    display:block;
    animation:spmh-walkstep .55s steps(16) infinite;
  }
  .spmh.is-flip .spmh__walk{transform:translateX(-50%) scaleX(-1)}
  /* 終幕の虎が画面内にいる間は固定の虎を消す（猛スクロール時に2匹並ぶのを防ぐバトンタッチ） */
  .spmh.is-yield{visibility:hidden}
  @keyframes spmh-enter{
    from{transform:translateX(calc(-100vw - 100%))}
    to  {transform:translateX(0)}
  }
  @keyframes spmh-walkstep{
    from{background-position-x:0}
    to  {background-position-x:calc(var(--spmh-h) * 1.07 * -16)}
  }
  @keyframes spmh-blink{
    from{background-position-x:0}
    to  {background-position-x:calc(var(--spmh-h) * 1.15 * -12)}
  }
}
/* 終幕の虎（.cta-banners 先頭に in-flow）: バナーの右上に座って見送る。PCでは出さない。 */
.spmf{display:none}
@media (max-width:1024px), (hover:none), (pointer:coarse){
  /* height:0 のアンカー＝レイアウトに一切高さを足さない（カードとバナーの間隔を広げない）。
     虎は絶対配置で上に乗り、bottom:-6px でバナーの上枠に足が6px重なって「座ってる」形になる
     （DOM順でバナーが後＝足先はバナーの枠の奥に隠れる）。8/5に2枚積みになっても常に1枚目の上。 */
  /* z-index:3 — バナー(.cta-banner)の filter がスタッキング文脈を作るため、
     指定しないと虎の足がバナーの枠の下に潜る。虎は常に最前面。 */
  .spmf{--spmh-h:clamp(72px, 12vw + 30px, 150px);display:block;position:relative;height:0;z-index:3;pointer-events:none}
  .spmf__f{
    position:absolute;right:4vw;bottom:-6px;
    width:calc(var(--spmh-h) * 1.15);height:var(--spmh-h);
    background-image:url("../assets/mascot/_web/sp/tiger-hero-blink.png");
    background-repeat:no-repeat;background-position:0 0;
    background-size:calc(var(--spmh-h) * 1.15 * 12) 100%;
  }
  .spmf.is-blink .spmf__f{animation:spmh-blink 1.1s steps(12) 1}
}

@media (prefers-reduced-motion: reduce){
  .spmh{transition:none!important}
  .spmh.is-enter{animation:none}
}