@charset "UTF-8";
.p-front {
  width: 100%;
  overflow: hidden;
}
/*---------------------------------------------------------
main
---------------------------------------------------------*/
[class^="top_main_0"] {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.fv-title {
  opacity: 0;
  filter: blur(40px);
  transform:
    perspective(1200px) translateZ(-1200px) scale(.1);
}
.fv-title.is-active {
  animation: laserIn .9s cubic-bezier(.16, .84, .25, 1.2) forwards;
}
@keyframes laserIn {
  0% {
    opacity: 0;
    transform:
      perspective(1200px) translateZ(-1200px) scale(.1);
    filter: blur(40px);
  }
  60% {
    opacity: 1;
    transform:
      perspective(1200px) translateZ(0) scale(1.12);
    filter: blur(0);
  }
  80% {
    transform:
      scale(.96);
  }
  100% {
    opacity: 1;
    transform:
      scale(1);
    filter: blur(0);
  }
}
.character {
  opacity: 0;
  transform-origin: center bottom;
  filter: blur(30px);
  transform: scale(.15) translateY(120px);
}
.character.is-active {
  animation: heroRush .95s cubic-bezier(.16, .84, .25, 1.2) forwards;
}
@keyframes heroRush {
  0% {
    opacity: 0;
    transform:
      scale(.15) translateY(120px);
    filter: blur(30px);
  }
  60% {
    opacity: 1;
    transform:
      scale(1.12) translateY(0);
    filter: blur(0);
  }
  78% {
    transform:
      scale(.98) translateY(0);
  }
  100% {
    opacity: 1;
    transform:
      scale(1) translateY(0);
    filter: blur(0);
  }
}
.side {
  opacity: 0;
}
.side.is-active {
  animation-name: sideAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes sideAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.deco {
  opacity: 0;
}
.deco.is-active {
  animation-name: sideAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes sideAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/*---------------------------------------------------------
item
---------------------------------------------------------*/
[class^="top_item_0"] {
  width: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/*---------------------------------------------------------
parts
---------------------------------------------------------*/
.top_parts_01 {
  width: 30%;
  height: auto;
  position: absolute;
  top: -14%;
  right: 0;
}
/*---------------------------------------------------------
btn
---------------------------------------------------------*/
[class^="top_btn_0"] {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
/*---------------------------------------------------------
slider
---------------------------------------------------------*/
.slide-area {
  display: block;
  width: 100%;
  background-color: #fff;
}
.slide-area .swiper {
  width: 100%;
  position: relative;
  padding-bottom: 8.6%;
  /* ←ここでスペース確保 */
}
.slide-area .swiper-slide {
  width: 49.7%;
}
.slide-area .swiper-slide img {
  width: 100%;
  height: auto;
  /* ←これ重要（歪み防止） */
  display: block;
}
.slide-area .swiper-wrapper {
  position: relative;
  z-index: 1;
}
/* 左ボタン */
.swiper-button-prev,
.swiper-button-next {
  width: 40px;
  /* ボタンサイズ */
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
  top: 42%;
}
.swiper-button-prev {
  background-image: url('../images/top/slide/img-slide-btn_01.png');
  left: 12%;
}
/* 右ボタン */
.swiper-button-next {
  background-image: url('../images/top/slide/img-slide-btn_02.png');
  right: 12%;
}
/* デフォルトの矢印を非表示にする */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: '';
}
@media screen and (max-width: 750px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: calc((60/ 750) * 100%);
    height: calc((60/ 750) * 100%);
    font-size: 1.5vw;
    top: 50%;
    transform: translateY(-50%);
  }
  .swiper-button-prev {
    left: 5vw;
  }
  .swiper-button-next {
    right: 5vw;
  }
}