/* ============================================================
   KAT WORLD LP — 躍動感アニメーション追加レイヤー
   既存の styles.css / script.js は変更せず、後ろに読み込むだけ。
   ============================================================ */

/* ---------- 共通：スクロールリビール ---------- */
[data-rv]{opacity:0;will-change:transform,opacity}
[data-rv].is-in{opacity:1}

[data-rv="up"]      {transform:translateY(7cqw)}
[data-rv="left"]    {transform:translateX(-9cqw)}
[data-rv="right"]   {transform:translateX(9cqw)}
[data-rv="pop"]     {transform:scale(.82)}
[data-rv="punch"]   {transform:scale(1.35) rotate(-4deg)}
[data-rv="up"].is-in,[data-rv="left"].is-in,[data-rv="right"].is-in,
[data-rv="pop"].is-in,[data-rv="punch"].is-in{transform:none}

[data-rv]{transition:opacity .55s cubic-bezier(.22,.9,.3,1),
                     transform .72s cubic-bezier(.18,1.12,.32,1);
          transition-delay:var(--d,0s)}
[data-rv="punch"]{transition-timing-function:cubic-bezier(.16,1.5,.4,1)}

/* ---------- ヘッダー電話番号：いちばん目を引かせる ---------- */
.header .phone{position:relative;animation:phone-attention 5s ease-in-out infinite}
.header .phone>span{display:inline-block;transform-origin:50% 70%;
  animation:phone-ring 5s ease-in-out infinite}
/* 着信中のように小刻みに「ぷるぷる」震える（2回鳴って休む） */
@keyframes phone-attention{
  0%,54%{transform:translate(0,0) rotate(0) scale(1)}
  /* 1回目のコール */
  55%{transform:translate(-.5cqw,.2cqw) rotate(-1.4deg) scale(1.03)}
  56.5%{transform:translate(.5cqw,-.2cqw) rotate(1.4deg) scale(1.03)}
  58%{transform:translate(-.45cqw,.2cqw) rotate(-1.2deg) scale(1.03)}
  59.5%{transform:translate(.45cqw,-.2cqw) rotate(1.2deg) scale(1.03)}
  61%{transform:translate(-.35cqw,.15cqw) rotate(-1deg) scale(1.02)}
  62.5%{transform:translate(.35cqw,-.15cqw) rotate(1deg) scale(1.02)}
  64%{transform:translate(-.2cqw,0) rotate(-.6deg) scale(1.01)}
  65.5%{transform:translate(0,0) rotate(0) scale(1)}
  70%{transform:translate(0,0) rotate(0) scale(1)}
  /* 2回目のコール */
  71%{transform:translate(-.5cqw,.2cqw) rotate(-1.4deg) scale(1.03)}
  72.5%{transform:translate(.5cqw,-.2cqw) rotate(1.4deg) scale(1.03)}
  74%{transform:translate(-.45cqw,.2cqw) rotate(-1.2deg) scale(1.03)}
  75.5%{transform:translate(.45cqw,-.2cqw) rotate(1.2deg) scale(1.03)}
  77%{transform:translate(-.35cqw,.15cqw) rotate(-1deg) scale(1.02)}
  78.5%{transform:translate(.35cqw,-.15cqw) rotate(1deg) scale(1.02)}
  80%{transform:translate(-.2cqw,0) rotate(-.6deg) scale(1.01)}
  81.5%,100%{transform:translate(0,0) rotate(0) scale(1)}
}
/* 受話器アイコンは大きく左右に振れる */
@keyframes phone-ring{
  0%,54%{transform:rotate(0) scale(1)}
  55%{transform:rotate(-22deg) scale(1.18)}
  57%{transform:rotate(20deg) scale(1.18)}
  59%{transform:rotate(-18deg) scale(1.14)}
  61%{transform:rotate(16deg) scale(1.12)}
  63%{transform:rotate(-10deg) scale(1.06)}
  65.5%,70%{transform:rotate(0) scale(1)}
  71%{transform:rotate(-22deg) scale(1.18)}
  73%{transform:rotate(20deg) scale(1.18)}
  75%{transform:rotate(-18deg) scale(1.14)}
  77%{transform:rotate(16deg) scale(1.12)}
  79%{transform:rotate(-10deg) scale(1.06)}
  81.5%,100%{transform:rotate(0) scale(1)}
}
/* 着信の電波（受話器から広がる波紋） */
.header .phone>span:after{content:"";position:absolute;left:50%;top:50%;width:3cqw;height:3cqw;
  margin:-1.5cqw 0 0 -1.5cqw;border-radius:50%;border:.5cqw solid var(--green);
  opacity:0;pointer-events:none;animation:phone-wave 5s ease-out infinite}
