@charset "UTF-8";
/* ========= common ========= */
.pc_only {
  display: block;
}
.sp_only {
  display: none;
}
/* ========= layout ========= */
.sim-onsale .feature-mv {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: linear-gradient(#ff729e, #ff0031);
  position: relative;
}
.sim-onsale .feature-mv .feature-mv-wrapper {
  width: 100%;
  height: 890px!important;
  position: relative;
  top: 0;
  overflow: hidden;
  background: none;
}
.sim-onsale .feature-mv .forspsim_wrap {
  position: absolute;
  top: -2px;
  width: 350px;
  height: 135px;
  overflow: hidden;
  left: 50%;
  margin-left: -182px;
  z-index: 5;
}
.sim-onsale .feature-mv .forspsim_wrap .forspsim {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.sim-onsale .feature-mv .feature-mv-wrapper .maincopy {
  position: absolute;
  height: 850px!important;
  z-index: 10;
  text-align: center;
  top: 134px;
  width: 700px;
  left: 50%;
  margin-left:-350px;
}
.sim-onsale .feature-mv .buybypp{
top:120px;
}
.sim-onsale .feature-mv .pp_s {
  width: 1020px;
  height: auto;
  min-width: 1020px;
  position: absolute;
  bottom: 260px;
  left: 50%;
  margin-left: -542px;
}
.sim-onsale .feature-mv .buybypp, .sim-onsale .feature-mv .newcam_pc, .sim-onsale .feature-mv .newcam_1, .sim-onsale .feature-mv .newcam_2, .sim-onsale .feature-mv .newcam_3, .sim-onsale .feature-mv .blribbon, .sim-onsale .feature-mv .max15n, .sim-onsale .feature-mv .arrow_wh_down, .sim-onsale .feature-mv .max2man, .sim-onsale .feature-mv .paypaypp, .sim-onsale .feature-mv .timesale_board {
  max-width: initial;
  width: 100%;
  position: absolute;
  left: 0;
}
.sim-onsale .feature-mv .buybypp {
  top:0;
width:92%;
  left:4%;
}
.sim-onsale .feature-mv .newcam_1, .sim-onsale .feature-mv .newcam_2 {
  width: 80%;
  left: 10%;
}
.sim-onsale .feature-mv .newcam_1 {
  transform: scale(0);
  top: 50px!important;
}
.sim-onsale .feature-mv .newcam_2 {
  transform: scale(0);
  top: 130px!important;
}
.sim-onsale .feature-mv .blribbon {
  top: 270px!important;
}
.sim-onsale .feature-mv .max15n {
width:44%;
  transform: scale(0);
  top: 332px!important;
  left:28%;
}
.sim-onsale .feature-mv .arrow_wh_down {
width:3%;
  top: 406px!important;
  left:48.5%;
}
.sim-onsale .feature-mv .max2man {
  transform: scale(0);
  top: 430px!important;
}

/* timesale */
.sim-onsale .feature-mv .timesale_board {
  transform: scale(0);
  top: 590px!important;
}
.sim-onsale .feature-mv .timesale_time {
  position: absolute;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  top:682px;
  width:100%;
  font-weight:bold;
  line-height:40px;
  height:40px;
  overflow:hidden;
}
.sim-onsale .feature-mv .timesale_time p {
  transform: translateY(50px);
    font-size:25px;
}
.sim-onsale .feature-mv .timesale_time span {
font-size:40px;
}

/* 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 ========= */
.sim-onsale .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);
  }
}

.sim-onsale .fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sim-onsale .slideUp {
  animation-name: slideUpAnime;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
@keyframes slideUpAnime {
  from {
    transform: translateY(50px);
  }
  to {
    transform: translateY(-12px);
  }
}

.sim-onsale .transup {
  animation: transUpAnime 1s;
}
@keyframes transUpAnime {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(300px);
  }
}
.sim-onsale .transdown {
  animation: transDownAnime 0.5s forwards;
  animation-timing-function: ease-out;
}
@keyframes transDownAnime {
  0% {
    transform: translateY(-130px);
  }
  100% {
    transform: translateY(8px);
  }
}
.sim-onsale .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);
  }
}
.sim-onsale .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);
  }
}
img[src="./img/onsale/sakura_1.png"], img[src="./img/onsale/sakura_2.png"], img[src="./img/onsale/sakura_3.png"], img[src="./img/onsale/sakura_4.png"] {
  animation: spin 5s linear infinite;
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-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/onsale/pp_1.png"], img[src="./img/onsale/pp_2.png"], img[src="./img/onsale/pp_3.png"], img[src="./img/onsale/pp_4.png"], img[src="./img/onsale/pp_5.png"] {
  height:auto!important;
}

/* delay */
.sim-onsale .delay_1 {
  animation-delay: 0.2s!important;
}
.sim-onsale .delay_2 {
  animation-delay: 0.3s!important;
}
.sim-onsale .delay_3 {
  animation-delay: 0.4s!important;
}
.sim-onsale .delay_4 {
  animation-delay: 0.5s!important;
}
.sim-onsale .delay_5 {
  animation-delay: 0.6s!important;
}
.sim-onsale .delay_6 {
  animation-delay: 0.7s;
}
.sim-onsale .delay_7 {
  animation-delay: 0.8s;
}
.sim-onsale .delay_8 {
  animation-delay: 0.9s;
}
.sim-onsale .delay_9 {
  animation-delay: 1.0s;
}
.sim-onsale .delay_10 {
  animation-delay: 1.5s;
}