/* animation */
/**loading logo**/
.opening-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .55s ease, visibility .55s ease;
}

.opening-loader.is-hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.opening-loader__logo-wrap{
  position:relative;
  width:150px;
  overflow:hidden;

  transform-origin:center center;

  animation:
    logo-heartbeat .95s cubic-bezier(.16, 1, .3, 1) 1.02s 1 both;
}

@keyframes logo-heartbeat{

  0%{
    transform:scale(1);
  }

  14%{
    transform:scale(1.08);
  }

  30%{
    transform:scale(1.55);
  }

  44%{
    transform:scale(.72);
  }

  58%{
    transform:scale(0.68);
  }

  74%{
    transform:scale(.92);
  }

  100%{
    transform:scale(1);
  }

}

.opening-loader__logo{
  display:block;
  width:100%;
  height:auto;
}

.opening-loader__mask{
  position:absolute;
  inset:0;
  background:#fff;
  transform:translateY(0);
  animation:logo-mask-up .75s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}

@keyframes logo-mask-up{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(-105%);
  }
}

@keyframes logo-heartbeat{
  0%{
    transform:scale(1);
  }
  42%{
    transform:scale(1.12);
  }
  70%{
    transform:scale(.98);
  }
  100%{
    transform:scale(1);
  }
}

/**anime**/
.category-deco{
  position:absolute;
  z-index:5;
  pointer-events:none;
  opacity:0;
}

/* 落ちてくる：重さあり */
.deco-drop{
  transform:translateY(-120px) scaleY(1);
}

.top-category-card.is-visible .deco-drop{
  animation:deco-drop-heavy 1.05s cubic-bezier(.18,.89,.32,1.28) .25s forwards;
}

@keyframes deco-drop-heavy{
  0%{
    opacity:0;
    transform:translateY(-120px) scaleY(1);
  }
  65%{
    opacity:1;
    transform:translateY(8px) scaleY(.92);
  }
  78%{
    transform:translateY(-5px) scaleY(1.04);
  }
  90%{
    transform:translateY(2px) scaleY(.98);
  }
  100%{
    opacity:1;
    transform:translateY(0) scaleY(1);
  }
}

/* 横から出る：おんぼろ車っぽくゆっくり */
.deco-slide{
  transform:translateX(160px) rotate(-2deg);
}

.top-category-card.is-visible .deco-slide{
  animation:deco-slide-retro 1.8s cubic-bezier(.22,.61,.36,1) .35s forwards;
}

@keyframes deco-slide-retro{
  0%{
    opacity:0;
    transform:translateX(160px) rotate(-3deg);
  }
  35%{
    opacity:1;
    transform:translateX(80px) rotate(2deg);
  }
  60%{
    transform:translateX(35px) rotate(-1deg);
  }
  82%{
    transform:translateX(8px) rotate(1deg);
  }
  100%{
    opacity:1;
    transform:translateX(0) rotate(0);
  }
}
/* 横から出る：おんぼろ車っぽくゆっくり 左から*/
/* 左から出る：おんぼろ車っぽくゆっくり */
.deco-slide2{
  transform:translateX(-160px) rotate(2deg);
}

.top-category-card.is-visible .deco-slide2{
  animation:deco-slide-retro2 1.8s cubic-bezier(.22,.61,.36,1) .35s forwards;
}

@keyframes deco-slide-retro2{
  0%{
    opacity:0;
    transform:translateX(-160px) rotate(3deg);
  }

  35%{
    opacity:1;
    transform:translateX(-80px) rotate(-2deg);
  }

  60%{
    transform:translateX(-35px) rotate(1deg);
  }

  82%{
    transform:translateX(-8px) rotate(-1deg);
  }

  100%{
    opacity:1;
    transform:translateX(0) rotate(0);
  }
}

/* 中央から右へ：レトロにゆっくり流れる */
.deco-slide3{
  transform:translateX(0) rotate(2deg);
}

.top-category-card.is-visible .deco-slide3{
  animation:
    deco-slide-retro3 2.4s cubic-bezier(.22,.61,.36,1) .35s forwards;
}

@keyframes deco-slide-retro3{

  0%{
    opacity:0;
    transform:translateX(-50%) rotate(3deg);
  }

  18%{
    opacity:1;
    transform:translateX(-35%) rotate(-2deg);
  }

  42%{
    transform:translateX(-15%) rotate(1deg);
  }

  70%{
    transform:translateX(0%) rotate(-1deg);
  }

  100%{
    opacity:1;
    transform:translateX(18%) rotate(0);
  }

}
@media (min-width:768px){
  @keyframes deco-slide-retro3{

    0%{
      opacity:0;
      transform:translateX(-60%) rotate(3deg);
    }

    18%{
      opacity:1;
      transform:translateX(-35%) rotate(-2deg);
    }

    42%{
      transform:translateX(-5%) rotate(1deg);
    }

    70%{
      transform:translateX(20%) rotate(-1deg);
    }

    100%{
      opacity:1;
      transform:translateX(65%) rotate(0);
    }

  }
}
/**ぴかぴか**/