.header .phone>span{position:relative}
@keyframes phone-wave{
  0%,54%{transform:scale(.6);opacity:0}
  56%{opacity:.75}
  66%{transform:scale(3.4);opacity:0}
  70%{transform:scale(.6);opacity:0}
  72%{opacity:.75}
  82%{transform:scale(3.4);opacity:0}
  100%{transform:scale(.6);opacity:0}
}
/* 電話番号の下に走る光のライン */
.header .phone:after{content:"";position:absolute;left:0;right:0;bottom:-.4cqw;height:.5cqw;
  border-radius:1cqw;background:linear-gradient(90deg,transparent,var(--green),transparent);
  transform:scaleX(0);transform-origin:left;animation:phone-underline 5s ease-in-out infinite}
@keyframes phone-underline{
  0%,52%{transform:scaleX(0);opacity:0;transform-origin:left}
  58%{transform:scaleX(1);opacity:1;transform-origin:left}
  84%{transform:scaleX(1);opacity:1;transform-origin:right}
  92%,100%{transform:scaleX(0);opacity:0;transform-origin:right}
}

/* ---------- コミコミ6タイル：弾けて出る ---------- */
.benefits>div{transition:transform .25s ease}
.benefits>div i{animation:tile-breathe 3.2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes tile-breathe{
  0%,88%,100%{transform:translateY(0) rotate(0)}
  91%{transform:translateY(-1cqw) rotate(-5deg)}
  94%{transform:translateY(0) rotate(4deg)}
  97%{transform:translateY(0) rotate(0)}
}

/* ---------- ヒーロー：コピーが押し込まれて出る ---------- */
.hero-copy h1 span,.hero-copy h1 em{display:inline-block}
.hero.is-in .hero-copy h1 span{animation:hero-slam .7s cubic-bezier(.16,1.4,.3,1) both}
.hero.is-in .hero-copy h1 em{animation:hero-slam .7s cubic-bezier(.16,1.4,.3,1) .12s both}
@keyframes hero-slam{
  from{opacity:0;transform:translateY(5cqw) scale(1.18);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.hero.is-in .hero-subtitle{animation:fade-up .7s ease .3s both}
.hero.is-in .hero-side-note{animation:fade-up .7s ease .42s both}
.hero.is-in .hero-english{animation:fade-up .7s ease .52s both}
.hero-subtitle span{display:inline-block;animation:price-pulse 2.6s ease-in-out infinite .9s}
@keyframes price-pulse{
  0%,80%,100%{transform:scale(1);color:inherit}
  86%{transform:scale(1.16);color:var(--bright)}
  92%{transform:scale(1)}
}
@keyframes fade-up{from{opacity:0;transform:translateY(3cqw)}to{opacity:1;transform:none}}

/* ---------- 吹き出し：ふわふわ＋登場パンチ ---------- */
.welcome .bubble{animation:bubble-float 3.4s ease-in-out infinite}
@keyframes bubble-float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-1.4cqw) rotate(-.6deg)}
}
.welcome .bubble em{display:inline-block;animation:bubble-emph 3.4s ease-in-out infinite}
@keyframes bubble-emph{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---------- 「全てコミコミのお値段です！」：飛び込んで来る ---------- */
.inclusive-heading{will-change:transform}
.inclusive-heading.is-in span:first-child{animation:slam-in .6s cubic-bezier(.14,1.6,.35,1) both}
.inclusive-heading.is-in span:last-child{animation:slam-in .6s cubic-bezier(.14,1.6,.35,1) .1s both}
@keyframes slam-in{
  from{opacity:0;transform:scale(1.9) rotate(-6deg);filter:blur(6px)}
  60%{opacity:1;filter:blur(0)}
  to{opacity:1;transform:none}
}
.inclusive-heading em{display:inline-block;animation:komikomi-wobble 2.8s ease-in-out infinite 1s}
@keyframes komikomi-wobble{
  0%,70%,100%{transform:rotate(0) scale(1)}
  76%{transform:rotate(-3deg) scale(1.08)}
  82%{transform:rotate(3deg) scale(1.08)}
  88%{transform:rotate(-1.5deg) scale(1.03)}
}

/* ---------- お悩みリスト：左から順に滑り込む ---------- */
.worries h2.rays:before,.worries h2.rays:after{animation:rays-flash 2.4s ease-in-out infinite}
.worries h2.rays:after{animation-delay:.12s}
@keyframes rays-flash{
  0%,60%,100%{opacity:1;transform:rotate(-45deg) scale(1)}
  70%{opacity:.35;transform:rotate(-45deg) scale(1.25)}
  80%{opacity:1;transform:rotate(-45deg) scale(1)}
}
.worries h2.rays:after{transform:rotate(45deg)}
.worries li i{transition:transform .5s cubic-bezier(.2,1.6,.4,1)}
.worries li[data-rv].is-in i{animation:icon-pop .6s cubic-bezier(.2,1.7,.4,1) var(--d,0s) both}
@keyframes icon-pop{
  from{transform:scale(.4) rotate(-25deg)}
  to{transform:scale(1) rotate(0)}
}

/* ---------- 理由セクション：番号とバー ---------- */
.number{display:inline-block}
.reason.is-in .number{animation:num-drop .65s cubic-bezier(.16,1.45,.35,1) both}
@keyframes num-drop{
  from{opacity:0;transform:translateY(-3cqw) scale(1.5)}
  to{opacity:1;transform:none}
}
.reason.is-in .number:after{animation:bar-draw .5s ease .35s both}
@keyframes bar-draw{from{width:0}to{width:4cqw}}
.anniversary em,.three{display:inline-block}
.reasons>h2.is-in .anniversary em{animation:num-punch .7s cubic-bezier(.14,1.6,.35,1) .1s both}
.reasons>h2.is-in .three{animation:num-punch .7s cubic-bezier(.14,1.6,.35,1) .25s both}
@keyframes num-punch{
  from{opacity:0;transform:scale(2.2) rotate(-10deg)}
  to{opacity:1;transform:none}
}
.cars{transition:transform .9s cubic-bezier(.2,.9,.3,1)}
.reason.is-in .cars{animation:cars-roll .9s cubic-bezier(.2,.95,.3,1) .2s both}
@keyframes cars-roll{
  from{opacity:0;transform:translateX(-12cqw) scale(.94)}
  to{opacity:1;transform:none}
}
.factory li{opacity:0;transform:translateX(-2cqw)}
.reason.is-in .factory li{animation:check-in .45s ease both}
.reason.is-in .factory li:nth-child(1){animation-delay:.25s}
.reason.is-in .factory li:nth-child(2){animation-delay:.37s}
.reason.is-in .factory li:nth-child(3){animation-delay:.49s}
.reason.is-in .factory li:nth-child(4){animation-delay:.61s}
@keyframes check-in{to{opacity:1;transform:none}}
/* ✓バッジを正円に（既存は inline + line-height 1.8 で縦長の楕円になる） */
.factory li:before{display:inline-grid;place-items:center;
  width:3.4cqw;height:3.4cqw;padding:0;margin-right:1.1cqw;
  font-size:2.1cqw;line-height:1;vertical-align:-.45cqw;flex-shrink:0}
.reason.is-in .factory li:before{animation:check-pop .4s cubic-bezier(.2,1.8,.4,1) both;
  animation-delay:inherit}
@keyframes check-pop{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1) rotate(0)}}

