@charset "UTF-8";
/* ========= common ========= */
.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
/* ========= layout ========= */
.feature-mv {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: linear-gradient(#ff729e, #ff0031);
  position: relative;
}
.feature-mv .feature-mv-wrapper {
  width: 100%;
  height: 526px!important;
  position: relative;
  top: 0;
  overflow: hidden;
  background: none;
}
.feature-mv .forspsim_wrap {
  position: absolute;
  top: -3px;
  width: 350px;
  height: 135px;
  overflow: hidden;
  left: 50%;
  margin-left: -175px;
  z-index: 5;
}
.feature-mv .forspsim_wrap .forspsim {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.feature-mv .feature-mv-wrapper .maincopy {
  position: absolute;
  height: 532px!important;
  z-index: 10;
  text-align: center;
  top: 15px;
  width: 500px;
  margin-left: -250px;
  left: 50%;
}
.feature-mv .buybypp{
top:120px;
}
.feature-mv .pp_s {
  width: 914px;
  height: auto;
  min-width: 914px;
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -480px;
}
.feature-mv .buybypp, .feature-mv .newcam_1, .feature-mv .newcam_2, .feature-mv .newcam_3, .feature-mv .blribbon, .feature-mv .max2man, .feature-mv .paypaypp {
  max-width: initial;
  width: 100%;
  position: absolute;
  left: 0;
}
.feature-mv .newcam_1, .feature-mv .newcam_2 {
  width: 444px;
  left: 50%;
  margin-left: -220px;
}
.feature-mv .newcam_1 {
  transform: scale(0);
  top: 159px!important;
}
.feature-mv .newcam_2 {
  transform: scale(0);
  top: 227px!important;
}
.feature-mv .blribbon {
  top: 339px!important;
}
.feature-mv .max2man {
  transform: scale(0);
  top: 386px!important;
}
.feature-mv .bg_sq {
  max-width: initial;
  height: 625px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -630px;
}

/* seasonal items */
.cc1, .cc2, .cc3, .cc4, .cc5, .cc6, .cc7, .cc8, .cc9, .cc10{position:absolute;height:auto;} 
.cc1{width:250px;left:70vw;top:-10px;}
.cc2{width:200px;left:60vw;top:10px;}
.cc3{width:150px;left:30vw;top:40px;}
.cc4{width:100px;left:20vw;top:30px;}
.cc5{width:15px;left:-1vw;top:100px;}
.cc6{width:20px;right:5vw;top:300px;}
.cc7{width:80px;left:10vw;top:260px;}
.cc8{width:150px;left:-3vw;top:400px;}
.cc9{width:120px;right:0vw;top:580px;}
.cc10{width:300px;right:10vw;bottom:-100px;}

/* 注釈 */
.feature-mv .pb-10 {
  max-width: initial;
  padding: 0 10px;
}
.feature-mv .pb-10 .mb-0 {
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  color: #fff;
}
/* ========= animation ========= */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.transup {
  animation: transUpAnime 1s;
}
@keyframes transUpAnime {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(300px);
  }
}
.transdown {
  animation: transDownAnime 0.5s forwards;
  animation-timing-function: ease-out;
}
@keyframes transDownAnime {
  0% {
    transform: translateY(-130px);
  }
  100% {
    transform: translateY(8px);
  }
}
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes zoomInAnime {
  from {
    transform: scale(0.1);
  }
  to {
    transform: scale(1);
  }
}
.fuwari {
  animation: fwari ease-in-out 2s infinite alternate;
  -webkit-animation: fwari ease-in-out 2s infinite alternate;
  -moz-animation: fwari ease-in-out 2s infinite alternate;
}
@keyframes fwari {
  0% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(0%, -8px);
  }
}
@-webkit-keyframes fwari {
  0% {
    -webkit-transform: translate(0%, 0%);
  }
  100% {
    -webkit-transform: translate(0%, -8px);
  }
}
@-moz-keyframes fwari {
  0% {
    -moz-transform: translate(0%, 0%);
  }
  100% {
    -moz-transform: translate(0%, -8px);
  }
}

@-webkit-keyframes rotateX {
  50% {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }
}
@-moz-keyframes rotateX {
  50% {
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }
}
@keyframes rotateX {
  50% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    transform: rotateX(180deg);
  }
}
@-webkit-keyframes rotateZ {
  50% {
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
}
@-moz-keyframes rotateZ {
  50% {
    -moz-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
}
@keyframes rotateZ {
  50% {
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }
}
img[src="./img/pp_1.png"], img[src="./img/pp_2.png"], img[src="./img/pp_3.png"], img[src="./img/pp_4.png"], img[src="./img/pp_5.png"] {
  height:auto!important;
}

/* delay */
.delay_1 {
  animation-delay: 0.2s!important;
}
.delay_2 {
  animation-delay: 0.5s!important;
}
.delay_3 {
  animation-delay: 0.6s!important;
}
.delay_4 {
  animation-delay: 0.8s!important;
}
.delay_5 {
  animation-delay: 0.7s!important;
}
.delay_6 {
  animation-delay: 0.8s;
}