.category-deco.deco-pikapika{
  position:absolute;
  opacity:0;
  -webkit-filter:brightness(1);
  filter:brightness(1);
}

.top-category-card.is-visible .category-deco.deco-pikapika{
  animation:
    deco-pikapika-in .6s ease forwards,
    deco-pikapika-light 2.4s steps(1, end) .6s infinite;
}

@keyframes deco-pikapika-in{
  to{
    opacity:1;
  }
}

@keyframes deco-pikapika-light{
  0%{
    -webkit-filter:brightness(1);
    filter:brightness(1);
  }

  10%{
    -webkit-filter:brightness(1.55);
    filter:brightness(1.55);
  }

  14%{
    -webkit-filter:brightness(2.2);
    filter:brightness(2.2);
  }

  22%{
    -webkit-filter:brightness(1.05);
    filter:brightness(1.05);
  }

  30%{
    -webkit-filter:brightness(1.85);
    filter:brightness(1.85);
  }

  45%,
  100%{
    -webkit-filter:brightness(1);
    filter:brightness(1);
  }
}
/* くるくる */
.deco-spin{
  transform:rotate(-180deg) scale(.6);
}

.top-category-card.is-visible .deco-spin{
  animation:
    deco-spin-in .8s cubic-bezier(.16, 1, .3, 1) .45s forwards,
    deco-spin-loop 3s linear 1.3s infinite;
}

@keyframes deco-drop{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes deco-slide{
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes deco-spin-in{
  to{
    opacity:1;
    transform:rotate(0) scale(1);
  }
}

@keyframes deco-spin-loop{
  from{
    transform:rotate(0) scale(1);
  }
  to{
    transform:rotate(360deg) scale(1);
  }
}
/* バイク常時表示 */
.deco-bike-vibration{
  opacity:1;

  transform-origin:center bottom;

  animation:
    deco-bike-vibration .12s linear infinite;

  will-change:transform;
}

@keyframes deco-bike-vibration{

  0%{
    transform:translate(0,0) rotate(0deg);
  }

  20%{
    transform:translate(.8px,-.4px) rotate(.45deg);
  }

  40%{
    transform:translate(-.9px,.3px) rotate(-.45deg);
  }

  60%{
    transform:translate(.6px,.4px) rotate(.35deg);
  }

  80%{
    transform:translate(-.7px,-.3px) rotate(-.35deg);
  }

  100%{
    transform:translate(0,0) rotate(0deg);
  }

}
/* キャンディードロップ缶：中身を確かめるような揺れ */
.deco-candy-shake{
  opacity:1;
  transform-origin:center center;

  animation:
    deco-candy-shake 2.6s ease-in-out infinite;

  will-change:transform;
}

@keyframes deco-candy-shake{

  0%{
    transform:translate(0,0) rotate(0deg);
  }

  8%{
    transform:translate(-3px,1px) rotate(-7deg);
  }

  14%{
    transform:translate(4px,-1px) rotate(8deg);
  }

  20%{
    transform:translate(-4px,1px) rotate(-8deg);
  }

  26%{
    transform:translate(3px,0) rotate(6deg);
  }

  32%{
    transform:translate(-2px,1px) rotate(-4deg);
  }

  40%{
    transform:translate(0,0) rotate(0deg);
  }

  100%{
    transform:translate(0,0) rotate(0deg);
  }

}
.deco-01{
  left:10px;
  top:-70px;
  width:70px;
}

.deco-02{
  right:0px;
  top:-45px;
  width:180px;
}

.deco-03{
  right:5px;
  top:45px;
  width:40px;
}
.deco-04{
  left:0px;
  top:-45px;
  width:180px;
}
.deco-05{
  right:0px;
  top:45px;
  width:70px;
}
.deco-06{
  left:0px;
  top:-95px;
  width:147px;
}
.deco-07{
  left:0px;
  top:-79px;
  width:145px;
}
.deco-08{
  left:50%;
  top:15px;
  width:32vw;
  max-width:170px;
  min-width:120px;
}
.deco-09{
  left:0px;
  top:-30px;
  width:175px;
}
.deco-10{
  right:5px;
  top:45px;
  width:80px;
}

.opening-loader{
  display:flex;
  align-items:center;
  justify-content:center;
}

.opening-loader__logo-wrap{
  position:relative;
  width:150px;
  overflow:hidden;
  transform-origin:50% 50%;
  will-change:transform;
}

.opening-loader__logo{
  display:block;
  width:100%;
  height:auto;
}


.top-category-card.is-visible{
  opacity:1;
  transform:translateY(0);
}

.journal-title-visual .journal-title-deco{
  opacity:1;
}

.journal-title-visual .deco-drop{
  animation:deco-drop-heavy 1.05s cubic-bezier(.18,.89,.32,1.28) .25s forwards;
}

.journal-title-visual .deco-spin{
  animation:
    deco-spin-in .8s cubic-bezier(.16, 1, .3, 1) .45s forwards,
    deco-spin-loop 3s linear 1.3s infinite;
}