/* ---------- 審査セクション ---------- */
.consult-body h2 span{background-size:100% 100%}
.consult-heading.is-in span{animation:marker-draw 1s ease .2s both}
@keyframes marker-draw{
  from{background-image:linear-gradient(transparent 80%,#fff1a5 80%);background-size:0 100%;
       background-repeat:no-repeat}
  to{background-image:linear-gradient(transparent 80%,#fff1a5 80%);background-size:100% 100%;
     background-repeat:no-repeat}
}
.quick em{display:inline-block;animation:sixty-beat 2.2s ease-in-out infinite}
@keyframes sixty-beat{
  0%,70%,100%{transform:scale(1);color:var(--green)}
  78%{transform:scale(1.22);color:var(--bright)}
  86%{transform:scale(1)}
}
.assurances>div{transition:transform .3s ease}
.assurances.is-in>div{animation:fade-up .5s ease both}
.assurances.is-in>div:nth-child(1){animation-delay:.05s}
.assurances.is-in>div:nth-child(2){animation-delay:.14s}
.assurances.is-in>div:nth-child(3){animation-delay:.23s}
.assurances.is-in>div:nth-child(4){animation-delay:.32s}

/* ---------- 流れ：カードが交互に入り、番号が跳ねる ---------- */
.flow li .step-copy>span{position:absolute}
.flow li.is-in .step-copy>span{animation:step-bounce .65s cubic-bezier(.16,1.6,.35,1) .15s both}
@keyframes step-bounce{
  from{opacity:0;transform:scale(0) rotate(-180deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
.flow li.is-in .step-copy>span:after{content:"";position:absolute;inset:0;border-radius:50%;
  border:.6cqw solid #00b846;animation:step-ring 1.6s ease-out .5s 2}
@keyframes step-ring{
  from{transform:scale(1);opacity:.7}
  to{transform:scale(2.1);opacity:0}
}
.flow li:not(:last-child):after{animation:chev-bob 1.6s ease-in-out infinite}
@keyframes chev-bob{
  0%,100%{transform:translateY(0);opacity:.6}
  50%{transform:translateY(1.2cqw);opacity:1}
}
.step-note{animation:note-blink 3s ease-in-out infinite}
@keyframes note-blink{
  0%,78%,100%{background:#e8f9ef;transform:scale(1)}
  84%{background:#c9f3dc;transform:scale(1.03)}
  90%{background:#e8f9ef;transform:scale(1)}
}

/* ---------- 店舗カード ---------- */
.store-card{transition:transform .35s cubic-bezier(.2,1.1,.3,1),box-shadow .35s ease}
.store-card:hover{transform:translateY(-1.5cqw);box-shadow:0 3cqw 8cqw #305a6522}
.store-link span{display:inline-block;animation:arrow-nudge 1.8s ease-in-out infinite}
@keyframes arrow-nudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(1.2cqw)}
}

/* ---------- LINEボタン：光が走る＋鼓動 ---------- */
.line-button{position:relative;overflow:hidden;isolation:isolate}
.line-button:before{content:"";position:absolute;top:-50%;left:-70%;width:45%;height:200%;
  background:linear-gradient(100deg,transparent,#ffffff88,transparent);
  transform:skewX(-18deg);animation:cta-shine 4s ease-in-out infinite;pointer-events:none}
@keyframes cta-shine{
  0%,55%{left:-70%}
  78%{left:130%}
  100%{left:130%}
}
.consult-body .line-button{animation:cta-shake 4s ease-in-out infinite,cta-beat 2.4s ease-in-out infinite}
@keyframes cta-beat{
  0%,72%,100%{box-shadow:0 1.5cqw 4cqw #1cb75830}
  80%{box-shadow:0 1.5cqw 4cqw #1cb75830,0 0 0 2.2cqw #25b65422}
  92%{box-shadow:0 1.5cqw 4cqw #1cb75830,0 0 0 4cqw #25b65400}
}
.line-button .chevron{display:inline-block;animation:arrow-nudge 1.6s ease-in-out infinite}

/* ---------- フッター電話 ---------- */
.footer-address a{display:inline-block;animation:phone-attention 5s ease-in-out infinite .6s}

/* ---------- アクセシビリティ ---------- */
@media(prefers-reduced-motion:reduce){
  [data-rv],[data-rv].is-in{opacity:1!important;transform:none!important;transition:none!important}
  .header .phone,.header .phone>span,.header .phone:after,
  .header .phone>span:after,.benefits>div i,
  .welcome .bubble,.welcome .bubble em,.inclusive-heading em,.quick em,
  .flow li:not(:last-child):after,.step-note,.store-link span,.line-button:before,
  .line-button .chevron,.consult-body .line-button,.footer-address a,
  .worries h2.rays:before,.worries h2.rays:after,.hero-subtitle span{
    animation:none!important}
  .factory li{opacity:1;transform:none}
}

/* ============================================================
   FV背景の高速化
   元: assets/opening-background-v2.png = 1.87MB / 1024x1536
   後: assets/opening-background-v2.jpg =  94KB /  880px幅
   CSS背景はプリロードスキャナが拾えないので、
   ①まず1.3KBのぼかし画像(data URI)を即表示 → ②本画像に差し替え
   ============================================================ */
.opening{
  background:
    linear-gradient(180deg,rgba(241,249,252,.68) 0%,rgba(255,255,255,.40) 48%,rgba(239,247,250,.52) 100%),
    url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGqADAAQAAAABAAAAKAAAAAD/7QA4UGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAAA4QklNBCUAAAAAABDUHYzZjwCyBOmACZjs+EJ+/8AAEQgAKAAaAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMADw8PDw8PGg8PGiQaGhokMSQkJCQxPjExMTExPks+Pj4+Pj5LS0tLS0tLS1paWlpaWmlpaWlpdnZ2dnZ2dnZ2dv/bAEMBEhMTHhweNBwcNHtURVR7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e3t7e//dAAQAAv/aAAwDAQACEQMRAD8A7CSBVHynNVWjrVkUVVZc9K6IzMJRKPkljxUf2c1eK7ev5VGbhAcF+R9KvnZHKj//0PQDt71WkntkGXYCqhkmmGSFAPTmsyTzdrJOxjzyuMGmmhNMuS6hbjiFSzHoMYrJJycsygnqM9KyxI1pOcO0o45Zh0PsTmtgRqRnys578VlWUm9GEEj/0dOzu2dAJDgE4HoKsyNG42SqHArGg/1S/wDXT+laX8T1yU5O/KWZ8mk2cxLRlgT2DE/of6U4QygYFw3HtV+2/wBePoaqnqa6ibH/2Q==") center 58%/cover no-repeat,
    #edf6fa;
}
.opening.bg-ready{
  background:
    linear-gradient(180deg,rgba(241,249,252,.68) 0%,rgba(255,255,255,.40) 48%,rgba(239,247,250,.52) 100%),
    url("assets/opening-background-v2.jpg") center 58%/cover no-repeat,
    #edf6fa;
}
/* ぼかし→本画像の切り替えをふわっと見せる */
.opening:before{content:"";position:absolute;inset:0;backdrop-filter:blur(14px);
  transition:opacity .5s ease;pointer-events:none;z-index:0}
.opening{position:relative}
.opening.bg-ready:before{opacity:0}
.opening>*{position:relative;z-index:1}